.req{color:red !important; }
.spage {margin-top: 30px; background-color: #8a8a8d4d;line-height: 4}

.errorcl{border-color: #e13156 !important;}
.sp_error{ color:red }
.cl_examdiv{
	margin-top: 10px;margin-left: 294px;color: #9f626f;
}

.theading
    {
        font-style: oblique;
        font-size: 20px;
        color: darkred;
        font-weight: bold;
    }
    .tvalue
    {
        font-size: 20px;
        color: darkblue;
        font-weight: bold;
    }

    .succ_panel{
    background-color: forestgreen;
    }

    .sbtn.sbtn-link {
    background: 0 0!important;
    color: #d8dfea!important;
    padding: 4px 12px!important;
    line-height: 20px!important;
}
.sbtn { background-color:forestgreen!important;
    border-color: forestgreen!important;
}

.default_panel {
   background-color: #e06956;
}
.dbtn { background-color:#e06956!important;
    border-color: #e06956!important;
}
.dbtn.dbtn-link {
    background: 0 0!important;
    color: #060b13!important;
    padding: 4px 12px!important;
    line-height: 20px!important;
}

/* PERMISSION SETTINGS
-------------------------------------------------- */

.tree_role ul{ margin:0; padding:0; list-style:none; position:relative;}
.tree_role ul li{ padding:10px 30px; color:#46494e; position:relative;}
.tree_role ul li:before{ font-family:'Glyphicons Halflings'; font-size:12px; color:#fff; line-height:21px; text-align:center; width:24px; height:24px; background:#168ed1; border-radius:2px; display:inline-block; margin-right:10px; border:1px solid #0f84c5; position:relative; z-index:2;}
.tree_role > ul:after,
.tree_role > ul li > ul:after{content:""; display:block; height:100%; height: calc(100% - 100px); left:42px; position:absolute; top:35px; width:16px;  z-index:1;}

.tree_role ul li:after{content:""; display:block; height:22px; left:42px; position:absolute; top:35px; width:16px; }
.tree_role > ul > li{ font-size:16px; margin-bottom:0; color:#222; font-weight:600;}
.tree_role > ul > li > ul > li{ font-size:15px; font-weight:600;}
.tree_role > ul > li:before{content:"\e008"}
.tree_role > ul > li > ul > li:before{content:"\e008";}
.tree_role > ul > li > ul > li > ul li{ margin-bottom:-10px; font-size:14px;display: inline;}
.tree_role > ul > li > ul > li > ul li:after{ content:""; display:block; height:10px; left:-17px; position:absolute; top:-17px; width:15px;  z-index:1;}
.tree_role .checkbox-inline{ padding-left:20px;}

/* VERTICAL TABS
-------------------------------------------------- */
.perm_tabs{ margin:10px 0 30px 0;}
.tabs-left{border:none; padding-top:6px; position:relative; z-index:1;}
.tabs-left>li,.tabs-right>li{float:none;margin-bottom:4px}
.tabs-left>li{margin-right:-1px;word-wrap: anywhere;}
.tabs-right>li{margin-left:-1px}

.tabs-left>li>a{ padding:10px 15px 12px 15px; margin-right:0;display:block; font-size:15px; font-weight:600; position:relative; background:#dddddd; border-radius:3px; color:#46494e; box-shadow:-4px 0px 4px rgba(0,0,0,.1) inset;}
.tabs-left>li>a:hover{ background:#e6e6e6;}

.tabs-left>li.active>a,
.tabs-left>li.active>a:focus,
.tabs-left>li.active>a:hover,
.tabs-left>li>a:hover{ border:none; background:#226dbb; color:#fff; }

.tabs-left>li.active>a:after,
.tabs-left>li>a:hover:after{ position:absolute;content:"";background:#226dbb;width:15px;height:15px;border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0; -webkit-border-radius:0 4px 0 0; background-clip:padding-box;-moz-background-clip:padding;-webkit-background-clip:padding-box;transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);top:14px;right:-5px;}

.perm_tabs .tab-content{ border-radius:10px; min-height:500px; background:#cedaea; border:1px solid #ccc; padding:25px 25px 10px 25px;}
.perm_tabs  .same_tabl{position:relative; z-index:2;}
.perm_tabs .same_tabr{ position:relative; z-index:1;}
.tabs-left > li > a{ border:none;}

.perm_tabs .tab-content .perm_tabs .tab-content{ border-radius:10px; min-height:400px; background:#b7c9e6; border:1px solid #ccc; padding:25px 25px 10px 25px;}

.overlay {
    background: #e9e9e9; 
    display: none;       
    position: absolute;   
    top: 0;                 
    right: 0;              
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#myOverlay{position:absolute;height:100%;width:100%;}
#myOverlay{background:black;opacity:.7;z-index:2;display:none;}
#loadingGIF{position:absolute;top:40%;left:45%;z-index:3;display:none;}

/* Ensure dynamic tables take full width and tbody doesn't collapse */
/* target both table IDs used in views */
#dynamic-table,
#dynamic-table1,
#dynamic-table thead,
#dynamic-table tbody,
#dynamic-table tr,
#dynamic-table th,
#dynamic-table td,
#dynamic-table1 thead,
#dynamic-table1 tbody,
#dynamic-table1 tr,
#dynamic-table1 th,
#dynamic-table1 td {
    box-sizing: border-box;
}

/* Make the table full width and prevent tbody from shrinking when empty or with long content */
#dynamic-table,
#dynamic-table1 {
    width: 100% !important;
    /* prefer fixed layout for stable columns; allow wrap on very small screens by switching to auto via media queries if needed */
    table-layout: fixed;
    border-collapse: collapse;
   
}

#dynamic-table thead th,
#dynamic-table1 thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dynamic-table tbody td,
#dynamic-table1 tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
    /* allow wrapping for longer descriptive cells but keep other columns concise */
    white-space: nowrap;
}

/* Ensure responsive wrapper allows table to expand */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Stronger overrides to counter layout.css rules that alter table display */
.content-inner-scroll #dynamic-table,
.content-inner-scroll #dynamic-table1,
.content-inner-scroll #dynamic-table table,
.content-inner-scroll #dynamic-table1 table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.content-inner-scroll #dynamic-table tbody tr,
.content-inner-scroll #dynamic-table1 tbody tr {
    display: table-row !important; /* ensure rows are table rows (layout.css sometimes sets display:block) */
}

/* First column (SL NO) -- center and size to content width */
#dynamic-table th:first-child,
#dynamic-table td:first-child,
#dynamic-table1 th:first-child,
#dynamic-table1 td:first-child {
    text-align: center !important;
    width: max-content !important;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
}

/* also target the .center helper class used on the cell */
.content-inner-scroll #dynamic-table td.center,
.content-inner-scroll #dynamic-table1 td.center {
    text-align: center !important;
}

/* On very small screens allow table-layout:auto so cells can wrap vertically */
@media (max-width:600px){
    .content-inner-scroll #dynamic-table,
    .content-inner-scroll #dynamic-table1 {
        table-layout: auto !important;
    }
    .content-inner-scroll #dynamic-table thead th,
    .content-inner-scroll #dynamic-table1 thead th,
    .content-inner-scroll #dynamic-table tbody td,
    .content-inner-scroll #dynamic-table1 tbody td {
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* ------------------------------------------------------------------
   Global table layout fixes

   Many third-party CSS files and some view-level rules sometimes set
   tbody, tr or td to display:block to implement custom scrolling. That
   can shrink the body cells to the width of the first header cell. The
   rules below re-enforce the browser's table rendering model so the
   tbody contents expand to match header column widths.

   These overrides are intentionally specific to elements that are most
   frequently affected while remaining broad enough to fix the reported
   issue across the app. Use !important to override vendor files loaded
   earlier.
   ------------------------------------------------------------------ */

/* Ensure base table sizing */
table{
    width: 100% !important;
    table-layout: auto !important; /* allow columns to size to content */
    border-collapse: collapse !important;
}

/* Force table element groups/rows/cells to use table display types
   (some libs set these to block for scrolling and cause shrinkage) */
table thead { display: table-header-group !important; }
table tbody { display: table-row-group !important; }
table tr { display: table-row !important; }
table th, table td { display: table-cell !important; vertical-align: top; }

/* Prevent cells from collapsing to the smallest width; allow wrapping
   for long text rather than forcing single-column shrink */
table th, table td {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Preserve responsive wrappers */
.table-responsive > table,
.table-responsive table {
    width: 100% !important;
    table-layout: auto !important;
}

/* Keep special-case small-screen behaviour intact */
@media (max-width:600px){
    table, .table-responsive table { table-layout: auto !important; }
}

/* ------------------------------------------------------------------
   Plugin exceptions

   Some third-party components (FullCalendar, jqGrid, jsGrid, DataTables
   plugins) intentionally use `table-layout: fixed` or change table-group
   display to implement their UI. The global overrides above force
   normal table behavior for app tables; re-enable fixed layout for the
   known plugin selectors so those components keep functioning.
   ------------------------------------------------------------------ */

/* FullCalendar (scrollgrid / multimonth) */
.fc .fc-scrollgrid,
.fc .fc-scrollgrid table,
.fc .fc-multimonth-daygrid-table,
.fc table {
    table-layout: fixed !important;
}

/* jqGrid */
.ui-jqgrid .ui-jqgrid-btable,
.ui-jqgrid .ui-jqgrid-htable,
.ui-jqgrid .ui-jqgrid-ftable,
.ui-jqgrid .ui-subgrid table,
.ViewTable {
    table-layout: fixed !important;
}

/* jsGrid */
.jsgrid-table {
    table-layout: fixed !important;
}

/* DataTables plugin pieces that expect fixed layout (rowReorder, searchPanes) */
table.dt-rowReorder-float,
.dtsp-panesContainer .dataTables_wrapper .dataTables_scrollBody table {
    table-layout: fixed !important;
}

/* ------------------------------------------------------------------
   Modal vs Backdrop stacking and interactivity (Bootstrap 3/4/5)

   Ensure the modal surface sits above the backdrop and remains clickable,
   regardless of theme z-index inflation or BS5 CSS variables.
   ------------------------------------------------------------------ */

/* Backdrop: visible but below the modal */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade.in {
    z-index: 1400 !important;           /* above app chrome but below modal */
    opacity: var(--bs-backdrop-opacity, 0.5) !important; /* fallback for BS3/4 */
    pointer-events: none !important;    /* do not consume clicks; allow modal interaction */
}

/* Modal container and dialog: must be above backdrop and receive clicks */
.modal,
.modal.show,
.modal.in {
    z-index: 1410 !important;
}
.modal,
.modal-dialog,
.modal-content {
    pointer-events: auto !important;    /* explicitly allow interaction */
}

/* Plugin variants using Bootstrap modal under the hood */
.bootbox.modal,
.bootstrap-dialog .modal,
.bootstrap-dialog .modal-dialog,
.ekko-lightbox.modal {
    z-index: 1410 !important;
}

/* Guard: avoid unexpected parent stacking contexts that might eclipse modal */
body, html, .wrapper, .content-wrapper, .content-inner-scroll {
    transform: none !important;          /* prevent new stacking contexts */
    perspective: none !important;
    -webkit-transform: none !important;
}