:root {
    color-scheme:                           only light;
}

* {
    box-sizing:                             border-box;
    margin: 						        0;
    padding: 						        0;
    -ms-touch-action:                       manipulation;
    touch-action:                           manipulation;
}

html, body {
    font-family:                            'Inter', sans-serif;
    font-size:                              14px;
    font-weight:                            400;
    color:                                  #2C2C33;
    background:                             #FFFFFF;
    -webkit-font-smoothing:                 antialiased;
    overscroll-behavior-y:                  none;
}

@font-face {
    font-family:                            MonoSpace;
    src:                                    url('/fonts/MonoSpace.otf');
}





/*--   FRAME   --*/

#frame {
    position:                               absolute;
    height:                                 100%;
    width:                                  100%;
    top:                                    0;
    bottom:                                 0;
    overflow-y:                             hidden;
    display:                                grid;
    z-index:                                -20;
}

#app {
    position:                               relative;
    display:                                grid;
    grid-area:                              app;
    overflow-y:                             scroll;
    z-index:                                -10;
}

#app::-webkit-scrollbar,
#body::-webkit-scrollbar {
    display:                                none;
}





/*--   OBJECTS   --*/

p {
    line-height:                            21px;
}

.button {
    height:                                 42px;
    width:                                  fit-content;
    padding:                                11px 20px 0;
    border-radius:                          4px;
    font-size:                              14px;
    color:                                  white;
    background:                             #2C2C33;
    border:                                 1px solid #2C2C33;
    cursor:                                 pointer;
}

.button.transparent {
    color:                                  #A4A8A3;
    background:                             none;
    border:                                 1px solid #D5D9D5;
}

.button.red {
    color:                                  white;
    background:                             #FF6666;
    border:                                 1px solid #FF6666;
}

.button.disabled {
    opacity:                                .5;
    pointer-events:                         none;
}

.button.gradient {
    width:                                  100%;
    border-radius:                          10px;
    height:                                 44px;
    font-size:                              16px;
    font-weight:                            500;
    color:                                  #2C2C33;
    padding-top:                            12px;
    border:                                 none;
    text-align:                             center;
}

.button.navigate {
    padding:                                0 9px 0 15px;
    border-radius:                          21px;
    display:                                flex;
    align-items:                            center;
}

.button.navigate .label {
    color:                                  white;
    font-size:                              12px;
    font-weight:                            500;
    line-height:                            12px;
}

.button.navigate img {
    width:                                  24px;
    height:                                 24px;
    margin-left:                            9px;
    padding:                                7px;
    border-radius:                          12px;
}

.button-underline {
    color:                                  #A4A8A3;
    font-size:                              12px;
    font-weight:                            500;
    line-height:                            12px;
    text-decoration:                        underline;
    cursor:                                 pointer;
    margin-top:                             -4px;
    margin-left:                            auto;
}

.button-icon {
    cursor:                                 pointer;
}

.buttons {
    display:                                grid;
    grid-auto-flow:                         column;
    grid-gap:                               14px;
    grid-template-columns:                  repeat(auto-fit, minmax(0,1fr));
}

.buttons .button {
    width:                                  100%;
    text-align:                             center;
}



.multiselect {
    margin-bottom:                          28px;
}

.multiselect .option {
    display:                                inline-block;
    width:                                  fit-content;
    height:                                 42px;
    padding:                                12px 14px 0;
    color:                                  #2C2C33;
    background:                             #F2F5F3;
    border:                                 1px solid transparent;
    opacity:                                .5;
    cursor:                                 pointer;
    margin:                                 0 14px 14px 0;
}

.multiselect .option.selected {
    opacity:                                1;
}

.error-message {
    color:                                  #FF6666;
    margin-bottom:                          28px;
}





/*--   FORM   --*/

input,
select,
textarea {
    width:                                  100%;
    padding:                                0 0 0 14px;
    color:                                  #2C2C33;
    background:                             none;
    font-family:                            'Inter', sans-serif;
    font-weight:                            400;
    font-size:                              14px;
    max-width:                              999ch;
    border:                                 none;
    outline:                                none;
}

input,
select {
    height:                                 44px;
}

input,
textarea {
    cursor:                                 text;
}

select {
    padding:                                0 35px 0 16px;
    cursor:                                 pointer;
    width:                                  100%;
    appearance:                             none;
}

textarea {
    height:                                 140px;
    padding:                                14px;
    resize:                                 none;
}

input[type=time] {
    padding-right:                          7px;
}

input[type=date] {
    padding-right:                          10px;
}

.input-box,
.input-top {
    display:                                flex;
    align-items:                            center;
    width:                                  100%;
}

.input-box {
    border-radius:                          4px;
    border:                                 #F2F5F3 1px solid;
    margin-bottom:                          14px;
    background:                             #F2F5F3;
}

.input-box.transparent {
    background:                             transparent;
}

.input-box.invalid {
    border-color:                           #FF6666;
}

.input-box.transparent:has(input:not(:placeholder-shown)) {
    outline:                                none;
    background:                             #F2F5F3;
}

.input-box:focus-within {
    outline:                                none;
    background:                             #F2F5F3;
    border-color:                           #D5D9D5;
}

.input-box.disabled,
.input-box.disabled:has(input:not(:placeholder-shown)) {
    background:                             #D5D9D5;
    border-color:                           #D5D9D5;
}

.input-box.disabled input,
.input-box.disabled select {
    color:                                  #A4A8A3;
}

.input-box .icon {
    height:                                 20px;
    margin:                                 11px 11px 0 11px;
    z-index:                                10;
}

.input-tag,
.select-tag {
    margin-top:                             14px;
    margin-bottom:                          14px;
    font-weight:                            700;
    font-size:                              12px;
}

input:-webkit-autofill {
    -webkit-box-shadow:                     none;
}

input:-webkit-autofill::first-line {
    font-family:                            'Silka-Regular', sans-serif;
    font-size:                              13px;
}

::placeholder {
    color:                                  #A4A8A3;
    opacity:                                1;
}

::-ms-input-placeholder {
    color:                                  #A4A8A3;
}

:-ms-input-placeholder {
    color:                                  #A4A8A3;
}

.input-box.transparent ::placeholder {
    color:                                  #D5D9D5;
}

.input-box.transparent ::-ms-input-placeholder {
    color:                                  #D5D9D5;
}

.input-box.transparent :-ms-input-placeholder {
    color:                                  #D5D9D5;
}



.input-box .prefix {
    padding:                                1px 0 0 14px;
}

.input-box:has(.prefix) input {
    padding-left:                           1px;
}

.input-wrap.hidden {
    display:                                none;
}

.input-error {
    color: #FF6666;
    margin-top: -7px;
    margin-bottom: 14px;
}

.inputs {
    display:                                grid;
    grid-auto-flow:                         column;
    grid-template-columns:                  repeat(auto-fit, minmax(0 ,1fr));
    grid-gap:                               21px;
}

.input-hint {
    height:                                 20px;
    width:                                  20px;
    top:                                    0;
    right:                                  0;
    position:                               absolute;
    margin:                                 -10px -10px 0 0;
    cursor:                                 pointer;
    content:                                url(../icons/input-hint.svg);
}



.select-top {
    display:                                flex;
    align-items:                            center;
    width:                                  100%;
}

.select-box {
    position:                               relative;
    display:                                flex;
    align-items:                            center;
    border-radius:                          4px;
    border:                                 #F2F5F3 1px solid;
    cursor:                                 pointer;
}

.select-box img {
    position:                               absolute;
    width:                                  11px;
    right:                                  16px;
    pointer-events:                         none;
}



.toggle {
    width:                                  36px;
    height:                                 22px;
    border-radius:                          11px;
    background:                             #D5D9D5;
    cursor:                                 pointer;
}

.toggle .knob {
    position:                               relative;
    top:                                    1.5px;
    left:                                   1.5px;
    width:                                  19px;
    height:                                 19px;
    border-radius:                          50%;
    background:                             #FFFFFF;
    transition:                             left .2s ease;
    filter:                                 drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06))
                                            drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
}

.toggle.active .knob {
    left:                                   15.5px;
}



.notice {
    display:                                flex;
    align-items:                            center;
    border-radius:                          10px;
    cursor:                                 pointer;
    padding:                                10px 18px 10px 14px;
}

.notice:hover {
    opacity:                                .7;
}

.notice #icon-notice {
    height:                                 18px;
    width:                                  18px;
}

.notice .label {
    font-size:                              12px;
    font-weight:                            500;
    line-height:                            18px;
    margin-left:                            10px;
    padding-top:                            1px;
}

.notice #icon-visit {
    height:                                 10px;
    margin-left:                            auto;
}

.notice.neutral {
    background:                             #FCF0D4;
    border:                                 1px solid #FAE2A8;
}

.notice.neutral #icon-notice {
    content:                                url(../icons/notice-neutral.svg);
}

.notice.negative {
    background:                             #FCE8E8;
    border:                                 1px solid #FFD6D6;
}

.notice.negative #icon-notice {
    content:                                url(../icons/notice-negative.svg);
}

.notice.hidden {
    display:                                none;
}





/*--   MESSAGE   --*/

#message-popup {
    position:                               fixed;
    z-index:                                100;
    margin-top:                             21px;
    width:                                  fit-content;
    place-self:                             start center;
    border-radius:                          10px;
    padding:                                21px 35px;
    border:                                 2px solid #FFFFFF88;
}

#message-popup.success {
    opacity:                                0;
    background:                             linear-gradient(45deg, #B1FFC3, #DAFF8C, #B1FFC3, #DAFF8C);
    background-size:                        400% 400%;
    animation:                              gradient 6s ease infinite, fade-in-and-out 10s ease;
}

@keyframes gradient {
    0% {
        background-position: 0% 25%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 75%;
    }
}

@keyframes fade-in-and-out {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
}





/*--   LOADER   --*/

.loader {
    border:                                 4px solid #CCCCCC;
    border-top:                             4px solid #FFFFFF;
    border-radius:                          50%;
    width:                                  48px;
    height:                                 48px;
    animation:                              spin 1.5s linear infinite;
}

.loader.small {
    border:                                 3px solid #CCCCCC;
    border-top:                             3px solid #FFFFFF;
    width:                                  28px;
    height:                                 28px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes loading {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}







/*--   MEDIA QUERIES   --*/

@media only screen and (min-width: 721px) {

    .button.transparent:hover {
        color:                                  white;
        background:                             #2C2C33;
        border:                                 1px solid #2C2C33;
    }

    .button.gradient:hover {
        opacity:                                .7;
    }

    .select-box:hover {
        border-color:                           #D5D9D5;
    }
}





/*--   REMOVE CLEAR CROSS FROM INPUT FIELDS IN IE AND CHROME   --*/

input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }





/*--   DISABLE SELECTING   --*/

p,
.title,
.label,
.unit,
.no-select,
.button,
#headers .header,
#navigate > *,
#menu .item {
    -webkit-tap-highlight-color:        transparent;
    -webkit-touch-callout:              none;
    -webkit-user-select:                none;
    -khtml-user-select:                 none;
    -moz-user-select:                   none;
    -ms-user-select:                    none;
    user-select:                        none;
}