/* CSS Document */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');



body {
    color: #aaaaaa;
    font-family: 'Sansation';
    background-color: #3d3d3d;
}


a{

	text-decoration: none;
	color: #d6d6d6;
}

.tw-shadow-sm{box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tw-shadow-md{box-shadow:0 6px 14px rgba(0,0,0,.3)}
.tw-shadow-lg{box-shadow:0 10px 24px rgba(0,0,0,.35)}
.tw-rounded-sm{border-radius:6px}
.tw-rounded{border-radius:10px}
.tw-rounded-md{border-radius:12px}
.tw-rounded-lg{border-radius:16px}
.tw-rounded-full{border-radius:9999px}
.tw-p-2{padding:8px}
.tw-p-4{padding:12px}
.tw-p-6{padding:16px}
.tw-m-2{margin:8px}
.btn-primary{background:var(--accent);color:#313647;border:1px solid var(--accent)}
.btn-secondary{background:var(--bg2);color:var(--text);border:1px solid var(--border)}
.btn-danger{background:var(--danger);color:#fff;border:1px solid var(--danger)}
.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid transparent}
.btn-sm{padding:6px 10px;font-size:13px}
.btn-lg{padding:12px 18px;font-size:16px}
.input-sm{height:32px;padding:6px 10px;font-size:13px}
.input-lg{height:44px;padding:10px 14px;font-size:16px}
.input-outline{border-color:var(--accent)}
.input-muted{background:var(--bg2);border-color:var(--border)}
.badge-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.badge-outline-success{background:transparent;border:1px solid var(--success);color:var(--text)}
.badge-outline-warning{background:transparent;border:1px solid #f59e0b;color:#111}
.badge-outline-info{background:transparent;border:1px solid #3b82f6;color:#fff}
.badge-outline-error{background:transparent;border:1px solid #ef4444;color:#fff}

.theme-forest{--bg:#2C3930;--bg2:#3F4F44;--panel:#3F4F44;--panel2:#A27B5C;--border:#2C3930;--text:#DCD7C9;--muted:#cfc9bb;--accent:#A27B5C;--accent-2:#8F6A4C}
.theme-vivid{--bg:#1D1842;--bg2:#8E0D3C;--panel:#241f57;--panel2:#FDA1A2;--border:#1D1842;--text:#F5F3F7;--muted:#EADFEF;--accent:#EF3B33;--accent-2:#8E0D3C}
.theme-sage{--bg:#0B0B0B;--bg2:#1F1F1F;--panel:#1F1F1F;--panel2:#2A2A2A;--border:#3A3A3A;--text:#EEEEEE;--muted:#CBCBCB;--accent:#D4AF37;--accent-2:#B38F1D}
.theme-gold{--bg:#0B0B0B;--bg2:#1F1F1F;--panel:#1F1F1F;--panel2:#2A2A2A;--border:#3A3A3A;--text:#EEEEEE;--muted:#CBCBCB;--accent:#D4AF37;--accent-2:#B38F1D}

body.theme-sage{background-color:var(--bg);color:var(--text)}
body.theme-gold{background-color:var(--bg);color:var(--text)}

.theme-sage .btn-primary,.theme-gold .btn-primary{background:linear-gradient(180deg, var(--accent) 0%, #c9a233 45%, #b68d2c 100%);color:#111;border:1px solid var(--accent-2);box-shadow:0 6px 12px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,255,255,.55)}
.theme-sage .btn-primary:hover,.theme-gold .btn-primary:hover{filter:brightness(1.08)}
.theme-sage .btn-outline,.theme-gold .btn-outline{background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.04));color:var(--accent);border:1px solid var(--accent-2)}
.theme-sage .button_box,.theme-gold .button_box{background:linear-gradient(180deg, var(--accent) 0%, #c9a233 50%, #b68d2c 100%);color:#111;border:1px solid var(--accent-2);box-shadow:0 8px 16px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.55)}
.theme-sage .button_box:hover,.theme-gold .button_box:hover{transform:translateY(-1px);filter:brightness(1.06)}
.theme-sage .header_menu_item,.theme-gold .header_menu_item,.theme-sage .header_menu_item_hover,.theme-gold .header_menu_item_hover{background:#1b1b1b;border:1px solid var(--border)}
.theme-sage .header_menu_item:hover,.theme-gold .header_menu_item:hover,.theme-sage .header_menu_item_hover{background:var(--accent)}
.theme-sage .table_border3,.theme-gold .table_border3{background:var(--panel);border:1px solid var(--border);box-shadow:0 10px 24px rgba(0,0,0,.45)}

.tw-grid{display:grid}
.tw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tw-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tw-grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tw-gap-4{gap:12px}
.tw-gap-6{gap:16px}
.tw-gap-8{gap:20px}
.tw-cols-2{column-count:2;column-gap:16px}
.tw-cols-3{column-count:3;column-gap:16px}
.masonry{column-count:3;column-gap:16px}
.masonry .m-item{break-inside:avoid;margin-bottom:16px}
.tw-h-48{height:192px}
.tw-h-64{height:256px}
.tw-p-8{padding:24px}
.tw-w-full{width:100%}
.tw-w-1\/2{width:50%}
.tw-w-1\/3{width:33.3333%}
.tw-w-2\/3{width:66.6667%}
.tw-inline-block{display:inline-block}
.demo-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px}

a:hover{
	cursor: pointer;
	text-decoration: none;
	color:#f6fac6;


}

.thumbnail{ border-color:#ffffff;
			border:5px;
			border-radius:5px;
			border-width:medium;

	}


a:visited {
    text-decoration: none;
    outline: none;
    /*color: #FFF;*/
}

.headerTxt{
	font-size: 12px;
	font-weight:bold;

}

.headerLogoTxt{
	font-size: 18px;
	font-weight: bold;
	
	}

.rounded-corners {
	background-color:#E9E9E9;
	height:25px;
	text-align:center;
	vertical-align:middle;
	text-shadow:#999;

}

.header_table{
	border-bottom: 0px dotted #333333;
}

.main_content{
	height: 500px;
	min-height: 500px;
	color: #000;
}


.content{ 
		color:#bdbdbd;
		}

.outerTable{


    	-moz-border-radius: 5px;
   		-webkit-border-radius: 5px;
		border-radius: 5px;
		/* border: 1px solid #333333; */
    	width: 100%;


	}


.header_menu_seperator{
	background-color:#FFFFFF;
	width:2px;
}

.header_menu_right{
	background-color:#CCCCCC;
	width:auto;
}

.header_menu_left{
	background-color:#CCCCCC;
	width:auto;
}

.header_menu_item{
	background-color:#990000;
	width: auto;
	font-stretch:semi-expanded;
	font-size:12px;
	text-align:center;

	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}


.header_menu_item_hover{
	background-color:#333333;
	width: auto;
	font-stretch:semi-expanded;
	font-size:12px;
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

}


.header_menu_table{
	height:35px;
}

.header_menu_item a{

	font-stretch:semi-expanded;
	font-size:12px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
}

.header_menu_item a:hover{

	font-stretch:semi-expanded;
	color:#FFFFFF;
	background-color:#333333;
	font-size:12px;
	font-weight:bold;
	text-decoration:underline;
}

.header_menu_item a:active{

	font-stretch:semi-expanded;
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}

.header_menu_item a:visited{

	font-stretch:semi-expanded;
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}

.header_menu_item_hover a{

	font-stretch:semi-expanded;
	font-size:12px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
}

.header_menu_item_hover a:hover{

	font-stretch:semi-expanded;
	color:#FFFFFF;
	background-color:#333333;
	font-size:12px;
	font-weight:bold;
	text-decoration:underline;
}

.table_border3{border-radius:12px;background:#222;box-shadow:0 8px 24px rgba(0,0,0,.35);border:1px solid #333}
.list_header{font-weight:700;letter-spacing:.3px}
.button_box{background:#3b82f6;color:#fff;border:none;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;transition:all .2s ease}
.button_box:hover{background:#2563eb}
.button_box[disabled]{opacity:.6;cursor:not-allowed}
.suggestionsBox{border-radius:10px;background:#2a2a2a;border:1px solid #444;box-shadow:0 6px 16px rgba(0,0,0,.35);color:#ddd}
.suggestionList li{padding:8px 12px;border-bottom:1px solid #3a3a3a}
.suggestionList li:last-child{border-bottom:none}
.suggestionList li b{display:inline-block;margin-right:10px;color:#fff}
.actions-cell{padding:10px}

/* Modern top navigation pills */
.header_menu_table{width:100%; border-spacing:12px}
.header_menu_item,.header_menu_item_hover{background:#2b2f33; border:1px solid #444; border-radius:12px; padding:10px 14px; box-shadow:0 4px 12px rgba(0,0,0,.25); transition:transform .15s ease, background .2s ease, box-shadow .2s ease}
.header_menu_item:hover,.header_menu_item_hover{transform:translateY(-1px); background:#3b82f6; box-shadow:0 6px 16px rgba(0,0,0,.35)}
.header_menu_item a,.header_menu_item_hover a{font-weight:600; letter-spacing:.3px; color:#fff}

@media (max-width: 768px){
  .header_menu_table{border-spacing:8px}
  .header_menu_item,.header_menu_item_hover{display:block; width:100%; padding:12px}
}

.header_menu_item_hover a:active{

	font-stretch:semi-expanded;
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}

.header_menu_item_hover a:visited{

	font-stretch:semi-expanded;
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}


.middleTable{
    /* background-color:#FFFFFF; */
    min-height: 80vh;
    border: 0px dotted #333333;
    margin-left: auto;
    margin-right: auto;

}


.footerTable{
	font-size:12px;
	}

input[type="text"],[type="password"] {
	border: 1px solid #333333;
}

input[type="radio"], input[type="radio"]{
   border: 0px solid #333333;
}

.list_header {
	background-color: #181818;
    background-repeat: repeat-x;
    text-align: center;
    vertical-align: middle;
    height: 50px;
    text-transform: capitalize;
    
}
.list_data_1{
	background-color: #212121;


}
.list_data_2{
	background-color:#333333;

}


.list_data_bad{
	background-color:#BC0003;


}

.white_txt_bold_1 {
	font-size:16px;
	font-weight: bold;
	color: #aaaaaa;
}

.black_txt_bold_1 {
    font-size: 14px;
        font-weight: bold;
        color: #111;
        text-align: center;
}


.table_border{
	/* 
	-webkit-border-radius: 5px;
	background-color:#cccccc; */
	border-radius: 5px;
	border:1px dotted #333333;

}




.table_border2{
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	border:1px dotted #212121;
	 /*background-color:#212121; */
	
	  
	  }

.table_border3{
	
	border-radius: 5px;
    -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border:1px dotted #212121;
	/*color: #555;*/
	background-color:#212121;
	
}


.add-new-btn {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 8px 16px;
	text-align: center;
	width: max-content;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.add-new-btn:hover {
	background-color: #2f6532;
}

.button_box{
	font:inherit;
	text-transform: uppercase;
	font-weight:300;
	border: 1px dotted #212121;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 14px;
	padding: 10px 10px 10px 10px;
	text-decoration: none;
	display: inline-block;
	
	color: #FFFFFF;
	background-color: #898989;
	cursor: pointer;
		
	}

.button_box:hover{
	
	background-color: #324e2f;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	
	}




/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
	float: left;
	clear: none; /* set to left or right if needed */
	border-radius:5px;
	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
	z-index: 50;
}

.ienlarger a {
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
 	position:relative;
}

.ienlarger span img {
	border-radius:100px;
	/* border: 1px solid #00000;  adds a border around the image */
	margin-bottom: 1px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	display: none;
	color: #CCCCCC; /* caption text colour */
	text-decoration: none;
	font-size: 12px; /* caption text size */
	background-color: #CCCCCC;
	background-position:center;
	font-weight: bold;
	padding-top: 1px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 1px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0px;
}

.ienlarger a:hover span {
	display: block;

	/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb *//* If you want the pop-up open above the thumb, remove the top: 50px; and add
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb *//* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
  width: 65px;
  border-radius:100px;
}

.large_resize_thumb {
/*height::150px !important; */
width: 200px !important;
background-position: center;
position: absolute;
top: -100px;
left: auto;
/* margin: 0 auto; */
z-index: 100;
box-shadow: 0px 0px 50px 20px #151515;
}

/* smart image enlarger ends here */
/* smart image enlarger ends here */



/* for popup in pending student list*/

.popupfrmRemark {
 	
	color: black;
	display: none;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	width:50%;
	text-align:left;
	background-color:#FFFFFF;
	-moz-box-shadow:  0 0 0.3em #333;
	-webkit-box-shadow: 0 0 0.3em #333;
	box-shadow:0 0 0.3em #333;
	z-index:300;
	padding:10px;
    	margin-top: 1px;
    	margin-left: 1px;
   
}
.black_overlay {
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color:#000000;
	z-index:200;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
	text-align:center;
}




/* Students list name search list*/
.suggestionsBox {
	position: relative;
	width: 50%;
	font-size: 14px;
	background-color: #C8C8C8;
	border: 1px solid;
	border-radius: 5px 5px 5px;
	/* [disabled]color: #fff; */
	padding: 10px 20px 20px 20px;
	margin-left: 20px;
	}

	.suggestionList {
		margin: 1px;
		padding: 1px;
	}

	.suggestionList li {

		margin: 0px 0px 2px 0px;
		padding: 3px;
		cursor: pointer;
		text-decoration: none;
  -moz-transition:-moz-transform 0.2s ease-in;
  -webkit-transition:-webkit-transform 0.2s ease-in;
  -o-transition:-o-transform 0.2s ease-in;
  -moz-transition:-moz-transform 0.2s ease-out;
  -webkit-transition:-webkit-transform 0.2s ease-out;
  -o-transition:-o-transform 0.2s ease-out;
	}

	.suggestionList li:hover {
	border-radius: 5px;
	color: #000000;
	background:#FFFFFF;
	-moz-transform:scale(1.5);
  	-webkit-transform:scale(1.5);
  	-o-transform:scale(1.5);
	}


	.expand{
	width: 100px;
	padding:5px;
   	background: #CCC;
	border-radius:5px;
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 0.10s;
	}

	.expand:hover{
		width: 120px;
	}



/* <!--button calculate css--> */
.classname {
	-moz-box-shadow:inset 0px 1px 0px 0px #964496;
	-webkit-box-shadow:inset 0px 1px 0px 0px #964496;
	box-shadow:inset 0px 1px 0px 0px #964496;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}
.classname:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
.classname:active {
	position:relative;
	top:1px;
}
/* <!--button calculate css ENDS--> */
/* This imageless css button was generated by CSSButtonGenerator.com */



.code-card {
    border-radius: 10px;
    font-size: 1.25em;
    letter-spacing: 1px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    margin-bottom: 10px;
    padding: 10px 0;
    text-align: center;
    transition: box-shadow 0.2s;
}
.code-card:hover,
.code-card:focus {
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.code-label {
    color: #bb941f;
    font-size: .95em;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.25em;
    display: block;
}
@media (max-width: 768px) {
    .code-card { font-size: 1em; padding: 10px 0;}
}



/* Responsive reset: remove legacy global UL/LIs hiding */

:root{--bg:#313647;--bg2:#435663;--panel:#435663;--panel2:#A3B087;--border:#2f393f;--text:#FFF8D4;--muted:#e9dfc0;--accent:#A3B087;--accent-2:#8f9d6e;--danger:#ef4444;--success:#22c55e;--shadow:0 10px 30px rgba(0,0,0,.35);--headerH:80px}
*{box-sizing:border-box}
html,body{height:100%}
body{color:var(--text);font-family:'Sansation';background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none;color:var(--text)}
a:hover{cursor:pointer;color:var(--accent)}
.txt_box{appearance:none;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s}
.txt_box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.main_content{min-height:60vh;color:var(--text)}
.list_header{background:var(--panel);border-bottom:1px solid var(--border);text-align:center;vertical-align:middle;height:54px;text-transform:capitalize;letter-spacing:.2px;font-weight:700}
.list_data_1{background-color:#161e2b}
.list_data_2{background-color:#0f1720}
tr.list_data_1:hover, tr.list_data_2:hover{background-color:#172133}
.table_border{border-radius:12px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow)}
.table_border2{border-radius:12px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow)}
.section-gap{margin:12px auto}
.search-panel{border-collapse:collapse;margin:6px auto}
.search-panel td{padding:6px 8px;vertical-align:middle}
.search-panel .roundcon{margin:0}
.search-panel .txt_box{margin:0}
.search-panel .dateSelect{margin:0}
.search-panel .button_box{padding:8px 12px}
.search-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px;align-items:center}
.search-grid>div{min-width:0}
.search-grid .full{grid-column:1/-1}
.search-actions{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.search-field{display:flex;gap:8px;align-items:center}
.panel-title{font-weight:700;margin:4px 0 8px;padding:0 6px;text-align:center;text-transform:uppercase}
.search-grid .roundcon,.search-grid .txt_box,.search-grid .dateSelect{width:100%}
.search-actions .button_box,.search-actions .add-new-btn{height:36px;display:inline-flex;align-items:center}
.search-grid .select-md{width:100%}
.search-grid .search-field{border:1px solid #1f2a37;border-radius:10px;padding:8px}
.grid-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:9999px;background:#3b82f6;color:#fff;font-weight:700;font-size:12px;margin-right:6px}
.search-grid select.roundcon{height:auto;min-height:38px;padding:8px 10px;line-height:1.2}
.table_border3{border-radius:12px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow)}
.table_border3 select{width:100%;max-width:none;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);padding:6px 10px;height:36px;line-height:24px}
.table_border3 select option{color:var(--text);background:var(--bg2)}
.table_border4{border-radius:12px;border:1px solid var(--border);background:var(--panel2);box-shadow:var(--shadow)}
.filter-panel{width:98%;margin:8px auto;padding:8px 10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.filter-panel .filter-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filter-panel label{font-weight:700;opacity:.9;margin-right:6px}
.filter-panel .roundcon,.filter-panel .txt_box{background:var(--bg2);width:auto;max-width:250px}
.filter-panel .dateSelect{background:var(--bg2);width:auto !important;max-width:220px}
.filter-panel .button_box{height:36px;margin:0}
.filter-panel .filter-actions{margin-left:auto;display:flex;align-items:center}
@media (max-width: 600px){.filter-panel .filter-inline{flex-wrap:wrap}}
.add-new-btn{background:var(--success);border:none;color:#fff;padding:10px 16px;text-align:center;width:max-content;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;cursor:pointer;border-radius:10px;transition:all .2s ease;box-shadow:0 6px 14px rgba(34,197,94,.25)}
.add-new-btn:hover{background:#16a34a;transform:translateY(-1px)}
.button_box{background:var(--accent);color:#313647;border:none;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 16px rgba(163,176,135,.25)}
.button_box:hover{background:var(--accent-2);transform:translateY(-1px)}
.button_box[disabled]{opacity:.6;cursor:not-allowed}
.roundcon{appearance:none;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s;font-size:14px}
.roundcon:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.header_table.search-compact .roundcon{margin:0}
.header_table.search-compact .select-md{width:100%;max-width:100%}
.header_table.search-compact select.roundcon{height:auto;min-height:38px;padding:8px 10px;line-height:1.2;text-align:left}
.header_table.search-compact{width:98%;border-collapse:collapse;margin:6px auto}
.header_table.search-compact td{padding:6px 8px;vertical-align:middle}
/* prevent overflow inside card demos */
.card .header_table.search-compact{width:100% !important;margin:6px 0 !important;table-layout:fixed}
.card .header_table.search-compact td{min-width:0}
.select-md{width:100%;max-width:250px}
.page-card{width:98%;margin:8px auto;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);background:transparent;padding:0}
.page-card-header{padding:10px 14px;border-bottom:1px solid var(--border);font-weight:700}
.page-card-body{padding:10px 14px}
.login-container{display:flex;justify-content:center;padding:24px}
.login-card{width:100%;max-width:420px;margin:16px auto;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px}
.login-brand{display:flex;justify-content:center;margin:12px 0}
.login-actions{display:flex;justify-content:center;margin-top:8px}
.login-card .txt_box,.login-card input[type="text"],.login-card input[type="password"],.login-card input[type="email"],.login-card input[type="number"],.login-card input[type="date"],.login-card input[type="time"]{display:block;margin:8px auto}
.login-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;line-height:1;font-size:0;color:var(--text)}
.login-icon::before{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:64px;content:attr(data-icon)}
.hidden{display:none}
.loader-icon{width:16px}
.badge{display:inline-block;padding:4px 8px;border-radius:9999px;font-size:12px;font-weight:600}
.badge-success{background:#16a34a;color:#fff}
.badge-error{background:#ef4444;color:#fff}
.badge-warning{background:#f59e0b;color:#111}
.badge-info{background:#3b82f6;color:#fff}
.muted{color:var(--muted);font-size:12px}
.nav-icon,.action-icon,.empty-icon,.error-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;line-height:1;font-size:0;color:var(--text)}
.nav-icon::before,.action-icon::before,.empty-icon::before,.error-icon::before{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:20px;content:attr(data-icon)}
.summary-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;width:100%;box-sizing:border-box;margin:6px 0}
.summary-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 12px;box-shadow:var(--shadow);font-weight:600}
.app-container{width:100%;padding:1px;margin:8px auto}
.updates-table{width:98%;border-collapse:collapse;margin:8px auto}
.updates-table td{padding:8px 10px}
.updates-table tr{border-bottom:1px solid var(--border)}
@media (max-width: 768px){
  .updates-table, .updates-table tbody, .updates-table tr, .updates-table td{display:block;width:100%}
  .updates-table tr{border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);margin:8px 0;padding:8px 10px}
  .updates-table td{padding:4px 0}
  .updates-table td:last-child{text-align:right;opacity:.85}
}
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px auto}
.pagination a{background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:6px 10px;border-radius:10px;transition:all .15s ease}
.pagination a:hover{background:var(--panel)}
.pagination .current_page{background:var(--accent);color:#313647;border:1px solid var(--accent);padding:6px 10px;border-radius:10px;font-weight:700}
.suggestionsBox{position:relative;width:50%;font-size:14px;background-color:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 20px 20px 20px;margin-left:20px;color:var(--text);box-shadow:var(--shadow)}
.dateSelect{cursor:pointer;background-color:var(--bg2);padding:8px 10px;border-radius:10px;border:1px solid var(--border);color:var(--text)}
.table_border3 input.roundcon,.table_border3 select.roundcon,.table_border3 textarea.roundcon{width:100%}
.middleTable{min-height:80vh;border:0 solid var(--border);margin-left:auto;margin-right:auto}
input[type="text"],[type="password"]{border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;padding:8px 10px}
/* Sticky header bar */
.sticky-header{position:fixed;top:0;left:0;right:0;z-index:10000;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.sticky-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px}
.header-center{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.header-left{display:flex;align-items:center;gap:10px}
.logo-link img{display:block;border-radius:8px}
.header-right .user-block{display:flex;align-items:center;gap:12px}
.header-right .server-time{opacity:.85}
.header-right .logout-link img{height:22px}
.header-spacer{display:block;height:var(--headerH)}
/* Ensure outer layout table fills available width */
.layout-table{width:100%;border-collapse:collapse}
.layout-table > tbody > tr > td{width:100%}
/* Collection Rate filter compact layout */
#collection-rate-filter{width:98%;margin:8px auto}
#collection-rate-filter .panel-title{text-align:center}
#collection-rate-filter .roundcon,#collection-rate-filter .txt_box,#collection-rate-filter select.roundcon{width:100%}
#collection-rate-filter .button_box{height:36px;padding:8px 12px}
#collection-rate-filter .search-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
#collection-rate-filter .search-field{padding:10px;flex-wrap:wrap}
#collection-rate-filter .search-actions{justify-content:space-between;flex-wrap:wrap}
#collection-rate-filter #tdSearch{grid-column:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#collection-rate-filter .tdSearch-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
#collection-rate-filter .sub-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
#collection-rate-filter .sub-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#collection-rate-filter .metrics-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#collection-rate-filter .grid-8{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
#collection-rate-filter .grid-8 .search-field{display:flex;flex-direction:column;gap:6px;align-items:stretch}
#collection-rate-filter .grid-8 .search-field>div:first-child{font-weight:700}
#collection-rate-filter .search-actions-inline{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media (max-width: 1200px){#collection-rate-filter .grid-8{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width: 768px){#collection-rate-filter .grid-8{grid-template-columns:repeat(2,minmax(0,1fr))}}
.header-divider{height:4px}
/* Tailwind-like navbar (scoped, overrides legacy menu styles) */
.sticky-header{position:fixed;top:0;left:0;right:0;z-index:10000;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.sticky-header .nav-wrap{flex:1;display:flex;justify-content:center}
.sticky-header .nav-wrap ul#menu{all:unset;display:flex;align-items:center;gap:10px;margin:0;padding:0;flex-wrap:nowrap}
.sticky-header .nav-wrap ul#menu>li{all:unset;position:relative;display:flex;align-items:center}
.sticky-header .nav-wrap ul#menu>li>a{all:unset;display:block;padding:8px 12px;color:var(--text);font-weight:600;letter-spacing:.2px;border-radius:8px;transition:background .15s ease,color .15s ease}
.sticky-header .nav-wrap ul#menu>li:hover>a{background:rgba(59,130,246,.15);color:var(--text)}
/* submenu panel (card style + animation) */
.sticky-header .nav-wrap ul#menu .hidden{display:block !important}
.sticky-header .nav-wrap ul#menu>li ul{all:unset;position:absolute;top:100%;left:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px 0;min-width:220px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease}
.sticky-header .nav-wrap ul#menu>li:hover ul,.sticky-header .nav-wrap ul#menu>li:focus-within ul{opacity:1;visibility:visible;pointer-events:auto}
.sticky-header .nav-wrap ul#menu>li ul li{all:unset;display:block}
.sticky-header .nav-wrap ul#menu>li ul li a{all:unset;display:block;padding:8px 12px;color:var(--text);border-radius:10px;transition:background .15s ease,transform .15s ease}
.sticky-header .nav-wrap ul#menu>li ul li a:hover{background:var(--bg2);transform:translateX(2px)}
/* nested sub-submenu slide right with card style */
.sticky-header .nav-wrap .submenu-item .sub-submenu{all:unset;position:absolute;top:0;left:calc(100% - 2px);display:block;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px 0;min-width:220px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease}
.sticky-header .nav-wrap .submenu-item:hover .sub-submenu{opacity:1;visibility:visible;pointer-events:auto}
.sticky-header .nav-wrap .submenu-item .sub-submenu li a{all:unset;display:block;padding:8px 12px;color:var(--text);border-radius:10px;transition:background .15s ease,transform .15s ease}
.sticky-header .nav-wrap .submenu-item .sub-submenu li a:hover{background:var(--bg2);transform:translateX(2px)}
/* remove legacy card styles on top-level menu */
div#menu>ul>li,div#menu>ul>li>a{all:unset}
/* Stick menu directly below sticky header */
div#menu{position:static;z-index:9999;padding:6px 0;background:transparent}
/* legacy mobile toggles for div#menu removed; mobile uses dedicated drawer */

.menu-toggle{display:none}
.hamburger{display:none;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px 10px;line-height:1;color:var(--text);box-shadow:var(--shadow);cursor:pointer}
@media (max-width:1024px){
  .hamburger{display:block}
  .header-center{display:none}
  .headerLogoTxt{display:none}
  .header-right{display:none}
  .hamburger{margin-left:auto}
  .logo-link img{height:36px}
}
.mobile-drawer{position:fixed;top:var(--headerH);left:0;right:0;bottom:0;display:none;background:rgba(0,0,0,.35);z-index:10001}
.mobile-panel{position:absolute;top:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--border);box-shadow:var(--shadow);border-radius:0 0 12px 12px;padding:10px;max-height:calc(100vh - var(--headerH));overflow:auto;animation:navDrop .18s ease-out}
.mobile-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mobile-list .m-group{border:1px solid var(--border);border-radius:10px;background:var(--bg2)}
.mobile-list .m-label{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:var(--text);font-weight:600;cursor:pointer}
.mobile-list .m-sub{display:none;padding:6px}
.mobile-list .m-group.open .m-sub{display:block}
.mobile-list a{display:block;padding:8px 10px;color:var(--text);border-radius:8px}
.mobile-list a:hover{background:var(--panel)}
.menu-toggle:checked~.mobile-drawer{display:block}
.mobile-list .m-sub-section{border:1px solid var(--border);border-radius:10px;background:var(--panel);margin:6px 0}
.mobile-list .m-sublabel{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;color:var(--text);font-weight:600;cursor:pointer}
.mobile-list .m-sublist{display:none;padding:6px;list-style:none;margin:0}
.mobile-list .m-sub-section.open .m-sublist{display:block}
@keyframes navDrop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* profile styles moved to css/profile_menu.css */

/* Two-column edit form layout (scoped) */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(420px,1fr));gap:20px;align-items:start}
.form-grid .card{border:1px solid var(--border);background:var(--panel);border-radius:12px;box-shadow:var(--shadow);padding:20px}
.form-grid .form-row{display:grid;grid-template-columns:240px 16px 1fr;gap:16px;align-items:center;margin:14px 0}
/* Prevent card demo overflow in design template */
.magazine .card .form-grid{grid-template-columns:1fr}
.magazine .card .form-row{grid-template-columns:180px 12px 1fr}
@media (max-width:1200px){.form-grid{grid-template-columns:1fr}}
.form-row input.roundcon,.form-row textarea.roundcon,.form-row select.roundcon{width:100%}
select.roundcon{appearance:none;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s;height:38px}
select.roundcon:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
textarea.roundcon{min-height:96px}
.avatar-grid{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.avatar-preview img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--border);box-shadow:var(--shadow)}
.avatar-input input[type=file]{width:100%}
.form-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.actions-left{display:flex;align-items:center;gap:12px}
.actions-right{display:flex;align-items:center;gap:12px}
/* header inside container */
.form-grid .full{grid-column:1/-1}
.page-title{text-align:center;font-weight:700;font-size:18px;margin-bottom:8px}
.mandatory-note{text-align:center;color:#ff5050;margin-bottom:12px}
/* status toggle */
.status-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-input{position:absolute;opacity:0;width:0;height:0}
.status-pill{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--border);border-radius:16px;background:var(--bg2);color:var(--text);cursor:pointer;transition:all .15s ease}
.status-input:checked+label.status-pill{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.25)}

/* Student Edit (Bootstrap override to match theme) */
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.card.alt{background:var(--panel2)}
.card-footer{background:var(--panel)!important;border-top:1px solid var(--border)!important}
.form-control,.form-control-file,.form-select{appearance:none;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 12px}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.form-control[readonly],.form-control:disabled{background:var(--bg);color:var(--text);opacity:1}
.form-control:-webkit-autofill,.form-control:-webkit-autofill:hover,.form-control:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px var(--bg) inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
.form-select option{color:var(--text);background:var(--bg2)}
.form-control[type="date"]{color:var(--text)}
input.form-control[type="date"]::-webkit-calendar-picker-indicator{filter:invert(85%)}
.form-control::-webkit-datetime-edit{color:var(--text)}
.form-control::-webkit-input-placeholder{color:var(--muted)}
.form-control::-moz-placeholder{color:var(--muted)}
.form-control:-ms-input-placeholder{color:var(--muted)}
.form-control::placeholder{color:var(--muted)}

/* Global admin input normalization (override inline styles) */
.outerTable input[type="text"],
.outerTable input[type="password"],
.outerTable input[type="number"],
.outerTable input[type="email"],
.outerTable input[type="date"],
.outerTable input[type="time"],
.outerTable input[type="file"],
.outerTable textarea,
.outerTable select{
  background:var(--bg) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:10px !important;
  padding:8px 10px !important;
}

.outerTable input:focus,
.outerTable select:focus,
.outerTable textarea:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(163,176,135,.25) !important;
  outline:none !important;
}

.outerTable ::placeholder{color:var(--muted) !important}
.img-thumbnail{background:transparent;border:2px solid var(--border);box-shadow:var(--shadow)}
.alert-danger{background:rgba(239,68,68,.15);color:#fecaca;border:1px solid rgba(239,68,68,.35);border-radius:10px}
.list_header{background:var(--panel);color:var(--text);border-bottom:1px solid var(--border)}
.form-check-label{color:var(--text)}
.modal-content{background:var(--panel);color:var(--text);border:1px solid var(--border)}
.modal-header{border-bottom:1px solid var(--border)}
.modal-footer{border-top:1px solid var(--border)}
.app-modal{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:scale(1.02);transition:visibility 0s linear .2s,opacity .2s 0s,transform .2s;z-index:99999999}
.app-modal.open{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s,opacity .2s 0s,transform .2s}
.app-modal-content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);width:92vw;min-width:600px;max-width:1200px;max-height:95vh;min-height:600px;display:block;box-sizing:border-box}
.app-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.app-modal-title{font-weight:700}
.app-modal-body{padding:16px;overflow:auto}
.app-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.app-modal-close{appearance:none;background:transparent;border:none;color:var(--text);height:32px;width:32px;border-radius:8px;cursor:pointer}
.app-modal-close:focus{outline:none}
@media (max-width:600px){.app-modal-content{width:96vw;min-width:auto;border-radius:10px}}
.app-modal-body iframe{width:100%;height:100%;display:block}
.teacher-cell{display:flex;align-items:center;gap:10px}
.teacher-meta{display:flex;flex-direction:column;line-height:1.2}
.teacher-name{font-weight:600;color:var(--text)}
.teacher-id{font-size:12px;color:var(--muted)}
.input-standard,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="time"]{
  appearance:none;
  background: var(--bg);
  border:1px solid var(--border);
  color: var(--text);
  padding:8px 10px;
  border-radius:10px;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  height:36px;
  width:100%;
  max-width:250px;
  box-sizing:border-box;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="time"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}
.outerTable .txt_box,.outerTable .roundcon,.outerTable select,.outerTable textarea,
.outerTable input[type="text"],.outerTable input[type="password"],.outerTable input[type="number"],.outerTable input[type="email"],.outerTable input[type="date"],.outerTable input[type="time"],.outerTable input[type="file"]{
  width:100% !important;
  
}
.outerTable .inplogin{width:100% !important}
.outerTable .select-md{width:90% !important}

/* Compact width for date selectors */
.dateSelect,
.outerTable input[type="date"]{
  width:100% !important;
  display:inline-block;
}
.search-grid .dateSelect{width:100% !important}
@media (max-width:600px){
  .dateSelect,
  .outerTable input[type="date"]{width:90% !important}
}
/* Ensure consistent field widths inside compact search panel */
.header_table.search-compact .txt_box,
.header_table.search-compact .roundcon,
.header_table.search-compact .inplogin {
  width: 100%;
  max-width: 250px;
}

.txt_box,.roundcon,.inplogin,.dateSelect{
  height:36px;
  padding:8px 10px;
  box-sizing:border-box;
  width:100%;
  max-width:250px;
}

/* Compact spacing for filter + list sections */
#teacherFilter{border-spacing:6px;margin:6px auto}
#teacherFilter td{padding:4px 8px}
#teacherFilter .txt_box,#teacherFilter .roundcon,#teacherFilter .dateSelect{height:32px;padding:6px 10px}
#teacherFilter .button_box{height:30px;padding:6px 10px}
.search-actions{gap:6px;margin:0;padding:0}
.table_border{margin:6px auto}
.table_border .list_header{height:48px}
.table_border2 .button_box{height:32px;padding:6px 12px}
/* unified input sizing already applied globally; remove redundant table_border2 input sizing */
.table_border2 .select-md{width:100%;max-width:250px}

/* Compact date inputs detected by name/id across admin pages */
.outerTable input[type="text"][name*="date"],
.outerTable input[type="text"][id*="date"],
.outerTable input[type="text"][name*="Date"],
.outerTable input[type="text"][id*="Date"],
.header_table.search-compact input[type="text"][name*="date"],
.header_table.search-compact input[type="text"][id*="date"],
.header_table.search-compact input[type="date"]{
  width:100% !important;
  display:inline-block;
}
@media (max-width:600px){
  .outerTable input[type="text"][name*="date"],
  .outerTable input[type="text"][id*="date"],
  .header_table.search-compact input[type="text"][name*="date"],
  .header_table.search-compact input[type="text"][id*="date"]{
    width:100% !important;
  }
}
.dashboard-layout{width:99%}
@media (max-width:768px){
  .dashboard-layout{display:block;width:100%}
  .dashboard-layout tr{display:block}
  .dashboard-layout td{display:block;width:100% !important;padding:0}
.table_border2{margin:6px auto}
}
/* Regular course details responsive layout */
#regularTable{width:98%;border-collapse:collapse;border-spacing:0}
#regularTable .course-card-col{vertical-align:top}
#regularTable .course-card-gap{width:4%}
.table_border3{padding:12px}
.button_box{margin:6px 8px 0 0}
@media (max-width: 1024px){
  #regularTable{width:100%}
  #regularTable .course-card-col{display:block;width:100% !important}
  #regularTable .course-card-gap{display:none}
}
#studentHeader{width:98%;border-collapse:collapse;border-spacing:0;margin-bottom:12px}
#studentHeader td{vertical-align:middle;padding:8px 10px}
#studentHeader .student-info .student-line{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#studentHeader .student-info .lbl{font-weight:600;opacity:.9}
#studentHeader .actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:nowrap;white-space:nowrap}
#studentHeader .actions .button_box{margin:0;display:inline-flex}
#regularTable{margin-top:6px}
/* Ensure Calculate and Reset buttons are visible, without affecting hidden #go */
#calcBtn{display:inline-block !important;visibility:visible !important;opacity:1 !important}
#resets{display:inline-block !important}
/* simplify legacy table header spacing on apply leave form */
.table_border3 tr:first-child{display:none}
.table_border3 tr:nth-child(2){display:none}
.table_border3 td{padding:4px 8px;text-align:left}
select#txtLeaveDay{appearance:auto !important}
/* payment totals visibility */
#payment_amount_entry_tbl #total_amount_td,
#payment_amount_entry_tbl #total_tax_td,
#payment_amount_entry_tbl #final_amount_td{font-weight:600;color:var(--text)}
#payment_amount_entry_tbl #final_amount_deduct_outstanding_td{font-weight:700;color:var(--success)}
@media (max-width: 1024px){
  #studentHeader td{display:block;width:100% !important;text-align:left !important}
  #studentHeader .actions{justify-content:flex-start;flex-wrap:wrap;white-space:normal}
}
 
 
.table_border3{width:98%;margin:8px auto;padding:8px}
@media (max-width: 768px){
  .table_border3 tr td.tbllogin{display:block;width:100% !important;text-align:left !important}
  .table_border3 tr td.tbllogin:nth-child(2){display:none}
  .table_border3 tr td:nth-child(3){display:block;width:100% !important}
 }
@media (max-width: 1200px){.search-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}}
@media (max-width: 768px){.search-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.search-actions{justify-content:flex-start}}
@media (max-width: 560px){.search-grid{grid-template-columns:1fr}}
.suggestionsBox{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px 10px;color:var(--text);box-shadow:var(--shadow)}
#suggestions{width:100%;max-width:600px;margin:6px 0}
#suggestions .suggestionList{list-style:none;margin:0;padding:0}
#suggestions .suggestionList li{list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer}
#suggestions .suggestionList li:last-child{border-bottom:none}
#suggestions .suggestionList li:hover{background:var(--bg2);transform:none;color:inherit}
#suggestions .suggestionList li b{font-weight:600;color:var(--text)}
/* two-column popup layout */
#suggestions{position:absolute;top:44px;left:0;width:100%;max-width:600px;z-index:5000}
#suggestions .suggestionList{max-height:320px;overflow:auto}
#suggestions .s-item{display:grid;grid-template-columns:1fr 200px;gap:12px;align-items:center}
#suggestions .s-name{font-weight:600}
#suggestions .s-mobile{text-align:left;opacity:.9}
.form-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr);gap:14px;align-items:start}
@media (max-width:1024px){.form-grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:20px;position:relative}
.single-card{max-width:1100px;margin:8px auto}
.single-card-grid{display:grid;grid-template-columns:repeat(2,minmax(420px,1fr));gap:12px;align-items:stretch}
.single-card-grid.one{grid-template-columns:1fr}
.single-card-grid.one .form-row{grid-template-columns:1fr;gap:6px;margin:8px 0}
.single-card-grid.one .form-row>div:nth-child(2){display:none}
.single-card-grid.one .form-row>div:first-child{font-weight:600;opacity:.9}
.single-card-grid.one .status-group{gap:8px}
.single-card-grid .form-row{display:grid;grid-template-columns:160px 6px 1fr;gap:6px;align-items:center;margin:4px 0}
@media (max-width:1200px){.single-card-grid{grid-template-columns:1fr}}
.student-inline{margin-top:10px;position:relative;display:flex;align-items:center;justify-content:center;min-height:100%}
.student-inline .student-line{align-self:center}
.student-actions{position:absolute;bottom:0;right:0}
.course-inline{margin-top:14px}
.course-grid{display:grid;gap:20px;margin:14px auto 0;align-items:start;justify-items:center;justify-content:center;max-width:1100px}
.course-grid.two{grid-template-columns:repeat(2,1fr)}
.course-grid.one{grid-template-columns:1fr}
.course-card{padding:16px;width:100%;max-width:none}
.course-card .TDHEAD{display:none}
.course-card .table_border3 tr{margin:0}
.course-card .table_border3 td{padding:6px 10px}
.course-grid.two .course-card:nth-child(odd){grid-column:1}
.course-grid.two .course-card:nth-child(even){grid-column:2}
@media (max-width:768px){.course-grid.two{grid-template-columns:1fr}}
.hidden{display:none !important}
.relative{position:relative}
.center-block{width:99%;position:relative;text-align:center}
.rel-top{position:relative;top:2px}
.text-success{color:var(--success)}
.list_header{text-align:left}
#suggestions{display:none}
.page-card{width:98%;margin:8px auto}
.card .page-card-body{padding:0}
.card .student-line{display:flex;gap:12px;align-items:center}
.card .teacher-meta{display:flex;flex-direction:column;gap:2px}
.card .summary-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
/* widen inputs inside cards to avoid congestion */
.card .txt_box,.card .roundcon,.card select.roundcon,.card textarea.roundcon,.card .dateSelect{max-width:none;width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:10px;height:36px;padding:6px 10px}
.card select:disabled,.card input[disabled],.card .dateSelect:disabled{opacity:1;background:var(--bg2);color:var(--text)}
/* Single-line form rows for Apply Leave */
.table_border3 td{display:flex;align-items:center;gap:12px}
.table_border3 td>div:first-child{min-width:180px;white-space:nowrap}
.table_border3 td input.txt_box,.table_border3 td select.roundcon,.table_border3 td input.dateSelect{flex:1}
.table_border3 td .button_box{margin-left:10px}
/* make all table_border3 rows single-line by hiding ':' column */
.table_border3 tr:not(.TDHEAD){display:flex;align-items:center;gap:12px}
.table_border3 tr:not(.TDHEAD) td{display:block;padding:6px 10px}
.table_border3 tr:not(.TDHEAD) td:nth-child(2){display:none}
.table_border3 tr:not(.TDHEAD) td:first-child{min-width:220px;text-align:left}
.table_border3 tr:not(.TDHEAD) td:last-child{flex:1;text-align:left}
@media (max-width:768px){.table_border3 td{flex-direction:column;align-items:flex-start;gap:6px}.table_border3 td>div:first-child{min-width:auto}}
#apply_leave .table_border3{background:transparent !important;border:none !important;box-shadow:none !important;padding:8px 0}
#apply_leave .table_border3 td{background:transparent !important}
#page .page-card .table_border3{background:transparent !important;border:none !important;box-shadow:none !important}
.page-card .table_border3{background:transparent !important;border:none !important;box-shadow:none !important}
.page-card .table_border3 td{background:transparent !important}
#regularTable .table_border3{background:transparent !important;border:none !important;box-shadow:none !important}
#regularTable .table_border3 tr:not(.TDHEAD){display:flex;align-items:center;gap:12px}
#regularTable .table_border3 tr:not(.TDHEAD) td{display:block;padding:6px 10px}
#regularTable .table_border3 tr:not(.TDHEAD) td:nth-child(2){display:none}
#regularTable .table_border3 tr:not(.TDHEAD) td:first-child{min-width:220px;text-align:left !important}
#regularTable .table_border3 tr:not(.TDHEAD) td:last-child{flex:1;text-align:left !important}
@media (max-width:768px){#regularTable .table_border3 tr:not(.TDHEAD){flex-direction:column;align-items:flex-start;gap:6px}#regularTable .table_border3 tr:not(.TDHEAD) td:first-child{min-width:auto}}
/* Balance two course columns inside course card */
#regularTable{width:96%;margin:0 auto}
#regularTable > tbody > tr{display:grid;grid-template-columns:repeat(2,minmax(520px,1fr));gap:24px;align-items:start}
#regularTable > tbody > tr > td.course-card-col{width:auto}
#regularTable > tbody > tr > td{padding:0}
#regularTable > tbody > tr > td:nth-child(2){display:none}
#regularTable .table_border3 tr:not(.TDHEAD){display:flex;align-items:center;gap:8px;line-height:1.3}
#regularTable .table_border3 tr:not(.TDHEAD) td{display:block;padding:4px 8px}
#regularTable .table_border3 tr:not(.TDHEAD) td:first-child{min-width:180px;text-align:left !important}
#regularTable .table_border3 tr:not(.TDHEAD) td:last-child{flex:1;text-align:left !important}
#regularTable .table_border3 tr:not(.TDHEAD) td:last-child select,
#regularTable .table_border3 tr:not(.TDHEAD) td:last-child input{width:100%;max-width:none}
@media (max-width:1200px){#regularTable > tbody > tr{grid-template-columns:repeat(2,minmax(420px,1fr))}}
@media (max-width:900px){#regularTable > tbody > tr{grid-template-columns:1fr}}
/* unify select styling to match inputs */
#regularTable .table_border3 select{width:100% !important;max-width:none !important;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);padding:6px 10px;height:36px;line-height:24px;}
#regularTable .table_border3 select:disabled{opacity:1;background:var(--bg2);color:var(--text)}
#regularTable .table_border3 input[disabled]{opacity:1;background:var(--bg2);color:var(--text)}
@media (max-width:768px){#regularTable .table_border3 tr:not(.TDHEAD) td:last-child select,#regularTable .table_border3 tr:not(.TDHEAD) td:last-child input{width:100%;max-width:100%}}
.card{max-width:1200px}
#page .payment-card,.payment-card{max-width:none;width:100%}
#page .center-screen{display:flex;align-items:center;justify-content:center;min-height:70vh}
#page .center-screen .payment-card{max-width:500px;width:100%}
.center-screen{display:flex;align-items:center;justify-content:center;min-height:70vh}
.center-screen .payment-card{max-width:500px;width:100%}
/* outstanding payment: center submit button */
.table_border3 .form-actions{justify-content:center}
.table_border3 .form-actions .button_box{margin:0}
#regularTable .card{max-width:none;width:100%}
@media (min-width:1200px){
  .single-card{max-width:1500px}
  .single-card-grid{grid-template-columns:repeat(2,minmax(560px,1fr));gap:16px}
  .single-card-grid .form-row{grid-template-columns:220px 12px 1fr;gap:10px;margin:10px 0}
  .form-grid{grid-template-columns:repeat(2,minmax(560px,1fr));gap:24px}
  .form-grid .form-row{grid-template-columns:260px 18px 1fr;gap:16px;margin:16px 0}
  .card{padding:22px}
  .card .txt_box,
  .card .roundcon,
  .card select.roundcon,
  .card textarea.roundcon,
  .card .dateSelect{height:42px;padding:10px 12px;font-size:15px}
  .course-grid{max-width:1500px}
  .course-grid.two{grid-template-columns:50% 50%}
  .course-grid.one{grid-template-columns:50%}
}
/* Dropdown indicator icon for select inputs */
select.roundcon,
.form-select,
#regularTable .table_border3 select,
.outerTable select{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 36px;
}
/* Hide the legacy IE dropdown arrow */
select::-ms-expand{display:none}
@media (min-width:1400px){
  .single-card{max-width:1600px}
  .single-card-grid{grid-template-columns:repeat(2,minmax(640px,1fr));gap:18px}
  .single-card-grid .form-row{grid-template-columns:240px 14px 1fr;gap:12px;margin:12px 0}
  .form-grid{grid-template-columns:repeat(2,minmax(640px,1fr));gap:28px}
  .form-grid .form-row{grid-template-columns:300px 22px 1fr;gap:20px;margin:18px 0}
  .page-title{font-size:20px}
  .mandatory-note{margin-bottom:16px}
  .card{padding:26px}
  .card .txt_box,
  .card .roundcon,
  .card select.roundcon,
  .card textarea.roundcon,
  .card .dateSelect{height:46px;padding:12px 14px;font-size:16px}
  .course-grid{max-width:1600px}
  .course-grid.two{grid-template-columns:50% 50%}
  .course-grid.one{grid-template-columns:50%}
}
.single-card-grid .form-row .txt_box,.single-card-grid .form-row .roundcon,.single-card-grid .form-row .dateSelect{height:32px;padding:6px 8px}
.card .top-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px}
.suggestionsBox .suggestionList{list-style:none;margin:0;padding:0}
.suggestionsBox .suggestionList .s-item{display:grid;grid-template-columns:1fr 100px 160px;align-items:center;gap:16px;padding:8px 12px;cursor:pointer}
.suggestionsBox .suggestionList .s-item:hover{background:#2a2a2a}
.suggestionsBox .suggestionList .s-name{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggestionsBox .suggestionList .s-mobile{color:#bbb;text-align:left;font-variant-numeric:tabular-nums}