@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200&family=Pavanam&family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Playwrite+NG+Modern:wght@100..400&display=swap');
body{
	font-family: 'DM Sans', sans-serif;
	margin: 0;
	background: #e6e6e6;
}
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.navbar-right{
	display: none;
}
.navbar h3{
	width: 80%;
    word-wrap: break-word;
    font-size: 2vmax;
}
.left{
	width: 25%;
	height: 100%;
	background: #204060;
	position: fixed;
	float: left;
	color: white;
	overflow: auto;
}  
.left img{
	height: 120px;
	width: 120px;
	margin-top:4vh; 
	margin-bottom: 2vh;
}
.list{ 
	margin-top: 3px;
	padding: 13px 10px;
	background: #2d5986; 
	color: white;
	font-size: 1.3em;
} 
.left a{
	text-decoration: none;
	color: white;
	font-size: 10px;
}
.links i{
	float: right;
	color: #ffd633;
} 
.links span{
	color: #ffd633;
	padding-right: 3px;
}
.panel-collapse li{
	list-style: none;
	padding: 5px 0px 5px 20px;
}
.navigation p{
	padding: 10px;
	color: #b3b3b3;
}




.right{
	width: 75%;
	float: right;
	margin: 0;
}
.navbar{
	height: 8vh; 
	width: 75%;
	left: 25%;
	background: #204060;
	color: white;
	border-radius: 0;
	padding:0px 10px;
} 

.topic{
	background: darkgrey;
	padding: 11px 0 11px 15px;
	margin-top: 8vh;
}
.topic b{
	font-weight: normal;
}
.topic a{
	text-decoration: none;
	color: black;
}  
.welcome{
	padding: 10px 0 10px 15px;
}
.welcome img{
	height: 20px;
	width: 20px;
}
.board{ 
	margin-top: 3vh;
	height: 150px;
	border-radius: 10px;
	padding: 20px;
}
.board div:nth-child(odd){
	width: 40%;
	float: left;
} 
.board div:nth-child(even){
	width: 60%;
	float: left;
}
.board img{
	height: 50px;
	width: 50px;
	padding: 5px;
	background: white;
	border-radius: 100%;
}
.board p{
	margin-top: 2vh;
}
.board h3{
		font-weight: bold;
}
.b-one{
	background:#ffd633;
	color: black;
}
.b-two{
	background: black;
	color: white;
}
.b-three{
	background: #33cc33;
	color: white;
}
.b-four{
	background: #2d5986;
	color: white;
}




















/* styling for general setup page begins */
.gen_set{
	padding: 20px 0 0 15px;
}
.gen_set div{ 
	display: flex;
	position: relative;
	margin-bottom: 3vh;
	width: 40%;
	border: 1px solid lightgrey;
	border-radius: 8px;
}
.gen_set input[type=text]{
	width: 100%;
	border: none;
	padding: 5px;
}
.gen_set input[type=date]{
	width: 100%;
	border: none;
	padding: 5px;
}
.gen_set input[type=file]{
	width: 100%;
	border: none;
	padding: 5px;
}
.gen_set input[type=password] {
    width: 100%;
    border: none;
    padding: 5px;
}
.gen_set input[type=email] {
    width: 100%;
    border: none;
    padding: 5px;
}
.gen_set input[type=number] {
    width: 100%;
    border: none;
    padding: 5px;
}
.gen_set select{
	width: 100%;
	border: none;
	padding: 5px;
}
.gen_set span{
	width: 10%;
	padding-top: 7px;
	background: #a6a6a6;
	text-align: center;
}
input:focus{
	outline: none;
}

.gen_set button{
	background:#2d5986;
	padding: 6px 10px;
	border-radius: 6px;
	color: white;
	border: none;
	transition: 0.2s ease-in-out;
}
.gen_set button:hover{
	background:#204060;
}


/* styling for general setup page ends */










/* styling for session setup begins */
.sess_set{
	padding: 25px 0 0 15px; 
}/*
.nav-tabs>.active{ 
	font-weight: bold;
	border-bottom: 3px solid gold;
}
.nav-tabs a{
	color: black;
}*/
.nav-tabs li a{
	color: black; 
}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active{ 
	font-weight: bold;
	border-top: 1px solid gold; 
	border-radius: 0px;
	color: #2d5986;
}
.nav-tabs>li>a:hover{
	background: #d9d9d9;
	color: black;
} 
 
.tab-content{
	background: white;
	padding: 20px;
	width: 95%;
}
.tab-content li{
	list-style: none;
} 
.session_options select{
	margin-bottom: 3vh;
	width: 40%;
	border-radius: 5px;
	border: 1px solid lightgrey;
	padding: 6px 10px;
}
.session_options p{
	font-weight: bold;
}
.session_options button{
	border: none;
	background:#2d5986;
	color: white;
	padding: 5px 10px;
	border-radius: 6px;
	transition: 0.2s ease-in-out;
}
.session_options button:hover{
	background: #204060;
	transition: 0.2s ease-in-out;
}
.table-responsive .delete{
	border: none;
	padding: 5px 6px;
	font-size: 10px;
	border-radius: 3px;
	background: #ff3333;
	color: white;
	transition: 0.2s ease-in-out;
} 
.table-responsive .delete:hover{
	background: #cc0000;
	transition: 0.2s ease-in-out;
}

.table-responsive .edit{
	border: none;
	padding: 5px 6px;
	font-size: 10px;
	border-radius: 3px;
	background: #666666;
	margin-right: 3px;
	color: white;
	transition: 0.2s ease-in-out;
} 
.table-responsive .edit:hover{
	background: #262626;
	transition: 0.2s ease-in-out;
}
.table-responsive .generate{
	border: none;
	padding: 5px 6px;
	font-size: 10px;
	border-radius: 3px;
	background: #409a73;
	margin-right: 3px;
	color: white;
	transition: 0.2s ease-in-out;
} 
.table-responsive .generate:hover{
	background: #6cc09b;
	transition: 0.2s ease-in-out;
}
.table-responsive th{
	border-right: 1px solid lightgrey;
	border-bottom: 1px solid grey;
}
.table-responsive td{
	border-right: 1px solid lightgrey;
}














/* styling for classes set up page */
.class_options{
	display: flex;
} 
.class_options li{
	margin-top: 3vh;
}
.class_options input{
	margin-right: 15px;
	margin-left: 2px;
}
.class_options div{
	width: 50%;
} 
.class_options button{
	background:#2d5986;
	padding: 6px 10px;
	border-radius: 6px;
	color: white;
	border: none;
	transition: 0.2s ease-in-out;
}
.class_options button:hover{
	background:#204060;
}
.modal-body select{
	padding: 6px 10px;
	width: 100%;
	border-radius: 5px;
	border: 1px solid lightgrey;
}
 
.modal-body button{
	margin-top: 3vh;
	margin-bottom: 5vh;
	background:#2d5986;
	padding: 6px 10px;
	border-radius: 6px;
	color: white;
	border: none;
	transition: 0.2s ease-in-out;
	display: block;
}
.modal-body button:hover{
	background:#204060;
}

.modal-body li{
	list-style: none;
	margin-top: 3vh;
}
.modal-body input[type=text]{
	width: 100%;
	border-radius: 4px;
	border: 1px solid lightgrey;
	padding: 6px 10px;
}
.modal-body input[type=number] {
    width: 100%;
    border-radius: 4px;
    border: 1px solid lightgrey;
    padding: 6px 10px;
}
.session_table-1 th{
	background: #204060;
	color: white;
}
.print-1{
	background: #204060;
	color: white;
	padding: 8px 15px;
	border: none;
	border-radius: 6px;
	margin-top: 10px;
	margin-left:15px;
}















/*styling for class record page */

.record{
	padding: 10px 0px 0px 15px;
} 
.search-tools div{
	width: 50%;
	float: left;
	margin-top: 2vh;
}
.search-tools select{
	width: 95%;
	padding: 6px 10px;
	border-radius: 5px;
	border: 1px solid lightgrey;
}
.search-tools input{
	width: 95%;
	padding: 6px 10px;
	border-radius: 5px;
	border: 1px solid lightgrey;
}
.search-tools button{
	margin-top: 2vh;
	border: none;
	background:#2d5986;
	color: white;
	padding: 5px 10px;
	border-radius: 6px;
	transition: 0.2s ease-in-out;
}
.search-tools button:hover{
	background: #204060;
	transition: 0.2s ease-in-out;
}
.record_sheet{
	background: white;
	border-radius: 5px;
	padding: 10px 15px;
	width: 96%;
	margin-top: 2vh;
	margin-left: 15px;
}
.record_sheet li{
	list-style: none;
	display: inline-block;
	margin-right: 10px;
}
.record_sheet button{
	border: none;
	padding: 6px 10px;
	border-radius: 4px; 
	transition: 0.2s ease-in-out;
}
.record_sheet .red:hover{
	background: #e60000;
	color: white;
	transition: 0.2s ease-in-out;
}
.record_sheet .red{
	background: #ff3333;
	color: white;
}
.record_sheet .blue:hover{
	background:#204060;
	color: white;
	transition: 0.2s ease-in-out;
}
.record_sheet .blue{
	background:#2d5986;
	color: white;
}
.record_sheet .white{
	background: white;
	border: 2px solid lightgrey;
	color: black;
}
.record_sheet .white{
	background: #f2f2f2;
	transition: 0.2s ease-in-out;
}

.record_sheet .table{
	margin-top: 3vh;
}


.record_name li{
	list-style: none;
	display: inline-block; 
	margin-top: 2vh;
	margin-right: 20vh;
}










.tab-search{
	width: 50%;  
	border-radius: 5px;
	border: 1px solid lightgrey;
	padding: 6px 10px;
	margin: 10px 0px;
}

.role_tool li{ 
	list-style: none;
	display: inline-block;
} 








.staff_finance{
	padding: 10px 15px;
} 
.staff_finance select{
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid lightgrey;
	width: 50%;
}
.emolument{
	display: flex; 
	margin-top: 5vh;
}
.emolument div{
	width: 50%;
	padding: 20px;
}
.emolument .bg-one{
	background: #204060;
	color: white;
}
.emolument .bg-two{
	background: #ffd633;
	color: black;
}
.emolument li{
	list-style: none;
}
.emolument input{
	width: 100%;
	margin-bottom: 3vh;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid lightgrey;
	color: black;
}
.staff_finance button{
	background: #2d5986;
	color: white;
	padding: 6px 10px;
	border-radius: 6px;
	border: none;
	margin: 3vh 2px 0;
	transition: 0.2s ease-in-out;
}
.staff_finance button:hover{
	background: #204060;
	transition: 0.2s ease-in-out;
}

















/* styling for login and sign up begins */
.login-bg{
	background:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(../img/log-bg.jpg);
	background-position: center;
	background-size: cover ;
	height: 95vh; 
}
.login-bg h2{
	color: white;
	margin-top: 10vh;
}
.login-details{
	background: white; 
	width: 40%;
	padding: 20px;
	border-radius: 6px;
}
.login-details img{
	height: 100px;
	width: 100px;
}
.login-details input, .login-details select{
	width: 100%;
	padding: 7px 10px;
	border-radius: 5px;
	border: 1px solid lightgrey;
	margin-top: 2vh;
}

.login-details input[type=submit]{
	background: #2d5986;
	transition: 0.2s ease-in-out;
	color: white;
}
 
.login-details input[type=submit]:hover{
	background: #204060;
	transition: 0.2s ease-in-out;
}


#val_error_message{
	color: white;
	font-size: 1.0em;
    position: fixed;
    top: 14%;
    right: 2%;
    background-color: red;
    padding: 10px 20px;
    border: 1px solid greenyellow;
    border-radius: 6px;
	width: unset;
}

#val_error_message:after {
    content: '✗';
    padding-left: 16px;
}

#val_success_message{
    color: white;
    font-size: 1.0em;
    position: fixed;
    top: 14%;
    right: 2%;
    background-color: green;
    padding: 10px 20px;
    border: 1px solid greenyellow;
    border-radius: 6px;
	width: unset;
}

#val_success_message:after {
    content: '✓';
    padding-left: 16px;
}

#val_notif_message{
	color: white;
    font-size: 1.0em;
    position: fixed;
    top: 14%;
    right: 2%;
    background-color: rgb(190, 190, 14);
    padding: 10px 20px;
    border: 1px solid greenyellow;
    border-radius: 6px;
	width: unset;
}

#val_notif_message:after {
    content: '!!';
    padding-left: 16px;
}

#val_error{
	color: red;
	font-size: 1.1em;
}

#val_success{
	color: green;
	font-size: 1.1em;
	
}

#val_notif{
	color: rgb(190, 190, 14);
	font-size: 1.1em;
}

#val_error_setup{
	color: red;
    font-size: 0.9em;
    width: 90%;
    background: transparent;
    position: absolute;
    text-align: right;
}

#val_success_setup{
	color: green;
	font-size: 0.9em;
    width: 90%;
    background: transparent;
    position: absolute;
    text-align: right;
}

#val_notif_setup{
	color: rgb(190, 190, 14);
	font-size: 0.9em;
    width: 90%;
    background: transparent;
    position: absolute;
    text-align: right;
}

#val_error_message_edit{
	color: white;
	font-size: 1.0em;
    position: absolute;
    top: 0%;
    right: 30%;
    left: 30%;
    background-color: red;
    padding: 10px 20px;
    border: 1px solid greenyellow;
    border-radius: 6px;
	width: unset;
}

div#val_error_message_edit:after {
    content: '✗';
    padding-left: 16px;
}

#val_success_message_edit{
    color: white;
    font-size: 1.0em;
    position: absolute;
    top: 0%;
    right: 30%;
    left: 30%;
    background-color: green;
    padding: 10px 20px;
    border: 1px solid greenyellow;
    border-radius: 6px;
	width: unset;
}

div#val_success_message_edit:after {
    content: '✓';
    padding-left: 16px;
}

#val_notif_message_edit{
	color: white;
    font-size: 1.0em;
    position: absolute;
    top: 0%;
    right: 30%;
    left: 30%;
    background-color: rgb(190, 190, 14);
    padding: 10px 20px;
    border: 1px solid greenyellow;
    border-radius: 6px;
	width: unset;
}

div#val_notif_message_edit:after {
    content: '!!';
    padding-left: 16px;
}
.primary{
	display: none;
}

.nursery{
	display: none;
}

.jssecondary{
	display: none;
}

.jss{
	display: none;
}

.sss{
	display: none;
}

.sssecondary{
	display: none;
}

.overlay{
	position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #808080c2;
    z-index: 10000;
}
.delete-prompt{
    width: 50%;
    border-radius: 7px;
    margin: 45vh auto;
    padding: 0px 0px;
    background: #ffffff00;
    text-align: center;
}

.delete-prompt > button{
    padding: 1.5vh 6vw;
    border: none;
    font-size: 14px;
    box-shadow: 0px 0px 3px 1px;
    margin: 0 2px;
}

.delete-prompt > button:hover{
    transform: scale(1.1);
}

.modal-list{
	display: inline-block;
	margin: 0 9px;
}
.class_edit, .subject_edit{
	padding: 0;
}

.collect_div{
	display: flex;
    position: relative;
    margin-bottom: 3vh;
    width: 35%;
    border: 1px solid lightgrey;
    border-radius: 5px;
}

.collect_div span{
	width: 15%;
    padding-top: 10px;
    background: #a6a6a6;
    text-align: center;
}

.collect_div input{
	width: 100%;
    border: none;
    padding: 5px;
}

.record_sheets{
	background: white;
    border-radius: 5px;
    padding: 10px 0;
    margin-top: 2vh;
}


/* styling for teacher attendnace page */
.teacher_attendance .green{
	accent-color: green;
}
.teacher_attendance .red{
	accent-color: red;
	margin-left: 15px
}
.teacher_attendance button{
	background:#2d5986;
	padding: 6px 10px;
	border-radius: 6px;
	color: white;
	border: none;
	transition: 0.2s ease-in-out;
}
.teacher_attendance button:hover{
	background:#204060;
}
.teacher_attendance b{
	padding: 0 20px 0 3px;
}

.class_details{
	display: flex;
	flex-flow: wrap
}

.class_details > div{
	margin: 0 11px;
}

.attendance_roll .green{
	accent-color: green;
}
.attendance_roll .red{
	accent-color: red;
	margin-left: 15px
}

button.edit, button.update{
	background: #2d5986;
    padding: 6px 10px;
    border-radius: 6px;
    color: white;
    border: none;
    transition: 0.2s ease-in-out;
}

input.record_input{
	width: 33px;
	height: 28px;
    text-align: center;
    border-radius: 7px;
    border: 1px solid grey;
}

.pagination {
	display: inline-block;
	float: right;
}

.pagination a {
	color: black;
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid #ddd;
}

.pagination a.active {
	background-color: #204060;
	color: white;
	border: 1px solid #204060;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none !important;
	position: absolute !important;
	background-color: #f1f1f1 !important;
	min-width: 120px !important;
	width: 100% !important;
	overflow-y: auto !important;
	max-height: 100px !important;
	border: 1px solid #ddd;
	z-index: 1 !important;
}

.dropdown-content label {
	display: block !important;
	padding: 5px 10px !important;
	cursor: pointer !important;
}

.dropdown-content label:hover {
	background-color: #ddd !important;
}

.show {
	display: block !important;
}

.selected-items {
	display: block !important;
	  width:100px;
	margin-top: 5px;
	padding: 5px;
	border: 1px solid #ccc;
}

.selected-items div {
	margin-bottom: 5px;
	width: 100%;
    border: none;
}

#card{
    display: block;
    padding: 10px 18px;
    margin-top: 17px;
    background-color: cornsilk;
    border-radius: 20px;
    font-size: 18px;
}
.record_textarea{
	width: 60%;
}