@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');


:root{
    
    --sz-1 : 3px;
    --sz-2 : 5px;
    --sz-3 : 8px;
    --sz-4 : 13px;
    --sz-5 : 21px;
    --sz-6 : 29px;
    --sz-7 : 34px;
    --sz-8 : 47px;
    --sz-9 : 55px;
    --sz-10 : 68px; 
    --sz-11 : 89px; 
    
    --wd-0: 0;
    --wd-1: 576px;
    --wd-2: 768px;
    --wd-3: 992px;
    --wd-4: 1200px;
    --wd-5: 1400px;

    --nav-height : 44px;
    --page-width: 210mm;
    --font-size: 11px;

    --lines: black;
}

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

html{
    /* background-color: #eee; */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    user-select: none;
    font-size: 13px;
    position: absolute;
    inset: 0;
}

body{
    height: 100%;
    background: radial-gradient(circle at bottom left, #cfcfcf, #fefefe);
}

body.dark{
    color: white;
}

.icon{
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  }

.flex{ display: flex; }
.flex.column{flex-direction: column;}
.flex.end{ justify-content: flex-end; }

.flex.column.reverse{flex-direction: column-reverse;}
.flex.align-center{ align-items: center; }
.flex.justify-center{ justify-content: center; }
.flex.align-end{ align-items: end; }
.flex.align-start-center{ align-items: start; }
.flex.between{ justify-content: space-between;}
.flex.center{ align-items: center; justify-content: center; }



.flex.no-shrink {
    flex-shrink: 0;
} 


.flex.column-row{
    flex-direction: column;
}

.flex.column-row-m{
    flex-direction: column;
}

.flex.justify-center-m{
    justify-content: center;
}

.flex.center-between{
    justify-content: center;
}

@media (min-width: 576px){
    .flex.column-row{
        flex-direction: row;
    }

    .flex.align-start-center{ align-items: center; }
}

@media (min-width: 768px){
    .flex.column-row-m{
        flex-direction: row;
    } 

    .flex.center-between{
        justify-content: space-between;
    }
    
    
    .flex.justify-center-m{
        justify-content: start;
    }
    .flex.align-start-center-m{ align-items: center; }
}

.flex-1{ flex: 1; }
.flex-2{ flex: 2; }
.flex-3{ flex: 3; }

.gap-1{gap: var(--sz-1)}
.gap-2{gap: var(--sz-2)}
.gap-3{gap: var(--sz-3)}
.gap-4{gap: var(--sz-4)}
.gap-5{gap: var(--sz-5)}
.gap-6{gap: var(--sz-6)}
.gap-7{gap: var(--sz-7)}
.gap-8{gap: var(--sz-8)}
.gap-9{gap: var(--sz-9)}
.gap-9{gap: var(--sz-10)}
.gap-9{gap: var(--sz-11)}

.shrink-0{
    flex-shrink: 0;
}

.flex-wrap{
    flex-wrap: wrap;
}
.flex-nowrap{
    flex-wrap: nowrap;
}


.ml-auto{ margin-left: auto; }
.mr-auto{ margin-right: auto; }
.mi-auto{ margin-inline: auto; }


.m-0{ margin: 0; }
.m-1{ margin: var(--sz-1); }
.m-2{ margin: var(--sz-2); }
.m-3{ margin: var(--sz-3); }
.m-4{ margin: var(--sz-4); }
.m-5{ margin: var(--sz-5); }
.m-6{ margin: var(--sz-6); }
.m-7{ margin: var(--sz-7); }
.m-8{ margin: var(--sz-8); }
.m-9{ margin: var(--sz-9); }
.m-9{ margin: var(--sz-10); }
.m-9{ margin: var(--sz-11); }

/* Margin top */
.mt-0{ margin-top: 0; }
.mt-1{ margin-top: var(--sz-1); }
.mt-2{ margin-top: var(--sz-2); }
.mt-3{ margin-top: var(--sz-3); }
.mt-4{ margin-top: var(--sz-4); }
.mt-5{ margin-top: var(--sz-5); }
.mt-6{ margin-top: var(--sz-6); }
.mt-7{ margin-top: var(--sz-7); }
.mt-8{ margin-top: var(--sz-8); }
.mt-9{ margin-top: var(--sz-9); }
.mt-9{ margin-top: var(--sz-10); }
.mt-9{ margin-top: var(--sz-11); }

/* Margin right */
.mr-0{ margin-right: 0; }
.mr-1{ margin-right: var(--sz-1); }
.mr-2{ margin-right: var(--sz-2); }
.mr-3{ margin-right: var(--sz-3); }
.mr-4{ margin-right: var(--sz-4); }
.mr-5{ margin-right: var(--sz-5); }
.mr-6{ margin-right: var(--sz-6); }
.mr-7{ margin-right: var(--sz-7); }
.mr-8{ margin-right: var(--sz-8); }
.mr-9{ margin-right: var(--sz-9); }
.mr-9{ margin-right: var(--sz-10); }
.mr-9{ margin-right: var(--sz-11); }

/* Margin bottom */
.mb-0{ margin-bottom: 0; }
.mb-1{ margin-bottom: var(--sz-1); }
.mb-2{ margin-bottom: var(--sz-2); }
.mb-3{ margin-bottom: var(--sz-3); }
.mb-4{ margin-bottom: var(--sz-4); }
.mb-5{ margin-bottom: var(--sz-5); }
.mb-6{ margin-bottom: var(--sz-6); }
.mb-7{ margin-bottom: var(--sz-7); }
.mb-8{ margin-bottom: var(--sz-8); }
.mb-9{ margin-bottom: var(--sz-9); }
.mb-9{ margin-bottom: var(--sz-10); }
.mb-9{ margin-bottom: var(--sz-11); }

/* Margin left */
.ml-0{ margin-left: 0; }
.ml-1{ margin-left: var(--sz-1); }
.ml-2{ margin-left: var(--sz-2); }
.ml-3{ margin-left: var(--sz-3); }
.ml-4{ margin-left: var(--sz-4); }
.ml-5{ margin-left: var(--sz-5); }
.ml-6{ margin-left: var(--sz-6); }
.ml-7{ margin-left: var(--sz-7); }
.ml-8{ margin-left: var(--sz-8); }
.ml-9{ margin-left: var(--sz-9); }
.ml-9{ margin-left: var(--sz-10); }
.ml-9{ margin-left: var(--sz-11); }

/* Margin Inline */
.mi-0{ margin-inline: 0; }
.mi-1{ margin-inline: var(--sz-1); }
.mi-2{ margin-inline: var(--sz-2); }
.mi-3{ margin-inline: var(--sz-3); }
.mi-4{ margin-inline: var(--sz-4); }
.mi-5{ margin-inline: var(--sz-5); }
.mi-6{ margin-inline: var(--sz-6); }
.mi-7{ margin-inline: var(--sz-7); }
.mi-8{ margin-inline: var(--sz-8); }
.mi-9{ margin-inline: var(--sz-9); }
.mi-9{ margin-inline: var(--sz-10); }
.mi-9{ margin-inline: var(--sz-11); }

/* Margin Block */
.mk-0{ margin-block: 0; }
.mk-1{ margin-block: var(--sz-1); }
.mk-2{ margin-block: var(--sz-2); }
.mk-3{ margin-block: var(--sz-3); }
.mk-4{ margin-block: var(--sz-4); }
.mk-5{ margin-block: var(--sz-5); }
.mk-6{ margin-block: var(--sz-6); }
.mk-7{ margin-block: var(--sz-7); }
.mk-8{ margin-block: var(--sz-8); }
.mk-9{ margin-block: var(--sz-9); }
.mk-9{ margin-block: var(--sz-10); }
.mk-9{ margin-block: var(--sz-11); }


.p-2-4{ padding: var(--sz-2); }
.p-4-7{ padding: var(--sz-4); }
.p-4-8{ padding: var(--sz-4); }

@media (min-width: 768px){
    .p-2-4{ padding: var(--sz-4); }
    .p-4-7{ padding: var(--sz-7); }
    .p-4-8{ padding: var(--sz-8); }
}   

.p-0{ padding: 0; }
.p-1{ padding: var(--sz-1); }
.p-2{ padding: var(--sz-2); }
.p-3{ padding: var(--sz-3); }
.p-4{ padding: var(--sz-4); }
.p-5{ padding: var(--sz-5); }
.p-6{ padding: var(--sz-6); }
.p-7{ padding: var(--sz-7); }
.p-8{ padding: var(--sz-8); }
.p-9{ padding: var(--sz-9); }
.p-10{ padding: var(--sz-10); }
.p-11{ padding: var(--sz-11); }

/* Padding top */
.pt-0{ padding-top: 0; }
.pt-1{ padding-top: var(--sz-1); }
.pt-2{ padding-top: var(--sz-2); }
.pt-3{ padding-top: var(--sz-3); }
.pt-4{ padding-top: var(--sz-4); }
.pt-5{ padding-top: var(--sz-5); }
.pt-6{ padding-top: var(--sz-6); }
.pt-7{ padding-top: var(--sz-7); }
.pt-8{ padding-top: var(--sz-8); }
.pt-9{ padding-top: var(--sz-9); }
.pt-9{ padding-top: var(--sz-10); }
.pt-9{ padding-top: var(--sz-11); }

/* Padding right */
.pr-0{ padding-right: 0; }
.pr-1{ padding-right: var(--sz-1); }
.pr-2{ padding-right: var(--sz-2); }
.pr-3{ padding-right: var(--sz-3); }
.pr-4{ padding-right: var(--sz-4); }
.pr-5{ padding-right: var(--sz-5); }
.pr-6{ padding-right: var(--sz-6); }
.pr-7{ padding-right: var(--sz-7); }
.pr-8{ padding-right: var(--sz-8); }
.pr-9{ padding-right: var(--sz-9); }
.pr-9{ padding-right: var(--sz-10); }
.pr-9{ padding-right: var(--sz-11); }

/* Padding bottom */
.pb-0{ padding-bottom: 0; }
.pb-1{ padding-bottom: var(--sz-1); }
.pb-2{ padding-bottom: var(--sz-2); }
.pb-3{ padding-bottom: var(--sz-3); }
.pb-4{ padding-bottom: var(--sz-4); }
.pb-5{ padding-bottom: var(--sz-5); }
.pb-6{ padding-bottom: var(--sz-6); }
.pb-7{ padding-bottom: var(--sz-7); }
.pb-8{ padding-bottom: var(--sz-8); }
.pb-9{ padding-bottom: var(--sz-9); }
.pb-9{ padding-bottom: var(--sz-10); }
.pb-9{ padding-bottom: var(--sz-11); }

/* Padding left */
.pl-0{ padding-left: 0; }
.pl-1{ padding-left: var(--sz-1); }
.pl-2{ padding-left: var(--sz-2); }
.pl-3{ padding-left: var(--sz-3); }
.pl-4{ padding-left: var(--sz-4); }
.pl-5{ padding-left: var(--sz-5); }
.pl-6{ padding-left: var(--sz-6); }
.pl-7{ padding-left: var(--sz-7); }
.pl-8{ padding-left: var(--sz-8); }
.pl-9{ padding-left: var(--sz-9); }
.pl-9{ padding-left: var(--sz-10); }
.pl-9{ padding-left: var(--sz-11); }

/* Padding Inline */
.pi-0{ padding-inline: 0; }
.pi-1{ padding-inline: var(--sz-1); }
.pi-2{ padding-inline: var(--sz-2); }
.pi-3{ padding-inline: var(--sz-3); }
.pi-4{ padding-inline: var(--sz-4); }
.pi-5{ padding-inline: var(--sz-5); }
.pi-6{ padding-inline: var(--sz-6); }
.pi-7{ padding-inline: var(--sz-7); }
.pi-8{ padding-inline: var(--sz-8); }
.pi-9{ padding-inline: var(--sz-9); }
.pi-9{ padding-inline: var(--sz-10); }
.pi-9{ padding-inline: var(--sz-11); }

/* Padding Block */
.pk-0{ padding-block: 0; }
.pk-1{ padding-block: var(--sz-1); }
.pk-2{ padding-block: var(--sz-2); }
.pk-3{ padding-block: var(--sz-3); }
.pk-4{ padding-block: var(--sz-4); }
.pk-5{ padding-block: var(--sz-5); }
.pk-6{ padding-block: var(--sz-6); }
.pk-7{ padding-block: var(--sz-7); }
.pk-8{ padding-block: var(--sz-8); }
.pk-9{ padding-block: var(--sz-9); }
.pk-9{ padding-block: var(--sz-10); }
.pk-9{ padding-block: var(--sz-11); }

form{
    display: flex;
    flex-direction: column;
    gap: 21px;
    width: 100%;
}

form.vertical .section{
    flex-direction: column;
}

form .section{
    gap: 13px;
    display: flex;
    width: 100%;
}

form .section .title{
    flex: 1;
}

form .section .fields{
    flex: 3;
}

form .group{
    display: flex;
    gap: 21px;
    flex-direction: column;
    grid-column: 1/ -1;
}

form .group .field{
    flex: 1
}
form .group .field.small{
    flex: initial;
}

form .section.vertical{
    flex-direction: column;
}

@container (width < 992px){
    form .section{
        flex-direction: column;
    }

    form .section .title:empty{
        display: none;
    }
    
}

form .fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 21px;
    align-items: start;
    flex: 2;
}

form .field{
    display: flex;
    flex-direction: column;
}

form .field.next{ grid-column-start: 1; }

form .field:has(.phone-input) .error-message ,
form .field input + .error-message,
form .field select + .error-message,
form .field textarea + .error-message{
    color: var(--red);
    padding: 3px;
    text-shadow: 0px 0px 1px #555;
    display: none;
}

form .field:has(.phone-input .invalid) .error-message ,
form .field input.invalid + .error-message,
form .field select.invalid + .error-message,
form .field textarea.invalid + .error-message{
    display: initial;
}

@container (width > 592px){
    form:not(.vertical) .fields {
        grid-template-columns: 1fr 1fr;
    }
    form:not(.vertical) .span2 {
        grid-column: span 2;
    }

    form .group{
        flex-direction: row;
    }

}

@container (width > 972px){
    form:not(.vertical) .fields {
        grid-template-columns: 1fr 1fr;
    }
}

label:not(.toggle) {
    display: flex;
    margin-bottom: 0.5rem;
    font-size: .9rem;
    font-weight: bold;
}

label:not(.toggle).required::after {
    content: '*';
    margin-left: 3px
}

select {
    background-color: var(--bg-elevated);
    color: inherit;
    padding: 8px;
    border-radius: 8px;
    font-family: inherit;
    border: 1px solid #999;
    transition: padding-left 0.2s linear;
    font-size: 1rem; 
}


form input:not([type="checkbox"]), form select, .input{
    background-color: var(--bg-elevated);
    color: black;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-family: inherit;
    border: 1px solid #999;
    transition: padding-left 0.2s linear;
    font-size: 1rem;
}

form input.small{
    padding: 3px 8px;
    width: fit-content;
}

form input[type="radio"]{
    width: auto;
}

form textarea {
    background-color: var(--bg-elevated);
    color: inherit;
    width: 100%;
    height: 120px;
    padding: 8px;
    border: 1px solid #999;
    border-radius: 8px;
    font-family: inherit;
    resize: none;
}

form div.alert{
    position: relative;
}

form div.alert label::after{
    content: attr(data-errmsg);
    position: absolute;
    bottom: 0;
    font-size: 0.9rem;
    color: red;
}

.toggle {
    cursor: pointer;
    display: inline-block;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.toggle-switch {
    display: inline-block;
    background: var(--light-1);
    border-radius: 1rem;
    width: 1.6em;
    height: .8em;
    vertical-align: middle;
    position: relative;
    transition: background-color 0.25s;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.toggle-switch:before, .toggle-switch:after {
    content: "";
}

.toggle-switch:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: .4em;
    height: .4em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .2em;
    transition: left 0.20s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.toggle:hover .toggle-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-switch {
    background: var(--theme);
}
.toggle-checkbox:checked + .toggle-switch:before {
    left: 1em;
}

.toggle-checkbox {
    position: absolute;
    visibility: hidden;
}

.input-select,
.input-span,
.input-button{
    background-color: var(--bg-elevated);
    color: inherit;
    width: 100%;
    border-radius: 8px;
    font-family: inherit;
    border: 1px solid #999;
    font-size: 1rem;
    display: flex;
}


.input-select > input,
.input-span > input,
.input-button > input{
    background-color: var(--bg-elevated);
    color: inherit;
    width: 100%;
    border-radius: 8px;
    border: none !important;
    flex: 3;
    border-radius: 8px 0 0 8px !important;
}

.input-select > select,
.input-span > span{
    background-color: #eee;
    color: inherit;
    /* width: 100%; */
    border-radius: 0 8px 8px 0;
    font-family: inherit;
    border: none;
    text-align: center;
    font-size: 1rem;
    border-left: 1px solid #ccc;
    flex: 1;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-button > button{
    width: 100%;
    border-radius: 0 8px 8px 0;
    font-family: inherit;
    border: none;
    text-align: center;
    font-size: 1rem;
    border-left: 1px solid #ccc;
    flex: 1;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-like.counter{
    background-color: var(--theme); 
    padding-inline: 0;
    width: fit-content;
}

.input-like.counter > button{
    color: var(--color);
    padding: 8px;
}

.input-like.counter > input{
    width: fit-content;
    border-radius: 0;
    flex: 1;
    background-color: var(--bg-elevated);
}

.input-button .phone-input-container{
    border: none !important;
}

.dark-mode .input-select > select,
.dark-mode .input-span > span{
    background-color: #555;
}

fieldset{
    border: 1px solid var(--lines);
    border-radius: 5px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
legend{
    padding: 5px;
    margin-left: 8px;
}

.ballon {
    cursor: pointer;
    user-select: none;
    align-items: center;
    display: flex !important;
    position: relative;
    text-wrap: nowrap;
}

.ballon-switch {
    display: inline-block;
    background: var(--light-1);
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    position: absolute;
    transition: background-color 0.25s;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
    z-index: 0;
}

.ballon-label{
    padding: 8px 13px;
    z-index: 1;
    opacity: .8;
    color: black;
}


.ballon:hover .ballon-switch:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.ballon-checkbox:checked + .ballon-switch {
    background: var(--theme);
}

.ballon-checkbox:checked ~  .ballon-label {
    color: white;
    opacity: 1;
}

.ballon-checkbox {
    position: absolute;
    visibility: hidden;
}


.tag {
    cursor: pointer;
    user-select: none;
    align-items: center;
    display: flex !important;
    position: relative;
    text-wrap: nowrap;
    border-radius: 8px;
    box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.5);
    top: -2px;
    transition: box-shadow .2s, top .2s;
    opacity: .6;
    font-weight: 200;
}

.tag-switch {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    position: absolute;
    z-index: 0;
}

.tag-label{
    padding: 8px 13px;
    z-index: 1;
    opacity: .6;
}


.tag:hover .tag-switch:before {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.tag-checkbox:checked ~  .tag-label {
    opacity: 1;
    font-weight: bolder;
}

.tag-checkbox {
    position: absolute;
    visibility: hidden;
}

.tag-label::after{
    margin-left: 8px;
    content: '\2716';
}
.tag-checkbox:checked ~ .tag-label::after{
    content:'\2714';
}

.tag:has(.tag-checkbox:checked) {
    top: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
    opacity: 1;
}

input:disabled{
    opacity: 0.7;
}

.resize-none{
    resize: none;
}


.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 13px;
    height: 13px;
    border: 2px solid #ccc;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Cor do fundo quando o checkbox está marcado */
  .custom-checkbox:checked {
    background-color: dodgerblue;
    border-color: dodgerblue;
    position: relative;
  }

  .custom-checkbox.disabled:checked {
    background-color: #aaa;
    border-color: #aaa;
    position: relative;
  }
  
  /* Estilo do "check" dentro do checkbox */
  .custom-checkbox:checked::before {
    content: '✔';
    color: white;
    font-size: 10px;
  }

  .shadow-1{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.shadow-2{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.mw-0{max-width: var(--wd-0);}
.mw-1{max-width: var(--wd-1);}
.mw-2{max-width: var(--wd-2);}
.mw-3{max-width: var(--wd-3);}
.mw-4{max-width: var(--wd-4);}
.mw-5{max-width: var(--wd-5);}

.mw-300{max-width: 300px;}
.mw-360{max-width: 360px;}

.fit-content{width: fit-content; max-width: 100%;}

.w-p100{width: 100%;}

.minh-p100{min-height: 100%;}

.min-width-0{ min-width: 0;}
.min-height-360{ min-height: 360px;}
.min-height-200{ min-height: 200px;}
.max-height-200{ max-height: 200px;}


.half{
    width: 50% !important;
}

.quarter{
    width: 25% !important;
}

@media (orientation: landscape) {
    .h-p100{height: 100%;overflow: auto;}
}

.height-p100{height: 100%;}

.bg-opac{
    background-color: white;
}


.shadow-1{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.shadow-2{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.border{border: 1px solid var(--lines)}
.border-none.border-none{border: none;}

.border.dashed{border-style: dashed;}

.border-right{border: 1px solid var(--lines)}

.border-light{
    --lines: #ccc
}



.bb-1{border-bottom: 1px solid var(--lines);}
.bt-1{border-top: 1px solid var(--lines);}


.br-0{ border-radius: 0}
.br-1{ border-radius: var(--sz-1); }
.br-2{ border-radius: var(--sz-2); }
.br-3{ border-radius: var(--sz-3); }
.br-4{ border-radius: var(--sz-4); }
.br-5{ border-radius: var(--sz-5); }
.br-6{ border-radius: var(--sz-6); }
.br-7{ border-radius: var(--sz-7); }
.br-8{ border-radius: var(--sz-8); }
.br-9{ border-radius: var(--sz-9); }
.br-9{ border-radius: var(--sz-10); }
.br-9{ border-radius: var(--sz-11); }


.bbr-0{ border-radius: 0}
.bbr-1{ border-radius: 0 0 var(--sz-1) var(--sz-1); }
.bbr-2{ border-radius: 0 0 var(--sz-2) var(--sz-2); }
.bbr-3{ border-radius: 0 0 var(--sz-3) var(--sz-3); }
.bbr-4{ border-radius: 0 0 var(--sz-4) var(--sz-4); }
.bbr-5{ border-radius: 0 0 var(--sz-5) var(--sz-5); }
.bbr-6{ border-radius: 0 0 var(--sz-6) var(--sz-6); }
.bbr-7{ border-radius: 0 0 var(--sz-7) var(--sz-7); }
.bbr-8{ border-radius: 0 0 var(--sz-8) var(--sz-8); }
.bbr-9{ border-radius: 0 0 var(--sz-9) var(--sz-9); }
.bbr-9{ border-radius: 0 0 var(--sz-10) var(--sz-10); }
.bbr-9{ border-radius: 0 0 var(--sz-11) var(--sz-11); }



.circle{
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.round-card > :not(.hide):first-child{ border-radius: 8px 8px 0 0;}
.round-card > :not(.hide):last-child{ border-radius: 0 0 8px 8px ;}
.round-card > :not(.hide):first-child:last-child{ border-radius: 8px ;}

.bt-red{
    border-top: 5px solid var(--red);
}
.bt-green{
    border-top: 5px solid var(--green);
}


.border-black{
    border-color: #000;
    border-bottom-color: #000;
}



.spinner{
    position: fixed;
    inset: 0;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes spinner {
    to {transform: rotate(360deg);}
}
   
.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border-top: 3px solid rgb(123, 150, 255);
    border-right: 5px solid transparent;
    animation: spinner .6s linear infinite;
} 


.image{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    position: relative;
}

.avatar{
    background-image: url('../_assets/user-avatar.webp');
    border-radius: 50%;
}

.logo{
    background-image: url('../_assets/company-logo.jpg');
    border-radius: 50%;
}

.product{
    background-image: url('../_assets/product.jpg');
}

.editable{
    position: absolute;
    bottom: 0px;
    right: 0px;
    color: black;
    border-radius: 50%;
    font-size: 1.2rem !important;
    padding: 4px !important;
    box-shadow: 0 0 0 .8px black, 0 0 3px #0005;
    background-image: linear-gradient(45deg, #ddd 25%, #fff);
}

body.dark-mode .editable{
    background-color: #000;
    color: white;
    box-shadow: 0 0 0 .5px white;
    background-image: linear-gradient(45deg, #252323 25%, #756d6d);
}

.avatar.sz-1, .logo.sz-1, .product.sz-1{
    width: var(--sz-1);
    height: var(--sz-1);
}

.avatar.sz-2, .logo.sz-2, .product.sz-2{
    width: var(--sz-2);
    height: var(--sz-2);
}

.avatar.sz-3, .logo.sz-3, .product.sz-3{
    width: var(--sz-3);
    height: var(--sz-3);
}

.avatar.sz-4, .logo.sz-4, .product.sz-4{
    width: var(--sz-4);
    height: var(--sz-4);
}

.avatar.sz-5, .logo.sz-5, .product.sz-5{
    width: var(--sz-5);
    height: var(--sz-5);
}

.avatar.sz-6, .logo.sz-6, .product.sz-6{
    width: var(--sz-6);
    height: var(--sz-6);
}

.avatar.sz-7, .logo.sz-7, .product.sz-7{
    width: var(--sz-7);
    height: var(--sz-7);
}

.avatar.sz-8, .logo.sz-8, .product.sz-8{
    width: var(--sz-8);
    height: var(--sz-8);
}

.avatar.sz-9, .logo.sz-9, .product.sz-9{
    width: var(--sz-9);
    height: var(--sz-9);
}

.avatar.sz-10, .logo.sz-10, .product.sz-10{
    width: var(--sz-10);
    height: var(--sz-10);
}

.avatar.sz-11, .logo.sz-11, .product.sz-11{
    width: var(--sz-11);
    height: var(--sz-11);
}

.avatar.list, .logo.list, .product.list{
    width: 40px;
    height: 40px;
}


.avatar.small, .logo.small, .product.small{
    width: 29px;
    height: 29px;
}

.avatar.medium, .logo.medium, .product.medium{
    width: 64px;
    height: 64px;
}

.avatar.small.squared, .logo.small.squared, .product.small.squared{
    border-radius: 8px;
}

.avatar.large, .logo.large, .product.large{
    width: 155px;
    border: 5px solid #fff;
}

.avatar.large, .logo.large, .product.large{
    max-width: 30%;
    aspect-ratio: 1/1;
}



.avatar.large.squared, .logo.large.squared, .product.large.squared{
    border-radius: 8px;
}



.avatar-group{
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: flex-end;
}

.avatar-group .avatar{
    margin-left: -8%;
    cursor: pointer;
    border: 2px solid white;
    top: 0;
    transition: top .3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.avatar-group li.avatar:hover{
    z-index: 1;
    top: -5px;
}



.pointer{
    cursor: pointer;
}

.hide{
    display: none;
}

.wizard{
    display: flex;
    flex-direction: column;
}

.wizard .step{
    opacity: 0.5;
    position: relative;
    text-align: center;
} 

.wizard .step.active{
    opacity: 1;
    font-weight: bolder;
    color: var(--theme);
    cursor: pointer;
} 

.wizard .step.passed{
    opacity: 1;
    color: var(--theme);
    font-weight: bolder;
    cursor: pointer;
} 

.wizard .step.passed .circle{
    border: 2px solid var(--theme);
} 

.wizard .step.active .circle{
    border: 2px solid var(--theme);
    background-color: var(--theme);
    color: var(--color)
} 

.wizard [data-step]:not(.active){
    display: none;
}



.container-size{
    container-type: inline-size;
    height: 100%;
    overflow: auto;
}

.btn{
    font-weight: bold;
    text-wrap: wrap;
    position: relative;
}

.btn > svg{
    fill: #fff;
}

.btn .loader{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
}

.btn.disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

.btn[disabled]{
    cursor: not-allowed;
}

.btn.blue{
    background-color: hsl(228, 81%, 59%) ;
    color: #fff;
}

.btn.red{
    background-color: red;
    color: #fff;
}

.btn.cancel{
    background-color: #ddd;
    border: 1px solid #777;
}

.btn.danger{
    background-color: var(--red);
    font-weight: bolder;
    color: white;
}

.btn.dark{
    background-color: var(--theme-dark);
    color: #fff;
}

.btn .icon{
    font-size: 1.3rem;
    padding: 0;
}

.btn.loading{
    color: transparent;
    pointer-events: none;
    cursor: not-allowed;
}

.btn:not(.icon){
    padding: 13px 21px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn.small{
    padding: 8px;
}

.btn-group{
    display: flex;
    
}

.btn-group button{
    display: flex;
    border: 1px solid var(--lines);
    border-left: 0;
    border-radius: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 13px;
}

.btn-group button:first-child{
    display: flex;
    border: 1px solid var(--lines);
    border-radius: 5px 0 0 5px;
}

.btn-group button:last-child{
    display: flex;
    border: 1px solid var(--lines);
    border-left: none;
    border-radius: 0 5px 5px 0;
}

.btn-group button:only-child{
    display: flex;
    border: 1px solid var(--lines);
    border-radius: 5px;
}

.bullet{
    position: relative;   
}

.bullet::after{
    position: absolute;
    content: attr(data-num);
    padding: .5rem;;
    background-color: rgb(11, 175, 11);
    border-radius: 50%;
    top: -3px;
    box-shadow: 0 0 2px 0px black;
}


.theme-1{
    background-color: teal;
    color: white;
}


button{
    border: none;
    background-color: transparent;
    cursor: pointer;
}

::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: teal;
	border-radius: 100px;
}


.input-like{
    background-color: var(--bg-elevated);
    display: flex;
    padding-inline: 8px;
    border-radius: 8px;
    border: 1px solid;
    width: 100%;
    border: 1px solid #999;
}

.input-like input{
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
}

.input-like.input-select{
    padding-inline: 0;
    padding-left: 8px;
}   


#brandImage{
    width: 34px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ddd;
    border-radius: 3px;
}

img{
    height: auto;
    width: 420px;
    max-width: 100%;
}

section{
    height: max(100svh, auto);


    & img{
        height: auto;
        width: 420px;
        max-width: 100%;
    }
}

@font-face {
    font-family: "Montserrat";
    src: url("../_assets/Montserrat-Regular.ttf");
}

@font-face {
    font-family: 'Icon';
    font-style: normal;
    font-weight: 400;
    src: url('../_assets/icons.woff2') format('woff2');
}

@font-face {
    font-family: 'Bruno';
    src: url('../_assets/BrunoAce-Regular.ttf');
}

.icon {
    font-family: 'Icon';
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    padding: 3px;
    flex-shrink: 0;
    user-select: none;
    color: inherit
}

/* Font Sizes */
.fs-1{ font-size: 0.75rem; }
.fs-2{ font-size: 1rem; }
.fs-25{ font-size: 1.1rem; }
.fs-3{ font-size: 1.25rem; }
.fs-4{ font-size: 1.5rem; }
.fs-5{ font-size: 1.75rem; }
.fs-6{ font-size: 2rem; }
.fs-7{ font-size: 2.25rem; }
.fs-8{ font-size: 2.8rem; }
.fs-9{ font-size: 3.2rem; }
.fs-19{ font-size: 4.5rem; }



/* Colors */
.notext{ color: transparent; }
.color-red{ color: var(--red); }
.color-green{ color: var(--green); }
.color-white{ color: white; }
.color-theme{ color: var(--theme); }

body{
    --bg-opac : #333;
    --bg-elevated: white;
    --bg-surface: #333b;
    --lines: #999;
    color : #f0f0f0;
}


/* Font Weight */
.bold{ font-weight: bold; }
.bolder{ font-weight: bolder; }
.normal{ font-weight: normal;}

/* Text align */
.ta-center{text-align: center;}
.ta-left{text-align: left;}
.ta-right{text-align: right;}


.opacity-6{
    opacity: 0.6;
}
.opacity-4{
    opacity: 0.4;
}
.opacity-0{
    opacity: 0;
}

.strike{
    text-decoration: line-through;
    opacity: .8;
}

.text-nowrap{
    text-wrap: nowrap;
}


.ellipsis{
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.underline{
    text-decoration: underline;
}
.upper{
    text-transform: uppercase;
}

.paralax{
    background-image: linear-gradient(to bottom, rgb(1, 6, 73) 0%, rgba(3, 39, 82, 0.9) 100%);
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    border-bottom-style: none;
    border-color: #BBBBBB;
    border-left-style: none;
    border-radius: 0px;
    border-right-style: none;
    border-top-style: none;
    border-width: 0px;
}

.card{
    background-color: purple;
}

.grid{ display: grid; width: 100%; }
.grid.info{ grid-template-columns: auto 1fr; }

.auto-1{ grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.auto-2{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.auto-3{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.auto-4{ grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

.grid.center{ align-items: center; justify-items: center; }
.grid.align-center{ align-items: center; }

.grid .next{ grid-column-start: 1; }

.grid.fr-2{ grid-template-columns: repeat(2, 1fr) }

.grid.auto-rows{grid-auto-rows: 1fr;}


.grid.grid-1-2{
    grid-template-columns: 1fr 1fr
}
.grid.grid-2-4{
    grid-template-columns: 1fr 1fr 1fr 1fr
}

@media (max-width: 576px) {
    
    .grid.grid-2-4{
        grid-template-columns:  1fr 1fr
    }
    .auto-4{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.color-blue{
    color: rgb(5, 53, 102);
}

.bg-purple{
    background-color: purple;
}

.bg-gradient{
    background: radial-gradient(circle at bottom left, #cfcfcf, #fefefe);
}


.animate-updown{animation: updown 3s infinite ease-in-out;}
@keyframes updown {
    0% {transform: translateY(0) scale(1);}
    50% {transform: translateY(-8px) scale(1.05);}
    100% {transform: translateY(0)  scale(1);}
}



.btn{
    padding: 13px 21px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}