/* =========================================
   HIDE SCROLLBAR
   Tetap bisa scroll
========================================= */

html,
body,
#modal,
#modal .backdrop,
#modal .modal-scroll,
.overflow-auto,
.overflow-y-auto,
.overflow-y-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#modal::-webkit-scrollbar,
#modal .backdrop::-webkit-scrollbar,
#modal .modal-scroll::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    background:#f5f7fb;
    color:#0f172a;
    font-family:Inter,system-ui,sans-serif
}

button,input,select{
    font:inherit
}

.material-symbols-rounded{
    font-family:"Material Symbols Rounded";
    font-weight:400;
    font-style:normal;
    font-size:22px;
    line-height:1;
    display:inline-block;
    white-space:nowrap;
    -webkit-font-feature-settings:"liga";
    -webkit-font-smoothing:antialiased
}

.sidebar-bg{
    background:linear-gradient(180deg,#10285b,#0a1938)
}

.sidebar-active{
    background:#ffffff1f;
    box-shadow:inset 3px 0 #60a5fa
}

.soft{
    box-shadow:0 10px 30px #0f172a0d
}

.hoverlift{
    transition:.18s
}

.hoverlift:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 35px #0f172a12
}

.mobile-nav{
    box-shadow:0 -10px 30px #0f172a14;
    padding-bottom:max(7px,env(safe-area-inset-bottom))
}

.backdrop{
    background:#0f172a75;
    backdrop-filter:blur(3px)
}

.sheet{
    animation:sheet .22s ease
}

.pop{
    animation:pop .2s ease
}

@keyframes sheet{
    from{
        transform:translateY(100%)
    }
    to{
        transform:none
    }
}

@keyframes pop{
    from{
        opacity:0;
        transform:scale(.97) translateY(8px)
    }
    to{
        opacity:1;
        transform:none
    }
}

.toast{
    animation:toast .2s ease
}

@keyframes toast{
    from{
        opacity:0;
        transform:translate(-50%,10px)
    }
    to{
        opacity:1;
        transform:translate(-50%,0)
    }
}

.dot{
    animation:pulse 1.5s infinite
}

@keyframes pulse{
    50%{
        opacity:.3
    }
}

.modal-close{
    transition:.15s
}

.modal-close:hover{
    transform:scale(1.03)
}


/* =========================================
   HIDE ALL SCROLLBARS
   Scroll tetap bisa digunakan
========================================= */

html,
body,
#modal,
#modal .backdrop,
#modal .modal-scroll,
.overflow-auto,
.overflow-y-auto,
.overflow-y-scroll{
    scrollbar-width:none;
    -ms-overflow-style:none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#modal::-webkit-scrollbar,
#modal .backdrop::-webkit-scrollbar,
#modal .modal-scroll::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
}


@media (min-width:768px){
    .mobile-nav{
        display:none!important
    }
}