.content-header {
    padding: 15px 0.5rem 0px 0.5rem;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
}
.vs--searchable .vs__dropdown-toggle{ height: 38px;}
table.pretty {
    width: 100%;
}
.close{
    color: #fff;
    opacity: 1 !important;
    padding-left: 17px !important;
    margin-top: -3px;
}
.alert {
    right: 0;
    position: absolute;
    z-index: 99;
}
.btn-outline-light{
    border: 1px solid #dadada;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
    color: #EBA24D !important;
}
.card-header{background-color: #eee !important;}
.list-group-item.active{
    background-color: inherit !important;
    color: #EBA24D !important;
}
.main-header .dropdown-menu .svg-inline--fa{
    vertical-align: 2px !important;
    height: 8px !important;
}
.dropdown-menu-right{margin-top: 8px;}
.content-wrapper>.content{padding: 0px 30px !important;}
.dropdown-menu.border-0.shadow{margin-top: 10px;}
.topbar{
    background: #3e3c87;
}
.navbar-light .navbar-nav .nav-link{
    color: #fff;
}
table.pretty th, table.pretty td {
    border: 1px solid gainsboro;
    padding: 0.2em;
}

table.pretty caption {
    font-style: italic;
    font-weight: bold;
    margin-left: inherit;
    margin-right: inherit;
}

table.pretty thead tr th {
    border-bottom: 2px solid;
    font-weight: bold;
    text-align: center;
}

table.pretty thead tr th.empty {
    border: 0 none;
}

table.pretty tfoot tr th {
    border-bottom: 2px solid;
    border-top: 2px solid;
    font-weight: bold;
    text-align: center;
}

table.pretty tbody tr th {
    text-align: center;
}

table.pretty tbody tr td {
    border-top: 1px solid;
    text-align: center;
}

table.pretty tbody tr.odd td {
    background: none repeat scroll 0 0 #EBF4FB;
}

table.pretty tbody tr.even td {
    background: none repeat scroll 0 0 #BCEEEE;
}

table.pretty thead tr th.highlightcol {
    border-color: #2E6E9E #2E6E9E gainsboro;
    border-style: solid;
    border-width: 2px 2px 1px;
}

table.pretty tfoot tr th.highlightcol {
    border-left: 2px solid #2E6E9E;
    border-right: 2px solid #2E6E9E;
}

table.pretty thead tr th.lefthighlightcol, table.pretty tbody tr td.lefthighlightcol, table.pretty tfoot tr th.lefthighlightcol {
    border-left: 2px solid #2E6E9E;
}

table.pretty thead tr th.righthighlightcol, table.pretty tbody tr td.righthighlightcol, table.pretty tfoot tr th.righthighlightcol {
    border-right: 2px solid #2E6E9E;
}

table.pretty thead tr th.lefthighlightcolheader, table.pretty tbody tr td.lefthighlightcolheader, table.pretty tfoot tr th.lefthighlightcolheader {
    border-left: 2px solid #2E6E9E;
}

table.pretty thead tr th.righthighlightcolheader, table.pretty tbody tr td.righthighlightcolheader, table.pretty tfoot tr th.righthighlightcolheader {
    border-right: 2px solid #2E6E9E;
}

.strikethrough {
    text-decoration: line-through;
    color: red;
}

.month, .year {
    margin: 2px;
}

caption, th {
    text-align: left;
}
.form-control{padding: 5px !important;}
.table td, .table th{ padding: 5px !important;}
.card-body{padding: 5px;}
.font-11{
    font-size: 11px;
}

.style-0 {
    empty-cells: show;
    table-layout: fixed;
    width: 1315pt
}

.style-1 {
    color: white;
    padding-left: 10pt;
    font-size: 14pt;
    font-family: "Arial";
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    word-spacing: 0pt;
    letter-spacing: 0pt;
    background-color: #339933
}


.opacity-75 {
    opacity: 0.75;
    filter: alpha(opacity=75);
}
.opacity-50 {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.opacity-25 {
    opacity: 0.25;
    filter: alpha(opacity=25);
}
.opacity-0 {
    opacity: 0;
    filter: alpha(opacity=0);
}
.no-edge-top {
    top: 0;
}
.no-edge-bottom {
    bottom: 0;
}
.no-edge-left {
    left: 0;
}
.no-edge-right {
    right: 0;
}
.user_name{
    font-size:14px;
    font-weight: bold;
}
.comments-list .media{
    border-bottom: 1px dotted #ccc;
}


/* Wrapper center */
.dataTables_paginate {
    margin-top: 15px;
    text-align: center;
}

/* Pagination container */
.dataTables_paginate .pagination {
    justify-content: center;
    gap: 6px;
}

/* Page buttons */
.dataTables_paginate .page-item .page-link {
    border-radius: 10px;
    border: none;
    padding: 8px 14px;
    color: #555;
    background: #f1f3f5;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
}

/* Hover effect */
.dataTables_paginate .page-item .page-link:hover {
    background: #9C6F48;
    color: #fff;
}

/* Active page */
.dataTables_paginate .page-item.active .page-link {
    background: #9C6F48;
    color: #fff;
    box-shadow: 0 3px 8px rgba(120,60,10,0.3);
}

/* Disabled */
.dataTables_paginate .page-item.disabled .page-link {
    background: #e9ecef;
    color: #aaa;
    cursor: not-allowed;
}

/* Previous / Next special */
.dataTables_paginate .page-item.previous .page-link,
.dataTables_paginate .page-item.next .page-link {
    font-weight: 600;
    border-radius: 20px;
}
div.dataTables_wrapper div.dataTables_length select{
    width: 55px !important;
}
/* ============================================================
   Main sidebar menu — two selectable color schemes
   (Modules/Setting: "core.menu_color_scheme" = Default | Alternate (White))
   Default scheme = untouched AdminLTE sidebar-dark-primary skin (no rules needed here).
   Alternate scheme = white background, navy pill nav items.
   Scoped to .main-sidebar:not(.sidebar-dark-primary) so it only applies
   when the dark skin class is absent from the <aside>.
   ============================================================ */

/* Brand text needs to stay visible in the default dark scheme too,
   now that it's no longer hardcoded via an inline style. */
.main-sidebar.sidebar-dark-primary .brand-text {
    color: #fff;
}

.main-sidebar:not(.sidebar-dark-primary) {
    background-color: #ffffff;
    border-right: 1px solid #ececf3;
    box-shadow: 2px 0 8px rgba(23, 22, 58, .03);
}

.main-sidebar:not(.sidebar-dark-primary) .brand-link {
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #ececf3;
    padding: 16px 18px;
    white-space: normal;
}
.main-sidebar:not(.sidebar-dark-primary) .brand-image {
    max-height: 34px;
    width: auto;
    float: none;
    margin-right: 10px;
    border-radius: 6px;
}
.main-sidebar:not(.sidebar-dark-primary) .brand-image-icon {
    font-size: 22px;
    color: #2b2a6b;
    margin-right: 10px;
}
.main-sidebar:not(.sidebar-dark-primary) .brand-text {
    color: #17163a;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.25;
}

.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar {
    padding: 10px 12px;
}
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-item {
    margin-bottom: 2px !important;
    padding: 0 !important;
}

.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar > .nav-item > .nav-link,
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-treeview .nav-link {
    color: #6b7280;
    background: transparent;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    transition: background .15s ease, color .15s ease;
}
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-link p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    line-height: 1.3;
}
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-icon {
    color: inherit;
    opacity: .8;
    width: 22px;
    text-align: center;
    margin-right: 10px;
    font-size: 15px;
}

.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-link:hover {
    background: #f2f2fa;
    color: #2b2a6b;
    text-decoration: none;
}
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-link.active,
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .menu-open > .nav-link {
    background: #2b2a6b;
    color: #fff;
    font-weight: 600;
}
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-link.active .nav-icon,
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .menu-open > .nav-link .nav-icon {
    color: #fff;
    opacity: 1;
}
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-link .right {
    font-size: 12px;
    opacity: .6;
}

/* Remove AdminLTE spacing */
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-treeview {
    margin: 2px 0 4px 0;
    padding-left: 0 !important;
    width: 100%;
    box-sizing: border-box;
}
.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-treeview .nav-link {
    padding: 8px 12px 8px 30px;
    font-size: 13.5px;
    width: calc(100% - 10px);
    margin-right: 10px;
    box-sizing: border-box;
}

.main-sidebar:not(.sidebar-dark-primary) .nav-sidebar .nav-treeview > .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   Third scheme: "Logo (Orange)" — matches the school logo's
   dominant orange ring. Builds on AdminLTE's sidebar-dark-primary
   skin (keeps its dark-skin structure) and recolors the background,
   brand header and text/icons for readability against orange.

   AdminLTE's own rules this has to beat (both tuned for a navy
   background, so they read as washed-out, low-contrast smudges
   against a bright orange one — hence the more specific selectors
   / !important below rather than a single blanket override):
   - [class*=sidebar-dark-] .sidebar a { color:#c2c7d0 }
   - [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link { color:#c2c7d0 }
     (0,4,0) — beats a plain ".sidebar a" override, needs its own rule.
   - .layout-navbar-fixed .wrapper .sidebar-dark-primary
     .brand-link:not([class*=navbar]) { background-color:#3E3C87 }
     (0,5,0) — needs !important to lose to a 3-class selector.
   ============================================================ */
.main-sidebar.skin-logo-orange {
    background-color: #F26522 !important;
}
.main-sidebar.skin-logo-orange .brand-link {
    background-color: #D9541A !important;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.main-sidebar.skin-logo-orange .sidebar a,
.main-sidebar.skin-logo-orange .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: #fff;
}
.main-sidebar.skin-logo-orange .nav-header {
    color: rgba(255, 255, 255, .65) !important;
    text-transform: uppercase;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 14px 16px 6px;
}
.main-sidebar.skin-logo-orange .nav-sidebar .nav-link:hover,
.main-sidebar.skin-logo-orange .nav-sidebar .nav-link:focus {
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
}
.main-sidebar.skin-logo-orange .nav-sidebar .nav-link.active,
.main-sidebar.skin-logo-orange .nav-sidebar .menu-open > .nav-link {
    background-color: #1D69A4 !important;
    color: #fff;
}

/* ============================================================
   Fourth scheme: "Purple" — indigo-purple sidebar with uppercase
   section-group headers between menu items. Builds on AdminLTE's
   sidebar-dark-primary skin like skin-logo-orange above, so the
   same specificity-beating notes apply here.
   ============================================================ */
.main-sidebar.skin-purple {
    background-color: #4B3F8F !important;
}
.main-sidebar.skin-purple .brand-link {
    background-color: #423578 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.main-sidebar.skin-purple .sidebar a,
.main-sidebar.skin-purple .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: #E4E1F5;
}
.main-sidebar.skin-purple .nav-header {
    color: #B8AEDE !important;
    text-transform: uppercase;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 14px 16px 6px;
}
.main-sidebar.skin-purple .nav-sidebar .nav-link:hover,
.main-sidebar.skin-purple .nav-sidebar .nav-link:focus {
    background-color: rgba(255, 255, 255, .10);
    color: #fff;
}
.main-sidebar.skin-purple .nav-sidebar .nav-link.active,
.main-sidebar.skin-purple .nav-sidebar .menu-open > .nav-link {
    background-color: #5A4FAE !important;
    color: #fff;
}
.main-sidebar.skin-purple .nav-sidebar .nav-link .right {
    color: #B8AEDE;
}

/* Child menu */