@charset "ISO-8859-1"; 


@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;1,400&family=Nunito:wght@300;400;500;600&display=swap');

/* background-image: linear-gradient(to right, rgb(23, 110, 209) 0% #176ed1, rgb(40, 53, 147) 100%)#283593;
#16417d; 
 */

 :root{
	  --color-primary-light:#cdddfe; 
   --color-primary-dark:#033496; 
  --color-primary:#266dd1;
  --color-primary-1:#1e57a7;
--color-bg:linear-gradient(90deg,#16417d,#266dd1,#266dd1);
--color-orange-dark:#53370f;
  --color-orange:#d18a26;
  --color-orange-light:#f5e7d3;
  --color-orange-light1:#fdfaf6;
  --color-info:#0d7d8f;

  --color-grey-light-1:#f4f5f6;
  --color-grey-light-2:#f4f2f2;
 --color-grey-light-3:#f0eeee;
  --color-grey-light-4:#ccc;
  --color-grey-body: #777;
  --color-grey:#111;

--color-success:#24a858;
--color-warning: #cc9c07;
--color-error:  #fb0a24;
--color-red-dark:#d12d1a;

  --shadow-dark: 0rem .3rem .6rem var(--color-primary);
  --shadow-light: 0rem .3rem .5rem #f4f2f2;
  --shadow-input:.01rem .01rem .2rem .6rem #cdddfe;
  
--m-sec:5rem auto;


   --font-primary: "Nunito", sans-serif; /*default */
  --font-display: "Josefin Sans", sans-serif;
    --lr-s-cap:0.85rem;
 --lr-s-th:.35rem;
 --lr-s-p:.10rem;
 --fs-large:3.5rem;
  --fs-th:2rem;
  --fs-input:1.8rem;
 
  --fw-cap:600;
 --fw-5:500;
 
  --p-cap:2.4rem 0 3.2rem;	
 --p-th:1.2rem .2rem;
 --p-td:2rem .2rem;
--p-side:5rem 0;

 
 
 
 
 
 
 
 

 
 
/* --m-cap:2.4rem 0 3.2rem;*/
 

 
  } 

/*
  --color-grey-dark-1:#333; 
  --color-grey-dark-2: #777;
  --color-grey-dark-3: #999;

*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
/*   outline: 1px solid red; */ 
}
html {
	/* font-size: 10px; */
	/* 10px / 16px = 0.625 = 62.5% */
	/* Percentage of user's browser font-size setting */
	font-size: 62.5%;
	box-sizing: border-box;
	/*max-width:100%;	 */
	 width:100%;
	 height:100vh; 
 scroll-behavior: smooth;
} 

body {
	font-family: var( --font-primary);
	line-height: 1.3;
	font-weight: 400;
  color: var(--color-grey-body); 
/*	min-height:100vh;*/
/*max-width:100%;*/	  
 font-size:1.6rem;
 letter-spacing:var(--lr-s-p);
}

/*  *img,
picutre {
  max-width: 100%;
  display: block;
}

 .forWidth{
	 max-width:50rem;
	  margin:auto;
	 }  
	*/
.header-area{
grid-column: full-start / full-end;	
}
.flex {
  display: flex;
  gap: var(--gap, 3rem);
}

.display-b{
	display:block;
}
  .tTrans{
  text-transform: capitalize;
  } 
.m-4{
	margin:4rem;
}
.mr-4{
	margin-right:4rem;
	}
.ml-4{
	margin-left:4rem;
}
	
.mb-4{
	margin-bottom:4rem;
}
.mt-4{
	margin-top:4rem;
}
.mw-1{
	max-width:10rem;
	}

	 
#backToTop{
 /* display: none;*/
  position: fixed;
  bottom: 6rem;
  right:1rem;
  z-index: 99;
  font-size: 1.8rem;
  border: none;
  outline: none;
  background-color:var(--color-primary);
  color:black;
  cursor: pointer;
  padding: 1rem;
  border-radius: 1rem;
}

#backToTop:hover {
  background-color:var(--color-primary-1);
color:white;
}
/*.fa-solid,*/
.fa-arrow-left{
	padding-right:1rem;
}
.act-btn{
	 display:block;
	background-color:var(--color-primary);
	cursor:pointer;
	font-size:1.8rem;
 padding: 1.2rem 2.4rem; 
 margin: 3.4rem auto 3.4rem;
 outline: 0;
  border: 1px solid var(--color-primary);
  border-radius: 0.6rem;
   text-align:center;
   transition: all 0.3s;
  width:100%;
color:white;
}
.sub-btn{
 margin: 3.4rem auto 3.4rem;
}
.add-btn{
 margin: 0rem auto 3.4rem;
 }
.sub-btn:hover,
.add-btn:hover{
	border: 1px solid var(--color-primary-dark);
	background-color:hsl(215, 95%, 35%);
}
.btn-sub{
  padding: 1rem 3rem;
  margin:2rem auto;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 1rem;
  letter-spacing: 3px;
 
}
.btn-sub:hover{
  background-color:var(--color-primary-1);
  cursor: pointer;
   color:white;
}

	.btn-flex{
	display:flex;
	justify-content:space-between;
}
.btn{
	font-size: 1.4rem;
  padding: .8rem 2rem;
  border-radius:9px;
  cursor: pointer;
  transition: all 0.3s;
}
/********update **********************/
.btn-1 {
    border:1px solid var(--color-primary-dark);
  color:var(--color-primary-dark);
}
 .btn-1:hover{
	 background-color:var(--color-primary);
	color:white;
}  
/* for btn2 side show btn */
.btn-2{
	 background-color: transparent;
  outline:transparent;
  border:transparent;
  /* transition: all 0.3s;*/
   color:var(--color-primary-dark);
    padding:1.2rem 2.6rem;
  
}
/*.btn-2:hover{
	/*background-color:white;*/
	/*color:var(--color-primary-dark);
}*/
/* delete btn */
.btn-3{
     border:1px solid var(--color-error);
  color:var(--color-primary-dark);
}
 .btn-3:hover{
	color:white;
	background-color:var(--color-error);
}
.btn-diabled{
	font-size: 1.4rem;
  padding: .8rem 2.4rem;
   border-radius: .9rem;
   border:1px solid var(--color-error);
	border:1px solid var(--color-grey-light-4);
	color:var(--color-primary-dark);
	   opacity: 0.6;
	  /* cursor: not-allowed;*/
	  
}
 
/*Edit btn4 and btn6 */
.btn-4{
   border:1px solid var(--color-success);
   color:var(--color-primary-dark);
    margin-left:.5rem;
}
.btn-6:hover,
 .btn-4:hover{
	background-color:var(--color-success);
	color:white;
	} 
	.btn-6{/* using for edit remove margin left*/
	 border:1px solid var(--color-success);
   color:var(--color-primary-dark);
   }

 .btn-5{
grid-column: center-start / col-end 1;
grid-row:-1/-2;
	text-align:center;
	padding:1rem;
	background-color:var(--color-primary);
	text-decoration:none;
	color:black;
	cursor:pointer;
}

.btn-5:hover{
	background-color:var(--color-primary-1);
color:white;
}
.btn-live-c{
	background-color:var(--color-error);
	color:white;
	padding:.5rem 1.5rem .3rem;
	border:2px solid;
border-radius:5px;
text-transform:uppercase;
}		
.btn-live{
	background-color:var(--color-error);
	color:white;
	padding:.6rem 1.5rem .2rem;
	border:none;
	border-radius:5px;
cursor:pointer;
text-transform: uppercase;
}
.btn-live:hover{
	background-color:var(--color-red-dark);
}	

/******************************************/
.info-msg{
 position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}
.td-clr{
	font-size:1.4rem;
	font-family:var(--font-display);
}
.live{
	color:var(--color-error);
	font-size:1.4rem;
	font-family:var(--font-display);
	}
	
.creation{
	color:var(--color-info);
	font-size:1.4rem;
	font-family:var(--font-display);
	}
.orange{
	color:var(--color-orange);
			}
.green{
	color:var(--color-success);
}	
.success {
	font-size: 2rem;
	color:green;
	padding: 1rem;
	
	display:block;	
	text-align:center;
}

.warning {
	font-size: 2rem;
	color: var(--color-warning);
	display:block;	
	text-align:center;
}

.error {
	font-size: 1.6rem;
	color: var(--color-error);
	margin-bottom:3rem;
	/*display:block; for student questionpaper removed*/	
/*	display:block;*/
/* need for display block==> added for classes=> update msg */
	text-align:center;
	
}	
/********************************************************/
/************side table*****************/
.tableSide{
	 border-collapse:collapse;
     margin:1rem auto;
 /*  box-shadow:var(--shadow-dark);*/  
 
}
.tablecaptionSide{
	font-family:var(--font-display);
	font-size:var(--fs-large);
	color:var(--color-primary-dark);
	padding:var(--p-cap);
	font-weight:var(--fw-cap);
 letter-spacing:var(--lr-s-cap);
 }
.tableSide thead {
	position:sticky;
   background-color:var(--color-primary-light);
  color:var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  box-shadow:var(--shadow-dark);
  } 
.tableSide thead tr:hover {
  background-color: var(--color-primary-light);
} 
.tableSide th {
	/*  padding:1.2rem 2.6rem;*/ 
    letter-spacing:var(--lr-s-th);
  font-weight: var(--fw-th);
  font-size: var(--fs-th);
  text-align:center;
 }

 .std_enter {
 width:100%;
padding:2rem 2.6rem;
border-collapse:collapse;
margin:auto;
outline:none;
border:none;
box-shadow:var(--shadow-dark);
background-color: transparent;
text-transform: capitalize;
}
.std_enter:hover {
		 background-color:var(--color-grey-light-1);
		  border: 1px solid var(--color-primary);
		  cursor: pointer;
} 
.std{
	color:var(--color-orange);
	font-size:var(--fs-large);
	text-transform: capitalize;
	padding-left:1rem;
}
/*************************************************
/*****input with arrow **************/
.inputfield{
	display:block;
 font-size:var(--fs-input);
 padding: 1.2rem .2rem; 
 margin: 1rem auto 5rem;
  outline: 0;
 background-color:var(--color-primary-light); 
  border: 1px solid var(--color-primary);
  border-radius: 0.6rem;
 color:var(--color-primary-dark);
  text-align:center;
  cursor: input;
  transition: all 0.3s;
  width:100%;
}
.inputfield:hover{
	background-color:white;
}
.inputfield:focus{
	box-shadow:var(--shadow-input);
}
.classList select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;

 background-image:url(../images/downarrow2.png);
 background-repeat:no-repeat;
 background-position:92% 50%;
 background-size:1.6rem;
 
 width:80%;
}
/***************************/
	 .classListName--sub{
	 color:var(--color-orange);
	padding-inline:1rem;
	text-transform: uppercase;
	
}
/*************************************************/
/************center first*************/
.labelName {
display:block;
font-size:var(--fs-th);
letter-spacing:var(--lr-s-th);
margin-bottom:4rem;
 color:var(--color-primary-dark);
  font-weight:var(--fw-cap);
 }

 .label-input{
 display:block;
 font-size:var(--fs-input);
 padding: 1.2rem 2.4rem; 
 margin: 1rem auto 5rem;
  outline: 0;
 background-color:var(--color-primary-light); 
  border: 1px solid var(--color-primary);
  border-radius: 0.6rem;
 color:var(--color-primary-dark);
  text-align:center;
  text-transform: capitalize;
  cursor:input;
  transition: all 0.3s;
  width:100%;	
 }
 .label-input:hover{
	background-color:white;
	
}
.label-input:focus{
	box-shadow:var(--shadow-input);
} 

/****************************************************************/ 
/***************table center content*****************/
.forTable{
	border-collapse:collapse;
    text-align: left;
      width:96%;
      margin:1rem auto;
  box-shadow:var(--shadow-dark);   
      }

.tablecaption{
	font-family:var(--font-display);
	font-size:var(--fs-large);
	color:var(--color-primary-dark);
	padding:var(--p-cap);
	font-weight:var(--fw-cap);
 letter-spacing:var(--lr-s-cap);
}
.forTable thead {
	position:sticky;
   background-color:var(--color-primary-light);
  color:var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  box-shadow:var(--shadow-dark);
} 
  

 .forTable thead tr:hover {
  background-color: var(--color-primary-light);
} 
.forTable th {
  padding:var(--p-th);
    letter-spacing:var(--lr-s-th);
  font-weight: var(--fw-th);
  font-size: var(--fs-th);
  text-align:center;
}

.forTable td {
  padding:var(--p-td);
  font-size: var(--fs-th);
   word-break: break-all;
  background-color:white;
  text-align:center;
  text-transform: capitalize;
}
 input[name=className],
 input[name=subjectName],
 input[name=sectionName]
  {
  display:block;
 /* margin:.5rem .5rem;*/
  padding: 1.2rem 2.4rem; 
  font-size:var(--fs-input);
   border: 1px solid var(--color-primary);
  border-radius: 0.6rem;
 color:var(--color-primary-dark);
  text-align:center;
  cursor:input;
  transition: all 0.3s;
  outline:none;	
   }
 input[name=className]:hover,
 input[name=subjectName]:hover,
 input[name=sectionName]:hover {
	background-color:white;
	
}
input[name=className]:focus,
input[name=subjectName]:focus,
input[name=sectionName]:focus {
	box-shadow:var(--shadow-input);
}
 
/**color alternating rows**/

.forTable tr:hover td{
	background-color:var(--color-grey-light-2);
	}

/********************************************************/

/**************************************************************************/
/*@media only screen and (min-width: 125em) {
	/*  2000 / 16 = 125em  */
/*	#backToTop{
 /* display: none;*/
/*  position: fixed;
  bottom: 6rem;
  right:35rem;
 background-color:yellow;
}
}

@media only screen and (min-width: 94em) and (max-width:124em) {
	/*  1600 / 16 = 100em  */
/*	#backToTop{
 /* display: none;*/
 /* position: fixed;
  bottom: 6rem;
  right:13rem;
 background-color:red;
}
}*/

@media only screen and (max-width: 75em) {
	/*  1200 / 16 = 75em  */
  html {
    font-size: 50%;
  }
  

}

@media only screen and (max-width: 56.25em) {
	/*  900 / 16 = 56.25em  */
  html {
    font-size: 42%;
  }
}

@media only screen and (max-width: 37.5em) {
	/*  600 / 16 = 37.5em  */
	.tablecaptionSide{
	 letter-spacing:.65rem;
 }
 .labelName {
letter-spacing:.25rem;

 }

.tablecaption{
	letter-spacing:.65rem;
}
.tableSide th {
	
    letter-spacing:.25rem;
  
 }
.forTable th {
     letter-spacing:.25rem;
  
}

}