:root {
    --svg-circle-failure: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.8125 4.37811L9.66016 10.8845H8.39697L8.24463 4.37811H9.8125ZM8.21924 12.8776C8.21924 12.6449 8.29118 12.4481 8.43506 12.2873C8.58317 12.1223 8.78418 12.0397 9.03809 12.0397C9.29622 12.0397 9.49723 12.1223 9.64111 12.2873C9.78499 12.4481 9.85693 12.6449 9.85693 12.8776C9.85693 13.1104 9.78499 13.3093 9.64111 13.4743C9.49723 13.6351 9.29622 13.7155 9.03809 13.7155C8.78418 13.7155 8.58317 13.6351 8.43506 13.4743C8.29118 13.3093 8.21924 13.1104 8.21924 12.8776Z" fill="%23E53A44"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 16.4C13.0869 16.4 16.4 13.0869 16.4 9C16.4 4.91309 13.0869 1.6 9 1.6C4.91309 1.6 1.6 4.91309 1.6 9C1.6 13.0869 4.91309 16.4 9 16.4ZM9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" fill="%23E53A44" stroke="%23E53A44" stroke-width="0.4"/></svg>');
    --svg-circle-success: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 16.4C13.0869 16.4 16.4 13.0869 16.4 9C16.4 4.91309 13.0869 1.6 9 1.6C4.91309 1.6 1.6 4.91309 1.6 9C1.6 13.0869 4.91309 16.4 9 16.4ZM9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" fill="%23149602" stroke="%23149602" stroke-width="0.4"/><path d="M5 9.17883L7.41959 11.5L12.8349 6.39342" stroke="%23149602" stroke-width="0.8"/></svg>');
    --radio-box-gap: 14px;
    --radio-box-columns: 2;
    --radio-box-default-width: 75%;
    --radio-box-tick-size: 26px;
    --radio-box-tick-background-size: 30px;
    --form-animation: cubic-bezier(0.175, 0.885, 0.32, 1.5);
    --form-input-height: 40px;
    --form-placeholder-animation: 200ms;
}

/* reset old styles */
input[type=radio], input[type=checkbox] {
    width: unset;
}

div.form-group > div.checkbox {
    margin-left: unset;
}

.form-control {
    border-radius: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    -webkit-transition: unset;
    transition: unset;
    display: block;
    box-sizing: border-box;
    height: var(--form-input-height);
    color: #000000;
}

.form-group .control-label {
    font-size: 13px;
}

label {
    display: unset;
}

.radio label, .checkbox label {
    padding: 0;
    padding-left: 0;
    margin-bottom: 0;
}

/* Disable input background color change on autofill. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #FFFFFF;
}

/**
*   #########################
*   ### Radio
*   #########################
*/
label.radio,
label.radio-inline,
div.radio > label,
div.radio-list > label {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    margin-top: 0;
    position: relative;
    padding-right: 1em;
    padding-left: 0;
}

label.radio input,
label.radio-inline input,
div.radio > label input,
div.radio-list > label input {
    /*display: none;*/

    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

label.radio input + span,
label.radio-inline input + span,
div.radio > label input + span,
div.radio-list > label input + span {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    font-size: 13px;
}

label.radio input:checked + span,
label.radio-inline input:checked + span,
div.radio > label input:checked + span,
div.radio-list > label input:checked + span {
    font-weight: 400;
}

label.radio input + span:before,
label.radio-inline input + span:before,
div.radio > label input + span:before,
div.radio-list > label input + span:before {
    box-sizing: border-box;
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 50%;
    margin-right: 7px;
    width: 20px;
    height: 20px;
    border: 1px solid #a2a2a2;
    background: #fff;
}

label.radio input + span:after,
label.radio-inline input + span:after,
div.radio > label input + span:after,
div.radio-list > label input + span:after {
    box-sizing: border-box;
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #222;
    position: absolute;
    border-radius: 50%;
    top: 6px;
    left: 6px;
    opacity: 0;
    transform: scale(0, 0);
    transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}

label.radio input:checked + span:before,
label.radio-inline input:checked + span:before,
div.radio > label input:checked + span:before,
div.radio-list > label input:checked + span:before {
    border-color: black;
}

label.radio input:focus + span:before,
label.radio-inline input:focus + span:before,
div.radio > label input:focus + span:before,
div.radio-list > label input:focus + span:before {
    border-width: 2px;
}

label.radio input:checked + span:after,
label.radio-inline input:checked + span:after,
div.radio > label input:checked + span:after,
div.radio-list > label input:checked + span:after {
    opacity: 1;
    transform: scale(1, 1);
}


/**
 *   #################################################################################################
 *   ### Checkbox
 *   #################################################################################################
 */

label.checkbox,
label.checkbox-inline,
div.checkbox > label,
div.checkbox-list > label {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    margin-top: 0;
    position: relative;
    padding-right: 1em;
    padding-left: 0;
}

label.checkbox input,
label.checkbox-inline input,
div.checkbox label input,
div.checkbox-list label input {
    /*display: none;*/

    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

label.checkbox input + span,
label.checkbox-inline input + span,
div.checkbox > label input + span,
div.checkbox-list > label input + span {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    font-size: 13px;
}


label.checkbox input + span:before,
label.checkbox-inline input + span:before,
div.checkbox > label input + span:before,
div.checkbox-list > label input + span:before {
    box-sizing: border-box;
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    /*border-radius: 50%;*/
    margin-right: 7px;
    width: 20px;
    height: 20px;
    border: 1px solid #a2a2a2;
    background: #fff;
}

label.checkbox input + span:after,
label.checkbox-inline input + span:after,
div.checkbox > label input + span:after,
div.checkbox-list > label input + span:after {
    box-sizing: border-box;
    content: '';
    position: absolute;
    top: 0;
    left: 1px;
    width: 19px;
    height: 19px;
    display: block;
    background-color: CanvasText;
    clip-path: polygon(37.00% 77.33%, 13.83% 54.00%, 17.33% 50.50%, 37.00% 70.17%, 82.33% 24.50%, 86.00% 28.00%, 37.00% 77.33%);
    transform: scale(0);
    opacity: 0;
    transition: all 400ms var(--form-animation);
}

label.checkbox input:checked + span:before,
label.checkbox-inline input:checked + span:before,
div.checkbox > label input:checked + span:before,
div.checkbox-list > label input:checked + span:before {
    border-color: black;
}

label.checkbox input:focus + span:before,
label.checkbox-inline input:focus + span:before,
div.checkbox > label input:focus + span:before,
div.checkbox-list > label input:focus + span:before {
    border-width: 2px;
}

label.checkbox input:checked + span:after,
label.checkbox-inline input:checked + span:after,
div.checkbox > label input:checked + span:after,
div.checkbox-list > label input:checked + span:after {
    opacity: 1;
    transform: scale(1);
}


/**
 *   #################################################################################################
 *   ### Radio & Checkbox common
 *   #################################################################################################
 */

label.checkbox input + span,
div.checkbox > label input + span,
label.radio input + span,
div.radio > label input + span {
    display: block;
}


/**
 *   #################################################################################################
 *   ### Basic input
 *   #################################################################################################
 */
input.form-control,
select.form-control {
    font-family: Jost;
    font-size: 13px;
    font-weight: 300;
    border-color: #A2A2A2;
}

input.form-control[disabled],
input.form-control[readonly] {
    opacity: 0.5;
    background-color: #FFFFFF;
}

input.form-control:active {
    border-color: #000;
}

input.form-control[disabled]:active,
input.form-control[readonly]:active {
    border-color: #A2A2A2;
}
body {
    text-rendering: optimizeSpeed;
}

input.form-control.is-focused + p.placeholder-block + p.mask-block {
    visibility:visible;
    opacity:1;
}
p.mask-block {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;

    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    height: var(--form-input-height);
    line-height: var(--form-input-height);
    padding: 0 13px;
    color: #939393;
}
p.mask-block span {
    color: transparent;
}

p.placeholder-block {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    font-size: 13px;
    padding: 1px 4px;

    color: #A2A2A2;
    font-weight: 300;
    text-transform: none;
    transition:
        transform var(--form-placeholder-animation) ease-in-out,
        background-color var(--form-placeholder-animation);

    transform: translate(10px, calc(50%));
    user-select: none;
    cursor: text;
}

input.form-control.is-focused + p.placeholder-block {
    background-color: #FFF;
    transform: translate(10px, -55%);
    font-size: 11px;
    cursor: default;
}

input.form-control[disabled].placeholder + p.placeholder-block,
input.form-control[readonly].placeholder + p.placeholder-block
{
    color: #C2C2C2;
}
input.form-control:not([disabled]):not([readonly]):focus + p.placeholder-block {
    color: #000;
}


div.form-group:has(.form-control) {
    position: relative;
    margin-bottom: 36px;
}



div.form-group p.help-block-error {
    color: #E53A44;
    top: var(--form-input-height);
    left: 1px;
    margin-top: 0;
    line-height: normal;
}

div.form-group input.form-control.validation-failure,
div.form-group.has-error input.form-control {
    box-shadow: unset;
    border-color: #A2A2A2;
    border-bottom-color: #E53A44;
    border-bottom-width: 2px;
}

div.form-group:has(>input.form-control.validation-failure)::after,
div.form-group.has-error::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    --height: 16px;
    --width: 16px;
    margin-top: calc(var(--height) / 2 * -1);
    width: var(--width);
    height: var(--height);
    background-image: var(--svg-circle-failure);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #FFFFFF;
    border-radius: 50%;
}

div.form-group input.form-control.validation-success {
    border-bottom-color: #149602;
    border-bottom-width: 2px;
}

div.form-group:has(>input.form-control.validation-success)::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    --height: 16px;
    --width: 16px;
    margin-top: calc(var(--height) / 2 * -1);
    width: var(--width);
    height: var(--height);
    background-image: var(--svg-circle-success);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #FFFFFF;
    border-radius: 50%;
}


/**
 *   #################################################################################################
 *   ### Input Type Password
 *   #################################################################################################
 */
div.form-group input.form-control[type=password] {
    font-family: monospace;
    letter-spacing: 3px;
}

div.form-group input.form-control[type=password]::placeholder {
    font-family: Jost, sans-serif;
    letter-spacing: initial;
}

div.form-group:has(input.form-control):has(p.toggle-password-visibility) > p.toggle-password-visibility {
    margin: 0;
    padding: 0;
    position: absolute;
    width: var(--form-input-height);
    height: var(--form-input-height);
    user-select: none;
    right: 0;
    top: calc(50% - var(--form-input-height) / 2);
    background-color: #ECECEC;
    border: 1px solid #A2A2A2;
    border-left: 0;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
}

div.form-group:has(input.form-control):has(p.toggle-password-visibility) > input.form-control {
    width: calc(100% - var(--form-input-height));
}

div.form-group:has(>input.form-control.validation-success):has(p.toggle-password-visibility)::after,
div.form-group:has(>input.form-control.validation-failure):has(p.toggle-password-visibility)::after {
    /*right: calc(10px + var(--form-input-height));*/
    right: 53px;
}

div.form-group > p.visibility-password {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12.005 15.154q1.524 0 2.586-1.067t1.063-2.592q0-1.524-1.067-2.586t-2.592-1.063q-1.524 0-2.586 1.067t-1.063 2.592q0 1.524 1.067 2.586t2.592 1.063M12 14.2q-1.125 0-1.912-.787T9.3 11.5q0-1.125.788-1.912T12 8.8q1.125 0 1.913.788T14.7 11.5q0 1.125-.787 1.913T12 14.2m.003 3.8q-3.25 0-5.922-1.768q-2.673-1.769-4.004-4.732q1.33-2.963 4.001-4.732Q8.748 5 11.998 5q3.248 0 5.921 1.768q2.673 1.769 4.004 4.732q-1.33 2.963-4.001 4.732Q15.252 18 12.002 18M12 17q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6Q9.175 6 6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17"/></svg>');
}

div.form-group > .visibility-text {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="m15.446 12.646l-.796-.796q.225-1.31-.742-2.267q-.968-.958-2.258-.733l-.796-.796q.252-.104.526-.156q.274-.052.62-.052q1.529 0 2.591 1.063q1.063 1.062 1.063 2.591q0 .346-.052.64q-.052.293-.156.506m3.162 3.073l-.758-.669q.95-.725 1.688-1.588T20.8 11.5q-1.25-2.525-3.588-4.012T12 6q-.725 0-1.425.1T9.2 6.4l-.78-.78q.87-.33 1.772-.475Q11.094 5 12 5q3.256 0 5.956 1.79t3.967 4.71q-.536 1.206-1.359 2.266q-.822 1.06-1.956 1.953m1.115 5.42l-3.892-3.881q-.664.294-1.647.518Q13.2 18 12 18q-3.275 0-5.956-1.79T2.077 11.5q.583-1.325 1.536-2.482q.954-1.156 2.037-1.941l-2.788-2.8l.707-.708l16.862 16.862zM6.358 7.784q-.86.611-1.758 1.607T3.2 11.5q1.25 2.525 3.588 4.013T12 17q.865 0 1.744-.168q.88-.169 1.321-.34l-1.63-1.642q-.237.133-.66.218q-.423.086-.775.086q-1.529 0-2.591-1.063Q8.346 13.03 8.346 11.5q0-.333.086-.746q.085-.414.218-.689zm4.354 4.353"/></svg>');
}


/**
 *   #################################################################################################
 *   ### RadioBox radios
 *   #################################################################################################
 */
.radio-box-container {
    display: flex;
    flex-direction: column;
    gap: var(--radio-box-gap);
}

.radio-box-container.inline, .radio-box-container.force-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--radio-box-gap);
}

.radio-box-container > .radio-box {
    width: var(--radio-box-default-width);
}

.radio-box-container.inline > .radio-box {
    width: var(--radio-box-default-width);
}

.radio-box-container.force-inline > .radio-box {
    width: calc(
            100% * (1 / var(--radio-box-columns)) - var(--radio-box-gap) / var(--radio-box-columns) * (var(--radio-box-columns) - 1)
    );
}

.radio-box-container > .radio-box label {
    display: block;
}

.radio-box-container > .radio-box > label > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.radio-box-container > .radio-box > label > input + span {
    position: relative;
    display: block;
    padding: 13px;
    border: 1px solid #A2A2A2;
    cursor: pointer;
}

.radio-box-container > .radio-box > label > input:focus + span {
    border: 2px solid #A2A2A2;
}

.radio-box-container > .radio-box > label > input:checked + span {
    border-color: #000000;
}

.radio-box-container > .radio-box > label > input + span:before {
    content: "";
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    top: calc(50% - var(--radio-box-tick-background-size) / 2);
    right: 10px;
    width: var(--radio-box-tick-background-size);
    height: var(--radio-box-tick-background-size);
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 300ms var(--form-animation);
}

.radio-box-container > .radio-box > label > input + span:after {
    content: "";
    position: absolute;
    margin: 0;
    padding: 0;
    display: block;
    right: calc(10px + var(--radio-box-tick-background-size) - var(--radio-box-tick-size));
    top: calc(50% - var(--radio-box-tick-size) / 2);
    width: var(--radio-box-tick-size);
    height: var(--radio-box-tick-size);
    background-color: #ffffff;
    background-image: var(--svg-circle-success);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    transition: all 300ms var(--form-animation);
}

.radio-box-container > .radio-box > label > input:checked + span:after {
    opacity: 1;
    transform: scale(1);
}

.radio-box-container > .radio-box > label > input:checked + span:before {
    opacity: 1;
    transform: scale(1);
}

/**
 *   #################################################################################################
 *   ### Buttons
 *   #################################################################################################
 */

.basic-btn {
    display: inline-block;
    height: var(--form-input-height);
    line-height: var(--form-input-height);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 0 calc(var(--form-input-height) / 3);
    border: 0;
    cursor: pointer;
    font-size: 13px;
}

.basic-btn:hover {
    text-decoration: none;
}

.basic-btn:focus,
.basic-btn:focus-visible {
    outline-offset: unset !important;
    text-decoration: underline;
}

.basic-btn-primary {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    background-color: #000000;
    color: #FFFFFF;
}

.basic-btn-primary:focus {
    background-color: #000000;
    color: #FFFFFF;
}

.basic-btn-primary:hover {
    background-color: #4D4D4D;
    color: #FFFFFF;
}

.basic-btn-primary:disabled,
.basic-btn-primary[disabled],
.basic-btn-primary[readonly] {
    cursor: not-allowed;
    color: #ECECEC;
    background-color: #CCCCCC;
}

.basic-btn-secondary {
    width: unset;
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: #A2A2A2;
    color: #000000;
    font-weight: 300;
}

.basic-btn-secondary:hover {
    border-color: #000000;
    color: #000000;
}

.basic-btn-secondary:disabled,
.basic-btn-secondary[disabled],
.basic-btn-secondary[readonly] {
    cursor: not-allowed;
    color: #C2C2C2;
    border-color: #CCCCCC;
    background-color: #FFFFFF;
}

.basic-btn-secondary.slim {
    height: 30px;
    line-height: 30px;
}

.basic-btn-secondary.wide {
    width: 100%;
}



/** desktop rules **/
@media screen and (min-width: 992px) {
    .radio-box-container > .radio-box {
        width: var(--radio-box-default-width);
    }

    .radio-box-container.inline > .radio-box {
        width: calc(
                100% * (1 / var(--radio-box-columns)) - var(--radio-box-gap) / var(--radio-box-columns) * (var(--radio-box-columns) - 1)
        );
    }
}