*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    font-size: 16px;
}


/* Normal Status */

.fd-radioButton {
    margin: 0.75rem 0.25rem;
}

.fd-radioButton>input[type=radio] {
    z-index: -1;
    opacity: 0;
    clip: rect(0, 0, 0, 0);
    display: none;
}

.fd-radioButton>input[type=radio]+label {
    position: relative;
}

.fd-radioButton>input[type=radio]+label::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 0.125rem solid #333;
    margin-right: 0.5rem;
    vertical-align: middle;
    position: relative;
    top: -0.125rem;
    transition: left 0.2s ease-out;
}


/* Hover Status */

.fd-radioButton>input[type=radio]+label:hover::before {
    border-color: #000;
}

.fd-radioButton>input[type=radio]:checked+label:hover::after {
    background-color: #000 !important;
}


/* Foucesed Status */

.fd-radioButton>input[type=radio]+label:active::before {
    border-color: #666 !important;
}

.fd-radioButton>input[type=radio]:checked+label:active::after {
    background-color: #666 !important;
}


/* Checked Status */

.fd-radioButton>input[type=radio]:checked+label::before {
    border-color: #2996cc;
}

.fd-radioButton>input[type=radio]:checked+label::after {
    content: "";
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    transition: left 0.2s ease-out;
    background-color: #333;
    left: 0.3125rem;
    bottom: 0.3125rem;
}


/* Disabled Status */

.fd-radioButton.disabled>input[type=radio]+label,
.fd-radioButton>input[type=radio]:disabled+label {
    pointer-events: none !important;
    color: #999 !important;
}

.fd-radioButton.disabled>input[type=radio]+label::before,
.fd-radioButton>input[type=radio]:disabled+label::before {
    border-color: #999 !important;
}

.fd-radioButton.disabled>input[type=radio]+label::after,
.fd-radioButton>input[type=radio]:disabled+label::after {
    background-color: #999 !important;
}