@charset "UTF-8";

/********** Variable **********/
:root {
    --tertiary-color: #CBC5F1;

    --size-2x: 2.8em;
    --size-3x: 3.5em;
}

/********** Custom radio color **********/
/* primary, secondary, tertiary */
input:is([type="checkbox"], [type="radio"]).tertiary {
    background-image: url(../img/unchecked-tertiary.svg);
}

input:is([type="checkbox"], [type="radio"]).tertiary:checked {
    background-image: url(../img/checked-tertiary.svg) !important;
}

input:is([type="checkbox"], [type="radio"]).tertiary ~ .label-inline {
    color: var(--tertiary-color) !important;
}

/********** Custom radio sizing **********/
/* 2x, 3x */
input:is([type="checkbox"], [type="radio"]).size-2x {
    height: var(--size-2x);
    width: var(--size-2x);
}

input:is([type="checkbox"], [type="radio"]).size-3x {
    height: var(--size-3x);
    width: var(--size-3x);
}

/********** Loading **********/
#loader {
    display: none;
    z-index: 100000;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    text-align: center;
}
#loader.loading {
    display: block;
}
#loader .loader {
    background-color: #f3f3f3;
    background-image: url(../img/loader.svg);
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    height: 150px;
    width: 200px;
    display: inline-block;
}