body{
    font-family:Arial,sans-serif;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{

    overflow-x:hidden;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;
    overscroll-behavior:none;

}

body{

    overflow-x:hidden;

    touch-action:manipulation;

    margin:0;

    padding:0;

}

.card{
    border-radius:16px;
    padding:20px;
    background:white;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.total-box{
    font-size:40px;
    font-weight:bold;
}

.breakdown-item{
    padding:50px 0;
    border-bottom:1px solid #e5e7eb;
}

.toast-success {
    background: #16a34a;
}

.toast-error {
    background: #dc2626;
}

.toast-warning {
    background: #f59e0b;
}

.toast-info {
    background: #16a34a;
}
#pageContent{
    visibility:hidden;
}

.active-nav i,
.active-nav span{
    color:#2563eb; /* blue-600 */
}

.nav-link{
    color:#64748b; /* slate-500 */
}

.nav-link:hover{
    color:#2563eb;
}

.nav-link span{
    display:none;
}

.active-nav span{
    display:block;
}
.active-sidebar{
    background: linear-gradient(90deg,#2563eb,#06b6d4);
    color:#fff;
    transform:scale(1.02);
    box-shadow:0 15px 35px rgba(37,99,235,.25);
}

.active-sidebar i,
.active-sidebar p,
.active-sidebar span{
    color:#fff !important;
}

.active-sidebar .text-slate-500{
    color:rgba(255,255,255,.8) !important;
}

/* ===========================
   Login Loader
=========================== */

.animate-login-logo{
    animation: pulseLogo 1.4s ease-in-out infinite;
}

@keyframes pulseLogo{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

}

/* Ring */

.loader-ring{

    position:relative;
    width:90px;
    height:90px;

}

.loader-ring span{

    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#2563eb;

    left:50%;
    top:50%;

    margin:-6px;

    transform:
    rotate(calc(var(--i) * 30deg))
    translateY(-38px);

    animation:
    fadeDots 1.2s linear infinite;

    animation-delay:
    calc(var(--i) * .1s);

}

.loader-ring span:nth-child(1){--i:0;}
.loader-ring span:nth-child(2){--i:1;}
.loader-ring span:nth-child(3){--i:2;}
.loader-ring span:nth-child(4){--i:3;}
.loader-ring span:nth-child(5){--i:4;}
.loader-ring span:nth-child(6){--i:5;}
.loader-ring span:nth-child(7){--i:6;}
.loader-ring span:nth-child(8){--i:7;}
.loader-ring span:nth-child(9){--i:8;}
.loader-ring span:nth-child(10){--i:9;}
.loader-ring span:nth-child(11){--i:10;}
.loader-ring span:nth-child(12){--i:11;}

.loader-text{

    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:18px;
    font-weight:700;

    color:#2563eb;

}

@keyframes fadeDots{

    0%{

        opacity:1;
        transform:
        rotate(calc(var(--i) * 30deg))
        translateY(-38px)
        scale(1.3);

    }

    100%{

        opacity:.15;
        transform:
        rotate(calc(var(--i) * 30deg))
        translateY(-38px)
        scale(.7);

    }

}

/* Progress */

.loader-progress{

    width:40%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    #2563eb,
    #38bdf8
    );

    border-radius:999px;

    animation:
    progressMove
    1.3s
    ease-in-out
    infinite;

}

@keyframes progressMove{

    0%{

        width:0%;

    }

    50%{

        width:85%;

    }

    100%{

        width:100%;

    }

}