.text_field.error{
	border-bottom:1px solid red!important;
}

.userdetbox{
        background: #fff;
    margin-bottom: 17px;
    border-radius: 8px;
        text-align: center;
    border: 1px solid #e3e8f0;
    box-shadow: 0 4px 10px rgba(15,23,42,.06);
    transition: all .2s ease-in-out;
    overflow: hidden;
    position: relative;
}
.userdetbox:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15,23,42,.12);
}
.userdetbox::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:4px;
    background: linear-gradient(90deg,#0280ba,#36c0ff);
}
.userdetbox .nusrbox{
    padding: 18px 16px 0px;
    border-top: 3px solid #0280ba;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    background: radial-gradient(circle at top left, #f0f9ff 0, #ffffff 55%);
}
.userdetbox .nusrbox .userinfoleft{     
    margin-bottom: 10px;
}
.app-card-header{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.app-avatar{
    flex:0 0 auto;
}
.app-avatar img{
    border: 2px dotted #cacaca;
    width: 60px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
}
.app-title-block{
    flex:1 1 auto;
}
.app-title-block h2{
    margin:0 0 4px;
    font-size:16px;
    line-height:1.3;
    font-weight:600;
    color:#111827;
}
.app-title-block h2 a{
    color:inherit;
    text-decoration:none;
    display:inline-block;
    transition:color .2s ease,text-shadow .2s ease,transform .15s ease;
}
.userdetbox:hover .app-title-block h2 a{
    color:#0280ba;
    text-shadow:0 0 1px rgba(2,128,186,.35);
    transform:translateY(-1px);
}
.userdetbox .nusrbox .userinfoleft img{
      width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit:cover;
}
.nursfooter .edit{
       background: #3daced;
    color: #fff;
}
.nursfooter .delete{
        background: #d56464;
    color: #fff;
}
.nursfooter a{
        background: #69bd6c;
    color: #fff;
}
.app-status-row{
    display:flex;
    align-items:center;
    gap:6px;
    font-size: 11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#6b7280;
}
.app-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
}
.userdetbox .nusrbox .nusrboxFooter ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.userdetbox .nusrbox .nusrboxFooter ul li{
        font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color:#4b5563;
}
.userdetbox .nusrbox .nusrboxFooter ul li i{
        color: #1193cd;
    margin-right:4px;
}
.app-meta{
    border-top:1px dashed #e5e7eb;
    padding-top:10px;
    margin-top:4px;
    display:flex;
    flex-direction:column;
}
.app-meta-item{
    display:flex;
    align-items:center;
    font-size:12px;
    margin-bottom:5px;
}
.app-meta-item i{
    color:#1193cd;
    margin-right:6px;
}
.app-meta-label{
    font-weight:500;
    margin-right:4px;
    color:#374151;
    flex:0 0 auto;
}
.app-meta-value{
    color:#4b5563;
    flex:0 0 auto;
    margin-left:auto;
    padding-left:8px;
    text-align:right;
}
.app-meta-warning{
    color:#b91c1c;
}
.app-meta-added{
    align-self: flex-end;
    justify-content: flex-end;
    font-style: italic;
    margin-top: 4px;
}
.app-meta-added .app-meta-label{
    color:#1d4ed8;
    font-weight:700;
}
.app-meta-added .app-meta-value{
    font-weight:700;
    color:#1e40af;
    margin-left:4px;
}
.col-fix-5{
        flex: 0 0 auto;
    width: 20%;
}
.userdetbox .nursfooter{
    border-top: 1px solid #80808024;
       padding: 9px 10px;
    display:flex;
    gap:8px;
    background:#f8fafc;
    justify-content:space-between;
}
.userdetbox .nursfooter .btn{
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 11px !important;
    flex: 1 1 auto;
    text-align: center;
    border-radius: 5px;
    gap: 4px;
    text-decoration: none !important;
    transition: background-image .2s ease, background-color .2s ease, transform .18s ease, box-shadow .18s ease;
}
.nursfooter .btn-edit{
    background-image: linear-gradient(135deg, #47c275, #2ec164);
    border: 0;
}
.nursfooter .btn-delete{
    background-image: linear-gradient(135deg, #e14747, #cf4444);
    border: 0;
}
.nursfooter .btn-pay{
    background-image:linear-gradient(135deg,#fde68a,#fbbf24);
    border: 0;
}
.nursfooter .btn-edit:hover{
    background-image:linear-gradient(135deg,#16a34a,#15803d);
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(22,163,74,.35);
}
.nursfooter .btn-delete:hover{
    background-image:linear-gradient(135deg,#ef4444,#b91c1c);
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(220,38,38,.35);
}
.nursfooter .btn-pay:hover{
    background-image:linear-gradient(135deg,#facc15,#eab308);
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(234,179,8,.35);
}
.nursfooter .btn i{
    font-size:12px;
}

.app-status-badge{
    position: absolute;
    top: 4px;
    right: 0px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 5px;
    font-weight: 500;
    letter-spacing: .03em;
}
.app-status-badge.status-completed{
    background:#dcfce7;
    color:#166534;
}
.app-status-badge.status-incomplete{
    background:#fee2e2;
    color:#92400e;
}
.app-status-badge.status-blocked{
    background:#fef3c7;
    color:#b45309;
}
.app-status-badge.status-active{
    background:#e0f2fe;
    color:#0369a1;
}
.app-status-badge.status-deleted{
    background:#fee2e2;
    color:#b91c1c;
}

/* Fancybox delete confirmation modal */
.confirm-delete-trigger{
    display:none;
}
.confirm-delete-wrapper{
    display:none;
}
.confirm-delete-modal{
    width:500px;
    max-width:100%;
    background-color:#ffffff;
    padding:16px 18px 16px;
    border-radius:10px;
    box-shadow:0 18px 45px rgba(15,23,42,.28);
    border:1px solid #e5e7eb;
    font-family: 'Rubik', sans-serif;
}
.confirm-delete-header{
    padding:4px 0 12px;
    margin:0 0 10px;
    border-bottom:1px solid #f3f4f6;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.confirm-delete-title{
    font-size:17px;
    font-weight:600;
    color:#111827;
}
.confirm-delete-subtitle{
    font-size:12px;
    color:#6b7280;
}
.confirm-delete-layout{
    display:flex;
    gap:14px;
    align-items:flex-start;
}
.confirm-delete-icon{
    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,#fee2e2,#fecaca);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#b91c1c;
    box-shadow:0 8px 18px rgba(248,113,113,.45);
    margin-top:2px;
}
.confirm-delete-icon i{
    font-size:20px;
}
.confirm-delete-body{
    font-size:13px;
    color:#374151;
    margin-bottom:8px;
}
.confirm-delete-body p{
    margin:0 0 6px;
}
.confirm-delete-main-text{
    margin-bottom:6px;
}
.confirm-delete-points{
    margin:0 0 6px 16px;
    padding:0;
    font-size:12px;
    color:#4b5563;
}
.confirm-delete-points li{
    margin-bottom:2px;
}
.confirm-delete-are-you-sure{
    margin-top:4px;
    font-weight:600;
    color:#b91c1c;
}
.confirm-delete-footer{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:8px;
}
.confirm-delete-footer .btn{
    font-size:12px;
    padding:6px 10px;
    border-radius:5px;
}
.pagination-large{justify-content: flex-end;}
.newpagination ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.newpagination ul li{
        display: inline-block;
    height: 25px;
    background: #cbcbcb9e;
    margin: 0 4px 0 0;
    width: 25px;
    text-align: center;
    font-size: 12px;
    padding: 4px 0;
}
.newpagination li a{    color: #000;}
.newpagination li.active{
    background: #27aeec;
    color: #fff;
}
.nviewform ul{
        margin: 0;
  font-size: 13px;
    list-style: decimal;
    color: #4c4c4c;
}
.nviewform .card{
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
    margin-bottom: 16px;
    overflow: hidden;
}
.nviewform .card-body{
    padding: 14px 16px;
}
.nviewform h5{
  font-weight: 500;
    color: #000;
    font-size: 18px;
}
.nviewform h5 span{
       color: #666;
    font-size: 13px;
    font-weight: 400;
}
.nviewform h4{
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    font-size: 15px;
    border-bottom: 1px solid #80808042;
    padding-bottom: 8px;
    margin-bottom:10px;
    position:relative;
    padding-left:0;
}
.nviewform .table.table-simple td{ 
    padding: 3px 10px!important;
    border: 0;
    font-size: 13px;
    background-color: transparent;
}
 .nviewform p{
       font-size: 13px;
    margin: 0;
    color: #4c4c4c;
 }
.table.table-simple{padding:0;margin:0;}
.nviewform .viewpic img{
    border: 3px dotted #5d5d5d24;
    height: 175px;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.content h1{
    font-size: 20px;
}

.nsign{
    margin-bottom: 5px;
    font-size: 13px;
    color: #4c4c4c;
}
.signote{
        color: #fb2727;
    font-size: 12px;
}
.mainadminmenu li{    
    margin-right: 10px;
}
.mainadminmenu li a{
        color: #fff;
    padding: 15px 15px;
}
.value-table th{
padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #d5d5d5;
    background: #ededed;
    width: 16%;
}
.value-table td{
    padding: 8px 13px!important;
    font-size: 13px!important;
    border: 1px solid #d5d5d5!important;
    width: 28%!important;
}
.form-material .text_field, .form-material .text_field.focus, .form-material .text_field:focus {
    background-image: linear-gradient(#137eff,#137eff),linear-gradient(#e9ecef,#e9ecef);
    border: 0 none;
    border-radius: 0;
    box-shadow: none!important;
    float: none;
    background-position: bottom;
}
.form-material .text_field {
    background-color: #0000;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 0 2px,100% 1px;
    padding: 0;
    transition: background 0s ease-out 0s;
    height: calc(2.25rem + 2px);
    border-bottom: 1px solid #0000001a;
}
.form-field{
    margin-bottom: 1rem;
}
.text_field {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 8px 7px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
       color: #6a7a8c;
    background-color: #f1f1f1;
    background-clip: padding-box;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    box-shadow: unset;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.card-box .card .card-body h3{
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
    font-size: 15px;
    border-bottom: 1px solid #00000024;
    padding-bottom: 6px;
}
.card-box .card .card-body li{
    font-size: 12px;
}
.card-box .card .card-body h3 span{
    color: #d94b4b;
    font-size: 11px;
    text-transform: capitalize;
    font-weight: 400;
    display: inline-block;
    padding-left: 12px;
    line-height: 5px;
}

.editformheader img{
        width: 240px;
    height: 82px;
    object-fit: contain;
}
.editformheader h1{
  text-align: right;
    font-weight: 500;
    color: #000;
    font-size: 26px;
    margin-bottom: 7px;
    text-transform: uppercase;
}
.editformheader h2{
     font-size: 22px;
    text-align: right;
    color: #000;
    margin-bottom: 0;
    line-height: 23px;
    font-weight: 500;
}
.editformheader h2 span{
   display: block;
    font-size: 14px;
    color: #4a4a4a;
    margin-top: 3px;
}
.editformheader ul{
        margin: 0;
}
.editformheader h3{
    font-size: 15px;
    color: #2a2a2a;
    font-weight: 500;
}
.editformheader li{
    font-size: 13px;
}
.uploadSignature  img{
  height: 177px;
    width: 177px;
    object-fit: cover;  
}
.uploadSignature  .file-wrapper1{
    position: relative;
}
.uploadSignature  .hide-browse{
        opacity: 0;
    padding: 0px 0;
    position: relative;
    z-index: 2;
}
.form-material .table{margin: 0px;}
.form-material .table th{padding: 5px 6px;
        background-color: #fff;
    color: #383838;
    box-shadow: none!important;
}
.form-material .table td{padding: 5px 6px;}
.uploadSignature  #upload_photo, .uploadSignature #btnCandidateSign, .uploadSignature #btnParentSign{
  background: #0a8ac4;
    border: 0;
    color: #fff;
    padding: 8px 5px;
    position: absolute;
    top: -5px;
    font-size: 12px;
    width: 177px;
}
.impnotes{
    margin: 0;
}
.impnotes li{
   font-size: 13px!important;
}
.uploadSignature h6{
     font-size: 14px;
    font-weight: 500;
    color: #424242;
}
.col-field {
    margin-bottom: 1rem;
}

.editformheader .border-bottom{
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #0000001a!important;
}
.dateimg input{
    font-size: 12px;
    color: #727272;
}
.gj-datepicker-md [role=right-icon] {
    top: 12px!important;
    font-size: 18px!important;
    color: #0a8ac4;
}
.errormessage{
   color: #f00;
    font-weight: 500;
    background-color: #ffdfdf;
    padding: 10px 6px;
    margin-bottom: 7px;
    border: 1px solid #f00; 
}

.form-material .rnd-all, .form-material .rnd-all.focus, .form-material .rnd-all:focus {
    background-image: linear-gradient(#137eff,#137eff),linear-gradient(#e9ecef,#e9ecef);
    border: 0 none;
    border-radius: 0;
    box-shadow: none!important;
    float: none;
    background-position: bottom;
}
  
/* Login Page Styles */
body.login-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    position: relative;
}

body.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

.login-container {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    overflow: hidden;
    width: 95%;
    max-width: 900px;
    height: 70vh;
    max-height: 600px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    display: flex;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-left {
    flex: 0 0 42%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.login-left::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 20s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(180deg); }
}

.login-container .brand-logo {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.login-container .brand-logo img {
    width: 140px;
    height: auto;
    filter: brightness(0) invert(1);
}

.welcome-content {
    position: relative;
    z-index: 1;
}

.welcome-content h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.welcome-content p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.95;
    margin: 0;
}

.login-right {
    flex: 1;
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

.login-header {
    margin-bottom: 28px;
}

.login-header h2 {
    font-size: 26px;
    color: #1a1a2e;
    margin-bottom: 5px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.login-header p {
    color: #666;
    font-size: 13px;
    margin: 0;
}

.login-form {
    width: 100%;
}

.login-form .form-group {
    position: relative;
}

.login-form .form-label {
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-form .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-form .input-icon {
    position: absolute;
    left: 14px;
    color: #007bff;
    font-size: 15px;
    z-index: 2;
    pointer-events: none;
    transition: all 0.3s ease;
}

.login-form .form-control {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
    color: #333;
    outline: none;
    font-weight: 400;
}

.login-form .form-control:focus {
    border-color: #007bff;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
    transform: translateY(-1px);
}

.login-form .form-control:focus + .input-icon,
.login-form .form-control:focus ~ .input-icon {
    color: #0056b3;
    transform: scale(1.1);
}

.login-form .form-control::placeholder {
    color: #999;
}

.login-form select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007bff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.login-form .error-message {
    color: #e74c3c;
    font-size: 11px;
    margin-top: 4px;
    display: block;
    min-height: 16px;
}

.login-form .alert-error {
    background: linear-gradient(135deg, #fee 0%, #fdd 100%);
    border: 1px solid #fcc;
    color: #c33;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 12px;
    animation: slideDown 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(204, 51, 51, 0.15);
}

.login-form .alert-error i {
    font-size: 16px;
    flex-shrink: 0;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-login {
    width: 100%;
    padding: 13px 20px;
    background: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 6px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-login:hover::before {
    left: 100%;
}

.btn-login:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.btn-login:active {
    transform: translateY(0);
}

.btn-login i {
    transition: transform 0.3s ease;
}

.btn-login:hover i {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    body.login-page {
        overflow-y: auto;
    }
    
    .login-container {
        flex-direction: column;
        max-width: 100%;
        height: auto;
        max-height: none;
        margin: 20px 15px;
    }

    .login-left {
        flex: none;
        padding: 30px 25px;
        min-height: 200px;
    }

    .login-right {
        padding: 30px 25px;
    }

    .welcome-content h1 {
        font-size: 22px;
    }

    .login-header h2 {
        font-size: 22px;
    }

    .login-container .brand-logo img {
        width: 120px;
    }
}

@media (max-width: 767px) {
    .col-fix-5 {
    flex: 0 0 auto;
    width: 100%!important;
}
    .page-breadcrumb .col-5, .page-breadcrumb .col-7{width:100%!important;}
}

.gj-textbox-md {
    font-family: 'Rubik'!important;
    font-size: 13px!important;
    color: #000000a8!important;
}

.clickexpend{
     position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    left: 50%;
}
.accordion-button:focus {
    box-shadow: none!important;
}


.tg {
    border-collapse: collapse;
    border-spacing: 0;
    border-color: #7E98CA;
}

.tg td {
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 6px 3px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #7E98CA;
    color: #669;
    background-color: #e8edff;
    width: auto;
    min-width: 50px;
    text-align: center !important;
    white-space: nowrap;
}

.tg th {
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 3px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    word-break: normal;
    border-color: #7E98CA;
    color: #039;
    background-color: #b9c9fe;
    text-align: center;
    white-space: nowrap;
    min-width: 50px;
}

.tg .tg-0ord {
    text-align: right
}

.tg .tg-ifyx {
    background-color: #D2E4FC;
    text-align: right;
}

.tg .tg-s6z2 {
    text-align: center !important;
}

.tg .tg-vn4c {
    background-color: #D2E4FC
}

.jua td {
    background-color: #FFF;
}

.btn-active {
    color: #fff;
    background-color: #7460ee !important;
    border-color: #7460ee !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
}
.pfix {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.table.table-striped th {
    position: relative;
    vertical-align: middle;
}

.table.table-striped th span {
    position: relative;
    z-index: 2;
    font-weight: 400;
    text-align: center;
    display: block;
    vertical-align: middle;
}

table {
    border: 1px solid grey;
    width: 100%;
    table-layout: auto;
}

th span {
    margin-top: 15px !important;
}

/* Modern, Attractive Table Design - No Scroll */
.ug-stats .table-responsive,
.postgraduate-stats .table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto;
}

.ug-stats table,
.postgraduate-stats table {
    width: 100% !important;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.ug-stats table th,
.ug-stats table td,
.postgraduate-stats table th,
.postgraduate-stats table td {
    font-size: 11px !important;
    padding: 8px 4px !important;
    white-space: nowrap;
    text-align: center !important;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
}

/* Header styling - Modern gradient */
.ug-stats table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 10px 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.ug-stats table th span {
    font-size: 10px !important;
    margin-top: 8px !important;
    line-height: 1.3;
    display: block;
    font-weight: 500;
    color: #ffffff;
}

/* Data rows - alternating colors */
.ug-stats table tbody tr:nth-child(even) td {
    background-color: #f8f9fa !important;
}

.ug-stats table tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}

.ug-stats table tbody tr:hover td {
    background-color: #e3f2fd !important;
    transition: background-color 0.2s;
}

/* Total row styling */
.ug-stats table th[style*="background-color: #EFEFEF"],
.ug-stats table th[style*="background-color:#EFEFEF"] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 12px 6px !important;
}

/* Data cells styling */
.ug-stats table td {
    font-size: 12px !important;
    font-weight: 500;
    color: #333;
    padding: 10px 4px !important;
}

.ug-stats table td.tg-vn4c {
    background-color: #e8f5e9 !important;
    font-weight: 600;
}

/* Ensure border-top indicators work properly */
.ug-stats .pfix {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 0;
}

.ug-stats table th {
    position: relative;
}

.ug-stats table th span {
    position: relative;
    z-index: 2;
}

/* Card body optimization */
.ug-stats .card-body,
.postgraduate-stats .card-body {
    padding: 10px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.ug-stats .card,
.postgraduate-stats .card {
    overflow-x: visible !important;
    overflow-y: visible !important;
    border: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
}

/* Container optimization */
.container-fluid {
    overflow-x: visible !important;
}

/* Responsive column widths - fit all columns without scroll */
.ug-stats table {
    font-size: 10px;
    width: 100%;
}

/* Compact but readable columns */
.ug-stats table th:not(:first-child):not(:nth-child(2)),
.ug-stats table td:not(:first-child):not(:nth-child(2)) {
    width: 3.5%;
    min-width: 55px;
    max-width: 65px;
    font-size: 11px !important;
}

/* First two columns (SNAPSHOT) wider */
.ug-stats table th:first-child,
.ug-stats table th:nth-child(2),
.ug-stats table td:first-child,
.ug-stats table td:nth-child(2) {
    width: 6%;
    min-width: 70px;
}

/* Better text wrapping for long headers */
.ug-stats table th span {
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
    font-size: 10px !important;
}

/* Compact padding for better fit */
.ug-stats table th {
    padding: 8px 3px !important;
}

.ug-stats table td {
    padding: 8px 3px !important;
}
/* Smooth transitions */
.ug-stats table th,
.ug-stats table td {
    transition: all 0.2s ease;
}

/* Number styling - make numbers stand out */
.ug-stats table td {
    font-weight: 600;
    color: #2c3e50;
}

/* Border-top indicator enhancement */
.ug-stats .pfix div {
    border-radius: 0;
}

/* Modern Card Grid Layout - Compact Design */
.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    align-items: start;
}

/* Program Settings Modal - Modern Look */
.program-settings-modal .modal-dialog {
    max-width: 900px;
}

.program-settings-modal .modal-content {
    border-radius: 10px;
    border: 0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.program-settings-modal .modal-header {
    background: linear-gradient(135deg, #153b69 0%, #054a9e 50%, #023778 100%);
    color: #ffffff;
    border-bottom: 0;
    padding: 14px 20px;
}

.program-settings-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.program-settings-modal .modal-title::before {
    content: "\f013";
    font-family: "FontAwesome";
    font-size: 14px;
    display: inline-block;
}

.program-settings-modal .close {
    color: #ffffff;
    opacity: 0.85;
    text-shadow: none;
    border: 0;
    background: #000000b3;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    font-size: 24px;
    line-height: normal !important;;
}

.program-settings-modal .close:hover {
    opacity: 1;
}

.program-settings-modal .modal-body {
    background: #f7f9fc;
    padding: 18px 20px 20px;
}

.program-settings-modal .alert-info {
    border-radius: 10px;
    border: 0;
    background: #e3f2fd;
    color: #1e3a8a;
    padding: 10px 14px;
    font-size: 12px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.program-settings-modal .alert-info::before {
    content: "\f05a";
    font-family: "FontAwesome";
    font-size: 13px;
}

.program-settings-modal .col-label label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #4b5563;
    margin-bottom: 3px;
}

.program-settings-modal .col-field .text_field,
.program-settings-modal .col-field select {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 5px 8px;
    font-size: 12px;
    height: 32px;
}

/* Payment mode toggle styling */
.program-settings-modal .payment-mode-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.program-settings-modal .payment-mode-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #e5e7eb;
    color: #374151;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.program-settings-modal .payment-mode-option .pm-icon {
    width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: rgba(31, 41, 55, 0.9);
    color: #ffffff;
}

.program-settings-modal .payment-mode-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.program-settings-modal .payment-mode-option.active {
    background: linear-gradient(135deg, #00d4aa 0%, #00a86b 40%, #22c55e 100%);
    color: #ffffff;
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
}

.program-settings-modal .payment-mode-option.active .pm-icon {
    background: rgba(15, 23, 42, 0.95);
}

.program-settings-modal .row + .row {
    margin-top: 8px;
}

.program-settings-modal #btnSubmitDashboard {
    border-radius: 5px;
    padding: 6px 18px;
    font-size: 12px;
    font-weight:500;
}

.program-settings-modal .modal-footer {
    border-top: 0;
    padding: 10px 20px 16px;
    background: #f3f4f6;
}

.program-settings-modal .btn-secondary {
    border-radius: 10px;
    font-size: 12px;
}

@media (max-width: 767.98px) {
    .program-settings-modal .modal-dialog {
        margin: 10px;
    }

    .program-settings-modal .modal-body {
        padding: 14px 12px 16px;
    }
}

.program-card {
    grid-column: auto;
    grid-row: auto;
}

.program-card {
    position: relative;
    overflow: hidden;
    min-height: 85px;
    display: flex;
    flex-direction: column;
    transform: scale(1);
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 8px;
    margin-bottom: 3px;
    transition: all 0.25s ease;
    border: 1px solid #eee;
}

.program-card.hidden {
    transform: scale(0.85);
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

.program-grid {
    transition: all 0.3s ease;
}

.program-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.program-card.live {
    border-left: 3px solid #00d4aa;
}

.program-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.program-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
    padding-right: 5px;
    color: #222;
    margin: 0;
}
.program_ftr{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed #e5e5e5;
    padding-top: 7px;
}

.program-name .institute-name{
       font-size: 11px;
    margin-top: 5px;
    display: block;
    color: grey;
}
.program_ftr_left{
    display: flex;
    align-items: center;
}
.program_ftr_right{
    font-size: 15px;
    font-weight: 700;
    color: #333;
    background: #f5f6fa;
    min-width: 30px;
    text-align: center;
    padding: 2px 10px;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
}
.sidebartoggler{
    border-right: 1px solid #86c0da;
    padding: 0;
    margin-right: 0 !important;
}

.program-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 3px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}
.stat-item-dd {
    border-left-color: #667eea;
}

.stat-icon {
    color: #ffffff;
    font-size: 11px !important;
    width: 18px;
    height: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
}

.stat-item-online .stat-icon {
    background: linear-gradient(135deg, #00d4aa 0%, #00a86b 100%);
}

.stat-item-dd .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
}

.stat-label {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
    line-height: 1;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
}

.stat-value.online {
    color: #00d4aa;
}

.stat-value.dd {
    color: #667eea;
}
/* Modern Status Badge Design - For Cards with FontAwesome */
.status-badge {
    justify-content: center;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-badge .fa {
    font-size: 10px;
}

.status-live {
    color: #45af30;
    border: 1px solid #3eb63e;
}

.status-closed {
    border: 1px solid #d23e3e;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.status-badge .fa {
    font-size: 10px;
}

.status-text {
    font-size: 8px;
    letter-spacing: 0.3px;
}

/* Pulse animation for live status */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(0, 212, 170, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 12px rgba(0, 212, 170, 0.6);
        transform: scale(1.02);
    }
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgba(0, 212, 170, 0.3);
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Adjust header to accommodate badges */
.ug-stats table th {
    padding-top: 35px !important;
    min-height: 60px;
}

.ug-stats table th .pfix {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

/* Hover effect on status badges */
.status-badge:hover {
    transform: scale(1.05);
    cursor: pointer;
}
.dash_tabs button.institute {
    background-color: #f0f0f0;
    color: #383838;
    border: 1px solid #cecece;
    min-width: 90px;
}
.dash_tabs .btn-active{
    background-color: #4ba94b !important;
    color: white !important;
    border: 1px solid #4bbc4b !important;
}
/* Responsive badge sizing */
@media (max-width: 1400px) {
    .status-badge {
        padding: 3px 6px;
        font-size: 8px;
    }
    .status-badge .fa {
        font-size: 9px;
    }
    .status-text {
        font-size: 7px;
    }
}

/* Compact grid for more cards visible */
@media (min-width: 1200px) {
    .program-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }
}

@media (min-width: 1600px) {
    .program-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }
}

    .stat-item-dd {
        border-left-color: #667eea !important;
        background: #f5f3ff !important;
    }