*{
    -webkit-overflow-scrolling: touch
}
*{margin:0px; padding:0px;}

@font-face{font-family:pristina; src:url('./fonts/pristina.woff') format('woff');}
@font-face{font-family:CooperBlackStd; src:url('./fonts/CooperBlackStd.woff') format('woff');}
@font-face{font-family:nyala; src:url('./fonts/Nyala.woff') format('woff');}
@font-face{font-family:times new roman; src:url('./fonts/timesnewroman.woff') format('woff');}
@font-face{font-family:renfrew; src:url('./fonts/renfrew.woff') format('woff');}
@font-face{font-family:ArialBlack; src:url('./fonts/ArialBlack.woff') format('woff');}
@font-face{font-family:Jomhuria-Regular; src:url('./fonts/Jomhuria-Regular.woff') format('woff');}
@font-face{font-family:Cambria; src:url('./fonts/Cambria.woff') format('woff');}
@font-face{font-family:VnTifani-Heavy; src:url('./fonts/VnTifani-Heavy.woff') format('woff');}
@font-face{font-family:poppins; src:url('./fonts/poppins.woff') format('woff');}
@font-face{font-family:cookie; src:url('./fonts/cookie.woff') format('woff');}
@font-face{font-family:Frederic; src:url('./fonts/Frederic.woff') format('woff');}
@font-face{font-family:aparajb; src:url('./fonts/aparajb.woff') format('woff');}
@font-face{font-family:BAHNSCHRIFT; src:url('./fonts/BAHNSCHRIFT.woff') format('woff');}

@keyframes change-background {
	0% {
		background: #ADCA9A;
	}
	50% {
		background: #b3dbd3;
	}
	100% {
		background:  #b3ffb3;
	}
}

.dialogbox{
	display:none; 
	position:absolute;
	margin:auto; 
	z-index:3000;
}

.dialogbox_rw1_cl1{
	width:90%; 
	position:absolute;	
}

.dialogbox_rw1_cl2{
	width:10%; 
	margin-left:90%; 
	position:absolute;
}

.dialogbox_rw2_cl1{
	width:90%; 
	margin-top:70px; 
	position:absolute;
	z-index:30;	
}

.dialogbox_rw2_cl2{
	width:10%; 
	margin-left:89%; 
	position:absolute;
}

.box_heading{
	display:none; 
	width:80%; 
	margin-left:10%; 
	position:absolute; 
	transition:0.2s; 
	z-index:10; 
	margin-top:70px;
}

.box_heading_cl{
	width:100%; 
	height:100px;
	position:absolute; 
	box-shadow:12px 0px 25px -4px grey, -12px 0px 25px -4px grey; 
	border-top-left-radius:5px; 
	border-top-right-radius:5px; 
	background:#ADCA9A;
}

.box_heading_cl-p{
	text-align:center; 
	color:white; 
	font-family:VnTifani-Heavy; 
	font-size:22px; 
	margin-top:9px;
}

.box_content{
	width:100%; 
	position:absolute; 
	border:1px solid black; 
	border-spacing:0px; 
	transition:0.4s; 
	border:25px solid #ADCA9A; 
	box-shadow:12px 0px 25px -4px grey, -12px 0px 25px -4px grey; 
	border-radius:5px;
}

.box_content_cl1{
	 background:white; 
	 border-top-left-radius:5px; 
	 border-top-right-radius:5px;
}

.box_content_cl2{
	background:white;
	cursor:pointer;
}

.box_close_bttn{
	width:40px; 
	cursor:pointer; 
	height:50px; 
	transition:0.4s; 
	background:#ADCA9A; 
	box-shadow:12px 0px 25px -4px grey, -12px 0px 25px -4px grey; 
	position:absolute; 
	margin-left:-53px;
	z-index:10; 
	margin-top:70px;
}

.box_close_bttn .fa-close{
	color:white; 
	font-size:22px; 
	margin-left:8px; 
	margin-top:12px;
}

.box_othr_btn{
	display: block;
	width:100%;
	height:50px;
	text-align:center;
	font-family:VnTifani-Heavy; 
	font-size:20px; 
	padding-top:10px; 
	border-radius: 4px;
	color: grey;
	background: #EFEFEF;/*Button Color*/
	border:none;
	border-bottom: solid 3px grey;
	cursor:pointer;
	outline:none;
}

.box_othr_btn:active{
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
	border-bottom: none;
}
			
.square_btn1{
	display: inline-block;
	padding: 0.5em 1em;
	margin-top:40px;
	margin-right:20px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 4px;
	color: white;
	background: #668ad8;
	border-bottom: solid 3px #5e7fca;
	cursor:pointer;
}
.square_btn1:active{
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
	border-bottom: none;
}

#frntpg_header {list-style-type:none;}
#frntpg_header li {float:right; margin-top:40px; margin-right:15px; border-bottom:1px solid transparent;}
#frntpg_header li a {color:white; font-size:22px; margin-right:10px; text-align: center; text-decoration: none; font-family:poppins;}
#frntpg_header li a:hover{color:#ffc61a;}


::-webkit-scrollbar{  /****the background of the bar itself**/
 width: 10px; /***increase thickness of vertical scrollbar**/
 height:10px;  /***for horizontl***/
 background:white;
}
::-webkit-scrollbar-thumb {   /***the draggable scrolling element resizes depending on the size of the scrollable element**/
background-color: #691c39;
border-radius: 10px;
}
/***common hover**/
/****msg box*****/
.msg_lowerpart{padding-top:7px; padding-bottom:7px; padding-left:12px; padding-right:12px; border-radius:7px; margin-top:10px; position:fixed; z-index:2000; right:20px;}  
#msg_text{font-size:22px; font-family:nyala; text-align:center;} 
.msg_upperpart{width: 0; height: 0;  border-top: 10px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; margin-top:-9px; position:fixed; right:27px;}  
/**::selection{background:#691c39;}**/
/*****used to remove outline of input & select fields**/
input:focus{outline:none;}
select:focus{outline:none;}
.fa-close:hover,.fa-pencil-square-o:hover,.fa-search:hover,.turn:hover{cursor:pointer;}
/*************nxt bttn**/
.nxt_bttn{width:120px; height:36px; margin-right:50px; font-family:pristina; font-size:33px; border-radius:7px;}
/***used to remove red border in ff4**/
[required]{         
    box-shadow: none;
}
/**input field effect****/
.ani_effect{        /***box used to contain inpt field****/
  float: left;
  width: 80%;
  margin: 25px 8%;
  position: relative; /* necessary to give position: relative to parent. */
}
input[type="text"],input[type="email"],input[type="password"],input[type="date"]{                         /****txt color*****/
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
  padding-left:7%;  /***mke placehlder move awy from left****/
}
input[type="date"]{
	border:none;
}
.effect-1{                           /****input field***/
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
  z-index: 30;   /***************/
  position:relative;
}
/************bth used to effect line**/
.effect-1 ~ .focus-border{position: absolute; bottom: 0;  left: 50%; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s; left:0;}
/***************/
.effect-1 ~ label{                 /****label styled*************/
  position: absolute;
  margin-left:9px;   /**label margin***/
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;                /****default label color****/ 
  transition: 0.3s;  /***lbl move up transition***/
  -webkit-transition: 0.3s;
  z-index: 1;          /***imp for effect to shw*********/
  letter-spacing: 0.5px;
}

.effect-1:focus ~ label,
.has-content.effect-1 ~ label{
  top: -19px;
  font-size: 17px;
  font-family:nyala;
  color: #3399FF;        /****label color****/
  transition: 0.3s;
  -webkit-transition: 0.3s;
}
/********************** to make border blue on focsing out **********************/
.has-content.effect-1 ~ .focus-border{
	left: 0; width: 100%; background-color: #3399FF;
}
/***select fields***/
select::-ms-expand {display: none;}      /**used to remove or hide arrow**/
.sel_1 select{border:1px solid transparent; appearance:none;-moz-appearance: none;  -webkit-appearance: none;  font: 15px/24px "Lato", Arial, sans-serif;}   /***padding made list come under line*/

/***select brother sister***/
					/******************personal details***********************/
/***dob tbl3***/
/******************all boxes input fields to be hidden default*****/
/***select fields**/
/*****input field for disability*/
#dis_type{border-bottom:1px solid  #aaa; border-top:1px solid transparent; border-left:1px solid transparent; border-right:1px solid transparent; visibility:hidden;
margin-top:-30px; margin-left:-13px;}


					/******************admission details***********************/
/**other no field in adm form****/
#other_no{border-bottom:1px solid  #aaa; border-top:1px solid transparent; border-left:1px solid transparent; border-right:1px solid transparent;
visibility:hidden; margin-top:-30px; margin-left:-20px;}					

										
/**************************************family details box*****************************************************/
#father_record_tble,#mother_record_tble,#guardian_record_tble{display:none; position:absolute;}

/****************images to upload************/

#temp_stu_proof_nam::-webkit-input-placeholder{color:white;}
#othbrsis_table td{border:1px solid black;}
#studentfeebalance_tble td{border:1px solid black; padding:3px;}


 /*****************session settings page***************************/
.hidden_fields{display:none;}


.hidden_sel_tb{width:100%; display: none; margin-left:7%; position:absolute; z-index: 70; margin-top: -30px;}
.hidden_rad_tb{width:100%; display: none; margin-left:7%; position:absolute; z-index: 70; margin-top: -28px;}

/*****************************************************************final details pge************************/
#father_edit_option:hover,#father_detail_option:hover{cursor:pointer;}
#guardian_edit_option:hover,#guardian_detail_option:hover{cursor:pointer;}
#mother_edit_option:hover,#mother_detail_option:hover{cursor:pointer;}
#proof_edit_option:hover,#proof_detail_option:hover{cursor:pointer;}
#student_more_details_option:hover{cursor:pointer;}
.family_shadow{-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 30%, transparent 100%);}
.family_shadow:hover{cursor:pointer;}
#father_arrow:hover,#mother_arrow:hover,#guardian_arrow:hover{cursor:pointer;}

/*******************responsive*******/
#index_container{width:100%;}
@media screen and (max-width:1327px){
    #index_container{width:1327px;}
}
#home_container{width:100%;}
@media screen and (max-width:1327px){
    #home_container{width:1327px;}
}
#studentprofile_container{width:100%;}
@media screen and (max-width:1158px){
    #studentprofile_container{width:1158px;}
}
#feecollection_container{width:100%;}
@media screen and (max-width:1158px){
    #feecollection_container{width:1158px;}
}
#setting_container{width:100%;}
@media screen and (max-width:1158px){
    #setting_container{width:1158px;}
}
#signup_container{width:100%;}
@media screen and (max-width:1158px){
    #signup_container{width:1158px;}
}
#feereceipt_container{width:100%;}
@media screen and (max-width:1196px){
    #feereceipt_container{width:1196px;}
}
#user_container{width:100%;}
@media screen and (max-width:1126px){
    #user_container{width:1126px;}
}
#myprofile_container{width:100%;}
@media screen and (max-width:1196px){
    #myprofile_container{width:1196px;}
}
#accountsheet_container{width:100%;}
@media screen and (max-width:1246px){
    #accountsheet_container{width:1246px;}
}
#balancesheet_container{width:100%;}
@media screen and (max-width:1265px){
    #balancesheet_container{width:1265px;}
}
#smsreports_container{width:100%;}
@media screen and (max-width:1246px){
    #smsreports_container{width:1246px;}
}
#expense_container{width:100%;}
@media screen and (max-width:1246px){
    #expense_container{width:1246px;}
}

label, input[type=radio]{
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}
​input[type=checkbox] {
    margin-top:4px;
}
#draggable:hover,.pointer:hover,.tabbedpane_tab:hover,.fa:hover,.dialogbox_bttn:hover,.sel_image:hover,.nxt_bttn:hover{cursor:pointer;}

.strike{position:relative;}
.strike:before{position:absolute; z-index:50; content:""; left:0; right:0; top:50%; border-top:2px solid grey; width:103%;
-webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -ms-transform:rotate(-9deg); transform:rotate(-9deg);}

#renewation_tble tr{display:none;}

/*************************************************************************************************************/
#proof_detail_row ul{display:block; width:50%;}

.options_data{display:none;}
#file_name:hover{cursor:default;}
.fa-question-circle-o:hover{cursor:help;}

/*******second box with folded corners*********/
.ribbon {
  fill: #fa5072;
  position: relative;
  line-height: 40px;
  width:100px;
  height:100px;
  margin-left:20px;
  font-family: helvetica;
  color: #fff;
  font-weight: 100;
  margin-bottom: 10px;
}
.fold {
  position: absolute;
  border-style: solid;
}
.fold.bottom {
  bottom: 0;
}
.fold.bottom.left {
  left: 0;
  border-width: 0 22px 22px 0;
  border-color: #eeebdc #e80734 #eeebdc #eeebdc;
}

.rcrd_tbl{
     border-collapse:collapse; 
     border:1px solid gray;
}
.rcrd_tbl th{
    border:1px solid grey;
    color:white;
    font-size:18px;
    font-family:cambria;
}
.rcrd_tbl td{
	font-family:cambria;
	font-size:18px;
    border:1px solid grey;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:2px;
    padding-bottom:2px;
}



/*****************************staff dashboard options**********/
#option_tble td{border-bottom:1px solid #DCDCDC; padding-left:20%; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;}
#option_tble td:hover{background:#E8E8E8;}
#staff_detail td{font-family:Cambria; font-size:20px;}
#student_detail td{font-family:Cambria; font-size:20px;}