/* Radio Buttons START */
/* Radio Buttons overrides taken from https://www.weirdpattern.com/standardizing-the-checkbox-and-radio-buttons-using-css-and-only-css*/

.radio-section-wrapper,
.checkbox-section-wrapper {
    display: flex;
    flex-direction: column;
}

    .radio-section-wrapper + .radio-section-wrapper {
        margin-top: 16px;
    }

/**
 * handles the default elements
 */
input[type="radio"].new-radio,
input[type="checkbox"].new-checkbox {
    float: left;
    clear: both;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    visibility: hidden;
}

    /**
 * builds the checkbox and the radio button
 */
    input[type="radio"].new-radio + .labelForRadio:before,
    input[type="checkbox"].new-checkbox + .labelForCheckbox:before {
        cursor: pointer;
        margin-right: 15px;
        color: transparent;
        background-color: #FFF;
        width: 24px;
        background: #F3F2F0;
    }

    /**
 * styles the radio button
 */
    input[type="radio"].new-radio + .labelForRadio:before {
        content: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='23' height='23' rx='11.5' fill='white' stroke='%23858585'/%3E%3C/svg%3E");
        border-radius: 50%;
    }

    input[type="checkbox"].new-checkbox + .labelForCheckbox:before {
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='23' height='23' fill='white' stroke='%23858585'/%3E%3C/svg%3E%0A");
        max-height: 24px;
    }

/**
 * handles ie 10+
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    input[type="radio"].new-radio + .labelForRadio,
    input[type="checkbox"].new-checkbox + .labelForCheckbox {
        padding: 3px;
    }

        input[type="radio"].new-radio + .labelForRadio:before,
        input[type="checkbox"].new-checkbox + .labelForCheckbox:before {
            padding: 0.15em;
        }
}
/**
 * handles checked
 */
input[type="radio"].new-radio:checked + .labelForRadio:before {
    content: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%2345D6D6'/%3E%3Cpath d='M5 12.7647L9.11765 16.8824L19 7' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    color: inherit;
    outline: 0 !important;
}

input[type="checkbox"].new-checkbox:checked + .labelForCheckbox:before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' fill='%2345D6D6'/%3E%3Cpath d='M5 12.7647L9.11765 16.8824L19 7' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    color: inherit;
    outline: 0 !important;
}

/**
 * handles focused
 */
input[type="radio"].new-radio:focus + .labelForRadio:before,
input[type="checkbox"].new-checkbox:focus + .labelForCheckbox:before {
    /* others */
    outline: 1px dotted #212121;
    /* chromium */
    outline: 1px solid -webkit-focus-ring-color;
}

/**
 * support focused on firefox
 */
@-moz-document url-prefix() {
    input[type="radio"].new-radio:focus + .labelForRadio:before,
    input[type="checkbox"].new-checkbox:focus + .labelForCheckbox:before {
        outline: 1px auto Highlight;
    }
}

/**
 * handles disabled
 */
input[type="radio"].new-radio:disabled + .labelForRadio,
input[type="radio"].new-radio:disabled + .labelForRadio:before,
input[type="radio"].new-radio:disabled:checked + .labelForRadio:before,
input[type="checkbox"].new-checkbox:disabled + .labelForCheckbox,
input[type="checkbox"].new-checkbox:disabled + .labelForCheckbox:before,
input[type="checkbox"].new-checkbox:disabled:checked + .labelForCheckbox:before {
    cursor: default;
}

input[type="radio"].new-radio:disabled + .labelForRadio,
input[type="radio"].new-radio:disabled:checked + .labelForRadio:before,
input[type="checkbox"].new-checkbox:disabled + .labelForCheckbox,
input[type="checkbox"].new-checkbox:disabled:checked + .labelForCheckbox:before {
    opacity: .6;
}

.labelForRadio,
.labelForCheckbox {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    margin: 0;
    flex: 0 0 100%;
    width: 100%;
    align-self: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

    .labelForRadio + .label-help-text,
    .labelForCheckbox + .label-help-text {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        color: #829399;
        display: block;
        margin-left: 40px;
    }

    .labelForRadio + .label-help-text {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
        color: #829399;
        display: block;
        margin-left: 40px;
    }

    /* IE 11 and up, for some reason it is missing 2 pixels... */
    _:-ms-fullscreen, .labelForRadio + .label-help-text {
        margin-left: 42px;
    }

/* IE 11 and up, for some reason it is miscalculating size of image */
_:-ms-fullscreen,
input[type='radio'].new-radio + .labelForRadio:before,
input[type='checkbox'].new-checkbox + .labelForCheckbox:before {
    width: 30px;
    margin-right: 8px;
}

.labelForRadio {
    min-height: 30px;
}

/* Radio Buttons START */


/* Input Fields Start*/

.modern-input {
    background: #FFFFFF;
    border: 1px solid #858585;
    box-sizing: border-box;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    padding: 12px 16px;
    width: 100%;
    border-radius: 0;
    outline-width: 0;
}

    .modern-input:read-only {
        background-color: #EAEAEA;
    }

    .modern-input:focus,
    .modern-input:active {
        border: 1px solid #333333;
        box-sizing: border-box;
        box-shadow: 0 0 0 1px #00818F;
    }

    .modern-input:-ms-input-placeholder {
        color: #595959;
    }

    .modern-input::-webkit-input-placeholder {
        color: #595959;
    }

    .modern-input::placeholder {
        color: #595959;
    }

    /* Chrome, Safari, Edge, Opera */
    .modern-input::-webkit-outer-spin-button,
    .modern-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .modern-input.error-input {
        border: 1px solid #D15A40;
    }

/* Firefox */
input[type=number].modern-input {
    -moz-appearance: textfield;
}

.input-container {
    display: flex;
    flex-direction: column;
}

.input-label {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
}

    .input-label + .modern-input {
        margin-top: 8px;
    }

.input-radio-container {
    margin-top: 16px;
}

    .input-radio-container input[type="radio"] {
        opacity: 0;
        margin: 0;
        width: 1px;
        height: 40px;
        border: none;
        position: absolute;
        -moz-appearance: none;
    }

    .input-radio-container label {
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        font-size: 14px;
        line-height: 17px;
        letter-spacing: 0.75px;
        text-transform: capitalize;
        font-weight: 500;
        box-sizing: border-box;
        padding: 11px 30px 12px;
        min-width: 6.5rem;
        color: #00818F;
        background-color: #FFFFFF;
        box-shadow: inset 0 0 0 1px #00818F;
        width: 122px;
    }

        .input-radio-container label:first-of-type {
            border-radius: 4px 0 0 4px;
        }

        .input-radio-container label:last-of-type {
            border-radius: 0 4px 4px 0;
        }

        .input-radio-container label:not(:first-of-type) {
            margin-left: -1px;
        }

    .input-radio-container input:checked + label {
        background: #00818F;
        color: #FFFFFF;
    }

.input-label + .label-help-text {
    color: #829399;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.25px;
    margin-top: 4px;
}

.modern-input + .input-label {
    margin-top: 16px;
}

.fds-select {
    background: #FFFFFF;
    border: 1px solid #858585;
    box-sizing: border-box;
    color: #000000;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    height: 40px;
    cursor: pointer;
    border-radius: 0;
}

.fds-select-icon {
    position: absolute;
    top: 13px;
    right: 16px;
}

.fds-select-wrapper {
    width: 100%;
    white-space: nowrap;
    position: relative;
}
/* Input Fields End */