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

html, body {
    font-family:                        'Nimbus Sans', sans-serif;
    font-size:                          13px;
    font-weight:                        400;
    color:                              #101828;
    -webkit-font-smoothing:             antialiased;
}

::-webkit-scrollbar {

}



@font-face {
    font-family:                        'Nimbus sans';
    src:                                url('/fonts/helvetica-light.ttf') format("truetype");
    font-weight:                        300;
}

@font-face {
    font-family:                        'Nimbus sans';
    src:                                url('/fonts/helvetica.ttf') format("truetype");
    font-weight:                        400;
}

@font-face {
    font-family:                        'Nimbus sans';
    src:                                url('/fonts/helvetica-bold.ttf') format("truetype");
    font-weight:                        700;
}



/*--   FRAME   --*/

#frame {
    position:                           absolute;
    height:                             100%;
    width:                              100%;
    top:                                0;
    bottom:                             0;
    overflow-y:                         hidden;
}

#app {
    display:                            grid;
    grid-area:                          app;
    grid-template-columns:              224px 1fr;
    grid-template-rows:                 1fr;
    grid-auto-flow:                     column;
    overflow:                           hidden;
    height:                             100%;
    width:                              100%;
    background:                         #F9FAFB;
}

#app::-webkit-scrollbar {

}



/*--   OBJECTS   --*/

button {
    outline: none;
    border: none;
    background: transparent;
}

.button {
    display:                            flex;
    align-items:                        center;
    height:                             32px;
    width:                              fit-content;
    padding:                            0 11px .5px;
    border-radius:                      7px;
    border:                             none;
    background:                         #101828;
    color:                              white;
    white-space:                        nowrap;
    cursor:                             pointer;
    text-decoration:                    none;
}

.button.icon img,
.button.icon svg {
    width:                              20px;
    height:                             20px;
}

.button.icon span {
    margin-left:                        7px;
}

.button:hover {
    opacity:                            .5;
}

.button.grey {
    background:                         #F3F3F5;
    border:                             1px solid #F3F4F6;
    color:                              #364153;
}

.button.grey svg {
    color:                              #101828;
}

.button.red {
    background:                         #FBE8EC;
    border:                             1px solid #FBE8EC;
    color:                              #D4183D;
}



.checkbox {
    width:                              18px;
    height:                             18px;
    padding-left:                       3px;
    border-radius:                      4px;
    border:                             1px solid #F3F4F6;
    background:                         #F9FAFB;
    cursor:                             pointer;
}

.checkbox:hover {
    border-color:                       #0A0A0A;
}

.checkbox.checked {
    background:                         #0A0A0A;
    border-color:                       #0A0A0A;
}

.checkbox img {
    width:                              11px;
    opacity:                            0;
}

.checkbox.checked img {
    opacity:                            1;
}



input,
select,
textarea {
    width:                              100%;
    padding:                            0 0 0 13px;
    color:                              #101828;
    background:                         transparent;
    font-family:                        'Nimbus Sans', sans-serif;
    font-weight:                        400;
    font-size:                          12.3px;
    border:                             none;
    outline:                            none;
}

input,
select {
    height:                             31.5px;
}

select {
    padding:                            0 15px;
    margin-right:                       7px;
}

textarea {
    padding:                            15px;
    resize:                             none;
}

.input-wrap {
    position:                           relative;
}

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

.input-box {
    align-items:                        center;
    position:                           relative;
    border-radius:                      7px;
    border:                             1px solid #F3F4F6;
    background:                         #F9FAFB;
}

.input-tag {
    margin-bottom:                      10px;
}

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

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

.input-box:focus-within {
    outline:                            none;
    background:                         #F3F4F6;
}

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

.input-box.disabled input,
.input-box.disabled select {
    opacity:                            .5;
}

.input-box.autocomplete {
    background: #e6f0ff;
}



.input-box:has(.icon) {
    padding: 0 0 0 9px;
}

.input-box .icon {
    width:                              14px;
    height:                             14px;
}



.input-error-message {
    position:                           absolute;
    color:                              #FF6666;
    font-size:                          12px;
    top:                                110%;
}



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

input:-webkit-autofill::first-line {
    font-family:                        'Nimbus Sans', sans-serif;
    font-weight:                        400;
    font-size:                          12.3px;
}

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

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

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



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

.inputs .input-wrap {
    width:                              unset;
}



.autocomplete-list {
    position: absolute;
    margin-top: 7px;
    z-index: 1000;
    max-height: 200px;
    border: 1px solid #0a0a0a;
    overflow-y: scroll;
}

.autocomplete-item {
    padding: 11px;
    cursor: pointer;
    background: white;
}

.autocomplete-item.active,
.autocomplete-item:hover {
    background: #e6f0ff;
}



#body {
    grid-area: body;
    position: relative;
}

.section {
    background: white;
    border: 1px solid #F3F4F6;
    border-radius: 7px;
    box-shadow: 0px 1px 3px 0px #0000001A;
}

.section .top {
    height: 59px;
    border-bottom: 1px solid #F3F4F6;
    padding-left: 21px;
    display:                            flex;
    align-items: center;
}

.section .title {
    font-weight:                        700;
    font-size:                          14px;
}



#menu-desktop {
    grid-area:                          menu;
    background: linear-gradient(
        to bottom,
        #FFECE2 0%,
        #F2ECFF 35%,
        #FFECE2 75%,
        #F2ECFF 100%
    );
}

#menu-desktop .logo {
    width: 80px;
    margin: 28px;
}

#menu-desktop .item {
    display:                            flex;
    align-items:                        center;
    height:                             31.5px;
    padding-left:                       10.5px;
    margin:                             0 14px 3.5px;
    color:                              #364153;
    background:                         transparent;
    border-radius:                      8.75px;
    cursor:                             pointer;
}

#menu-desktop .item:hover {
    background:                         #BFD7FF;
}

#menu-desktop .item svg {
    width:                              17.5px;
    height:                             17.5px;
    margin-right:                       10.5px;
}

#menu-desktop .item.active {
    background:                         #498FFF;
    color:                              white;
}

#menu-desktop .item.active svg {
    color: #EEEEEE;
}

#menu-desktop form {
    position: absolute;
    bottom: 0;
    width: 224px;
}

#menu-desktop button {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    border-top: 1px solid #F3F4F6;
    padding-left: 24px;
    cursor: pointer;
    color: #80899C;
}

#menu-desktop button svg {
    width:                              17.5px;
    height:                             17.5px;
    margin-right:                       10.5px;
}

#menu-desktop button:hover {
    background:                         #F3F4F6;
}



#menu-mobile {
    display:                            none;
    grid-area:                          menu;
    background:                         white;
}

#menu-mobile.open {
    box-shadow: 0px 1px 3px 0px #0000001A;
}

#menu-mobile .top {
    display: flex;
    align-items: center;
    padding: 0 24px 0 28px;
    height: 64px;
    border-bottom: 1px solid #F3F4F6;
}

#menu-mobile .top img {
    width:                              80px;
}

#menu-mobile .top .button-open {
    width: 21px;
    margin-left: auto;
}

#menu-mobile .top .button-close {
    display: none;
    width: 17px;
    margin-left: auto;
}

#menu-mobile.open .top .button-open {
    display:                            none;
}

#menu-mobile.open .top .button-close {
    display:                            block;
}

#menu-mobile .items {
    display: none;
}

#menu-mobile.open .items {
    display:                            block;
}

#menu-mobile .item {
    display:                            grid;
    grid-template-columns:              38px 1fr;
    grid-auto-flow:                     column;
    align-items:                        center;
    font-size: 15px;
    height:                             68px;
    padding-left:                       28px;
    color:                              #364153;
    cursor:                             pointer;
    border-bottom: 1px solid #f3f4f6;
}

#menu-mobile .item:last-child {
    color:                              #80899C;
}

#menu-mobile .item svg {
    width: 24px;
    height: 24px;
}



#popup {
    display:                            none;
    position:                           fixed;
    top:                                0;
    left:                               0;
    width:                              100vw;
    height:                             100vh;
    z-index:                            1000;
}

#popup-background {
    position:                           absolute;
    top:                                0;
    left:                               0;
    width:                              100%;
    height:                             100%;
    backdrop-filter:                    blur(4px);
}

#popup-body {
    position:                           relative;
    display:                            grid;
    grid-template-rows:                 auto 1fr;
    width:                              480px;
    height:                             340px;
    margin:                             25vh auto 0;
    background:                         white;
    border-radius:                      7px;
    border:                             1px solid #F3F4F6;
    box-shadow:                         0px 1px 3px 0px #0000001A;
    overflow-y:                         hidden;
}

#popup-body .top {
    height:                             84px;
    border-bottom:                      1px solid #F3F4F6;
    padding:                            0 28px;
    display:                            flex;
    align-items:                        center;
}

#popup-body .top .title {
    font-weight:                        700;
    font-size:                          16px;
}

#popup-body .top .subtitle {
    margin-top:                         7px;
    color:                              #525252;
}

#popup-body .top .button {
    margin-left: auto;
}

#popup-body .content {
    padding:                            24px 28px;
    overflow-y:                         auto;
}

#popup-content {
    color: #4A5565;
    line-height: 150%;
}

#popup .content:has(#popup-input:not([style*="display: none"])) {
    overflow: hidden;
}

#popup-input {
    display: none;
    height: 100%;
    overflow: scroll;
    background: #F3F4F6;
}

#popup-input::-webkit-scrollbar {
    display: none;
}





@media (max-width: 900px) {

    .button:hover {
        opacity: 1;
    }

    input,
    select {
        font-size: 14px;
        padding: 0 0 0 15px;
    }

    textarea {
        font-size: 14px;
    }

    .input-tag {
        color: #364153;
    }

    #menu-desktop {
        display:                        none;
    }

    #menu-mobile {
        display:                        block;
    }

    #popup-body {
        width: 90%;
    }

    .section .top {
        height: 63px;
        padding-left: 28px;
    }

    .section .input-box {
        width: 100%;
        margin: 24px 21px 4px;
    }
}