/*@import url("common.css");
@import url("toastr.min.css");
@import url("toastr-style.css");*/

:root {
	--primary-font: 'cairo';
	--primary-color: #fe582b;
	--primary-color-bg: #fe582b11;
	--secondary-color: #5E7185;
	--text-red: #DC2B2B;
	--default-transition: all 0.3s ease-in-out;
	--primary-shadow: 0 0 0 3px rgba(123, 192, 2, 0.25);
}
html {
	box-sizing: border-box;
}
body {
	font-family: var(--primary-font);
	font-weight: 400;
	background: #ebeef3;
}
@font-face {
	font-family: Nexa Light;
	src: url(../font/Nexa\ Light.otf);
  }
  @font-face {
	font-family: Nexa Bold;
	src: url(../font/Nexa\ Bold.otf);
  }
  .nexalight{font-family:Nexa Light!important ; overflow-y: hidden;}
  .nexabold{font-family:Nexa Bold!important}

/*===============================================
	Loader for drawer & Modal & blocks code
================================================*/
.modal.is-loading {
    overflow: hidden !important;
	/* pointer-events: none; */
	user-select: none;
}
.modal.is-loading .modal-dialog,
.modal.is-loading .drawer-wrapper{
	cursor: not-allowed;
}
.modal.is-loading .modal-dialog:before,
.modal.is-loading .drawer-wrapper:before {
    content: '';
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 255;
	border-radius: 3px;
}
.modal.is-loading .modal-dialog:after,
.modal.is-loading .drawer-wrapper:after {
    content: '';
    background: url(../img/loaders_bg/loader.svg) no-repeat center;
    background-size: 60px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 260;
}

.image-wrapper.is-loading .image > div,
ul.gallery-ul>li .gallery-wrap.is-loading .image {
	background: none !important;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(254, 97, 55, 0.3);
    border-radius: 50%;
    border-top-color: #fe6137;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    position: absolute;
    left: 8px;
    top: 8px;
	left: 50%;
    top: 50%;
    margin: -10px;
}
.image-wrapper.is-broken img, .image-wrapper.is-loading img{
	display: none !important;
}
.no-thumb.is-loading .image{
	background-image: none !important;
}
.image-wrapper.is-broken i{
	display: block;
}
.image-wrapper .image + .image-meta{
	padding: 0 0 0 8px;
}
.image-wrapper .image-meta span{
	font-size: 13px;
	font-weight: 500;
	color: #222;
}
.image-wrapper .image-meta p{
	font-size: 12px;
	font-weight: 500;
	color: #666;
	margin: 0;
}
.image-wrapper .btn {
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px 8px;
    margin: 5px 0 0 5px;
}
html[dir="rtl"] .image-wrapper .btn {
    margin: 5px 5px 0 0 ;
}


.dz-preview.is-loading{
	background: url(../img/loaders_bg/loader-img-orange.svg) no-repeat center/70px;
}
.dz-thumb i,
.dz-row .dz-preview.is-broken .dz-thumb img,
.dz-preview.is-loading .dz-thumb img,
.dz-row .dz-progress,
.dz-row.dz-complete .dz-progress,
.dz-row.dz-complete.dz-processing .dz-progress{
	display:none;
}
.dz-row.dz-processing .dz-progress{
	display:block;
}
.dz-row.dz-error .dz-select,
.dz-row.is-broken .dz-select{
	pointer-events: none;
}
.dz-row.dz-success .dz-success-mark{
	-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dz-row.dz-error .dz-error-mark{
	-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dz-row.dz-complete.dz-upload-complete.dz-success .dz-success-mark,
.dz-row.dz-complete.dz-upload-complete.dz-error .dz-error-mark{
	animation: none;
}

.dz-delete {
	-webkit-animation: fadeOut ease 0.5s;
	-moz-animation: fadeOut ease 0.5s;
	-o-animation: fadeOut ease 0.5s;
	animation: fadeOut ease 0.5s;
	width: 0px;
	transition: width 0.5s ease-in-out;
}


@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (max-width: 1700px) {
	.dz-row{
		width: 14.25%;
	}
}
@media (max-width: 1450px) {
	.library-wrapper > .leftbar {
		width: calc( 100% - 285px );
	}
	.library-wrapper > .rightbar {
		width: 260px;
	}
	.dz-row{
		width: 16.66%;
	}
}
@media (max-width: 1390px) {
	.dz-row{
		width: 20%;
	}
}
@media (max-width: 1024px) {
	.dz-row{
		width: 20%;
	}
}
@media (max-width: 767px) {
	.dz-row{
		width: 33.3333%;
		width: 50%;
	}
}


/*====================================
	Input errors
======================================*/


.error label{
	display: none;
}

.error-label{
	display: none;
}

/*.label-error{
	font-weight: 500;
	color: #d11919;
	display: none;
}*/

.label-error{
	font-weight: 500;
	color: #d11919;
	display: none;
}
.error .signinlabel{
	font-weight: 500;
	color: #d11919;
	display: none;
}
.error .label-error{
	display: block;
}
.form-group .label-error{
	display: block;
}
.error .form-control{
	border-color: #f37070 !important;
}
.form-group .error{
	border-color: #f37070 !important;
	background-color: white !important;
}
.error .form-control:hover{
	box-shadow: 0 0 0 3px rgba(243, 112, 112, 0.25) !important;
}
.error .form-control:focus{
	box-shadow: 0 0 0 3px rgba(243, 112, 112, 0.45) !important;
}
.span-error{
	margin: 1px 0 2px;
	color: #f44336 !important;
}


.form-control.readonly {
    pointer-events: none;
}
.form-control[readonly], .form-control.readonly {
    background-color: #f6f6f6;
    box-shadow: none !important;
    border-color: #ccc;
}

/* colors */
.light_grey{
	background-color: #f8f8f8!important;
}
.blue_color{
	color: #386195;
}
.brown_color{
	color: #D67A23;
}

.mb-30 {
	margin-bottom: 30px;
}
.m-30 {
	margin: 30px;
}
/* signin css */
#backgroundimg {
	background-image: url("../icons/signinbackground.jpg");
	background-repeat: no-repeat, repeat;
	background-size: cover;
 height: 100vh;
 width: 100vw;
   }
   .signincard{

	width: 75%;
	/*height: 614px;*/
	background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border-radius: 32px;
	opacity: 1;
	margin-left: auto;
    margin-right: auto;
	/* position: relative;
    top: 20%; */
   }
   .signinheading{



	color: #FFFFFF;
	text-transform: uppercase;
	opacity: 1;
	width: 100%;

   }
   .singinparagraph{
	width: 80%;

	letter-spacing: 1px;
	color: var(--unnamed-color-ffffff);
	text-align: left;
	font: normal normal normal 30px/34px ;
	letter-spacing: 0px;
	color: #FFFFFF;
	line-height: 25px;
	font-size: large;
   }
   .signininput{
	width: 95%;
	height: 50px;
	background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
	border: 1px solid var(--unnamed-color-a5a5a5);
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 16px;
	outline: none;
   }
   .signinlabel{
	letter-spacing: var(--unnamed-character-spacing-0);
	color: var(--unnamed-color-303030);
	text-align: left;
	font: normal normal bold 14px/17px ;
	letter-spacing: 0px;
	color: #303030;

   }
   .signin_btn{
	background: var(--unnamed-color-24528c) 0% 0% no-repeat padding-box;
	background: #24528C 0% 0% no-repeat padding-box;
	border-radius: 16px;
	width: 94%;
height: 50px;
color: white;
outline: none!important;
border: none!important;
   }
   .input_padding{
	   padding-left: 1.8rem;
   }
   .welcomealign{
	  /* position: relative;
	  top: 27%; */

   }
   /* navbar styling */
   .navbar_style{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #0000001C;
	height: 80px;
   }
   .vl {
	border-left: 6px solid green;
	height: 500px;
  }
   .shadow{
	box-shadow:0px 3px 6px #0000001c;
	height: 80px;
	font-size: 1px;

	background-color: #0000001c;
    position: relative;
    left: 17px;
    bottom: 16px;
	position: inherit;
   }
   .nav_box{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 0px 4px #0000001F;
border-radius: 10px;
   }
   .boximage{
	width: 46px;
    height: 45px;
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 4px;
	border-radius: 10px;
	padding-bottom: 3px;
   }
   .nav_search{
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 0px 6px #00000021;
	width: 378px;
    height: 45px;
border:none;
    border-radius: 16px;
    outline: none;
   }
   .box-text1{
	font-size: smaller;
    font-weight: bolder;
   }
   .box-text2{
color: #A5A5A5;
font-size: xx-small;
   }
   @media screen and (max-width: 800px) {
/* navbar css */
	#navbarlarge {
		display: none!important;

	   }
	   .navbar_style{
		background: #FFFFFF 0% 0% no-repeat padding-box;
		box-shadow: 0px 3px 6px #0000001C;
		height: 60px;

		display: flex;
		justify-content: space-around;
		align-items: center;

	   }
	   .nav_search{
		background: #FFFFFF 0% 0% no-repeat padding-box;
		box-shadow: 0px 0px 6px #00000021;
width: auto;
		height: 45px;
	border:none;
		border-radius: 16px;
		outline: none;
	   }
	  /* navbarcss */
	  .signincard{

		width: 100%;
		/*height: 614px;*/
		background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
		background: #FFFFFF 0% 0% no-repeat padding-box;
		border-radius: 32px;
		opacity: 1;
		margin-left: auto;
		margin-right: auto;
		/* position: relative;
		top: 20%; */
	   }
	   #backgroundimg {
		background-image: url("../icons/signinbackground.jpg");
		background-repeat: no-repeat, repeat;
		background-size: cover;
	 height: 100%!important;
	 width: 100vw;
	   }
	   .installfooterfont{
		color: #24528C;
		font-size: 0.7rem!important;
		font-weight: bolder;
	}
	
	.vertical_line{
		border: none!important;
	
	  }
	 
  }
  @media screen and (min-width: 800px) {

	#navbarmobile {
		display: none!important;

	   }
	   .col{
		overflow: auto;
	}
	  

  }
  @media screen and (min-width: 1500px) {
	.donut-inner {
		margin-top: -58px;
    margin-bottom: 100px;
    margin-left: 26%!important;
    font-size: xx-small;
    position: absolute;
   
    z-index: 10;
	 }
	
	 

  }
  @media screen and (max-width: 1600px) {

	.padcard{
		padding-left: 20px!important;

	   }
	  

  }
  @media screen and (max-width: 500px) {

	#signupmobile {
		display: none!important;

	   }

	   .input_padding{
		padding-left: 1rem!important;
	}
	#backgroundimg {
		background-image: url("../icons/signinbackground.jpg");
		background-repeat: no-repeat, repeat;
		background-size: cover;
	 height: 100vh!important;
	 width: 100vw;
	   }
  }
    /* navbar styling */


/* SIDEBAR CLASSES    */
.sidebardiv{
	width: max-content;
    height: 87.8vh;
    overflow-y: auto;
	background-color: white;
	border-right: 1px solid lightgray;
	/* border-top: 1px solid lightgray; */
	background-color: #24528C;

}

.active{
	border: 1px solid #24528C !important;
}

.sidebardiv::-webkit-scrollbar {
	display: none;
  }

.sidebardivmobile{
	width: inherit;
    height: inherit;
    overflow-y: auto;
	background-color: white;
}

.sidebardivmobile::-webkit-scrollbar {
	display: none;
  }

.innersidebar{
	background-color: #24528C;
	width: 80px !important;
	overflow-y: auto;
	overflow-x: hidden;
	height: 81vh;
}

.logoutdiv{
	width: 80px !important;
}

.innersidebarsample{
	background-color: #24528C;
	width: 80px !important;
	overflow-y: auto;
	overflow-x: hidden;
	height: 91.8vh;
}

.innersidebarsample::-webkit-scrollbar {
	display: none;
  }

.innersidebar::-webkit-scrollbar {
	display: none;
  }

.outersidebar{
	background-color: white;
	width: 200px !important; /*225px !important;*/
	height: 88.5vh;
    overflow-y: auto;
	overflow-x: none;
}

.marginleft17{
	margin-left: 17px;
}

.modal-content-screen6 {
    background: transparent;
    width: inherit;
    overflow: auto;
    height: 60vh;
    overflow-x: hidden;
	margin-top: 100px;
}

.modal-content-screen6::-webkit-scrollbar {
	display: none;
  }


.outersidebar::-webkit-scrollbar {
	display: none;
  }

.specialdrawerdiv{
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	cursor: pointer;
	border-bottom: 1px solid white;
	color: white;
	padding-top: 30px;
	padding-bottom: 30px;
}

.buttonlist{
	list-style-type: none;
	width: inherit;
	padding: 12px;
}

.textlist{
	list-style-type: none;
	width: 100%;
	text-align: left;
	padding-left: 25px;
	font-size: larger;

}

.stickyoverflow{
	overflow-y: auto;
    height: 76vh;
    overflow-x: hidden;
}

.iconinputfield{
	float: left; 
	border: none; 
	outline: none; 
	width: 85% !important; 
	background: transparent !important;
}

.searchfieldicon{
	content: url("../icons/search.png");
}

.arrowrighticon{
	content: url("../icons/arrow-right.png");
}

.path22icon{
	content: url("../icons/Path 22.png");
}

.group4697icon{
	content:url("../icons/Group 4697.png")
}

.resultbg{
	position: absolute;
	width: 100%;
	height: inherit;
}

.resultimg{
	border-radius: 15px;
	width: 170px;
	height: 170px;
	background-color: skyblue;
}

.resultcarddiv{
	width: 100%;
	padding: 150px;
}

.group4191icon{
	content:url("../icons/Group 4191.png")
}

.group4190icon{
	content:url("../icons/Group 4190.svg")
}

.group-6icon{
	content:url("../icons/Group -6.png")
}

.group-7icon{
	content:url("../icons/Group -7.png")
}

.group-13icon{
	content:url("../icons/Group -13.svg")
}

.group4700icon{
	content:url("../icons/Group 4700.png")
}

.group41icon{
	content:url("../icons/Group41.png")
}

.group1291icon{
	content:url("../icons/Group 1291.png")
}

.group4660icon{
	content:url("../icons/Group 4660.png")
}

.group4215icon{
	content:url("../icons/Group 4215.png")
}

.group4660svg{
	content: url("../icons/Group\ 4660.svg");
}

.group8icon{
	content:url("../icons/Group8.png")
}

.closeicon{
	content:url("../icons/close.png");
	width: 15px;
	height: auto;
}

.closeiconsvg{
	content: url("../icons/close.svg");
	width: 9px;
    height: 9px;
}

.maskgroup48icon{
	content: url("../icons/Mask\ Group\ 48.png");
}

.component6-28svg{
	content:url("../icons/Component\ 6\ –\ 28.svg")
}

.calendar__header{
	background-color: #24528C !important;
}

.calendar__monthyear{
	
	font-family: Nexa Light !important;
	color: white !important;
}

.calendar__day-box{
	background-color: #24528C !important;
	border-radius: 20px !important;
}

.calendar__day-text{
	font-family: Nexa Light !important;
	font-weight: bold !important;
}

.calendar__weekday{
	font-family: Nexa Light !important;
	font-weight:bold !important;
	color: black !important;
}

.yellofonttoast{
	color: #F8A519 !important;
}

.mustardfonttoast{
	color: #DB5C23 !important;
}

.redfonttoast{
	color: #FF0000 !important;
}

.yellofonttoastborder{
	border: 1px solid #F8A519 !important;
}

.redfonttoastborder{
	border: 1px solid #FF0000 !important;
}

.yellofonttoastbackground{
	background-color: #FFF2DB !important;
}

.redfonttoastbackground{
	background-color: #FFE8E8 !important;
}

.bluefonttoastbackground{
	background-color: #ECF5FF !important;
}

.toasterminidiv{
	border-radius: 5px;
	width: max-content;
	padding: 10px;
}

.loaderdiv{
	background-color: #24528C;
	border-radius: 10px;
	padding:15px 8px 15px 8px;
}

.closeiconbackground{
	background-color: black;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
}

.closeiconbackgroundtoaster{
	background-color: grey;
	padding: 0px 5px 2px 5px;
	border-radius: 5px;
}

.arrowright1icon{
	content:url("../icons/arrow-right-1.svg")
}

.faileddiv{
	width: 250px;
}

.alerticon{
	content:url("../icons/alert.png")
}

.moreicon{
	content: url("../icons/more.png");
	height: 15px;
	width: auto;
	cursor: pointer;
}

.activeblackfont{
	color: black !important;
	font-weight: bold;
}

.whitebackground{
	background-color: white !important;
}

.dullbluebackground{
	background-color: #6992C7 !important;
}

.roundedgebutton{
	border-radius: 20px !important;
	outline: none;
}

.invalidpasswordtext{
	color: #FF0000 !important;
}

.invalidpasswordborder{
	border:1px solid #FF0000 !important;
}



.morepopup{
	padding-bottom: 8px;
	height: max-content;
    width: 100px;
    color: black;
	font-weight: bold;
    position: absolute;
    z-index: 2;
    right: 11px;
	background:white;
	text-align: initial;
	display: none;
  	right: 100px;
}
input{
	padding-left: 15px;
	padding-right: 15px;
}

textarea{
	padding-left: 15px;
	padding-right: 15px;
}

.iconpadding{
	padding: 7px;
}

.rotate180deg{
	transform: rotate(180deg);
}

.rotate90{
	transform: rotate(90deg);
}

.overflowhidden{
	overflow-y: hidden;
}

.borderright{
	border-right: 1px solid lightgray !important;
}

.fontsizeeleven{
	font-size: 11pt !important;
}

.fontsizefourteen{
	font-size: 14pt !important;
}

.fontsizenine{
	font-size: 9pt !important;
}

.textarea115px{
	height: 115px !important;
}



td{
	padding: 5px;
}

.offclickbackgroundcolor{
	background-color: #24528C;
}

.onclickbackgroundcolor{
	/*background-color: white;*/
}

.bg-white{
	background-color: white;
}

.bluesidebarfont{
	color: #24528C!important;
	font-weight: bold;
}

.selectedborder{
	border-right: 17px solid #24528C;
}

.greysidebarfont{
	color: grey;
}
.greystudentfont{
	color: rgb(89, 83, 83); /*rgb(192, 190, 190);*/
}
.smallfont{
	font-size: 10pt;
}

@media print {
    body * {
        visibility: hidden;
    }
    #section-to-print, #section-to-print * {
        visibility: visible;
    }
    #section-to-print {
        position: absolute;
        left: 0;
        top: 0;
    }
}



@media only screen and (max-width: 800px) {
	.desktopviewsidebar{
		display: none;
	}
	.padtopcard{
		padding-top: 15px!important;
	}
	.padtopforsmall{
padding-top: 15px;
	}

	.selectedborder{
		border-right: 4px solid #24528C;
	}


	.fontwhitegrey, .fontwhite{
		display: none;
	}
	/* exams responsive start */
	.responsiveprint{
		font-size: small!important;
		}
		.examspersonalinfocard{
			height:max-content;
			box-shadow: 0px 0px 10px #00000017;
			border-radius: 18px;
			padding: 5px!important;
			background-color: white;
		
		}
		.examsprintbtn{
			background: #24528C;
			color: white;
			display: flex;
			width: 136px!important;
			height: 40px;
			border: none;
			outline: none;
			justify-content: space-evenly;
			align-items: center;
			border-radius: 13px;
		
		
		}
		/* exams responsive end */
		/* report css start */
		.reportcollapsebtn{
			background: #2193d1;
			color: white;
			display: flex;
			width: 146px!important;
			height: 40px;
			border: none;
			outline: none;
			/* justify-content: space-evenly; */
			align-items: center;
			border-radius: 13px;
			outline: none!important;
		
		
		
		}
		.headingfont{
			color: #24528C;
			font-size: large!important;
			font-weight: 400;
		}
		/* report css end  */
}
@media only screen and (max-width: 1300px ) and (min-width: 748px)  {
	.subheadingfont{
		font-size: 10px!important;
		color: #A5A5A5;
	
	}
	.dashattendenceheading{
		font-size: 10px!important;
		font-weight: bold;
		}
  
}
@media only screen and (max-width: 1150px) and (min-width: 748px) {
	.subheadingfont{
		font-size: 7px!important;
		color: #A5A5A5;
	
	}
	.dashattendenceheading{
		font-size: 7px!important;
		font-weight: bold;
		}
  
}
  @media only screen and (min-width: 1500px) {
	.subheadingfontresponsive{
		font-size: 10px;
	
	color: #A5A5A5;
	}
  }
/* SIDEBAR CLASSES END */
/* main component css dashboard */
.dashattendenceheading{
font-size: 16px;
font-weight: bold;
}
.maincompheight{
	height: 79vh;
	overflow: auto;
}
.padtopcard{
	padding-top: 18px;
}
.headingfont{
	color: #24528C;
	font-size: x-large;
	font-weight: 400;
	text-transform: capitalize;
}
.subheadingfont{
	/*font-size: 13px;
	color: #A5A5A5;*/
  	font-size: 14px;
	color: #0F0D0D;

}
.subheadingfontresponsive{
	font-size: 16px;
	color: #A5A5A5;
}
.datebox{
	background: white;
    height: 35px;
    color: #24528C;
    display: flex;
    align-items: center;
    width: 10em;
    justify-content: space-around;
    border-radius: 11px;
	font-weight: 600;
	font-size: medium;
}
.smalldashboard{
	/* height: 76px; */
	height: fit-content;
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;
	background-color: white;
}
.largedashboard{
	/* height: 170px; */
	
    height: fit-content;

    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;
	background-color: white;

}
.expensecard{
	height: 275px;
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;
background-color: white;
}
.feecollectioncard{
	height: 264px;
    /* margin-top: 36px; */
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;
	background-color: white;

}
.expdetailcard{
	height: 339px;
    /* margin-top: 36px; */
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;
	background-color: white;

}
.feeanalysiscard{
	height: 300px;
    /* margin-top: 36px; */
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;

background-color: white;

}
.dashicon{
	
    background-color: #24528C;
    width: 35px;
    height: 39px;
	border-radius: 6px;
	margin-top: 19px;
}
.dashiconyellow{
	
    background-color: #f8a957;
    width: 35px;
    height: 39px;
	border-radius: 6px;
	margin-top: 19px;
}
.dashiconbrown{
	
    background-color: #d67a23;
    width: 35px;
    height: 39px;
	border-radius: 6px;
	margin-top: 19px;
}
.flex_box{
	display: flex;
	justify-content: space-around;
    align-items: center;

}
/* main component css dashboard */

/* mobile modal  */
  .modalscreen {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
  }

  .samplemodalscreen {
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
  }

  .modal-content-screen4 {
	background-color: #fefefe;
    border: 1px solid #888;
    border-radius: 1px 30px 30px 1px;
    width: 70%;
    overflow: auto;
    height: 100vh;
  }

  .modal-content-screen5 {
	background-color: #fefefe;
    border: 1px solid #888;
    border-radius: 1px 30px 30px 1px;
    width: 20%;
    overflow: auto;
    height: 100vh;
	overflow-x: hidden;
  }

  .input_stylestudent{

	height: 35px;
	border: 1px solid var(--unnamed-color-a5a5a5);
	background: #f6f6f6 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 9px;
	outline: none;
	width: inherit;
	font-size: 12pt;
   }

   .input_styledotted{

	height: 35px;
	background-color: #f6f6f6!important;
	border: 1px dotted #a5a5a5 !important;
	background: #f6f6f6 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 9px;
	outline: none;
	width: inherit;
	font-size: 12pt;
   }

   .input_stylestudent::placeholder{
	   color: lightgray;
   }

   .studentaddimg{
	width: 150px;
	height: 150px;
	background-color: skyblue;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	position: relative;
}

.studentaddimginner{
	position: absolute;
	bottom: 0;
	border-radius: 10px;
	width: inherit;
	padding: 5px 6px 5px 6px;
	background-color: #24528C;
	color: white;
	font-size: 10pt;
}

/* mobile modal end */

/* SIDEBAR CLASSES END */

/* STUDENT PAGE */
  .backgroundimgdiv{
	  
	  height: 200px;
	  width: inherit;
	  background-color: rgb(76, 161, 214);
	  background-image: url('../icons/by\ type.png');
	  background-repeat: no-repeat;
	  background-position: right;
  }

  .margintopstudent{
	  margin-top:80px;
  }

  .greyborderbottomstudentheading{
	border-bottom: 2px solid lightgray !important;
	border-top: none!important;
	border-right: none!important;
	font-size: 9pt;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #f8f8f8 !important;
  }

  .blueborderbottomstudentheading{
	border-bottom: 3px solid #24528C !important;
	border-top: none!important;
	border-right: none!important;
	font-size: 9pt;
	font-weight: bold;
	text-align: center;
	color: #24528C;
	cursor: pointer;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #f8f8f8 !important;
  }

  .personalinformationcard{
	height:max-content;
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;
	padding: 30px;
	background-color: white;
}

.toasterdiv{
	height:max-content;
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 8px;
	padding: 10px;
	background-color: white;
}

	.studentimgdiv{
		width: 181px;
		height: 181px;
		background-color: skyblue;
		margin-top: 60px;
		margin-left: auto;
		margin-right: auto;
	}

	.fontwhite{
		color: white !important;
	}

	.fontwhitegrey{
		color: #DFDFDF;
	}

	.printbutton{
		border: none;
		outline: none;
		border-radius: 10px;
		background-color: #24528C;		
		color: white;
		padding: 5px 20px 5px 20px;
	}

	.searchbutton{
		border: none;
		outline: none;
		border-radius: 6px;
		background-color: #24528C;		
		color: white;
		height: 35px;
		padding: 5px 12px 5px 12px;
		font-size: 8pt !important;
	}

	.searchbuttonfull{
		border: none;
		outline: none;
		border-radius: 6px;
		background-color: #24528C;		
		color: white;
		height: 35px;
		width: 100%;
		padding: 5px 12px 5px 12px;
		font-size: 8pt !important;
	}

	.dullredbackground{
		background-color: #FFE8E8 !important;
	}

	.datefilterfeereport{
		height: 30px;
		width: 100%;
		border: 1px solid lightgray;
		outline: none;
		border-radius: 8px;
		font-size: 8pt;
		background-color: #F6F6F6;
	}

	.feereportsmallsize{
		font-size: 9pt;
	}

	.reporttable{
		color: white;
		
		font-size: 9pt;
		
	}

	
	tr:nth-child(even) {  
		background-color: #ECECEC ;  
	}


	thead{
		border-right: 1px solid white;
		padding: 10px;
		font-weight: lighter;
		background-color: #24528C !important;
	}

	th{
		border-right: 1px solid white;
		padding: 10px;
		font-weight: lighter;
	}

	tbody{
		padding: 10px;
		font-weight: lighter;
		color: grey;
	}

	td{
		border-right: 1px solid white;
	}

	.absentstudentrow{
		background-color: #FF0000 !important;
		color: white;
	}

	.holidaystudentrow{
		background-color: #1D8451 !important;
		color: white ;
	}

	.searchstudentpromotion{
		background-color: #0000001C;
		width: 300px;
		height: 28px;
		padding-left: 10px;
		border-radius: 7px;
		border: none;
		outline: none;
		font: gray;
		font-size: 9pt;
	}

	.searchbigwhite{
		box-shadow: 0px 0px 6px #00000021;
		border-radius: 16px;
		opacity: 1;
		padding: 10px 5px 10px 5px;
		margin-bottom: 15px;
	}

	.searchstudentpromotion::placeholder{
		font: gray;
	}

	.searchbigwhite::placeholder{
		font: gray;
	}

	.attendancetotalcard{
		height:max-content;
		box-shadow: 0px 0px 10px #00000017;
		border-radius: 10px;
		padding: 10px;
	
	}

	.paginationdiv{
		height:35px;
		box-shadow: 0px 0px 10px #00000017;
		border-radius: 10px;
		padding: 9px;
		font-size: 8pt;
		width: max-content;
		float: right;
	}

	.paginationdiv:hover{
		cursor: pointer;
	}
	
	.paginationselected{
		color: white;
		background-color: #24528C;
		padding: 2px 5px 2px 5px;
		border-radius: 2px;
	}

	
	
	.paginationnextpage{
		
		background-color: #0000001C;
		padding: 3px 6px 3px 6px;
		border-radius: 2px;
	}
	
	.attendancenextmonth{
		
		background-color: #24528C;
		padding: 6px 4px 6px 4px;
		border-radius: 2px;
	}
	
	.attendancenextmonthdull{
		
		background-color: #a4b2c4;
		padding: 6px 4px 6px 4px;
		border-radius: 2px;
	}

	.attendancenextmonthdull:hover{
		background-color: #24528C;
		transition: 1000ms;
	}
	
	.fontwhitepromotion{
		color: white;
	}

	.attendancegreenfont{
		color: #1D8451;
	}

	.attendanceredfont{
		color: #FF0000;
	}

	.attendancebluefont{
		color: #24528C;
	}

	.fontbold{
		font-weight: bold;
		font-size: 9pt;
	}

	.resetbuttonmanagestudents{
		border: 1px solid lightgrey;
		outline: none;
		border-radius: 6px;
		height: 35px;
		padding: 0px 12px 0px 12px;
	}

	.infobuttonstudents{
		background-color:  #6495D4;
		outline: none;
		border: none;
		border-radius: 6px;
		height: 30px;
		padding: 0px 12px 0px 12px;
	}

	button{
		outline: none !important;
	}

	.modal-content-screen {
		background-color: #fefefe;
		margin: 100px auto; /* 15% from the top and centered */
		padding: 20px;
		border: 1px solid #888;
		border-radius: 20px;
		width: 50%; /* Could be more or less, depending on screen size */
		overflow: auto;
		  height: 56vh;
	  }

	  .modal-content-screen-full {
		background-color: #fefefe;
		margin: 100px auto; /* 15% from the top and centered */
		padding: 20px;
		border: 1px solid #888;
		border-radius: 20px;
		width: 90%; /* Could be more or less, depending on screen size */
		overflow: auto;
		  height: 56vh;
	  }
/* STUDENT PAGE END */
/* EXAMINATION CSS START */

.messagebtn{
	background: #24528C;
    color: white;
    display: flex;
    width: 208px;
    height: 40px;
    border: none;
    outline: none;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 13px;
	margin-left: auto;
	outline: none!important;


}
.examsprintbtn{
	background: #24528C;
    color: white;
    display: flex;
    width: 170px;
    height: 40px;
    border: none;
    outline: none;
    /* justify-content: space-evenly; */
    align-items: center;
    border-radius: 13px;
	outline: none!important;



}
.examscomposebtn{
	background: #24528C;
    color: white;
    display: flex;
  font-size: small;
    height: 35px;
    border: none;
    outline: none;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 13px;
	outline: none!important;



}
.examscomposecancelbtn{

    color: A5A5A5;
    display: flex;
	font-size: small;
    height: 35px;
    border: none;
    outline: none;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 13px;
outline: none!important;

}
.cardheadingfont{
	font-size: 13px;
	color: #A5A5A5;

}
.examspersonalinfocard{
	height:max-content;
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 18px;
	padding: 20px;
	background-color: white;


}
.printbtns{
display:inline-flex;
}
.responsiveprint{
font-size: medium;
}
.examcompheight{
	height: 79.8vh;
	overflow: auto;
}
.input_style{

	height: 35px;
	background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
	border: 1px solid var(--unnamed-color-a5a5a5);
	background: #f6f6f6 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 9px;
	outline: none;
	width: inherit;
}

.dd-style{

	height: 35px;
	background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
	/*background: url(../icons/Group41.png) no-repeat right .75rem center/8px, url(../icons/select_bg.svg) repeat;*/
	border: 1px solid var(--unnamed-color-a5a5a5);
	background: #f6f6f6 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 9px;
	outline: none;
	width: inherit;
}

   .input_styleselectdiv{

	height: 35px;
	background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
	border: 1px solid var(--unnamed-color-a5a5a5);
	background: #f6f6f6 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 9px;
	outline: none;
	width: inherit;
   }

   .input_styleselect{
	background: transparent;
    border: none;
    width: 90%;
    height: 35px;
outline: none;
-webkit-appearance: none;
   }

   .input_styledate{
	background: transparent;
    border: none;
    width: 90%;
    height: 35px;
outline: none;
-webkit-appearance: none;
   }


   .input_style_textarea{

	height: 100px;
	background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
	border: 1px solid var(--unnamed-color-a5a5a5);
	background: #f6f6f6 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 9px;
	outline: none;
	width: inherit;
   }
/* EXAMINATION CSS END */
/* REPORTS CSS START */
.reportcollapsebtn{
	background: #2193d1;
    color: white;
    display: flex;
    width: 170px;
    height: 40px;
    border: none;
    outline: none;
    /* justify-content: space-evenly; */
    align-items: center;
    border-radius: 13px;
	outline: none!important;



}
/* REPORTS CSS END */

/* teachers css  start*/
.teachersavebtn{
	background: #24528C;
    color: white;
    display: flex;
    width: 100px;
    height: 40px;
    border: none;
    outline: none;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 13px;
	margin-left: auto;
	outline: none!important;


}
.redbackground{

    background-color: red;
    width: 35px;
    height: 35px;
	border-radius: 6px;
	margin-top: 23px;	
}
.delimg{
	width: 25px;
    padding-top: 5px;
    margin-left: 5px;

}
.crossbtn{
    outline: none!important;
    width: auto;
    border: none;
    height: 35px;
    border-radius: 10px;
	width: 102px;
}
.crossimg{
    position: absolute;
	left: 108px;
    bottom: 28px;
}

/* teachers css end  */
.paginationdiv{
	height:35px;
    box-shadow: 0px 0px 10px #00000017;
    border-radius: 10px;
	padding: 9px;
	font-size: 8pt;
	width: max-content;
	float: right;
}

.paginationselected{
	color: white;
	background-color: #24528C;
	padding: 2px 5px 2px 5px;
	border-radius: 2px;
}

a { 
	color: inherit !important; 
	text-decoration: none !important;
} 



  .vertical_line{
	border: 1px solid;
    border-bottom: none;
    border-left: none;
    border-top: none;
  }
  .installfooterfont{
	color: #24528C;
	font-size: 1rem;
	font-weight: bolder;
}

.cursor{
	cursor: pointer;
}
.padcard{
padding-left: 30px;
}
.searchicon{
	height: 22px;
    width: 15px;
    position: relative;
    z-index: 11;
	right: 30px;
    top: -3px;
}
.canvasjs-chart-credit{
	display: none;
}
.canvasjs-chart-toolbar{
	display: none;
}
.donut-inner {
	margin-top: -58px;
    margin-bottom: 100px;
    margin-left: 20px;
    font-size: xx-small;
    position: absolute;
   
    z-index: 10;
	/* margin-bottom: 100px;
	margin-top: -340px; */
 }
 /* donut start */
 .donut-inner {
	
 }
 
 .donut-inner span {
	font-size: 12px;
 }
 /* donut end */
.monthyeardiv{
	background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #0000001a;
    border-radius: 10px;
    width: fit-content;
	float: right;
    margin-top: 9px;
}
.btnunselect{
	background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #0000001a;
    border-radius: 10px;
    width: fit-content;
	border:none;
	font-size: small;
    color: 24528C;
	

}
.btnselect{
	background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #0000001a;
    border-radius: 10px;
    width: fit-content;
	border:none;
	font-size: small;
    color: white;
	background-color: #24528C;
}
.navbarhover{
	height: fit-content;
    width: 182px;
    color: black;
    font-weight: bold;
    position: absolute;
    z-index: 2;
    /* right: 11px; */
    top: 68px;
    background: white;
    text-align: initial;
}

  
  .dropdown {
	position: relative;
	display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 218px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
    top: 46px;
    max-height: 320px;
    overflow: hidden;
    overflow-y: hidden;
    overflow-y: auto;
  }
  
  .dropdown-content a {
	color: black;
	padding: 6px  16px 6px 0px;
	text-decoration: none;
	display: block;
	
  }

  .dropdown-content a:hover {background-color: #f6f8fA;}
  .dropdown:hover .dropdown-content {display: block;}
  .dropdown:hover .dropbtn {background-color: #3e8e41;}
  .group4190iconcss{
	  height:1em;
	  width:1em;
	
	 padding-top: 6px; 


  }
  .dropdownsm {
	position: relative;
	display: inline-block;
  }
  
  .dropdown-contentsm {
    right: 20px;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 153px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
    top: 46px;
    max-height: 320px;
    overflow: hidden;
    overflow-y: hidden;
    overflow-y: auto;
  }
  
  .dropdown-contentsm a {
	color: black;
	padding: 6px  16px 6px 0px;
	text-decoration: none;
	display: block;
	
  }

  .dropdown-contentsm a:hover {background-color: #f6f8fA;}
  .dropdownsm:hover .dropdown-contentsm {display: block;}
  .dropdownsm:hover .dropbtn {background-color: #3e8e41;}
  img{
	cursor: pointer !important;
  }
  .height_50{
	  height: 50px;
  }
  .height_122{
	height: 122px;
	background-color: #24528C;
}
/* .scrolltable::-webkit-scrollbar {
	display: none;
  } */
 
  /* input[type=text] {
background-color: white!important;
} */
textarea{
background-color: white!important;

}


.side-nav-bg-color {
	background-color: #778AA3!important;
}
/* table thead th{
	font-size: smaller;
}
table  td{
	font-size: smaller;
} */

.custom-input{
  height: 35px;
  border: 1px solid var(--unnamed-color-a5a5a5);
  background: #f6f6f6 0% 0% no-repeat padding-box;
    background-color: rgb(246, 246, 246);
  border: 1px solid #A5A5A5;
  border-radius: 9px;
  outline: none;
  width: inherit;
  font-size: 12pt;
  background-color: white !important;
}

.input{
  height: 35px;
  border: 1px solid var(--unnamed-color-a5a5a5);
  background: #f6f6f6 0% 0% no-repeat padding-box;
    background-color: rgb(246, 246, 246);
  border: 1px solid #A5A5A5;
  border-radius: 9px;
  outline: none;
  width: inherit;
  font-size: 12pt;
  background-color: white !important;
}

.textarea{
  border: 1px solid var(--unnamed-color-a5a5a5);
  background: #f6f6f6 0% 0% no-repeat padding-box;
    background-color: rgb(246, 246, 246);
  border: 1px solid #A5A5A5;
  border-radius: 9px;
  outline: none;
  width: inherit;
  font-size: 12pt;
  background-color: white !important;
}

input[type=text] {
{
  height: 35px;
  border: 1px solid var(--unnamed-color-a5a5a5);
  background: #f6f6f6 0% 0% no-repeat padding-box;
    background-color: rgb(246, 246, 246);
  border: 1px solid #A5A5A5;
  border-radius: 9px;
  outline: none;
  width: inherit;
  font-size: 12pt;
  background-color: white !important;
}

select {

	height: 35px;
	background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
	border: 1px solid var(--unnamed-color-a5a5a5);
	background: #f6f6f6 0% 0% no-repeat padding-box;
	border: 1px solid #A5A5A5;
	border-radius: 9px;
	outline: none;
	width: inherit;
}

label{
	font-weight: bolder !important;
}