body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /*font-family : 'Source Sans Pro','Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-size: 13px !important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item{
    text-align : left !important;
    font-size: 13px !important;
}
img.zoompic {
    height: 20px !important;
    width: 20px !important;
    border-radius: 10px !important;
}
.hide {
    display: none !important;
}
.hidden {
    display: none !important;
}
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 1100px !important;
    margin: 1.75rem auto;
  }
}

.form-control {
    padding: 2px 8px !important;
    font-size: 13px !important;
}

.dropdown-menu {
    font-size: 12px !important;
}

.small, small{
    font-size: 13px !important;
}

.btn {
    font-size : 13px !important;
}

.tblMainDetail {
    width: 100%;
}

thead {
    font-weight: bold;
}

table td {
    padding: 10px;
}

.mt-6 {
    margin-top: 4rem;
}

/* Dashboard profile data */

.profile-header-data {
    font-weight: bold;
    font-size: 20px;
}

/* canteen food image 
    FoodMenu.html
*/
.canteen-img {
    height: 3rem;
    margin-right: 1rem;
}

/*Customize card*/
.card-img {
    height: 100%;
}

.-mt-7 {
    margin-top: -6rem;
}

.mt-7 {
    margin-top: 5rem;
}

/*Dashboard card heights*/
.card-height-1 {
    height: 85mm;
}

/*bg-light*/

.bg-primary-light {
    background-color: #ecf1ff;
}

.bg-success-light {
    background-color: #e5fff6;
}

.bg-info-light {
    background-color: #c5f8ff;
}

.bg-warning-light {
    background-color: #fff3d4;
}

.student-profile-img {
    height: 6rem;
}

.scrollbarhide::-webkit-scrollbar {
    display: none;
}

.pointer {
    cursor: pointer;
}

.card-pointer:hover {
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.5s;
}


/* For Mobile Phones */


/*hidedata name updated*/
@media (max-width: 575px) {
    .hidemobiledata { 
        display: none !important;
    }
}


/* Sibling profile Css Start */

.profile main {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.profile__header {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.profile__avatar {
    flex-grow: 3;
    max-width: 8rem;
    min-width: 5rem;
}

.profile__avatar img {
    position: relative;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem;
    margin: 0 auto;
    margin-top: -50%;
}
.profile__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile__name h5 {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
}

.profile td {
    padding : 5px;
    font-size: 1rem;
}
.profile__highlight {
    padding: 0.4rem;
    border-radius: 0.5rem;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
}
/* Sibling profile Css End */



/* btn themes */

.btn-theme-warning{
    background-color:#faf4e1;
    color:#ffc107;
}
.btn-theme-warning:hover{
    background-color:#faf4e1;
    color:#ffc107;
    border:1px solid #ffc107;
}

.btn-theme-danger{
    background-color:#ffe3e6;
    color:#dc3545;
}
.btn-theme-danger:hover{
    background-color:#ffe3e6;
    color:#dc3545;
    border:1px solid #dc3545;
}


.btn-theme-success{
    background-color:#e3faef;
    color : #198754;
}
.btn-theme-success:hover{
    background-color:#e3faef;
    color:#198754;
    border:1px solid #198754;
}

.btn-theme-info{
    background-color:#e3f8fc;
    color : #0dcaf0;
}
.btn-theme-info:hover{
    background-color:#e3f8fc;
    color:#0dcaf0;
    border:1px solid #0dcaf0;
}


/*Tooltip help*/

.McampusHelp
{
    display: inline-block;
}

.McampusHelp:hover .McampusHelpPopUp
{
    display: block;
}

.McampusHelpPopUp
{
    display: none;
    padding: 5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    position: absolute;
    z-index: 10;
}
.nobreak { white-space:nowrap; }
.break80ch { width:80ch;word-wrap: anywhere;overflow-wrap:break-word; }

#quickSwitchNote .ui-button-text
{
    padding: 2px 4px;
}

.mcampusautocomplete ~ .McampusHelp
{
    position: absolute;
    right: 16px;
    top: 5px;
    cursor: pointer;
}
.mcampusautocomplete ~ .McampusHelp .McampusHelpPopUp 
{
    left: -150px;
}

.displaynone {display:none !important;}
.displayhidden{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow:hidden !important;
    float:left !important;
    opacity:0 !important;
    z-index:-1 !important;
    margin-left:-9999px !important;
    display:inherit !important;
    visibility:inherit !important;
}

.fileupload-content{
    overflow: auto;
    max-height: 300px;
}

fieldset
{
    border-width: 1px;
    border-style: solid;
    margin-bottom: 1em;
}

.buttonstrip
{
    clear: both;
    margin: 8px 0 0;
    padding-top: 15px;
}

.buttonstrip-addonly
{
    margin: 8px 0 8px 10px;
}

.buttonstrip-search
{
    float: right;
    margin: 8px 0 0;
    padding-right: 20px;
    margin-right: 20px;
    text-align: right;
    min-width: 90%;
}

.editor-label
{
    clear: both;
    float: left;
    margin: 8px 0 0;
    min-width: 140px;
}

.editor-field
{
    float: left;
    margin: 8px 0 0;
}

.editor-field input[type="text"], .editor-field input[type="password"], .editor-field textarea
{
    min-width: 150px;
}

.editor-field select
{
    width: 153px;
}

.search-field input[type="text"], .search-field input[type="password"], .search-field textarea
{
    min-width: 100px;
}

.search-field select
{
    width: 103px;
}

.editor-1
{
    float: left;
    width: 33%;
    clear: left;
}

.editor-2
{
    float: left;
    width: 33%;
}

.editor-3
{
    float: left;
    width: 33%;
    clear: right;
}

.editor-l
{
    clear: left;
    float: left;
    min-width: 325px;
    width: 49%;
}

.editor-r
{
    float: left;
    min-width: 325px;
    width: 49%;
}

.editor-f
{
    float: left;
    width: 95%;
    clear: both;
}

.editor-f-margin-top-down
{
    clear: both;
    float: left;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 3px;
    margin-top: 3px;
    width: 95%;
}

.display-label
{
    clear: both;
    float: left;
    margin: 8px 0 0;
    min-width: 100px;
}

.display-field
{
    float: left;
    margin: 8px 0 0;
}

.search-label
{
    float: left;
    padding-right: 5px;
    padding-left: 8px;
    margin: 8px 0 0;
    min-width: 120px;
}

.search-field
{
    float: left;
    padding-right: 10px;
    margin: 8px 0 0;
}

.editor-error
{
    border: 0px !important;
    margin: 8px 0 0 8px;
}

.tableGrid
{
    width: 100%;
    border: hidden;
}

.smallicon
{
    display: inline-block;
    float: left;
    margin-left: 3px;
    margin-right: 3px;
}

.smallicon-r
{
    display: inline-block;
    float: right;
    margin-top: 0px;
    margin-left: 3px;
    margin-right: 3px;
}

.smallicon-r-select
{
    float: right;
    font-size: 8px !important;
}

.page-navi
{
}

td
{
    padding-left: 10px;
}

th
{
    text-align: center;
}

.postiveMessage
{
    position: fixed;
    bottom: 0px;
    height: 30px;
    border-width: 1px;
    border-style: solid;
    width: 50%;
    left: 30%;
    text-align: center;
    background: white;
    color: Green;
    z-index:9999;
}

.negativeMessage
{
    position: fixed;
    bottom: 0px;
    height: 30px;
    border-width: 1px;
    border-style: solid;
    width: 50%;
    left: 30%;
    text-align: center;
    background: white;
    color: Red;
}

.ui-accordion .ui-accordion-header a
{
    padding: 2px 0;
}

.ui-accordion-icons .ui-accordion-header a
{
    padding-left: 2.2em;
}

input.ui-button, .ui-button-text-only .ui-button-text
{
    padding: 2px 10px;
}
/*ul.leftmenu li a {font-weight:600;}*/
.ui-widget-header
{
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    -khtml-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    -khtml-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}
.theme-color-box {
    width: 100%;
    aspect-ratio: 1 / 1;   /* keeps square */
    max-width: 48px;
    max-height: 48px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 4px #ccc;
    transition: 0.2s ease;
}


.theme-color-box:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px #999;
}

.color-box {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    vertical-align: middle;
}

/* Server-message popups on the portal ("Application Error" / "Application Warning"). ShowServerErrorPopup in
   Scripts/Common.js adds bg-danger / bg-warning to the header and text-danger / text-warning to the body.
   On the ERP shell those are Bootstrap 3's pale tints; here they are Bootstrap 5 / SB Admin 2 strong fills,
   which left the grey title unreadable (#858796 on red #e74a3b, 1.1:1) and the warning text yellow on white
   (1.65:1). Screen sweep 2026-09-29: Refund Request, Online Shopping, EMandate Register, Change Trip Detail. */
.jsUsePopupDiv .modal-header.bg-danger .modal-title { color: #fff; }
.jsUsePopupDiv .modal-header.bg-warning .modal-title { color: #212529; }
.jsUsePopupDiv .modal-body.text-warning { color: #8a6d3b !important; }
/* The third kind, "Application Notice", is coloured bg-info / text-info the same way: grey title on teal #36b9cc
   (1.5:1) and teal text on white (2.3:1). Dark title as on bg-warning; the body in Bootstrap 3's info text colour,
   which is what the ERP shell shows. */
.jsUsePopupDiv .modal-header.bg-info .modal-title { color: #212529; }
.jsUsePopupDiv .modal-body.text-info { color: #31708f !important; }

/* Views written for the OLD portal (_corlateLayout), opened on this one. corlate paints every .box-header, and
   every .panel-heading.active, in the school colour with white text, so views written for it force their heading
   white (class textwhite, or style="color:white"). SB Admin 2 leaves both headers transparent, so the heading was
   white on white: UserManagement > ID Card Change Request and Additional Info (Academic Year Requirements), and
   Fees > Loan Transaction History & Status (sweep 2026-09-29). The old portal does not load this file.
   - .box-header is the page's title bar: give it back its bar, in this portal theme's own colour. One view sets
     its white with an inline !important, which no stylesheet can override, so the bar is the only fix there.
     The theme's TEXT shade (--primary-text-color) is used, not its fill: white on the fill is 2.9:1 in little-nest
     (#729BC4), on the text shade 4.3:1 or better in every theme that defines one.
   - .panel-heading.active sits among sibling Fees panels whose titles are #4D4D4D on the plain header: match them. */
.box-header:has(> .textwhite) {
    background-color: var(--primary-text-color, var(--primary-color, var(--primary, #4e73df)));
    color: var(--text-on-primary, #fff);
    padding: .75rem 1.25rem;
    border-radius: .35rem .35rem 0 0;
}
.box-header:has(> .textwhite) > .textwhite { margin: 0; }
.panel-heading.active > .panel-title[style*="white"] { color: #4D4D4D !important; }

/* Bootstrap 3 status labels (<span class="bg-success">Approved</span>, a save message written into a bg-success
   span) were pale tints with dark text; here bg-* are SB Admin 2 strong fills and the text inherits the portal grey
   #858796 or the link blue: 1.1:1 to 2:1 (Portal > My Visits "Approved", sweep 2026-09-29). Give such text the
   readable colour for each fill: dark on green, yellow and teal, white on red. :where() keeps this at a single
   class's weight, so a page's own text colour still wins; badges keep theirs, and text-white / text-dark are
   !important and unaffected. bg-primary is left alone: three themes recolour it. */
:where(span, div, p, td, th, tr, li, label, small, strong, b, h1, h2, h3, h4, h5, h6):where(:not(.badge)).bg-success,
:where(span, div, p, td, th, tr, li, label, small, strong, b, h1, h2, h3, h4, h5, h6):where(:not(.badge)).bg-warning,
:where(span, div, p, td, th, tr, li, label, small, strong, b, h1, h2, h3, h4, h5, h6):where(:not(.badge)).bg-info { color: #212529; }
:where(span, div, p, td, th, tr, li, label, small, strong, b, h1, h2, h3, h4, h5, h6):where(:not(.badge)).bg-danger { color: #fff; }