body[data-sidebar="dark"] .navbar-brand-box {background: #fff;}
body[data-sidebar="dark"] .vertical-menu { /*background: #0a1827;*/
    background: linear-gradient(360deg, #ffc4a2, #90caf9);
    animation: breathe 6s infinite alternate;
}

/*Slim scroll*/
*{scrollbar-width: thin;scrollbar-color: #111 #e0e0e0;}
*::-webkit-scrollbar {width: 4px; height: 6px;}
*::-webkit-scrollbar-track {background: #e0e0e0;}
*::-webkit-scrollbar-thumb {background-color: #111;border-radius: 4px;}

#page-topbar{-webkit-box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.05);
    box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.05);}

.logo-lg img { /*max-width: 100%; max-height: 40px;*/
    max-width: 112%;
    height: 52px;
}
.logo-sm img{max-width: 100%; max-height: 70px;}
.navbar-brand-box {padding: 0 8px;}

#sidebar-menu ul li ul.sub-menu li a{position: relative;}
#sidebar-menu ul li ul.sub-menu li a::before {content: "";position: absolute;width: 6px;height: 6px;border-radius: 50%;transform: translateY(-50%);
top: 50%;left: 35px;background-color: #b4bdc6 !important;}
#sidebar-menu ul li ul.sub-menu li a {padding: .4rem 1rem .4rem 3.5rem;font-size: 14px;}

.top_box{width: 100%;min-height: 190px; display: block; border-radius: 5px;padding: 25px;}
.top_box h1{font-size: 40px; color: #fff; font-weight: 700;margin: 0}
.top_box h3{font-size: 22px; color: #fff; font-weight: 400;}
.top_box img{margin-top: 20px; max-width: 100%; max-height: 100px;}

.dard_blue_bg{background: -webkit-gradient(linear, left top, left bottom, from(var(--primaryHEX)), to(#2262d3));
  background: linear-gradient(to bottom, var(--primaryHEX), #2262d3)}

.blue_bg {
    background: -webkit-gradient(linear, right top, left top, from(#64b3f6), to(#2b77e5));
    /*background: linear-gradient(to left, #64b3f6, #2b77e5);*/
    background: linear-gradient(to left, #badfff, #c0d8fb);
    color: black;
}

.purple_bg {
    background: -webkit-gradient(linear, right top, left top, from(#ed68ff), to(#be0ee1));
    /*background: linear-gradient(to left, #ed68ff, #be0ee1);*/
    background: linear-gradient(to left, #fbe0ff, #f4d2fb);
    color: black;
}
h4{
    color:black!important;
}
.pink_bg {
    background: -webkit-gradient(linear, left top, left bottom, from(#f8558b), to(#f92a6f));
    /*background: linear-gradient(#f8558b, #f92a6f);*/
    background: linear-gradient(#ff9ebe, #ffdae6);
    color: black;
}

.green_bg {
    background: -webkit-gradient(linear, left top, left bottom, from(#4eda89), to(#1a9f53));
    /*background: linear-gradient(#4eda89, #1a9f53);*/
    background: linear-gradient(#c9ffe0, #a3e6c0);
    color: black;
}

.orange_bg {
    background: -webkit-gradient(linear, right top, left top, from(#f7754e), to(#F7511E));
    /*background: linear-gradient(to left, #f7754e, #F7511E);*/
    background: linear-gradient(to left, #ffcaba, #ffd3c5);
    color: black;
}

.red_bg{background: -webkit-gradient(linear, right top, left top, from(#f32e2e), to(#ff0000));
  background: linear-gradient(to left, #f32e2e, #ff0000);
}
.gray_bg{background: #666;}

.yellow_bg{background: -webkit-gradient(linear, left top, left bottom, from(#f4d02b), to(#e1940e));
  background: linear-gradient(#f4d02b, #e1940e);}

/*Top card*/
/* .top_card{padding-right: 6px;padding-left: 6px;} */
.top_card h5{font-size: 15px;}
.top_card p{font-size: 12px;}

.top_card .card{color: #fff; margin-bottom: 0px;}
.top_card .card .text-success{color: #2aff7d !important;}
.top_card .card .text-danger{color: #ff9f9f !important;}
.top_card .card-body{padding: 10px;}

.card_white{
  color: #000;
  margin-bottom: 0px;
  box-shadow: 3px 6px 8px rgba(0, 0, 0, .2) !important;
  transition: all .4s;
}
.card_transparent{background: rgba(255,255,255,0.5);}
.accordion-item:first-of-type .accordion-button, .accordion-button:not(.collapsed) {
  font-weight: 600;
  color: #fff;
  background: transparent;
}
.accordion-button{color: #fff !important;}
.accordion-item{margin-bottom: 5px;}

.accordion-body{color: #000;}

.user_table tr th:first-child {position: sticky !important;left: 0;background: #eff2f7;z-index: 999;}
.user_table tr>td:first-child {position: sticky !important;left: 0;z-index: 999;background: #fff;}
.table-edits input, .table-edits select{width: 100%;}

.card {
    -webkit-box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.07);
    box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.07);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-radius: 10px;
    border-bottom: 4px solid #ffcc00;
}

  .table th {
    background: #0a1827;
    color: #fff;
  }
  .border_bottom{border-bottom: solid 1px #b3b3b3;
    padding-bottom: 12px;}

/*Media*/
@media (max-width:1600px){
    .top_card h5{font-size: 13px;}
    .top_card p{font-size: 11px;}
}
@media (max-width:1199px){
    .top_card h5{font-size: 15px;}
    .top_card p{font-size: 13px;}
}
@media (max-width:992px){
.page-content {
    padding: calc(70px + 15px) calc(15px * .75) 60px calc(15px * .75);
}
.page-title-box {
    padding-bottom: 10px;
  }
}



.page-header {
    padding: 8px 4px;
    border-radius: 22px;
    text-align: center;
    color: #2c3e50;
    font-weight: 600;
    background: linear-gradient(270deg, #e3f2fd, #fce4ec, #e8f5e9);
    background-size: 600% 600%;
    animation: softGradient 8s ease infinite;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 14px;
    border-bottom: 3px solid red;
}

    .page-header h4 {
        margin: 0;
        font-size: 22px;
    }

/* Gradient animation */
@keyframes softGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}




<style >
/* Icon styling */
.user-icon {
    color: #e53935;
    font-size: 22px;
    margin-right: 6px;
    animation: iconPulse 2s infinite;
}

/* Username styling */
.username {
    font-size: 22px;
    font-weight: 700;
    color: #e53935;
    letter-spacing: 0.5px;
    animation: textGlow 3s ease-in-out infinite;
}

/* Soft glow animation */
@keyframes textGlow {
    0% {
        text-shadow: 0 0 2px rgba(229,57,53,0.4);
    }

    50% {
        text-shadow: 0 0 10px rgba(229,57,53,0.8);
    }

    100% {
        text-shadow: 0 0 2px rgba(229,57,53,0.4);
    }
}

/* Icon pulse */
@keyframes iconPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

/* Optional hover effect */
.user-animate:hover .username {
    color: #c62828;
    text-shadow: 0 0 12px rgba(198,40,40,0.9);
}