:root{
    --input-border-color:var(--grey-chart);
}
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}
*{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.font-light{
    font-weight: 300;
}
.font-regular{
    font-weight: 400;
}
.font-medium{
    font-weight: 500;
}
.font-semibold{
    font-weight: 600;
}
.font-bold{
    font-weight: 700;
}
body,html{
    font-size: calc(var(--rem1) * 1px);
    /* overflow: hidden; */
}
.nom,.nomp{
    margin:unset;
}
.nomi,.nompi{
    margin:unset!important;
}
.nop,.nomp{
    padding:unset;
}
.nopi,.nompi{
    padding:unset!important;
}
th{
    text-align: center;
}
.txc{
    text-align:center;
}
.txr{
    text-align:right;
}
.txl{
    text-align: left;
}
.txj{
    text-align: justify;
}
.hidden{
    display: none;
}
.clickable{
    cursor:pointer;
}
.h-100{
    height: 100%;
}
.h-100vh{
    height: 100vh;
}
.w-100{
    width: 100%;
}
.w-100vw{
    width: 100vw;
}
.h-auto-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.h-auto-container>*:not(.h-auto){
    flex-grow: 0;
    flex-shrink: 0;
}
.h-auto{
    flex-grow:1;
    flex-shrink: 1;
}
.scroll-container{
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}
/* .scroller {
  scrollbar-width: thin;
  scrollbar-color: var(--blue-main);
} */
.scroller::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.scroller::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: white;
}
.scroller::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--scroller-color);
}
.overlay-container{
    position: relative;
}
.overlay-container>.overlay-item{
    position: absolute;
    &.overlay-item-main{
        top:50%;
        transform: translateY(-50%);
    }
}
.rounded-border-s{
    border-radius: var(--4px);
}
.rounded-border,.rounded-border-m{
    border-radius: var(--8px);
}
.rounded-border-l{
    border-radius: var(--16px);
}
.noborder{
    border:unset!important;
}
td,th,tr{
    border-radius:unset!important;
    padding:4px 8px;
}
.btn,.btn-small,.btn-large{
    text-transform: none;
}
.btn:hover, .btn-large:hover, .btn-small:hover{
    background-color: var(--blue-main)!important;
}
.scroller:has(.blocker.active){
    overflow: hidden;
}
.blocker{
    width:100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    background-color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    &:not(.active){
        display: none;
    }
}
.browser-default{
    width: 100%;
    height: var(--48px);
    border-radius: calc(var(--48px) / 2 * 1px);
    border:1px solid var(--input-border-color);
    line-height: var(--32px);
    padding: var(--16px) var(--32px);
    &.wicon{
        padding-left: var(--68px);
        padding-right: var(--68px);
    }
    &.wicon.iright{
        padding-right: var(--68px);
    }
    &.wicon.ileft{
        padding-left: var(--68px);
    }
}
.bold{
    font-weight: bold;
}
.bolder{
    font-weight: bolder;
}
.th-label{
    height: 36px;
}
.th-label>div{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
/* div:has(>.browser-default):not(:last-child){
    margin-bottom: var(--px20);
} */
div:has(> .wicon){
    position: relative;
    & iconify-icon{
        position: absolute;
        top: 50%;
        font-size: calc(var(--36px) * 0.8);
        &.ileft{
            transform: translate(-50%, -50%);
            left: calc(var(--36px) / 2);
        }
        &.iright{
            transform: translate(50%, -50%);
            right: calc(var(--36px) / 2);
        }
    }
}
.btn-hollow{
    border-width:2px;box-sizing:border-box;
}
.font-reguler{
    font-weight: 500;
}
.font-semibold{
    font-weight: 600;
}
.font-bold{
    font-weight: 700;
}
[slide-tgt]{
    display: none;
}