@import url(https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff);


fmhtml, td,p,tr,tbody{
	margin: 0px !important; 
  	padding:  0px !important; 
	border:  0px !important; 
	outline:  0px !important; 
	line-height: 1.3em;
	border-style: none;
	margin-top: 0px;
 	margin-right: 0px;
 	margin-bottom: 0px;
 	margin-left: 0px
}

body{
  	margin: 0px !important;	
  	border:  0px !important; 
	outline:  0px !important; 
	line-height: 1.3em;
	border-style: none;
	margin-top: 0px;
 	margin-right: 0px;
 	margin-bottom: 0px;
 	margin-left: 0px;
	background-color:whitesmoke;
}

/* Fixing the header at the top  */
.fixed-header{
  	position: sticky;
	top: 0;
	padding-top:0px;
	width: 100%;
}

/* Fixing the footer at the top  */
.fixed-footer{
    position:fixed;
    padding-bottom: 0px;
	padding-top: 10px;
    padding-bottom: 0px;
	width:100%;
}
/**** fixing the background color of body */
.mainbg{
	color: whitesmoke;
	font-family: arimo;
	background-color: whitesmoke;
	height: 100%;
	margin:0px;
	padding:0px;
	line-height: 1em;
}
/***********  TEXT CSSf*****************************/
.H1{
	color: Black;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 300)));;
	line-height:1;
	margin:0px;
	padding:0px;
} 
.H1test
{
	color: black;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:calc(16px + (24 - 16) * ((100vw - 300px) / (1600 - 300)));;
	font-weight: bolder;
	line-height: 1em;
}
.H1_B{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size:calc(16px + (30 - 16) * ((100vw - 300px) / (1600 - 300)));;
	font-weight: bold;
	line-height: 1em;
}

.H2{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-weight: bold;
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	margin:0px;
	padding:0px;
}
.H2_TC{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-weight: bold;
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	margin:0px;
	padding:0px;
	background-color: #6080f5;
}

.H2_W{
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1600 - 300)));
	font-weight: bold;
}
.H2_Normal{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	margin:0px;
	padding:0px;
}
.H2_deebblue{
	color: #0070C0;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	margin:0px;
	padding:0px;	
}

.H3{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	margin:0px;
	padding:0px;
}
/* This text is used in error */
.error{
	color: red;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));	
}
.H4{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size:  calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));	
}
.H4_W{
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size:  calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));	
}
.H5{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(10px + (13 - 10) * ((100vw - 300px) / (1600 - 300)));	
}

.H5_W{
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));	
}
.H6_W{
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(9px + (13 - 10) * ((100vw - 300px) / (1600 - 300)));
	
}
.H5_B{
	color: #6080f5;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));	
}
.H5_deepblue{
	color: #0070C0;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(10px + (15 - 10) * ((100vw - 300px) / (1600 - 300)));	
}

.normaltxt{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (14 - 11) * ((100vw - 300px) / (1600 - 300)));
}

.normaltxt_w{
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (14 - 11) * ((100vw - 300px) / (1600 - 300)));
}
.optiontxt{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1600 - 300)));
}

.testtxt{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(14px + (17 - 14) * ((100vw - 300px) / (1600 - 300)));
}

/**** END of TEXT **********************************************/
/****** Text BOX and text area style ********/
.txtbox{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (15 - 11) * ((100vw - 300px) / (1600 - 300)));
	border-radius: 0px;
	height:25px;
	border-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color:#FDFDFD;
	border-width:0px;	
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 1px;
	opacity: 1; 

}
/* No more in use */
.txtboxbig{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(13px + (18 - 13) * ((100vw - 300px) / (1600 - 300)));
	border-radius: calc(2px + (4 - 3) * ((100vw - 300px) / (1600 - 300)));
	border-color: #0070C0;
	background-color: white;
	border-width:0px;	
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 1px;
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	opacity: .7;
}
/* Not in use */
.txtboxbase{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (15 - 11) * ((100vw - 300px) / (1600 - 300)));
	border-radius: calc(2px + (4 - 2) * ((100vw - 300px) / (1600 - 300)));
	border-color: black;
	border-width:1px;
	border-color: white;
	background-color: #F2F2F2;
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
/* Not in use */
.hiddenbox{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (14 - 11) * ((100vw - 300px) / (1600 - 300)));
	border-radius: 3px;
	border-color: white;
	border-width:0px;
	border-color: white;
	background-color: whitesmoke;
}

/* Not in use */
.hiddenwhite{
	color: whitesmoke;
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	border-radius: 3px;
	border-color: whitesmoke;
	border-width:0px;
	background-color: whitesmoke;
}
/* Used for text box covering entire TD */
.txtbox_full{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (13 - 11) * ((100vw - 300px) / (1600 - 300)));
	border-radius: 0px;
	height:25px;
	border-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color:#FDFDFD;
	border-width:0px;	
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 1px;
	opacity: 1; 
	width:100%;
	outline: 0px solid #dddddd;
}
/* Used for text area covering entire TD */
.txtarea_full{
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (13 - 11) * ((100vw - 300px) / (1600 - 300)));
	border-radius: 0px;
	height:50px;
	border-color: black;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
	background-color:#FDFDFD;
	border-width:0px;	
	border-right-width: 0px;
	border-top-width: 0px;
	border-left-width: 0px;
	border-bottom-width: 1px;
	opacity: 1; 
	width:100%;
}


/****************** end of Text Box  ********f/

/*********************Image Style **************/
/* Round image used for user profile */
.profileimage{
	height: 60px;	
	width:  60px;
	border-radius:30px;
}
/* Round image used on Tutor profile */
.tutorprofileimage{
	height: 120px;
	width:  120px;
	border-radius:60px;
}
/* Round image used on index page for each services */
.homeimage{
	width: calc(80px + (200 - 80) * ((100vw - 300px) / (1600 - 300)));	
	height: calc(80px + (200 - 80) * ((100vw - 300px) / (1600 - 300)));	
}
/* Round image used for logo */
.logo{
	height: calc(50px + (60 - 50) * ((100vw - 300px) / (1600 - 300)));	
	width:  calc(50px + (60 - 50) * ((100vw - 300px) / (1600 - 300)));	
}
/* Used for feature picture  */
.feature_pic {
	width:350px;
	height:auto;
  	border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));
	box-shadow:3px 3px 5px 6px #ccc;
}

/* Used for sponsor image as it is not rounded */
.sponsorimage{
	width: calc(80px + (120 - 80) * ((100vw - 300px) / (1600 - 300)));
}

/*******************end of Image  ********************/


/* used for checkbox */
.check{
	height: calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
	width: 	calc(15px + (20 - 15) * ((100vw - 300px) / (1600 - 300)));
	border-color: #6080f5;
	border-width: 0px;
	border-radius:1px;
}
/* Used for mainpain containg everything on a pane */
.mainpain{
	color: black;
	font-family: 'Open Sans', sans-serif;
	background-color: whitesmoke;
	border-radius: 3px;	
	box-shadow:3px 3px 5px 6px #ccc;
	border-width: 0px;
}
/* Used for Test Page containg everything on a Test */
.testpane{
	color: black;
	font-family: 'Open Sans', sans-serif;
	background-color: whitesmoke;
	border-radius: 3px;	
	border-width: 0px;
	box-shadow:3px 3px 5px 6px #ccc;
	width:70%;
}

/* Used for options in start test  */
.test_option{
	color: black;
	font-family: 'Open Sans', sans-serif;	
	border-radius: 2px;	
	border-color: black;
	border-width:1px;
}  
.test_option:hover{background-color:#DBE2FD   !important;}
/*Used for Questions in start test*/
.test_question{
	color: black;
	font-family: 'Open Sans', sans-serif;
	background-color: whitesmoke;
	border-radius: 2px;	
	/*color:#12E196;*/
}
/* Used for options in Review and Result test  */
.nontest_option{
	color: black;
	font-family: 'Open Sans', sans-serif;	
	border-radius: 2px;	
	border-color: black;
	border-width:1px;
} 

/* Not in use */
.selectcat_TD{
	color: black;
	font-family: 'Open Sans', sans-serif;
	background-color: whitesmoke;
	border-radius: calc(4px + (8 - 4) * ((100vw - 300px) / (1600 - 300)));	
	border-color: #6080f5;	
	padding: 5px;
	box-shadow:3px 3px 5px 6px #ccc;
}


/**************Button Style *********************************/


/************* All buttons used in Main Pane  */
/* Large  button in main pane */
.main_pane_button {
  	background-color: #6080f5; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 5px;
	padding-bottom:5px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:3px;	
}
 .main_pane_button:hover{background-color: #0070C0}
/* midium  button in main pane */
.main_pane_button_M {
  	background-color: #6080f5; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 8px;
	padding-right:8px;
    padding-top: 4px;
	padding-bottom:4px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:2px;	
}
 .main_pane_button_M:hover{background-color: #0070C0}
/* small button in main pane */
.main_pane_button_S {
  	background-color: #6080f5; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 6px;
	padding-right:6px;
    padding-top: 3px;
	padding-bottom:3px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(11px + (12 - 11) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:1px;	
}
 .main_pane_button_S:hover{background-color: #0070C0}
/****** Cancel button red in color */
.cancel_button {
  	background-color: red; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 6px;
	padding-right:6px;
    padding-top: 3px;
	padding-bottom:3px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(12px + (13 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:3px;	
}


/* home_s Used in main pages like tuition home, course home and test home */
.home_s {
  	background-color: #E84234; 
  	border-color: whitesmoke;
 	border-width:0;
  	color: whitesmoke;
  	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 2px;
	padding-right: 2px;
  	text-align: center;
  	text-decoration: none;
	width:100%;
  	display: inline-block;
  	font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
	font-family: 'Open Sans', sans-serif;  		
	border-radius:calc(2px + (3 - 2) * ((100vw - 300px) / (1600 - 300)));	
	margin: 1% 1%;
  	cursor: pointer;
}
.home_s:hover{background-color: #CB2417}
/* home_t Used in main pages like tuition home, course home and test home */
.home_t {
  	background-color: #0070C0; 
  	border-color: whitesmoke;
 	border-width:0;
  	color: whitesmoke;
  	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 2px;
	padding-right: 2px;
  	text-align: center;
  	text-decoration: none;
	width:100%;
  	display: inline-block;
  	font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));
	font-family: 'Open Sans', sans-serif;  		
	border-radius:calc(2px + (3 - 2) * ((100vw - 300px) / (1600 - 300)));	
  	margin: 1% 1%;
  	cursor: pointer;
	
}
.home_t:hover{background-color: #005DA2}

/* This button is used in Course launch page for fee*/
.launch_fee_button{
	height: 80px;
	width:  80px;
	border-radius:40px;
	background-color: yellow;
	border-width: 0px;
}
/* This button is used in start test page for tag review */
.tagreview_button {
  	background-color: #FABC05; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 3px;
	padding-bottom:3px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));;;
  	margin: 1%;
  	cursor: pointer;
	border-radius:3px;	
}
 .tagreview_button_M:hover{background-color: #D7AE17}

/* register_login is used on header page for signup */
/*
.register_login {
  	background-color: #E84234; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 1vw;
	padding-right:1vw;
    padding-top: 5px;
	padding-bottom:5px;
  	text-align: center;
	width:100%;
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
   	cursor: pointer;
	border-radius:calc(3px + (5 - 3) * ((100vw - 300px) / (1600 - 300)));	
}
.register_login:hover{background-color: #CB2417}
*/

/*Login button used in Login Screen for login button */
/*
.loginbutton {
  	background-color: #459B45; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 1vw;
	padding-right:1vw;
    padding-top: 5px;
	padding-bottom:5px;
  	text-align: center;
	width:100%;
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
   	cursor: pointer;
	border-radius:calc(3px + (5 - 3) * ((100vw - 300px) / (1600 - 300)));	
}

 .loginbutton:hover{background-color: #367A36}
*/
/*Login button used in header  */
.loginbutton_header {
  	background-color: #459B45; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 5px;
	padding-bottom:5px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:2px;	
}
 .loginbutton_header:hover{background-color: #367A36}
/*register sign up button used in header  */
.register_header {
  	background-color: #E84234; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 5px;
	padding-bottom:5px;
  	text-align: center;	
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(13px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius:2px;	
}
 .register_header:hover{background-color: #CB2417}

.testlist {
  	background-color: whitesmoke; 
  	border-color: #6080f5;
 	border-width:thin;
  	color: #6080f5;
  	padding: 5px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
  	margin: 1%;
  	cursor: pointer;
	width : calc(50px + (180 - 45) * ((100vw - 300px) / (1600 - 300)));
	border-radius:calc(2px + (3 - 2) * ((100vw - 300px) / (1600 - 300)));	
	font-family: 'Open Sans', sans-serif;
	
}
/* topmenubutton_bigblue used in the header for writing  Quiz n Test */
.topmenubutton_big {
  	background-color: whitesmoke;
 	border-width:0;
  	color: #6080f5;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
	cursor: pointer;
	padding-left: 1%;
	padding-right:1%;
    padding-top: 0px;
	padding-bottom:0px;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
}

/* No more in use */
/*
.testnavigation{ 
  	background-color: #A08DFD; 
  	border-color: white;
 	border-width:1px;
  	color: white;
	padding-left: .4vw;
	padding-right:.4vw;
  	padding-top: .1vw;
	padding-bottom:.1vw;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
  	margin: .5vw;
  	cursor: pointer;	
 	border-radius:calc(2px + (3 - 2) * ((100vw - 300px) / (1600 - 300)));
	font-family: 'Open Sans', sans-serif;
}
*/
/* No more in use */
/*
.testnavigation_big{ 
  	background-color: #A08DFD; 
  	border-color: #A08DFD;
 	border-width:0px;
  	color: white;
	padding-left: .5vw;
	padding-right:.5vw;
  	padding-top: .2vw;
	padding-bottom:.2vw;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
  	margin: .5vw;
  	cursor: pointer;	
 	border-radius:calc(4px + (6 - 4) * ((100vw - 300px) / (1600 - 300)));
	font-family: 'Open Sans', sans-serif;
}
*/
/*used for coloring question number if answered*/
.testnavnum_a{
  	background-color: #6080f5; 
  	border-color: #6080f5;
 	border-width:1px;
  	color: whitesmoke;
  	padding: 2px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 11px;
  	margin: 1px 1px;
  	cursor: pointer;	
	width : 24px;
	height: 24px;
	border-radius:12px;
	font-family: 'Open Sans', sans-serif;
}
/*used for coloring question numberin navigation which are tagged for review */
.testnavnum_review{
  	background-color: #D7AE17; 
  	border-color: #D7AE17;
 	border-width:1px;
  	color: whitesmoke;
  	padding: 2px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 11px;
  	margin: 1px 1px;
  	cursor: pointer;
	width : 24px;
	height: 24px;
	border-radius:12px;
	font-family: 'Open Sans', sans-serif;
}
/*used for number in navigation which are selected and displayed if tagged for review*/
.testnavnum_review_big{
  	background-color: #D7AE17; 
  	border-color: #D7AE17;
 	border-width:1px;
  	color: whitesmoke;
  	padding: 2px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
  	margin: 1px 1px;
  	cursor: pointer;
	width : 30px;
	height: 30px;
	border-radius:15px;
	font-family: 'Open Sans', sans-serif;
}
/*used for number in navigation which are selected and displayed if answered */
.testnavnum_big_a{
  	background-color: #6080f5;
  	border-color: #6080f5;
 	border-width:1px;
  	color: whitesmoke;
  	padding: 1px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
  	margin: 1px 1px;
  	cursor: pointer;
	width : 30px;
	height: 30px;
	border-radius:15px;
	font-family: 'Open Sans', sans-serif;
}
/*used for number in navigation which not answered */
.testnavnum{
  	background-color: whitesmoke; 
  	border-color: #6080f5;
 	border-width:1px;
	color: #6080f5;
  	padding: 1px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 11px;
  	margin: 1px 1px;
  	cursor: pointer;
	width : 24px;
	height: 24px;
	border-radius:12px;
	font-family: 'Open Sans', sans-serif;
}
/*used for number in navigation which are selected and displayed but not answered*/
.testnavnum_big{
  	background-color: whitesmoke;
 	border-width:1px;
  	color: #6080f5;
  	padding: 1px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
  	margin: 1px 1px;
  	cursor: pointer;
	width : 30px;
	height: 30px;
	border-radius:15px;
	font-family: 'Open Sans', sans-serif;
}

/* Not in use */
/*
.editButton {
  	background-color: whitesmoke; 
  	border-color: #6080f5;
 	border-width:1px;
 	color: black;
 	padding-left: 1vw;
	padding-right:1vw;
    padding-top: .2vw;
	padding-bottom:.2vw;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
	font-family: 'Open Sans', sans-serif;
  	font-size: calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 2px;
  	cursor: pointer;
	border-radius:calc(2px + (3 - 2) * ((100vw - 300px) / (1600 - 300)));;
}
*/
/*  Used in error */
.red_button {
  	background-color: red; 
  	border-color: white;
 	border-width:0px;
 	color: white;
 	padding-left: 10px;
	padding-right:10px;
    padding-top: 5px;
	padding-bottom:5px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(12px + (15 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1%;
  	cursor: pointer;
	border-radius: 3px;
	font-family: 'Open Sans', sans-serif;
}

/* This is used for Sub menu in the page where the submenu is selected */
.painmenuselected {
 	background-color: whitesmoke;
  	color: Black;
	border-color:#0070C0;
	border-left-width:1px;
	border-right-width:1px; 
	border-top-width:1px; 
	border-bottom-width:0;
	border-top-left-radius:6px; 
	border-top-right-radius:6px;
 	padding-left: 6px;
	padding-right:6px;
    padding-top: 2px;
	padding-bottom:2px;
  	text-align: center;  	
  	font-size: calc(11px + (14 - 11) * ((100vw - 300px) / (1600 - 300)));;
  	cursor: pointer;	
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
}
/* This is used for Sub menu in the page where the submenu is NOT selected */
.painmenu {
  	background-color:#DBE2FD;
	border-width:1px;
	border-color:#0070C0;
	border-left-width:1px;
	border-right-width:1px; 
	border-top-width:1px; 
	border-bottom-width:1px;
	border-top-left-radius:6px; 
	border-top-right-radius:6px; 
  	color: Black;
 	padding-left: 6px;
	padding-right:6px;
    padding-top: 2px;
	padding-bottom:2px;
  	text-align: center;  
  	display: inline-block;
 	font-size: calc(11px + (14 - 11) * ((100vw - 300px) / (1600 - 300)));;
 	font-family: 'Open Sans', sans-serif;
  	cursor: pointer;
	/*font-weight: bold;	*/
}

/********************** End of Button ************************/

/*** header background  */
.header_bg{
background-color:#F5F5F5;	
}
/* used in footer color */
.footer_bg{
background-color:#6080f5;	
}

/**** iframe size for Demo Video *****/
.iframe_size{
	width : calc(300px + (660 - 330) * ((100vw - 300px) / (1600 - 300)));;
	height: calc(200px + (300 - 200) * ((100vw - 300px) / (1600 - 300)));;	
	border-radius: calc(10px + (30 - 10) * ((100vw - 300px) / (1600 - 300)));;	
}

/***** Used in test launch  ******/
.test_launch{
	height: calc(150px + (210 - 150) * ((100vw - 300px) / (1600 - 300)));;
	border-radius:calc(25px + (35 - 25) * ((100vw - 300px) / (1600 - 300)));;
}
/*** TD used in Main Menu  */
.painmenu_td{
	color: black;
	font-family: 'Open Sans', sans-serif;
	background-color:#DBE2FD;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));;
	opacity:1;
}

/********** main TD*********************/
.main_td{
	color: black;
	font-family: 'Open Sans', sans-serif;	
	background-color: whitesmoke;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));;
}
/***************** Round green button */
/* Not in use*/ 
.roundgreen {
  	background-color: whitesmoke ; 
  	border-color: #0070C0;
 	border-width:calc(2px + (5 - 2) * ((100vw - 300px) / (1600 - 300)));;
  	color: #0070C0;
  	padding: 2px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1px 1px;
  	cursor: pointer;
	font-weight: bold;
	width : calc(30px + (70 - 30) * ((100vw - 300px) / (1600 - 300)));;
	height: calc(30px + (70 - 30) * ((100vw - 300px) / (1600 - 300)));;
	border-radius:calc(15px + (35 - 15) * ((100vw - 300px) / (1600 - 300)));;
	font-family: 'Open Sans', sans-serif;
}
/****************** Round button used in Dashboard ***************/
.rounddb {
  	background-color: whitesmoke; 
  	border-color: #6080f5;
 	border-width:calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));;
	font-family: 'Open Sans', sans-serif;
  	color: Black;
  	padding:.3vw;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1px 1px;
  	cursor: pointer;
	font-weight: bold;
	width : calc(100px + (120 - 100) * ((100vw - 300px) / (1600 - 300)));;
	height: calc(100px + (120 - 100) * ((100vw - 300px) / (1600 - 300)));;
	border-radius:calc(50px + (60 - 50) * ((100vw - 300px) / (1600 - 300)));;
}

.round_M {
  	background-color: whitesmoke; 
  	border-color: #6080f5;
 	border-width:calc(4px + (6 - 4) * ((100vw - 300px) / (1600 - 300)));;
	font-family: 'Open Sans', sans-serif;
  	color: Black;
  	padding:.3vw;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));;
  	margin: 1px 1px;
  	cursor: pointer;
	font-weight: bold;
	width : calc(60px + (80 - 60) * ((100vw - 300px) / (1600 - 300)));;
	height: calc(60px + (80 - 60) * ((100vw - 300px) / (1600 - 300)));;
	border-radius:calc(30px + (40 - 30) * ((100vw - 300px) / (1600 - 300)));;
}

/********************* Help Button used in all pages ********************/
.roundhelp {
  	background-color: whitesmoke; 
  	border-color: #6080f5;
	font-family: 'Open Sans', sans-serif;
 	border-width:2px;
  	color: black;
  	padding: 2px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 15px;
  	margin: 1px 1px;
  	cursor: pointer;
	font-weight: bold;
	width : 26px;
	height: 26px;
	border-radius:13px;
}
/************** Language button **************************/ 
.roundhindi {
  	background-color: whitesmoke ; 
	font-family: 'Open Sans', sans-serif;
  	border-color: #6080f5;
 	border-width:2px;
  	color: #6080f5;
  	padding: 1px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 12px;
  	margin: 1px 1px;
  	cursor: pointer;
	font-weight: bold;
	width : 20px;
	height: 20px;
	border-radius:10px;
}
.roundeng {
  	background-color: #6080f5;
	font-family: 'Open Sans', sans-serif;
  	border-color: #6080f5;
 	border-width:2px;
  	color: whitesmoke;
  	padding: 1px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 12px;
  	margin: 1px 1px;
  	cursor: pointer;
	font-weight: bold;
	width : 20px;
	height: 20px;
	border-radius:10px;
}

/**** Style used in Timer **********************/
.timer {
  	background-color: whitesmoke; 
	font-family: 'Open Sans', sans-serif;
  	border-color: #6080f5;
 	border-width:1px;
  	color: #6080f5;
  	padding: 5px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: calc(15px + (24 - 15) * ((100vw - 300px) / (1600 - 300)));
  	margin: .1vw;
  	cursor: pointer;
	width : calc(80px + (140 - 80) * ((100vw - 300px) / (1600 - 300)));
	height: calc(30px + (40 - 30) * ((100vw - 300px) / (1600 - 300)));
	border-radius:calc(25px + (100 - 30) * ((100vw - 300px) / (1600 - 300)));
}


/*************** dropdown box ************/
.dropdown1{ 
	width:173px;
}

.dropdown_pane{ 
	width:calc(100px + (130 - 100) * ((100vw - 300px) / (1600 - 300)));
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
	border-radius: calc(3px + (5 - 3) * ((100vw - 300px) / (1600 - 300)));;
	border-color: white;
	border-width:thin;
	border-color: white;
}

.dropdown_pane_big{ 
	width:calc(80px + (160 - 80) * ((100vw - 300px) / (1600 - 300)));
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
	border-radius: calc(4px + (6 - 4) * ((100vw - 300px) / (1600 - 300)));
	border-color: white;
	border-width:thin;
	border-color: white;
}

/******** used in collapsible ********/
.collapsible {
  	background-color:#DBE2FD;
  	color: black;
 	border-width:0px;
  	border-radius:2px;
  	cursor: pointer;
  	padding: 4px; 
	
	width: 100%;
	height:40px;
  	border: none;
  	text-align: left;
  	outline: none;
  	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-family: 'Open Sans', sans-serif;
}

.active, .collapsible:hover {
  background-color: #6080f5; 
  color: whitesmoke;
	opacity :1;
}

.content {
  padding: 6px;
  display: none;
  align: left;
  background-color:whitesmoke;
  width:100%;
	
}

	
/******** Use for progress bar *************/
.progress-container
	{width:100%;height:1.5em;position:relative;background-color:#f1f1f1}
.progressbar
	{background-color:#6080f5;height:100%;position:absolute;line-height:inherit}
.round-xlarge
	{border-radius:0px!important}
	
/*********** end of progress bar ***************/
/****** round chart ****f/
.circle-chart__circle {
  animation: circle-chart-fill 2s reverse;
  transform: rotate(90deg);
  transform-origin: center;
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

/******** vertical scroll **************/
 table.scrolldown { 
            width: 100%;   
			display: block; 
        } 
table.scrolldown { 
            height: 400px; 
			width: 100%;
            overflow-y: auto;          
			display: block; 
			
} 
/******** Horizontal scroll **************/
 table.scroll_table_H { 
            width: 100%;   
			display: block; 
	 		color: black;
			font-family: 'Open Sans', sans-serif;
			background-color: whitesmoke;
			border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));	
			border-color: #6080f5;
        } 

table.scroll_table_H  { 
            height: auto; 
			width:90%;
            overflow-x: auto;          
			display: block; 
			border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));	
			border-color: #6080f5;
			
} 
/********************* used for mobile friendly style *****************/

.tutorprofiletable{
	border-top-left-radius:  61px;
	border-top-right-radius:  61px;
	border-color: #6080f5;	
}

.indextable {
   	width: 80%;
	border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));
}

/* *****NOT in USE 
.finishtable {
   	width: 80%;
	border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));
}
*/

.testtable{
	width: 80%;		
	border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));
	font-family: 'Open Sans', sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));;
}
/******* Used to center the login table   *************/
.logintable{
	width: 60%;		
	border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));
	border-color: #6080f5;	
}

/*
.maketest_table{
	width: 75%;		
}
*/
/*
.registrationtable{
	width: 80%;		
	border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));
	border-color: #6080f5;	
}
*/
/*
.resulttable {
   	width: 50%;
	padding: 5px;
	border-radius: calc(6px + (12 - 6) * ((100vw - 300px) / (1600 - 300)));
	box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
background: #EEF2F7;
}
*/
.horizontalbar{
	width: 90px;
	height: 25px; 
}
.frontpageimage {
	width: calc(300px + (450 - 300) * ((100vw - 300px) / (1600 - 300)));
	height:auto;
}

/*this is main TD which holds the display main Pane */
.main_td_left {	
	width: 20%;
	background-repeat: no-repeat;
	background-size: contain;
}
.main_td_center {
	width: 50%;
}
.main_td_right {	
	width: 30%;
	background-repeat: no-repeat;
	background-size: contain;		
}

/******* image of test *******/
.test_img{
  transition: .2s;
	max-height: 300px;
	max-width: 400px;
}
.test_img:hover{
  transform: scale(1.5);	
  transform-origin: left;
}	


/* creating Span for large and small screen */
.large-view{ 
   display:inline-block;
	color: black;
}

.small-view{
   display:none;
	color:black;
}	
.left_td_pic{  
	width: calc(200px + (300 - 200) * ((100vw - 300px) / (1600 - 300)));	
	height:auto;
}
.right_td_pic{
  width: calc(300px + (400 - 300) * ((100vw - 300px) / (1600 - 300)));
	height:auto;
}





/* css used for editor */
.editor_container{
	height: Auto;
  	width: 100%;
	display: grid;
  	place-items: center;
  	border-radius: 2px;
  	border-left: 1px solid #dddddd;
  	border-right: 1px solid #dddddd;
  	border-top: 1px solid #dddddd;
  	border-bottom: 1px solid #dddddd;	
  	background-color: transparent;
  	outline: none;
  	color: #6080f5;
	border-radius: 2px;
}

.editor_buttons{
	height: 25px;
  	width: 25px;
  	display: grid;
  	place-items: center;
  	border-radius: 2px;
  	border: none;
  	background-color: #DBE2FD;
  	outline: none;
  	color: #0070C0;
	cursor: pointer;
	align:'center';
	

}
.editor_buttons:hover{
  	background-color:#0070C0; 
	color:white;
}


.editor_options_pane{
  	display: flex;
	height: Auto;
	width: 100%;
  /*	flex-wrap:nowrap; */
  	align-items: left;
	margin-top: 0px;
  	gap: 3px;
  	border-left: 1px solid #dddddd;
  	border-right: 1px solid #dddddd;
  	border-top: 0px solid #dddddd;
  	border-bottom: 1px solid #dddddd;	
}

.editor_input{
	margin-top: 0px;
	color: black;
	width: 100% ;
	background-color:#FDFDFD;
	text-align: left;
  	border: none;
  	padding-top: 5px;	
  	padding-bottom:0px;
  	padding-left: 0px;
  	padding-right:0px;	
  	height: auto;
	min-height: 30px;
	/*margin-left: 10px;*/
	outline: 0px solid #dddddd;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(11px + (13 - 11) * ((100vw - 300px) / (1600 - 300)));	
}

.editor_footer{
	margin-top: 0px;
	color: black;
	width: 100% ;
	background-color:transparent;
	text-align: left;
  	border: none;
  	padding-top: 2px;	
  	padding-bottom:0px;
  	padding-left: 0px;
  	padding-right:0px;		
	border-left: 0px solid #dddddd;
  	border-right: 0px solid #dddddd;
  	border-top: 1px solid #dddddd;
  	border-bottom: 0px solid #dddddd;	
	
  	height: auto;
	min-height: 9px;
	font-style:italic;
	outline: 0px solid #dddddd;
	text-align: right;
	font-family: 'Open Sans', sans-serif;
	font-size: calc(8px + (10 - 9) * ((100vw - 300px) / (1600 - 300)));	
}
/* end of editor css */

/* This is for screen size  */
@media only screen and (max-width: 600px) {
	.logo{ height:  50px; width:  50px; 	}		
	.profileimage{ 	height: 50px; 	width:  50px; 	border-radius:25px; 	}	
	.finishtable {  width: 100%;    }
	.testtable {   width: 100%;    }
	.resulttable{	width:100%; }
	.logintable{	width:100%; }
	.indextable {   width: 100%; 	align: center; 	}

	.horizontalbar{	width:0px;		}
	.frontpageimage { width: 300px; height:auto;}
	.main_td_left {	width: 0px;}
	.td_main_right {width: 0px;}
	.main_td_center {width: 100%;}
	.registrationtable{width:100%;}
	.large-view{ display:none;color: black;  }
    .small-view{display:inline-block; color: black;  }
	.left_td_pic{  width:0px; }
	.right_td_pic{  width:0px;}
	.maketest_table{width: 100%;}
	.testpane{width: 100%;}
}

@media only screen and (max-width: 1000px) and (min-width: 600px) {	
  .resulttable{width:75%;	}
	.testtable { width: 90%;  }
	.indextable { width: 90%;}
	.logintable{width:80%; }
	.registrationtable{width:90%;}

	.main_td_left {	width: 10%;}
	.main_td_right {width: 10%;}
	.td_main_center {width: 80%;}	
	.large-view{ display:none;color: black;  }
    .small-view{display:inline-block; color: black;  }
	.left_td_pic{  width:0px; }
	.right_td_pic{  width:0px;}
	.launch_fee_button{ height: 70px; 	width:  70px; 	border-radius:35px; 	}	
	.formPopup {display: none;  width:75%;left: 50%; }
	.maketest_table{width: 90%;}
	.testpane{width: 85%;}
}