:root {
    --bg-light-gray: #f2f2f2;
    --dark-black: #222;
}



.application-login-section{
    position:relative;
    min-height:100vh;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

   background: linear-gradient(rgb(8 15 35 / 24%), rgb(10 20 45 / 18%)), url(../img/baner/6.jpg);

    background-position:center !Important;
    background-size:cover !Important;
    background-repeat:no-repeat !Important;
}

/* Content above effects */
.application-login-section > *{
    position:relative;
    z-index:10;
}

/* Animated Blobs */
.application-login-section::before,
.application-login-section::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    animation:float 10s ease-in-out infinite alternate;
}

.application-login-section::before{
      width: 450px;
    height: 450px;
    background: #327bae;
    top: -120px;
    left: -120px;
    opacity: 0.55;
}

.application-login-section::after{
    width:380px;
    height:380px;
    background:#00d4ff;
    right:-100px;
    bottom:-100px;
    opacity:.40;
    animation-duration:12s;
}

/* Extra Pink Blob */
.application-login-section .blob{
    position:absolute;
    width:320px;
    height:320px;
    background:#ec4899;
    border-radius:50%;
    filter:blur(90px);
    top:40%;
    left:45%;
    opacity:.25;
    animation:float2 14s infinite alternate ease-in-out;
}

/* Glass Circles */
.circle{
    position:absolute;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    backdrop-filter:blur(10px);
    background:rgba(255,255,255,.03);
}

.circle.one{
    width:180px;
    height:180px;
    top:10%;
    right:15%;
}

.circle.two{
    width:100px;
    height:100px;
    bottom:18%;
    left:10%;
}

.circle.three{
    width:70px;
    height:70px;
    top:25%;
    left:25%;
}

/* Grid Overlay */
.grid{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

    background-size:50px 50px;
    mask-image:radial-gradient(circle at center, black 40%, transparent 95%);
    z-index:1;
}

/* Floating Animation */
@keyframes float{
    from{
        transform:translate(0,0) scale(1);
    }
    to{
        transform:translate(60px,40px) scale(1.15);
    }
}

@keyframes float2{
    from{
        transform:translateY(-30px);
    }
    to{
        transform:translateY(40px);
    }
}

/* Login Box */
.login-main-box-auth{
    width:100%;
    margin:auto;

    padding:35px;

    border-radius:30px;

    background:rgba(255,255,255,.10);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
        0 20px 60px rgba(0,0,0,.30),
        inset 0 1px 1px rgba(255,255,255,.20);

    position:relative;
    overflow:hidden;
}

/* Glass Shine */
.login-main-box-auth::before{
    content:"";
    position:absolute;

    width:250px;
    height:250px;

    top:-120px;
    right:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    filter:blur(10px);
}

/* Logo */

.login-main-box-auth img{

    width:200px;

    display:block;

    margin:0 auto 25px;
}

/* Heading */

.login-main-box-auth h4{

    color:#fff;

    text-align:center;

    font-size:25px;

    font-weight:600;

    margin-bottom:35px;
}



/* Input */

.form-login .form-control{

    height:50px;

    border-radius:7px;

    background:#fff !important;

    border:1px solid #372828a8;

    color:#fff;

    font-size:15px;

    padding:0 20px;

 
}

/* Placeholder */

.form-login .form-control::placeholder{

    color:#222;
}

/* Focus */


/* Remember */

.form-check-label{

    color:rgba(255,255,255,.85);
}

/*.form-check-input{*/

/*    border:1px solid rgba(255,255,255,.4);*/

/*    background:rgba(255,255,255,.08);*/
/*}*/

/*.form-check-input:checked{*/

/*    background:#5B8CFF;*/

/*    border-color:#5B8CFF;*/
/*}*/

/* Button */


/* Error */

.text-danger{

    color:#ffb3b3 !important;

    font-size:13px;
}

/* Success */

.alert-success{

    background:rgba(40,167,69,.15);

    border:1px solid rgba(40,167,69,.25);

    color:#d4ffd4;

    border-radius:12px;
}

















.auth-left-cs {
    /*background-image: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, #22222200 100%), url(../img/baner/special/1.jpg);*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    height: 100vh;
    width: 50%;
    display: flex;
    justify-content: Center;
    align-items: center;
}

.auth-left-cs video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-left {
    width: 30%;
    background-color: #fff;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid #137DC5;
    padding: 20px;
}

.login-field-box {
    max-width: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;

}

.login-field-box img {
    width: 220px;
}

.auth-left .login-field-box h2 {
    font-weight: 600;
    color: #000;
    font-size: 35px;
}

.auth-left .login-field-box p {
    text-align: center;
    line-height: 27px;
    font-size: 15px;
    color: #000;
}

.auth-left .login-field-box input {
    height: 55px;
}

#rememberMe {
    width: 18px !important;
    height: 18px !important;
    border-color: #222 !important;
}

.login-box-latest {
    /*background-color: #2a1313d6;*/
    border-radius: 25px;
    /* padding: 40px !important; */
    /* padding-top: 20px !important; */
    /*box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/
    /*filter: blur(10px);*/
    /* background: rgba(255, 255, 255, 0.14); */
    border-radius: 16px;
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
    /* backdrop-filter: blur(16.9px);
    -webkit-backdrop-filter: blur(16.9px); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: auto;
}

.login-box-latest .btn--form {
    width: 75%;
    border-radius: 40px;
    color: #fff;
    background-color: #13889C;
}

.login-box-latest .btn--form:hover {
    background-color: #0d6b7b;
}

/*.login-box-latest .btn--form.color-1 {*/
/*    background-color: #ea5050;*/
/*}*/
/*.login-box-latest .btn--form.color-1:hover {*/
/*    background-color: #b52424;*/
/*}*/

/*.login-box-latest .btn--form.color-2 {*/
/*    background-color: #45c73e;*/
/*}*/
/*.login-box-latest .btn--form.color-2:hover {*/
/*    background-color: #1d9017;*/
/*}*/

/*.login-box-latest .btn--form.color-3 {*/
/*    background-color: #5489d1;*/
/*}*/
/*.login-box-latest .btn--form.color-3:hover {*/
/*    background-color: #1e4884;*/
/*}*/
.login-box-latest .btn--form-login {
    width: 60%;
    border-radius: 10px;
    background-color: #13889C;
}

.login-box-latest .btn--form-login:hover {
    border-radius: 40px;
}

.login-box-latest h4 {
    font-size: 18px;
    text-align: center;
    line-height: 34px;
    font-weight: 600;

}

.login-box-latest input[type="text"],
.login-box-latest input[type="password"] {
    height: 50px !important;
    /*padding:0 !important;*/
    border: 0 !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    color: #000 !important;
    font-weight: 300 !important;

}

.login-box-latest input[type="text"]::placeholder,
.login-box-latest input[type="password"]::placeholder {
    color: #000 !important;

}

.login-box-latest input[type="text"]:focus,
.login-box-latest input[type="password"]:focus {
    border-bottom: 2px dashed #ccc !important;
}

.login-screen-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

}

.login-screen-left h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 600;
}

.login-screen-left p {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.sidebar-cont {
    position: relative;
    height: 100%;

}

.sidebar-profile {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    /* top: 100%; */
    background-color: #3b3b3b;
}

.sidebar-profile .side-profile-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.sidebar-profile .side-profile-box img {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px dashed #fff;
}

.sidebar-profile .side-profile-box .side-profile-dt {
    padding-left: 10px;
}

.sidebar-profile .side-profile-box .side-profile-dt h3 {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.sidebar-profile .side-profile-box .side-profile-dt p {
    margin: 0;
    font-size: 12px;
    margin-top: 2px;
    color: #20cc20;
    font-weight: 600;
}

.header-top-cs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-right: 20px;

}

.header-top-cs .header-section-dt h3 {
    font-size: 27px;
    font-weight: 500;
    color: #000;
    margin: 0;
}

.header-top-cs .header-section-dt p {
    font-size: 14px;
    margin: 0;
    color: #858585;
    font-weight: 400;
}

.header-top-cs .header-section-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    width: 29%;
}

.header-top-cs .header-section-right a {
    font-size: 16px;
    /*border: 1px solid #ababab;*/
    min-width: 45px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    color: #fff;
}

/* First button */
.header-top-cs .header-section-right a:first-child {
    /*background: linear-gradient(135deg, #667eea, #764ba2);*/
    /*border-color: #667eea;*/
}

/* Second button */
.header-top-cs .header-section-right a:last-child {
    /*background: linear-gradient(135deg, #ff6a00, #ee0979);*/
    /*border-color: #ee0979;*/
}

.header-top-cs .header-section-right a i {
    color: #000 ;
}

.section-top-padding {
    padding-top: 10px;
}

.progress-bar {
    background-color: #025187 !important;
}

.dashboard-top-section select {
    height: 45px;
    /* background-color: #eeeeee; */
    border: 0;
    outline: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-black);
    border: 1px solid #9f9b9b;
}

.dashboard-top-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.dashboard-top-section ul li {
    margin: 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: #9a9a9a;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.dashboard-top-section ul li span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-top-section ul li span.bg_Gray {
    background-color: #ababab;
}

.dashboard-top-section ul li span.bg_Orange {
    background-color: #ea8436;
}

.dashboard-top-section ul li span.bg_Green {
    background-color: #16a816;
}

.dashboard-list-btns ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
}

.dashboard-list-btns ul li {
    margin-right: 5px;
}

.dashboard-list-btns ul li a {
    padding: 7px 11px;
    text-decoration: none;
    font-size: 14px;
    /* border: 1px solid #025187; */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    border-radius: 5px;
    transition: 0.5s;
}

/* 
.dashboard-list-btns ul li a.active {
    background-color: #025187;
    color: #fff;
} */

.dashboard-list-btns ul li a:hover {
    /* background-color: #025187;
    color: #fff; */
    border-radius: 40px;
}

.dashboard-list-btns ul li a.bg_1 {
    background-color: #39B27C;
}

.dashboard-list-btns ul li a.bg_2 {
    background-color: #1a7bb9;
}

.dashboard-list-btns ul li a.bg_3 {
    background-color: #f8d347;
}

.dashboard-list-btns ul li a.bg_4 {
    background-color: #b52323;
}

.dashboard-list-btns ul li a.bg_5 {
    background-color: #cb4ec9;
}

.dashboard-list-btns ul li a.bg_6 {
    background-color: #7a339e;
}

.dashboard-project-view {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.dashboard-project-view h3 {
    /* background-color: #afce333b; */
    color: #000;
    border: 1px solid #222;
    padding: 15px 15px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    width: 100%;
    border-radius: 5px;
}

.dashboard-project-view h3 span {
    margin-left: 15px;
}

.dashboard-project-view ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 0 0 30px;
}

.dashboard-project-view ul li {
    width: 47%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin-bottom: 30px;
    font-size: 16px;
    /* font-weight: 600; */
    color: #000;
}

.dashboard-project-view ul li:nth-child(even) {
    padding-left: 40px;
}

.dashboard-project-view ul li:nth-child(even)::before {
    left: 13px;
}

.dashboard-project-view ul li span {
    font-weight: 400;
    font-size: 14px;
    color: #575656;
}

.dashboard-project-view ul li::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #aec942;
    border-radius: 50%;
    border: 4px solid #d9e89d;
    position: absolute;
    left: -27px;
    top: 4px;

}

/* canvas#doughnut {
    width: 300px !important;
    height: 300px !important;
    margin: auto;
} */

.flex-col-bet {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-view-bottom .col-lg-4 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.project-view-bottom .project-view-bottom-icon {
    width: 50px;
    height: 50px;
    border: 1px solid #025187;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-view-bottom .project-view-bottom-icon i {
    font-size: 18px;
    color: #025187;
}

.project-view-bottom .project-view-bottom-dt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.project-view-bottom .project-view-bottom-dt h4 {
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.project-view-bottom .project-view-bottom-dt p {
    margin: 0;
    font-size: 16px;
    color: #575656;
    font-weight: 600;
}

.border-right-cs {
    border-right: 1px solid #ccc;
}

.add-project-btn {
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
    background-color: #137DC5;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: fit-content;
    transition: 0.5s;
}

.add-project-btn:hover {
    border-radius: 40px;
    color: #fff;

}

.dashboard-top-section {
    margin-bottom: 30px;
}

.project-progress-main-container {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.project-process-box ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-process-tree-box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 3;
}

.project-process-tree-box span {
    font-size: 15px;
    font-weight: 400;
}

.project-process-tree-box h6 {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.project-process-tree-box i {
    font-size: 20px;
}

.project-process-tree-box i.fs_30 {
    font-size: 30px;
}

.project-process-tree-box-short {
    position: absolute;
    padding: 10px;
    background-color: #e9fd98ed;
    border: 1px solid #025187;
    top: -73px;
    width: 185px;
    border-radius: 10px;

}

.project-process-tree-box-short span {
    width: 25px;
    height: 25px;
    background-color: #e9fd98ed;
    border: 1px solid #025187;
    border-left: 0;
    border-top: 0;
    display: flex;
    margin: auto;
    margin-bottom: -22px;
    rotate: 46deg;
}

.project-process-tree-box-short p {
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    margin: 0;
}

.project-process-box {
    position: relative;
}

.project-process-box .project-process-line {
    width: 100%;
    height: 4px;
    background-color: #d5d5d5;
    position: absolute;
    left: 0px;
    top: 45px;
}

.project-process-box .project-process-line-2 {
    width: 50%;
    /* height: 4px; */
    border: 2px dashed #15ee3a;
    position: absolute;
    left: 0px;
    top: 45px;
}

.v-none {
    visibility: hidden;
}

.project-process-tree-box i.fa-circle-check {
    color: #2ec517;
    background: #fff;
}

.project-process-tree-box i.fa-stopwatch {
    color: #d5af15;
    background: #fff;
}

.project-process-tree-box i.fa-circle-info {
    color: #f70e0e;
    background: #fff;
}

.dashboard-project-container p {
    margin-bottom: 0;
    font-size: 19px;
    font-weight: 500;
    color: #000;
}

.dashboard-project-container p span {
    font-size: 14px;
    font-weight: 400;
}

.dashboard-project-container p span i {
    margin: 0 10px;
}

.main-table-container {
    position: relative !important;

    width: 100% !important;

    padding: 24px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(248, 251, 255, 0.98) 100%
        ) !important;

    border: 1px solid #e7edf5 !important;

    border-radius: 18px !important;

    box-shadow:
        0 8px 25px rgba(1, 42, 107, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.10) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    overflow: hidden !important;

    isolation: isolate !important;

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease !important;
}



.main-table-container::after {
    content: "" !important;

    position: absolute !important;

    width: 190px !important;
    height: 190px !important;

    top: -105px !important;
    right: -65px !important;

    border-radius: 50% !important;

    background: rgba(1, 42, 107, 0.035) !important;

    border: 1px solid rgba(1, 42, 107, 0.045) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* =========================================================
   INNER CONTENT
========================================================= */

.main-table-container > * {
    position: relative !important;
    z-index: 3 !important;
}


/* =========================================================
   HOVER
========================================================= */

.main-table-container:hover {
    border-color: #dce6f3 !important;

    box-shadow:
        0 14px 35px rgba(1, 42, 107, 0.09),
        0 2px 6px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   OPTIONAL DECORATIVE BACKGROUND
   Add class: profile-container-shape
   to any inner empty div if required
========================================================= */

.main-table-container-shape {
    position: absolute !important;

    width: 90px !important;
    height: 90px !important;

    right: 35px !important;
    bottom: -50px !important;

    border-radius: 24px !important;

    background: rgba(23, 105, 210, 0.025) !important;

    border: 1px solid rgba(23, 105, 210, 0.05) !important;

    transform: rotate(35deg) !important;

    pointer-events: none !important;
}











.main-table-container-top-btns-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.main-table-container-top-btns-box a {
    width: fit-content;
    padding: 6px 13px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    background-color: #e04d4d;
    text-decoration: none;
    font-weight: 600;
    transition: 0.5s;
    border: 1px solid #e04d4d;
}

.main-table-container-top-btns-box a i {
    margin-left: 5px;
}

.main-table-container-top-btns-box a:hover {
    border-radius: 40px;
    background-color: transparent;
    color: #e04d4d;
    border: 1px dashed #e04d4d;
}

.main-table-container-top-filter input,
.main-table-container-top-filter select {
    height: 37px;
    border-radius: 4px;
    font-size: 15px;
}

.main-table-container-top-filter label {
    font-weight: 600;
    margin-bottom: 5px;
}


.entry-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}

.entry-select p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #000;
}

.entry-select select {
    width: 100px;
    background-color: #efefef;
    border: 0;
}

.table_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}

.table_bottom p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #000;
    white-space: nowrap;
}

.table-pagination .page-item {
    margin: 0 5px;
}

.table-pagination .page-item .page-link {
    border-radius: 10% !important;
    padding: 0;
    padding: 4px 11px;
    font-size: 14px;
    border: 0;
    color: #222;
}

.table-pagination .page-item .page-link.page_active {
    background-color: #222;
    color: #fff;
}

.table-pagination .pagination {
    margin: 0;
}

.td-project-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

}

.td-project-box img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
}

.td-project-box .td-project-info {
    padding-left: 10px;
}

.td-project-box .td-project-info h3 {
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: #000;

}

.td-project-box .td-project-info p {
    font-size: 14px;
    text-align: left;
    color: #636363bf;
    font-weight: 400;
}

.td-project-dt h3 {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #000;
    margin-bottom: 2px;
    line-height: 22px;
}

.td-project-dt small {
    font-size: 13px;
    text-align: center;
    color: #636363bf;
    font-weight: 500;
}

.action-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

tr td div.action-box a {
    font-size: 13px;
    font-weight: 500;
    padding: 4px 15px;
    white-space: nowrap;
    color: #fff !important;
    background-color: #089748;
    border-radius: 30px;
    border-radius: 25px !important;
}

.action-box a.dlt {
    background-color: #970808;
}

.action-box a.view {
    background-color: #2c6c74;
}

.action-box a.cstm {
    background-color: #c7ad19;
}

.action-box a.dropdown-toggle {
    border-radius: 2px;
}

.action-box .dropdown ul li a {
    padding: 8px;
    background-color: transparent;
    color: #000 !important;
    font-size: 12px;
}

.action-box .dropdown ul li a i {
    font-size: 15px;
}

.action-box .dropdown ul li a.edit {
    color: #027009 !important;
}

.action-box .dropdown ul li a.dlt {
    color: #b23939 !important;
}

.action-box .dropdown ul li a.cstm {
    color: #707002 !important;
}

.action-box .dropdown ul li a.cstm1 {
    color: #027049 !important;
}

.action-box .dropdown ul li a.cstm2 {
    color: #023970 !important;
}

.action-box .dropdown ul li a.cstm3 {
    color: #70025a !important;
}

.action-box .dropdown ul li a.cstm4 {
    color: #704d02 !important;
}

.badge-progess {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 15px;
    white-space: nowrap;
    color: #3fc943 !important;
    background-color: #6dd47f3d;
    border-radius: 30px;
}

.badge-completed {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 15px;
    white-space: nowrap;
    color: #45c50a !important;
    background-color: #94f26875;
    border-radius: 30px;
}

.badge-cancelled {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 15px;
    white-space: nowrap;
    color: #d63b35 !important;
    background-color: #e36b6733;
    border-radius: 30px;
}

td.department-project-td {
    min-width: 250px;
}

.progres-cs {
    width: 80%;
    margin: auto;
    height: 9px;
}

.modal-form-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.modal-form-btns button {
    width: 110px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
   background: linear-gradient(135deg, #012A6B 0%, #1769d2 100%) !important;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;

}

.modal-form-btns button:first-child {
    background: #970808 !Important;
}

.modal-form-btns button:hover,
.modal-form-btns a.pdf-download:hover {
    border-radius: 40px;
}

.modal-form-btns a.pdf-download {
    width: 180px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #b23939;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;
}

.table-csv-btns {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-csv-btns ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-csv-btns ul li {
    margin: 0 4px;
}

.table-csv-btns ul li a {
    padding: 4px 15px;
    background-color: #b23939;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    transition: 0.5s;
}

.table-csv-btns ul li a:hover {
    border-radius: 40px;
}

.dashboard-project-team {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.dash-team-box-top h3 {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    color: #000;
    margin-bottom: 5px;
}

.dash-team-box-top p {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
    color: #6a6a6a;
}

.project-team-main-container {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* background-color: #f7f7f7; */
}

.project-team-main-container h3 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    color: #000;
    margin-bottom: 5px;
}

.project-team-main-container p {
    font-size: 13px;
    margin: 0;
    font-weight: 500;
    color: #6a6a6a;
}

.project-team-main-container ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.project-team-main-container ul li img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
}

.project-team-main-container ul li {
    margin-left: -10px;
}

.eclipse-btn {
    font-size: 23px;
    color: #000;
}

.df-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.dasboard-project-bottom-right {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.header-display {
    display: flex;
    align-items: center;
}

.header-display p {
    color: #025187;
    margin: 5px;
    font-size: 1.2rem;
    word-spacing: 0.5rem;
}

pre {
    padding: 10px;
    margin: 0;
    cursor: pointer;
    font-size: 1.2rem;
    color: #025187;
}

.days,
.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: auto;
    /* padding: 0 20px; */
    justify-content: space-between;

}

.week div,
.days div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    width: 2.5em;
    border-radius: 100%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* .days div:hover {
    background:#f2f2f2;
    color: rgb(40, 201, 25);
    cursor: pointer;
  } */
.week div {
    opacity: 0.5;
}

.current-date {
    background-color: var(--accent);
    color: var(--white);
}

.display-selected {
    margin-bottom: 10px;
    /* padding: 20px 20px; */
    text-align: center;
}

.calendar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.dasboard-project-bottom-right h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.dashboard-leads-box {
    padding: 10px;
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    background-color: #efefef;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dashboard-leads-box img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
}

.dash-leads-dt {
    padding-left: 20px;
    width: 100%;
}

.dash-leads-dt h6 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0px;
}

.dash-leads-dt h6 span {
    font-weight: 400;
    font-size: 13px;
    background-color: #9ca380;
    border-radius: 40px;
    padding: 4px 9px;
    color: #fff;
}

.dash-leads-dt small {
    font-weight: 500;
    font-size: 13px;
    color: #676464;
}

.project-main-overview {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.btn-common {
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
    background-color: #e04d4d;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 20px; */
    width: fit-content;
    transition: 0.5s;
}

.btn-common:hover {
    border-radius: 40px;
    color: #fff;

}

.btn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    color: #000;
}

.widget-title {
    font-size: 28px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.project-dashboard-main-box .project-main-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-dashboard-main-box .project-main-title img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
}

.project-dashboard-main-box .project-main-title h3 {
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.project-dashboard-main-box {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.project-main-desc {
    padding-top: 10px;
}

.project-main-desc p {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 10px;
}

.project-main-desc span {
    background: antiquewhite;
    color: #d7442b;
    padding: 8px 19px;
    font-weight: 600;
    border-radius: 40px;
    font-size: 14px;
}

.df-flex-col-bet {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.project-step {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
}

.project-step ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.project-step ul li {
    margin: 7px 0;
}

.project-step ul li a {
    padding: 10px 15px;
    display: flex;
    width: 100%;
    background-color: #eff4db;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #BDD460;
    border-radius: 40px;
    color: #000;
    font-size: 17px;
    font-weight: 600;
}

.project-step ul li a span {
    width: 40px;
    height: 40px;
    background-color: #d8dec0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.project-step ul li a.active {
    background-color: #8aa034;
    color: #fff;
}

.project-step ul li a.active span {
    background-color: #fff;
    color: #BDD460;
}

.project-create-step {
    /* padding: 15px; */
    background-color: #fff;
    margin: 20px 0 40px 0;
    /* border: 1px solid #ccc; */
    border-radius: 8px;


}

.project-create-step ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

}

.project-create-step ul li a {
    color: #909090;
    font-weight: 600;
    font-size: 16px;

}

.project-create-step ul li a span {
    width: 180px;
    height: 5px;
    background-color: #c7c7c7;
    display: flex;
    border-radius: 10px;
    margin-bottom: 10px;
}

.project-create-step ul li a.active span {
    background-color: #137DC5;
}

.project-create-step ul li a.active {
    color: #000;
}

.project-create-container {

    padding: 20px;
    background-color: #ffffffdb;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.o-f-p {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: #000;
    margin-bottom: 5px;
}

.project-create-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 19px;
}

.project-create-btns a {
    padding: 6px 20px;
    background-color: #137DC5;
    border: 1px solid #137DC5;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 4px;
    text-decoration: none;
    align-items: center;
    display: flex;
    justify-content: center;
    transition: 0.5s;
    border-radius: 40px;

}

.project-create-btns a:hover {
    background-color: #023970;
    color: #fff;
    border-radius: 40px;
}

.project-create-btns a:first-child {
    background-color: transparent;
    color: #b23939;
    border-color: #b23939;
}

.project-create-btns a:first-child:hover {
    background-color: #b23939;
    color: #fff;
}


.project-preview-table tr th {
    padding: 15px;
}

.project-preview-table tr th .project-prev-td {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #5f5f5f;
}

.project-preview-table tr td {
    font-size: 15px;
    line-height: 28px;
    font-weight: 600;
    padding: 15px;
}

.project-success {
    border-radius: 15px;
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.project-success img {
    width: 200px;
}

.project-success h3 {
    margin: 20px 0;
    font-size: 25px;
    color: #000;
    font-weight: 600;
}

.project-success a {
    width: 100px;
    background-color: #b23939;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    text-decoration: none;
    transition: 0.5s;
}

.project-success a:hover {
    border-radius: 40px;
}

.mt_70 {
    margin-top: 70px !important;
}

.project-updates-top h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
}

.project-updates-top p {
    font-size: 15px;

}

.project-sidebar {
    /* background-color: #fff; */
    padding: 5px;
    /* border: 1px solid #ccc; */
    border-radius: 5px;
    /* position: sticky;
    top: 100px; */
}

.project-sidebar ul {
    padding: 15px;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgb(80 78 78 / 14%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(7px);
    border-radius: 10px;
}

.project-sidebar ul li a {
    padding: 5px 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-color: #ffffff3d !important;
    /* border-bottom: 1px solid #2222222b; */
    border: 1px solid #ffffff3d !important;
    font-weight: 500;
    border-radius: 5px;
}

.project-sidebar ul li a.active {
    background-color: #fff !important;
    color: #222 !important;
    border-radius: 40px;
}

.project-sidebar ul li a:hover {
    border-radius: 40px;
}

.project-sidebar ul li a.a-disable {
    background-color: #d2d2d2;
    color: #000;
}

.project-sidebar ul li a.bg-nav-top-1 {
    background-color: #ffc107;
    border-color: #ffc107;
}

.project-sidebar ul li a.bg-nav-top-2 {
    background-color: #b528da;
    border-color: #b528da;
}

.project-sidebar ul li a.bg-nav-top-3 {
    background-color: #2fb4c8;
    border-color: #2fb4c8;
}

.project-sidebar ul li a.bg-nav-top-4 {
    background-color: #e045c0;
    border-color: #e045c0;
}

.project-sidebar ul li a.bg-nav-top-5 {
    background-color: #fd7f0d;
    border-color: #fd7f0d;
}

.project-list-container-main h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-list-container-main-member {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.project-list-container-main-member-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-list-container-main-member-img img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.project-list-container-main-member p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.project-list-container-main-member p span {
    padding: 3px 10px;
    border-radius: 5px;
    background: #025187;
    font-weight: 500;
    color: #ffff;
    font-size: 11px;
    margin-left: 10px;
}

.project-list-container-main-member-img p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333333;
}

.project-list-container-main-desc h5 {
    color: #025187;
    font-size: 15px;
    font-weight: 600;
}

.project-list-container-main-desc p {
    margin-bottom: 4px;
    font-size: 14px;
    color: #000;
}

h4.info-text-proect-view {
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

h4.info-text-proect-view i {
    font-size: 15px;
    color: #025187;
}

.project-main-over-view {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.project-over-main-img {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-over-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.project-over-main-dt h2 {
    font-weight: 600;
    color: #000;
    font-size: 25px;
}

.project-over-main-dt h3 {
    font-weight: 600;
    color: #454545;
    font-size: 16px;
}

.project-over-main-dt h3.date-h3 i {
    font-size: 15px;
    margin-right: 5px;
}

.project-over-main-dt h3.date-h3 span {
    color: red;
}

.project-over-main-dt p {
    font-size: 15px;
}

.project-over-main-dt p strong {
    color: #4b4b4b;
}

.project-over-view-tasks {
    /* background-color: #f2f2f2; */
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
}

.project-over-view-tasks-mem-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-over-view-tasks-mem-img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
}

.project-over-view-tasks-dt h3 {
    font-size: 19px;
    font-weight: 600;
    color: #000;
}

.project-over-view-tasks-dt ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.project-over-view-tasks-dt ul li {
    width: 49%;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.project-over-view-tasks-dt ul li a {
    color: #000;
}

.project-over-view-tasks-dt ul li span {
    color: red;
    margin-left: 10px;
}


.task-progress {
    width: 49%;
    margin: unset;
    height: 9px;
    background: #fff;
    border: 1px solid #ccc;
    margin-right: 5px;
}

.project-task-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.project-task-top select {
    width: 200px;
    height: 40px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
}

.project-task-top .project-team-main-container {
    padding: 0;
    border: 0;
}

.project-task-main-box {
    background-color: #fff;
    padding: 20px;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
    margin: 10px 0;
}

.project-task-badge-add {
    background-color: #efefef;
    /* border: 1px solid #ccc; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
}

.project-task-badge-add p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.project-task-badge-add a {
    width: 35px;
    height: 35px;
    background-color: #025187;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.project-task-badge-add a:hover {
    background-color: #b23939;
}

.project-task-main-container {
    background-color: #eeeeee;
    padding: 20px;
    /* border: 1px solid #ccc; */
    border-radius: 15px;
}

.project-task-main-container h6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.project-task-main-container h6 a {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #6e6e6e;
    color: #000;
    border-radius: 50%;
    rotate: -40deg;
    font-size: 14px;
}

.project-task-main-container h6 a:hover {
    background-color: #025187;
    color: #fff;
}

.project-task-main-container-dt h3 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.project-task-main-container-dt p {
    font-size: 14px;
    color: #222;
    line-height: 25px;
}

.project-task-main-container-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-task-main-container-bottom .project-team-main-container {
    padding: 0;
    background-color: transparent;
    border: 0;
}

.project-task-main-container-bottom small {
    font-size: 13.5px;
}

.project-task-main-container.bg_success {
    background-color: #a1dca261;
}

.project-task-main-container.bg_wrn {
    background-color: #efcf6d59;
}

.task-status {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.task-status ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.task-status label {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.task-status label i {
    width: 25px;
}

.task-status label span {
    padding: 5px 18px;
    background-color: #26a660;
    color: #fff;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.modal-btn-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.modal-btn-footer .btn-common {
    width: 120px;
    border-radius: 10px;
}

.modal-btn-footer .btn-common:hover {
    border-radius: 40px;
}

.modal-btn-footer a.btn-cancel {
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
    background-color: transparent;
    color: #b23939;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 120px;
    transition: 0.5s;
    border-radius: 10px;
    border: 1px solid #b23939;
}

.modal-btn-footer a.btn-cancel:hover {
    background-color: #b23939;
    color: #fff;
    border-radius: 40px;
}

.modal-title-cs {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.create-members-preview ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.create-members-preview ul li a {
    padding: 4px 6px;
    background-color: #f7f7f7;
    border-radius: 40px;
    color: #000;
    border: 1px solid #ccc;
}

.create-members-preview ul li a i {
    margin-right: 5px;
    color: #2c6c74;

}

.project-doc-main-container {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px 0;
}

.project-doc-container {
    background-color: #eeeeee;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #adadad;
}

.project-doc-container h3 {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    color: #000;
}

.project-doc-container h3 a {
    color: #000;
}

.project-doc-box {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-doc-box i {
    font-size: 35px;
    color: #737373;
}

.pop_add_user_profile img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.pop_add_user_profile {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.pop_add_user_profile input {
    display: none;
}

.pop_add_user_profile label {
    width: 140px;
    height: 40px;
    background-color: #025187;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pop_add_user_profile a {
    width: 140px;
    height: 40px;
    background-color: #eeeeee;
    color: #222;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

.pop_add_user_profile_top {
    padding-top: 20px;
}

.pop_add_user_profile_top p {
    margin: 0;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
}

.project-calendar-main {
    background-color: #fff;
    margin: 0;
    padding-right: 0;
}

.project-calendar-filter h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.project-calendar-filter ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-calendar-filter ul li {
    margin: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.project-calendar-filter ul li input {
    width: 18px;
    height: 18px;
}

.project-calendar-filter ul li label {
    font-weight: 600;
    color: #444444;
}

.project-calendar-top-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
}

.project-calendar-top-left button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #025187;
    background-color: #f7f7f7;
    color: #025187;
    transition: 0.5s;
}

.project-calendar-top-left button:hover {
    background-color: #025187;
    color: #fff;
}

.project-calendar-top-left p {
    margin: 0;
    font-weight: 600;
    font-size: 17px;
}

.project-calendar-top-right {
    padding-top: 15px;
}

.project-calendar-top-right ul {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;

}

.project-calendar-top-right ul li a {
    padding: 7px 20px;
    background-color: #f7f7f7;
    color: #000;
    border-right: 1px solid #ccc;
}

.project-calendar-top-right ul li:last-child a {
    border-right: 0;
}

.project-calendar-top-right ul li:first-child a {
    background-color: #025187;
    color: #fff;
}

.project-calendar-top-right ul li a:hover {
    background-color: #025187;
    color: #fff;
}

.border-bottom-cs {
    border-bottom: 1px solid #ccc;
}

.calender-table thead tr th {
    text-align: center;
    padding: 15px 5px;
    font-weight: 600;
    color: #3a3a3a;
    border: 1px solid #ccc;
    width: 200px;
}

.calender-table tbody tr td {
    border: 1px solid #ccc;
    min-width: 100px;
}

.calender-table tbody tr td .td-calendar-box {
    max-width: 200px;
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.calender-table tbody tr td .td-calendar-box p {
    font-size: 16px;
    margin-bottom: 3px;
    font-weight: 600;
    color: #000;
}

.calender-table tbody tr td .td-calendar-box p.disable-p {
    color: #7c7c7c;
}

.calender-table tbody tr td .td-calendar-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.calender-table tbody tr td .td-calendar-box ul li {
    margin-bottom: 5px;
}

.calender-table tbody tr td .td-calendar-box ul li a {
    font-size: 12px;
    font-weight: 600;
    background-color: #f7f7f7;
    color: #000;
    padding: 4px 7px;
    border-radius: 5px;
    white-space: nowrap;

}

.calender-table tbody tr td .td-calendar-box ul li a.pink-a {
    background-color: #f39ace61;
    color: #ce0a7c;
}

.calender-table tbody tr td .td-calendar-box ul li a.green-a {
    background-color: #a9f39a61;
    color: #31c014d1;
}

.calender-table tbody tr td .td-calendar-box ul li a.orange-a {
    background-color: #f3d89a61;
    color: #d99c0de9;
}

.calender-table tbody tr td .td-calendar-box ul li a.blue-a {
    background-color: #9adbf361;
    color: #1c96c2;
}

.calender-table {
    overflow-x: auto;
}

.calender-table::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
.calender-table::-webkit-scrollbar-track {
    background-color: #f7f7f7;
    border-radius: 10px;
}

/* Handle */
.calender-table::-webkit-scrollbar-thumb {
    background: #025187;
    border-radius: 10px;
}

.project-activiy-main-container {
    background-color: #fff;
    padding: 10px;
}

.project-activiy-top ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: 5px; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 20px;
}

.project-activiy-top ul li a {
    padding: 7px 11px;
    text-decoration: none;
    font-size: 14px;
    /* border: 1px solid #025187; */
    color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    /* border-radius: 5px; */
    transition: 0.5s;
    width: 150px;
    text-transform: uppercase;
    height: 50px;

}

.project-activiy-top ul li a:hover,
.project-activiy-top ul li a.active {
    background-color: #025187;
    color: #fff;
}

.project-activiy-top-left {
    padding-top: 15px;
}

.project-activiy-top-left p {
    margin: 0;
    font-weight: 600;
    font-size: 17px;
}


.project-activiy-top-right ul {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;

}

.project-activiy-top-right ul li a {
    padding: 10px 20px;
    /* background-color: #f7f7f7; */
    color: #000;
    border: 1px solid #ccc;
}

.project-activiy-top-right ul li:last-child a {
    border-right: 0;
}

.project-activiy-top-right ul li:first-child a {
    background-color: #025187;
    color: #fff;
}

.project-activiy-top-right ul li a:hover {
    background-color: #025187;
    color: #fff;
}

.td-project-name {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.td-project-name span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #cce85b;
}

.td-project-name span.round-gray {
    background-color: #ccc;
}

.color-green {
    color: #16a816;
}

.f-size {
    font-size: 18px;
}

.sidebar-radio input {
    border: 1px solid #696969;
}

.sidebar-radio .form-check {
    margin: 10px 0;
}

.sidebar-radio .form-check label {
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

.project-access-main {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.project-access-top h3 {
    font-weight: 600;
    color: #000;
    margin-bottom: 5px;
}

.project-access-top p {
    font-size: 15px;
    font-weight: 500;
}

.project-access-top-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    padding-right: 15px;
}

.project-access-top-search input {
    border: 0;
    font-size: 14px;
    font-weight: 500;
}

.access-admin span {
    font-size: 11px;
    font-weight: 600;
    padding: 5px;
    background-color: #a9f39a61;
    color: #31c014d1;

    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
    margin-top: 5px;
}

td.access-tb-field {
    max-width: 100px;
}

.access-tb-field input,
.access-tb-field select {
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
}

.proeject-view-bottom-cs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    column-gap: 20px;

}

.btn-view-cs {
    width: 120px;
    margin-top: 20px;
}

.btn-more {
    font-weight: 600;
    color: #288dd1;
    text-decoration: underline;
}

.project-create-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

.project-create-field label {
    white-space: nowrap;
    font-weight: 500;
}

.project-create-field input,
.project-create-field textarea {
    width: 75%;
}

.w-80 {
    width: 76%;
    margin: 0;
}

.w-100-inp input {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.btn-vw-project {
    background-color: transparent;
    border: 1px solid #222;
    color: #222;
}

.btn-vw-project:hover {
    background-color: #137DC5;
    border-color: #137DC5;
}

.project-view-date {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: fit-content;
    margin-top: 23px;
}

.project-view-date p {
    margin: 0;
    color: #000;
    font-size: 15px;
}

.project-view-date .col-3 {
    width: 120px;
}

.project-view-date small {
    font-weight: 600;
    margin-bottom: 10px;
}

.project-view-date .icon-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.task-modal-head small {
    font-weight: 600;
    color: #a7a7a7;
}

.task-create-field {
    display: flex;
    justify-content: flex-start;
    align-items: center;

}

.task-create-field label {
    white-space: nowrap;
    width: 190px;
    font-weight: 600;
    color: #444444;
}

.task-create-field label i {
    width: 25px;
}

.task-create-field input {
    width: 40%;
}

.task-create-attach {
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-create-attach li {
    margin: 10px 0;
}

.task-create-attach li a {
    font-size: 14px;
    font-weight: 600;
    color: #444444;
}

.task-create-attach li a i {
    width: 25px;
}

.border-top-cs {
    border-top: 1px solid #ccc;
}

.h-border {
    height: 55px;
    border-bottom: 1px solid #ccc;
    margin-left: -10px;
    margin-right: -12px;
}

.shadow-table tr th {
    background-color: transparent;
    color: #222;
    border: 0;
}

/* .shadow-table tbody tr{
   border-bottom: 1px solid #ccc;
} */

.shadow-table tbody tr {
    border: 0;
    box-shadow: 0px 15px 10px -15px #111;
    box-shadow: 5px -15px 10px -17px #111;

}

/* .shadow-table tr td:first-child{
    box-shadow: -15px 0px 10px -15px #111; 
}
.shadow-table tr td:last-child{
    box-shadow: 15px 0px 10px -15px #111;  
} */
.btn-loadMore {
    margin: auto;
    display: flex;
    width: 130px;
    border-radius: 5px;
    margin-top: 20px;
}

.bg-th tr th {
    background-color: #025187;
    color: #fff;
}




/* Department */

.w-110 {
    width: 110px;
}

.pt_30 {
    padding-top: 30px;
}

.department-tab-btns {
    background-color: #fff;
    padding: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 5px;
}

.department-tab-btns ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.department-tab-btns ul li a {
    padding: 7px 15px;
    color: #414040;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.department-tab-btns ul li a:hover,
.department-tab-btns ul li a.active {
    background-color: #72871d;
    color: #fff;
}

.department-middle-box {
    background-color: #fff;
    padding: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 10px;
}

.department-middle-box select {
    height: 45px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    font-size: 15px;
    font-weight: 600;

}

.department_call_box {
    padding: 14px;
    border: 1px solid #6a6a6a;
    border-radius: 10px;
    margin: 12px 0;
}

.department_call_top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.department_call_top img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
}

.department_call_top-title p {
    margin: 0;
    font-weight: 600;
    color: #000;
    font-size: 18px;
}

.department_call_top-title p span {
    font-size: 13px;
    color: #878686;
}

.department_call_top-title p span i {
    margin: 0 10px;
}

.department_bottom_desc {
    padding-top: 15px;
}

.department_bottom_desc p {
    font-size: 15px;
    line-height: 25px;
    color: #000;
}

.department_bottom_desc a {
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #222;
    color: #222;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    transition: 0.5s;
}

.department_bottom_desc a i {
    margin-right: 10px;
}

.department_bottom_desc a:hover {
    background-color: #72871d;
    color: #fff;
    border-color: #72871d;
}

.department_call_right {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
}

.department_call_date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.department_call_date p {
    font-weight: 600;
}

.department_call_right a {
    color: #000;
    text-decoration: underline;
    font-weight: 600;
    font-size: 15px;
}

.department_call_right a:hover {
    color: #025187;
}

.form-title {
    font-size: 24px;
    font-weight: 600;
    color: #000;
}

.department-project-form {
    background-color: #f2f2f2;
    margin: 10px 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.department-project-form input {
    background-color: #fff;
}

.department-project-form input:focus {
    background-color: #fff;
}

.department_note_box {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px 0;
}

.department_note_box p {
    margin: 0;
    font-size: 15px;
    line-height: 25px;
}

.department_logo img {
    width: 200px;
}

.department_form_top_sale {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.department_form_top_sale label {
    white-space: nowrap;
    font-weight: 600;
    color: #000;
}

.department_form_top_sale input {
    background-color: #cfcfcf;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.department_form_top_sale input:focus {
    background-color: #cfcfcf;
}

.department_form_right {
    background-color: #fff;
    padding: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 10px;
}

.department_form_right ul {
    list-style: none;
    padding: 0;
    margin: 0;

}

.department_form_right ul li {
    margin: 10px 0;
}

.department_form_right ul li a {
    width: 100%;
    padding: 7px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dfdfdf;
    font-weight: 600;
    color: #000;
    transition: 0.5s;
    border-radius: 5px;
    font-size: 15px;
}

.department_form_right ul li a:hover {
    background-color: #6b7e23;
    color: #fff;
}

.form_department input {
    height: 40px;
}



.check-with-label:checked+.label-for-check {
    border: 1px solid #025187;
    color: #025187;
    background-color: #fff;
}

.department_doc_select .label-for-check {
    width: 100%;
    height: 90px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 60px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    padding-right: 20px;
    background-color: #fff;

}

.department_doc_select {
    position: relative;
    margin: 10px 0;
}

.department_doc_select input {
    position: absolute;
    top: 33px;
    left: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50% !important;
}

.department_doc_select .check-label-1 {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.department_doc_select .check-label-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.department_doc_select .check-label-1 p {
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
    color: #54687B;
    margin: 0;
    margin-top: 10px;
}

.department_doc_select input[type="radio"] {
    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* create custom radiobutton appearance */
    display: inline-block;
    width: 23px;
    height: 23px;
    padding: 3px;
    /* background-color only for content */
    background-clip: content-box;
    border: 1px solid #025187;
    background-color: #fff;
    border-radius: 50%;
}

/* appearance for checked radiobutton */
.department_doc_select input[type="radio"]:checked {
    background-color: #025187;
}

.department_file_name p {
    font-weight: 600;
    color: #000;
    font-size: 19px;
    margin: 0;
    margin-bottom: 5px;
}

.check-with-label:checked+.label-for-check .department_file_name p {
    color: #72871d;
}

.department_file_name small {
    color: #000;
    text-decoration: underline;
}

.dpt_file_selected,
.dpt_file_select {
    font-size: 17px;
    font-weight: 600;
}

.dpt_file_selected {
    color: #6b7e23;
}

.dpt_file_selected {
    display: none;
}

.check-with-label:checked+.label-for-check .dpt_file_selected {
    display: block;
}

.check-with-label:checked+.label-for-check .dpt_file_select {
    display: none;
}

.department_doc_table {
    background-color: #fff;
    padding: 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 5px;
    margin-top: 10px;
}

.department_doc_table ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.department_doc_table ul li a {
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #323232;
    font-size: 14px;
    font-weight: 600;
}

.department_doc_table ul li a.active {
    border: 1px solid #323232;
}

.department_doc_table ul li a:hover {
    background-color: #dbdbdb;
}

.department_doc_table_search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 0 10px;
    gap: 5px;
}

.department_doc_table_search input {
    border: 0;
    font-size: 14px;
    font-weight: 600;
    height: 37px;
}

.department_doc_table table tr th {
    background-color: #FFDEC4;
    /* text-align: center; */
    font-size: 17px;
    padding: 10px 6px;
}

.department_doc_table table tr td {
    padding: 13px 5px;
    vertical-align: middle;
}

.dept_file_table tr td input {
    width: 22px;
    height: 22px;
}

.dept-td-file-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.dept-td-file-box i {
    width: 30px;
    height: 30px;
    background-color: #cfcfcf;
    color: #767676;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dept-td-file-box p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #444444;
}

.dept_file_table .td-icon-text {
    font-size: 15px;
}

.dept_file_table .td-icon-text i {
    font-size: 14px;
    margin-right: 5px;
}

.dept_file_table tr td a {
    color: #000;
}

.meet-contract-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.meet-contract-name p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.meet-contract-name img {
    width: 40px;
}

.dept_meet-field-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 75%;
    gap: 10px;
}

.dept_meet-field-box input {
    width: 250px;
}

.dept_meet-field-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dept_meet-field-box ul li {
    white-space: nowrap;
    background-color: #dcdcdc;
    padding: 5px 15px;
    border-radius: 40px;
    font-weight: 600;
    color: #000;
}

.dept_meet-field-box ul li a {
    color: #000;
    margin-left: 10px;
}

.dept_meet_attendees ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.dept_meet_attendees ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #a3a1a1;
    margin: 10px 0;
}

.dept_meet_attendees_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.dept_meet_attendees_left span {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6b7e23;
    color: #fff;
    border-radius: 50%;
}

.dept_meet_attendees_left_member h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
}

.dept_meet_attendees_left_member small {
    font-weight: 600;
}

.dept_meet_attendees ul li a {
    font-size: 15px;
    font-weight: 600;
    color: #696969;
}

.w-fit {
    width: fit-content !important;
}

.section-title span {
    font-size: 14px;
}

.section-title {
    font-size: 23px;
    /* background-color: #799700; */
    color: #fff;
    /* padding: 14px; */
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 15px;
}

.margin-top-70 {
    margin-top: 70px !important;
}

.shadow-box {
    background-color: #ffffffc9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    background: rgb(255 255 255 / 73%);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.o-f-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.o-f-check input {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.o-f-check label {
    font-weight: 600;
}

.shadow-box .box-title {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.save-btn {
    width: 110px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #e04d4d;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;
    margin: auto;
}

.save-btn:hover {
    border-radius: 40px;
}


.user-view-left {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
}

.user-basic-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.user-basic-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.user-basic-info {
    background-color: #ebf7bc;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #BDD460;
}

.user-basic-info h3 {
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.user-basic-info p {
    margin: 0;
    font-size: 13px;
}

.user-view-left ul {
    margin: 0;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.user-view-left ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    border-bottom: 1px solid #ccc;
}

.user-view-left ul li:last-child {
    border-bottom: 0 !important;
}

.user-view-left ul li span.badge {
    background-color: #16a816;
}

.user-view-left ul li a.user-edit-btn {
    padding: 5px 20px;
    border-radius: 40px;
    background-color: #e52d2d;
    color: #fff;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.user-view-left ul li a.user-edit-btn:hover {
    background-color: #b23939;
}

.user-view-container {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
}

.user-view-box {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 10px;
}

.user-view-box h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    color: #ea8436;
}

.user-view-box ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.user-view-box ul li {
    width: 33%;
    margin: 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.user-view-box ul li span {
    font-weight: 400;
    margin-left: 10px;
    color: #5f5f5f;
}

.user-view-box ul li span.Yellow-badge {
    background-color: #da9f21;
    color: #fff;
    padding: 0px 10px;
    border-radius: 40px;
}

.user-view-address ul li {
    width: 49%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    margin: 4px 0;
}

.user-view-address ul li span {
    color: red;
}

.user-view-address ul {
    justify-content: space-between;
}

.user-view-address ul li .adrress-user strong {
    font-weight: 600;
}

.user-view-address ul li .adrress-user p {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    margin-top: 10px;
}


.modal-btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.modal-btn-box a {
    width: 100px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 15px;
}

.bg-default {
    background-color: #089748 !important;
}

.bg-epn-red {
    background-color: #dd4b39 !important;
}

.modal-btn-box a:hover {
    border-radius: 40px;
}

.modal-not h3 {
    text-align: center;
    font-size: 18px;
    margin-top: 30px;
    font-weight: 600;

}

.permissions-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.permissions-box ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin: 12px 0;
    width: 33%;
}

.permissions-box ul li label {

    color: #000;
    font-size: 14px;
}

.permissions-box ul li input {
    width: 16px;
    height: 16px;
}

.input-tb-field input,
.input-tb-field select {
    font-size: 14px;
    font-weight: 500;
    height: 37px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.nowrap-table tr th {
    white-space: nowrap;
}

.salary-bottom {
    background-color: #f7f7f7;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 15px;
}

.salary-bottom input,
.salary-bottom textarea {
    background-color: #fff;
}

.salary-bottom input:focus,
.salary-bottom textarea:focus {
    background-color: #fff;
}

.salary-print-section {
    background-color: #f2f2f2;
    padding: 50px;
    min-height: 100vh;
}

.salary-print-widget {
    background-color: #fff;
    /* padding: 12px; */
    border-radius: 10px;
    /* border: 1px solid #ccc; */
}

.salary-print-widget h3 {
    font-size: 19px;
    margin: 0;
    font-weight: 600;
}

.salary-print-widget h3 span {
    color: #b23939;
}

.salary-print-table {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.form-check-cs p {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
    color: #ad1919;
}

.form-check-cs .form-check {
    margin: 15px 0;
}

.form-check-cs .form-check input {
    width: 18px;
    height: 18px;
    border: 1px solid #222;
}

.form-check-cs .form-check label {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.Attendance-tab-btns {
    box-shadow: none;
    padding: 0;
    margin-bottom: 15px;
}

.Attendance-tab-btns ul li a {
    width: fit-content;
    background-color: #e8e8e8;
}

.Attendance-top-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Attendance-top-title a {
    padding: 7px 15px;
    background-color: #b23939;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
}

.Attendance-top-title a i {
    margin-right: 5px;
}

.Attendance-top-title a:hover {
    border-radius: 40px;
}

.mbsc-scroller-wheel-item div {
    display: none;
}

.input-tb-label-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
}

.input-tb-label-check input {
    width: 18px;
    height: 18px;
}

.input-tb-label-check label {
    font-size: 16px;
    font-weight: 600;
    color: #000;

}

.Attendance-add-table tr th {
    white-space: nowrap;
    min-width: 180px;
}

.file-cs-cstm input {
    border-color: #8e8e8e;
}

.file-cs-cstm input::file-selector-button {
    background-color: #BDD460 !important;
}

.filter-cs-20 h3 {
    font-size: 17px;
    font-weight: 600;
    color: #ea8436;
}

.filter-cs-20 .col-lg-20 {
    width: 20%;
}

.hrm-dashboard-widget {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    height: 100%;
}

.hrm-dashboard-widget h3 {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.hrm-dashboard-widget-inner p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.hrm-dashboard-widget-inner .widget-inner-hrm {
    background-color: #ebf5c447;
    border: 1px solid #c2da634d;
    border-radius: 5px;
    padding: 10px;
    height: 100%;
}

.hrm-dashboard-widget-inner .widget-inner-hrm h6 {
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 20px;
    font-size: 14px;
}

.hrm-dashboard-widget-inner .widget-inner-hrm h5 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    margin-top: 10px;
    color: #b23939;

}

.hrm-dashboard-widget-inner tr th {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 10px;
    background-color: #f2f2f2;
    text-align: center;
}

.hrm-dashboard-widget-inner table {
    margin: 10px 0;
}

.hrm-dashboard-widget-inner tr td {
    font-size: 14px;
    text-align: center;
}

.hrm-dash-left-table tr th,
.hrm-dash-left-table tr td {
    text-align: left !important;
}

.hrm-dashboard-widget h3 {
    display: flex;
    align-items: center;
}

.hrm-dashboard-widget h3 span {
    min-width: 33px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #afa21c;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    margin-right: 5px;
}

.hrm-dashboard-widget h3 span.icon-bg-1 {
    background-color: #39B27C;
}

.hrm-dashboard-widget h3 span.icon-bg-2 {
    background-color: #1a7bb9;
}

.hrm-dashboard-widget h3 span.icon-bg-3 {
    background-color: #b52323;
}

.hrm-dashboard-widget h3 span.icon-bg-4 {
    background-color: #cb4ec9;
}

.hrm-dashboard-widget h3 span.icon-bg-5 {
    background-color: #14aa11;
}

.hrm-dashboard-widget h3 span.icon-bg-6 {
    background-color: #7a339e;
}

.hrm-settings-container {
    display: flex;
    justify-content: flex-start;
    /* align-items: center; */
}

.hrm-settings-container ul.hrm-settings-nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 25%;
    border: 1px solid #a9a9a9;
    border-radius: 10px;
    overflow: hidden;
    height: fit-content;
}

.hrm-settings-container ul.hrm-settings-nav li {
    width: 100%;
}

.hrm-settings-container ul.hrm-settings-nav li button {
    width: 100%;
    margin: 0 !important;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #a9a9a9;
    height: 60px;
    font-size: 18px;
    font-weight: 500;
}

.hrm-settings-container ul.hrm-settings-nav li button:hover {
    background-color: #99ae42;
    color: #fff;
}

.hrm-settings-container ul.hrm-settings-nav li button.active {
    border: 1px solid #BDD460;
}

.hrm-settings-container ul.hrm-settings-nav li:last-child button {
    border-bottom: 0px solid #a9a9a9;
}

.hrm-settings-container .tab-content {
    width: 75%;
    padding-left: 20px;
}

.small-label small {
    font-size: 12px;
    font-weight: 500;
    color: #877e7e;
}

.status-green {
    padding: 2px 13px;
    background-color: #bbf7d6c6;
    border: 1px solid #089748;
    color: #089748 !important;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.status-blue {
    padding: 2px 13px;
    background-color: #8cdbf4;
    border: 1px solid #087697;
    color: #087697 !important;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.status-orange {
    padding: 2px 13px;
    background-color: #ffecd0;
    border: 1px solid #e49629;
    color: #e49629 !important;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.status-red {
    padding: 2px 13px;
    background-color: #fbdede;
    border: 1px solid #e42929;
    color: #e42929 !important;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.uploadFIleDocument {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 15px;
    padding-top: 0;

    gap: 10px;
    margin-bottom: 10px;
}

.uploadFIleDocument .uploadFIleDocument-action-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #089712;
    color: #fff;
    border: 0;
    margin-top: 15px;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uploadFIleDocument .uploadFIleDocument-action-btn:hover {
    background-color: #027009;
}

.uploadFIleDocument .uploadFIleDocument-action-btn.bg-danger:hover {
    background-color: #b23939 !important;
}

.uploadFIleDocument input {
    background-color: #fff !important;
    height: 37px;
}

.uploadFIleDocument input::file-selector-button {
    height: 37px;
}

.td-check-field {
    display: flex;
    justify-content: center;
    align-items: center;
}

.td-check-field input {
    width: 18px;
    height: 18px;
}

.badge-font .badge {
    font-size: 14px;
    margin: 2px;
}

.leave-activity h3 {
    padding: 5px 13px;
    background-color: #bbf7d6c6;
    border: 1px solid #089748;
    color: #089748;
    border-radius: 40px;
    font-size: 17px;
    font-weight: 600;
    width: fit-content;
}

.leave-activity h4 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.leave-activity h4 span {
    color: red;
}

.leave-manage-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.leave-manage-tabs ul li a {
    width: 150px;
}

.Probation-manage-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.Probation-manage-tabs ul li a {
    width: fit-content;
}

.flex-input-pop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

}

.flex-input-pop label {
    white-space: nowrap;
    font-weight: 500;
    color: #000;
}

.flex-input-pop input,
.flex-input-pop select,
.flex-input-pop textarea {
    height: 37px;
    background-color: #ededed;
    border: 0;
    max-width: 300px;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
}

.flex-input-pop input:focus,
.flex-input-pop select:focus,
.flex-input-pop textarea:focus {
    background-color: #ededed;
}

.flex-input-pop textarea {
    height: 70px;
}

.review-note {
    background-color: #fbdede;
    border: 1px solid #e42929;
    color: #e42929;
    border-radius: 10px;
    padding: 10px 20px;
}

.review-note ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    gap: 30px;
}

.review-note ul li {
    font-weight: 500;
    font-size: 14px;
}

.review-pop-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.review-pop-preview label {
    white-space: nowrap;
    font-weight: 500;
    color: #000;
    width: 300px;
    font-size: 16px;
}

.review-pop-preview ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.review-pop-preview ul li {
    font-size: 17px;
    margin: 0 5px;
    font-weight: 500;
}

.review-pop-preview ul li i {
    color: #ef9b34;
}

.review-pop-preview p {

    width: 100%;
    font-size: 13px;
    margin: 0;

}

.review-pop-preview {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

.check-select-colored ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
}

.check-select-colored ul li a {
    padding: 5px 15px;
    background-color: #14aa11;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
}

.check-select-colored ul li a.orange {
    background-color: orange;
}

.check-select-colored ul li a.red {
    background-color: red;
}

.employee-basic-info {
    background-color: #83d99673;
    border: 1px solid #7ae391;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.employee-basic-widget {
    background-color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    height: 100%;
}

.employee-basic-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.employee-basic-widget ul li {
    margin: 10px 0;
    font-weight: 500;
    color: #000;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.employee-basic-widget ul li span.blue {
    color: #0ebe11;
}

.employee-basic-widget ul li span.red {
    color: #d30e0e;
}

.e-performance-widget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.e-performance-widget .review-pop-preview {
    padding: 0;
    border: 0;
    width: 100%;
}

.e-performance-widget .review-pop-preview label {
    font-size: 15px;
}

.payslip-logo {
    display: flex;
    justify-content: center;
    align-items: center;

}

.payslip-logo img {
    width: 200px;
}

.payslip-logo h3 {
    font-size: 25px;
    font-weight: 600;
    color: #000;
}

.payslip-widget {
    background-color: #a9f9bb73;
    border: 1px solid #7ae391;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.payslip-widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.payslip-widget ul li {
    margin: 12px 0;
    font-weight: 600;
    color: #000;
    font-size: 15px;
}

.payslip-widget ul li span {
    font-weight: 400;
    margin-left: 10px;
}

.payslip-table-bottom ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

.payslip-table-bottom ul li {
    width: 33%;
    background-color: #f2f2f2;
    padding: 10px;
    margin: 13px 0;
    border: 1px solid #ccc;
    font-weight: 600;
    color: #000;
    justify-content: space-between;
    align-items: center;
    display: flex;
    border-radius: 10px;
    font-size: 14px;
}

.pay-slip-amount {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.pay-slip-amount h3 {
    font-weight: 600;
    font-size: 25px;
}

.pay-slip-amount h4 {
    font-size: 18px;
}

.sign-payslip {
    height: 80px;
    border-top: 1px solid #222;
    display: flex;
    justify-content: center;
    align-items: end;
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

.payroll-edit-top h3 {
    font-weight: 600;
    color: #000;
    font-size: 25px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.payroll-edit-box {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 12px;
}

.payroll-edit-box input,
.payroll-edit-box textarea,
.payroll-edit-box select {
    background-color: #fff !important;
}

.payroll-edit-box h3,
.payroll-edit-tb-box h3 {
    font-size: 22px;
    font-weight: 600;
    color: #dd6422;
}

.payroll-edit-table tr td {
    max-width: 150px;
}

.payroll-edit-tb-box p {
    font-weight: 600;
    color: #000;
    margin-top: 10px;
    font-size: 16px;
}

.payroll-edit-box p {
    font-weight: 600;
    color: #000;
    font-size: 18px;
}

.payroll-view-top-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #000;
    font-size: 17px;
    margin: 20px 0;
}

.payroll-tb-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 0 15px;
}

.payroll-tb-widget ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #000;
    margin: 12px 0;
}

.bonus_track_top ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.bonus_track_top ul li {
    padding: 10px 15px;
    background-color: #ff737345;
    color: #ad1f1fd9;
    border: 1px solid #ad1f1f7a;
    width: 25%;
    border-radius: 7px;
    font-weight: 600;
    font-size: 15px;
}

.employee_salary_bonus {
    background-color: #f7f7f7;
    padding: 5px 15px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.employee_salary_bonus ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.employee_salary_bonus ul li {
    margin: 15px 0;
    font-weight: 600;
    color: #000;
    font-size: 16px;
}

.employee_salary_bonus ul li:first-child span {
    color: #16a816;
}

.employee_salary_bonus ul li span {
    color: red;
    margin-left: 10px;
}

.chart-tree-container {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    max-width: 1000px;
    margin: auto;
}

.chart-tree-top {
    padding: 6px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    position: relative;
}

.chart-tree-top::before {
    content: '';
    width: 0.1px;
    height: 80px;
    background-color: #b8afaf;
    position: absolute;
    left: 50%;
    top: 100%;
}

.chart-tree-top img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.chart-tree-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.chart-tree-info p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #39B27C;
}

.chart-tree-ul {
    width: 90%;
}

.chart-tree-ul ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-top: 79px;
    gap: 20px;
    /* border-top: 1px solid #b8afaf; */
    padding-top: 20px;
    position: relative;
}

.chart-tree-ul ul::before {
    content: '';
    width: 80%;
    height: 1px;
    background-color: #b8afaf;
    position: absolute;
    left: 10%;
    top: 0;
}

.chart-tree-ul ul li .chart-tree-top::after {
    content: '';
    width: 1px;
    height: 20px;
    background-color: #b8afaf;
    position: absolute;
    left: 50%;
    bottom: 100%;
}

.chart-tree-ul2 {
    width: 100%;
}

.chart-tree-ul2 ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 0;
    margin-top: 79px;
    gap: 100px;
    /* border-top: 1px solid #b8afaf; */
    padding-top: 20px;
    position: relative;
}

.chart-tree-ul2 ul li {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-left: -80px;
    position: relative;

}

.chart-tree-ul2 ul li::before {
    content: '';
    width: 51.5%;
    height: 1px;
    background-color: #b8afaf;
    position: absolute;
    top: -20px;
    left: 24.3%;
}

.chart-tree-ul2 ul li .chart-tree-top::before {
    display: none;
}

.chart-tree-ul2 ul li .chart-tree-top::after {
    content: '';
    width: 1px;
    height: 20px;
    background-color: #b8afaf;
    position: absolute;
    left: 50%;
    bottom: 100%;
}


.btn-title-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-title-top a {
    padding: 7px 15px;
    background-color: #b23939;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
}

.btn-title-top a i {
    margin-right: 5px;
}

.btn-title-top a:hover {
    border-radius: 40px;
}

.salary-table tr td input {
    min-width: 110px;
}

.tooltip-btn {
    border: 0;
    background-color: transparent;
    color: #1c96c2;
}

.tooltip-inner {
    background-color: #1c96c2 !important;
    color: #fff !important;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #1c96c2 !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-right-color: #1c96c2 !important;
}

.view-current-performance {
    background-color: #cbf8ce;
    border-color: #027009;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #77ce7d;
}

.view-current-performance .review-pop-preview {
    padding-bottom: 0;
    border-bottom: 0;
    padding: 10px 0;
}

.currnt-performance-title {
    color: #027009;
    font-size: 18px;
    text-align: center;
}

.view-Previous-performance {
    background-color: #fff0da;
    border-color: #027009;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #faad3d;
}

.view-Previous-performance .review-pop-preview {
    padding-bottom: 0;
    border-bottom: 0;
    padding: 10px 0;
}

.Previous-performance-title {
    color: #cb7f0a;
    font-size: 18px;
    text-align: center;
}

.currnt-perfo-info {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.currnt-perfo-info ul {
    width: 100%;
    padding: 0 30px;
}

.currnt-perfo-info ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 15px 0;
    font-weight: 500;
    color: #000;
}

.currnt-perfo-info table {
    margin-top: 30px;

}

.currnt-perfo-info table tr th {
    padding: 8px 10px !important;
}

.currnt-perfo-info table tr td {
    padding: 8px 10px !important;
    font-size: 14px;
}

.view-attendance-table tr td i.fa-circle-check {
    color: #199521;
    font-size: 23px;
}

.view-attendance-table tr td {
    font-size: 16px;
}

.view-attendance-table tr td i.fa-circle-xmark {
    color: #b23939;
    font-size: 23px;
}

.salery-print-top-ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

.salery-print-top-ul li {
    font-size: 17px;
    font-weight: 600;
    background-color: #f7f7f7;
    width: 24%;
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff;

}

.salery-print-top-ul li span {
    margin-left: 5px;
    /* color: #dc3545; */
}

.salery-print-top-ul li.bg-1 {
    background-color: #1a7bb9;
}

.salery-print-top-ul li.bg-2 {
    background-color: #b52323;
}

.salery-print-top-ul li.bg-3 {
    background-color: #cb4ec9;
}

.salery-print-top-ul li.bg-4 {
    background-color: #7a339e;
}

.performancec-tooltip-btns-ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.performancec-tooltip-btns-ul ul li button {
    color: #000;
    font-weight: 600;
}

.performancec-tooltip-btns-ul ul li button i {
    color: #1a7bb9;
}

.radio-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
}

.radio-label,
.radio-container label {
    font-weight: 500;
    color: #000;
    font-size: 14px;
}

.radio-container input {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid #222 !important;
}

.tb-checkox input {
    width: 18px;
    height: 18px;
}

a.bg-blue-cs {
    background-color: #288dd1 !important;
    color: #fff !important;
    border-color: #288dd1 !important;
}

.late-entry {
    padding: 2px 13px;
    background-color: #fbdede;
    border: 1px solid #e42929;
    color: #e42929;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.early-entry {
    padding: 2px 13px;
    background-color: #bbf7d6c6;
    border: 1px solid #089748;
    color: #089748;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
}

.attendance-leave-badge ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.attendance-leave-badge ul li {
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background-color: violet;
    border-radius: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.attendance-leave-badge ul li span {
    margin-left: 10px;
    background-color: #fff;
    color: #000;
    padding: 0 2px;
    border-radius: 5px;
}

.attendance-leave-badge ul li.s-leave {
    background-color: #dc891d;
}

.attendance-leave-badge ul li.p-leave {
    background-color: #0da09e;
}

.attendance-leave-badge ul li.c-leave {
    background-color: #a00d0d;
}

.performance-edit-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.performance-edit-btn a {
    background-color: #b23939;
    padding: 4px 15px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
}

.reviewer-history {
    background-color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    height: 100%;
    margin-top: 10px;
    padding-top: 10px;
}

.reviewer-history h3 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.reviewer-history table {
    margin: 0;
    margin-bottom: 10px;
}

img.bonus-flag-performance {
    width: 60px;
    margin: auto;
    display: flex;
}



.searchDropDown a:hover {
    background-color: #ddd;
}

.showDrop {
    display: block;
}


.inner-tabs-cs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.inner-tabs-cs {
    box-shadow: none;
    padding: 0;
    margin-bottom: 15px;
}

.inner-tabs-cs ul li a {
    width: fit-content;
    background-color: #e8e8e8;
}

.tb-form-field input,
.tb-form-field select {
    font-size: 12px;
    border: 1px solid #222;
    border-radius: 3px;
    height: 35px;
}

.print-box-widget {
    padding: 10px;
    /* background-color: var(--bg-light-gray); */
    border: 1px solid #ccc;
    border-radius: 10px;
}

.print-box-widget h5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;

}

.print-inner-widget {
    background-color: var(--bg-light-gray);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.print-inner-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;

}

.print-inner-widget ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-weight: 500;
    font-size: 15px;
    color: #000;
}

.print-trio-ul ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.print-trio-ul ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-weight: 500;
    font-size: 15px;
    color: #000;
    background-color: var(--bg-light-gray);
    border-radius: 5px;
    width: 33%;
    border: 1px solid #ccc;
}

.print-trio-ul-bg ul li {
    background-color: #a9f9bb73;
    border: 1px solid #7ae391;
}

table tr td.td-text-danger {
    color: red !important;
}


.multiple-items-container {
    padding: 15px;
    background-color: #f2f8d8;
    border-radius: 7px;
    border: 1px solid #BDD460;
}

.multiple-items-container input,
.multiple-items-container select {
    height: 37px;
    background-color: #fff;
    border-radius: 5px;
}

.multiple-items-container input:focus,
.multiple-items-container select:focus {
    background-color: #fff;
}

.multi-add-dlt-btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.multi-add-dlt-btns button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #25a925;
    color: #fff;
}

.multi-add-dlt-btns button.multie-dlt {
    background-color: red;
}

.bottom-container-fields {
    padding: 15px;
    background-color: #f2f8d8;
    border-radius: 7px;
    border: 1px solid #BDD460;
}

.bottom-container-fields input,
.bottom-container-fields select {
    height: 37px;
    background-color: #fff;
    border-radius: 5px;
}

.bottom-container-fields input:focus,
.bottom-container-fields select:focus,
.bottom-container-fields textarea:focus {
    background-color: #fff;
}

.bottom-container-fields textarea {
    background-color: #fff;
}

.bottom-container-fields-ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bottom-container-fields-ul ul li {
    margin: 10px 0;
    background-color: #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.info-top-widget {
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;

}

.info-top-widget h5 {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.info-top-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 20px;

}

.info-top-widget ul li {
    margin: 15px 0;
    font-weight: 500;
    color: #000;
}

.info-top-widget ul li span {
    font-weight: 300;
    margin-left: 10px;
}

.five-col-row .col-lg-20 {
    width: 20%;
}

.top-btns-cs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    padding-bottom: 10px;
}

.top-btns-cs a {
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background-color: #ea8436;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.5s;
}

.top-btns-cs a:hover {
    border-radius: 40px;
}

.print-title {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
}

.remark-box {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #ccc;
}

.remark-box h3 {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.remark-box p {
    font-size: 14px;
    margin: 0;
}

.delivery-track-title {
    text-align: center;
    font-weight: 600;
    font-size: 23px;
    line-height: 30px;
    color: #BDD460;
}

.track-container {
    padding: 30px 0;
    /* border-radius: 10px;
   
    background-color: rgba(13, 162, 56, 0.06);
    border: 1px solid rgba(13, 162, 56, 0.21); */
}

.track-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* flex-wrap: wrap; */
    gap: 13px;
}

.track-container ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 19%;
}

.track-container ul li .track-img {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    gap: 6px;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.track-container ul li .track-img p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.track-container ul li.track-active .track-img {
    border: 2px dashed #bdd460;
    background-color: #bdd46069;
}

.track-container ul li .track-img img {
    width: 70px;
}

.track-container ul li .track-img img.w__80 {
    width: 80px;
}

.track-bottom {
    padding-top: 20px;
}

.track-bottom p {
    margin: 0;
    margin-top: 12px;
    font-size: 15px;

}

.project-widget-container {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
}


.invoice-short-top ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 20px
}

.invoice-short-top ul li {
    width: 49%;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.invoice-short-top ul li:nth-child(even) {
    justify-content: flex-end;

}

.color-green {
    color: #19c419;
}

.color-red {
    color: red;
}

.color-orange {
    color: #d8a304;
}

.project-modal-documents-content h1 {
    font-size: 21px;
    font-weight: 600;
    color: #023970;

}

.gallery-label {
    margin-bottom: 10px;
}

.gallery-label img {
    width: 100%;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
}

.gallery-main-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 4px;
}

#expandedImg,
#srcExpandImg,
#svcExpandImg,
#productsvcImgExpnd,
#typeExpandImg {
    display: none;
}

.gallery-col {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 15px;
}

.document-feedback {
    background-color: #f7f7f7;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin-bottom: 8px;

}

.document-feedback-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-feedback-top img {
    width: 40px;
    height: 40px;
    border: 3px solid #023970;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.document-feedback-top span {
    font-weight: 600;
    color: #000;
}

.document-feedback-top ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.document-feedback-top ul li {
    margin: 10px 0;
    font-weight: 500;
    color: #000;
    font-size: 15px;

}

.document-feedback-top ul li i {
    color: #ef9b34;
}

.document-feedback-text {
    padding: 10px;
}

.document-feedback-text p {
    margin: 0;
    margin-top: 10px;
    font-size: 15px;
    color: #000;

}

.upload-doc-img img {
    width: 150px;
    height: 100px;
    border-radius: 10px;
    margin-top: 10px;
    object-fit: cover;
}


.dashboard-customer-widget {
    background-color: #e2f0f9;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #a5aad8;
}

.dashboard-customer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-customer-widget ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-weight: 500;
    font-size: 15px;
    color: #000;
}

.dashboard-customer-widget a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    background-color: #025187;
    color: #fff;
    text-decoration: none;
    height: 40px;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.5s;

}

.dashboard-customer-widget a:hover {
    border-radius: 40px;
}

.dashboard-project-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/*.dashboard-project-btns a:last-child{*/
/*    background-color: #b23939;*/
/*}*/
/*.dashboard-project-btns a:first-child{*/
/*     background-color: #025187 !important;*/
/*}*/
.dashboard-project-btns a {
    font-size: 14px;
    font-weight: 500;
    width: unset;
    padding: 5px 10px;
    height: unset;
}

/*.dashboard-project-btns a.green-color{*/
/*    background-color:#239f04 !important;*/
/*}*/
.dashboard-project-btns a.red-color {
    background-color: #b23939 !important;
}

.dashboard-project-btns a.dark-orange-color {
    background-color: #987318 !important;
}

.dashboard-project-btns a.blue-color {
    background-color: #137DC5 !important;
}

.project_view_doc_img {
    background-color: #fff;
    border-radius: 5px;
}

.project_view_doc_img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
}


.prev-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 15px;
    background-color: #f7f7f7;
}

.prev-logo img {
    width: 200px;
}


.invoice-prev-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.invoice-prev-title h3 {
    color: #000;
    font-size: 25px;
    font-weight: 600;
    margin: 0;
}

.invoice-sign {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 50px;

}

.invoice-sign p {
    padding-top: 10px;
    margin-top: 30px;
    border-top: 1px solid #7f7f7f;
    font-size: 15px;
    font-weight: 600;
    width: 30%;
    text-align: center;
}

.invoice-info-bottom ul {
    padding: 0;
    margin: 0;
    list-style: none;

}

.invoice-info-bottom ul li {
    margin: 13px 0;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
}

.invoice-info-cnt ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;

}

.invoice-info-cnt ul li {

    font-size: 15px;
    margin: 8px 0;
    font-weight: 600;

}

.invoice-info {
    background-color: #fff;
    padding: 4px 15px;
    border-radius: 10px;
    height: 100%;
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
    border: 1px solid #fff;
}

.invoice-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-top: 10px;
}

.invoice-info ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.invoice-info ul li {
    font-size: 14px;
    margin: 13px 0;
    font-weight: 500;
    color: #171717;
}

.invoice-info ul li span {
    font-weight: 400;
}



.invoice_bottom_pay {
    /*box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
    /*padding:12px;*/
    /*border-radius:12px;*/
}

.invoice_bottom_pay ul {
    padding: 0;
    margin: 0;
    /*display:flex;*/
    list-style: none;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

}

.invoice_bottom_pay ul li {
    border: 0;
    border: 1px solid #ccc;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    padding: 10px;
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 5px;
    margin-bottom: 10px;

}

/*.invoice_bottom_pay ul li:last-child{*/
/*    border-bottom:0 !important;*/
/*}*/

.invoice_bottom_pay ul li span {
    font-weight: 400;
}

.term-ul-invoice {
    margin-top: 0;
    height: 100%;
    background-color: #f7f7f7;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.term-ul-invoice h3 {
    font-size: 17px;
    font-weight: 700;
    color: #000;

}

.vat-dt p {
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}


.invoice_gen_basic {
    padding: 8px 15px;
    background-color: #b0b0b00f;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 100%;
    margin: 0;
}

.invoice_gen_basic ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invoice_gen_basic ul li {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;

}

.invoice_gen_basic ul li span {
    font-weight: 400;
    margin-left: 5px;
}


.flex-check-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 18px;
}

.flex-check-box input {
    width: 18px;
    height: 18px;
}

.flex-check-box label {
    margin: 0;
    margin-top: 2px;
}

.flex-between-list ul {
    padding: 0;
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px
}

.flex-between-list ul li {
    width: 32%;
    padding: 10px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;

}

.invoice-title-h2 h2 {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 15px;
    margin-top: 15px;
    color: #f8b042;
    /* display: flex
; */
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    text-align: left;
    /* background: #ec881121; */
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}


.invoice_gen_last_box {
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #2f509e47;
}

.invoice_gen_last_box h2 {
    margin-top: 0;
    padding-top: 2px;
}

.invoice_gen_last_box input,
.invoice_gen_last_box select,
.invoice_gen_last_box textarea {
    background-color: #fff;
}

.invoice_gen_last_box input:focus,
.invoice_gen_last_box select:focus,
.invoice_gen_last_box textarea:focus {
    background-color: #fff;

}

.invoice_gen_last_box input[type='checkbox'] {
    border: 1px solid #ccc;
}

.invoice_gen_last_box input[type='checkbox']:focus {
    background-color: transparent;
}


.customer-project-widget a:hover {
    border-radius: 40px;
}

.project-top-view-main {
    background-color: #ffffffb3;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgb(255 255 255 / 73%);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.project-top-view-main ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.project-top-view-main ul li {
    width: 33%;
    margin: 13px 0;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;

}

.project-top-view-main ul li p {
    margin: 0;
}

.project-top-view-main ul li span {
    font-weight: 500;
}

.project-main-view-right {
    background-color: #fff;
    border-radius: 5px;
}

.project-main-view-right img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.project-main-view-right a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    background-color: #025187;
    color: #fff;
    text-decoration: none;
    height: 40px;
    border-radius: 5px;
    margin: auto;
    margin-top: 10px;
    transition: 0.5s;
}

.project-main-view-right a:hover {
    border-radius: 40px;
}

.image-updating-list {
    padding: 15px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
    max-width: 350px;
    overflow: auto;
}

.image-updating-list ol {
    padding: 0 15px;
    margin: 0;
}

.image-updating-list ol li {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: #b23939;
}

.image-updating-list ol p {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: #b23939;
    margin-left: -16px;
}

.project-status-green {
    padding: 3px 13px;
    background-color: #039445;
    border: 1px solid #089748;
    color: #fff;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
}

.project-status-orange {
    padding: 3px 13px;
    background-color: #ffc107;
    border: 1px solid #ffc107;
    color: #fff;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
}

.project-status-red {
    padding: 3px 13px;
    background-color: #f1606e;
    border: 1px solid #f1606e;
    color: #fff;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
}


.user-dropdown-top .dropdown-toggle {
    width: fit-content !important;
    padding: 0 18px;
    background: #ffffff6b;
    color: #fff !important;
    border-radius: 40px !important;
    font-weight: 300;
}

.user-dropdown-menu li a {
    border: 0 !important;
    text-align: left;
    color: #222;
    justify-content: flex-start !important;
    font-size: 14px !important;
    font-weight: 500;
}



.text-editor-cs .ck.ck-editor__main>.ck-editor__editable {
    height: 300px !important;
}

.phase-group {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px 6px;
    margin: 0;
    margin-bottom: 10px;
}

.phase-group input,
.phase-group select {
    background-color: #fff !important;
}

.phase-group input:focus,
.phase-group select:focus {
    background-color: #fff !important;
}

.doc-group {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px 6px;
    margin: 0;
    margin-bottom: 10px;
}

.doc-group input,
.doc-group select {
    background-color: #fff !important;
}

.doc-group input:focus,
.doc-group select:focus {
    background-color: #fff !important;
}

.doc-view-file {
    padding: 3px 10px;
    border-radius: 40px;
    background-color: #43be5f;
    font-size: 13px;
    color: #fff;
}

.doc-view-file:hover {
    background-color: #29873f;
    color: #fff;
}

.doc-file-view-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    background-color: #fff;
    height: 45px;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 0 15px;

}

.doc-dlt {
    padding: 3px 10px;
    border-radius: 40px;
    background-color: #ff1919;
    font-size: 13px;
    color: #fff;
}

.doc-dlt:hover {
    background-color: #b23939;
}

.doc-folder-create {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

}

.doc-folder-create input {
    height: 45px;
    font-size: 13px;
    border-color: #222;
    background-color: transparent;
    color: #222 !important;
    width: 400px;
    background-color: #fff !important;
}

.doc-folder-create button {
    width: 150px;
    height: 45px;
    background-color: #239f04 !important;
    color: #fff;
    border-radius: 8px;
    border-color: #239f04;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;

}

.doc-folder-create button:hover {
    border-radius: 40px;
}

.textarea-h-45 {
    height: 45px;
}

.project-view-main-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.project-view-main-top h3,
.project-view-main-top h4 {
    font-size: 19px;
    font-weight: 600;
    margin: 0;
}

.project-view-main-top h3 span {
    color: #ea3a3a;
}

.project-view-info {
    background-color: #fffaeb;
    border: 1px solid #f6e9c2;
    padding: 5px 15px;
    border-radius: 15px;
    height: 100%;
}

.project-view-info ul {
    display: unset;
    list-style: none;
    padding: 0;
    margin: 0;

}

.project-view-info ul li {
    width: 100%;
    margin: 17px 0;
    font-weight: 600;
    font-size: 15.5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.project-view-info ul li span {
    margin-left: 10px;
    font-weight: 400;
    color: #6c6c6c;
}

.project-view-info ul li p {
    margin: 0;
}


.box-title-center {
    font-weight: 600;
    font-size: 19px;
    line-height: 30px;
    color: #ea8436;
    text-align: center;
}


.edit-btn-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 111px;
    background-color: #37a90a;
    color: #fff;
    text-decoration: none;
    height: 36px;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.5s;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}

.edit-btn-main:hover {
    border-radius: 40px;
}

.edit-btn-main-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    background-color: #3f97f6;
    color: #fff;
    text-decoration: none;
    height: 40px;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.5s;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-left: auto;
}

.edit-btn-main-icon:hover {
    border-radius: 40px;
}


.project-view-accordion .accordion-item {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 11px;
    overflow: hidden;
}

.project-view-accordion .accordion-item .accordion-button {
    font-size: 18px;
    font-weight: 600;
}

.project-view-accordion .accordion-item .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #025187;
}

.doc-folder-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
    padding-right: 10px;
}

.doc-folder-top h3 {
    border: 0 !important;
}

.doc-folder-top input {
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.file-dlt-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    border: 0;
    margin-top: 15px;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-dlt-btn:hover {
    background-color: #b23939;
}

.view-document p {
    font-size: 16px;
    margin: 6px 0;
}

.view-document p strong {
    font-weight: 500;
}



.plus-cs-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #22b922;
    color: #fff;
    border: 0;

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

.plus-cs-btn:hover {
    background-color: #158115;
}

.minus-cs-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    border: 0;

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

.minus-cs-btn:hover {
    background-color: #b23939;
}

.center-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

.invoice_field_form input,
.invoice_field_form select {
    background-color: #fff;
}

.invoice_field_form input:focus,
.invoice_field_form select:focus {
    background-color: #fff;
}


.reset-btn {
    width: 110px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #b23939;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;

}

.reset-btn:hover {
    border-radius: 40px;
    color: #fff;
}

.search-btn {
    width: 110px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #18a0b8;
    color: #fff;
    border-radius: 5px;
    transition: 0.5s;
    font-size: 15px;
    font-weight: 500;

}

.search-btn:hover {
    border-radius: 40px;
    color: #fff;
}

.project-view-desc ul li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.project-view-desc ul li span {
    margin: 0 !important;
}

.project-view-desc ul li h1,
.project-view-desc ul li h2,
.project-view-desc ul li h3,
.project-view-desc ul li h4,
.project-view-desc ul li h5,
.project-view-desc ul li h6,
.project-view-desc ul li h1 strong,
.project-view-desc ul li h2 strong,
.project-view-desc ul li h3 strong,
.project-view-desc ul li h4 strong,
.project-view-desc ul li h5 strong,
.project-view-desc ul li h6 strong {
    font-size: 20px;
    color: #b23939;
    font-weight: 500;
}

.project-view-desc ul li p {
    font-size: 15px;
    line-height: 25px;
}

.project-view-main-top h5.project-status-badge {
    font-size: 15px;
}

.project-view-collapse {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.survey-title {
    text-align: center;
    color: #f99905;
}

.survay-rating-section {
    padding: 15px;
    background-color: #f7f7f7f7;
    border-radius: 15px;
    border: 1px solid #ccc;
}

.suravey-rating-box {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 7px;
    border: 1px solid #ccc;
}

.text-inp textarea {
    height: 100px;
}

.radio-comtent-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding-left: 10px;

}

.radio-comtent-list ul li {
    margin: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;

}

.radio-comtent-list ul li input {
    width: 18px;
    height: 18px;
}

.back-btn-csr {
    background-color: #d94242 !important;
}

.back-btn-csr:hover {
    background-color: #b23939 !important;
    color: #fff !important;
}


.folder-wrapper-cs {
    background-color: #fff6db;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f6e4b0;
}

.folder-wrapper-cs h3 {
    background: #ffffff7a;
    color: #000 !important;
}

.pagination-custom .table_bottom {
    margin: 12px 0;
}

.table_bottom svg {
    width: 30px;
}


.table_bottom .table-pagination {
    width: 100%;
    justify-content: flex-end;
    display: flex;
}

.table_bottom .table-pagination nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table_bottom .table-pagination nav div:last-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.image-table tr td img {
    width: 100px;
    height: 70px;
    border-radius: 7px;
    object-fit: cover;
}

.main-table-container .chart h3 {
    font-size: 16px;
    color: #0f0905;
    font-weight: 600;
}

.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px !important;
}

.page-title h3 {
    font-size: 25px;
    color: #000;
}

.page-title h3 span {
    font-size: 15px;
}

.page-title {
    padding: 10px 0;
    padding-top: 0;
}

.active-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.max-width-250 td {
    max-width: 250px;
}

.action-btns {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 4px !important;

    background: #f8fafc !important;
    border: 1px solid #e7ebf0 !important;
    border-radius: 9px !important;

    white-space: nowrap !important;
}


/* =========================================
   EDIT + DELETE COMMON
========================================= */

.action-btns .btn-edit,
.action-btns .btn-view,
.action-btns .btn-delete,
.action-btns .btn-cstm,
.action-btns .tgle-cs-btns {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 7px !important;

    font-size: 12px !important;
    line-height: 1 !important;

    cursor: pointer !important;
    text-decoration: none !important;

    transition: all 0.2s ease !important;
}


/* =========================================
   EDIT
========================================= */

.action-btns .btn-edit {
    color: #087443 !important;
    background: #effaf4 !important;
    border: 1px solid #bfe5ce !important;
}

.action-btns .btn-edit:hover {
    color: #ffffff !important;
    background: #087443 !important;
    border-color: #087443 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 4px 9px rgba(8, 116, 67, 0.18) !important;
}

/* =========================================
   EDIT
========================================= */

.action-btns .btn-view {
   color: #2563eb !important;
    background: #e0eef045 !important;
    border: 1px solid #2563eb42 !important;
}

.action-btns .btn-view:hover {
    color: #ffffff !important;
    background: #2563eb !important;
    border-color: #2563eb !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 4px 9px rgba(8, 116, 67, 0.18) !important;
}

.action-btns .btn-cstm{
    width: fit-content !important;
    white-space: nowrap !important;
    color: #b98f12 !important;
    background: #fbf7e9 !important;
    padding: 5px !important;
    border: 1px solid #d5c386 !important;
}
.action-btns .btn-cstm:hover{
    color: #fff !important;
    background: #b98f12 !important;
    border: 1px solid #b98f12 !important;
}
/* =========================================
   DROPDOWN BUTTON
========================================= */

.action-btns .dropdown {
    position: relative !important;
}

.action-btns .tgle-cs-btns {
    color: #475467 !important;
    background: #ffffff !important;
    border: 1px solid #d9dee7 !important;

    box-shadow: none !important;
}

.action-btns .tgle-cs-btns::after {
    display: none !important;
}

.action-btns .tgle-cs-btns:hover,
.action-btns .tgle-cs-btns.show {
    color: #012A6B !important;
    background: #edf4ff !important;
    border-color: #b9cbea !important;

    transform: translateY(-1px) !important;
}


/* =========================================
   DROPDOWN MENU
========================================= */

.action-btns .dromenu-cs {
    min-width: 190px !important;

    margin-top: 7px !important;
    padding: 6px !important;

    background: #ffffff !important;

    border: 1px solid #e5eaf1 !important;
    border-radius: 10px !important;

    box-shadow:
        0 12px 30px rgba(16, 24, 40, 0.12),
        0 3px 8px rgba(16, 24, 40, 0.05) !important;
}


/* Dropdown item */
.action-btns .dromenu-cs .dropdown-item {
    display: flex !important;
    align-items: center !important;

    min-height: 34px !important;

    padding: 7px 10px !important;

    border-radius: 6px !important;

    color: #475467 !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    white-space: nowrap !important;

    transition: all 0.18s ease !important;
}

.action-btns .dromenu-cs .dropdown-item:hover {
    color: #012A6B !important;
    background: #f2f6fb !important;

    padding-left: 13px !important;
}

.action-btns .dromenu-cs .dropdown-item:active {
    color: #012A6B !important;
    background: #eaf1fb !important;
}


/* =========================================
   VERIFY BUTTON
========================================= */

.action-btns a.btn-danger {
    min-height: 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 11px !important;

    color: #b54708 !important;

    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;

    border-radius: 7px !important;

    font-size: 10px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
    text-decoration: none !important;

    box-shadow: none !important;

    transition: all 0.2s ease !important;
}

.action-btns a.btn-danger:hover {
    color: #ffffff !important;

    background: #ea580c !important;
    border-color: #ea580c !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 4px 9px rgba(234, 88, 12, 0.18) !important;
}

.action-btns a.btn-danger i {
    margin-right: 5px !important;
    font-size: 10px !important;
}


/* =========================================
   DELETE
========================================= */

.action-btns .btn-delete {
    color: #dc3545 !important;
    background: #fff5f5 !important;
    border: 1px solid #f3b5bb !important;
}

.action-btns .btn-delete:hover {
    color: #ffffff !important;

    background: #dc3545 !important;
    border-color: #dc3545 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 4px 9px rgba(220, 53, 69, 0.18) !important;
}


/* =========================================
   ICONS
========================================= */

.action-btns i {
    margin: 0 !important;
    line-height: 1 !important;
}


/* =========================================
   CLICK EFFECT
========================================= */

.action-btns .btn-edit:active,
.action-btns .btn-delete:active,
.action-btns .tgle-cs-btns:active,
.action-btns a.btn-danger:active {
    transform: scale(0.95) !important;
}


/* =========================================
   FOCUS
========================================= */

.action-btns .btn-edit:focus-visible,
.action-btns .btn-delete:focus-visible,
.action-btns .tgle-cs-btns:focus-visible,
.action-btns a.btn-danger:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.10) !important;
}



.submit-btn {
    position: relative !important;
    min-width: 115px !important;
    min-height: 42px !important;
    padding: 9px 20px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    background: linear-gradient(135deg, #087443 0%, #16a05d 100%) !important;
    border: 1px solid #087443 !important;
    border-radius: 8px !important;

    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    cursor: pointer !important;
    overflow: hidden !important;

    box-shadow:
        0 4px 10px rgba(8, 116, 67, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease,
        border-radius 0.25s ease !important;
}

/* Soft shine effect */
.submit-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 70% !important;
    height: 100% !important;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    ) !important;

    transform: skewX(-20deg) !important;
    transition: left 0.55s ease !important;
}

/* Hover */
.submit-btn:hover {
    background: linear-gradient(
        135deg,
        #075f37 0%,
        #108a4e 100%
    ) !important;

    border-color: #075f37 !important;
    color: #ffffff !important;

    border-radius: 10px !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 16px rgba(8, 116, 67, 0.24),
        0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Shine on hover */
.submit-btn:hover::before {
    left: 130% !important;
}

/* Click */
.submit-btn:active {
    transform: translateY(0) scale(0.98) !important;

    box-shadow:
        0 3px 7px rgba(8, 116, 67, 0.18) !important;
}

/* Focus */
.submit-btn:focus,
.submit-btn:focus-visible {
    outline: none !important;
    color: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(8, 116, 67, 0.12),
        0 5px 12px rgba(8, 116, 67, 0.18) !important;
}

/* Disabled */
.submit-btn:disabled,
.submit-btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}


.price-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.price-select select {
    width: 80px;
}

.nowrap {
    white-space: nowrap;
}

.table-img-logo tr td img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.cms-field-container h3 {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e126f;
}

td div.text-line-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.modal-btn-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 30px;
}

.modal-btn-box button {
    width: 80px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 15px;
    border: 0;
}

.bg-default {
    background-color: #000 !important;
}

.bg-epn-red {
    background-color: #dd4b39 !important;
}

.time-to-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

h3.setting-title {
    font-size: 18px;
    font-weight: 600;
}

.backup-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.backup-container ul li {
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.backup-container ul li label {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

.backup-container ul li button {
    width: fit-content;
    padding: 7px 15px;
    border: 0;
    border-radius: 40px;
    background-color: #027009;
    color: #fff;
    font-size: 15px;
}

.bg-modal-btn {
    background-color: #236c64 !important;
}

.page-title-btn h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title-btn h3 a {
    padding: 7px 15px;
    font-size: 15px;
    background-color: #1e126f;
    border-radius: 5px;
    color: #fff;
    transition: 0.5s;
}

.page-title-btn h3 a:hover {
    border-radius: 40px;
}


/* UGE */


.login-img-right {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
}
.login-img-right::before{
       width: 343px;
    height: 100%;
    background-image: linear-gradient(92deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, -4.88743) 100%);
    content: '';
    position: absolute;
    top: 0;
    left: 0px;
}

.login-img-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*border-radius: 30px;*/
}



@media screen and (min-width:1200px) {
    .container-max-cs {
        max-width: 1800px !important;
    }
}

.login-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    /* background: #13889C;
background: linear-gradient(170deg, rgba(19, 136, 156, 0.41) 0%, rgba(1, 7, 8, 0.27) 100%); */
}

.btns-header-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}

.btns-header-top a {
    padding: 10px 15px !important;
    font-size: 14px !important;
    background-color: #18a0b8 !important;
    color: #fff !important;
    border-color: #13889C !important;
    height: 36px !important;
    transition:0.5s;
}
.btns-header-top a:hover{
    border-radius:40px;
}
ul.qk-action-btns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

ul.qk-action-btns li {
    width: 25%;
}

ul.qk-action-btns li a {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #025187;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    transition: 0.5s;
}

ul.qk-action-btns li a:hover {
    border-radius: 40px;
}

ul.bottom-dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;

}

ul.bottom-dashboard-list li {
    margin-bottom: 15px;
}

ul.bottom-dashboard-list li:last-child {
    margin-bottom: 0;
}

ul.bottom-dashboard-list li a {
    font-size: 14px !important;
    background-color: #ccc;
    font-size: 15px;
    color: #000;
    padding: 4px 15px;
    border: 1px solid #ccc;
    border-radius: 40px;
}

ul.company-check-box {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.company-check-box li {
    margin: 14px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

ul.company-check-box li input {
    width: 20px;
    height: 20px;
}

ul.company-check-box li label {
    font-size: 15px;
    color: #000;
    margin: 0;
}

.office-time {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    margin-top: 25px;
    border: 1px solid #ccc;
}

.office-time h6 {
    font-weight: 600;
    color: #c35d0f;
}

h5.title-cs-bnk {
    font-size: 15px;
    font-weight: 500;
    color: #043783;
    margin-bottom: 7px;
}

h6.title-cs-bnk {
    font-size: 15px;
    font-weight: 600;
    color: #043783;
}

a.viewFilesbtn {
    background-color: #137DC5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 7px 15px;
    color: #fff;
    border-radius: 40px;
    font-size: 15px;
}

.bg-filter {
    background: #b23939 !important;
}

.btn-flex {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    align-items: center;
}

.btn-flex a,
.btn-flex button {
    margin: unset;
}

.filter-btns-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.td-select select {
    font-size: 14px;
    border-color: #22222217;
    background-color: #efefef;
    color: #222 !important;
    border-radius: 11px;
}

.mobile-flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.mobile-flex select {
    width: 100px;
}

.min-width-150 {
    min-width: 250px;
}

.w-fit-content {
    width: fit-content;
}

.advanced-search-content .modal-header {
    padding-bottom: 10px;
}

.advanced-search-content .modal-header h1 {
    font-size: 17px !important;
    font-weight: 600;
}

.advanced-search-box {
    background-color: #f7f7f7;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.advanced-box div {
    margin: 8px 0;
}

.advanced-box label {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: #000;
}

.advanced-box label input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
}

.advanced-search-box .o-f-inp input,
.advanced-search-box .o-f-inp select {
    background-color: #fff;
}

ul.qk-filters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

ul.qk-filters li a {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 14px;
    color: #000;
    border-radius: 10px;
}

.check-label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.check-label input {
    width: 18px;
    height: 18px;
}

.check-label label {
    font-size: 14px;
    color: #000;
}

.flex-filter-both {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.flex-filter-both div:first-child {
    width: 75%;
}




.range-slider {
    width: 100%;
    margin: auto;
    text-align: center;
    position: relative;
    height: 4em;
}

/* .range-slider svg,
.range-slider input[type=range] {
	position: absolute;
	left: 0;
	bottom: 0;
} */

.rng-input[type=number] {
    border: 0;
    font-size: 1.6em;
    -moz-appearance: textfield;
    font-size: 12px;
}

.rng-input[type=number]::-webkit-outer-spin-button,
.rng-input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.rng-input[type=number]:invalid,
.rng-input[type=number]:out-of-range {
    color: #ff6347;
}

.rng-input {
    border: 0;
    font-size: 1.6em;
    -moz-appearance: textfield;
    font-size: 12px;
}

.rng-input::-webkit-outer-spin-button,
.rng-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.rng-input:invalid,
.rng-input:out-of-range {
    color: #ff6347;
}

.type-rng-inp[type=range] {
    -webkit-appearance: none;
    width: 100%;
}

.type-rng-inp[type=range]:focus {
    outline: none;
}

.type-rng-inp[type=range]:focus::-webkit-slider-runnable-track {
    background: #18a0b8;
}

.type-rng-inp[type=range]:focus::-ms-fill-lower {
    background: #18a0b8;
}

.type-rng-inp[type=range]:focus::-ms-fill-upper {
    background: #18a0b8;
}

.type-rng-inp[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    animate: 0.2s;
    background: #18a0b8;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

.type-rng-inp[type=range]::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    border: 1px solid #286276;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -9px;
}

.type-rng-inp[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: #18a0b8;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

.type-rng-inp[type=range]::-moz-range-thumb {
    z-index: 2;
    position: relative;
    border: 1px solid #07395b;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #18a0b8;
    cursor: pointer;
}

.type-rng-inp[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.type-rng-inp[type=range]::-ms-fill-lower,
.type-rng-inp[type=range]::-ms-fill-upper {
    background: #18a0b8;
    border-radius: 1px;
    box-shadow: none;
    border: 0;
}

.type-rng-inp[type=range]::-ms-thumb {
    z-index: 2;
    position: relative;
    border: 1px solid #18a0b8;
    height: 18px;
    width: 18px;
    border-radius: 25px;
    background: #a1d0ff;
    cursor: pointer;
}

.price-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
}

.price-top input {
    font-size: 12px;
    font-weight: 500;
    color: #64748B;
    width: 50%;
    margin-top: 10px;
    background-color: transparent;
}

.pos-inp {
    position: absolute;
    left: 0;
    bottom: 22px;
}

.range-slider label {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-align: left;
    width: 100%;
}

.program-left-filter {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgba(255, 255, 255, 0.908);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.program-filter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.program-filter-top label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.program-filter-top label input {
    width: 20px;
    height: 20px;

}

.program-filter-top select {
    width: 150px;
    height: 40px;
    border-radius: 40px;
    font-size: 14px;
}

.program-info-container {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgba(255, 255, 255, 0.908);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.program-info-container h3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    gap: 10px;
}

.program-info-container h3 a {
    text-decoration: none;
    font-size: inherit;
    color: #000;
}

.program-info-container h3 input {
    width: 18px;
    height: 18px;
}

.program-info-top ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    margin: 20px 0;
}

.program-info-top ul li span {
    padding: 7px 15px;
    background-color: red;
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    display: flex;
}

.program-info-top ul li span i {
    margin-right: 5px;
}

.program-info-top ul li span.bg-1 {
    background-color: #18a0b8;
}

.program-info-top ul li span.bg-2 {
    background-color: #18b857;
}

.program-info-top ul li span.bg-3 {
    background-color: #b2b818;
}

.program-info-second ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.program-info-second ul i {
    color: #137DC5;
    margin-right: 10px;
}

.program-info-second ul li {
    font-size: 15px;
}

.program-info-second ul li img {
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
}

.program-info-bottom {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 15px;
    height: 100%;
}

.program-info-bottom ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.program-info-bottom ul li {
    margin: 10px 0;
    font-size: 15.5px;
    color: #000;
}

.program-info-bottom ul li small {
    background-color: #8a9fb4;
    color: #fff;
    padding: 5px 10px;
    border-radius: 40px;
}

.program-info-bottom-second ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.program-info-bottom-second ul li .btn {
    font-size: 14px;
    background-color: #dbf8d2;
    color: #000;
    border-color: #dbf8d2;
}

.program-info-bottom-second ul li {
    margin: 10px 0;
}

.program-details-left {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: rgba(255, 255, 255, 0.908);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    position: sticky;
    top: 70px;
}

.program-dt-logo {
    background-color: #deecfb;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.program-dt-logo img {
    width: 250px;
}

.program-details-left h3 {
    margin: 10px 0;
    font-size: 18px;
}

ul.program-details-left-ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.program-details-left-ul li {
    margin: 10px 0;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.program-info-bottom-third li .btn {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a.progrm-dt-a {
    font-size: 14px;
    text-align: center;
    margin: 10px auto;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.program-container-right h3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 22px;
}

.program-container-right h3 span {
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

.list-program-dt ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.list-program-dt ul li {
    width: 47%;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    border-bottom: 1px solid #ccc;
    padding: 7px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-program-dt ul li span {
    font-weight: 400;
    color: #6d6d6d;
}

.program-dt-right-bottom ul {
    padding-left: 0;
    padding-left: 20px;
}

.program-dt-right-bottom ul li {
    font-size: 13px;
    margin-bottom: 7px;
}

.enq-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 60vh;
}

.enq-center img {
    width: 450px;
}

.enq-center h3 {
    font-size: 35px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.enq-center p {
    font-size: 16px;
    margin: 10px 0;

}

.enq-center a {
    padding: 7px 15px;
    background-color: #137DC5;
    color: #fff;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    font-size: 15px;
    transition: 0.5s;
}

.enq-center a:hover {
    border-radius: 40px;
}

.form-fied-checkbox div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.form-fied-checkbox div label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.form-fied-checkbox div label input {
    width: 18px;
    height: 18px;
}



/* Container */
.txn-container {
    width: fit-content;
    margin: auto;
}

/* Row Card */
.txn-row {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Header Row (FLEX — no grid issues) */
.txn-header {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 10px;
}

/* Columns */
.txn-col {
    font-size: 14px;
    white-space: nowrap;
    min-width: 180px;
}

/* Status colors */
.txn-credit {
    color: #00a86b;
    font-weight: 500;
}

.txn-debit {
    color: orange;
    font-weight: 500;
}

/* Arrow button */
.txn-arrow {
    flex: 0 0 35px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    background: #137DC5;
    user-select: none;
    transition: transform 0.3s ease;
    color: #fff;
}

/* Rotate when active */
.txn-arrow.active {
    transform: rotate(180deg);
}

/* Hidden details */
.txn-details {
    display: none;
    padding: 10px;
    border-top: 1px solid #ddd;
    background: #fafafa;
}

/* Inner table */
.txn-details table {
    width: 100%;
    border-collapse: collapse;
}

.txn-details th,
.txn-details td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 14px;
}

.txn-details th {
    background-color: #e0eff3;
    color: #2a7c9b;
    border: 1px solid #a1bde566;
    font-size: 13px;
    padding: 15px 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
}

.txn-details td {
    color: #222 !important;
    border: 0;
    border: 1px solid #dadada;
    text-align: center;
    padding: 15px 12px !important;
    font-size: 14px;
    font-weight: 400;
}

.txn-header-cs div {
    font-weight: 600;
    color: #000;
}

.profile-preview {
    background-color: #f2f2f2;
    padding: 25px;
    border-radius: 10px;
    height: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;


}

.profile-preview ul {
    padding: 0;
    list-style: none;
}

.profile-preview ul li {
    margin: 15px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.profile-preview ul li span {
    font-weight: 400;
}

.permission-Bottom ul li label {
    font-size: 15px;
    font-weight: 600;
}

.permission-top ul li label {
    width: 100%;
    font-size: 14.5px;
    font-weight: 400;

}

.permission-top ul li {
    margin: 7px 0 !important;
}

.permission-top ul li:nth-child(2) label {
    white-space: nowrap;
    min-width: 100px;
}

.permission-top ul li:last-child label {
    white-space: nowrap;
    min-width: 80px;
}

.permission-Bottom ul {
    padding-left: 0 !important;

}

.permission-top ul {
    gap: 80px !important;
}

.permission-Bottom ul li {
    margin-top: 15px;
}

.settings-save-btn {
    padding-top: 25px;
}

.settings-save-btn button {
    margin: 0;
}

.settings-form {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 20px;
    background-color: #f7f7f7;
}

.settings-form input,
.settings-form select {
    background-color: #fff;
}

.tab-studet-tg {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-studet-tg ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.tab-studet-tg ul li a {
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    color: #000;
    font-weight: 500;
}

.tab-studet-tg ul li a span {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-studet-tg ul li a.active span {
    background-color: #13889C;
    border-color: #137DC5;
    color: #fff;
}

a.stps {
    background-color: #039445;
    color: #fff;
    padding: 7px 15px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    gap: 10px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 400;
}

.student-info-add-cont {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 15px;
}

.student-info-add-cont input,
.student-info-add-cont select,
.student-info-add-cont textarea {
    background-color: #fff !important;
}

.student-info-add-cont h5 {
    font-size: 20px;
    color: #023970;
    margin: 10px 0;
}

a.add-field-exp {
    width: 35px;
    height: 35px;
    background-color: #027009;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    border-radius: 50%;
}

.app-info-left {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 10px;
}

.app-info-left h5 {
    font-size: 15px;
    color: #089748;
}

.app-info-left ul {
    margin: 0;
    padding: 0;
}

.app-info-left ul li {
    margin: 10px 0;
    font-size: 15px;
    list-style: none;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-info-left ul li span {
    max-width: 250px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.app-info-right {
    background-color: #f7f7f7;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
}

.app-info-right-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-info-right-top small {
    font-size: 13px;
}

.app-info-right-top span {
    background-color: #ffe0e0;
    color: red;
    padding: 7px 15px;
    border-radius: 5px;
    font-size: 14px;
    border-radius: 40px;
}

.app-info-right-bottom h5 a {
    font-size: 18px;
}

.app-info-right-bottom h4 {
    margin: 7px 0;
    font-size: 20px;

}

.app-info-right-bottom p {
    font-size: 15px;
    margin: 5px 0;
    color: #7e7a7a;
}

.app-info-right-bottom-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-info-right-bottom-2 a {
    background-color: #039445;
    color: #fff;
    padding: 7px 15px;
    font-size: 13px;
    border-radius: 7px;
}





.msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 50px);
    border-radius: 5px;
    background-color: #fff;
    padding: 15px;
    margin-top: 10px;
    border-radius: 10px;
}

.msger-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    color: #666;
    border-bottom: 1px solid #ccc;
}

.msger-chat {
    /* flex: 1; */
    overflow-y: scroll;
    padding: 10px;
    height: 400px;
}

.msger-chat::-webkit-scrollbar {
    width: 3px;
}

.msger-chat::-webkit-scrollbar-track {
    background: #fff;
}

.msger-chat::-webkit-scrollbar-thumb {
    background: #bdbdbd;
}

.msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

.msg:last-of-type {
    margin: 0;
}

.msg-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background: #ddd;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;

}

.msg-bubble {
    max-width: 450px;
    padding: 15px;
    border-radius: 15px;
    background: #f2f2f2;
}

.msg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.msg-info-name {
    margin-right: 10px;
    font-weight: 500;
    font-size: 13px;
    font-family: var(--font-main);
}

.msg-text {
    font-family: var(--font-main);
}

.msg-info-time {
    font-size: 0.85em;
}

.left-msg .msg-bubble {
    border-bottom-left-radius: 0;
}

.right-msg {
    flex-direction: row-reverse;
}

.right-msg .msg-bubble {
    background: #7ca4a3;
    color: #fff;
    border-bottom-right-radius: 0;
}

.right-msg .msg-img {
    margin: 0 0 0 10px;

}

.msger-inputarea {
    display: flex;
    padding: 10px;
    border-top: var(--border);
    background: #fff;
}

.msger-inputarea * {
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 1em;
}

.msger-input {
    flex: 1;
    background: #f2f2f2 !important;
    outline: none;
    border: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.msger-send-btn {
    margin-left: 10px;
    background: #13889C;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: background 0.23s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

.msger-send-btn i {
    padding: 0;
}

.msger-send-btn:hover {
    background: #13889C;
}

.msger-chat {
    background-color: #fcfcfe;

}

.chat-img-bx {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 4px;
}

.chat-img-bx img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.msger-header-title h3 {
    font-size: 17px;
    font-weight: 500;
    margin-left: 10px;
    margin-bottom: 0;
}

.file-attch {
    background-color: #f2f2f2;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.title-search-field h5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #025187;
}

.title-search-field h5 input {
    width: 300px;
    height: 45px;
    font-size: 15px;
    border-radius: 7px;
}

.title-search-field p {
    font-size: 14px;
    color: #000;
}

.p-info-top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #222;
    margin-bottom: 15px;
}

.p-info-top-container a.dlt {
    min-width: 35px;
    height: 35px;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-info-c-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.p-info-c-top select {
    width: 300px;
    height: 45px;
    font-size: 15px;
    border-radius: 7px;
}

.p-info-c-top a.dtv {
    background-color: #039445;
    color: #fff;
    padding: 7px 15px;
    font-size: 13px;
    border-radius: 7px;
}

.program-upload-btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
}

.program-upload-btns a {
    padding: 7px 15px;
    font-size: 14px;
    background-color: #023970;
    color: #fff;
    border-radius: 7px;
}

h3.title-spa {
    font-size: 20px;
    margin: 0;
    margin-bottom: 15px;
    font-weight: 600;
    color: #000;
}

.g-settings-left {
    padding: 5px 10px;
    border-radius: 10px;
    /*box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    /*background: rgba(255, 255, 255, 0.908);*/
    /*background: #ffffffc7;*/
    background: #ffff;
    border:1px solid #ccc;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    position: sticky;
    top: 80px;
    left: 0;
}

.g-settings-left ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.g-settings-left ul li {
    margin: 8px 0;
    /*border-bottom: 1px solid #ccc;*/
}

.g-settings-left ul li a {
   padding: 7px;
    font-size: 14px;
    background-color: #dfeef1;
    color: #000;
    border-radius: 6px;
    display: flex;
    padding: 10px;
}

.g-settings-left ul li a:hover {
    background-color: #4fa6b6;
    color:#fff;
}

.g-settings-right {
    padding: 15px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; */
    background: rgba(255, 255, 255, 0.908);
    background: #ffffffc7;
    background: #fff;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.g-settings-right h3 {
    font-size: 18px;
    font-weight: 600;
}

.g-settings-right p {
    font-size: 14px;
}

html {
    scroll-padding-top: 4.5rem;
}

input.fieldCheck {
    width: 18px;
    height: 18px;
}

button.exp-btn {
    border: 0;
    color: #344054 !important;

    background: #ffffff !important;

    border: 1px solid #d0d5dd !important;

    box-shadow:
        0 2px 5px rgba(16, 24, 40, 0.05) !important;
    width: 100px;
    padding: 7px 15px;
    height: 40px;
    border-radius: 5px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    margin-left: 10px;
    font-size: 15px;
}

button.exp-btn:hover {
      color: #012A6B !important;

    background: #f5f8fd !important;

    border-color: #012A6B !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 5px 12px rgba(1, 42, 107, 0.10) !important;
}

img.img-td {
    width: 120px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 5px solid #ccc;
}

.min-width-350.tds {
    min-width: 350px;
}
.masters-btns {
    width: 100% !important;
    padding: 4px 0 !important;
}

.masters-btns ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

.masters-btns ul li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Main card */
.masters-btns ul li a {
    position: relative !important;

    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 42px 10px 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    background: #c3dcf6 !important;
    color: #344054 !important;

    border: 1px solid #e4e7ec !important;
    border: 1px solid #ccc !important;
    /*border-left: 3px solid var(--master-color, #012A6B) !important;*/
    border-radius: 9px !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;

    box-shadow: 0 3px 8px rgba(16, 24, 40, 0.05) !important;

    overflow: hidden !important;

    transition: all 0.22s ease !important;
}

/* Soft decorative circle */
.masters-btns ul li a::before {
    content: "" !important;

    position: absolute !important;
    width: 65px !important;
    height: 65px !important;
    right: -25px !important;
    top: -32px !important;

    border-radius: 50% !important;

    background: var(--master-color, #012A6B) !important;
    opacity: 0.06 !important;

    pointer-events: none !important;

    transition: all 0.3s ease !important;
}

/* Arrow */
.masters-btns ul li a::after {
    content: "\f061" !important;

    position: absolute !important;
    right: 11px !important;
    top: 50% !important;

    width: 25px !important;
    height: 25px !important;

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

    transform: translateY(-50%) !important;

    background: #fff !important;
    color: var(--master-color, #012A6B) !important;

    border: 1px solid #e4e7ec !important;
    border-radius: 50% !important;

    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 9px !important;

    box-shadow: 0 2px 5px rgba(16, 24, 40, 0.06) !important;

    transition: all 0.25s ease !important;
}

/* Hover */
.masters-btns ul li a:hover {
    color: #344054 !important;
    background: #fff !important;

    border-color: #d0d5dd !important;
    border-left-color: var(--master-color, #012A6B) !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 16px rgba(16, 24, 40, 0.09) !important;
}

.masters-btns ul li a:hover::before {
    width: 85px !important;
    height: 85px !important;
    right: -28px !important;
    top: -40px !important;
    opacity: 0.09 !important;
}

.masters-btns ul li a:hover::after {
    background: var(--master-color, #012A6B) !important;
    color: #fff !important;
    border-color: var(--master-color, #012A6B) !important;

    transform: translateY(-50%) translateX(2px) !important;
}

/* Active */
.masters-btns ul li a:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Focus */
.masters-btns ul li a:focus,
.masters-btns ul li a:focus-visible {
    outline: none !important;
    color: #344054 !important;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.08) !important,
        0 5px 12px rgba(16, 24, 40, 0.08) !important;
}


button.tgle-cs-btns {
    min-width: 30px;
    height: 30px;
    background-color: transparent;
    border:1px solid #0d6efd;
    color: #0d6efd;
    border-radius: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    text-decoration: none;
}

.dromenu-cs li a.dropdown-item {
    color: #000 !important;
    padding: 10px !important;
}

.dromenu-cs li a.dropdown-item:hover {
    background-color: #f2f2f2;
}




.toggle-btn[type="checkbox"] {
    position: relative;
    width: 40px;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: gray;
    outline: none;
    border-radius: 2rem;
    cursor: pointer;
    border: none;
    /* box-shadow: inset 0 0 5px rgb(0 0 0 / 50%); */
}

.toggle-btn:focus {
    border: none !important;
    outline: none !important;
}

.toggle-btn[type="checkbox"]::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #222;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.toggle-btn[type="checkbox"]:checked::before {
    transform: translateX(100%);
    background: #fff;
}

.toggle-btn[type="checkbox"]:checked {
    background: #409717;
}

.v-preview {
   display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f1f1;
    padding: 15px;
    border-radius: 15px;
    position: relative;
    min-height: 120px;
}

.v-preview img {
    width: 250px;
}

.v-preview span {
    padding: 7px 15px;
    border-radius: 40px;
    position: absolute;
    top: 20px;
    right: 20px;
    /*background-color: #039445;*/
    /*color: #fff !important;*/
}

.v-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0;
    text-align: center;
}

.v-preview-widget {
    background-color: #f7f7f761;
    border: 1px solid #cccccc7d;
    padding: 10px 20px;
    border-radius: 10px;
    height: 100%;
}

.v-preview-widget ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

.v-preview-widget ul li {
    margin: 10px 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    color:#000;
}

.v-preview-widget ul li span {
    font-weight: 400;
    font-size: 14px;
}

.v-document-view {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 15px;
}

.v-document-view h6,
.v-preview-widget h6 {
    font-weight: 600;
    color: #000;
    font-size: 17px;
}

.v-doc-preview {
    background-color: #fff;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ccc;
}

.v-doc-preview img {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    object-fit: contain;
}

.v-doc-preview a {
    padding: 7px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    width: fit-content;
    background-color: #043783;
    color: #fff;
    font-size: 14px;
    border-radius: 40px;
    margin-bottom: 0;
}

.wrap-ul ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrap-ul ul li {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.v-preview-bottom ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.v-preview-bottom ul li {
    font-weight: 600;
    color: #000;
}

.v-preview-bottom ul li select {
    width: 250px;
    font-size: 14px;
    border: 1px solid #ccc;
    height: 45px;
}

.sub-active {
    background: #0e0e0d5c;
    color: #fff !important;
}




.lock-title {
    text-align: center;
    font-size: 20px;
    margin: 0;
    color: #000;
    margin-top: 0;

    font-weight: 600;
    color: #000;
}

.lock-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 30px;
    gap: 10px;
}

.lock-modal-footer button,
.lock-modal-footer a {
    width: 100px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    transition: 0.5s;
    border-radius: 4px;
    text-decoration: none !important;
    border: 0;
}

.lock-modal-footer a {
    background-color: #109896;
    color: #fff;

}

.lock-modal-footer button {
    background-color: #E5D8CB;
    color: #222;
}

.lock-modal-footer button:hover,
.lock-modal-footer a:hover {
    border-radius: 40px;
}

.modal {
    background-color: #021b3e96;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


#lockedAccount i {
    font-size: 40px;
    color: #027009;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 7px;
}

.company-days-listing {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;

    border-radius: 15px;
}

.company-days-listing ul {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.company-days-listing ul li {
    width: 33%;
}

.company-days-listing h6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #c35d0f;
}

.company-days-listing h6 label {
    font-size: 16px;
    color: green;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.company-days-listing h6 label input {
    width: 18px;
    height: 18px;
}

.add-modal-field {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

}

.add-modal-field button {
    min-width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #089712;
    color: #fff;
    border: 0;
}

#leadFieldModal3 h5,
#leadFieldModal2 h5,
#leadFieldModal1 h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.mn-0 {
    min-width: unset !important;
}

.select2-container--default .select2-selection--multiple {
    height: 45px !important;
    font-size: 14px !important;
    border-color: #22222217 !important;
    background-color: #efefef !important;
    color: #222 !important;
    border-radius: 11px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    font-size: 13px;
}

.form-control:disabled,
.form-select:disabled {
    background-color: #c4c4c4;
    cursor: not-allowed;
}

#convertDealModal2 i,
#successModal i {
    font-size: 40px;
    color: #027009;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 7px;
}

.flex-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
}

.flex-check input {
    width: 18px;
    height: 18px;
}

.student-preview-profile img {
    width: 100%;
    height: 200px;
    border-radius: 15px;
        object-fit: contain;
    border: 1px solid #ccc;
    background: #fff;
}

.s-preview-widget ul {
    flex-wrap: wrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.s-preview-widget ul li {
    flex-direction: row;
    width: 50%;
}

.s-preview-widget h3 {
    font-size: 22px;
    margin-top: 5px;
    margin-bottom: 0;
}

.s-preview-widget ul li {
    margin: 8px 0;
}

.s-preview-address h6 {
    font-size: 17px;
    color: #3d6097;
    margin-top: 6px;
    margin-bottom: 0;
}
.s-preview-address p{
    font-size:14px;
    margin-top:10px;
}
.s-preview-address ul li {
    flex-direction: row;
}

.s-preview-address ul li label {
    min-width: 160px;
}

.s-doc-preview p {
    text-align: center;
    font-weight: 600;
    margin: 0;

}

.s-doc-preview small {
    display: block;
    font-size: 13px;
    text-align: center;
}

.desc-program-dt {
   background-color: #f7f7f761;
    border: 1px solid #cccccc7d;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    
}

.desc-program-dt h6 {
    font-size: 16px !important;
    margin: 5px 0;
    color: #000;
    font-weight: 600;
}

.desc-program-dt p,
.p-b-para ,.desc-program-dt div{
    margin: 0;
    font-size: 13px;
}

ul.p-dt-ul {
    margin: 0;
}

.p-dt-ul li {
    margin: 5px 0;
    font-size: 14px;
}

.u-details-preview {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.u-details-preview h6 {
    font-size: 16px;
    margin: 5px 0;
    color: #000;
    font-weight: 600;
}

.u-details-preview ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.u-details-preview ul li {
    margin: 10px 0;
    width: 49%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 15.5px;
    padding-right: 20px;
}

.u-details-preview ul li label {
    font-weight: 600;
    color: #000;
    white-space: nowrap;
    margin-right: 10px;
    min-width: 150px;
}


.table-over {
    overflow: auto;
    position: relative;
}

.table-over .dropdown {
    position: static;
}

.table-over .dropdown-menu {
    position: absolute;
}




.invoice-info {
    background-color: #f2f2f2;
    padding: 4px 15px;
    border-radius: 10px;
    height: 100%;
}

.invoice-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: #012970;
    margin-top: 10px;
}

.invoice-info ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.invoice-info ul li {
    font-size: 14px;
    margin: 13px 0;
    font-weight: 500;
}

.invoice-info ul li span {
    font-weight: 400;
}

.applicant-details {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 12px;
}

.applicant-details input,
.applicant-details textarea,
.applicant-details select {
    background-color: #fff !important;
}

.applicant-details h3 {
    font-size: 18px;
    color: #109896;

}

.td-field select,
.td-field input {
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #222;
    width: 180px;
    margin: 0 auto;
}

.invoice-info-bottom-cs ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.invoice-info-bottom-cs ul li {
    width: 32.6%;
    margin: 0;
}




/*Preview pages*/

.wo-preview-top {
    display: flex;
    justify-content: center;
    align-items: Center
}

.wo-preview-top img {
    width: 300px;
}

.preview-container-center h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
}

.line-hr {
    width: 100%;
    height: 2px;
    background-color: #000;
    margin: 25px 0;
    display: flex;
    margin-top: 2px;

}

.preview-container-center h4 {
    font-size: 18px;
    color: #000;
    font-weight: 700;
}

.preview-container-center p {
    font-size: 15px;
    margin: 5px 0;
}

.preview-container-center-right table tr,
.preview-container-center-right table tr th,
.preview-container-center-right table tr td {
    border: 0 !important;
}

.preview-container-center-right table tr th,
.preview-container-center-right table tr td {
    padding: 5px 0 !important;
    font-size: 15px;
    font-weight: 400;
}

.preview-container-center-right table tr th {
    text-transform: uppercase;
}

.preview-container-center-bottom table tr th {
    border: 0 !important;
    border-top: 1px solid #222 !important;
    border-bottom: 1px solid #222 !important;
    padding: 5px;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
}

.preview-container-center-bottom table tr td {
    border: 0;
    padding: 5px;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
}

.preview-bottom-left table tr td {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 15px;
}

.preview-bottom-right ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.preview-bottom-right ul li {
    display: flex;
    justify-content: space-between;
}

.preview-bottom-right table tr th {
    font-size: 16px;
    font-weight: 600;
    padding: 0px !important;
}

.preview-bottom-right table tr td {
    font-weight: 300 !important;
    padding: 0px !important;
}

.preview-bottom-right table tr td.pdt,
.preview-bottom-right table tr th.pdt {
    padding-top: 35px !important;
}

.preview-bottom-right table tr td .line-cs {
    height: 0.5px;
    width: 100%;
    background-color: #000;
}

.preview-bottom-btns {
    display: Flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-top: 20px;
}

.preview-bottom-btns a,
.preview-bottom-btns button {
    margin: unset !important;
}


.wo-preview-top-2 {
    flex-direction: column;
    align-items: flex-start;
}

.wo-preview-top-2 .line-cs-2 {
    height: 0.8px;
    width: 100%;
    background-color: #000;
    margin: 3px 0;
}

.preview-container-center-two ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

.preview-container-center-two ul li {
    margin: 7px 0;
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

.p-tag p {
    color: #000;
    font-weight: 500;
}

.preview-container-center h2 {
    font-size: 25px;
    margin: 10px 0;
    color: #000;
    margin-top: 30px;
}

.figures-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.figures-list ul li {
    padding: 7px 15px;
    border-radius: 10px;
    margin: 5px 0;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.figures-list ul li.bg1 {
    background-color: #ff6300;
}

.figures-list ul li.bg2 {
    background-color: #094fb6;
}

.figures-list ul li.bg3 {
    background-color: #19871a;
}

.figures-list ul li.bg4 {
    background-color: #e61b1b;
}

.figures-list ul li.bg5 {
    background-color: #875119;
}


.label-between {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px
}


.label-between button {
    background: #31b331 !important;
    border-color: #31b331 !important;
    padding: 5px 15px;
    border-radius: 40px;
}

.center-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.center-text p {
    text-align: center;
}

.remark-invoice {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.remark-invoice h3 {
    font-size: 16px;
    margin-bottom: 2px;
    font-weight: 600;
}

.remark-invoice p {
    font-size: 13px;
    color: #323232;
}

.flex-radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.flex-radio label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.flex-radio input {
    width: 18px;
    height: 18px;
}


.login-btns-index {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.login-btns-index a {
    width: 300px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #109896;
    color: #fff;
    margin: 5px 0;
    border-radius: 7px;
    font-size: 14px;
    transition: 0.5s;
}

.login-btns-index a.bg1 {
    background-color: #ffc107;
}

.login-btns-index a.bg2 {
    background-color: #49a25f;
}



/* Wrapper */
/* .ax-preview-wrap {
    max-width: 1150px;
    margin: auto;
    padding: 30px;
} */

/* Section Card */
.ax-card {
    background: #fff;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

}

/* Title */
.ax-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Section Heading */
.ax-head {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #4f46e5;
    border-left: 4px solid #4f46e5;
    padding-left: 10px;
}

/* Grid */
.ax-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* Field */
.ax-label {
    font-size: 12px;
    color: #6b7280;
}

.ax-value {
    font-size: 14px;
    font-weight: 500;
}

/* Document Box */
.ax-doc {
    padding: 10px 14px;
    background: #eef2ff;
    border-radius: 8px;
    font-size: 13px;
}

/* Buttons */
.ax-actions {
    text-align: right;
}

.ax-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.ax-edit {
    background: #e5e7eb;
}

.ax-submit {
    background: #4f46e5;
    color: #fff;
}

.input-edit {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.input-edit button {
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #b23939;
    color: #fff;
    border: 0;
}



/* Wrapper */
/* .cn-preview-shell {
    max-width: 1200px;
    margin: auto;
    padding: 30px;
} */

/* Header */
.cn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.cn-title {
    font-size: 24px;
    font-weight: 600;
}

/* Card */
.cn-box {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Section Title */
.cn-section {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #000;
    text-transform: uppercase;
}

/* Grid */
.cn-flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

/* Field */
.cn-label {
    font-size: 11px;
    color: #94a3b8;
}

.cn-value {
    font-size: 14px;
    font-weight: 500;
}

/* Highlight Strip */
.cn-highlight {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    color: white;
}

.cn-highlight .cn-label {
    color: #fff;
}

/* Document Tag */
.cn-tag {
    background: #f2f2f2;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    display: inline-block;
}

/* Action Buttons */
.cn-actions {
    text-align: right;
}

.cn-btn {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.cn-edit {
    background: #334155;
    color: white;
}

.cn-submit {
    background: #22c55e;
    color: white;
}



.csx-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.csx-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
}

.csx-head {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.csx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 15px;
}

.csx-label {
    font-size: 12px;
    color: #6b7280;
}

.csx-value {
    font-size: 14px;
    font-weight: 500;
}

.csx-doc {
    border: 1px dashed #d1d5db;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.csx-actions {
    text-align: right;
}

.csx-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.csx-edit {
    background: #e5e7eb;
}

.csx-submit {
    background: #111;
    color: #fff;
}


.agent-dashboard-register-student{
    background-color: #fff;
    border-radius: 15px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.agent-dashboard-register-student-left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:10px
}
.agent-dashboard-register-student-left img{
    width: 120px;
    
}
.agent-dashboard-register-student-left h3{
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}
.agent-dashboard-register-student-left p{
    color: #137DC5;
    margin: 0;
    font-weight: 600;
}
.agent-dashboard-register-student-btns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}
.agent-dashboard-register-student-btns a,.agent-dashboard-register-student-btns button{
    width: 120px;
    height: 40px;
    background-color: #137DC5;
    color: #fff;
    display: flex;
    justify-content:center ;
    align-items: center;
    border-radius: 7px;
    border: 0;
    font-size: 15px;
    transition: 0.5s;
}

.agent-dashboard-register-student-btns button{
     background-color: #056374;
}
.agent-dashboard-register-student-btns a:hover,.agent-dashboard-register-student-btns button:hover{
    border-radius: 40px;
}
.agent-dashboard-top-btns{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 10px;
}
.agent-dashboard-top-btns a{
    width: 100%;
    height: 50px;
    background-color: #1ebdda;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    font-size: 15px;
    transition: 0.5s;
}
.agent-dashboard-top-btns a:last-child{
    background-color: #dc3545;
}
.agent-dashboard-top-btns a:hover{
    border-radius: 40px;
}
.agent-dashboard-middle{
     background-color: #fff;
    border-radius: 15px;
    padding: 12px;
}
.agent-dashboard-middle .dashboard-card{
    background-color: #f7f7f7 !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    padding: 15px !important;
}

.agent-dashboard-middle .dashboard-card-dt h3{
    color: #000 !important;
}
.agent-dashboard-middle .dashboard-card-dt p{
    color: #000 !important;
    font-size: 13px !important;
}

.agent-dashboard-middle .dashboard-card-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    border-radius: 20px !important;
}


/*.auth-widget-box {*/
/*    padding: 30px 25px;*/
/*    border-radius: 15px;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    transition: all .3s ease;*/
/*    box-shadow: 0 10px 25px rgba(0,0,0,.15);*/
/*    height:100%;*/
/*}*/

/*.auth-widget-box i {*/
/*    font-size: 45px;*/
/*    margin-bottom: 15px;*/
/*}*/

/*.auth-widget-box h3 {*/
/*    margin: 15px 0;*/
/*    font-size: 22px;*/
/*    font-weight: 600;*/
/*}*/

/*.auth-widget-box a {*/
/*    display: inline-block;*/
/*    margin-top: 15px;*/
/*    padding: 10px 28px;*/
/*    background: rgba(255,255,255,.2);*/
/*    color: #fff;*/
/*    text-decoration: none;*/
/*    border-radius: 30px;*/
/*    backdrop-filter: blur(5px);*/
/*    transition: .3s;*/
/*}*/

/*.auth-widget-box a:hover {*/
/*    background: #fff;*/
/*    color: #333;*/
/*}*/

/*.auth-widget-box:hover {*/
/*    transform: translateY(-8px);*/
/*}*/

/*.auth-widget-box.admin {*/
/*    background: linear-gradient(135deg, #0F6A7A 0%, #1F7F90 100%);*/
/*}*/

/*.auth-widget-box.agent {*/
/*    background: linear-gradient(135deg, #D6AE43 0%, #C7962D 100%);*/
/*}*/

/*.auth-widget-box.counsellor {*/
/*    background: linear-gradient(135deg, #9FC79F 0%, #7FA77F 100%);*/
/*}*/


.auth-select-box{
       display: flex;
    justify-content: center;
    flex-direction:column;
    align-items: center;
    height: 100vh;
    position: relative;
    z-index: 5;
}

/*.auth-select-box .row{*/
/*       position: absolute;*/
/*    top: 36%;*/
/*    right: -19%;*/
/*    width: 112%;*/
    
/*}*/
.auth-select-box img{
        width: 200px;
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff1c;
    position: absolute;
    top: 32px;
    left: 42%;
    transform: transalate(-50%,-50%);
}
button.btn-width-s{
   width: 90px;
    height: 29px;
    margin: 0;
    font-size: 14px;
    min-width: unset !important;
    min-height: unset !important;
    
}
.auth-widget-box{
    position: relative;
    overflow: hidden;

    padding: 25px;
    border-radius: 28px;

    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(255,255,255,.18);

    box-shadow:
        0 15px 40px rgba(0,0,0,.25),
        inset 0 1px 1px rgba(255,255,255,.25),
        inset 0 -1px 1px rgba(255,255,255,.08);

    text-align: center;

    transition: .45s ease;
}

/* Frosted Shine */

.auth-widget-box::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(255,255,255,.18);
    border-radius:50%;
    top:-130px;
    right:-100px;
    filter:blur(10px);
}

/* Glass Border Glow */

.auth-widget-box::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    padding:1px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.5),
        rgba(255,255,255,.05),
        rgba(255,255,255,.25)
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    pointer-events:none;
}

/* Hover */

.auth-widget-box:hover{

    transform:translateY(-12px);

    background:rgba(255,255,255,.12);

    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 40px rgba(255,255,255,.08);
}

/* Icon */

.icon{

    width:95px;
    height:95px;

    margin:auto;
    margin-bottom:18px;

    border-radius:20px;

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

    font-size:38px;
    color:#fff;

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.25);

    transition:.4s;
}

/* Different Glow */

.admin .icon{
       background: linear-gradient(135deg, #d6a512, #6f5507);
    box-shadow: 0 0 35px rgba(59, 130, 246, .45);
}

.agent .icon{
    background:linear-gradient(135deg,#06b6d4,#14b8a6);
    box-shadow:0 0 35px rgba(6,182,212,.45);
}

.counsellor .icon{
    background:linear-gradient(135deg,#d946ef,#8b5cf6);
    box-shadow:0 0 35px rgba(217,70,239,.45);
}

.auth-widget-box:hover .icon{
    transform:scale(1.08);
}

/* Heading */

.auth-widget-box h3{
    color:#fff;
    font-size:20px;
    font-weight:600;
    margin-bottom:12px;
}

/* Description */

.auth-widget-box p{
    color:rgba(255,255,255,.75);
    font-size:13px;
    line-height:1.5;
    margin-bottom:20px;
}

/* Button */

.auth-widget-box a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    width:100%;

    padding:14px 20px;

    border-radius:15px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    transition:.35s;
}

.auth-widget-box a:hover{

    background:rgba(255,255,255,.22);

    color:#fff;

    letter-spacing:1px;
}

.auth-widget-box a i{
    transition:.35s;
}

.auth-widget-box a:hover i{
    transform:translateX(8px);
}

.g-settings-right .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:28px !Important;
}



.btn-flex-cs{
    justify-content:center !important;
}
.btn-flex-cs button{
    height:41px !important;
    width:110px;
}

.last-child .action-btns button:last-child{
    background-color:transparent;
    border:0;
    height: 0;
    width: 0;
    font-size: 20px;
}

.last-child .action-btns button:last-child i{
    color:#222;
}

.preview-biller-profile {
    padding: 10px 5px;
}

.preview-biller-profile .form-label {
    display: block;
    margin-bottom: 4px !important;
    font-size: 0.8rem;
    font-weight: 400;
    color: #6c757d;
}

.preview-biller-profile .fw-semibold {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    word-break: break-word;
    line-height: 1.5;
}

/*.preview-biller-profile .mb-3 {*/
/*    border-bottom: 1px solid #f1f3f5;*/
/*    padding-bottom: 12px;*/
/*}*/

.preview-biller-profile .mb-3:last-child {
    border-bottom: none;
}

.preview-biller-profile a {
   color: #fff;
    text-decoration: none;
    font-weight: 400;
    padding: 7px 10px;
    font-size: 12px;
    background-color: #2f798f ;
    border-radius: 5px;
    text-decoration:none !important;
    
}

.preview-biller-profile a:hover {
    border-radius:40px;
}

.preview-biller-profile .text-muted {
    font-style: italic;
    color: #6c757d !important;
}

.preview-biller-profile .btn {
    min-width: 120px;
}

.preview-biller-profile .row {
    margin-left: 0;
    margin-right: 0;
}

.form-btns-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #e9ecef;
}

/* Close Button (Red) */
.form-btns-modal .btn-secondary {
    background-color: #c01323;
    border-color: #c01323;
    color: #fff;
    min-width: 110px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size:14px;
}

.form-btns-modal .btn-secondary:hover,
.form-btns-modal .btn-secondary:focus {
    background-color: #bb2d3b;
    border-color: #b02a37;
    color: #fff;
}

/* Add / Update Button (Green) */
.form-btns-modal .btn-primary {
    background-color: #1d7809;
    border-color: #1d7809;
    color: #fff;
    min-width: 110px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size:14px;
}

.form-btns-modal .btn-primary:hover,
.form-btns-modal .btn-primary:focus {
    background-color: #157347;
    border-color: #146c43;
    color: #fff;
}

.form-btns-modal .btn {
    padding: 8px 22px;
    border-radius: 6px;
}

tr td i.fa-toggle-off,tr td i.fa-toggle-on{
    font-size:22px;
}
tr td i.fa-toggle-on{
    color:green !important;
}



#resetFilter{
     background-color: #c01323;
    border-color: #c01323;
    color: #fff;
    min-width: 110px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size:14px;
    width:110px !Important;
    padding: 7px 0;
    border-radius: 5px;
}

/* Common styles */
.dt-buttons .btn-group button {
     background: #c1731c;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    margin-right: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

/* 1st button */
.dt-buttons .btn-group button:nth-child(1) {
    background: #dc3545;
}

/* 2nd button */
.dt-buttons .btn-group button:nth-child(2) {
    background: #17a2b8;
}

/* 3rd button */
.dt-buttons .btn-group button:nth-child(3) {
    background: #28a745;
}

/* 4th button */
.dt-buttons .btn-group button:nth-child(4) {
    background: #dc3545;
}

/* 5th button */
.dt-buttons .btn-group button:nth-child(5) {
    background: #fd7e14;
}

/* Hover */
.dt-buttons .btn-group button:nth-child(1):hover { background: #5a6268; }
.dt-buttons .btn-group button:nth-child(2):hover { background: #138496; }
.dt-buttons .btn-group button:nth-child(3):hover { background: #218838; }
.dt-buttons .btn-group button:nth-child(4):hover { background: #c82333; }
.dt-buttons .btn-group button:nth-child(5):hover { background: #e96b00; }



div.dataTables_wrapper div.dataTables_filter{
    float: inline-end;
}


.btn-end-flex{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
}

.btn-end-flex button,.btn-end-flex a{
    margin:0;
    
}
.btn-end-flex a.bg-sub{
    background:#b23939 !important;
    color:#fff !important;
    border-color:#b23939 !important;
}
.btn-end-flex button.bg-sub{
    background:#b23939 !important;
    color:#fff !important;
    border-color:#b23939 !important;
}


/*.tble-cstm tr td a.dropdown-item{*/
/*    width:fit-content;*/
/*}*/

.bank-code-top{
    background-color:#f7f7f7;
    padding:12px;
    border:1px solid #ccc;
    border-radius:10px;
}
p.bank-code-top {
    line-height:35px;
    font-size:16px;
    font-weight:400;
    color:#000 !important;
}

.bank-code-top span{
    color:#b23939;
    font-weight:600;
}


.summary-item {
    background: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}



.summary-item h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:7px;
    
}

.summary-item p {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #212529;
    word-break: break-word;
}


.widget-payouts {
    padding: 25px 20px;
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    height: 100%;
}

.widget-payouts h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.widget-payouts h3 {
    margin: 12px 0 0;
    font-size: 34px;
    font-weight: 700;
}

/* Different Backgrounds */

.total-applications {
    background: linear-gradient(135deg, #4e73df, #224abe);
}

.payout-amount {
    background: linear-gradient(135deg, #1cc88a, #13855c);
}

.payout-pending {
    background: linear-gradient(135deg, #f6c23e, #dda20a);
}

.add-document-plus{
    background-color:green !important;
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
}
.remove-document-cs{
    background-color:#b23939 !important;
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
}


.add-more-btn{
     background-color:green !important;
     font-size:14px;
     border-radius:7px;
}

a.btn-view-info{
    background-color:#c2cc1a !important;
    color:#fff !important;
    font-size:14px;
     border-radius:7px;
     border-color:#c2cc1a !important;
}


.std-counsellor-widget {
     background: #cedded; /* Light blue background */
    border: 1px solid #b6dcff;
    border-radius: 10px;
    padding: 15px 20px;
    /*box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);*/
    transition: all 0.3s ease;
}


.std-counsellor-widget h5 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 5px;
}

.std-counsellor-widget p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.std-counsellor-widget p strong {
    color: #495057;
}
.std-counsellor-widget ul{
    margin:0;
    padding:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    list-style:none;
    color:#000;
    padding-top:10px;
}
.std-counsellor-widget ul li{
    font-size:15.5px;
    font-weight:500;
}
.std-counsellor-widget ul li span{
    font-weight:400;
}

.flex-end-btns{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:5px;
}

.flex-end-btns button.exp-btn {
        width: 110px;
    height: 36px;
   
}

.card-cs-permision {
    border: none !important;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    transition: all .35s ease;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}



/* Header */

.card-cs-permision .card-header {
 background: linear-gradient(135deg, #012A6B 0%, #0e6076 100%) !important;
    border-bottom: 1px solid #e9ecef;
    padding:15px;
}

.card-cs-permision .card-header strong {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .3px;
}

/* Body */

.card-cs-permision .card-body {
    padding: 20px;
    background: #fff;
}

/* Permission Item */

.card-cs-permision .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    
}



/* Checkbox */

.card-cs-permision .form-check-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid #94a3b8;
    box-shadow: none;
    margin-top:-2px;
}

.card-cs-permision .form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

.card-cs-permision .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .18);
}

/* Label */

.card-cs-permision .form-check-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

/* Checked Permission */

.card-cs-permision .form-check-input:checked + .form-check-label {
    color: #2563eb;
    font-weight: 600;
}

/* Select All */

.card-cs-permision .card-header .form-check {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.card-cs-permision .card-header .form-check:hover {
    transform: none;
    background: transparent;
}

.card-cs-permision .card-header .form-check-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin:0;
}

/* Grid spacing */

.card-cs-permision .row > div {
    margin-bottom: 12px;
}

.card-dynamic-row{
   border:1px solid #ccc;
    padding:12px;
    border-radius:10px;
    background-color:#f7f7f7;
    padding:20px;
}
.card-dynamic-row .card-body{
    padding:0;
}
.select2-container--default .select2-selection--multiple{
    overflow:auto;
}

a#brochureFileLink{
    padding:7px 15px;
    background-color:#e0bd34;
    font-size:14px;
    color:#fff;
    border-radius:5px;
}
.row-field-bg{
    border:1px solid #ccc;
    padding:12px;
    border-radius:10px;
    background-color:#f7f7f7;
    padding:20px;
}

.row-field-bg h5{
    font-weight:600;
    font-size:18px;
    color:#076a90;
}



.header-icon-btns {
    display: flex;
    align-items: center;
    gap: 7px;
}

.header-icon-btns a,
.header-icon-btns .headertogle {
  width: 40px;
    height: 40px !important;
    border-radius: 7px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease;
    border:1px solid #000 ;
    color:#18a0b8 ;
}

.header-icon-btns a i,
.header-icon-btns .headertogle i {
    font-size: 16px;
    color: #000 ;
}

/*.header-icon-btns a:nth-child(1) {*/
/*    background: linear-gradient(135deg, #667eea, #764ba2);*/
/*}*/

/*.header-icon-btns a:nth-child(2) {*/
/*    background: linear-gradient(135deg, #00c6ff, #0072ff);*/
/*}*/

/*.header-icon-btns a:nth-child(3) {*/
/*    background: linear-gradient(135deg, #43cea2, #185a9d);*/
/*}*/

/*.header-icon-btns .headertogle:nth-child(3) {*/
/*    background: linear-gradient(135deg, #ff9a44, #fc6076);*/
/*}*/

/*.header-icon-btns .headertogle:nth-child(4) {*/
/*    background: linear-gradient(135deg, #ff416c, #ff4b2b);*/
/*}*/

.header-icon-btns .headertogle button {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-icon-btns a:hover,
.header-icon-btns .headertogle:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


.dashboard-main-widget{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    padding: 24px;
    border-radius: 18px;
    background: #fff;

    border: 1px solid #eef2f7;
    box-shadow: 0 10px 35px rgba(18,38,63,.08);

    transition: .35s ease;
}

.dashboard-main-widget:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(18,38,63,.14);
}

.dashboard-content{
    position: relative;
    z-index: 2;
}

.dashboard-label{
    display: inline-block;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
}

.dashboard-content h3{
    margin: 0;
    font-size: 33px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1;
}

.dashboard-card-icon{
    position: relative;
    z-index: 2;

    width: 72px;
    height: 72px;
    border-radius: 22px;

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

    color: #fff;
    font-size: 30px;

    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.dashboard-card-icon i{
    font-size: 30px;
}

.card-pattern{
    position:absolute;
    right:-45px;
    top:-45px;
    width:170px;
    height:170px;
    border-radius:50%;
    background:rgba(0,0,0,.03);
}

.card-pattern::after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:18px;
    top:18px;
    border-radius:50%;
    border:12px solid rgba(0,0,0,.03);
}

.dash-student-qr{
    position: relative;
    text-align: center;
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px;
    border: 1px solid #edf2f7;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    overflow: hidden;
    transition: all .3s ease;
}

.dash-student-qr:hover{
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

.dash-student-qr::before{
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(37,99,235,.05);
    border-radius: 50%;
    top: -90px;
    right: -90px;
}

.dash-student-qr img{
    width: 170px;
    height: 170px;
    background: #fff;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    position: relative;
    z-index: 2;
}

.dash-student-qr h3{
    margin: 20px 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
}

.dash-student-qr p{
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.dash-student-qr-btns{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.dash-student-qr-btns a,
.dash-student-qr-btns button{
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    background: linear-gradient(135deg,#2563eb,#4f46e5);
    color: #fff;
    font-size: 18px;

    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 8px 18px rgba(37,99,235,.25);
}

.dash-student-qr-btns a:hover,
.dash-student-qr-btns button:hover{
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 24px rgba(37,99,235,.35);
}

.dash-student-qr-btns button{
    font-family: inherit;
}

.pad-row-dash .col-lg-6{
    padding:0 5px;
}


.new-student-btn{
    margin: 20px 0;
    margin-bottom:0;
}

.new-student-btn a{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 28px;
    border-radius: 12px;
    box-shadow:none;
   background: linear-gradient(135deg, #2563eb 0%, #14b8a6 100%);
    color: #fff;
    text-decoration: none;

    font-size: 15px;
    font-weight: 500;
    letter-spacing: .3px;

    box-shadow: 0 10px 25px rgba(37,99,235,.25);
    transition: all .3s ease;
}

.new-student-btn a:hover{
    border-radius:40px;
    color: #fff;
}

.new-student-btn a:active{
    transform: translateY(0);
}

.new-student-btn a i{
    font-size: 16px;
}

.profile-basic-view {
    background: #fff;
    border: 1px solid #d1d3d5;
    border-radius: 10px;
    padding: 20px;
}

.profile-img-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.profile-img-left img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #dee2e6;
    background: #f8f9fa;
}

.profile-img-left div {
    display: flex;
    gap: 8px;
}

.profile-img-left .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.profile-preview-latest {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 18px 20px;
    height: 100%;
}

.profile-preview-latest ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-preview-latest li {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 15px;
    color: #495057;
    font-weight: 600;
}

.profile-preview-latest li:last-child {
    border-bottom: none;
}

.profile-preview-latest span {
    margin-left: 8px;
    color: #212529;
    font-weight: 400;
    word-break: break-word;
}


@media (max-width: 991px) {
    .profile-img-left {
        margin-bottom: 20px;
    }

    .profile-preview-latest {
        margin-top: 15px;
    }
}

@media (max-width: 576px) {
    .profile-img-left img {
        width: 75px;
        height: 75px;
    }

    .profile-preview-latest {
        padding: 15px;
    }

    .profile-preview-latest li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .profile-preview-latest span {
        margin-left: 0;
    }
}

.g-settings-right .select2-container--default .select2-selection--single{
    border-radius:6px !important;
    border:1px solid #b3b4b6 !important;
}

table.dataTable{
    border-collapse: collapse !important;
}


.preview-biller-profile .col-lg-6,.preview-biller-profile .col-lg-12{
    padding:0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    
    padding-left:10px;
}

.program-show-btns{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:5px;
}
.program-show-btns a {
    padding:7px 15px;
    background-color:#18a0b8;
    color:#fff;
    border-radius:5px;
    font-size:14px;
    transition:0.5s;
    
    
}
.program-show-btns a:hover{
    border-radius:40px;
}

.program-show-btns a:first-child{
    background-color:#b23939;
}

.program-show-btns button {
    padding:7px 15px;
    background-color:green;
    color:#fff;
    border-radius:5px;
    font-size:14px;
    transition:0.5s;
    border:0;
    
    
}

.program-show-btns button:hover{
    border-radius:40px;
}

a.brochure-open-btn{
        background-color: #c1b732;
    padding: 7px 11px;
    display: Flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    
}

.between-title{
    display:Flex;
    justify-content:flex-start;
    align-items:center;
    gap:10px;
}
.between-title span{
    color:red !important;
    font-weight:600;
}

.u-details-preview-data ul{
    margin:0;
    list-style:none;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}


.u-details-preview-data ul li{
    font-size: 14px;
    background-color: #dfeef1;
    color: #000;
    border-radius: 6px;
    display: flex;
    padding: 10px;
    width:32.5%;
    min-height:45px;
    display:flex;
    justify-content:flex-start;
    align-items:Center;
    
}
.u-details-preview-data ul li label{
    font-weight:600;
    color:#000;
    margin-right:10px;
}


.title-between-text{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-size:18px;
    font-weight:600;
    
}

.title-between-text span{
    color:red !important;
    font-weight:600;
}
.text-program-field{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:10px;
}

.text-program-field h5{
    color:#000;
    font-size:18px;
    font-weight:600;
}

.text-program-field p{
    font-size:14px;
}


.text-program-field button{
    
}

.check-label-condition label{
    color:#000 !important;
}

.form-radio-btn-cs input{
    width:20px;
    height:20px;
}
.form-radio-btn-cs  label{
    font-size:14px;
    font-weight:600;
    color:#000;
}

.program-info-tite{
    text-align:center;
}
.program-info-tite h3{
    text-align:center;
    font-size:18px;
    margin:12px 0;
    font-weight:600;
}





.widget-preview-listing {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}

.widget-preview-listing ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-preview-listing ul li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f1f1;
    font-size: 14px;
    color: #444;
}

.widget-preview-listing ul li:last-child {
    border-bottom: none;
}

.widget-preview-listing ul li {
    font-weight: 600;
}

.widget-preview-listing ul li span {
    flex: 1;
    text-align: right;
    font-weight: 400;
    color: #666;
    word-break: break-word;
}














.widget-preview-listing-second {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e9ecef;
}

.widget-preview-listing-second h6 {
    margin-bottom: 20px;
}

.widget-preview-listing-second ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:5px;
}

.widget-preview-listing-second li {
    background: #f8f9fa;
    border:1px solid #ccc;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 5px;
    width:49%;
}

.widget-preview-listing-second label {
    display: block;
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 5px;
}

.widget-preview-listing-second span {
    font-size: 13px;
    font-weight: 500;
    color: #212529;
}



.application-student-card-cs{
    background-color: #d1dbf2;
    border:1px solid #abb4b6;
    padding:15px;
    border-radius:12px;
}

.student-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.student-card-header h5{
    font-size:20px;
    font-weight:600;
    color:#000;
}


.student-card-header p{
    font-size:15px;
    margin-bottom:10px !important;
}


.student-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.student-info-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

/* Gender Badge */
.bg-badge-1 {
    background: #4f46e5; /* Indigo */
}

/* Marital Status Badge */
.bg-badge-2 {
    background: #10b981; /* Emerald */
}

.appfee-btns{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content:flex-end;
    align-items:center;
    padding-bottom:10px;
}

.appfee-btns .btn-action{
    padding: 8px 16px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s ease;
}

.appfee-btns .btn-action:hover{
    opacity: 0.9;
    color: #fff;
    border-radius:40px;
}

/* Individual Colors */
.btn-uge{
    background: #0d6efd;      /* Blue */
}

.btn-counsellor{
    background: #198754;      /* Green */
}

.btn-agent{
    background: #fd7e14;      /* Orange */
}

.btn-reminder{
    background: #dc3545;      /* Red */
}

.btn-history{
    background: #6f42c1;      /* Purple */
}

.btn-back{
    background: #6c757d;      /* Gray */
}

.appfee-card{
    padding: 20px;
    border-radius: 10px;
    height: 100%;
    position: relative;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}

.appfee-card::before{
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
   background: rgb(255 255 255 / 13%);
    border-radius: 50%;
    top: -70px;
    right: -70px;
    z-index: -1;
}

.appfee-card::after{
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
   background: rgb(255 255 255 / 13%);
    border-radius: 50%;
    bottom: -50px;
    left: -50px;
    z-index: -1;
}
.appfee-card h4{
    font-size:14px;
    font-weight:500;
    color:#fff;
    
}
.appfee-card p{
    font-size:25px;
    margin:0;
    color:#fff;
}

.appfee-card.total-card{
    background-color:#c9a509;
}
.appfee-card.paid-card{
    background-color:#1d8437;
}
.appfee-card.balance-card{
    background-color:#be2727;
}

.in-modal-title{
   font-size: 17px;
    font-weight: 600;
    color: #b25a08;
    margin-bottom: 10px !important;
}

.feeModal-info{
    background-color: #dfeef1;
    border-radius: 6px;
    padding: 15px;
}
.feeModal-info p{
    margin:8px 0 !important;
    font-size:15px;
    color:#000;
}

.feeModal-info p strong{
    font-weight:600;
    margin-left:10px;
    
}

.feeModal-info-fine{
    display:flex;
    justify-content:space-between;
    align-items:Center;
}
.feeModal-info-fine span{
     padding: 5px 15px;
    background-color: #fbdede;
    border: 1px solid #e42929;
    color: #e42929 !important;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
}

.modal-pay-widget{
    background-color: #dfeef1;
    border-radius: 6px;
    padding: 15px;
    height:100%;
}

.modal-pay-widget h5{
    font-size: 13px;
    font-weight: 500;
}
.modal-pay-widget p{
    margin:0;
    font-size:18px;
    color:#000;
    
}
.modal-transaction-widget{
    background-color: #f7f7f7;
    border:1px solid #ccc;
    border-radius: 6px;
    padding: 15px;
    height:100%;
}

.modal-transaction-widget h5{
    font-size: 13px;
    font-weight: 500;
}
.modal-transaction-widget p{
    margin:0;
    font-size:14px;
    color:#000;
    
}

.ap-status p{
    margin:0;
    font-weight:600;
    color:#000;
}

.counsellor-info-modal-lis {
    background: #fff;
    border-radius: 8px;
}

.counsellor-info-modal-lis ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.counsellor-info-modal-lis ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.counsellor-info-modal-lis ul li:last-child {
    border-bottom: none;
}

.counsellor-info-modal-lis label {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.counsellor-info-modal-lis small {
    font-size: 14px;
    color: #666;
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

a.add-more-btn-cs{
    background-color:green;
    padding:5px;
    color:#fff;
    display:flex;
    width:fit-content;
}

.leads-show-dt {
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #ececec;
}

.leads-show-dt h3 {
    margin-bottom: 25px;
    font-size: 28px;
    color: #222;
    font-weight: 700;
}

.leads-show-dt ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.leads-show-dt ul li {
    background: #f8f9fb;
    padding: 15px 18px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.leads-show-dt ul li {
    color: #777;
    font-size: 12px;
    font-weight: 500;
}

.leads-show-dt ul li span {
    margin-top: 6px;
    color: #222;
    font-size: 15px;
    font-weight: 500;
}

@media(max-width:768px){
    .leads-show-dt ul{
        grid-template-columns:1fr;
    }
}

.ld-profile-right {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
}

.ld-profile-right h3 {
    margin: 0 0 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 24px;
    font-weight: 600;
    color: #222;
}

.ld-profile-right ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ld-profile-right ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 15px;
}

.ld-profile-right ul li:last-child {
    border-bottom: none;
}

.ld-profile-right ul li {
    color: #6b7280;
    font-weight: 500;
}

.ld-profile-right ul li span {
    color: #111827;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 576px) {
    .ld-profile-right ul li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ld-profile-right ul li span {
        text-align: left;
    }
}

h3.p-tiel{
    font-size:18px;
    font-weight:600;
    margin-bottom:10px;
}

.btn-slip-left{
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
    gap:5px;
    height:100%;
}
.btn-slip-left button{
    margin:0;
}






/* Left Panel */
.chat-left {
    height: 650px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Left Header */
.chat-left-header {
       background: #18a0b8;
    color: #fff;
    padding: 18px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

/* User List */
.chat-left-lsit {
    list-style: none;
    padding: 0;
    margin: 0;
    height: calc(650px - 65px);
    overflow-y: auto;
}

.chat-left-lsit li {
    padding: 15px 18px;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
    transition: .3s;
    font-weight: 500;
    color: #444;
    font-size:14.5px;
}

.chat-left-lsit li:hover {
    background: #eef4ff;
    color: #2563eb;
    transform: translateX(5px);
}

.chat-left-lsit li.active {
    background: #2563eb;
    color: #fff;
}

/* Right Panel */
.chat-right {
    background: #fff;
    height: 650px;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Header */
.chat-right-header {
    background: #18a0b8;
    color: #fff;
    padding: 18px 20px;
    font-size: 20px;
    font-weight: 600;
}

/* Chat Body */
.chat-right-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f7f9fc;
}

/* Scrollbar */
.chat-right-body::-webkit-scrollbar,
.chat-left-lsit::-webkit-scrollbar {
    width: 6px;
}

.chat-right-body::-webkit-scrollbar-thumb,
.chat-left-lsit::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 10px;
}

/* Footer */
.chat-right-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fff;
}

/* Input */
.chat-right-footer .form-control {
    /*border-radius: 30px;*/
    border: 1px solid #aaaaaa;
    padding: 12px 18px;
}

.chat-right-footer .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 10px rgba(37,99,235,.15);
}

/* Button */
.chat-right-footer .btn {
    /*border-radius: 30px;*/
    padding: 10px 25px;
    margin-left: 10px;
        background: #2f9010;
    border: none;
    transition: .3s;
}

.chat-right-footer .btn:hover {
    transform: scale(1.05);
}

/* Message Bubble */
.message {
    display: flex;
    margin-bottom: 15px;
}

.message.sent {
    justify-content: flex-end;
}

.message.received {
    justify-content: flex-start;
}

.message .bubble {
    max-width: 70%;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
}

.message.sent .bubble {
    background: linear-gradient(135deg,#2563eb,#4f46e5);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.message.received .bubble {
    background: #e9eef6;
    color: #333;
    border-bottom-left-radius: 5px;
}

.message-time {
    font-size: 11px;
    opacity: .7;
    margin-top: 5px;
}

/* Responsive */
@media(max-width:768px){

    .chat-left{
        height:300px;
        margin-bottom:20px;
    }

    .chat-right{
        height:550px;
    }
}

.chat-right-body span{
    padding:15px !important;
    background-color:#e2ecf6d6 !important;
    border-radius:12px 12px 0 12px !important;
    font-size:15.5px !important ;
    color:#000 !important;
    font-weight:300px !important;
}
.chat-right-body span.bg-secondary{
     background-color:#68cbdc !important;
     color:#fff !important;
}
tr td div.action-btns .btn-cstm i.fa-lock{
    margin-right:8px !important;
}







.csx-card-cs{
    background:#fff;
    border-radius:18px;
    padding:25px;
    margin-bottom:15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border:1px solid #eef2f7;
    transition:.3s;
}


.csx-head-cs{
    font-size:18px;
    font-weight:600;
    color:#1e293b;
    border-bottom:1px solid #edf2f7;
    padding-bottom:12px;
    margin-bottom:20px;
}

.csx-grid-cs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.csx-item{
    background:#f8fafc;
    border-radius:12px;
    padding:15px;
    border:1px solid #edf2f7;
}

.csx-label-cs{
    color:#64748b;
    font-size:12px;
    margin-bottom:5px;
    font-weight:500;
    /*text-transform:uppercase;*/
    letter-spacing:.5px;
}

.csx-value{
    color:#0f172a;
    font-size:16px;
    font-weight:600;
    word-break:break-word;
}

.csx-doc-cs{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:15px;
    overflow:hidden;
    padding:15px;
    text-align:center;
    transition:.3s;
}



.csx-doc-cs img,
.csx-doc-cs iframe{
    width:100%;
    border-radius:10px;
    margin-bottom:15px;
}

.view-btn-cnx{
    display:inline-block;
    background:#188610;
    color:#fff;
    padding:10px 22px;
    border-radius:8px;
    text-decoration:none;
    font-weight:500;
    transition:.3s;
    font-size:14px;
}

.view-btn-cnx:hover{
    background:#188610;
    color:#fff;
    border-radius:40px;
}



.cnx-top-btns{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-bottom:25px;
    flex-wrap:wrap;
}

/* Common Button Style */
.cnx-top-btns .btn{
    border:none;
    padding:11px 22px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    transition:all .3s ease;
    text-decoration:none;
    color:#fff;
}

/* Green Edit Button */
.cnx-btn-edit{
    background:linear-gradient(135deg,#16a34a,#22c55e);
}

.cnx-btn-edit:hover{
    background:linear-gradient(135deg,#15803d,#16a34a);
   border-radius:40px;
    color:#fff;
}

/* Blue Documents Button */
.cnx-btn-doc{
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    
}

.cnx-btn-doc:hover{
    background:linear-gradient(135deg,#1d4ed8,#2563eb);
    border-radius:40px;
    color:#fff;
}

/* Mobile */
@media (max-width:576px){

    .cnx-top-btns{
        justify-content:center;
        gap:5px
    }

    .cnx-top-btns .btn{
        width:100%;
        justify-content:center;
    }

}
.desc-prv h6{
    color:#000;
}
.desc-prv p{
    font-size:14px;
}
.btn-btn-flex{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:5px;
}
.btn-btn-flex a,.btn-btn-flex button{
    margin:0 !important;
}

#qualificationPreviewWrapper a,#proofPreviewWrapper a{
   font-size: 13px;
    color: #fff;
    width: fit-content;
    background-color: #c2cc1a  !important;
}
#qualificationPreviewWrapper ,#proofPreviewWrapper{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
}

a.btn-open{
     font-size: 13px;
    color: #fff;
    width: fit-content;
    background-color: #c2cc1a  !important;
}
button.assignPermission,button.assignPermission span{
    white-space:nowrap;
}






@media screen and (max-width:1350px){
    .agent-prv ul li{
        flex-direction:column;
    }
}
@media screen and (max-width:1200px){
    #main{
        margin-left:0;
        padding: 0 15px;
                padding-top: 70px;
    }
    .header{
        width:100%;
        overflow:auto;
    }
    .g-settings-left ul{
        display:flex;
        justify-content:Flex-start;
        align-items:center;
        overflow:auto;
        gap:10px
    }
    .g-settings-left{
        margin-bottom:10px;
    }
    .g-settings-left ul li a{
        white-space:nowrap;
    }
     .agent-prv ul li{
        flex-direction:row;
    }
}
@media screen and (max-width:991px){
    .pad-row-dash-2 .col-lg-4{
        padding: 0 5px;
    }
    .u-details-preview ul li{
        width:100%;
        margin:5px 0;
    }
      .footer{
        position:static;
        padding-top:20px;
    }
    .lg-rverse{
        flex-direction:column-reverse;
    }
    .masters-btns ul li{
        width:32%;
    }
    .student-preview-profile img{
        width:250px;
        height:250px;
    }
    .u-details-preview-data ul li{
        width: 49%;
    }
    .text-program-field{
        flex-direction:column-reverse;
        gap:10px
    }
    .std-counsellor-widget ul{
         flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    }
    .std-counsellor-widget ul li{
         margin:0 0;
         display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    border-bottom:1px solid #ccc;
    width:100%;
    gap: 5px;
        padding: 10px 0;
    }
}
@media screen and (max-width:768px){
   
    #table_length,.dataTables_length{
               margin-bottom: 10px;
        display: flex;
    }
    div.dataTables_wrapper div.dataTables_filter {
    float: inline-start;
}
.page-title{
    flex-direction:column-reverse;
            justify-content: flex-start;
        align-items: flex-start;
}
.page-title ol{
    margin-bottom:5px;
}
.page-title h3{
    font-size:22px;
}
.breadcrumb li,.breadcrumb li a{
    font-size:13px;
}
.s-preview-widget ul li{
    width:100%;
}
.list-program-dt ul li{
    width:100%;
            flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left:0;
}
.company-days-listing ul li{
    width:50%;
}
.wrap-ul ul,.v-preview-bottom ul {
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:5px;
}
.v-preview-bottom ul li{
    margin:5px 0;
}
.wrap-ul ul li{
    margin:0 0;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    border-bottom:1px solid #ccc;
    width:100%;
    gap: 5px;
        padding: 10px 0;
}
.masters-btns ul li{
        width:49%;
    }
     .u-details-preview-data ul li{
        width: 100%;
    }
    .widget-preview-listing-second li{
        width:100%;
    }
    .student-card-header{
        flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding-bottom:10px;
    }
    .appfee-btns{
        justify-content:flex-start;
    }
    .agent-prv ul li {
        margin:0 0;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    border-bottom:1px solid #ccc;
    width:100%;
    gap: 5px;
        padding: 10px 0;
    }
}

@media screen and (max-width:567px){
    .btns-header-top{
        display:none;
    }
   
    .profile-container ul.nav-tabs,.main-table-container ul.nav-tabs{
       flex-direction: row;
        flex-wrap: nowrap;
        overflow: auto !important;
        width: 100% !important;
    }
    .nav-tabs-bordered .nav-link{
        margin:0;
        margin-bottom:10px;
        
    }
    .settings-form{
        padding:15px;
    }
    .tble-cstm tr th{
        min-width:150px;
    }
    .tble-cstm tr th:first-child,.tble-cstm tr th:nth-child(2){
        min-width:unset;
        white-space:nowrap;
    }
    .modal-body{
        padding:12px;
    }
    .btn-btn-flex{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
}
.u-details-preview ul li{
    flex-direction:column;
}
.u-details-preview ul li,.u-details-preview ul li label, .u-details-preview ul li a{
            word-break: break-word;
}
.v-preview img{
    width:150px;
}
.v-preview{
    min-height:115px;
}
.program-show-btns{
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
}
.program-show-btns a,.program-show-btns button{
    width:100%;
    text-align: center;
}
.between-title{
     flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
}
div.dataTables_wrapper div.dataTables_filter label{
    margin-bottom:5px;
}
.phone-res .col-4{
    min-width:100px;
}
.phone-res {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap: nowrap;
}
.company-days-listing ul li{
    width:100%;
}
.masters-btns ul li{
        width:100%;
    }
    .s-preview-widget ul li,.s-preview-widget ul li,.s-preview-address ul li{
         margin:0 0;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    border-bottom:1px solid #ccc;
    width:100%;
    gap: 5px;
        padding: 10px 0;
    }
    .btn-btn-flex a, .btn-btn-flex button{
        width:70%;
        height:40px;
    }
    .u-details-preview-data ul li{
         flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    width:100%;
    gap: 5px;
    }
    .title-between-text{
         flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    }
    .widget-preview-listing ul li{
        gap:5px;
    }
    .widget-preview-listing ul li{
         flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    }
    .application-student-card-cs{
        padding:12px;
    }
    .st-reg a{
        width:100%;
        margin:10px 0;
    }
    .pt-3-0{
        padding-top:0 !important;
    }
    .feeModal-info-fine{
         flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    }
    .counsellor-info-modal-lis ul li{
           flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
            gap: 5px;
        margin: 5px 0;
    }
    .flex-cl-btn{
        flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start;
    }
    .flex-cl-btn a, .flex-cl-btn button{
        width:70%;
    }
    .leads-show-dt{
        padding:15px;
    }
}


@media screen and (max-width:400px){
     .btn-btn-flex a, .btn-btn-flex button{
        width:100%;
    }
     .flex-cl-btn a,.flex-cl-btn button{
        width:100%;
    }
    .btn-slip-left{
        flex-direction: column;
    justify-content: flex-start !important;
    align-items: flex-start;
    }
    .btn-slip-left a,.btn-slip-left button{
        width:100%;
    }
}

div.dataTables_wrapper div.dataTables_info{
        float: inline-start;
}
div.dataTables_wrapper div.dataTables_paginate{
     float: inline-end;
}

@media screen and (max-width:768px){
    /*.table-container,.table-over{*/
    /*    overflow:unset !important;*/
    /*}*/
    table{
        display:inline-block;
        overflow:auto;
    }
}
@media screen and (max-width:500px){
    .table-container,.table-over{
        overflow:unset !important;
    }
    table{
        display:inline-block;
        overflow:auto;
    }
}

#notificationList{
    min-height:300px;
}

#notificationList a{
    width:fit-content !important;
    padding:8px !important;
    box-shadow:none !important;
    border:0 !Important;
    border-bottom:1px solid #ccc !important;
    margin:8px 0 !important;
}






/* ================================
   Course Finder Section
================================ */

.find-course-baner {
    position: relative;
    overflow: hidden;
    padding: 30px 30px 80px;
    text-align: center;
    border-radius: 20px;
   background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.15) 0 70px, transparent 71px), radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.1) 0 100px, transparent 101px), linear-gradient(135deg, #156f9c 0%, #0d587d 45%, #156f9c 100%);
    color: #fff;
}

.find-course-baner::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -80px;
    bottom: -150px;
    border: 40px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.find-course-baner::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    left: -30px;
    top: 40px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.find-course-baner span {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #dbeafe;
    font-size: 14px;
}

.find-course-baner h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size:35px;
    font-weight: 600;
    line-height: 1.2;
}



.course-search-container {
    position: relative;
    z-index: 5;
    /*margin: -65px 35px 0;*/
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    backdrop-filter: blur(20px);
}

.course-search-container label {
    display: block;
    margin-bottom: 9px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.course-search-container .form-select ,.course-search-container .form-control{
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #f8fafc;
    color: #222;
    font-size: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.course-search-container .form-select:hover,.course-search-container .form-control:hover {
    border-color: #93c5fd;
    background-color: #fff;
}

.course-search-container .form-select:focus,.course-search-container .form-control:focus {
    border-color: #2563eb;
    background-color: #fff;
    outline: none;
}


.button-find-course {
    position: relative;
    display: block;
    width: 180px;
    min-height: 46px;
    margin-top: 5px;
    overflow: hidden;
    border: none;
    border-radius: 12px;
   background: linear-gradient(135deg, #156f9c , #0c3d56 );
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 auto;
}

.button-find-course::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.button-find-course:hover::before {
    left: 130%;
}

.button-find-course:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #0c3d56, #156f9c);
    box-shadow: rgba(37, 99, 235, 0.35) 0px 15px 35px;
}

.button-find-course:active {
    transform: translateY(0);
}



.course-search-container .row {
    row-gap: 20px;
}

.box-course-search-result{
    padding-top: 20px;
}
.box-course-search-result h3{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.box-course-search-result span{
    font-size: 13px;
    color: #066273;
}



.course-card-ui {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 15px;
    overflow: hidden;
    border: 1px solid #e8e8ef;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 10px 35px rgba(32, 25, 85, 0.06);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}



.course-card-ui::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    right: -80px;
    border-radius: 50%;
    background: #f0edff;
    transition: transform 0.4s ease;
}


.course-card-ui:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 50px rgba(32, 25, 85, 0.12);
}


.course-card-ui:hover::before {
    transform: scale(1.3);
}


.course-card-ui__header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}



.course-card-ui__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
  background: linear-gradient(135deg, #156f9c , #0c3d56 );
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    box-shadow:
        0 8px 20px rgba(56, 34, 212, 0.2);
}



.course-card-ui__apply {
    position: relative;
    z-index: 3;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    background: #10c765;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}


.course-card-ui__apply:hover {
    background: #08a952;
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(16, 199, 101, 0.25);
}


.course-card-ui__university {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
    color: #156f9c;
    font-size: 14px;
    font-weight: 500;
}



.course-card-ui__title {
    position: relative;
    z-index: 2;
    min-height: 38px;
    margin: 0;
    color: #1d1b2c;
    font-size: 18px;
    font-weight:600;
    line-height: 1.35;
}



.course-card-ui__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}


.course-card-ui__tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 50px;
    background: #f4f3f8;
    color: #5e5a6e;
    font-size: 12px;
    font-weight: 600;
}


.course-card-ui__tag--country {
    background: #fff2a8;
    color: #705900;
}


.course-card-ui__details {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 15px;
    margin-top: 15px;
    padding: 20px 0;
    padding-bottom: 0;
    border-top: 1px solid #eeeeF3;
}


.course-card-ui__detail {
    display: flex;
    flex-direction: column;
    padding-right: 12px;
    border-right: 1px solid #eeeeF3;
}


.course-card-ui__detail--fee {
    padding-left: 5px;
    border-right: none;
}


.course-card-ui__label {
    margin-bottom: 6px;
    color: #9996a7;
    font-size: 12px;
    font-weight: 600;
}


.course-card-ui__detail strong {
    color: #242136;
    font-size: 18px;
    font-weight: 600;
}


.course-card-ui__detail small {
    margin-top: 4px;
    color: #9996a7;
    font-size: 11px;
    line-height: 1.4;
}


.course-card-ui__detail--fee strong {
    color: #000;
    font-size: 18px;
}


.course-card-ui__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}


.course-card-ui__view {
    color: #5d596b;
    font-size: 13px;
    font-weight: 600;
}



.course-card-ui__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #f0edff;
    color: #3822d4;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}


.course-card-ui__arrow:hover {
    background: #3822d4;
    color: #ffffff;
    transform: rotate(45deg);
}


.university-ui {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e7e5f0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 10px 30px rgba(45, 31, 120, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
        position: relative;
        padding-bottom: 50px;
        height: 100%;
}



.university-ui:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(45, 31, 120, 0.15);
}



.university-ui__image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}


.university-ui__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.5s ease;
}


.university-ui:hover
.university-ui__image img {
    transform: scale(1.06);
}



.university-ui__content {
    padding: 10px 15px;
}



.university-ui__title {
    margin: 0 0 5px;
    color: #071c3b;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
      display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



.university-ui__location {
    margin-bottom: 2px;
    color: #7b87a1;
    font-size: 13.5px;
    line-height: 1.6;
}



.university-ui__type {
    margin: 0;
    color: #7b87a1;
    font-size: 13.5px;
    line-height: 1.6;
}


.university-ui__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 91%;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #156f9c , #0c3d56 );
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
    position: absolute;
    bottom: 12px;
    left: 12px;
}


.university-ui__button:hover {
     background: linear-gradient(135deg, #0c3d56, #156f9c);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow:
        0 10px 25px rgba(56, 34, 212, 0.25);
}




.university-dt-right {
    position: sticky;
    top: 80px;
    width: 100%;
    align-self: flex-start;
    z-index: 10;
}


/* =========================================
   MAIN CARD
========================================= */

.university-dt-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    padding: 20px;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06),
        0 2px 8px rgba(15, 23, 42, 0.03);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}



/* Decorative Gradient */

.university-dt-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;

       background: linear-gradient(90deg, #18a0b8, #6baeba, #0a4e5a)
}


/* =========================================
   CARD HEADER
========================================= */

.university-dt-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}


.university-dt-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    color: #18a0b8;
    background: linear-gradient(
        135deg,
        #f0edff,
        #e7e2ff
    );

    font-size: 23px;
    box-shadow:
        inset 0 0 0 1px rgba(57, 33, 209, 0.08);
}


.university-dt-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.2px;
}


.university-dt-title {
    margin: 0;
    color: #07152b;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}



.university-dt-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.university-dt-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
         background: #fafaff;

    border-color: #eeeaff;
}




.university-dt-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #156f9c;
    background: #f3f1ff;
    font-size: 16px;
}




.university-dt-info-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}


.university-dt-label {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}


.university-dt-value {
    color: #172033;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}



.university-dt-website {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #156f9c;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.university-dt-website:hover {
    color: #156f9c;
    gap: 10px;
}


.university-dt-website i {
    font-size: 12px;
}



.university-dt-divider {
    height: 1px;
    margin: 22px 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            #e5e7eb,
            transparent
        );
}



.university-dt-cta {
    padding: 20px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #f7f5ff,
            #f1efff
        );
    border: 1px solid #e8e3ff;
}


.university-dt-cta-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}


.university-dt-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 9px;
    color: #ffffff;
    background: #3921d1;
    font-size: 15px;
}


.university-dt-cta h3 {
    margin: 0 0 5px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}


.university-dt-cta p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}



.university-dt-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    color: #ffffff;
   background: linear-gradient(135deg, #156f9c, #0c3d56);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow:
        0 8px 18px rgba(57, 33, 209, 0.22);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.university-dt-button:hover {
    color: #ffffff;
  background: linear-gradient(135deg, #0c3d56, #156f9c);
    transform: translateY(-2px);
    box-shadow:
        0 12px 25px rgba(57, 33, 209, 0.3);
}


.university-dt-button i {
    transition:
        transform 0.25s ease;
}


.university-dt-button:hover i {
    transform: translateX(4px);
}

.university-details-left img{
    width: 100%;
    height: 450px;
    border-radius: 20px;
    object-fit: cover;
}

.university-details-left  h2{
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 5px;
}
.university-details-left p.location{
    font-size: 14px;
}


.university-details-left > .location {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0;

    color: #667085;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

.university-details-left > .location::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #0da09e;
    font-size: 13px;
}


/* =========================================
   MAIN DIVIDER
========================================= */

.university-details-left > hr {
    margin: 25px 0;
    border: 0;
    border-top: 1px solid #e8ebef;
    opacity: 1;
}


/* =========================================
   ABOUT HEADING
========================================= */

.university-details-left > h3 {
    margin: 0 0 12px;

    color: #172033;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
}


/* =========================================
   MAIN DESCRIPTION
========================================= */

.university-details-left > p {
    margin: 0;

    color: #5f6b7a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}


/* =========================================
   CONTENT SECTIONS
========================================= */

.u-sections {
       margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #edf0f3;
}


/* =========================================
   SECTION HEADER
========================================= */

.u-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 10px;
}


.u-section-header h3 {
    margin: 0;

    color: #172033;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}


.u-section-header span {
    color: #8a94a6;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}



.u-sections h5 {
    margin: 12px 0 12px;

    color: #cd7419;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}


/* =========================================
   PROGRAM LIST
========================================= */

.u-sections ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.u-sections ul li {
    position: relative;

    margin-bottom: 10px;
    padding-left: 23px;

    color: #5f6b7a;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}


.u-sections ul li::before {
    content: "\f058";
    position: absolute;
    left: 0;
    top: 3px;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    color: #4a35d1;
    font-size: 14px;
}


/* =========================================
   SECTION PARAGRAPHS
========================================= */

.u-sections > p {
    margin: 0;

    color: #5f6b7a;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}


/* =========================================
   ACCORDION
========================================= */

.u-sections .accordion {
    margin-top: 5px;
}


.u-sections .accordion-item {
    margin-bottom: 10px;

    overflow: hidden;

    border: 1px solid #e7eaf0;
    border-radius: 10px !important;

    background: #ffffff;
}


.u-sections .accordion-button {
    padding: 17px 20px;

    color: #293348;

    background: #ffffff;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;

    box-shadow: none;
}
h2.accordion-header{
    margin: 0 !important;
}

.u-sections .accordion-button:not(.collapsed) {
    color: #18a0b8;

    background: #f8f7ff;

    box-shadow: none;
}


.u-sections .accordion-button:focus {
    box-shadow: none;
}


.u-sections .accordion-button::after {
    width: 14px;
    height: 14px;

    background-size: 14px;
}


.u-sections .accordion-body {
    padding: 0 20px 18px;

    background: #f8f7ff;
}


.u-sections .accordion-body p {
    margin: 0;

    color: #667085;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

.university-details-left{
 background-color: #fff;
 padding: 20px;
 border-radius: 10px;
 box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.program-university-dt{
    background-color: #f7f7f7;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 100%;
    position: relative;
    padding-bottom: 35px;

}
.program-university-dt p{
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    margin: 0;
    color: #000;
}

.program-university-dt a{
    color: #066273;
    font-size: 13px;
    text-decoration: underline;
    position: absolute;
    bottom: 10px;
    
}




.nav-tabs.nav-tabs-bordered {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    margin: 0 0 20px 0 !important;
    padding: 5px !important;

    background: #f5f7fa !important;

    border: 1px solid #e6eaf0 !important;
    border-bottom: 1px solid #e6eaf0 !important;

    border-radius: 12px !important;

    width: fit-content !important;
}


/* =========================================
   TAB ITEM
========================================= */

.nav-tabs.nav-tabs-bordered .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================
   TAB BUTTON
========================================= */

.nav-tabs.nav-tabs-bordered .nav-link {
    position: relative !important;

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

    min-height: 38px !important;

    margin: 0 !important;
    padding: 8px 18px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 8px !important;

    color: #667085 !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    transition: all 0.25s ease !important;
        font-family: "Poppins", sans-serif;
}


/* =========================================
   REMOVE BOOTSTRAP BORDER
========================================= */

.nav-tabs.nav-tabs-bordered .nav-link::before,
.nav-tabs.nav-tabs-bordered .nav-link::after {
    display: none !important;
}


/* =========================================
   HOVER
========================================= */

.nav-tabs.nav-tabs-bordered .nav-link:hover {
    color: #012A6B !important;

    background: #eaf1fb !important;

    border: 0 !important;
}


/* =========================================
   ACTIVE TAB
========================================= */

.nav-tabs.nav-tabs-bordered .nav-link.active {
    color: #ffffff !important;

    background: #012A6B !important;

    border: 0 !important;

    box-shadow: 0 4px 10px rgba(1, 42, 107, 0.18) !important;
}


/* =========================================
   ACTIVE HOVER
========================================= */

.nav-tabs.nav-tabs-bordered .nav-link.active:hover {
    color: #ffffff !important;

    background: #012A6B !important;
}


/* =========================================
   FOCUS
========================================= */

.nav-tabs.nav-tabs-bordered .nav-link:focus {
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.10) !important;
}


/* =========================================
   FIRST TAB
========================================= */

.nav-tabs.nav-tabs-bordered .nav-item:first-child .nav-link {
    margin-left: 0 !important;
}




.profile-container {
    position: relative !important;

    width: 100% !important;

    padding: 24px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(248, 251, 255, 0.98) 100%
        ) !important;

    border: 1px solid #e7edf5 !important;

    border-radius: 18px !important;

    box-shadow:
        0 8px 25px rgba(1, 42, 107, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.10) !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    overflow: hidden !important;

    isolation: isolate !important;

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease !important;
}


/* =========================================================
   TOP BRAND ACCENT
========================================================= */

/*.profile-container::before {*/
/*    content: "" !important;*/

/*    position: absolute !important;*/

/*    top: 0 !important;*/
/*    left: 0 !important;*/

/*    width: 100% !important;*/
/*    height: 4px !important;*/

/*    background: linear-gradient(*/
/*        90deg,*/
/*        #012A6B 0%,*/
/*        #1769d2 50%,*/
/*        #5b8fd8 100%*/
/*    ) !important;*/

/*    z-index: 2 !important;*/
/*}*/


/* =========================================================
   LARGE DECORATIVE CIRCLE
========================================================= */

.profile-container::after {
    content: "" !important;

    position: absolute !important;

    width: 190px !important;
    height: 190px !important;

    top: -105px !important;
    right: -65px !important;

    border-radius: 50% !important;

    background: rgba(1, 42, 107, 0.035) !important;

    border: 1px solid rgba(1, 42, 107, 0.045) !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* =========================================================
   INNER CONTENT
========================================================= */

.profile-container > * {
    position: relative !important;
    z-index: 3 !important;
}


/* =========================================================
   HOVER
========================================================= */

.profile-container:hover {
    border-color: #dce6f3 !important;

    box-shadow:
        0 14px 35px rgba(1, 42, 107, 0.09),
        0 2px 6px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   OPTIONAL DECORATIVE BACKGROUND
   Add class: profile-container-shape
   to any inner empty div if required
========================================================= */

.profile-container-shape {
    position: absolute !important;

    width: 90px !important;
    height: 90px !important;

    right: 35px !important;
    bottom: -50px !important;

    border-radius: 24px !important;

    background: rgba(23, 105, 210, 0.025) !important;

    border: 1px solid rgba(23, 105, 210, 0.05) !important;

    transform: rotate(35deg) !important;

    pointer-events: none !important;
}



.o-f-inp label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Common input styling */
.o-f-inp input,
.o-f-inp select,
.o-f-inp textarea {
    width: 100% !important;
    border: 1px solid #d0d5dd !important;
    background: #ffffff !important;
    color: #1d2939 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 13px !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    transition: all 0.22s ease !important;
}

/* Input */
.o-f-inp input {
    height: 45px !important;
    padding: 0 13px !important;
}

/* Select */
.o-f-inp select {
    height: 45px !important;
    padding: 0 38px 0 13px !important;
    cursor: pointer !important;
}

/* Textarea */
.o-f-inp textarea {
    min-height: 120px !important;
    height: 150px !important;
    padding: 11px 13px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
}

/* Select options */
.o-f-inp select option {
    color: #1d2939 !important;
    background: #ffffff !important;
    font-size: 13px !important;
}

/* Placeholder */
.o-f-inp input::placeholder,
.o-f-inp textarea::placeholder {
    color: #98a2b3 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Hover */
.o-f-inp input:hover,
.o-f-inp select:hover,
.o-f-inp textarea:hover {
    border-color: #98a2b3 !important;
    box-shadow: 0 2px 5px rgba(16, 24, 40, 0.05) !important;
}

/* Focus */
.o-f-inp input:focus,
.o-f-inp select:focus,
.o-f-inp textarea:focus {
    border-color: #012A6B !important;
    background: #ffffff !important;
    color: #1d2939 !important;
    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.10) !important;
}

/* Focus label */
.o-f-inp:focus-within label {
    color: #012A6B !important;
}

/* Disabled */
.o-f-inp input:disabled,
.o-f-inp select:disabled,
.o-f-inp textarea:disabled {
    background: #f5f7fa !important;
    color: #98a2b3 !important;
    border-color: #e4e7ec !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Readonly */
.o-f-inp input[readonly],
.o-f-inp textarea[readonly] {
    background: #f8fafc !important;
    cursor: default !important;
}

/* Invalid / Error */
.o-f-inp input.is-invalid,
.o-f-inp select.is-invalid,
.o-f-inp textarea.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08) !important;
}

/* Valid */
.o-f-inp input.is-valid,
.o-f-inp select.is-valid,
.o-f-inp textarea.is-valid {
    border-color: #198754 !important;
}


profile-basic-view-latest {
    position: relative !important;
    width: 100% !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e7ebf0 !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(1, 42, 107, 0.055) !important;
    overflow: hidden !important;
}

/* Top brand line */
.profile-basic-view-latest::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(
        90deg,
        #012A6B,
        #1769d2,
        #5b8fd8
    ) !important;
}

/* Row */
.profile-basic-view-latest .o-f-inp {
    margin-bottom: 0 !important;
    align-items: center !important;
}


/* =========================================
   IMAGE SECTION
========================================= */

.profile-basic-view-latest .col-lg-2 {
    position: relative !important;
}

.profile-basic-view-latest .col-lg-2 > label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #344054 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Image wrapper */
.profile-img-left,
.profile-img-left-latest {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 10px !important;
    min-height: 145px !important;
    background: #f8fafc !important;
    border: 1px solid #e7ebf0 !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
}

/* Hover image box */
.profile-img-left:hover,
.profile-img-left-latest:hover {
    background: #f5f8fc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 5px 15px rgba(1, 42, 107, 0.06) !important;
}

/* Profile image */
.profile-img-left img,
.profile-img-left-latest img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    outline: 2px solid #dbe5f2 !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(1, 42, 107, 0.12) !important;
}

/* Upload / delete buttons wrapper */
.profile-img-left > div,
.profile-img-left-latest > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Upload + delete buttons */
.profile-img-left .btn,
.profile-img-left-latest .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 0 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

/* Upload */
.profile-img-left .btn-primary,
.profile-img-left-latest .btn-primary {
    background: #012A6B !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(1, 42, 107, 0.16) !important;
}

.profile-img-left .btn-primary:hover,
.profile-img-left-latest .btn-primary:hover {
    background: #011f50 !important;
    transform: translateY(-1px) !important;
}

/* Delete */
.profile-img-left .btn-danger,
.profile-img-left-latest .btn-danger {
    background: #fff1f2 !important;
    color: #dc3545 !important;
    border: 1px solid #fecdd3 !important;
}

.profile-img-left .btn-danger:hover,
.profile-img-left-latest .btn-danger:hover {
    background: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
    transform: translateY(-1px) !important;
}


/* =========================================
   PROFILE PREVIEW
========================================= */

.profile-preview-latest-latest {
    position: relative !important;
    min-height: 145px !important;
    height: 100% !important;
    padding: 20px 22px !important;
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(
        135deg,
        #f8fbff 0%,
        #ffffff 65%
    ) !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}


/* List */
.profile-preview-latest-latest ul {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* List item */
.profile-preview-latest-latest li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #edf0f4 !important;
}

/* Remove last border */
.profile-preview-latest-latest li:last-child {
    border-bottom: 0 !important;
}

/* Values */
.profile-preview-latest-latest li span {
    color: #1d2939 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    word-break: break-word !important;
}

/* First value highlight */
.profile-preview-latest-latest li:first-child span {
    color: #012A6B !important;
}


/* =========================================
   ERROR MESSAGE
========================================= */

.profile-basic-view-latest .text-danger {
    font-size: 10px !important;
    font-weight: 500 !important;
}


.filter-index {
    position: relative !important;
    width: 100% !important;
    padding: 18px 20px 6px !important;
    margin-bottom: 18px !important;

    background: #ffffff !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 14px !important;

    box-shadow:
        0 5px 18px rgba(1, 42, 107, 0.055),
        0 1px 3px rgba(16, 24, 40, 0.03) !important;

    overflow: hidden !important;
}

/* =========================================
   INPUTS + SELECT
========================================= */

.filter-index .o-f-inp input,
.filter-index .o-f-inp select {
    width: 100% !important;
    height: 43px !important;

    padding: 8px 12px !important;

    background: #ffffff !important;
    color: #1d2939 !important;

    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    outline: none !important;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important;

    transition: all 0.22s ease !important;
}

/* Placeholder */
.filter-index .o-f-inp input::placeholder {
    color: #98a2b3 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Hover */
.filter-index .o-f-inp input:hover,
.filter-index .o-f-inp select:hover {
    border-color: #98a2b3 !important;

    box-shadow:
        0 2px 5px rgba(16, 24, 40, 0.05) !important;
}

/* Focus */
.filter-index .o-f-inp input:focus,
.filter-index .o-f-inp select:focus {
    border-color: #012A6B !important;
    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.09),
        0 2px 5px rgba(1, 42, 107, 0.05) !important;
}

/* Label focus */
.filter-index .o-f-inp:focus-within label {
    color: #012A6B !important;
}


/* =========================================
   SELECT
========================================= */

.filter-index .o-f-inp select {
    cursor: pointer !important;
    padding-right: 34px !important;
}

.filter-index .o-f-inp select option {
    background: #ffffff !important;
    color: #1d2939 !important;
    font-size: 12px !important;
}


/* =========================================
   RESET FILTER BUTTON
========================================= */

.filter-index .filter-reset {
    width: 100% !important;
    height: 43px !important;

    padding: 8px 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #FFF1F1 !important;
    color: #D63F4C !important;

    border: 1px solid #F7D8DB !important;
    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
    white-space: nowrap !important;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;

    transition: all 0.22s ease !important;
}

/* Reset hover */
.filter-index .filter-reset:hover {
    background: #D63F4C !important;
    color: #ffffff !important;

    border-color: #D63F4C !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 12px rgba(1, 42, 107, 0.18) !important;
}
.filter-index .filter-sc {
    width: 110px !important;
    height: 43px !important;

    padding: 8px 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #2d509d !important;
    color: #fff !important;

    border: 1px solid #2d509d !important;
    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    cursor: pointer !important;
    white-space: nowrap !important;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;

    transition: all 0.22s ease !important;
}

/* Reset hover */
.filter-index .filter-sc:hover {
    background: #2d509d !important;
    color: #ffffff !important;

    border-color: #2d509d !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 5px 12px rgba(1, 42, 107, 0.18) !important;
}

/* Reset click */
.filter-index .filter-reset:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Reset focus */
.filter-index .filter-reset:focus,
.filter-index .filter-reset:focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.10) !important;
}


/* =========================================
   SELECT2 SUPPORT
========================================= */

.filter-index .select2-container {
    width: 100% !important;
}

.filter-index .select2-container .select2-selection--single {
    height: 43px !important;

    display: flex !important;
    align-items: center !important;

    background: #ffffff !important;

    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;

    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important;

    transition: all 0.22s ease !important;
}

.filter-index
.select2-container
.select2-selection--single
.select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 32px !important;

    color: #1d2939 !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    line-height: 41px !important;
}

.filter-index
.select2-container
.select2-selection--single
.select2-selection__placeholder {
    color: #98a2b3 !important;
}

.filter-index
.select2-container
.select2-selection--single
.select2-selection__arrow {
    height: 41px !important;
    right: 7px !important;
}

.filter-index .select2-container--focus .select2-selection--single,
.filter-index .select2-container--open .select2-selection--single {
    border-color: #012A6B !important;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.09) !important;
}




.page-btns {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom:10px;
}

/* Common button style */
.page-btns .add-btn,
.page-btns .exp-btn {
    position: relative !important;

    min-height: 40px !important;
    padding: 8px 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 8px !important;

    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    transition:
        all 0.22s ease !important;
}

/* =========================================
   REGISTER NEW STUDENT
========================================= */

.page-btns .add-btn {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #012A6B 0%,
        #1769d2 100%
    ) !important;

    border: 1px solid #012A6B !important;

    box-shadow:
        0 4px 10px rgba(1, 42, 107, 0.16) !important;
}

/* Add button hover */
.page-btns .add-btn:hover {
    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        #011f50 0%,
        #0f5bbd 100%
    ) !important;

    border-color: #011f50 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 7px 16px rgba(1, 42, 107, 0.22) !important;
}

/* =========================================
   EXPORT BUTTON
========================================= */

.page-btns .exp-btn {
    color: #344054 !important;

    background: #ffffff !important;

    border: 1px solid #d0d5dd !important;

    box-shadow:
        0 2px 5px rgba(16, 24, 40, 0.05) !important;
}

/* Export hover */
.page-btns .exp-btn:hover {
    color: #012A6B !important;

    background: #f5f8fd !important;

    border-color: #012A6B !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 5px 12px rgba(1, 42, 107, 0.10) !important;
}

/* =========================================
   ACTIVE / CLICK
========================================= */

.page-btns .add-btn:active,
.page-btns .exp-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* =========================================
   FOCUS
========================================= */

.page-btns .add-btn:focus,
.page-btns .add-btn:focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.12),
        0 4px 10px rgba(1, 42, 107, 0.16) !important;
}

.page-btns .exp-btn:focus,
.page-btns .exp-btn:focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.08) !important;
}



.g-settings-left-cs {
    width: 100%;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(16, 24, 40, 0.05);
    position:sticky;
    top:60px;
}

.g-settings-left-cs ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.g-settings-left-cs ul li {
    margin: 0;
    padding: 0;
}

.g-settings-left-cs ul li a {
    position: relative;
    min-height: 46px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 11px;

    color: #475467;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;

    transition: all 0.22s ease;
}

/* Icon */
.g-settings-left-cs .settings-nav-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;

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

    background: #f3f6fa;
    border: 1px solid #e7ebf0;
    border-radius: 8px;

    color: #667085;
    font-size: 13px;

    transition: all 0.22s ease;
}

.g-settings-left-cs .settings-nav-text {
    flex: 1;
}

/* Arrow */
.g-settings-left-cs ul li a::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    color: #98a2b3;
    font-size: 8px;

    transition: all 0.22s ease;
}

/* Hover */
.g-settings-left-cs ul li a:hover {
    color: #012A6B;
    background: #f6f9fd;
    border-color: #e3eaf3;
    transform: translateX(2px);
}

.g-settings-left-cs ul li a:hover .settings-nav-icon {
    color: #012A6B;
    background: #eaf1fb;
    border-color: #d5e2f3;
}

.g-settings-left-cs ul li a:hover::after {
    color: #012A6B;
    transform: translateX(2px);
}

/* Active */
.g-settings-left-cs ul li a.active {
    color: #012A6B;
    background: #eef4fc;
    border-color: #d9e6f6;
    box-shadow: 0 3px 8px rgba(1, 42, 107, 0.06);
}

.g-settings-left-cs ul li a.active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 3px;

    background: #012A6B;
    border-radius: 0 4px 4px 0;
}

.g-settings-left-cs ul li a.active .settings-nav-icon {
    color: #ffffff;
    background: #012A6B;
    border-color: #012A6B;
    box-shadow: 0 3px 7px rgba(1, 42, 107, 0.16);
}

.g-settings-left-cs ul li a.active::after {
    color: #012A6B;
}

/* Focus */
.g-settings-left-cs ul li a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.10);
}




.g-settings-right-cs {
    position: relative;
    width: 100%;
    padding: 22px 22px 20px;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(16, 24, 40, 0.05);
    overflow: hidden;
}

/* Top accent */
.g-settings-right-cs::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #012A6B, #1769d2);
}

/* Heading */
.g-settings-right-cs h3 {
    margin: 0 0 4px;
    color: #012A6B;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.g-settings-right-cs > p {
    margin: 0 0 20px;
    color: #667085;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

/* Form */
.g-settings-right-cs .settings-form {
    width: 100%;
}

.g-settings-right-cs .settings-form .row {
    margin-top: 0;
}

/* Form groups */
.g-settings-right-cs .o-f-inp {
    margin-bottom: 16px !important;
}

.g-settings-right-cs .o-f-inp label {
    display: block;
    margin-bottom: 6px !important;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.g-settings-right-cs .o-f-inp label .text-danger {
    color: #dc3545 !important;
}

/* Inputs */
.g-settings-right-cs .o-f-inp input:not([type="file"]),
.g-settings-right-cs .o-f-inp select,
.g-settings-right-cs .o-f-inp textarea {
    width: 100%;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    color: #1d2939;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    outline: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: all 0.2s ease;
}

/* Text input */
.g-settings-right-cs .o-f-inp input:not([type="file"]) {
    height: 43px;
    padding: 0 12px;
}

/* Select */
.g-settings-right-cs .o-f-inp select {
    height: 43px;
    padding: 0 35px 0 12px;
    cursor: pointer;
}

.g-settings-right-cs .o-f-inp select option {
    color: #1d2939;
    background: #ffffff;
}

/* Textarea */
.g-settings-right-cs .o-f-inp textarea {
    min-height: 110px;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.5;
}

/* Placeholder */
.g-settings-right-cs .o-f-inp input::placeholder,
.g-settings-right-cs .o-f-inp textarea::placeholder {
    color: #98a2b3;
    font-weight: 400;
    opacity: 1;
}

/* Hover */
.g-settings-right-cs .o-f-inp input:hover,
.g-settings-right-cs .o-f-inp select:hover,
.g-settings-right-cs .o-f-inp textarea:hover {
    border-color: #98a2b3;
}

/* Focus */
.g-settings-right-cs .o-f-inp input:focus,
.g-settings-right-cs .o-f-inp select:focus,
.g-settings-right-cs .o-f-inp textarea:focus {
    border-color: #012A6B;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.08);
}

.g-settings-right-cs .o-f-inp:focus-within label {
    color: #012A6B;
}

/* Read-only */
.g-settings-right-cs .settings-form.read-only input,
.g-settings-right-cs .settings-form.read-only select,
.g-settings-right-cs .settings-form.read-only textarea {
    background: #f8fafc;
}

.g-settings-right-cs .settings-form.read-only input:disabled,
.g-settings-right-cs .settings-form.read-only select:disabled,
.g-settings-right-cs .settings-form.read-only textarea:disabled {
    cursor: not-allowed;
}

/* Validation */
.g-settings-right-cs .text-danger {
    display: block;
    margin-top: 5px;
    color: #dc3545 !important;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================
   FILE INPUTS
========================================= */

.g-settings-right-cs .file-input {
    position: relative;
}

.g-settings-right-cs .file-input input[type="file"] {
    width: 100%;
    height: 43px;
    padding: 8px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #667085;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.g-settings-right-cs .file-input input[type="file"]:hover {
    border-color: #012A6B;
    background: #f5f8fd;
}

.g-settings-right-cs .file-input input[type="file"]:focus {
    outline: none;
    border-color: #012A6B;
    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.08);
}

/* Logo / favicon preview */
.g-settings-right-cs .file-input img {
    display: block;
    width: auto;
    max-width: 130px;
    height: 65px;
    margin-top: 9px;
    padding: 7px;
    object-fit: contain !important;

    background: #f8fafc;
    border: 1px solid #e4e7ec;
    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(16, 24, 40, 0.04);
}


/* =========================================
   SAVE BUTTON
========================================= */

.g-settings-right-cs .submit-btn {
    min-width: 95px;
    height: 40px;
    padding: 8px 18px;

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

    background: #012A6B;
    border: 1px solid #012A6B;
    border-radius: 8px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(1, 42, 107, 0.14);

    transition: all 0.2s ease;
}

.g-settings-right-cs .submit-btn:hover {
    background: #011f50;
    border-color: #011f50;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 7px 15px rgba(1, 42, 107, 0.18);
}

.g-settings-right-cs .submit-btn:active {
    transform: translateY(0) scale(0.98);
}


/* =========================================
   FINANCIAL YEAR TABLE
========================================= */

.g-settings-right-cs .table-container {
    width: 100%;
}

.g-settings-right-cs .table-over {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5eaf1;
    border-radius: 11px;
    background: #ffffff;
}

.g-settings-right-cs .tble-cstm {
    width: 100%;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

.g-settings-right-cs .tble-cstm thead th {
    padding: 11px 10px;
    background: #f5f8fc;
    color: #475467;
    border-bottom: 1px solid #e4e7ec;
    border-right: 1px solid #edf0f4;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.g-settings-right-cs .tble-cstm thead th:last-child {
    border-right: 0;
}

.g-settings-right-cs .tble-cstm tbody td {
    padding: 11px 10px !important;
    background: #ffffff;
    color: #475467 !important;
    border-bottom: 1px solid #eef1f4;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.g-settings-right-cs .tble-cstm tbody tr:last-child td {
    border-bottom: 0;
}

.g-settings-right-cs .tble-cstm tbody tr:hover td {
    background: #f8fafd;
}


/* =========================================
   STATUS BADGES
========================================= */

.g-settings-right-cs .status-green,
.g-settings-right-cs .status-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 58px;
    min-height: 24px;
    padding: 4px 9px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.g-settings-right-cs .status-green {
    color: #087443;
    background: #ecfdf3;
    border: 1px solid #b7ebcd;
}

.g-settings-right-cs .status-red {
    color: #b42318;
    background: #fef3f2;
    border: 1px solid #f5c2c0;
}


/* Financial year Open / Close */
.g-settings-right-cs .btn-width-s {
    min-width: 55px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.g-settings-right-cs .reset-btn {
    min-width: 55px;
    min-height: 28px;
    padding: 5px 10px;

    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;

    color: #b54708;
    font-size: 10px;
    font-weight: 600;

    transition: all 0.2s ease;
}

.g-settings-right-cs .reset-btn:hover {
    background: #f97316;
    border-color: #f97316;
    color: #ffffff;
}


/* =========================================
   BILLER PROFILE FILTERS
========================================= */

.g-settings-right-cs .select2-filter {
    width: 100%;
}

.g-settings-right-cs .add-btn.form-btn {
    min-height: 40px;
    padding: 8px 16px;

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

    background: #012A6B;
    border: 1px solid #012A6B;
    border-radius: 8px;

    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;

    box-shadow: 0 4px 9px rgba(1, 42, 107, 0.12);

    transition: all 0.2s ease;
}

.g-settings-right-cs .add-btn.form-btn:hover {
    background: #011f50;
    border-color: #011f50;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================
   SELECT2
========================================= */

.g-settings-right-cs .select2-container {
    width: 100% !important;
}

.g-settings-right-cs .select2-container .select2-selection--single {
    height: 43px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
}

.g-settings-right-cs .select2-container .select2-selection--single
.select2-selection__rendered {
    height: 41px;
    padding-left: 12px;
    display: flex;
    align-items: center;

    color: #1d2939;
    font-size: 12px;
    font-weight: 500;
}

.g-settings-right-cs .select2-container
.select2-selection--single
.select2-selection__arrow {
    height: 41px;
    right: 8px;
}

.g-settings-right-cs .select2-container--focus
.select2-selection--single,
.g-settings-right-cs .select2-container--open
.select2-selection--single {
    border-color: #012A6B;
    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.08);
}


/* =========================================
   SEO MULTI SELECT
========================================= */

.g-settings-right-cs #meta_keywords + .select2-container {
    width: 100% !important;
}

.g-settings-right-cs #meta_keywords + .select2-container
.select2-selection--multiple {
    min-height: 43px;
    padding: 4px 7px;

    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
}

.g-settings-right-cs #meta_keywords + .select2-container
.select2-selection--multiple:focus-within {
    border-color: #012A6B;
    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.08);
}

.g-settings-right-cs #meta_keywords + .select2-container
.select2-selection__choice {
    margin: 3px 4px 3px 0;
    padding: 4px 7px;

    background: #eef4fc;
    border: 1px solid #d8e5f5;
    border-radius: 5px;

    color: #012A6B;
    font-size: 10px;
    font-weight: 600;
}


/* =========================================
   EMPTY TABLE
========================================= */

.g-settings-right-cs .tble-cstm tbody td[colspan] {
    padding: 25px 15px !important;
    color: #98a2b3 !important;
    font-size: 11px;
}



.course-search-container-filter {
    position: relative;
    width: 100%;
    padding: 20px 22px 16px;

    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 14px;

    box-shadow: 0 5px 18px rgba(16, 24, 40, 0.05);

    overflow: hidden;
}

/* Row */
.course-search-container-filter .row {
    align-items: flex-end;
}

/* Form group */
.course-search-container-filter .col-lg-4 {
    margin-bottom: 14px;
}

/* Labels */
.course-search-container-filter label {
    display: block;
    margin-bottom: 6px;

    color: #344054;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* Inputs & Select */
.course-search-container-filter select,
.course-search-container-filter input.from-control,
.course-search-container-filter input.form-control {
    width: 100%;
    height: 43px;

    padding: 0 12px;

    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;

    color: #1d2939;
    font-size: 14px;
    font-weight: 400;

    outline: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);

    transition: all 0.2s ease;
}

/* Select */
.course-search-container-filter select {
    padding-right: 35px;
    cursor: pointer;
}

.course-search-container-filter select option {
    color: #1d2939;
    background: #ffffff;
}

/* Input placeholder */
.course-search-container-filter input::placeholder {
    color: #98a2b3;
    font-weight: 400;
}

/* Hover */
.course-search-container-filter select:hover,
.course-search-container-filter input.from-control:hover,
.course-search-container-filter input.form-control:hover {
    border-color: #98a2b3;
}

/* Focus */
.course-search-container-filter select:focus,
.course-search-container-filter input.from-control:focus,
.course-search-container-filter input.form-control:focus {
    border-color: #012A6B;
    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.08);
}

/* Search button wrapper */
.course-search-container-filter .col-lg-12 {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

/* Search button */
.course-search-container-filter .button-find-course {
    min-width: 125px;
    height: 40px;

    padding: 8px 18px;

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

    background: #012A6B;
    border: 1px solid #012A6B;
    border-radius: 8px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    text-decoration: none;

    box-shadow: 0 4px 10px rgba(1, 42, 107, 0.14);

    transition: all 0.22s ease;
}

.course-search-container-filter .button-find-course:hover {
    background: #011f50;
    border-color: #011f50;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(1, 42, 107, 0.18);
}

.course-search-container-filter .button-find-course:active {
    transform: translateY(0) scale(0.98);
}

.course-search-container-filter .button-find-course:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.10),
        0 4px 10px rgba(1, 42, 107, 0.14);
}



.course-card-ui-latest {
    position: relative;
    width: 100%;
    min-height: 210px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5eaf1;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(16, 24, 40, 0.055);
    overflow: hidden;
    transition: all 0.25s ease;
}

/* Top blue accent */
/*.course-card-ui-latest::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 3px;*/
/*    background: linear-gradient(*/
/*        90deg,*/
/*        #012A6B,*/
/*        #1769d2*/
/*    );*/
/*}*/

/* Soft decorative shape */
.course-card-ui-latest::after {
    content: "";
    position: absolute;
    width: 105px;
    height: 105px;
    right: -48px;
    bottom: -52px;
    border-radius: 50%;
    background: #eef4fc;
    pointer-events: none;
    transition: all 0.3s ease;
}

.course-card-ui-latest:hover {
    border-color: #d5e0ef;
    transform: translateY(-3px);
    box-shadow:
        0 10px 25px rgba(1, 42, 107, 0.09);
}

.course-card-ui-latest:hover::after {
    width: 125px;
    height: 125px;
    right: -55px;
    bottom: -60px;
}

/* Top */
.course-card-ui__top-latest {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 13px;
}

.course-card-ui__type-latest {
    display: inline-flex;
    align-items: center;

    min-height: 25px;
    padding: 4px 9px;

    background: #f1f5fa;
    border: 1px solid #e3e9f1;
    border-radius: 6px;

    color: #667085;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

/* Actions */
.course-card-ui__actions-latest {
    display: flex;
    align-items: center;
    gap: 6px;
}

.course-card-ui__view-latest {
   min-width: 58px;
    height: 29px;
    padding: 5px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #198722;
    border: 1px solid #d7e4f4;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.course-card-ui__view-latest:hover {
    background: #012A6B;
    border-color: #012A6B;
    color: #ffffff;
}

.course-card-ui__share-latest {
       width: 29px;
    height: 29px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #de2032;
    border: 1px solid #e0e5eb;
    border-radius: 7px;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.course-card-ui__share-latest:hover {
    background: #f0f6ff;
    border-color: #c9dbf2;
    color: #012A6B;
    transform: translateY(-1px);
}

/* Title */
.course-card-ui__title-latest {
    position: relative;
    z-index: 2;

    margin: 0 0 13px;

    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    min-height: 43px;
}

/* Tags */
.course-card-ui__tags-latest {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 16px;
}

.course-card-ui__tag-latest {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    max-width: 100%;
    min-height: 27px;
    padding: 5px 8px;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-card-ui__tag-latest i {
    font-size: 9px;
}

.degree-tag {
    color: #345b8c;
    background: #eef5ff;
    border: 1px solid #dce9f8;
}

.field-tag {
    color: #53705f;
    background: #eef9f2;
    border: 1px solid #dcefe3;
}

/* Bottom */
.course-card-ui__bottom-latest {
    position: relative;
    z-index: 2;

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

    padding-top: 12px;

    border-top: 1px solid #edf0f4;
}

.course-card-ui__duration-latest {
    display: flex;
    align-items: center;
    gap: 9px;
}

.course-card-ui__duration-icon-latest {
    width: 35px;
    height: 35px;

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

    background: #f5f8fc;
    border: 1px solid #e3e9f1;
    border-radius: 8px;

    color: #012A6B;
    font-size: 11px;
}

.course-card-ui__label-latest {
    display: block;
    margin-bottom: 2px;

    color: #98a2b3;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.course-card-ui__duration-latest strong {
    display: block;

    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.course-card-ui__arrow-latest {
    position: relative;
    z-index: 3;

    width: 35px;
    height: 35px;

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

    background: #f8fafc;
    border: 1px solid #e2e7ed;
    border-radius: 50%;

    color: #667085;
    font-size: 9px;

    transition: all 0.2s ease;
}

.course-card-ui-latest:hover .course-card-ui__arrow-latest {
    background: #012A6B;
    border-color: #012A6B;
    color: #ffffff;
    transform: translateX(3px);
}








.pop-program {
    position: relative;
    width: 100%;
    padding: 4px;
    color: #344054;
}

/* =========================================
   PROGRAM HEADER
========================================= */

.program-detail-header {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 20px;
    margin-bottom: 16px;

    background: linear-gradient(
        135deg,
        #f7faff 0%,
        #ffffff 65%
    );

    border: 1px solid #e1e8f1;
    border-radius: 14px;

    box-shadow: 0 5px 18px rgba(16, 24, 40, 0.05);

    overflow: hidden;
}

.program-detail-header::after {
    content: "";

    position: absolute;
    width: 150px;
    height: 150px;

    right: -65px;
    top: -75px;

    border-radius: 50%;

    background: #eaf2fc;

    pointer-events: none;
}

.program-header-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 13px;
}

.program-header-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    background: #eaf2fc;
    border: 1px solid #d7e5f5;
    border-radius: 11px;

    color: #012A6B;
    font-size: 19px;
}

.program-header-label {
    display: block;

    margin-bottom: 3px;

    color: #98a2b3;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .7px;
}

.program-header-text h2 {
    margin: 0 0 5px;

    color: #1d2939;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
}

.program-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #667085;
    font-size: 10px;
    font-weight: 500;
}

.program-code i {
    color: #012A6B;
    font-size: 9px;
}

/* =========================================
   TOP BUTTONS
========================================= */

.pop-top-btns {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 7px;
}

.proceed-btn,
.intrest-btn {
    min-height: 37px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 8px 14px;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
    transition: all .22s ease;
}

.proceed-btn {
    background: #012A6B;
    border: 1px solid #012A6B;
    color: #fff;

    box-shadow: 0 4px 10px rgba(1, 42, 107, .14);
}

.proceed-btn:hover {
    background: #011f50;
    border-color: #011f50;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 7px 15px rgba(1, 42, 107, .18);
}

.intrest-btn {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #b54708;
}

.intrest-btn:hover {
    background: #fff0df;
    border-color: #fdba74;
    color: #9a3412;
    transform: translateY(-2px);
}

/* =========================================
   OVERVIEW CARD
========================================= */

.program-overview-card,
.program-content-card,
.program-remarks-card,
.university-program-card {
    position: relative;

    width: 100%;

    padding: 18px;

    background: #fff;

    border: 1px solid #e5eaf1;
    border-radius: 13px;

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    overflow: hidden;
}

/*.program-overview-card::before,*/
/*.program-content-card::before,*/
/*.program-remarks-card::before,*/
/*.university-program-card::before {*/
/*    content: "";*/

/*    position: absolute;*/

/*    top: 0;*/
/*    left: 0;*/

/*    width: 100%;*/
/*    height: 2px;*/

/*    background: #e5eaf1;*/
/*}*/

/* =========================================
   SECTION HEADING
========================================= */

.section-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 16px;
}

.section-heading-icon {
    width: 32px;
    height: 32px;

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

    background: #eef4fc;
    border: 1px solid #dbe7f5;
    border-radius: 8px;

    color: #012A6B;
    font-size: 12px;
}

.section-heading span {
    display: block;

    color: #98a2b3;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .7px;
}

.section-heading h4 {
    margin: 1px 0 0;

    color: #1d2939;
    font-size: 14px;
    font-weight: 600;
}

/* =========================================
   PROGRAM INFO GRID
========================================= */

.program-info-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 9px;
}

.program-info-item {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px;

    background: #f9fafb;

    border: 1px solid #edf0f4;
    border-radius: 9px;

    transition: all .2s ease;
}

.program-info-item:hover {
    background: #f5f8fc;
    border-color: #dce5ef;
}

.info-icon {
    width: 29px;
    height: 29px;

    min-width: 29px;

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

    border-radius: 7px;

    font-size: 10px;
}

.info-icon.blue {
    color: #2563eb;
    background: #eff6ff;
}

.info-icon.purple {
    color: #7c3aed;
    background: #f5f3ff;
}

.info-icon.green {
    color: #087443;
    background: #ecfdf3;
}

.info-icon.orange {
    color: #c2410c;
    background: #fff7ed;
}

.info-icon.teal {
    color: #0f766e;
    background: #f0fdfa;
}

.info-icon.indigo {
    color: #4338ca;
    background: #eef2ff;
}

.info-icon.pink {
    color: #be185d;
    background: #fdf2f8;
}

.info-icon.red {
    color: #dc2626;
    background: #fef2f2;
}

.info-icon.slate {
    color: #475569;
    background: #f1f5f9;
}

.info-icon.cyan {
    color: #0369a1;
    background: #ecfeff;
}

.program-info-item small {
    display: block;

    margin-bottom: 3px;

    color: #98a2b3;
    font-size: 11px;
    font-weight: 500;
}

.program-info-item strong {
    display: block;

    overflow: hidden;

    color: #344054;
    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.deadline-expired {
    color: #dc3545 !important;
}

.brochure-open-btn-cs {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #012A6B;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;
}

.brochure-open-btn-cs:hover {
    color: #1769d2;
}

/* =========================================
   CONTENT CARDS
========================================= */

.program-content-card {
    min-height: 100%;
}

.content-card-heading {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 14px;
}

.content-card-heading > span {
    width: 31px;
    height: 31px;

    min-width: 31px;

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

    border-radius: 8px;

    font-size: 11px;
}

.content-card-heading h5 {
    margin: 0;

    color: #344054;
    font-size: 15px;
    font-weight: 600;
}

.content-card-heading small {
    display: block;
    margin-top: 2px;
    color: #6f7379;
    font-size: 10px;
}

.blue-heading > span {
    color: #2563eb;
    background: #eff6ff;
}

.green-heading > span {
    color: #087443;
    background: #ecfdf3;
}

.purple-heading > span {
    color: #7c3aed;
    background: #f5f3ff;
}

.orange-heading > span {
    color: #c2410c;
    background: #fff7ed;
}

.teal-heading > span {
    color: #0f766e;
    background: #f0fdfa;
}

.red-heading > span {
    color: #dc2626;
    background: #fef2f2;
}

.slate-heading > span {
    color: #475569;
    background: #f1f5f9;
}

/* =========================================
   RICH CONTENT
========================================= */

.program-rich-content {
    color: #686a70;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
}

.program-rich-content p:last-child {
    margin-bottom: 0;
}

.program-rich-content h1,
.program-rich-content h2,
.program-rich-content h3,
.program-rich-content h4,
.program-rich-content h5,
.program-rich-content h6 {
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

.program-rich-content ul,
.program-rich-content ol {
    padding-left: 18px;
}

.program-rich-content li {
    margin-bottom: 4px;
}

.empty-program-text {
    margin: 0;

    color: #98a2b3;
    font-size: 10px;
}

/* =========================================
   FEATURES
========================================= */

.program-feature-item {
    display: flex;
    gap: 10px;

    padding: 10px 0;

    border-bottom: 1px solid #eef1f4;
}

.program-feature-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.feature-number {
    width: 25px;
    height: 25px;

    min-width: 25px;

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

    background: #f5f3ff;
    border: 1px solid #e8defa;
    border-radius: 7px;

    color: #7c3aed;
    font-size: 9px;
    font-weight: 600;
}

.program-feature-item h6 {
    margin: 0 0 3px;

    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

.program-feature-item p {
      margin: 0;
    color: #57595f;
    font-size: 12px;
    line-height: 1.5;
}

/* =========================================
   CHECK LIST
========================================= */

.program-check-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.program-check-list li {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 8px 0;

    color: #575758;

    font-size: 12px;
    line-height: 1.5;

    border-bottom: 1px solid #f0f2f5;
}

.program-check-list li:last-child {
    border-bottom: 0;
}

.program-check-list li span {
    width: 20px;
    height: 20px;

    min-width: 20px;

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

    background: #ecfdf3;
    border-radius: 50%;

    color: #087443;
    font-size: 8px;
}

.exclusion-list li span {
    background: #fef2f2;
    color: #dc3545;
}

/* =========================================
   REMARKS
========================================= */

.program-remarks-card {
    padding: 17px 18px;
}

.program-remarks-card .content-card-heading {
    margin-bottom: 10px;
}

/* =========================================
   UNIVERSITY PROGRAMS
========================================= */

.university-program-card {
    padding: 18px;
}

.university-program-header {
    margin-bottom: 12px;
}

.university-program-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.university-program-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;

    padding: 12px;

    background: #fafbfc;
    border: 1px solid #e6ebf1;
    border-radius: 10px;

    cursor: pointer;

    transition: all .22s ease;
}

.university-program-item:hover {
    background: #f5f8fd;
    border-color: #cddceb;
    transform: translateY(-1px);
}

.university-radio {
    position: relative;

    width: 20px;
    height: 20px;

    min-width: 20px;
}

.university-radio input {
    position: absolute;

    width: 20px;
    height: 20px;

    opacity: 0;

    cursor: pointer;
}

.university-radio span {
    position: absolute;

    width: 18px;
    height: 18px;

    top: 1px;
    left: 1px;

    border: 1px solid #cbd5e1;
    border-radius: 50%;

    background: #fff;

    transition: all .2s ease;
}

.university-radio span::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 4px;
    left: 4px;

    border-radius: 50%;

    background: #fff;

    transform: scale(0);

    transition: transform .2s ease;
}

.university-radio input:checked + span {
    background: #012A6B;
    border-color: #012A6B;
}

.university-radio input:checked + span::after {
    transform: scale(1);
}

.university-program-main {
    flex: 1;
    min-width: 0;
}

.university-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.university-name-row h6 {
    margin: 0;

    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

.university-type {
    display: inline-flex;

    padding: 3px 7px;

    background: #eef4fc;
    border: 1px solid #dce7f5;
    border-radius: 5px;

    color: #537096;
    font-size: 8px;
    font-weight: 500;
}

.university-meta {
       margin-top: 5px;
    color: #262729;
    font-size: 13px;
}

.university-meta i {
    margin-right: 3px;
    color: #087443;
}

.university-meta strong {
    color: #344054;
    font-weight: 600;
}

.university-arrow {
    width: 28px;
    height: 28px;

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

    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: 50%;

    color: #98a2b3;
    font-size: 8px;

    transition: all .2s ease;
}

.university-program-item:hover .university-arrow {
    background: #012A6B;
    border-color: #012A6B;
    color: #fff;
}

.empty-university {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 25px;

    background: #fafbfc;
    border: 1px dashed #d9e0e8;
    border-radius: 9px;

    color: #98a2b3;
    font-size: 10px;
}

.empty-university i {
    color: #c1c9d4;
}


.tble-cstm input[type="checkbox"].toggle-btn{
    width: 40px !important;
    height: 20px !important;
}



.g-settings-top-menu {
    width: 100%;
    padding: 5px 0;
    margin-bottom:10px;
}

.g-settings-top-menu ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.g-settings-top-menu ul li {
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* =========================================
   MAIN CARD
========================================= */

.g-settings-top-menu ul li a {
    position: relative;

    width: 100%;
    min-height: 66px;
    padding: 10px 38px 10px 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;
    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 11px;

    overflow: hidden;

    box-shadow:
        0 6px 16px rgba(15, 23, 42, 0.14);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
        font-size:15px;
}

/* =========================================
   DIFFERENT DARK COLORS
========================================= */

/* Brand - Navy */
.g-settings-top-menu ul li:nth-child(1) a {
    background: linear-gradient(
        135deg,
        #012A6B 0%,
        #164b91 100%
    );
}

/* Green */
.g-settings-top-menu ul li:nth-child(2) a {
    background: linear-gradient(
        135deg,
        #075c3b 0%,
        #087f50 100%
    );
}

/* Orange */
.g-settings-top-menu ul li:nth-child(3) a {
    background: linear-gradient(
        135deg,
        #8a3f08 0%,
        #b85b0b 100%
    );
}

/* Purple */
.g-settings-top-menu ul li:nth-child(4) a {
    background: linear-gradient(
        135deg,
        #4c1d80 0%,
        #6d28a9 100%
    );
}

/* =========================================
   ICON
========================================= */

.g-settings-top-menu .settings-nav-icon {
    position: relative;
    z-index: 2;

    width: 38px;
    height: 38px;
    min-width: 38px;

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

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.17);

    color: #ffffff;

    font-size: 13px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition: all 0.25s ease;
}

.g-settings-top-menu .settings-nav-text {
    position: relative;
    z-index: 2;

    flex: 1;

    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

/* =========================================
   DECORATIVE CIRCLE
========================================= */

.g-settings-top-menu ul li a::before {
    content: "";

    position: absolute;

    width: 105px;
    height: 105px;

    right: -45px;
    top: -55px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    pointer-events: none;

    transition: all 0.3s ease;
}

/* Small decorative circle */
.g-settings-top-menu ul li a::after {
    content: "";

    position: absolute;

    width: 45px;
    height: 45px;

    right: 16px;
    bottom: -27px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.10);

    background: rgba(255, 255, 255, 0.04);

    transition: all 0.3s ease;
}

/* =========================================
   HOVER
========================================= */

.g-settings-top-menu ul li a:hover {
    color: #ffffff;

    transform: translateY(-3px);

    border-color: rgba(255, 255, 255, 0.25);

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.22);
}

.g-settings-top-menu ul li a:hover::before {
    width: 135px;
    height: 135px;

    right: -52px;
    top: -67px;

    background: rgba(255, 255, 255, 0.12);
}

.g-settings-top-menu ul li a:hover::after {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.08);
}

.g-settings-top-menu ul li a:hover .settings-nav-icon {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.28);

    transform: scale(1.04);
}

/* =========================================
   ACTIVE
========================================= */

.g-settings-top-menu ul li a.active {
    border-color: rgba(255, 255, 255, 0.45);

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.08),
        0 10px 25px rgba(15, 23, 42, 0.22);
}

.g-settings-top-menu ul li a.active .settings-nav-icon {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.32);
}

/* =========================================
   FOCUS
========================================= */

.g-settings-top-menu ul li a:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(1, 42, 107, 0.18),
        0 8px 20px rgba(15, 23, 42, 0.18);
}





.university-ui-latest {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e5eaf1;
    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 5px 18px rgba(16, 24, 40, 0.06);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
        padding-bottom:20px;
}

/* =========================================
   CARD HOVER
========================================= */

.university-ui-latest:hover {
    transform: translateY(-5px);

    border-color: #cbd8e8;

    box-shadow:
        0 14px 32px rgba(1, 42, 107, 0.12);
}

/* =========================================
   IMAGE
========================================= */

.university-ui__image-latest {
    position: relative;

    width: 100%;
    height: 190px;

    overflow: hidden;

    background: #eef2f6;
}

.university-ui__image-latest img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.university-ui-latest:hover
.university-ui__image-latest img {
    transform: scale(1.06);
}

/* Image dark gradient */

.university-ui__image-overlay-latest {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 75px;

    background: linear-gradient(
        to top,
        rgba(1, 42, 107, 0.42),
        transparent
    );

    pointer-events: none;
}

/* =========================================
   IMAGE BADGE
========================================= */

.university-ui__image-badge-latest {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 3;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    background: rgba(1, 42, 107, 0.90);

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 7px;

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;

    line-height: 1;
}

.university-ui__image-badge-latest i {
    font-size: 9px;
}

/* =========================================
   CONTENT
========================================= */

.university-ui__content-latest {
    /*position: relative;*/

    padding: 15px 16px 16px;

    display: flex;
    flex-direction: column;

    flex: 1;
}

/* =========================================
   TOP ROW
========================================= */

.university-ui__top-latest {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
}

.university-ui__type-latest {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    background: #eef5ff;

    border: 1px solid #d8e7fa;
    border-radius: 6px;

    color: #164b91;

    font-size: 9px;
    font-weight: 600;

    line-height: 1;
}

.university-ui__type-latest i {
    font-size: 9px;
}

/* =========================================
   VERIFIED
========================================= */

.university-ui__verified-latest {
    width: 25px;
    height: 25px;

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

    background: #ecfaf3;

    border: 1px solid #d3eedf;

    border-radius: 50%;

    color: #087443;

    font-size: 11px;
}

/* =========================================
   TITLE
========================================= */

.university-ui__title-latest {
    margin: 0 0 11px;

    color: #172b4d;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.4;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color 0.2s ease;
}

.university-ui-latest:hover
.university-ui__title-latest {
    color: #012A6B;
}

/* =========================================
   LOCATION
========================================= */

.university-ui__location-latest {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    min-height: 42px;
}

.university-ui__location-icon-latest {
    width: 30px;
    height: 30px;
    min-width: 30px;

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

    background: #fff4ed;

    border: 1px solid #f4ddd0;
    border-radius: 8px;

    color: #c2410c;

    font-size: 11px;
}

.university-ui__location-latest div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.university-ui__location-latest small {
    color: #98a2b3;

    font-size: 9px;
    font-weight: 600;

    line-height: 1;
}

.university-ui__location-latest span {
    color: #667085;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.45;
}

/* =========================================
   DIVIDER
========================================= */

.university-ui__divider-latest {
    width: 100%;
    height: 1px;

    margin: 13px 0;

    background: #edf0f4;
}

/* =========================================
   BUTTON
========================================= */

.university-ui__button-latest {
    position: relative;

    width: 90%;
    min-height: 40px;

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

    padding: 8px 10px 8px 13px;

    background: linear-gradient(
        135deg,
        #012A6B 0%,
        #1769d2 100%
    );

    border: 1px solid #012A6B;
    border-radius: 8px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    box-shadow:
        0 4px 10px rgba(1, 42, 107, 0.14);

    overflow: hidden;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
        position:absolute;
        bottom:10px;
        left:50%;
        transform:translateX(-50%);
}

.university-ui__button-latest::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 65%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.16),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.5s ease;
}

.university-ui__button-latest:hover {
    color: #ffffff;

  

    background: linear-gradient(
        135deg,
        #001f52 0%,
        #1259b5 100%
    );

    box-shadow:
        0 7px 16px rgba(1, 42, 107, 0.22);
}

.university-ui__button-latest:hover::before {
    left: 130%;
}

.university-ui__button-latest span {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 7px;
}

.university-ui__button-latest span i {
    font-size: 10px;
}

.university-ui__button-arrow-latest {
    position: relative;
    z-index: 2;

    width: 23px;
    height: 23px;

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

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;

    font-size: 8px;

    transition: transform 0.22s ease;
}

.university-ui__button-latest:hover
.university-ui__button-arrow-latest {
    transform: translateX(3px);

    background: rgba(255, 255, 255, 0.22);
}





.university-details-left-latest {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* =========================================================
   HERO
========================================================= */

.university-hero-latest {
    position: relative;

    width: 100%;

    background: #ffffff;

    border: 1px solid #e4e9f0;
    border-radius: 17px;

    overflow: hidden;

   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    transition: all 0.28s ease;
}

.university-hero-latest:hover {
    border-color: #cdd8e7;

    box-shadow:
        0 12px 30px rgba(1, 42, 107, 0.11);
}


/* =========================================================
   HERO IMAGE
========================================================= */

.university-hero-image-latest {
    position: relative;

    width: 100%;
    height: 245px;

    overflow: hidden;

    background: #eef2f6;
}

.university-hero-image-latest img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.university-hero-latest:hover
.university-hero-image-latest img {
    transform: scale(1.04);
}


/* Image overlay */

.university-hero-overlay-latest {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(1, 20, 48, 0.58) 0%,
            rgba(1, 20, 48, 0.10) 55%,
            transparent 100%
        );

    pointer-events: none;
}


/* =========================================================
   HERO BADGE
========================================================= */

.university-hero-badge-latest {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    background: rgba(1, 42, 107, 0.90);

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 7px;

    color: #ffffff;

    font-size: 9px;
    font-weight: 600;

    line-height: 1;

    backdrop-filter: blur(5px);
}

.university-hero-badge-latest i {
    font-size: 10px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.university-hero-content-latest {
    padding: 17px 19px 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 100%
        );
}

.university-title-row-latest {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.university-label-latest {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 5px;

    color: #718096;

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

    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.university-label-latest i {
    color: #012A6B;
    font-size: 9px;
}

.university-title-row-latest h2 {
    margin: 0;

    color: #172b4d;

    font-size: 21px;
    font-weight: 600;

    line-height: 1.3;
}


/* =========================================================
   VERIFIED
========================================================= */

.university-verified-latest {
    width: 32px;
    height: 32px;
    min-width: 32px;

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

    background: #ecfaf3;

    border: 1px solid #ccebd9;
    border-radius: 50%;

    color: #087443;

    font-size: 13px;
}


/* =========================================================
   LOCATION
========================================================= */

.university-location-latest {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 12px;
}

.university-location-icon-latest {
    width: 31px;
    height: 31px;
    min-width: 31px;

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

    background: #fff4ed;

    border: 1px solid #f3ddd0;
    border-radius: 8px;

    color: #c2410c;

    font-size: 11px;
}

.university-location-latest div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.university-location-latest small {
    color: #98a2b3;

    font-size: 10px;
    font-weight: 600;

    line-height: 1;
    text-transform: uppercase;
}

.university-location-latest p {
    margin: 0;

    color: #667085;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.4;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.university-content-card-latest {
    position: relative;

    width: 100%;

    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5eaf1;
    border-radius: 15px;

   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    overflow: hidden;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.university-section-heading-latest {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;
}

.university-section-icon-latest {
    width: 36px;
    height: 36px;
    min-width: 36px;

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

    border-radius: 9px;

    font-size: 13px;
}

.university-section-icon-latest.blue {
    background: #eef5ff;
    border: 1px solid #d7e6fb;
    color: #2563eb;
}

.university-section-icon-latest.purple {
    background: #f5efff;
    border: 1px solid #e5d8f8;
    color: #7c3aed;
}

.university-section-icon-latest.green {
    background: #ecfaf3;
    border: 1px solid #d3eedf;
    color: #087443;
}

.university-section-heading-latest div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.university-section-heading-latest span:not(.university-section-icon-latest) {
    color: #98a2b3;

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

    letter-spacing: 0.7px;
}

.university-section-heading-latest h3 {
    margin: 0;

    color: #172b4d;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.25;
}


/* =========================================================
   DESCRIPTION
========================================================= */


.university-description-latest p {
    margin: 0;

    color: #222;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================================
   PROGRAM HEADING
========================================================= */

.university-program-heading-latest {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;

    padding: 11px 13px;

    background: #f7f9fc;

    border: 1px solid #e8edf3;
    border-radius: 10px;
}

.university-program-heading-latest > div {
    display: flex;
    align-items: center;

    gap: 9px;
}

.program-heading-icon-latest {
    width: 32px;
    height: 32px;
    min-width: 32px;

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

    background: #eef5ff;

    border: 1px solid #d7e6fb;
    border-radius: 8px;

    color: #2563eb;

    font-size: 11px;
}

.university-program-heading-latest h4 {
    margin: 0;

    color: #344054;

    font-size: 12px;
    font-weight: 600;
}

.university-program-heading-latest p {
    margin: 2px 0 0;

    color: #98a2b3;

    font-size: 12px;
}

.program-count-latest {
        padding: 7px 12px;
    background: #198722;
    border: 1px solid #dfe5ec;
    border-radius: 24px;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}


/* =========================================================
   PROGRAM CARD
========================================================= */

.program-university-dt-latest {
    position: relative;

    min-height: 155px;

    padding: 13px;

    display: flex;
    flex-direction: column;

    background: #c3dcf663  !important;
    /*background:*/
    /*    linear-gradient(*/
    /*        145deg,*/
    /*        #ffffff 0%,*/
    /*        #f8fbff 100%*/
    /*    );*/

    border: 1px solid #e2e8f0;
    border-radius: 11px;

    box-shadow:
        0 3px 10px rgba(16, 24, 40, 0.04);

    overflow: hidden;

    transition: all 0.25s ease;
}

.program-university-dt-latest:hover {
    transform: translateY(-3px);

    border-color: #c9d8ea;

    box-shadow:
        0 9px 20px rgba(1, 42, 107, 0.09);
}


/* Program icon */

.program-card-icon-latest {
    width: 33px;
    height: 33px;

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

    margin-bottom: 10px;

    background: #eef5ff;

    border: 1px solid #d7e6fb;
    border-radius: 8px;

    color: #012A6B;

    font-size: 12px;
}

.program-card-content-latest {
    display: flex;
    flex-direction: column;

    flex: 1;
}

.program-small-label-latest {
    margin-bottom: 4px;

    color: #98a2b3;

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

    letter-spacing: 0.7px;
}

.program-university-dt-latest h5 {
    margin: 0 0 5px;

    color: #344054;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.45;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   PROGRAM BUTTON
========================================================= */

.program-view-btn-latest {
    margin-top: auto;

    width: 100%;
    min-height: 32px;

    padding: 6px 8px;

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

    background: #012A6B;

    border: 1px solid #012A6B;
    border-radius: 7px;

    color: #fff;

    text-decoration: none;

    font-size: 9px;
    font-weight: 600;

    transition: all 0.22s ease;
}

.program-view-btn-latest:hover {
    color: #ffffff;

    background: #012A6B;

    border-color: #012A6B;

    box-shadow:
        0 4px 9px rgba(1, 42, 107, 0.16);
}

.program-view-btn-latest i {
    font-size: 8px;

    transition: transform 0.2s ease;
}

.program-view-btn-latest:hover i {
    transform: translateX(3px);
}


/* =========================================================
   EMPTY PROGRAM
========================================================= */

.university-empty-state-latest {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 16px;

    background: #f8fafc;

    border: 1px dashed #d8dee8;
    border-radius: 10px;
}

.university-empty-state-latest > span {
    width: 36px;
    height: 36px;
    min-width: 36px;

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

    background: #eef2f6;

    border-radius: 8px;

    color: #98a2b3;

    font-size: 12px;
}

.university-empty-state-latest h5 {
    margin: 0 0 2px;

    color: #475467;

    font-size: 11px;
    font-weight: 600;
}

.university-empty-state-latest p {
    margin: 0;

    color: #98a2b3;

    font-size: 9px;
}


/* =========================================================
   RICH DETAILS CONTENT
========================================================= */

.university-rich-content-latest {
   
    color: #222;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.7;
}

.university-rich-content-latest p:last-child {
    margin-bottom: 0;
}

.university-rich-content-latest h1,
.university-rich-content-latest h2,
.university-rich-content-latest h3,
.university-rich-content-latest h4,
.university-rich-content-latest h5,
.university-rich-content-latest h6 {
    color: #344054;

    font-weight: 600;

    margin-top: 12px;
    margin-bottom: 7px;
}

.university-rich-content-latest ul,
.university-rich-content-latest ol {
    padding-left: 20px;
}

.university-rich-content-latest li {
    margin-bottom: 5px;
}


.university-dt-right-latest {
    width: 100%;
    position: relative;
}


/* =========================================================
   MAIN CARD
========================================================= */

.university-dt-card-latest {
    position: relative;

    width: 100%;

    padding: 0;

    background: #ffffff;

    border: 1px solid #e3e8ef;
    border-radius: 17px;

    overflow: hidden;

   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.university-dt-card-latest:hover {
    box-shadow:
        0 13px 32px rgba(1, 42, 107, 0.11);
}


/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.university-dt-card-latest::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -82px;
    right: -55px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    pointer-events: none;

    z-index: 2;
}

.university-dt-card-latest::after {
    content: "";

    position: absolute;

    width: 75px;
    height: 75px;

    bottom: 125px;
    left: -42px;

    border-radius: 22px;

    background: rgba(23, 105, 210, 0.045);

    border: 1px solid rgba(23, 105, 210, 0.06);

    transform: rotate(25deg);

    pointer-events: none;
}


/* =========================================================
   CARD HEADER
========================================================= */

.university-dt-card-header-latest {
    position: relative;

    padding: 21px 20px 20px;

    background:
        linear-gradient(
            135deg,
            #012A6B 0%,
            #1457a7 62%,
            #1769d2 100%
        );

    overflow: hidden;
}

.university-dt-card-header-latest::before {
    content: "";

    position: absolute;

    width: 105px;
    height: 105px;

    right: -38px;
    top: -52px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);
}

.university-dt-card-header-latest::after {
    content: "";

    position: absolute;

    width: 45px;
    height: 45px;

    right: 42px;
    bottom: -23px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.12);
}


/* =========================================================
   EYEBROW
========================================================= */

.university-dt-eyebrow-latest {
    position: relative;
    z-index: 3;

    display: inline-flex;
    align-items: center;

    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.68);

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

    letter-spacing: 0.9px;

    text-transform: uppercase;
}

.university-dt-eyebrow-latest::before {
    content: "";

    width: 17px;
    height: 2px;

    margin-right: 6px;

    border-radius: 5px;

    background: #67e8f9;
}


/* =========================================================
   TITLE
========================================================= */

.university-dt-title-latest {
    position: relative;
    z-index: 3;

    margin: 0;

    padding-right: 15px;

    color: #ffffff;

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

    line-height: 1.35;
}


/* =========================================================
   INFORMATION AREA
========================================================= */

.university-dt-info-latest {
    position: relative;

    padding: 7px 17px 3px;

    background: #ffffff;
}


/* =========================================================
   INFORMATION ITEM
========================================================= */

.university-dt-info-item-latest {
    position: relative;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 2px;

    border-bottom: 1px solid #edf0f4;

    transition: all 0.2s ease;
}

.university-dt-info-item-latest:last-child {
    border-bottom: 0;
}

.university-dt-info-item-latest:hover {
    padding-left: 5px;
}


/* =========================================================
   ICON BOX
========================================================= */

.university-dt-icon-box-latest {
    width: 37px;
    height: 37px;
    min-width: 37px;

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

    border-radius: 10px;

    font-size: 12px;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.university-dt-info-item-latest:hover
.university-dt-icon-box-latest {
    transform: translateY(-2px);
}


/* Location */

.university-dt-info-item-latest:nth-child(1)
.university-dt-icon-box-latest {
    background: #fff1f2;

    border: 1px solid #f7d8dd;

    color: #e11d48;
}


/* Established */

.university-dt-info-item-latest:nth-child(2)
.university-dt-icon-box-latest {
    background: #fff7e8;

    border: 1px solid #f3dfbd;

    color: #c2410c;
}


/* Institution */

.university-dt-info-item-latest:nth-child(3)
.university-dt-icon-box-latest {
    background: #eef5ff;

    border: 1px solid #d7e6fb;

    color: #2563eb;
}


/* Website */

.university-dt-info-item-latest:nth-child(4)
.university-dt-icon-box-latest {
    background: #ecfaf3;

    border: 1px solid #d3eedf;

    color: #087443;
}


/* =========================================================
   INFO CONTENT
========================================================= */

.university-dt-info-content-latest {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.university-dt-label,
.university-dt-label-latest {
    color: #98a2b3;

    font-size: 10px;
    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    /*letter-spacing: 0.5px;*/
}

.university-dt-value-latest {
    color: #344054;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.45;
}


/* =========================================================
   WEBSITE LINK
========================================================= */

.university-dt-website-latest {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    width: fit-content;

    color: #012A6B;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition: all 0.2s ease;
}

.university-dt-website-latest i {
    font-size: 8px;

    transition: transform 0.2s ease;
}

.university-dt-website-latest:hover {
    color: #1769d2;
}

.university-dt-website-latest:hover i {
    transform: translate(2px, -2px);
}


/* =========================================================
   ACTION BUTTON AREA
========================================================= */

.u-right-btns {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 9px;

    padding: 14px 17px 17px;

    margin-top: 0 !important;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f3f7fb 100%
        );

    border-top: 1px solid #e7ebf0;
}


/* =========================================================
   ADMISSION BUTTON
========================================================= */

.u-right-btns > a {
    position: relative;

    width: 100%;
    min-height: 42px;

    padding: 9px 11px 9px 14px;

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

    background:
        linear-gradient(
            135deg,
            #012A6B 0%,
            #1769d2 100%
        );

    border: 1px solid #012A6B;
    border-radius: 9px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    box-shadow:
        0 5px 12px rgba(1, 42, 107, 0.16);

    overflow: hidden;

    transition: all 0.23s ease;
}

.u-right-btns > a::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 65%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.5s ease;
}

.u-right-btns > a:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 17px rgba(1, 42, 107, 0.22);
}

.u-right-btns > a:hover::before {
    left: 130%;
}

.u-right-btns > a span {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 7px;
}

.u-right-btns > a span::before {
    content: "\f2b5";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 10px;
}

.u-right-btns > a > i {
    position: relative;
    z-index: 2;

    width: 24px;
    height: 24px;

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

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;

    font-size: 8px;

    transition: transform 0.2s ease;
}

.u-right-btns > a:hover > i {
    transform: translateX(3px);
}


/* =========================================================
   SHARE BUTTON
========================================================= */

.u-right-btns .share-university {
    width: 100%;
    min-height: 39px;

    padding: 8px 13px;

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

    gap: 7px;

    background: transparent;

    border: 0 solid #dce3eb;
    border-radius: 8px;

    color: #475467;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.22s ease;
}

.u-right-btns .share-university i {
    width: 23px;
    height: 23px;

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

    background: #f5efff;

    border: 1px solid #e5d8f8;
    border-radius: 6px;

    color: #7c3aed;

    font-size: 9px;

    transition: all 0.22s ease;
}

/*.u-right-btns .share-university:hover {*/
/*    color: #012A6B;*/

/*    background: #f8fbff;*/

/*    border-color: #cbd9e8;*/

/*    transform: translateY(-1px);*/

/*    box-shadow:*/
/*        0 4px 10px rgba(16, 24, 40, 0.06);*/
/*}*/

.u-right-btns .share-university:hover i {
    color: #ffffff;

    background: #7c3aed;

    border-color: #7c3aed;
}



.dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 14px;
}

.dataTables_paginate .pagination {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dataTables_paginate .paginate_button {
    margin: 0;
    padding: 0;
}

.dataTables_paginate .paginate_button .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: 7px;

    color: #475467;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    box-shadow: 0 2px 5px rgba(16, 24, 40, 0.04);

    transition: all 0.2s ease;
}

/* Hover */
.dataTables_paginate .paginate_button:not(.disabled) .page-link:hover {
    background: #eef5ff;
    border-color: #b9d0ef;
    color: #012A6B;
    transform: translateY(-1px);
    box-shadow: 0 4px 9px rgba(1, 42, 107, 0.08);
}

/* Active page */
.dataTables_paginate .paginate_button.active .page-link {
    background: #012A6B;
    border-color: #012A6B;
    color: #fff;
    box-shadow: 0 4px 10px rgba(1, 42, 107, 0.18);
}

/* Active hover */
.dataTables_paginate .paginate_button.active .page-link:hover {
    background: #012A6B;
    border-color: #012A6B;
    color: #fff;
    transform: translateY(-1px);
}

/* Previous / Next */
.dataTables_paginate .paginate_button.previous .page-link,
.dataTables_paginate .paginate_button.next .page-link {
    min-width: auto;
    padding: 0 13px;
    color: #344054;
}

/* Previous / Next hover */
.dataTables_paginate .paginate_button.previous:not(.disabled) .page-link:hover,
.dataTables_paginate .paginate_button.next:not(.disabled) .page-link:hover {
    background: #f5f8fc;
    color: #012A6B;
    border-color: #cbd7e6;
}

/* Disabled */
.dataTables_paginate .paginate_button.disabled .page-link {
    background: #f8fafc;
    border-color: #eaecf0;
    color: #b4bcc8;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.8;
}

/* Focus */
.dataTables_paginate .paginate_button .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 42, 107, 0.08);
}

/* Mobile */
@media (max-width: 575px) {
    .dataTables_paginate {
        justify-content: center;
        margin-top: 12px;
    }

    .dataTables_paginate .pagination {
        gap: 4px;
    }

    .dataTables_paginate .paginate_button .page-link {
        min-width: 31px;
        height: 31px;
        padding: 0 8px;
        font-size: 10px;
        border-radius: 6px;
    }

    .dataTables_paginate .paginate_button.previous .page-link,
    .dataTables_paginate .paginate_button.next .page-link {
        padding: 0 10px;
    }
}

div.dataTables_wrapper div.dataTables_info{
    font-size:14px;
    color:#000;
}



#table_filter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 15px;
}

#table_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
}

#table_filter input {
    width: 250px;
    height: 38px;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#table_filter input:focus {
    border-color: #86b7fe;
    box-shadow:none !important;
}

#table_filter input::placeholder {
    color: #999;
}













.app-prev-lat-container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.app-prev-lat-header-row{
    padding:15px 0;
}

.app-prev-lat-left-col {
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .app-prev-lat-left-col {
    margin-bottom: 0;
  }
}

.app-prev-lat-right-col {
  gap: 1rem;
  flex-wrap: wrap;
}

@media (min-width: 576px) {
  .app-prev-lat-right-col {
    flex-wrap: nowrap;
  }
}

/* Typography & Left Header */
.app-prev-lat-title {
  color: #0b2545;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.app-prev-lat-subtitle {
  color: #6c757d;
  font-size: 0.7rem;
  margin-bottom: 0;
}

.app-prev-lat-back-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin-right: 1rem;
  color: #0b2545;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Card General Styles */
.app-prev-lat-card {
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 220px;
  flex-grow: 1;
}

@media (min-width: 576px) {
  .app-prev-lat-card {
    flex-grow: 0;
  }
}

.app-prev-lat-card-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
}

.app-prev-lat-card-value {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Card Variant Styles */
.app-prev-lat-card-id {
  background-color: #eaf3ff;
}

.app-prev-lat-card-status {
  background-color: #e8f7f0;
}

/* Color Palette Classes */
.app-prev-lat-text-primary {
  color: #1d68b8;
}

.app-prev-lat-text-success {
  color: #0f7652;
}

.app-prev-lat-text-dark {
  color: #0b2545;
}

/* Status Indicator Dot */
.app-prev-lat-status-wrapper {
  margin-top: 0.25rem;
}

.app-prev-lat-status-dot {
  width: 8px;
  height: 8px;
  background-color: #0f7652;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}

/* Icon Button Styles */
.app-prev-lat-icon-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 1rem;
  opacity: 0.85;
  font-size: 0.9rem;
  transition: opacity 0.2s ease-in-out;
}

.app-prev-lat-icon-btn:hover {
  opacity: 1;
}


.app-prev-top {
  width: 100%;
  box-sizing: border-box;
  padding: 22px 25px 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 3px 18px rgba(24, 91, 130, 0.10);
  overflow: hidden;
}

.app-prev-top *,
.app-prev-top *::before,
.app-prev-top *::after {
  box-sizing: border-box;
}

.app-prev-top__steps {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content:center;
  gap:50px
}

.app-prev-top__step {
position: relative;
    min-width: 0;
    width: 17%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ---------------- ICON ---------------- */

.app-prev-top__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;

  font-size: 20px;
  margin-left: 0;

  border: 2px solid #d8e2eb;
  background: #f8fafc;
  color: #7890a5;
}

.app-prev-top__step--completed .app-prev-top__icon {
  background: #0c9a7d;
  border-color: #0c9a7d;
  color: #ffffff;
}

.app-prev-top__step--current .app-prev-top__icon {
  background: #1169d7;
  border-color: #1169d7;
  color: #ffffff;
}

/* ---------------- CONNECTOR ---------------- */

.app-prev-top__connector {
  position: absolute;
  height: 3px;
        top: 34px;
    left: 87px;
    right: -140px;
  z-index: 1;
  background: #dbe5ee;
}

.app-prev-top__step--completed .app-prev-top__connector {
  background: #159b82;
}

.app-prev-top__step--current .app-prev-top__connector {
  background: #b9d0e5;
}

.app-prev-top__step--last .app-prev-top__connector {
  display: none;
}

/* ---------------- CONTENT ---------------- */

.app-prev-top__content {
  padding-top: 4px;
  text-align:center;
}

.app-prev-top__number {
  font-size: 16px;
  font-weight: 600;
  color: #123f66;
  margin-bottom: 5px;
}

.app-prev-top__title {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: #123f66;
  white-space: nowrap;
}

.app-prev-top__date {
  margin-top: 7px;
  min-height: 18px;
  font-size: 13px;
  color: #5b88ad;
}

/* ---------------- STATUS ---------------- */

.app-prev-top__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-top: 10px;
  padding: 9px 18px;

  border-radius: 22px;

  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Completed */

.app-prev-top__step--completed .app-prev-top__status {
  background: #d8f5ef;
  color: #087e6b;
}

.app-prev-top__step--completed .app-prev-top__status i {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #0c9a7d;
  color: #ffffff;
  font-size: 10px;
}

/* Current */

.app-prev-top__step--current .app-prev-top__status {
  background: #dcecff;
  color: #1265c5;
}

.app-prev-top__step--current .app-prev-top__status i {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #1474df;
  color: #ffffff;
  font-size: 8px;
}

/* Pending */

.app-prev-top__step--pending .app-prev-top__status {
  background: #edf3f8;
  color: #547693;
}

.app-prev-top__step--pending .app-prev-top__status i {
  color: #6d8da9;
  font-size: 17px;
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 1100px) {
  .app-prev-top {
    padding-left: 22px;
    padding-right: 22px;
  }

  .app-prev-top__step {
    padding-right: 12px;
  }

  .app-prev-top__icon {
    width: 62px;
    height: 62px;
    font-size: 21px;
  }

  .app-prev-top__connector {
    top: 29px;
    left: 70px;
    right: 8px;
  }

  .app-prev-top__title {
    font-size: 14px;
  }

  .app-prev-top__date {
    font-size: 13px;
  }

  .app-prev-top__status {
    font-size: 12px;
    padding: 8px 12px;
  }
}

@media (max-width: 768px) {
  .app-prev-top {
    overflow-x: auto;
    padding: 20px;
  }

  .app-prev-top__steps {
    min-width: 850px;
  }
}







.app-prv-info-wrapper {
    width: 100%;
    padding: 10px;
    margin-top:20px;
    color: #315b80;
    background: #fff;
        background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 18px rgba(24, 91, 130, 0.10);
}

/* =========================
   Header
========================= */

.app-prv-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 2px 8px;
}

.app-prv-info-student {
    display: flex;
    align-items: center;
}

.app-prv-info-avatar {
    min-width: 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #096495;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    margin-right: 16px;
}

.app-prv-info-student-details h4 {
    margin: 0 0 5px;
    color: #173e61;
    font-size: 20px;
    font-weight: 600;
}

.app-prv-info-student-details > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #587793;
    font-size: 13px;
}

.app-prv-info-divider {
    color: #a7b8c6;
}

/* =========================
   Buttons
========================= */

.app-prv-info-actions {
    display: flex;
    gap: 12px;
}

.app-prv-info-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s ease;
}

.app-prv-info-btn i {
    font-size: 15px;
}

.app-prv-info-btn-outline {
    color: #0b5b88;
    background: #fff;
    border: 1px solid #cfe0ea;
}

.app-prv-info-btn-outline:hover {
    background: #f5faff;
}

.app-prv-info-btn-primary {
    color: #fff;
    background: #075889;
    border: 1px solid #075889;
}

.app-prv-info-btn-primary:hover {
    background: #064b76;
}


/* =========================
   Main Information Card
========================= */

.app-prv-info-card {
    border: 1px solid #dce8ef;
    border-radius: 7px;
    background: #fff;
    min-height: 225px;
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(20, 70, 100, 0.04);
}

.app-prv-info-column {
    padding: 4px 12px;
}

.app-prv-info-column-right {
    border-left: 1px solid #e3ebf0;
}

.app-prv-info-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 13.3px;
}

.app-prv-info-icon {
    width: 32px;
    min-width: 32px;
    color: #356c94;
    font-size: 17px;
}

.app-prv-info-label {
    width: 100px;
    min-width: 100px;
    color: #55728a;
    font-weight: 500;
}

.app-prv-info-colon {
    width: 18px;
    color: #9aaebb;
    text-align: center;
}

.app-prv-info-value {
    flex: 1;
    color: #315e82;
    font-weight: 500;
    padding-left: 2px;
}


/* =========================
   Application Summary
========================= */

.app-prv-info-summary {
    height: 100%;
    border: 1px solid #d8e6ed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.app-prv-info-summary-title {
    min-height: 58px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #126b69;
    background: linear-gradient(
        90deg,
        #eefbf8 0%,
        #e8f9f6 100%
    );
    font-size: 15px;
    font-weight: 600;
}

.app-prv-info-summary-title i {
    font-size: 22px;
    color: #197b75;
}

.app-prv-info-summary-list {
    padding: 13px 18px 8px;
}

.app-prv-info-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 8px 0;
    font-size: 12px;
}

.app-prv-info-summary-row span {
    color: #54728b;
    white-space: nowrap;
}

.app-prv-info-summary-row strong {
    color: #315e82;
    font-weight: 600;
    text-align: right;
    font-size:11px;
}


/* =========================
   Status
========================= */

.app-prv-info-status {
    margin: 8px 12px 12px;
    padding: 12px 14px;
    border-radius: 7px;
    background: #e9faf7;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #245e69;
}

.app-prv-info-status-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #15956e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

.app-prv-info-status strong {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    color: #2b6871;
    font-weight:500;
}

.app-prv-info-status span {
    display: block;
    font-size: 12px;
    color: #4d7080;
}


.app-prv-info-bottom-wrapper{
       width: 100%;
    padding: 10px;
    margin-top: 20px;
    color: #315b80;
    background: #fff;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 18px rgba(24, 91, 130, 0.10);
}

.app-prv-info-bottom-tabs{
    border-bottom:1px solid #e6edf5;
}

.app-prv-info-bottom-tabs .nav-link{
    border:none;
    color:#64748b;
    font-size:15px;
    font-weight:500;
    padding:14px 24px;
    background:transparent;
}

.app-prv-info-bottom-tabs .nav-link.active{
    color:#0d6efd;
    border:none;
    border-bottom:3px solid #0d6efd;
    background:transparent;
}

.app-prv-info-bottom-card{
    background:#fff;
    border:1px solid #e6edf5;
    border-radius:12px;
    overflow:hidden;
    height:100%;
}

.app-prv-info-bottom-card-header{
    background:#f7f9fc;
    padding:18px 24px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid #edf2f7;
}

.app-prv-info-bottom-card-header i{
    color:#0d6efd;
    font-size:18px;
}

.app-prv-info-bottom-card-header h5{
    margin:0;
    font-size:16px;
    font-weight:600;
    color:#15345b;
}

.app-prv-info-bottom-card-body{
    padding:24px;
}

.app-prv-info-bottom-border-start{
    border-left:1px solid #edf2f7;
}

.app-prv-info-bottom-item{
    margin-bottom:18px;
}

.app-prv-info-bottom-item:last-child{
    margin-bottom:0;
}

.app-prv-info-bottom-item label{
    display:block;
    font-size:13px;
    font-weight:500;
    color:#7b8794;
    margin-bottom:4px;
}

.app-prv-info-bottom-item span{
    display:block;
    font-size:14px;
    color:#1e3a5f;
    font-weight:500;
    line-height:1.5;
}

@media(max-width:991px){

    .app-prv-info-bottom-border-start{
        border-left:none;
        border-top:1px solid #edf2f7;
        padding-top:20px;
        margin-top:20px;
    }

    .app-prv-info-bottom-tabs{
        overflow-x:auto;
        flex-wrap:nowrap;
        white-space:nowrap;
    }

    .app-prv-info-bottom-tabs::-webkit-scrollbar{
        height:4px;
    }
}



.app-design-bottom-bar{
       position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, .05);
    padding: 12px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.app-design-bottom-left{
    flex:1;
}

.app-design-bottom-right{
    display:flex;
    flex-direction:column;
}

.app-design-bottom-title{
    font-size:16px;
    font-weight:600;
    color:#16335B;
    margin-bottom:14px;
}

.app-design-bottom-colors{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
}

.app-design-bottom-color-item{
    display:flex;
    align-items:center;
    gap:12px;
}

.app-design-bottom-color{
    width:28px;
    height:28px;
    border-radius:50%;
    flex-shrink:0;
}

.app-design-bottom-color-item strong{
    display:block;
    font-size:11px;
    color:#334155;
    line-height:1.2;
}

.app-design-bottom-color-item small{
    display:block;
    font-size:10px;
    color:#94a3b8;
}

/* Color Dots */

.app-design-bottom-primary{
    background:#2563EB;
}

.app-design-bottom-success{
    background:#16A34A;
}

.app-design-bottom-warning{
    background:#F59E0B;
}

.app-design-bottom-danger{
    background:#EF4444;
}

.app-design-bottom-info{
    background:#06B6D4;
}

.app-design-bottom-bg{
    background:#F8FAFC;
    border:1px solid #dbe2ea;
}

.app-design-bottom-card{
    background:#FFFFFF;
    border:1px solid #dbe2ea;
}

/* Divider */

.app-design-bottom-divider{
    width:1px;
    height:70px;
    background:#e5e7eb;
}

/* Status */

.app-design-bottom-status-list{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.app-design-bottom-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 15px;
    border-radius:999px;
    font-size:12px;
    font-weight:500;
}

.app-design-bottom-status i{
    font-size:14px;
}

.app-design-bottom-completed{
    background:#dcfce7;
    color:#15803d;
}

.app-design-bottom-current{
    background:#dbeafe;
    color:#2563eb;
}

.app-design-bottom-pending{
    background:#e2e8f0;
    color:#475569;
}

.app-design-bottom-hold{
    background:#fef3c7;
    color:#b45309;
}

.app-design-bottom-rejected{
    background:#fee2e2;
    color:#dc2626;
}


.std-counsellor-widget-cs {
    position: relative;
    background: #c5d8df2e;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px 16px 20px;
    margin-bottom: 15px;
    /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
    overflow: hidden;
}

.std-counsellor-widget-cs::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #0d6efd;
}

.std-counsellor-widget-cs h5 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.std-counsellor-widget-cs p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}
.std-counsellor-widget-cs > ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


/* Individual item */
.std-counsellor-widget-cs > ul > li {
        display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 7px;
    background: rgb(255 255 255 / 45%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: #222;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 10px;
}


/* Last item */
.std-counsellor-widget-cs > ul > li:last-child {
    margin-bottom: 0;
}




/* =========================================
   VALUE
========================================= */

.std-counsellor-widget-cs > ul > li span {
    color: #222;
    font-weight: 600;
}


.std-counsellor-widget-cs strong {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #374151;
}

.std-counsellor-widget-cs .badge {
    display: inline-block;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 40px;
    margin-bottom: 4px;
}

.std-counsellor-widget-cs .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff;
}
#documentPreviewWrapper {
    padding: 12px;
    margin-top: 10px;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
}

/* Image preview */
#documentImagePreview {
    display: block;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    padding: 4px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

/* PDF preview */
#documentPdfPreview {
    display: block;
    width: 100%;
    height: 260px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

/* Current file link */
#documentFileLink {
    color: #0d6efd;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-top: 10px;
}

#documentFileLink:hover {
    color: #0a58ca;
    text-decoration: underline;
}


#documentFileLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #1eb72f;
    border-radius: 5px;
    color: #fff;
    transition: all 0.2s ease;
    background-color:#1eb72f;
}

#documentFileLink:hover {
    background: #1eb72f;
    color: #fff;
    text-decoration: none;
}


.alert-info-cs {
    margin-top: 10px;
    padding: 12px 15px;
    background: #eef6ff;
    border: 1px solid #b8dcff;
    border-left: 4px solid #0d6efd;
    border-radius: 6px;
    color: #344054;
    font-size: 13px;
    line-height: 1.5;
}

.alert-info-cs strong {
    color: #1d4ed8;
    font-weight: 600;
}

.alert-info-cs span {
    color: #475467;
}

.alert-info-cs .mt-1 {
    margin-top: 6px !important;
}

.filter-index-pd{
    padding:18px !important;
}

.filter-index button.filter-reset.w-110-px{
    width:110px !important;
}
.filter-index a.filter-reset.w-110-px{
    width:110px !important;
}





.v-preview-cs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

/* Agent logo */
.v-preview-cs img {
    display: block;
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* Status badge */
.v-preview-cs span {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Status icon */
.v-preview-cs span i {
    font-size: 10px;
}

/* Example status styles */
.v-preview-cs .bg-success,
.v-preview-cs .status-active {
    background: #d1fae5;
    color: #047857;
}

.v-preview-cs .bg-danger,
.v-preview-cs .status-inactive {
    background: #fee2e2;
    color: #b91c1c;
}

.v-preview-cs .bg-warning,
.v-preview-cs .status-pending {
    background: #fef3c7;
    color: #b45309;
}

.v-preview-cs .bg-info {
    background: #dbeafe;
    color: #1d4ed8;
}

.v-preview-cs span.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}



.v-preview-widget-cs {
    margin-top: 16px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
}

.v-preview-widget-cs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.v-preview-widget-cs li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: #667085;
    font-size: 13px;
    border-bottom: 1px solid #f0f2f4;
}

.v-preview-widget-cs li:last-child {
    border-bottom: none;
}

/* Icon circle */
.v-preview-widget-cs li::before {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f5ff;
    color: #3b67d9;
    font-size: 13px;
     content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Label + value */
.v-preview-widget-cs li {
    font-weight: 500;
}

.v-preview-widget-cs li span {
    margin-left: auto;
    max-width: 65%;
    color: #101828;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    line-height: 1.5;
    word-break: break-word;
}

/* Address */
.v-preview-widget-cs li:nth-child(3) {
    align-items: flex-start;
}

.v-preview-widget-cs li:nth-child(3) span {
    max-width: 70%;
}

/* Hover */
.v-preview-widget-cs li:hover {
    background: #fafbfc;
}


.prev-v-info {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e7e9ed;
    border-radius: 12px;
    /*box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;*/
}

/* Heading */
.prev-v-info h6 {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 10px;
    color: #1d2939;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #eef0f2;
}

.prev-v-info h6::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    color: #3b67d9;
}
.prev-v-info-doc h6 {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 10px;
    color: #1d2939;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #eef0f2;
}

.prev-v-info-doc h6::before {
    content: "\f15b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    color: #3b67d9;
}

/* List */
.prev-v-info ul {
   list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prev-v-info li {
    display: flex;
    align-items: center;
    justify-content:flex-start;
    gap: 15px;
    /*padding: 9px 0;*/
    color: #667085;
    font-size: 14px;
    border-bottom: 1px solid #f2f3f5;
}

.prev-v-info li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.prev-v-info li:first-child {
    padding-top: 0;
}

/* Value */
.prev-v-info li span {
    color: #1d2939;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* Hover */
.prev-v-info li:hover span {
    color: #3b67d9;
}




.program-widget-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 245px;
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(1, 42, 107, 0.07);
    transition: all 0.25s ease;
}

.program-widget-card:hover {
    transform: translateY(-4px);
    border-color: rgba(23, 105, 210, 0.25);
    box-shadow: 0 12px 30px rgba(1, 42, 107, 0.13);
}


/* =========================================
   HEADER
========================================= */

.program-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(
        135deg,
        #012A6B 0%,
        #1769d2 100%
    );
}

.program-widget-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    backdrop-filter: blur(5px);
}

.program-widget-badge i {
    font-size: 11px;
}


/* =========================================
   ACTIONS
========================================= */

.program-widget-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.program-widget-view,
.program-widget-share {
    border: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.program-widget-view {
    padding: 6px 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
}

.program-widget-view:hover {
    background: #ffffff;
    color: #012A6B;
}

.program-widget-share {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7px;
}

.program-widget-share:hover {
    background: #ffffff;
    color: #1769d2;
}

.program-widget-share i {
    font-size: 12px;
}


/* =========================================
   BODY
========================================= */

.program-widget-body {
    flex: 1;
    padding: 20px 18px 16px;
}

.program-widget-title {
    margin: 0 0 16px;
    color: #172b4d;
    font-size: 18px;
    font-weight:600;
    line-height: 1.35;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =========================================
   TAGS
========================================= */

.program-widget-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.program-widget-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 7px 10px;
    color: #475467;
    background: #f5f8fc;
    border: 1px solid #e7edf5;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
}

.program-widget-tag i {
    flex-shrink: 0;
    color: #1769d2;
    font-size: 11px;
}

.program-widget-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================
   FOOTER
========================================= */

.program-widget-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 12px 12px;
    padding: 12px 13px;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 10px;
}


/* Duration */

.program-widget-duration {
    display: flex;
    align-items: center;
    gap: 10px;
}

.program-widget-duration-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1769d2;
    background: #eaf2ff;
    border-radius: 8px;
}

.program-widget-duration-icon i {
    font-size: 13px;
}

.program-widget-duration-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.program-widget-label {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 500;
}

.program-widget-duration-content strong {
    color: #172b4d;
    font-size: 13px;
    font-weight: 700;
}


/* Arrow */

.program-widget-arrow {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #012A6B 0%,
        #1769d2 100%
    );
    border-radius: 50%;
    transition: all 0.25s ease;
}

.program-widget-arrow i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.program-widget-card:hover .program-widget-arrow {
    box-shadow: 0 4px 10px rgba(23, 105, 210, 0.3);
}

.program-widget-card:hover .program-widget-arrow i {
    transform: translateX(2px);
}


.program-preview-info {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}



/* Program Name */
.program-preview-info h3 {
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf0f5;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: #172033;
}

/* Details List */
.program-preview-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

/* Individual Detail */
.program-preview-info li {
    position: relative;
    padding: 12px;
    margin: 0;
    color: #697386;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #f0f2f6;
    transition: background 0.25s ease;
}

/* Vertical separator */
.program-preview-info li:nth-child(odd) {
    border-right: 1px solid #f0f2f6;
}



/* Value */
.program-preview-info li span {
    color: #202939;
    font-weight: 600;
    margin-left: 5px;
}

/* Danger / Deadline */
.program-preview-info li .text-danger {
    color: #dc3545 !important;
    font-weight: 700;
}

/* Brochure */
.program-preview-info .brochure-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 5px;
    padding: 8px 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    transition: all 0.25s ease;
}

/* PDF / document icon */
.program-preview-info .brochure-open-btn::before {
    content: "↗";
    font-size: 15px;
    line-height: 1;
}

/* Brochure hover */
.program-preview-info .brochure-open-btn:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(79, 70, 229, 0.35);
    background: linear-gradient(135deg, #4338ca, #4f46e5);
}

/* Remove bottom border from last row */
.program-preview-info li:nth-last-child(-n + 2) {
    border-bottom: none;
}





.desc-program-dt {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    overflow: hidden;
}



/* Section Heading */
.desc-program-dt h6 {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f5;

    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
    color: #172033;
}

/* Small accent line under heading */
.desc-program-dt h6::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 55px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
}

/* Description Content */
.desc-program-dt > div {
    color: #5f6b7a;
    font-size: 15px;
    line-height: 1.8;
}

/* Paragraphs */
.desc-program-dt > div p {
    margin: 0 0 15px;
}

.desc-program-dt > div p:last-child {
    margin-bottom: 0;
}

/* Headings inside description */
.desc-program-dt > div h1,
.desc-program-dt > div h2,
.desc-program-dt > div h3,
.desc-program-dt > div h4,
.desc-program-dt > div h5,
.desc-program-dt > div h6 {
    color: #202939;
    font-weight: 700;
    margin-top: 22px;
    margin-bottom: 10px;
}

.desc-program-dt > div h1:first-child,
.desc-program-dt > div h2:first-child,
.desc-program-dt > div h3:first-child,
.desc-program-dt > div h4:first-child,
.desc-program-dt > div h5:first-child,
.desc-program-dt > div h6:first-child {
    margin-top: 0;
}

/* Lists */
.desc-program-dt > div ul,
.desc-program-dt > div ol {
    margin: 12px 0 18px;
    padding-left: 22px;
}

.desc-program-dt > div li {
    margin-bottom: 7px;
}

/* Unordered list */
.desc-program-dt > div ul li::marker {
    color: #4f46e5;
}

/* Links */
.desc-program-dt > div a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}

.desc-program-dt > div a:hover {
    text-decoration: underline;
}

/* Blockquote */
.desc-program-dt > div blockquote {
    margin: 18px 0;
    padding: 14px 18px;
    border-left: 4px solid #4f46e5;
    background: #f7f8ff;
    border-radius: 0 8px 8px 0;
    color: #4b5563;
    font-style: italic;
}

/* Tables inside description */
.desc-program-dt > div table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
}

.desc-program-dt > div th,
.desc-program-dt > div td {
    padding: 11px 13px;
    border: 1px solid #e7eaf0;
    text-align: left;
}

.desc-program-dt > div th {
    background: #f7f8fc;
    color: #202939;
    font-weight: 600;
}

/* Empty description */
.desc-program-dt > div .mb-0 {
    color: #98a2b3;
    font-style: italic;
}


.pragram-info-show-bottom {
    margin-top: 25px;
}

/* Main Section Heading */
.pragram-info-show-bottom > h6 {
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 14px;

    color: #172033;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;

    border-bottom: 1px solid #e8ebf1;
}

.pragram-info-show-bottom > h6::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;

    width: 60px;
    height: 3px;

    border-radius: 10px;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
}


/* =========================================
   UNIVERSITY CARD
========================================= */

.desc-program-dt-cs {
    position: relative;

    height: 100%;
    padding: 20px;

    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 15px;


    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}




/* =========================================
   UNIVERSITY NAME
========================================= */

.desc-program-dt-cs > h5 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    margin: 0;

    padding-bottom: 16px;

    color: #172033;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    border-bottom: 1px solid #edf0f4;
}

/* University Code */
.desc-program-dt-cs > h5 .text-danger {
    display: inline-flex;
    align-items: center;

    padding: 4px 9px;

    border-radius: 6px;

    background: #fff1f2;
    color: #dc3545 !important;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}


/* =========================================
   INFORMATION GROUP
========================================= */

.list-program-dt-cs {
    padding: 0;
}

.list-program-dt-cs + .list-program-dt-cs {
    margin-top: 18px !important;
    padding-top: 18px;

    border-top: 1px dashed #e5e8ee;
}


/* =========================================
   INFORMATION LIST
========================================= */

.list-program-dt-cs ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    list-style: none;

    margin: 0;
    padding: 0;

    border: 1px solid #edf0f4;
    border-radius: 10px;

    overflow: hidden;
}


/* Individual Item */
.list-program-dt-cs ul li {
    min-width: 0;

    margin: 0;
    padding: 12px 14px;

    background: #ffffff;

    color: #737d8d;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;

    border-bottom: 1px solid #edf0f4;

    transition: background 0.2s ease;
}


/* Right Border */
.list-program-dt-cs ul li:nth-child(odd) {
    border-right: 1px solid #edf0f4;
}


/* Remove bottom border from last row */
.list-program-dt-cs ul li:nth-last-child(-n + 2) {
    border-bottom: none;
}




/* =========================================
   VALUE
========================================= */

.list-program-dt-cs ul li > span {
    color: #273142;

    font-weight: 600;
    margin-left: 4px;

    overflow-wrap: anywhere;
}


/* =========================================
   WEBSITE LINK
========================================= */

.list-program-dt-cs ul li a {
    color: #4f46e5;
    font-weight: 600;

    text-decoration: none;

    transition: color 0.2s ease;
}

.list-program-dt-cs ul li a:hover {
    color: #3730a3;
    text-decoration: underline;
}


/* =========================================
   STATUS
========================================= */

.list-program-dt-cs .status-green {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 9px;

    border-radius: 20px;

    background: #ecfdf3;
    color: #16834a !important;

    font-size: 11px;
    font-weight: 700;
}

.list-program-dt-cs .status-green::before {
    content: "";
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #22c55e;
}


.list-program-dt-cs .status-red {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 9px;

    border-radius: 20px;

    background: #fff1f2;
    color: #dc3545 !important;

    font-size: 11px;
    font-weight: 700;
}

.list-program-dt-cs .status-red::before {
    content: "";
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #ef4444;
}


/* =========================================
   EMPTY STATE
========================================= */

.pragram-info-show-bottom .col-lg-12 > p {
    padding: 25px;

    margin: 0;

    text-align: center;

    color: #98a2b3;

    background: #f8f9fb;
    border: 1px dashed #dfe3ea;
    border-radius: 12px;

    font-size: 14px;
    font-style: italic;
}


/* =========================================
   FEE SECTION - SUBTLE DIFFERENTIATION
========================================= */

/* Second information block */
.desc-program-dt-cs .list-program-dt-cs:nth-of-type(2) ul {
    background: #fcfcff;
}


/* Highlight Total Estimated Fee */
.desc-program-dt-cs .list-program-dt-cs:nth-of-type(2) li:last-child {
    background: #f6f7ff;
}

.desc-program-dt-cs .list-program-dt-cs:nth-of-type(2) li:last-child > span {
    color: #4f46e5;
    font-size: 14px;
    font-weight: 700;
}



.u-details-preview-data-cs {
    width: 100%;
    margin-top: 15px;
}

.u-details-preview-data-cs ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    list-style: none;
    margin: 0;
    padding: 0;
}


/* =========================================
   COMMON CARD
========================================= */

.u-details-preview-data-cs li {
    position: relative;
    overflow: hidden;

    min-height: 72px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

    padding: 14px 16px 14px 20px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 11px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    transition: all 0.25s ease;
}


/* =========================================
   DARK BACKGROUND COLORS
========================================= */

/* 1 - Red */
.u-details-preview-data-cs li:nth-child(1) {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
}

.u-details-preview-data-cs li:nth-child(1)::before {
    background: #f87171;
}


/* 2 - Blue */
.u-details-preview-data-cs li:nth-child(2) {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

.u-details-preview-data-cs li:nth-child(2)::before {
    background: #60a5fa;
}


/* 3 - Green */
.u-details-preview-data-cs li:nth-child(3) {
    background: linear-gradient(135deg, #14532d, #166534);
}

.u-details-preview-data-cs li:nth-child(3)::before {
    background: #4ade80;
}


/* 4 - Orange */
.u-details-preview-data-cs li:nth-child(4) {
       background: linear-gradient(135deg, #b98e0c, #a78316);
}

.u-details-preview-data-cs li:nth-child(4)::before {
    background: #fb923c;
}


/* 5 - Cyan */
.u-details-preview-data-cs li:nth-child(5) {
    background: linear-gradient(135deg, #164e63, #155e75);
}

.u-details-preview-data-cs li:nth-child(5)::before {
    background: #22d3ee;
}


/* 6 - Purple */
.u-details-preview-data-cs li:nth-child(6) {
    background: linear-gradient(135deg, #581c87, #6b21a8);
}

.u-details-preview-data-cs li:nth-child(6)::before {
    background: #c084fc;
}



/* =========================================
   LABEL
========================================= */

.u-details-preview-data-cs li label {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* =========================================
   VALUE
========================================= */

.u-details-preview-data-cs li {
    color: #ffffff;
}



/* =========================================
   STATUS BADGES
========================================= */

.u-details-preview-data-cs .status-green,
.u-details-preview-data-cs .status-red {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    width: fit-content;

    padding: 5px 10px;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}


/* Active */
.u-details-preview-data-cs .status-green {
    background: rgba(74, 222, 128, 0.18);
    color: #86efac !important;

    border: 1px solid rgba(134, 239, 172, 0.25);
}

.u-details-preview-data-cs .status-green::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #4ade80;

    box-shadow: 0 0 7px rgba(74, 222, 128, 0.8);
}


/* Inactive */
.u-details-preview-data-cs .status-red {
    background: rgba(248, 113, 113, 0.18);
    color: #fca5a5 !important;

    border: 1px solid rgba(252, 165, 165, 0.25);
}

.u-details-preview-data-cs .status-red::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #f87171;

    box-shadow: 0 0 7px rgba(248, 113, 113, 0.7);
}



.payment-page-btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    padding: 16px;

    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;

    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
    margin-bottom:15px;
}


/* =========================================
   COMMON BUTTON
========================================= */

.payment-page-btns .btn-action {
    position: relative;

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

    min-height: 40px;
    padding: 9px 16px;

    border: 1px solid transparent;
    border-radius: 8px;

    color: #ffffff !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* =========================================
   UGE PAYMENT - BLUE
========================================= */

.payment-page-btns .btn-uge {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;

    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
}

.payment-page-btns .btn-uge:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.30);
}


/* =========================================
   COUNSELLOR COMMISSION - PURPLE
========================================= */

.payment-page-btns .btn-counsellor {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-color: #6d28d9;

    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.22);
}

.payment-page-btns .btn-counsellor:hover {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(124, 58, 237, 0.30);
}


/* =========================================
   AGENT COMMISSION - GREEN
========================================= */

.payment-page-btns .btn-agent {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-color: #15803d;

    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.22);
}

.payment-page-btns .btn-agent:hover {
    background: linear-gradient(135deg, #15803d, #166534);

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(22, 163, 74, 0.30);
}


/* =========================================
   EMAIL REMINDER - ORANGE
========================================= */

.payment-page-btns .btn-reminder {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #d97706;

    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.22);
}

.payment-page-btns .btn-reminder:hover {
    background: linear-gradient(135deg, #d97706, #b45309);

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(245, 158, 11, 0.30);
}


/* =========================================
   TRANSACTION HISTORY - CYAN
========================================= */

.payment-page-btns .btn-history {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    border-color: #0e7490;

    box-shadow: 0 4px 10px rgba(8, 145, 178, 0.22);
}

.payment-page-btns .btn-history:hover {
    background: linear-gradient(135deg, #0e7490, #155e75);

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(8, 145, 178, 0.30);
}


/* =========================================
   BACK - DARK / GRAY
========================================= */

.payment-page-btns .btn-back {
    background: linear-gradient(135deg, #475569, #334155);
    border-color: #334155;

    box-shadow: 0 4px 10px rgba(71, 85, 105, 0.20);
}

.payment-page-btns .btn-back:hover {
    background: linear-gradient(135deg, #334155, #1e293b);

    transform: translateY(-2px);

    box-shadow: 0 7px 16px rgba(71, 85, 105, 0.28);
}


/* =========================================
   ACTIVE / CLICK EFFECT
========================================= */

.payment-page-btns .btn-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.15);
}


/* =========================================
   FOCUS
========================================= */

.payment-page-btns .btn-action:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.25);
    outline-offset: 2px;
}


/* =========================================
   OPTIONAL: SMALL ACTION ICON STYLE
========================================= */

.payment-page-btns .btn-action i {
    margin-right: 6px;
    font-size: 13px;
}

.modal-pay-widget {
    position: relative;
    padding: 18px 20px;
   background: linear-gradient(135deg, #012A6B 0%, #164b91 100%);
    border: 1px solid #334155;
    border-radius: 14px;
    overflow: hidden;
}



/* Heading */
.modal-pay-widget h5 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* Status */
.modal-pay-widget p {
       display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 13px;
    background: rgb(248 248 249 / 15%);
    border: 1px solid rgb(226 229 227 / 30%);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* Status dot */
.modal-pay-widget p::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

/* Hover */
.modal-pay-widget {
    transition: all 0.25s ease;
}
.modal-transaction-widget {
    position: relative;
    padding: 18px 20px;
       background: linear-gradient(135deg, #075c3b 0%, #087f50 100%);
    /*border: 1px solid #4f46e5;*/
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
}


/* Heading */
.modal-transaction-widget h5 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* Student Name */
.modal-transaction-widget p {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
}



.feeModal-info-cs {
       position: relative;
    padding: 18px;
    background: #cddef2;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    /* box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08); */
    overflow: hidden;
}



/* Main rows */
.feeModal-info-cs > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
}

.feeModal-info-cs > p + p {
    margin-top: 10px;
}

/* Values */
.feeModal-info-cs strong {
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
}

/* Amount */
#feePayableAmountText {
    color: #2563eb;
    font-size: 17px;
}

/* Refund Status */
#feeRefundStatusText {
    color: #d97706;
}

/* Fine section */
.feeModal-info-fine {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.feeModal-info-fine p,
.feeModal-info-fine > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 13px 15px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.feeModal-info-fine strong {
    color: #ea580c;
}

/* Fine percentage */
#feeFinePercentageText {
    color: #f97316;
}

/* Hover */
.feeModal-info-cs > p,
.feeModal-info-fine p,
.feeModal-info-fine > span {
    transition: all 0.2s ease;
}





.conusellor-show-info {
    /*padding: 20px;*/
    background: #ffffff;
    /*border: 1px solid #e2e8f0;*/
    border-radius: 16px;
}

/* Profile column */
.conusellor-show-info .col-lg-3 > div {
    text-align: center;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    height: 100%;
}

/* Counsellor image */
.conusellor-show-info img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50% !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 5px 18px rgba(59, 130, 246, 0.20);
    background: #f1f5f9;
}

/* Photo label */
.conusellor-show-info .small {
    display: block;
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 12px;
    font-weight: 600;
}

/* Information wrapper */
.counsellor-info-modal-list-info {
    height: 100%;
}

/* Information list */
.counsellor-info-modal-list-info ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
}

/* Individual item */
.counsellor-info-modal-list-info li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 85px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    transition: all 0.2s ease;
}

/* Label */
.counsellor-info-modal-list-info li label {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

/* Value */
.counsellor-info-modal-list-info li span {
    color: #222;
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}

.fc-of-inp input{
    width:18px;
    height:18px;
}
.fc-of-inp label{
  margin-bottom: 6px !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}



.dm-info-row .dm-widget {
    position: relative;
    height: 100%;
    padding: 16px 18px 16px 52px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
   /*box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.25s ease;
    overflow: hidden;
}

/* Icon container */
.dm-info-row .dm-widget::before {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
}

/* Student icon */
.dm-info-row .col-md-4:nth-child(1) .dm-widget::before {
    content: "\f007";
    color: #2563eb;
    background: #eff6ff;
}

/* Application ID icon */
.dm-info-row .col-md-4:nth-child(2) .dm-widget::before {
    content: "\f2bb";
    color: #7c3aed;
    background: #f5f3ff;
}

/* Student Status icon */
.dm-info-row .col-md-4:nth-child(3) .dm-widget::before {
    content: "\f058";
    color: #16a34a;
    background: #f0fdf4;
}

/* Label */
.dm-info-row .dm-widget strong {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Value */
.dm-info-row .dm-widget {
    font-weight: 600;
}

.dm-info-row .dm-widget strong + * {
    color: #1e293b;
}

/* Colored left accent */
.dm-info-row .col-md-4:nth-child(1) .dm-widget {
    border-left: 4px solid #3b82f6;
}

.dm-info-row .col-md-4:nth-child(2) .dm-widget {
    border-left: 4px solid #8b5cf6;
}

.dm-info-row .col-md-4:nth-child(3) .dm-widget {
    border-left: 4px solid #22c55e;
}


.titl-dm {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 18px !important;
    border-radius: 10px;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
}

/* Icon */
.titl-dm > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background:#0f477f;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.22);
}




.dm-visa-widget {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction:column;
    gap: 8px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #e1e5eb;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

/* Label */
.dm-visa-widget strong {
    color: #555;
    font-weight: 600;
}

/* Visa number */
.dm-visa-widget {
    border-left: 3px solid #3b82f6;
}


.lead-profile-view {
        display: flex;
    align-items: center;
    gap: 9px;
    padding: 17px;
    /*background: #f1f5fe;*/
    border: 1px solid #d6d6d6;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}



/* Image column */
.lead-profile-view-img {
    width: 150px;
    height: 150px;
    margin: auto;
    padding: 5px;
    background: linear-gradient(135deg, #012A6B 0%, #1769d2 100%) !important;
    border-radius: 50%;
}

.lead-profile-view-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
}

/* Right content */
.lead-profile-view-right {
    padding-left: 10px;
}

.lead-profile-view-right h3 {
    margin: 0 0 18px;
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.4px;
}

/* Details list */
.lead-profile-view-right ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px;
}

.lead-profile-view-right ul li {
    position: relative;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
}



.lead-profile-view-right ul li span {
    display: block;
    margin-top: 4px;
    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
}


.lead-card {
    position: relative;
    width: 100%;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 20px;
    overflow: hidden;
}



/* ==========================================
   HEADER
========================================== */

.lead-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.lead-card__profile {
    display: flex;
    align-items: start;
    gap: 20px;
    width:100%;
}


/* ==========================================
   AVATAR
========================================== */

.lead-card__avatar {
    position: relative;
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    padding: 4px;
    border-radius: 15px;
}

.lead-card__avatar::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 15px;
}

.lead-card__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 15px;
    border: 4px solid #ffffff;
}


/* ==========================================
   IDENTITY
========================================== */

.lead-card__identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width:100%;
}

.lead-card__label {
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lead-card__identity h2 {
    margin: 0;
    color: #172033;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.lead-card__code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 13px;
}

.lead-card__code span {
    color: #94a3b8;
}

.lead-card__code strong {
    color: #475569;
    font-weight: 600;
}



/* ==========================================
   DIVIDER
========================================== */

.lead-card__divider {
    height: 1px;
    margin: 25px 0;
    background: #eef2f6;
}


/* ==========================================
   DETAILS GRID
========================================== */

.lead-card__details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width:100%;
}


/* ==========================================
   INFO ITEM
========================================== */

.lead-info {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 13px 15px;
    background: #f8fafc;
    border: 1px solid #edf1f5;
    border-radius: 13px;
    transition: all 0.25s ease;
}



/* ==========================================
   INFO ICON
========================================== */

.lead-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    background: #eef2ff;
    color: #6366f1;

    font-size: 15px;
}


/* ==========================================
   INFO CONTENT
========================================== */

.lead-info__content {
    min-width: 0;
}

.lead-info__content span {
    display: block;
    margin-bottom: 3px;

    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lead-info__content strong {
    display: block;

    overflow: hidden;
    color: #334155;

    font-size: 14px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.std-counsellor-widget-cs-list ul{
    display:flex;
    justify-content:center;
    gap:10px;
}


.std-counsellor-widget-cs-list ul li{
    width:25%;
      display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    background-color:#fff;
    
}


.std-counsellor-widget-cs-list > ul > li:last-child{
        margin-bottom: 7px;
}


/* Main Select2 box */ .o-f-inp .select2-container { width: 100% !important; } .o-f-inp .select2-container .select2-selection--multiple { min-height: 48px; padding: 5px 42px 5px 8px; background-color: #ffffff !Important; border: 1px solid #dfe5ec !important; border-radius: 10px; box-shadow: none; transition: all 0.2s ease; } /* Focus */ .o-f-inp .select2-container--open .select2-selection--multiple, .o-f-inp .select2-selection--multiple:focus-within { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10); } /* ========================================= SELECTED TAGS ========================================= */ .o-f-inp .select2-selection__rendered { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 !important; } .o-f-inp .select2-selection__choice { display: inline-flex !important; align-items: center; margin: 0 !important; padding: 5px 9px 5px 6px !important; color: #4338ca !important; background: #eef2ff !important; border: 1px solid #e0e7ff !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500; } /* Tag text */ .o-f-inp .select2-selection__choice__display { padding-left: 4px !important; color: #4338ca; } /* ========================================= REMOVE X BUTTON ========================================= */ .o-f-inp .select2-selection__choice__remove { position: relative !important; display: inline-flex !important; align-items: center; justify-content: center; width: 18px !important; height: 18px !important; margin: 0 4px 0 0 !important; padding: 0 !important; color: #6366f1 !important; border: 0 !important; border-right: 0 !important; font-size: 15px !important; font-weight: 500; transition: all 0.15s ease; } .o-f-inp .select2-selection__choice__remove:hover { color: #dc2626 !important; background: transparent !important; } /* ========================================= CLEAR ALL BUTTON ========================================= */ .o-f-inp .select2-selection__clear { position: absolute !important; top: 50%; right: 12px; display: flex !important; align-items: center; justify-content: center; width: 25px; height: 25px; margin: 0 !important; padding: 0 !important; color: #94a3b8 !important; background: #f1f5f9 !important; border: 0 !important; border-radius: 50%; transform: translateY(-50%); transition: all 0.2s ease; } .o-f-inp .select2-selection__clear:hover { color: #ef4444 !important; background: #fee2e2 !important; } /* ========================================= SEARCH INPUT ========================================= */ .o-f-inp .select2-search--inline { margin: 0 !important; padding: 0 !important; } .o-f-inp .select2-search__field { min-width: 70px !important; height: 30px !important; margin: 2px 0 !important; padding: 3px 5px !important; color: #334155; font-size: 13px !important; border: 0 !important; outline: none !important; box-shadow: none !important; } .o-f-inp .select2-search__field::placeholder { color: #94a3b8; } /* ========================================= DROPDOWN ========================================= */ .select2-container--default .select2-dropdown { margin-top: 5px; overflow: hidden; background: #ffffff; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); } /* Search box inside dropdown */ .select2-container--default .select2-search--dropdown { padding: 10px; background: #ffffff; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 40px; padding: 8px 12px; color: #334155; border: 1px solid #e2e8f0 !important; border-radius: 8px; outline: none; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08); } /* ========================================= DROPDOWN OPTIONS ========================================= */ .select2-container--default .select2-results__option { padding: 10px 13px; color: #475569; font-size: 13px; transition: all 0.15s ease; } .select2-container--default .select2-results__option--highlighted[aria-selected] { color: #4338ca !important; background: #eef2ff !important; } .select2-container--default .select2-results__option[aria-selected="true"] { color: #4338ca; background: #f5f7ff; font-weight: 500; } /* ========================================= CHECKBOX STYLE ========================================= */ .select2-results__option[aria-selected="true"]::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 8px; color: #ffffff; background: #6366f1; border-radius: 4px; font-size: 11px; font-weight: 700; } .select2-results__option[aria-selected="false"]::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 4px; } /* ========================================= SCROLLBAR ========================================= */ .select2-results__options { max-height: 250px !important; } .select2-results__options::-webkit-scrollbar { width: 5px; } .select2-results__options::-webkit-scrollbar-track { background: transparent; } .select2-results__options::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }


.top-pd-page-btn{
    padding-top:25px;
}






.agent-profile-view {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Image Container */
.agent-preview-profile-img {
  width: 100%;
 height:150px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agent-preview-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Profile Details Content */
.agent-preview-profile-right h3 {
  color: #0f172a;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f1f5f9;
}

/* Key-Value List Grid */
.agent-preview-profile-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
 grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
}

.agent-preview-profile-right ul li {
 color: #5f5f5f;
    font-size: 13px;
    font-weight: 500;
    padding: 0.625rem 0.875rem;
    background-color: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.agent-preview-profile-right ul li span {
  color: #000;
  font-weight: 400;
  text-align: right;
  word-break: break-word;
   font-size: 13px;
}




.csx-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius:12px !Important;
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);*/
  margin-bottom:10px !important;
}

/* Rounded Icon Badge */
.csx-icon-box {
  width: 38px;
  height: 38px;
  background-color: #eff6ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.csx-icon-box i {
  color: #2563eb;
  font-size: 0.9375rem;
}

/* Info Section */
.csx-info {
  display: flex;
  flex-direction: column;
}

.csx-label-cs {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.csx-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}



.card-course-widget {
 background: linear-gradient(135deg, #e3ecff 0%, #bacfe9 100%) !important;
    border-radius: 20px;
    padding: 1.5rem;
    /* font-family: system-ui, -apple-system, sans-serif; */
    max-width: 480px;
    position: relative;
    overflow: hidden;
    /* box-shadow: 0 12px 30px -5px rgba(1, 42, 107, 0.4); */
    color: #ffffff;
}
      
.card-course-widget {
    position: relative;
    background: #ebf3fd;
    overflow: hidden;
}

/* Soft decorative glow */
.card-course-widget::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    top: -180px;
    left: -150px;
       background: #0d6efd12;
    border-radius: 50%;
    pointer-events: none;
}


.card-course-widget::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -150px;
    bottom: -150px;
        background: #0d6efd12;
    border-radius: 50%;
    pointer-events: none;
}
/* Background Geometric Shapes */
.card-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.shape-1 {
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.06);
  top: -50px;
  right: -40px;
}

.shape-2 {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.04);
  bottom: -30px;
  left: -20px;
}

/* Relative Wrapper for Content */
.card-course-widget__content {
  position: relative;
  z-index: 2;
}

/* Top Status Badge */
.card-course-widget__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.card-course-widget__status {
background: rgb(16 136 53 / 98%);
    backdrop-filter: blur(8px);
    color: #fff;
    /* border: 1px solid rgba(56, 189, 248, 0.3); */
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Course Title */
.card-course-widget__title {
  color: #000;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1rem 0;
}

/* Category Tags */
.card-course-widget__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.card-course-widget__tag {
background: #0e3893;
    color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-course-widget__tag i {
  font-size: 0.75rem;
  color: #7dd3fc;
}

/* Glassmorphism Details Box */
.card-course-widget__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
     background: #fff;
  backdrop-filter: blur(12px);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 1.25rem;
}

.card-course-widget__detail {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.card-course-widget__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #2055c9;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-course-widget__detail strong {
  font-size: 0.875rem;
  color: #000;
  font-weight: 600;
  word-break: break-word;
}

/* Action Button */
.card-course-widget__actions {
  display: flex;
  width: 100%;
}

.card-course-widget-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  color: #012a6b;
  border: none;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  cursor: default;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-course-widget-button i {
  color: #16a34a; /* Green checkmark */
  font-size: 1rem;
}
.widget-preview-listing-lat ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual Card Styling */
.widget-preview-listing-lat li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}


/* FontAwesome Icon styling */
.widget-preview-listing-lat li .icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eff6ff;
  color: #2563eb;
  border-radius: 6px;
  font-size: 14px;
  margin:0 !important;
}

/* Content block layout */
.widget-preview-listing-lat .item-content {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents flex items from overflowing */
}

/* Label text */
.widget-preview-listing-lat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 2px;
}

/* Value text */
.widget-preview-listing-lat .value {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.widget-preview-listing-second-cs {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}



.widget-preview-listing-second-cs h6 {
  font-size: 16px;
  font-weight: 500;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
  margin-bottom:12px;
}

.widget-preview-listing-second-cs .timeline-badge {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  background: #eeef2;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 2-Column Grid Setup */
.widget-preview-listing-second-cs ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual Data Tile */
.widget-preview-listing-second-cs li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  background-color: #f8fafc;
  border-radius: 0 8px 8px 0;
  transition: all 0.2s ease-in-out;
}


/* Notes Span Full Width */
.widget-preview-listing-second-cs li.full-width {
  grid-column: 1 / -1;
}

/* Label Styling */
.widget-preview-listing-second-cs label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
  cursor: pointer;
}

/* Value / Date Styling */
.widget-preview-listing-second-cs span {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  word-break: break-word;
}


@media (max-width: 1200px) {
    .program-info-grid{
         grid-template-columns: repeat(1, 1fr) !important;
    }
}
@media (max-width: 1100px) {
    /*.app-prev-top__steps{*/
    /*flex-wrap: wrap;*/
    /*justify-content: flex-start;*/
    /*gap:20px;*/
    /*}*/
    /*.app-prev-top__step{*/
    /*    width:30%;*/
    /*}*/
    /*.app-prev-top__connector{*/
    /*    display:none;*/
    /*}*/
    .app-prev-top__steps {
        overflow-x: auto;
        justify-content:flex-start;
    }
    .app-prev-top__step{
        min-width:200px;
    }
        .app-prev-top__connector {
        top: 29px;
        left: 0;
        right: 0px;
        width: 137%;
    }
}
@media (max-width: 991px) {
    .app-prv-info-header{
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        gap:15px;
    }
    .std-counsellor-widget-cs-list ul{
        flex-wrap:wrap;
    }
    .std-counsellor-widget-cs-list ul li{
        width:48%;
    }
    .lead-card__profile{
        flex-direction:column;
    }
    .lead-card__details,.leads-show-dt ul{
        grid-template-columns: repeat(1, 1fr);
    }
    .top-pd-page-btn{
        padding-top:7px;
    }
    .filter-index .col-lg-3{
        margin-bottom:10px !important;
    }
    .masters-btns ul{
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .g-settings-top-menu ul{
        display:Flex;
         flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        gap:5px;
    }
    .g-settings-top-menu ul li{
        width:100%;
    }
     .program-info-grid{
         grid-template-columns: repeat(1, 1fr) !important;
    }
    .agent-preview-profile-right ul{
         grid-template-columns: repeat(1, 1fr) !important;
    }
}
@media (max-width: 640px) {
  .widget-preview-listing-lat ul,.program-preview-info ul,.list-program-dt-cs ul  {
   display: flex;
        flex-direction: column;
  }
   .widget-preview-listing-second-cs ul {
    display: flex;
        flex-direction: column;
  }
  .program-preview-info li,.list-program-dt-cs ul li{
      justify-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 7px 0;
  }
  .program-preview-info li span,.list-program-dt-cs ul li span{
      margin-left:0 !important;
  }
  .program-preview-info{
      padding:15px;
  }
  .program-preview-info h3{
      font-size:18px;
  }
  .app-prv-info-student-details > div{
      justify-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
  }
  .app-prv-info-divider,.app-prv-info-colon,.app-prv-info-icon{
      display:none;
  }
  .app-prv-info-actions,.app-prv-info-item{
       justify-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
  }
  .app-prv-info-value{
      color:#000;
  }
  .app-prv-info-item{
      gap: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
  }
  .app-prv-info-summary-row{
      justify-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
  }
  .app-prv-info-summary-row strong{
      color: #315e82;
    font-weight: 600;
    text-align: left;
    font-size: 13px
  }
  .std-counsellor-widget-cs > ul > li{
       justify-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
  }
  .program-detail-header{
      flex-direction:column;
  }
}

@media screen and (max-width:768px){
    .page-title ol{
        display:none;
    }
    .u-details-preview-data-cs ul{
          grid-template-columns: repeat(1, 1fr) !important;
    }
     .std-counsellor-widget-cs-list ul li{
         width:100%;
     }
      .masters-btns ul{
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .agent-preview-profile-right ul li{
          justify-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }
    .agent-preview-profile-right ul li span{
        text-align:left;
    }
}
@media screen and (max-width:567px){
    .card-course-widget__details{
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .card-course-widget{
            padding: 1rem;
    }
    .v-preview-cs{
        min-height: 220px;
    }
    .v-preview-widget-cs li{
            flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 12px;
        gap: 5px;
    }
    .v-preview-widget-cs li::before{
        content:unset !important;
    }
    .v-preview-widget-cs li span{
        margin-left:unset;
       max-width: 100% !important;
       text-align: left;
    }
    .prev-v-info ul{
            flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    }
    .prev-v-info li{
         flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    }
      .masters-btns ul{
        grid-template-columns: repeat(1, 1fr) !important;
    }
}
.status-report-box {
    margin-bottom:15px;
}
.biller-profile-view-widget {
   padding: 14px 16px;
    background-color: #d7e8ee69;
    /* border: 1px solid #e1e5ea; */
    border-radius: 8px;
}

.biller-profile-view-widget .form-label {
    display: block;
    margin-bottom: 5px !important;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.biller-profile-view-widget .fw-semibold {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}
.u-details-preview-cs {
    border-radius: 10px;
}

.u-details-preview-cs ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.u-details-preview-cs li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 48px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
     flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.u-details-preview-cs li label {
    /*flex: 0 0 90px;*/
    margin: 0;
    font-weight: 600;
    color: #000;
}

.u-details-preview-cs li a {
    color: #2563eb;
    text-decoration: none;
    word-break: break-all;
}

.u-details-preview-cs li a:hover {
    text-decoration: underline;
}

.u-details-preview-cs .status-green,
.u-details-preview-cs .status-red {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.u-details-preview-cs .status-green {
    color: #15803d;
    background: #dcfce7;
}

.u-details-preview-cs .status-red {
    color: #dc2626;
    background: #fee2e2;
}

/* Mobile */
@media (max-width: 768px) {
    .u-details-preview-cs ul {
        grid-template-columns: 1fr;
    }
    .u-details-preview-cs li{
         flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    }
    .u-details-preview-cs li label{
        flex:unset;
    }
}
#processReviewBody tr td{
    padding:15px 10px !important;
    color:#000 !important;
}
#processReviewBody tr:nth-child(1) {
    background-color: #f8d7da !important;
}

#processReviewBody tr:nth-child(2) {
    background-color: #d1ecf1 !important;
}

#processReviewBody tr:nth-child(3) {
    background-color: #d4edda !important;
}

#processReviewBody tr:nth-child(4) {
    background-color: #fff3cd !important;
}

#processReviewBody tr:nth-child(5) {
    background-color: #e2d9f3 !important;
}

#processReviewBody tr:nth-child(6) {
    background-color: #d6d8db !important;
}

#processReviewBody tr:nth-child(7) {
    background-color: #cce5ff !important;
}

.digital-clock-box {

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 265px;

    padding: 17px 20px;

    background: #fff;

}


.clock-icon {

        width: 47px;
    height: 47px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #012a6b12;
    color: #012a6b;
    font-size: 19px;

}


.clock-content {

    display: flex;

    flex-direction: column;

}


#digital-time {

    color: #102A50;

    font-size: 20px;

    font-weight:700;

    line-height: 1.2;

    /*letter-spacing: 1px;*/

    font-variant-numeric: tabular-nums;

}


.clock-content small {

    margin-top: 4px;

    color: #8794A7;

    font-size: 10px;

    font-weight: 500;

}












.student-view-card {
    position: relative;
    width: 100%;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #e8edf3;
    border-radius: 20px;
    overflow: hidden;
}



/* ==========================================
   HEADER
========================================== */

.student-view-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.student-view-card__profile {
    display: flex;
    align-items: start;
    gap: 20px;
    width:100%;
}


/* ==========================================
   AVATAR
========================================== */

.student-view-card__avatar {
    position: relative;
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    padding: 4px;
    border-radius: 15px;
}



.student-view-card__avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 15px;
    border: 4px solid #ffffff;
}


/* ==========================================
   IDENTITY
========================================== */

.student-view-card__identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width:100%;
}

.student-view-card__label {
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.student-view-card__identity h2 {
    margin: 0;
    color: #172033;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.student-view-card__code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 13px;
}

.student-view-card__code span {
    color: #94a3b8;
}

.student-view-card__code strong {
    color: #475569;
    font-weight: 600;
}



/* ==========================================
   DIVIDER
========================================== */

.student-view-card__divider {
    height: 1px;
    margin: 25px 0;
    background: #eef2f6;
}


/* ==========================================
   DETAILS GRID
========================================== */

.student-view-card__details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width:100%;
}


/* ==========================================
   INFO ITEM
========================================== */

.student-view-info {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 13px 15px;
    background: #f8fafc;
    border: 1px solid #edf1f5;
    border-radius: 13px;
    transition: all 0.25s ease;
}



/* ==========================================
   INFO ICON
========================================== */

.student-view-info__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    border-radius: 10px;

    background: #eef2ff;
    color: #6366f1;

    font-size: 15px;
}


/* ==========================================
   INFO CONTENT
========================================== */

.student-view-info__content {
    min-width: 0;
}

.student-view-info__content span {
    display: block;
    margin-bottom: 3px;

    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.student-view-info__content strong {
    display: block;

    overflow: hidden;
    color: #334155;

    font-size: 14px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-view-card__identity h2{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.student-view-card__identity h2 span{
    font-size: 17px;
    color: red;
}

.student-view-card__identity-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding-top: 10px;
}

.student-view-card__identity-2 .student-view-info{
    width: 33%;
}


.student-preview-address {
    background: #ffffff;
    border: 1px solid #e8ebf0;
    border-radius: 14px;
    padding: 24px;
}

.student-preview-address h6 {
    margin: 0 0 20px;
    color: #1e293b;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding-left: 14px;
}

.student-preview-address h6::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 4px;
    height: 18px;
    background: #4f46e5;
    border-radius: 4px;
}

.student-preview-address ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.student-preview-address ul li {
    background: #f8fafc;
    border-radius: 10px;
    padding: 13px 15px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.student-preview-address ul li label {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.student-preview-address ul li span {
    display: block;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

/* Address lines take full width */
.student-preview-address ul li:nth-child(1),
.student-preview-address ul li:nth-child(2) {
    grid-column: span 2;
}


.student-test-core {
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    padding: 24px;
}

.student-test-core h6 {
    margin: 0 0 20px;
    padding-left: 14px;
    position: relative;
    color: #1e293b;
    font-size: 18px;
    font-weight: 600;
}

.student-test-core h6::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: 20px;
    background: #4f46e5;
    border-radius: 4px;
}

.student-test-core ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
     flex-wrap: wrap;
}

.student-test-core ul li {
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    gap: 5px;
    width: 32%;
    flex-direction: column;
    border-bottom: 1px solid #cccccc8f;
    margin-bottom: 10px;
    padding-bottom: 8px;
   
}

.student-test-core ul li label {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.student-test-core ul li span {
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
}




.pdf-app-progress {
    display: flex;
    width: 100%;
    padding: 24px 20px 20px;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    gap: 5px;
}

.pdf-app-progress__item {
        width: 20%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 7px;
}

.pdf-app-progress__top {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
}

.pdf-app-progress__number {
    position: relative;
    z-index: 2;

    width: 34px;
    height: 34px;

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

    box-sizing: border-box;

    border: 2px solid #d9dee7;
    border-radius: 50%;

    background: #ffffff;
    color: #94a3b8;

    font-size: 12px;
    font-weight: 700;
}

.pdf-app-progress__connector {
    position: absolute;
    top: 16px;
    left: 34px;
    right: 0;

    height: 2px;
    background: #e5e7eb;
}


/* Completed */
.pdf-app-progress__item--completed
.pdf-app-progress__number {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.pdf-app-progress__item--completed
.pdf-app-progress__connector {
    background: #16a34a;
}


/* Content */
.pdf-app-progress__content {
    padding-top: 12px;
    padding-right: 12px;
}

.pdf-app-progress__content h6 {
    margin: 0 0 6px;

    color: #1e293b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.pdf-app-progress__content span {
    display: block;
    margin-bottom: 7px;

    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}

.pdf-app-progress__content strong {
    display: inline-block;

    padding: 4px 9px;

    border-radius: 20px;

    background: #fef3c7;
    color: #b45309;

    font-size: 10px;
    font-weight: 600;
}

.pdf-app-progress__item--completed
.pdf-app-progress__content strong {
    background: #dcfce7;
    color: #15803d;
}

.pdf-app-id{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.pdf-app-id h6{
    font-size: 16px;
    font-weight: 600;
    color: #000;
}
.pdf-app-id h6 span{
    color: red;
    font-size: 16px;
}


.pdf-student-summary {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e3e7ed;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}


/* Header */
.pdf-student-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding:10px 20px;

    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.pdf-student-summary__header h4 {
    margin: 0 0 5px;

    color: #172033;
    font-size: 20px;
    font-weight: 600;
}

.pdf-student-summary__header span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

.pdf-student-summary__university {
    max-width: 300px;

    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: right;
}


/* Section */
.pdf-student-summary__section {
    padding: 18px 22px;
      width: 50%;
}

.pdf-student-summary__section + .pdf-student-summary__section {
    border-top: 1px solid #edf0f3;
  
}

.pdf-student-summary__section-title {
    margin-bottom: 14px;

    color: #087697;
    font-size: 17px;
    font-weight: 600;
}


/* Grid */
.pdf-student-summary__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    
    row-gap: 15px;
}


/* Field */
.pdf-student-summary__field {
    min-width: 0;
    padding-bottom: 11px;

    border-bottom: 1px solid #f1f3f5;
}

.pdf-student-summary__field span {
    display: block;
    margin-bottom: 5px;

    color: #7c7c7c;
    font-size: 13px;
    font-weight: 500;
}

.pdf-student-summary__field strong {
    display: block;

    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;

    word-break: break-word;
}


/* Priority */
.pdf-student-summary__priority {
    display: inline-block;

    padding: 3px 9px;

    border-radius: 12px;

    background: #fef3c7;
    color: #b45309;

    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}

.pdf-app-details-info{
    display: flex;
}


.pdf-application-summary {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

.pdf-application-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.pdf-application-summary__title h4 {
  margin: 0 0 4px;
  color: #172033;
  font-size: 17px;
  font-weight: 600;
}

.pdf-application-summary__title span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}

.pdf-application-summary__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 20px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pdf-application-summary__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
}

.pdf-application-summary__body {
  padding: 20px 22px;
}

.pdf-application-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 35px;
  row-gap: 16px;
}

.pdf-application-summary__field {
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.pdf-application-summary__field--full {
  grid-column: 1 / -1;
}

.pdf-application-summary__field span {
  display: block;
    margin-bottom: 5px;
    color: #7c7c7c;
    font-size: 13px;
    font-weight: 500;
}

.pdf-application-summary__field strong {
      display: block;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}

/* Next Step */

.pdf-application-summary__next-step {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  padding: 14px 16px;
  background: #bef0bc3b;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
}

.pdf-application-summary__next-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 14px;
}

.pdf-application-summary__next-content span {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.pdf-application-summary__next-content strong {
  display: block;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.pdf-application-summary__next-content p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 11px;
}

.pdf-application-summary__next-content p b {
  color: #b45309;
  font-weight: 700;
}


.pdf-prv-info-bottom-card {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Header */
.pdf-prv-info-bottom-card-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 17px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.pdf-prv-info-bottom-card-header i {
  width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    background: #012970;
    border-radius: 5px;
}

.pdf-prv-info-bottom-card-header h5 {
    margin: 0;
    color: #222222;
    font-size: 14px;
    font-weight: 600;
}

/* Body */
.pdf-prv-info-bottom-card-body {
    padding: 5px 17px 12px;
}

.pdf-prv-info-bottom-card-body > .row {
    margin-left: -14px;
    margin-right: -14px;
}

.pdf-prv-info-bottom-card-body .col-md-6 {
    padding-left: 14px;
    padding-right: 14px;
}

/* Vertical divider */
.pdf-prv-info-bottom-border-start {
    border-left: 1px solid #d9dce0;
}

/* Individual Item */
.pdf-prv-info-bottom-item {
    padding: 11px 0;
    border-bottom: 1px solid #eeeeee;
}

.pdf-prv-info-bottom-item:last-child {
    border-bottom: 0;
}

/* Label */
.pdf-prv-info-bottom-item label {
       display: block;
    margin-bottom: 5px;
    color: #7c7c7c;
    font-size: 12px;
    font-weight: 500;
}

/* Value */
.pdf-prv-info-bottom-item span {
       display: block;
    color: #000;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    word-break: break-word;
}



.pdf-prv-fee-payment-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #cfd3d8;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Header */

.pdf-prv-fee-payment-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 17px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.pdf-prv-fee-payment-header > i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-size: 13px;
}

.pdf-prv-fee-payment-header h5 {
       margin: 0 0 4px;
    color: #172033;
    font-size: 17px;
    font-weight: 600;
}

.pdf-prv-fee-payment-header span {
    color: #777777;
    font-size: 12px;
}


/* Body */

.pdf-prv-fee-payment-body {
    padding: 16px;
}


/* ==========================================
   Summary
   ========================================== */

.pdf-prv-fee-payment-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 17px;
    border: 1px solid #d9dce0;
}

.pdf-prv-fee-payment-summary-item {
    padding: 12px 15px;
    border-right: 1px solid #d9dce0;
}

.pdf-prv-fee-payment-summary-item:last-child {
    border-right: 0;
}

.pdf-prv-fee-payment-summary-item label {
   display: block;
    margin-bottom: 5px;
    color: #7c7c7c;
    font-size: 12px;
    font-weight: 500;
}

.pdf-prv-fee-payment-summary-item strong {
    display: block;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    word-break: break-word;
}


/* ==========================================
   Payment Table
   ========================================== */

.pdf-prv-fee-payment-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.pdf-prv-fee-payment-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.pdf-prv-fee-payment-table th {
    padding: 9px 10px;
    background: #f5f5f5;
    border: 1px solid #d9dce0;
    color: #555555;
    font-size: 9px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.pdf-prv-fee-payment-table td {
    padding: 10px;
    border: 1px solid #e0e2e5;
    color: #333333;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: middle;
    word-break: break-word;
}

.pdf-prv-fee-payment-table th:nth-child(1) {
    width: 25%;
}

.pdf-prv-fee-payment-table th:nth-child(2) {
    width: 16%;
}

.pdf-prv-fee-payment-table th:nth-child(3) {
    width: 18%;
}

.pdf-prv-fee-payment-table th:nth-child(4) {
    width: 20%;
}

.pdf-prv-fee-payment-table th:nth-child(5) {
    width: 21%;
}


/* Amount */

.pdf-prv-fee-payment-table td:nth-child(2) {
    font-weight: 700;
}


/* ==========================================
   Status
   ========================================== */

.pdf-prv-fee-payment-status {
   display: inline-block;
    padding: 3px 8px;
    /* border: 1px solid #999999; */
    border-radius: 3px;
    color: #fff;
    background: #119513;
    font-size: 10px;
    font-weight: 500;
    /* text-transform: uppercase; */
    /* letter-spacing: .3px; */
    border-radius: 40px;
}


/* ==========================================
   Next Payment
   ========================================== */

.pdf-prv-fee-payment-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 11px 13px;
    border: 1px solid #cfd3d8;
    background: #fafafa;
}

.pdf-prv-fee-payment-note span {
    color: #777777;
    font-size: 12px;
    font-weight: 600;
}

.pdf-prv-fee-payment-note strong {
    color: #222222;
    font-size: 13px;
    font-weight: 600;
}

.pdf-prv-fee-payment-note b {
    margin-left: auto;
    color: #222222;
    font-size: 14px;
    font-weight: 600;
}




.reminder-btn {
       display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    background: #f9f9f9b3;
    color: #d97706;
    /* border: 1px solid #fed7aa; */
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Bell icon */
.reminder-btn .top-nav-icon {
    position: relative;

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

    width: 28px;
    height: 28px;

    background: #ffedd5;
    color: #ea580c;

    border-radius: 7px;

    font-size: 15px;
}

/* Count badge */
.reminder-count {
    position: absolute;
    top: -7px;
    right: -8px;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

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

    background: #ea580c;
    color: #fff;

    border: 2px solid #fffaf0;
    border-radius: 50%;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* Hover */
.reminder-btn:hover {
    background: #fff7e6;
    border-color: #fdba74;
    color: #c2410c;

    text-decoration: none;
    transform: translateY(-1px);
}

.reminder-btn:hover .top-nav-icon {
    background: #fed7aa;
    color: #c2410c;
}

/* Focus */
.reminder-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}

.pr-row-cs {
    margin-left:0;
    margin-right:0;
}
.pr-row-cs .col-lg-6:first-child{
    padding-left:0;
}
.pr-row-cs .col-lg-6:last-child{
    padding-right:0;
}

@media screen and (max-width:1200px){
    .student-view-card__profile{
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
    }
}



@media screen and (max-width:991px){
    .pr-row-cs .col-lg-6:first-child{
    padding-right:0;
}
.pr-row-cs .col-lg-6:last-child{
    padding-left:0;
}

}
@media screen and (max-width:768px){
    .student-view-card__details{
        grid-template-columns: repeat(1, 1fr);
                gap: 5px;
    }
    .student-view-card__identity-2{
         flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
                padding-top: 5px;
    }
    .student-view-card__identity-2 .student-view-info{
        width:100%;
    }
    .student-preview-address ul,.student-test-core ul{
         display: flex;
        flex-direction: column;
    }
    .student-test-core ul li{
        width:100%;
    }
    .student-view-card__identity h2{
           flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:10px;
        font-size: 20px;

    }
    .student-view-card__identity h2 span{
            font-size: 14px;
    }
    .pdf-app-progress{
          flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:10px;
    }
    .pdf-app-progress__item{
        width:100%;
    }
    .pdf-app-details-info{
        flex-direction:column;
    }
    .pdf-student-summary__section{
        width:100%;
    }
}


@media screen and (max-width:567px){
    .v-preview span{
        position: absolute;
    top: -9px;
    right: 7px;
    }
    .student-view-card,.student-preview-address,.student-test-core{
        padding:12px;
    }
    .pdf-student-summary__header,.pdf-application-summary__header{
         flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:2px;
    }
    .pdf-student-summary__header h4{
        margin:0;
    }
    .pdf-application-summary__grid,.pdf-prv-fee-payment-summary{
         grid-template-columns: repeat(1, 1fr);
    }
    .pdf-prv-fee-payment-note{
         flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:2px;
    }
    .pdf-prv-fee-payment-note b{
        margin-left:unset;
    }
}
@media screen and (max-width:400px){
    .student-view-info{
        flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    }
}


.custom-cs-for-visa-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.custom-cs-for-visa-status strong {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
}

.custom-cs-for-visa-status .badge {
       font-size: 10px !important;
    font-weight: 400 !important;
    padding: 3px 6px !important;
    border-radius: 14px !important;
    line-height: 1 !important;
    color:#fff !important;
}


.page-btns-cs-chat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.page-btns-cs-chat p {
    margin: 0;
    font-size: 15px;
    color: #4b5563;
}

.page-btns-cs-chat p strong {
    color: #111827;
    font-weight: 600;
}

.page-btns-cs-chat a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    color: #ffffff;
    background-color: #b23939;
    border: 1px solid #b23939;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-btns-cs-chat a:hover {
    color: #ffffff;
    background-color: #b23939;
    border-color: #b23939;
    border-radius:40px;
}

.btn-bk-cs{
        position: relative ;
   
    padding:10px 26px ;
    display: inline-flex ;
    align-items: center ;
    justify-content: center ;
    border-radius: 8px ;
    font-size: 12px ;
    font-weight: 600 ;
    line-height: 1 ;
    text-decoration: none ;
    white-space: nowrap ;
    cursor: pointer ;
    transition: all 0.22s ease ;
          color: #ffffff ;
    background: linear-gradient(135deg, #dc3545 0%, #b70e1e 100%) ;
    border: 1px solid #b70e1e ;
    margin-bottom:10px;
}
.btn-bk-cs:hover{
    border-radius:40px;
         color: #ffffff ;
}