@charset "utf-8";
/* CSS Document */
*{margin:0; padding: 0; box-sizing: border-box; font-family: 'Nunito', sans-serif;}

body{background: #e6e6e6; overflow-x: hidden}
body::-webkit-scrollbar{background-color:#D8D8D8;height:20px;width:7px}
body::-webkit-scrollbar-thumb{background:#400040}
body::-webkit-scrollbar-button:vertical:increment{display:none}
body::-webkit-scrollbar-button:vertical:decrement{display:none}

#wrap{margin-top:80px; margin-left:140px;}

header{width:100%; height:60px; top:0; background:#0c9; position: fixed}
header h1{text-transform: uppercase; color:#fff; line-height: 60px; margin-left: 20px; font-size: 20px;}
header ul{list-style: none; position: absolute; top:0; right:20px}
header ul li{cursor: pointer; color:#fff; float: left; line-height: 60px; padding: 0px 10px; box-sizing: border-box; position: relative}
header ul li sup{padding:6px 8px; font-size: 9px; box-sizing: border-box; border-radius: 100%; background: #000; margin-left:-7px; margin-top:-10px;}

#sidebar{height:100%; overflow-y: auto; width:120px; background:#2e2e2e; position: fixed; left: 0; top:60px;}
#sidebar ul{list-style: none}
#sidebar ul li{text-align: center; width:100%; height: auto; padding: 15px 10px; box-sizing: border-box; transition: background 0.3s}
#sidebar ul li a{text-transform: uppercase; font-weight: 700; line-height: 17px; display: block; text-decoration: none; color:#fff; letter-spacing: 1px}
#sidebar ul li a i{font-size: 24px; margin-bottom: 10px; width:100%;}
#sidebar ul li a span{font-size: 12px;}
#sidebar ul li:hover{background: #333}

#crumb{width:99%; padding: 10px 15px; box-sizing: border-box; background: #fff; margin-bottom: 20px;}
#crumb a{font-weight: 700px; text-decoration: none; color:#2e2e2e; margin:0 5px;}

#bodypart{background:#e6e6e6; width:100%;}
#add_pop_btn{list-style: none; user-select: none; background: #2e2e2e; height: 40px; width:200px; text-transform: uppercase; font-weight: 700; line-height: 40px; text-align: center; outline: none; cursor: pointer; color:#fff;}
#stud_class{width:99%; padding:10px; background: #fff}
#stud_class h2{text-align: center; font-size: 18px;}
#stud_class details{width:100%;}
.c_table{width:100%; background: #fff; margin-top:10px}
.c_table tr th,.c_table tr td{width:12.5%}
.c_table tr th{background:#2e2e2e; height:40px; color:#fff; text-align: left}
.c_table tr th:nth-child(1){padding-left: 20px; box-sizing: border-box;}
.c_table tr td:nth-child(1){padding-left: 20px; box-sizing: border-box;}
.c_table tr td{padding:10px 0px; box-sizing: border-box; font-weight: 700; border-bottom: 1px solid rgb(0,0,0,0.1)}
.c_table tr td img{width:40px; height:40px; display: block; margin: 0 auto;}
#view_update{transition: all 0.3s; background:none; border:1px solid rgb(0,0,0,0.1); padding: 10px; cursor: pointer}
#view_update:hover{background:#0c9; border:1px solid #0c9; color:#fff}

#pop_up{background:rgb(0,0,0,0.7); width:100%; height: 100%; position: absolute; top:0; left: 0}
#pop_up form{width:500px; padding: 0px 20px 0px 20px; background:#fff; position: relative; top:10%; left:50%; transform: translateX(-50%)}
.close_btn{position: absolute; right:10px; top:12px; width:40px; height: 35px; line-height: 35px !important; font-size: 20px; cursor: pointer; text-align: center; color:#fff;}
#pop_up form h2{width:500px; margin-left: -20px; font-weight: 700; font-size: 20px; background:#0c9; text-align: center; color:#fff; height: 60px; line-height: 60px; text-transform: uppercase}
#pop_up form ul{list-style-type: none; width:100%; margin-top:20px;}
#pop_up form ul li{width:50%; float: left; height: 30px; border:1px solid rgb(0,0,0,0.1); line-height: 30px; font-size: 14px}
#pop_up form ul li:nth-child(1), #pop_up form ul li:nth-child(2){background:#2e2e2e; color:#fff;}
#pop_up form ul li:last-child{margin-bottom: 20px;}

#input{width:100%; font-size:20px; height:50px; background:#eaf1ee; line-height: 50px; box-sizing: border-box; margin-top:20px; letter-spacing: 1px; position: relative}
#form_title{font-size:16px; text-align:left; margin-bottom: -30px; margin-top: 10px;}
#input i{width:40px; font-size: 16px; height: 100%; line-height: 50px; text-align: center; color:#2e2e2e; float: left}
#input input{font-size: 16px; padding-left:3px; width:90%; height: 92%; background:none; box-sizing: border-box; outline: none; border-width: 0px}
#input input:-webkit-autofill{box-shadow: 0 0 0 30px #eaf1ee inset !important;}
#input select{cursor: pointer; font-size: 16px; border-color: #eaf1ee; padding-left:3px; width:90%; height: 88%; background:none; box-sizing: border-box; outline: none; border-width: 1px}
#add_form_text{height:100px; font-size: 16px; resize: none; border:none; padding:10px; width:100%; background:#eaf1ee; box-sizing: border-box; outline: none; margin:20px 0px -5px 0px;}
#save_btn{transition: all 0.3s; width:200px; font-size:16px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; height: 40px; background:#2e2e2e; outline: none; border:none; color:#fff; margin:20px 0px 20px 0px; cursor: pointer}
#save_btn:hover{border-radius: 30px;}

.s_table{border-collapse:collapse; width:100%; background: #fff; margin-top:10px;}
.s_table tr:nth-child(2n+1){background:#F5F2F2}
.s_table tr th:first-child{border-left:1px solid #2e2e2e;}
.s_table tr th:last-child{border-right:1px solid #2e2e2e;}
.s_table tr th{text-transform: uppercase; background:#2e2e2e; height:40px; color:#fff; text-align: left; outline:none; user-select: none}
.s_table tr th::-webkit-resizer, .s_table tr td::-webkit-resizer{}
.s_table tr th, .s_table tr td{text-align:center; font-weight: 600; font-size: 11px; letter-spacing: 1px; box-sizing: border-box; cursor:pointer; overflow:auto; resize:horizontal;}
.s_table tr td{border-right:1px solid rgb(0,0,0,0.1); height:40px; line-height: 45px;}
.s_table tr td:first-child{border-left:1px solid rgb(0,0,0,0.1)}
.s_table tr td img{width:40px; height:40px; object-fit: contain; border-radius: 100%; vertical-align: middle}
.s_table tr:last-child{border-bottom:1px solid rgb(0,0,0,0.1)}
.s_table tr td a{text-decoration: none; color:#06f}
.s_table tr td details summary{list-style: none; background:#0c0; color:#fff; text-transform: uppercase; font-weight: 700; width:100px; height:30px; line-height: 30px; margin: auto}

.float{float: left !important; margin-left:10px;}
#stud_name{-webkit-appearance: none;}

#print_r{width:500px; border:2px solid #2e2e2e; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); background:#fff}
#print_r h2{text-align: center; font-size: 16px; border-bottom: 2px solid #2e2e2e; height: 35px; line-height: 35px}
#r_school{width:100%; border-bottom: 2px solid #2e2e2e;}
#r_logo{float:left; width:30%; height: 115px; border-right:2px solid #2e2e2e;}
#r_s_info{float: right; width:70%; padding:10px; overflow: hidden}
#r_s_info p{font-size: 14px;}
#r_stud{width:100%; border-bottom: 2px solid #2e2e2e; overflow: hidden}
#r_stud table{width:100%; margin:10px 0px; font-size:14px; padding:0px 10px; font-weight: 600}
#r_stud table tr td{height:30px; vertical-align: bottom}
#r_stud table tr td:nth-child(2n+1){text-align: right; width:30%; padding-right: 10px;}
#r_stud table tr td:nth-child(2n+2){border-bottom: 1px solid #2e2e2e}
#r_info{width:100%; border-bottom: 2px solid #2e2e2e}
#r_info table{width:100%;}
#r_info table tr th, #r_info table tr td{border-bottom:1px solid #2e2e2e; text-align:left; height:30px; border-right:1px solid #2e2e2e; padding:0px 5px; line-height: 30px; font-size:14px;}
#r_info table tr th:last-child, #r_info table tr td:last-child{text-align: right; border-right: none}
#r_info table tr td div{height:31px; width:auto; padding-left: 10px; border-left:1px solid #2e2e2e; border-bottom:1px solid #2e2e2e; float: right; margin-right: -5px; font-weight: 700}
#tbl_title{line-height: 40px; text-align: center}

#total_tbl{border:1px solid rgb(0,0,0,0.4); margin:20px auto 20px auto; width:600px;}
#total_tbl tr td{border:1px solid rgb(0,0,0,0.1); padding:5px; font-size: 14px}
#total_tbl tr td:nth-child(2n+2){text-align: right}

.filter{height:40px; width:67.5%;}
.filter label:first-child{margin-left:18%}
.filter input{height:100%; width:250px; padding-left: 5px}
.filter select{height:100%; width:250px; padding-left: 5px}
.filter button{width:100px; height:40px; color:#fff; text-transform: uppercase; cursor: pointer; border-width:0px; background: #2e2e2e}

.promote{transition: all 0.3s; float:right; margin-top:10px; cursor:pointer; width:200px; height:40px; background:#2e2e2e; font-size:16px; color:#fff; font-weight: 700; text-transform: uppercase}
.promote:hover{border-radius: 30px;}

.radio{transition: all 0.3s; width:15px; height:15px; outline: none; border:1px solid #2e2e2e; cursor: pointer}
.radio:checked{border:5px solid #2e2e2e}