/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/* 
    Created on : Feb 23, 2015, 8:05:58 PM
    Author     : MANISH
*/

/**
 * for new template 
 */

table caption {
    caption-side: top;
}

a {
    color: black
}

/**
 * for new template ends 
 */

.maintr {
    background-color: #286090 !important;
    color: #fff !important;
    padding: 5px 20px;
}

.button {
    height: 32px;
}

select:focus,
input:focus {
    border: 2px solid #007bff !important;
}

:required {
    border: 2px solid #c51244 !important;
}

select:focus:required,
input:focus:required {
    border: 2px solid #c51244 !important;
}


#exmloading,
#ehp,
#eshp,
#vrcimg,
#vrcimg1,
#vrcimg2,
#existt,
#ddlferclassi,
#exploading,
#chqloading,
.wc,
#resethead,
#essp {
    position: relative;
    display: none;
}

#exmsuccess,
#loading,
#mformimg,
#remloading,
#remmsg {
    position: relative;
    display: none;
}

#loading {
    position: relative;
    display: none;
}

#deloading {
    position: relative;
    display: none;
}

#moloading {
    position: relative;
    display: none;
}

#dtmoloading {
    position: relative;
    display: none;
}

#fhload {
    position: relative;
    display: none;
}

#ssessloading {
    position: relative;
    display: none;
}

#sesssuccess,
#stdisloading {
    position: relative;
    display: none;
}

#sesstrans {
    position: relative;
    display: none;
}

#fposuccess {
    position: relative;
    display: none;
}

#efposuccess {
    position: relative;
    display: none;
}

#ffposuccess {
    position: relative;
    display: none;
}

#sessloading {
    position: relative;
    display: none;
}

#last_msg_loader {
    position: relative;
    display: none;
}

#feeloading {
    position: relative;
    display: none;
}

#sfeeloading {
    position: relative;
    display: none;
}

#fsfeeloading {
    position: relative;
    display: none;
}

#fpfeeloading {
    position: relative;
    display: none;
}

#fpofeeloading {
    position: relative;
    display: none;
}

#pfpfeeloading {
    position: relative;
    display: none;
}

#uloading {
    position: relative;
    display: none;
}

#iloading {
    position: relative;
    display: none;
}

#uiloading {
    position: relative;
    display: none;
}

#uriloading {
    position: relative;
    display: none;
}

#imessage {
    position: relative;
    display: none;
}

#uimessage {
    position: relative;
    display: none;
}

#urimessage {
    position: relative;
    display: none;
}

#eloading {
    position: relative;
    display: none;
}

#file {
    color: red;
    font-weight: bold;
}

#image_preview {
    display: block;
}

#success {
    color: white;
    font-weight: bold;
}

#clsec {
    position: relative;
    display: none;
}

#rousub {
    position: relative;
    display: none;
}

#regpho {
    position: relative;
}

#uformimg,
#disloading,
#marksloading {
    position: relative;
    display: none;
}

#schooladdress {
    font-size: small;
    background-color: #18bc9c;
}

#marktop {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

#marktop td {
    text-align: left
}

#othertable {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

#othertable table,
#othertable td,
#othertable th {
    border: 1px solid black;
    border-collapse: collapse;
    padding-left: 5px;
}

.ott {
    margin: 15px;
}

.ott2 {
    margin: 5px 15px 0px 15px;
}

#markstable {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

#markstable td,
#markstable th {
    text-align: center;
}

#markstable table,
#markstable td,
#markstable th {
    border: 1px solid black;
    border-collapse: collapse;
}

#markstabletab {
    border: 1px solid black;
}

#markstabletab td,
#markstable th {
    text-align: center;
}

#markstabletab table,
#markstable td,
#markstable th {
    border: 1px solid black;
    border-collapse: collapse;
}

#commarktop {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#commarktop table,
#commarktop td,
#commarktop th {
    border: 1px solid black;
    border-collapse: collapse;
}

#commarktop td,
#commarktop th {
    text-align: center;
}

#marksatt {
    width: 600px;
    margin-top: 10px;
    border: 1px solid black;
}

#marksatt table,
#marksatt td,
#marksatt th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksatt td,
#marksatt th {
    text-align: center;
}

#marksign {
    margin-top: 150px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksignn table,
#marksignn td,
#marksignn th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksignn td,
#marksignn th {
    text-align: center;
}

#marksign table,
#marksign td,
#marksign th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksign td,
#marksign th {
    text-align: center;
}

#marksign2 {
    margin-top: 400px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksign2 table,
#marksign2 td,
#marksign2 th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksign2 td,
#marksign2 th {
    text-align: center;
}

#marksign9 {
    margin-top: 10px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksign9 table,
#marksign9 td,
#marksign9 th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksign9 td,
#marksign9 th {
    text-align: center;
}

#marksigng {
    margin-top: 180px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksigng table,
#marksigng td,
#marksigng th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksigng td,
#marksigng th {
    text-align: center;
}

#marksign91 {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksign91 table,
#marksign91 td,
#marksign91 th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksign91 td,
#marksign91 th {
    text-align: center;
}

#marksignyly {
    margin-top: 130px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksignyly table,
#marksignyly td,
#marksignyly th {
    /*border:1px solid black;*/
    border-collapse: collapse;
}

#marksignyly td,
#marksignyly th {
    text-align: center;
}

#marksig2yly {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksig2yly table,
#marksig2yly td,
#marksig2yly th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksig2yly td,
#marksig2yly th {
    text-align: center;
}

#marksigngy {
    margin-top: 0px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    /*border:1px solid black;*/
}

#marksigngy table,
#marksigngy td,
#marksigngy th {
    border: 1px solid black;
    border-collapse: collapse;
}

#marksigngy td,
#marksigngy th {
    text-align: center;
}

/* table {
    font-size: 12px;
} */


/* for toast */


#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on click */
    min-width: 250px;
    /* Set a default minimum width */
    margin-left: -125px;
    /* Divide value of min-width by 2 */
    background-color: #333;
    /* Black background color */
    color: #fff;
    /* White text color */
    text-align: center;
    /* Centered text */
    border-radius: 2px;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    z-index: 1;
    /* Add a z-index if needed */
    left: 45%;
    /* Center the snackbar */
    bottom: 30px;
    /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar.longshow {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 9.5s;
    animation: fadein 0.5s, fadeout 0.5s 9.5s;
}

#snackbar.middleshow {
    visibility: visible;
    /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 5.5s;
    animation: fadein 0.5s, fadeout 0.5s 5.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}


/* Premium Design Customizations */

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
    --text-color: #2d3748;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

body {
    background-color: #f4f7f6 !important;
    /* Soft light background override */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.content-header {
    padding: 15px 0.5rem;
    background: white;
    border-bottom: 1px solid #eef2f5;
    margin-bottom: 20px;
}

.content-header h1 {
    font-weight: 600;
    color: #34495e;
    font-size: 1.8rem;
}

/* Enhanced Card Style */
.premium-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    /* Soft premium shadow */
    border: none;
    margin-bottom: 25px;
    padding: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.premium-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.premium-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


/* Secondary Header for Sub-sections */
.sub-header-badge {
    background: #eef2f7;
    color: #2c3e50;
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    border-left: 4px solid #667eea;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}

.premium-card-body {
    padding: 25px 30px;
}

/* Form Controls */
.form-control {
    border-radius: 8px;
    border: 1px solid #e0e6ed;
    padding: 10px 15px;
    height: 45px;
    /* Taller inputs */
    font-size: 0.95rem;
    color: #495057;
    background-color: #fcfcfc;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    background-color: #fff;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    appearance: none;
}

/* Labels */
label {
    font-weight: 600;
    color: #506690;
    margin-bottom: 8px;
    display: block;
    font-size: 0.9rem;
    /* Overriding the inline style='color: white' from PHP logic */
    color: #4b5563 !important;
}

/* Buttons */

.btn-dark {
    background: #34495e;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(52, 73, 94, 0.3);
    transition: all 0.3s ease;
    color: white;
}

.btn-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(52, 73, 94, 0.4);
    background: #2c3e50;
}

.btn-secondary {
    background: linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(127, 140, 141, 0.3);
    transition: all 0.3s ease;
    color: white;
}

.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(127, 140, 141, 0.4);
}

/* Custom Checkbox */
.custom-control-label::before {
    border-radius: 4px;
    border: 1px solid #adb5bd;
}


.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(118, 75, 162, 0.4);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.btn-default {
    background: var(--primary-gradient) !important;
    color: white !important;
}

.btn-danger {
    background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%) !important;
    color: white !important;
}

.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    color: white !important;
}

.btn:hover,
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.badge {
    padding: 5px 10px;
    border-radius: 6px;
}

/* Table Fixes */
td,
th {
    font-size: 0.9rem !important;
    vertical-align: middle !important;
}


.table-bordered {
    border: 1px solid #e2e8f0;
}

.table thead th {
    background-color: #f8fafc;
    color: #4a5568;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-bottom: 2px solid #e2e8f0;
}

.danger-row {
    color: #dc3545 !important;
}

/* Responsive Table Override */
.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

/* Checkbox styling */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 5px;
    accent-color: #764ba2;
}

/* Spacing helpers */
.row-spacing {
    margin-bottom: 20px;
}

/* Modal Styling */

.modal-content {
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 1rem 1.5rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.modal-header .close {
    color: white;
    opacity: 0.8;
    text-shadow: none;
}

.modal-header .close:hover {
    opacity: 1;
    color: #fff;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}


/* Generated Data Only - Hidden Borders */
#mydata input,
#mydata select {
    border: 0 !important;
    background-color: transparent;
    box-shadow: none !important;
    padding: 5px;
    /* Adjust padding for table context */
}

#mydata input:focus,
#mydata select:focus {
    border: 1px solid #667eea !important;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}


/* Fix for active tab styling - covering both likely scenarios */
#pills-tab.nav-pills .nav-item.active .nav-link,
#pills-tab.nav-pills .nav-link.active {
    color: #fff !important;
    background-color: #007bff !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 0.25rem;
}

/* Inactive tab styling - Scoped to #pills-tab to avoid sidebar issues */
#pills-tab.nav-pills .nav-link {
    background-color: #e9ecef;
    color: #555;
    margin-right: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

#pills-tab.nav-pills .nav-link:hover {
    background-color: #dbe2e8;
    color: #333;
    transform: translateY(-1px);
}

/* Global Fix for Bootstrap Multiselect Dropdowns */
.multiselect-container.dropdown-menu {
    z-index: 9999 !important;
    /* Ensure it's on top of tables and other content */
    max-height: 400px !important;
    /* Allow more items to show */
    overflow-y: auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
}

/* Ensure card containers don't clip absolute dropdowns */
.premium-card,
.premium-card-body,
.content-wrapper,
.row,
.col-md-3,
.sn,
.form-group {
    overflow: visible !important;
}

/* Specific fix for sfef.php month dropdown container */
.sn .btn-group {
    display: block !important;
    /* Ensure it takes width */
}

.sn .btn-group .multiselect {
    width: 100% !important;
    text-align: left;
    background-color: #fff;
    border: 1px solid #e0e6ed;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.sn .btn-group .multiselect .caret {
    margin-left: auto;
}

/* Ensure the dropdown menu itself is visible and correctly positioned */
.sn .btn-group .multiselect-container.dropdown-menu {
    position: absolute;
    transform: translate3d(0px, 35px, 0px);
    top: 0px;
    left: 0px;
    will-change: transform;
    width: 100% !important;
    z-index: 10000 !important; /* Higher z-index to sit on top */
}

/* Lower z-index for the table container to prevent it from covering the dropdown */
.premium-card .table-responsive {
    position: relative;
    z-index: 1; 
  /*  overflow: visible !important;  Allow dropdown to overflow */
    overflow-y: auto !important;
}

/* Ensure the card body itself doesn't clip */
.premium-card-body {
    overflow: visible !important;
}


/* Custom Checkboxes */
.custom-checkbox-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #506690;
    cursor: pointer;
}

.custom-checkbox-inline input {
    margin-right: 8px;
    transform: scale(1.2);
    cursor: pointer;
}