@font-face
	{
		font-family: 'HPSimplified';	
		src: url('/api/fonts/HPSimplified.eot');
		src: url('/api/fonts/HPSimplified.eot?#iefix') format('embedded-opentype'),
		url('/api/fonts/HPSimplified.woff') format('woff'),
		url('/api/fonts/HPSimplified.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;		 		 
	}
		 
	@font-face
	{
		font-family: 'HPSimplified Bold';	
		src: url('/api/fonts/HPSimplified Bold.eot');
		src: url('/api/fonts/HPSimplified Bold.eot?#iefix') format('embedded-opentype'),
		url('/api/fonts/HPSimplified Bold.woff') format('woff'),
		url('/api/fonts/HPSimplified Bold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;		
	} 			   
							   
	@font-face
	{
		font-family: 'gothic';
		src: url('/var/www/web1/web/api/fonts/gothic.eot');
		src: local('gothic'), url('/var/www/web1/web/api/fonts/gothic.woff') format('woff'), url('/var/www/web1/web/api/fonts/gothic.ttf') format('truetype');
	}
		
	@font-face
	{
		font-family: 'Lobster Two';
		font-style: normal;
		font-weight: 400;
		src: local('Lobster Two'), local('LobsterTwo'), url(https://themes.googleusercontent.com/static/fonts/lobstertwo/v5/Law3VVulBOoxyKPkrNsAaIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
	}	
						
	@font-face
	{
		font-family: 'Rammetto One';
		font-style: normal;
		font-weight: 400;
		src: local('Rammetto One Regular'), local('RammettoOne-Regular'), url(https://themes.googleusercontent.com/static/fonts/rammettoone/v3/mh0uQ1tV8QgSx9v_KyEYPHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
	}
	
	@font-face
	{
		font-family: 'Philosopher';
		font-style: normal;
		font-weight: 400;
		src: local('Philosopher'), url(https://themes.googleusercontent.com/static/fonts/philosopher/v5/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
	}
	
	@font-face {
		font-family: 'Philosopher';
		font-style: normal;
		font-weight: 700;
		src: local('Philosopher Bold'), local('Philosopher-Bold'), url(https://themes.googleusercontent.com/static/fonts/philosopher/v5/napvkewXG9Gqby5vwGHICDqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
	}
	
	@font-face
	{
		font-family: 'Philosopher';
		font-style: italic;
		font-weight: 400;
		src: local('Philosopher Italic'), local('Philosopher-Italic'), url(https://themes.googleusercontent.com/static/fonts/philosopher/v5/_9Hnc_gz9k7Qq6uKaeHKmdkZXW4sYc4BjuAIFc1SXII.woff) format('woff');
	}
	
	@font-face
	{
		font-family: 'Philosopher';
		font-style: italic;
		font-weight: 700;
		src: local('Philosopher Bold Italic'), local('Philosopher-BoldItalic'), url(https://themes.googleusercontent.com/static/fonts/philosopher/v5/PuKlryTcvTj7-qZWfLCFIARV2F9RPTaqyJ4QibDfkzM.woff) format('woff');
	}

	@font-face
	{
		font-family: 'Karma';
		font-style: normal;
		font-weight: 400;
		src: local('Karma Regular'), local('Karma-Regular'), url(https://fonts.gstatic.com/s/karma/v2/xNwY0rzBXIEoSeEnAAbQCg.woff) format('woff');
		unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
	}
	
	@font-face 
	{
		font-family: 'Karma';
		font-style: normal;
		font-weight: 400;
		src: local('Karma Regular'), local('Karma-Regular'), url(https://fonts.gstatic.com/s/karma/v2/E4YVLCG37sfvbHtA5q6EAQ.woff) format('woff');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}
	
	@font-face
	{
		font-family:'Calibri';
		font-style:normal;
		font-weight:400;
		src:local('Calibri'),url(https://www.proprofs.com/api/fonts/font.woff2) format('woff2');
		unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000;
	}
	
	@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Regular'), 
	local('Roboto-Regular'), 
	url(https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff) 
	format('woff');
	}
	a:hover
	{
		color:#000 !important;
	}
	a#forgot_password{ color:#3b5998;}
	.class_login_div{ background:#fff; box-shadow: 0px 0px 14px 1px #dedede; float: none; margin: auto; margin-top: 7%;}
	#forgot_password{
		font-size: 12px !important;
		cursor: pointer;
		text-decoration: none !important;
		float: right !important;
		position: relative;
    	margin-top: 6px;
		/*left: -10px;*/
	}
    #default_login
	{
	   display: table;
	}
	#border-middle-login{
	height: 258px;
    margin-top: 15px;
    float: left;
    /*width: 30px;*/
    text-align: center;
    background: url(/api/signup/images/SignIn_OR_new.png) center no-repeat;
	}
	.form-responsive{width:92% !important;} 
	/*Start: media Query css*/
	.loginFormBox{
		overflow-x: hidden;padding: 50px 20% 10px 20%;margin: 0; 
	}
	.loginFormBoxInner{ background-color:#fff; padding: 20px 20px 20px 20px;box-shadow: 2px 3px 13px 0px #a3a3a3;margin: auto; float: none; }
	@media only screen and (min-width :1256px) and (max-width :	5000px){
	
	.classroom{height: 75px;}
	.classroom_img_div{padding-top: 20px;padding-left:37px;}
	.class_login_div{width: 58%;margin-top: 2%;}
	.btn-small.primary, .btn-small.secondary{
		padding: 2% 7% !important;
	}
	#default_login
	{
	float: left;
	width: 56%;	
	/*height: 300px;*/
	height: 0px;
	}
	#google_view{
	float: left;margin-left: 10px;margin-top: 24px;
	}
	/*.well-sm{height: 394px;}*/
	#border-middle-login{height: 258px; }
	.input-field {width: 100% !important;}
	#forgot_password{margin-right: -20%}
}
	 @media only screen and (min-width :1025px) and (max-width :	1255px){
		.classroom{height: 75px;}
		.classroom_img_div{padding-top: 20px;padding-left:37px;}
		.class_login_div{width: 68%;margin-top: 3%;}
		.btn-small.primary, .btn-small.secondary{
			padding: 2% 7% !important;
		}
		#default_login{
			float: left;
			width: 100%;
			/*height: 342px;*/
			height: 0px;
		}
		#google_view{
			float: left;
			margin-top: 33px;
		}
		#border-middle-login{ display: block; height: 225px; }
		#default_login {
			float: left;
			width: 100%;
			/*height: 280px;*/
		}
		/*.well-sm{height: 370px;}*/
		.input-field {width: 100% !important;}
		#forgot_password{margin-right: -20%}
	 }
	@media only screen and (min-width :768px) and (max-width :1024px){
	.classroom{height: 75px;}
	.classroom_img_div{padding-top: 20px;padding-left:37px;margin-top: 5%;}
	.class_login_div{width: 90%;}
	.btn-small.primary, .btn-small.secondary{
		padding: 2% 7% !important;
	}
	#border-middle-login{display: block;height: 248px;}
	#default_login {
			float: left;
			width: 100%;
			height: 250px;
		}
	#google_view{float: left;margin-top: 58px; }
	/*.well-sm{height: 383px;}*/
	.input-field {width: 100% !important;}
	#forgot_password{margin-right: -20%}
	}
	
	@media only screen and (min-width :708px) and (max-width :767px){
	
		.classroom{height: 75px!important;}
		.classroom_img_div{padding-top: 5px;padding-left:25px;}
		.fancybox-outer{ padding:0px !important;}
		.class_login_div{ width: 55%; margin: 8% 23%;margin-top: 2%;}
		.btn-small.primary, .btn-small.secondary{
			padding: 2% 7% !important;
		}
		#default_login {
			float: left;
			height: 250px;
			width: 100%;
		}
		#border-middle-login{display: none;}
		.signupGoogleDiv{ margin: 15px 0px 0px 0px; }
		#google_view{float: left;margin-top:50px; }
		/*.well-sm{height: 430px;}*/
		.input-field {width: 100% !important;}
	}
	
	@media only screen and (min-width :481px) and (max-width :707px)
	{
		.classroom{height: 75px!important;}
		.classroom_img_div{padding-top: 5px;padding-left:25px;}
		.fancybox-outer{ padding:0px !important;}
		.class_login_div{width: 82%;margin-top: 2%; /*margin: 8% 23%;*/}
		.btn-small.primary, .btn-small.secondary{
		padding: 2% 7% !important;
		}
		#default_login{ float: left;width: 100%; }
		#google_view{ float: left;margin-top: 24px; }
		#border-middle-login{ display: none; }
		.signupGoogleDiv{ margin: 15px 0px 0px 0px; }
		/*.well-sm{height: 435px;}*/
		.input-field {width: 100% !important;}
		.subtextLoginScreen{ font-size: 80% !important; }
		.loginFormBox{  padding: 50px 3% 10px 3%; }
		.loginFormBoxInner{ padding: 10px 10px 10px 20px; }
		.classroom_desc_div p, .classroom_desc_div span { font-size: 13px !important; }
	}
	

	@media only screen and (min-width :301px) and (max-width :480px)
	{
		.classroom{height: 75px!important;}
		.classroom_img_div{padding-top: 6px;padding-left:25px;}
		.fancybox-outer{ padding:0px !important;}
		.class_login_div{ width: 100%; }
		.btn-small.primary, .btn-small.secondary{
			padding: 2% 7% !important;
		}
		#google_view
		{
			float: left;margin-top: 20px;clear: both;
		}
		#border-middle-login{display: none;}
		.signupGoogleDiv{ margin: 15px 0px 0px 0px; }
		/*.well-sm{height: 450px;}*/
		.input-field {width: 100% !important;}
		.subtextLoginScreen{ font-size: 80% !important; }
		.loginFormBox{  padding: 50px 3% 10px 3%; }
		.loginFormBoxInner{ padding: 10px 10px 10px 20px; }
		.classroom_desc_div p, .classroom_desc_div span { font-size: 13px !important; }
	}
	@media only screen and (min-width :0) and (max-width :300px)
	{
		.classroom{height: 75px!important;}
		.classroom_img_div{padding-top: 6px;padding-left:25px;}
		.fancybox-outer{ padding:0px !important;}
		.class_login_div{width: 100%;}
		.btn-small.primary, .btn-small.secondary
		{
			padding: 2% 7% !important;
		}
		#google_view
		{
			float: left;margin-top: 24px;
		}
		#border-middle-login{display: none;}
		.signupGoogleDiv{ margin: 15px 0px 0px 0px; }
		.input-field {width: 100% !important;}
		.classroom_desc_div{margin-bottom: 30px;}
		.subtextLoginScreen{ font-size: 70% !important; }
		.loginFormBox{  padding: 50px 3% 10px 3%; }
		.loginFormBoxInner{ padding: 10px 10px 10px 20px; }
		.classroom_desc_div p, .classroom_desc_div span { font-size: 13px !important; }
		/*.well-sm{height: 445px;}*/
}
.rememberMeText{ margin-left: 5px; }
.rememberMeCheck { display: table-cell; }
.rememberMeTextDiv{ vertical-align: middle; display: table-cell; }
:root {
	/* Not my favorite that line-height has to be united, but needed */
	--lh: 2.3rem;
}
.classroom_desc_div{ 
	line-height: var(--lh); 
}
.truncate-overflow {
	--max-lines: 3;
	position: relative;
	max-height: calc(var(--lh) * var(--max-lines));
	overflow: hidden;
	padding-right: 1rem; /* space for ellipsis */
  }
  .truncate-overflow::before {
	position: absolute;
	content: "...";
	/* tempting... but shows when lines == content */
	/* top: calc(var(--lh) * (var(--max-lines) - 1)); */
	
	/*
	inset-block-end: 0;
	inset-inline-end: 0;
	*/
	bottom: 0;
	right: 5px;
  }
  .truncate-overflow::after {
	content: "";
	position: absolute;
	/*
	inset-inline-end: 0;
	*/
	right: 0;
	/* missing bottom on purpose*/
	width: 1rem;
	height: 1rem;
	background: white;
  }
  .truncate-overflow p{ margin: 0; }
	.readMore:hover{ text-decoration: none;}
	/*Closed: media Query css*/

/*overflow more by nazish*/

.truncate-overflow1.reedMoreOverflow {

	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1rem;
}

.truncate-overflow1.reedMoreOverflow p{ margin: 0; }

.readMore#read_more{
	display: none;
}