* {
    box-sizing:                         border-box;
    margin: 						    0;
    padding: 						    0;
}

html, body {
    font-family:                        'Scto Grotesk A', sans-serif;
    font-size:                          13px;
    font-weight:                        400;
    color:                              #151515;
    -webkit-font-smoothing:             antialiased;
}

::-webkit-scrollbar {

}

@font-face {
    font-family:                        'Scto Grotesk A';
    src:                                url('/fonts/SctoGroteskA-Regular.1e986128.otf') format("opentype");
    font-weight:                        400;
}

@font-face {
    font-family:                        'Scto Grotesk A';
    src:                                url('/fonts/SctoGroteskA-Medium.2ede3563.otf') format("opentype");
    font-weight:                        500;
}

@font-face {
    font-family:                        'Scto Grotesk A';
    src:                                url('/fonts/SctoGroteskA-Bold.d6497298.otf') format("opentype");
    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:              186px 1fr;
    grid-template-rows:                 1fr;
    grid-auto-flow:                     column;
    overflow:                           hidden;
    height:                             100%;
    width:                              100%;
    background:                         #FFFFFF;
}

#app::-webkit-scrollbar {

}

#no-mobile {
    display:                            none;
    grid-template-columns:              1fr;
    grid-template-rows:                 1fr;
    height:                             100%;
    width:                              100%;
    place-items:                        center;
    background:                         #151515;
}

#no-mobile .title {
    color:                              #FFFFFF;
    font-size:                          17.5px;
}





/*--   OBJECTS   --*/

.button {
    height:                             40px;
    width:                              fit-content;
    padding:                            13px 16px 0;
    font-size:                          12px;
    font-weight:                        500;
    border-radius:                      20px;
    border:                             none;
    background:                         #F3F3F3;
    white-space:                        nowrap;
    cursor:                             pointer;
    text-decoration:                    none;
}

.button-icon {
    width:                              40px;
    height:                             40px;
    border-radius:                      50%;
    padding:                            11px;
    border:                             none;
    background:                         #F3F3F3;
    cursor:                             pointer;
}

.button:hover,
.button-icon:hover {
    background:                         #EBEBEB;
}

.button-icon.visit {
    background:                         #151515;
}

.button-icon.visit:hover {
    background:                         black;
}



.button-add-item {
    display:                            flex;
    align-items:                        center;
    width:                              fit-content;
    cursor:                             pointer;
}

.button-add-item .text {
    font-weight:                        500;
    font-size:                          11px;
}

.button-add-item .icon {
    width:                              24px;
    height:                             24px;
    padding:                            7px;
    border:                             1px solid #EBEBEB;
    border-radius:                      50%;
    margin-right:                       9px;
}
.button-add-item:hover .icon {
    background:                         #EBEBEB;
}



.button-remove-item {
    border:                             1px solid #EBEBEB;
    border-radius:                      7px;
    cursor:                             pointer;
    height:                             37px;
    width:                              37px;
    padding:                            7px;
}

.button-remove-item:hover {
    background:                         #EBEBEB;
}


.button:has(img) {
    display:                            flex;
    align-items:                        center;
    background:                         #151515;
    color:                              #FFFFFF;
}

.button:has(img):hover {
    background:                         #000000;
}

.button:has(img) p {
    font-size:                          12px;
    font-weight:                        500;
}



.button.new {
    margin-left:                        14px;
    padding:                            0 14px;
    column-gap:                         7px;
}

.button.new img {
    width:                              17.5px;
    height:                             17.5px;
}



.checkbox {
    width:                              16px;
    height:                             16px;
    border-radius:                      4px;
    border:                             1px solid #EBEBEB;
    background:                         transparent;
    cursor:                             pointer;
}

.checkbox:hover {
    border-color:                       #151515;
}

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

.checkbox img {
    width:                              16px;
    margin:                             -1px 0 0 -1px;
    opacity:                            0;
}

.checkbox.checked img {
    opacity:                            1;
}



.tag.date,
.tag.code {
    height:                             27px;
    width:                              fit-content;
    padding:                            6px 9px 0;
    border-radius:                      7px;
    font-size:                          12px;
    font-weight:                        400;
    background:                         #F3F3F3;
}

.tag.status {
    height:                             26px;
    width:                              fit-content;
    padding:                            6px 9px 0;
    border-radius:                      12px;
    font-weight:                        500;
    font-size:                          12px;
    background:                         #F3F3F3;
}



.seperator {
    height:                             1px;
    width:                              100%;
    background:                         #EBEBEB;
}

.seperator-dotted {
    height:                             1px;
    background:                         repeating-linear-gradient(90deg, #EBEBEB 0 10px, #0000 0 20px);
    margin:                             35px 0;
}





/*--   FORM   --*/

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

input,
select {
    height:                             37px;
}

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

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

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

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

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

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

.input-tag {
    margin-top:                         35px;
    margin-bottom:                      14px;
    color:                              #8F8F8F;
    font-size:                          12px;
}

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

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

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

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

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



.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:                        'Scto Grotesk A', sans-serif;
    font-weight:                        400;
    font-size:                          13px;
}

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

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

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



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

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

.inputs.item {
    align-items:                        start;
    grid-gap:                           7px;
    margin-bottom:                      10px;
}



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





/*--   COMPONENTS   --*/

.block {
    display:                            grid;
    height:                             fit-content;
    padding:                            35px;
    background:                         #F9F9F9;
    border-radius:                      14px;
}

.block .title {
    margin-right:                       10px;
    font-weight:                        700;
    font-size:                          17.5px;
}

.block .subtitle {
    font-size:                          12px;
    margin-bottom:                      10px;
}

.block .top {
    display:                            flex;
    align-items:                        center;
}



.fold .top {
    cursor:                             pointer;
}

.fold .top .expand {
    height:                             28px;
    width:                              28px;
    border-radius:                      50%;
    padding:                            5px 9px;
    margin:                             0 7px 0 auto;
    transition:                         all ease-out .2s;
    background:                         #F3F3F3;
}

.fold .top .expand img {
    transition:                         all ease-out .2s;
}

.fold .top:hover .expand {
    background:                         #EBEBEB;
}

.fold.closed {
    height:                             98px;
}

.fold.closed .expand img {
    transform:                          rotateX(180deg);
}

.fold.closed .content {
    display:                            none;
}



.section {
    height:                             fit-content;
    border:                             1px solid #EBEBEB;
    border-radius:                      7px;
    margin-bottom:                      35px;
}

.section .tag {
    padding:                            20px;
    font-weight:                        700;
    font-size:                          13px;
    background:                         #F5F5F5;
}



.summary-item {
    display:                            flex;
    padding:                            20px;
    border-bottom:                      1px solid #EBEBEB;
}

.summary-item .price {
    margin-left:                        auto;
}

.summary-total {
    display:                            flex;
    padding:                            20px;
}

.summary-total .right {
    margin-left:                        auto;
}

.summary-total .total {
    margin-bottom:                      7.5px;
    font-weight:                        700;
    font-size:                          14px;
}

.summary-total .price {
    margin-bottom:                      8px;
    font-weight:                        700;
    text-align:                         end;
}

.summary-total .tax,
.summary-total .period {
    color:                              #8F8F8F;
    font-size:                          12px;
}

.summary-total .period {
    text-align:                         end;
}



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

.checkboxes.vertical {
    display:                            grid;
    grid-gap:                           14px;
    grid-template-columns:              1fr;
    grid-auto-flow:                     row;
}

.checkbox-wrap {
    display:                            flex;
    align-items:                        center;
    height:                             37px;
    padding:                            0 11px 0 14px;
    border:                             1px solid #EBEBEB;
    border-radius:                      7px;
    cursor:                             pointer;
}

.checkbox-wrap .label {
    white-space:                        nowrap;
    padding-bottom:                     0.5px;
}

.checkbox-wrap .checkbox {
    margin-left:                        auto;
}

.checkbox-wrap:has(.checkbox.checked),
.checkbox-wrap:hover {
    background:                         #EBEBEB;
}



.actions {
    display:                            flex;
    align-items:                        center;
}







/*--   LOADER   --*/

.loader {
    border:                             3px solid #F3F3F3;
    border-top:                         3px solid #8F8F8F;
    border-radius:                      50%;
    width:                              64px;
    height:                             64px;
    animation:                          spin 1.5s linear infinite;
}

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





/*--   QUERIES   --*/

@media only screen and (max-width: 720px) {

    #app {
        display: none;
    }

    #no-mobile {
        display: grid;
    }

}





/*--   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   --*/

.no-select,
.button,
.checkbox,
.option,
.input-tag,
.header {
    -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;
}