/*=================== Text and Background Color's Starts: ===================*/
:root {
	/* background colors */
	--primary-bg-color:#1973E8;
	--secondary-bg-color:#ffffff;
	--trinity-bg-color:#000000;
	--error-bg-color: #ff0000;
	
	/* Text Colors */
	--primary-text-color:#37474F;
	--secondary-text-color:#ffffff;
	--trinity-text-color:#1973E8;
	--error-text-color: #ff0000;
}
 /*=================== Text and Background Color's Ends: ===================*/
 
/*=================== Material Icons Font Face Starts: ===================*/
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/material/MaterialIcons-Regular.eot); 
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(../fonts/material/MaterialIcons-Regular.woff2) format('woff2'),
        url(../fonts/material/MaterialIcons-Regular.woff) format('woff'),
        url(../fonts/material/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons 							{ font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 22px; width: 22px; min-height: 22px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; }

@font-face {
   font-family: 'Segoe UI';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/segoe/SegoeUI.eot); 
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(../fonts/segoe/SegoeUI.woff2) format('woff2'),
        url(../fonts/segoe/SegoeUI.woff) format('woff'),
        url(../fonts/segoe/SegoeUI.ttf) format('truetype');
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit/Outfit-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/outfit/Outfit-Regular.woff') format('woff'), url('../fonts/outfit/Outfit-Regular.ttf') format('truetype'), url('../fonts/outfit/Outfit-Regular.svg#') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit/Outfit-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/outfit/Outfit-Medium.woff') format('woff'), url('../fonts/outfit/Outfit-Medium.ttf') format('truetype'), url('../fonts/outfit/Outfit-Medium.svg#') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit/Outfit-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/outfit/Outfit-SemiBold.woff') format('woff'), url('../fonts/outfit/Outfit-SemiBold.ttf') format('truetype'), url('../fonts/outfit/Outfit-SemiBold.svg#') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
 
/*=================== Material Icons Font Face Ends: ===================*/

/*=================== CSS Reset Starts: ===================*/
* 											{ outline: none; box-sizing: border-box; font-family: Outfit, sans-serif;}
body 										{ margin: 0; font-size: 13px; font-weight: 500; color: var(--primary-text-color); }
body, button, input, select, textarea 		{ font-family: Outfit, sans-serif;}
p 											{ margin: 0 }
input:-webkit-autofill 						{ -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important; }
.m-0 										{ margin: 0 !important; }
.mb-0 										{ margin-bottom: 0; }
.mt-70 										{ margin-top: 50px; }
.mt-50 										{ margin-top: 50px; }
.text-center 								{ text-align: center; }
/*=================== CSS Reset Ends: ===================*/
.signin-one 								{ background: var(--secondary-bg-color); z-index: 1; height: 100%; }
.lab-corner .signin-one, .school-lab-login .signin-one { 
	 background-color: #2196f3;
    background-image: url("../resources/workspace/lmscommon/images/lms/labcorner/labcorner-bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	z-index: 1; height: 100%; 
}
.lab-corner .signin-one .school-info, 
.lab-corner .signin-one .moreInfo, 
.lab-corner .signin-one .nextLogo, 
.lab-corner .signin-one .spaceCenter, 
.lab-corner .signin-one .help-link, 
.lab-corner #chatBot,
.school-lab-login .signin-one .school-info, 
.school-lab-login .signin-one .moreInfo, 
.school-lab-login .signin-one .nextLogo, 
.school-lab-login .signin-one .spaceCenter, 
.school-lab-login .signin-one .help-link, 
.school-lab-login #chatBot,
.school-lab-login .signin-one .chooselanguage  {display:none;}
.lab-corner .signin-one .formMain, .school-lab-login .signin-one .formMain  {justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; max-width: 100%; flex: 1 1 100%; -webkit-flex: 1 1 100%; flex-direction: initial;}
.lab-corner .signin-one .formMain .formSection, .school-lab-login .signin-one .formMain .formSection {background: var(--secondary-bg-color);padding: 25px 20px 20px;border-radius:4px;}
.lab-corner .labcorner-logo, .school-lab-login .labcorner-logo {display: block; margin:0 auto 24px; font-size: 20px; font-weight: 700; text-transform: capitalize; text-align: center; line-height: 36px;}
.lab-corner .labcorner-logo md-icon, .school-lab-login .labcorner-logo md-icon {width: 36px; height:36px; line-height:36px; min-height:36px; min-width:36px; margin-right: 8px;}

.lab-corner .loginFooter, 
.school-lab-login .loginFooter {background-color: rgba(255,255,255,0.9);min-height: 56px;position: absolute;bottom: 0;left: 0;width: 100%;padding: 0 16px; z-index: 1;}
.lab-corner .loginFooter img, 
.school-lab-login .loginFooter img {display: block;}
.lab-corner .loginFooter .login-nlpLogo, 
.lab-corner .loginFooter .login-nextLogo, 
.school-lab-login .loginFooter .login-nlpLogo, 
.school-lab-login .loginFooter .login-nextLogo {padding: 0; margin: 0;} 
.lab-corner .loginFooter .login-nlpLogo img,
.school-lab-login .loginFooter .login-nlpLogo img {width: auto; height: 35px;}
.lab-corner .loginFooter .login-nextLogo img {width: auto; height: 46px;} 
.school-lab-login .schoolLogo img {height: 50px;}
.school-lab-login .schoolDetails h3 span 		{background: none;}
.school-lab-login .login-nlpLogo:hover {background: none !important;}


/* School Information */
.formMain 									{ padding: 15px 20px; position: relative; }
.school-info 								{ padding: 15px 20px; background: url('../images/loginBg.svg') no-repeat center; background-size: cover; border-right: solid 1px #F1F1F1; }
.school-info-nobg							{ background: none} 
.school-info h1 							{ font-size: 20px; line-height: 20px; text-align: center; font-weight: bold; margin: 10px 0 0 0; }
.school-info h1 span						{ background-color: white;}
.school-info .headding							{ font-size: 20px; line-height: 20px; text-align: center; font-weight: bold; margin: 10px 0 0 0; }
.school-info .headding span						{ background-color: white;}
.nextLogo img 								{ width: auto; height: 54px; display: block; }

.logo img 									{ width: auto; height: 54px; display: block; }
.schoolLogo 								{ margin-right: 10px; }
.schoolLogo img 							{ width: auto; height: 75px; display: block; }
.schoolDetails h3 							{ color: var(--primary-text-color); margin: 0; font-size: 20px; font-weight: bold;/*  min-width: 75%; max-width: 75%; max-height: 54px; */ }
.schoolDetails h3 span	 					{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;background-color: white; }
.languagePosition 							{ position: absolute; top: 22px; right: 20px; background-color: var(--secondary-bg-color);  }
.languagePosition .languageIcon				{ font-size: 16px; min-height: 16px; height: 16px;font-size: 16px; text-align: center; }
.mobileShow 								{ display: none; }
.desktopShow 								{ display: block; }
.logo a,
.nextLogo a 								{ display: inline-block; background: rgba(255,255,255,0.8); }
.schoolBuilding 							{ position: relative; margin: 20px 0; }
.login-bg 									{ width: 100%; height: 100%; background: url('../images/schoolBuilding.png'); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; left: 0; right: 0; margin: auto; }
.schoolAddress 								{ margin-bottom: 10px; }
.schoolAddress,
.moreInfo 									{ font-size: 12px; color: var(--primary-text-color); }
.schoolAddress a							{ color: var(--primary-text-color); } 
 
.footer_quote a.app-image 					{ margin: 0 4px 0 0; }
.footer_quote a.app-image img 				{ display: block; width: auto; height: 50px; }  
.beagle-block a								{ text-decoration:none; color: var(--primary-text-color); }
.beagle-logo img	 						{ width: auto; height: 54px; }

.formSection 								{ min-width: 390px; max-width: 390px; margin: 0 auto; } 
 md-radio-button .md-label 					{ font-size: 14px; color: var(--primary-text-color); margin-left: 0; line-height: 38px; }
.formMain md-input-container				{ margin: 2px 0 0 0; position: relative; }
.formMain md-input-container .md-input,
.formSection md-input-container.select-dropdown md-select .md-select-value { border: 1px solid #cacaca !important; padding-left: 8px; padding-bottom: 5px !important; border-radius: 8px; height: 40px; background: #FBFBFB; box-sizing: border-box; }

.formMain md-input-container .md-placeholder, 
.formMain md-input-container label:not(.md-no-float):not(.md-container-ignore) { transform: translate3d(8px,29px,0) scale(1); -webkit-transform: translate3d(8px,29px,0) scale(1); padding: 0 2px; width: auto;  color: var(--primary-text-color);opacity: 0.64; }
.formMain md-input-container.md-input-focused label:not(.md-no-float), 
.formMain md-input-container.md-input-has-placeholder label:not(.md-no-float), 
.formMain md-input-container.md-input-has-value label:not(.md-no-float) { transform: translate3d(8px,11px,0px) scale(.75); -webkit-transform: translate3d(8px,13px,0px) scale(.75); width: auto !important; background: #fbfbfb; opacity: 1; }

.formMain md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, 
.formMain md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after { color: var(--primary-text-color); }
.formMain md-input-container.md-default-theme label.md-required:after, 
.formMain md-input-container label.md-required:after { color: var(--error-text-color); }
/* ===== Role Section Starts: ===== */
.newUI md-radio-group 						{ margin: 10px 0; text-align: center; }
.newUI md-radio-group .md-container 		{ display: none; } 
.newUI .roleSelection md-radio-group 		{ text-align: center; }
.newUI md-radio-button .md-label span 		{ border: solid 2px #E5E6E6; width: 60px; height: 60px; margin-bottom: 5px; border-radius: 60px; display: flex; place-content: center; align-items: center;}
.newUI md-radio-group .md-label img 		{ width: 38px; height: auto; display: block; }
.newUI #loginForm md-radio-button .md-label span { width: 34px; height: 34px; border-radius:34px; margin-right: 10px; margin-bottom: 0; }
.newUI #loginForm md-radio-button .md-label span img { max-width: 22px; max-height: 22px; }
 
.newUI md-radio-button.md-checked .md-label span { border-color: var(--primary-bg-color); }
.newUI md-radio-button.md-checked .md-label { color: var(--trinity-text-color); }
.newUI md-radio-button .md-label 			{ font-size: 14px; font-weight: 600; color: #737373; margin-left: 0; line-height: 38px; }
/* ===== Role Section Ends: ===== */

/* ===== Help info Starts: ===== */
.help-password 								{ position: absolute; top: 2px; right: 2px; }
.help-password .md-button.md-icon-button md-icon { font-size: 18px; line-height: 24px; color: var(--primary-text-color); opacity: 0.64; }
.custom-menu-item 							{ width: 325px; padding: 15px; box-sizing: border-box; max-height: inherit;	}
.custom-menu-item md-menu-item				{ height: inherit; min-height: inherit; }
.custom-menu-item md-menu-item div 			{ padding: 0; }
.custom-menu-item md-menu-item div p, 
.custom-menu-item md-menu-item div ol 		{ font-size: 13px; margin:5px 0; color: var(--primary-text-color); }
.custom-menu-item md-menu-item div ol 		{ padding: 0 15px; margin-left: 5px; }
.custom-menu-item md-menu-item div p a		{ color: var(--trinity-text-color); text-decoration: none; }
.custom-menu-item md-menu-item .md-button 	{ margin: 4px 0 0 0px; background: none !important; min-width: 60px; color: var(--trinity-text-color); }  
.custom-menu-item md-menu-item div p .md-button {  min-height: inherit; height: inherit; line-height: inherit; width: auto; min-width: inherit;  font-weight: normal; text-transform: none; padding: 0; margin: 0; font-size: 13px; vertical-align: top; }
/* ===== Help info Ends: ===== */

/* ===== All Buttons starts: =====*/
.register-btn 								{ margin: 10px 0px; width: 100%; min-height: 40px; border-radius: 0px; font-size: 16px; line-height: 38px; cursor: pointer; border: none; background: #ddd; box-shadow: none; color: var(--primary-text-color); }
 /* Google & Microsoft buttons */			
/* .md-button.google-btn,.md-button.mictrosoft-btn	{ background-color: transparent !important; padding: 0;border-radius: 0;}
.md-button.google-btn img					{ width: auto;display: block;height: 46px;} 
.md-button.mictrosoft-btn img				{ display: block;height: 41px;width: auto;} */
 
.md-button.google-btn 						{ margin:8px 0; font-family: Outfit, sans-serif; box-shadow: 0px 2px 0px #e3e3e3; border: solid 1px #E4E4E4;text-transform: inherit; padding: 8px; line-height: inherit; height: 40px; font-size: 16px; font-weight: 500; border-radius: 0; color: rgba(0,0,0,0.54); display: flex; place-content: center; }
.md-button.microsoft-btn					{ margin:8px 0; font-family: 'Segoe UI'; padding: 8px; height: 40px; font-size: 16px; font-weight: bold; border-radius: 0; border: solid 1px #8c8c8c; line-height: 18px; display: flex; place-content: center;  text-transform: inherit; color: #5e5e5e; }
.md-button.google-btn img,.md-button.microsoft-btn img { width: 18px; margin-right: 12px; }

.md-button.sign-btn 						{ font-size: 16px; margin: 8px 0;  border-radius:0;background: var(--primary-bg-color) !important;box-shadow: 0px 2px 0px #e3e3e3;color: var(--secondary-text-color);border: none;margin-top:15px;text-transform: capitalize;width: 100%;min-height: 40px;line-height: 40px;}
/* .md-button.google-btn 						{ box-shadow: 0px 2px 0px #e3e3e3; color: var(--primary-text-color); border: solid 1px #E4E4E4; text-transform: capitalize; box-shadow: none;border: solid 1px #E4E4E4; } 
.md-button.google-btn img					{ width: 18px; vertical-align: middle; display: inline-block; margin-right: 24px }*/
.md-button.back-login 						{ color: var(--trinity-text-color); font-size: 14px; font-weight: bold; text-transform: capitalize; }
.md-button.forgotPasswordButton 			{ margin: 0; color: var(--trinity-text-color); text-transform: capitalize;}
/* ===== All Buttons Ends: =====*/
.signin-one h2 								{ text-align: center; font-weight: 600; margin:0 0 20px 0; font-size: 18px; }
.signin-one h3.roleTitle					{ margin: 5px 0 10px 0; text-align: center; font-weight: normal; font-size: 14px; line-height: 14px; }
#registrationButton h4						{ color: var(--primary-text-color); font-size: 14px; opacity: 0.64; font-weight: normal; }
p.or-label 									{ margin: 5px auto; text-transform: uppercase; font-size: 13px; text-align: center; }
p.or-label span 							{ position: relative; }
p.or-label span:before,
p.or-label span:after 						{ content: ""; width: 100px; height: 1px; border-bottom: 1px solid #E2E2E2; display: block; position: absolute; top: 8px; }
p.or-label span:before 						{ left: 30px; }
p.or-label span:after 						{ right: 30px; }
.forgot-block-new 							{ text-align: right }
.forgot_password 							{ font-size: 12px; color: var(--trinity-text-color); font-weight: bold; text-decoration: none; background: none; border: none; }
.help-link.lab-link							{ place-content: flex-start; }
.help-link									{ min-height: 40px;  max-width: 390px; margin: 0 auto; min-width: 390px; }
.help-link p								{ padding: 2px 0; font-size: 14px !important; color: var(--primary-text-color); } 
.help-link a 								{ text-decoration: none; margin-left: 3px; color: var(--trinity-text-color); font-size:14px;     text-transform: capitalize;} 
.help-link md-icon 							{ color: var(--primary-text-color); font-size: 16px; width: auto; height: auto; min-height: inherit; line-height: inherit; min-width: inherit; }
.passwordField .helpText 					{ position: absolute; top: 10px; right: 7px; width: 24px; cursor: pointer; }
.passwordField .helpText md-icon 			{ color: var(--primary-text-color); opacity: 0.64; }
.school-code  								{ margin-top: 5px; color: var(--primary-text-color); font-weight: bold; }
.school-code span							{ margin-right: 2px; opacity: 0.64; font-weight: normal; }
.animate.show-box 							{ background: rgba(1,1,1,.72) none repeat scroll 0 0; width: 280px; padding: 8px; position: absolute; right: 6px; top: 33px; z-index: 2; }
.animate.show-box::after 					{ border-left: 8px solid rgba(0, 0, 0, 0); border-bottom: 8px solid rgba(1, 1, 1, 0.72); border-right: 8px solid rgba(0, 0, 0, 0); content: ""; display: block; position: absolute; right: 0; top: -8px; }
.animate 									{ transition: all linear 0.3s; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; opacity: 1; padding: 5px 0; }
.animate.ng-hide 							{ opacity: 0; }
.animate.show-box.show-box1 				{ top: 0; }
.show-box p 								{ color: var(--secondary-text-color); font-size: 12px; }
.forgot-info p								{ font-size: 14px; padding-bottom: 10px; text-align: center;}

.rememberBlock 								{ margin-top: 5px; }
.otp-block 									{ margin-bottom:10px; width: 96px; height: 96px; background: #f5f5f5; border-radius: 50%;}
.md-button.resend-btn 						{ margin: 0; color: var(--trinity-text-color); line-height: inherit; min-height: inherit; }
.md-button.resend-btn:hover 				{ background: none; } 
.otp-box 									{ width:250px; margin:0 auto; }
 
.otp-data p									{ margin-bottom: 10px; text-align: center; font-size: 14px; }
.otp-data span 								{ margin-bottom: 10px; font-size: 12px; }
.info-block 								{ margin: 15px 0 0 0; }
.info-block span 							{ font-size: 12px; line-height: 12px; }

.latest-nlp .forgot-info 					{ margin-top: 50px; }
#changePasswordForm md-input-container.md-icon-right { padding-right: 0;}
#changePasswordForm md-input-container.md-icon-right .material-icons {cursor:pointer; color: var(--primary-text-color); opacity: 0.64; right:4px; }

/* Error messages */
.error-mgs 									{ color: var(--error-text-color); font-size: 12px; vertical-align: middle; display: inline-block; margin-top: 5px; }
.error-mgs .md-button 						{ line-height: inherit; height: inherit; min-height: inherit; width: inherit; min-width: inherit; margin: 0; font-size: 13px; font-weight: normal; text-transform: none; color: var(--trinity-text-color); vertical-align: middle; }
.error-mgs span 							{ margin-right: 5px; }  
.error-mgs small 							{ display: inline-block; vertical-align: middle; font-size: 12px; }
.error-mgs span md-icon.sm-icon				{ font-size: 18px; color: var(--error-text-color); line-height: inherit; height: inherit; min-height: inherit; width: inherit; min-width: inherit; }
.error-mgs .md-button:not([disabled]):hover { background-color: transparent; }
.login-error 								{ color: var(--error-text-color); text-align: center; margin-bottom: 5px; }
.otp-error,
.otp-error a 								{ color: var(--error-text-color); }
.cursor-pointer								{cursor:pointer !important;}
/* ChatBot CSS */
#chatBot									{ position: absolute; right: 0; bottom: 0; padding: 0 10px 10px 0; width: 68px; height: 74px; z-index: 3; }
#chatBot.openChatbot 						{ width: 100%; height: 100%; }
body[lang="ar"] #chatBot					{ padding-left:0; padding-right: 8px; }	

/*=================== Arabic Reset Starts: ===================*/
body[lang="ar"]								{ direction: rtl; }
body[lang="ar"] .school-info				{ border-right: none; border-left:solid 1px #F1F1F1;  }
body[lang="ar"] .schoolLogo					{ margin-right: 0; margin-left: 10px; }
body[lang="ar"] .footer_quote a.app-image	{ margin-right: 0; margin-left: 4px; }
body[lang="ar"].newUI md-radio-group md-radio-button { margin-right: 0; margin-left: 10px; }
body[lang="ar"].newUI #loginForm md-radio-group .md-label span { margin-right: 0; margin-left: 10px; }
body[lang="ar"] .help-password				{ right: auto; left: 2px; }
body[lang="ar"] .passwordField .helpText	{ right: auto; left: 7px; }
body[lang="ar"] .help-link a				{ margin-left: 0; margin-right: 3px; }
body[lang="ar"] .rememberBlock				{ min-height: 32px; }
body[lang="ar"] .error-mgs span 			{ margin-right: 0; margin-left: 5px; }
body[lang="ar"] .formMain md-input-container .md-input { padding-left: 2px; padding-right: 8px;}
.languagePosition md-input-container 		{ margin-top: 0 !important; }

body[lang="ar"] md-input-container label:not(.md-container-ignore) { left: auto; right: 0; }
body[lang="ar"] .formMain md-input-container .md-placeholder, 
body[lang="ar"] .formMain md-input-container label:not(.md-no-float):not(.md-container-ignore) { transform: translate3d(-8px,29px,0) scale(1); -webkit-transform: translate3d(-8px,29px,0) scale(1);  }
body[lang="ar"] .formMain md-input-container.md-input-focused label:not(.md-no-float), 
body[lang="ar"] .formMain md-input-container.md-input-has-placeholder label:not(.md-no-float), 
body[lang="ar"] .formMain md-input-container.md-input-has-value label:not(.md-no-float) { transform: translate3d(-8px,11px,0px) scale(.75); -webkit-transform: translate3d(-8px,13px,0px) scale(.75);  }
body[lang="ar"].latest-school-login md-input-container .md-placeholder, 
body[lang="ar"].latest-school-login md-input-container label:not(.md-no-float):not(.md-container-ignore) { -webkit-transform-origin: right top; transform-origin: right top;}
body[lang="ar"].latest-school-login md-radio-button .md-container, body[lang="ar"].latest-school-login md-checkbox .md-container { left: auto; right: 0;}
body[lang="ar"].latest-school-login md-checkbox .md-label { margin-left: 0; margin-right: 30px; }
body[lang="ar"] .languagePosition 			{ right: auto; left: 20px; }
body[lang="ar"] #changePasswordForm md-input-container.md-icon-right .material-icons { right: auto; left: 6px; }
body[lang="ar"] .animate.show-box::after	{ right: auto; left: 8px;}
body[lang="ar"] .md-button.google-btn img, body[lang="ar"] .md-button.microsoft-btn img {margin-right: 0; margin-left: 12px;}
/*=================== Arabic Reset Ends: ===================*/

/*=================== Loader CSS Starts: ===================*/
.loaderLayer 								{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; }
.ispinner 									{ position: relative; width: 20px; height: 20px; margin-right: 6px; transition: ease-in-out all 0.3s; } 
.ispinner .ispinner-blade 					{ position: absolute; top: 6.5px; left: 8.5px; width: 2.5px; height: 6.5px; background-color: var(--secondary-bg-color); border-radius: 1.25px; -webkit-animation: iSpinnerBlade 1s linear infinite; animation: iSpinnerBlade 1s linear infinite; will-change: opacity; } 
.ispinner .ispinner-blade:nth-child(1) 		{ -webkit-transform: rotate(45deg) translateY(-6.5px); transform: rotate(45deg) translateY(-6.5px); -webkit-animation-delay: -1.625s; animation-delay: -1.625s; } 
.ispinner .ispinner-blade:nth-child(2) 		{ -webkit-transform: rotate(90deg) translateY(-6.5px); transform: rotate(90deg) translateY(-6.5px); -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } 
.ispinner .ispinner-blade:nth-child(3) 		{ -webkit-transform: rotate(135deg) translateY(-6.5px); transform: rotate(135deg) translateY(-6.5px); -webkit-animation-delay: -1.375s; animation-delay: -1.375s; } 
.ispinner .ispinner-blade:nth-child(4) 		{ -webkit-transform: rotate(180deg) translateY(-6.5px); transform: rotate(180deg) translateY(-6.5px); -webkit-animation-delay: -1.25s; animation-delay: -1.25s; } 
.ispinner .ispinner-blade:nth-child(5) 		{ -webkit-transform: rotate(225deg) translateY(-6.5px); transform: rotate(225deg) translateY(-6.5px); -webkit-animation-delay: -1.125s; animation-delay: -1.125s; } 
.ispinner .ispinner-blade:nth-child(6) 		{ -webkit-transform: rotate(270deg) translateY(-6.5px); transform: rotate(270deg) translateY(-6.5px); -webkit-animation-delay: -1s; animation-delay: -1s; } 
.ispinner .ispinner-blade:nth-child(7) 		{ -webkit-transform: rotate(315deg) translateY(-6.5px); transform: rotate(315deg) translateY(-6.5px); -webkit-animation-delay: -0.875s; animation-delay: -0.875s; } 
.ispinner .ispinner-blade:nth-child(8) 		{ -webkit-transform: rotate(360deg) translateY(-6.5px); transform: rotate(360deg) translateY(-6.5px); -webkit-animation-delay: -0.75s; animation-delay: -0.75s; width: 2.8px }

@-webkit-keyframes iSpinnerBlade 			{ 0% { opacity: 0.85; } 50% { opacity: 0.25; } 100% { opacity: 0.25; } } 
@keyframes iSpinnerBlade 					{ 0% { opacity: 0.85; } 50% { opacity: 0.25; } 100% { opacity: 0.25; } }
/*=================== Loader CSS Ends: ===================*/

/*=================== Responsive CSS Starts: ===================*/
@media only screen and (min-width: 1500px)  { /* common 1600 and 1920 */
	.signin-one h2,
	.schoolDetails h3 						{ font-size: 22px; }
	.lab-corner .signin-one h2,
	.lab-corner .schoolDetails h3,
	.school-lab-login .signin-one h2,
	.school-lab-login .schoolDetails h3 			{ font-size: 20px; }
	
	
	.newUI #loginForm md-radio-group .md-label span	{ max-width: 40px; max-height: 40px; border-radius: 40px; }
	.newUI md-radio-button .md-label 		{ font-size: 18px; line-height: 40px; }
	.newUI md-radio-group 					{ margin: 20px 0; }
	/* .register-btn							{ font-size: 16px; height: 50px; line-height: 50px; } */
	.formMain md-input-container 			{ margin: 8px 0 0 0; }
	.custom-menu-item 						{ width: 420px; }
	
	.help-password							{ top:9px; }
	#changePasswordForm md-input-container.md-icon-right .material-icons { top: 17px; }
	.passwordField .helpText 				{ top: 18px; }
	.animate.show-box						{ top: 48px; }
	.formMain md-input-container .md-input,
	.formSection md-input-container.select-dropdown md-select .md-select-value	{ height: 55px; }
	.lab-corner .signin-one .formMain md-input-container .md-input,
	.lab-corner .signin-one .formSection md-input-container.select-dropdown md-select .md-select-value,
	.school-lab-login .signin-one .formMain md-input-container .md-input,
	.school-lab-login .signin-one .formSection md-input-container.select-dropdown md-select .md-select-value	{ height: 48px; }
	.formMain md-input-container label:not(.md-no-float):not(.md-container-ignore) { transform: translate3d(8px,38px,0) scale(1); -webkit-transform: translate3d(8px,37px,0) scale(1);  }
	.formMain md-input-container.md-input-focused label:not(.md-no-float), 
	.formMain md-input-container.md-input-has-placeholder label:not(.md-no-float), 
	.formMain md-input-container.md-input-has-value label:not(.md-no-float) { transform: translate3d(8px,11px,0px) scale(.75); -webkit-transform: translate3d(8px,13px,0px) scale(.75);  }	 
	body[lang="ar"] .formMain md-input-container label:not(.md-no-float):not(.md-container-ignore) { transform: translate3d(-8px,38px,0) scale(1); -webkit-transform: translate3d(-8px,37px,0) scale(1);  }
	body[lang="ar"] .formMain md-input-container.md-input-focused label:not(.md-no-float), 
	body[lang="ar"] .formMain md-input-container.md-input-has-placeholder label:not(.md-no-float), 
	body[lang="ar"] .formMain md-input-container.md-input-has-value label:not(.md-no-float) { transform: translate3d(-8px,11px,0px) scale(.75); -webkit-transform: translate3d(-8px,13px,0px) scale(.75);  }	 
}
@media only screen and (min-width: 1700px) 	{ /* Above 1920 screen */ 
	body									{ font-size: 18px; }
	.formSection							{ min-width: 600px; max-width: 600px; }
	.lab-corner .signin-one .formSection,
	.school-lab-login .signin-one .formSection	{ min-width: 434px; max-width: 434px; }
	
	.otp-data span,
	.error-mgs small,
	.forgot_password,
	.schoolAddress, 
	.md-button.back-login,
	.moreInfo								{ font-size: 16px; }
		
	.forgot-info p,
	.md-button.forgotPasswordButton,
	.otp-data p,
	p.or-label, 
	.custom-menu-item md-menu-item div p, 
	.custom-menu-item md-menu-item div ol,
	.custom-menu-item md-menu-item div p .md-button,
	.custom-menu-item md-menu-item .md-button { font-size: 18px; }
	.signin-one h3.roleTitle				{ font-size: 18px; line-height: 18px;}	
	
	.help-link 								{ max-width: 600px; min-width: 600px; }
}

@media only screen and (min-width: 1500px) and (max-width: 1699px) 	{ /* 1600 screen */
	body									{ font-size: 16px; }
	.formSection							{ min-width: 500px; max-width: 500px; }
	
	.otp-data span,
	.error-mgs small,
	.forgot_password,
	.schoolAddress, 
	.moreInfo								{ font-size: 14px; }
	
	.forgot-info p,
	.md-button.forgotPasswordButton,
	.otp-data p,
	.help-link p,
	p.or-label,
	.custom-menu-item md-menu-item div p, 
	.custom-menu-item md-menu-item div ol,
	.custom-menu-item md-menu-item div p .md-button,
	.custom-menu-item md-menu-item .md-button { font-size: 16px; }		
	.signin-one h3.roleTitle				{ font-size: 16px; line-height: 16px; margin-bottom: 20px; }	
	.help-link								{ max-width: 500px; min-width: 500px; }
}
@media only screen and (min-width: 960px) and (max-width: 1200px) 	{
	.help-link.lab-link						{ padding-right: 40px;}
}
@media only screen and (max-width: 1024px) 	{ /* iPad Landscape */
	.formSection 							{ min-width: 360px; max-width: 360px; }	
	.help-link								{ max-width: 360px; min-width: 360px; }
}

@media only screen and (max-width: 768px) 	{ /* iPad Portrait */	
	.formMain 								{ overflow: auto; order: -1; width: 100%; min-width: 100%; overflow: auto; min-height: calc(100% - 40px) !important; position: static; }
	.schoolLogo img							{ height: 54px;}
	.schoolDetails h3						{ font-size: 14px; }
	.logo a,
	.nextLogo a 							{ background: transparent; }
	 .signin-one 							{ position: relative;} 
	.school-info							{ padding:0 12px; min-height: 40px !important; background: #f0f2f5; place-content: center; }
	.school-info .headding,
	.school-info h1,
	.schoolAddress,
	.footer_quote p, 
	.schoolBuilding							{ display: none !important;} 
	.chooselanguage 						{ min-height: 54px; min-width: 100%; width: 100%; place-content: flex-end !important; }
	.schoolDetails 							{ position: absolute; left: 12px; top: 12px; width: calc(100% - 150px); z-index: 1; }
	body[lang="ar"] .schoolDetails			{ left: auto; right: 12px; }
	.footer_quote a.app-image img 			{ height: 24px; } 
	.logo									{ position: absolute; bottom: 3px; right: 115px; }
	body[lang="ar"] .logo				 	{ right: auto; left: 115px; }	 	
	.logo img,
	.beagle-logo img						{ height: 34px; }
	.footer_quote a.app-image				{ margin-bottom: 0; }
	.desktopShow 							{ display: none; }
	.mobileShow 							{ display: block; text-align: center; }	
	.custom-menu-item  						{ width: 280px; }
	.school-lab-login .schoolDetails			{position: static;}
}
@media only screen and (max-width: 1280px) and (max-height: 620px) 	{
	.signin-one h2							{ margin-bottom: 5px; font-size: 16px; }
	.newUI md-radio-group 					{ margin: 7px 0; }
	p.or-label 								{ margin: 0 auto;}
	.formMain md-input-container .md-errors-spacer 	{ min-height: 20px;}
	/* .register-btn 							{ margin: 7px 0px;line-height: 40px; height: 40px; } */
}
@media only screen and (max-width: 1023px) and (max-height: 450px) 	{ /* Tab View(962*433) */
	/* .login-info								{ overflow: auto;} */
	.formSection							{ min-width: 340px; max-width: 340px; overflow: auto; padding-right: 6px; }
	.formSection .formSection 				{ padding-right: 6px;}
}
@media (max-width: 767px)					{ /* Large Mobile View */
    .formMain 								{ padding: 12px; }
   	
	/* .register-btn							{ height: 38px; line-height: 38px; margin:7px 0; } */	
	.md-button.sign-btn						{ margin-top: 10px; }
	.signin-one h2							{ margin-bottom: 10px; font-size: 16px; }
	.rememberBlock 							{ margin-top: 0; }
	body[lang="ar"].newUI md-radio-group md-radio-button { margin-left: 5px; }
	.languagePosition 						{ right: 12px; }
	body[lang="ar"] .languagePosition 		{ right: auto; left: 12px; }
	
	.lab-corner .loginFooter .login-nlpLogo img,
	.school-lab-login .loginFooter .login-nlpLogo img {height: 30px;}
	.lab-corner .loginFooter .login-nextLogo img {height: 40px;} 
}

@media (max-width: 499px)					{ /* Mobile View */
	.formSection 							{ min-width: 100%; max-width: 100%; }	 
	.beagle-logo img						{ height: 26px; }
	.footer_quote a.app-image img 			{ height: 22px; }	 
	.logo									{ right: 90px; bottom: 5px; }
	body[lang="ar"] .logo				 	{ right: auto; left: 90px; }
	.logo img								{ height: 30px; }	
	.school-lab-login .schoolLogo img			{height: 30px;}
	.help-link								{ max-width: 100%; min-width: 100%; }
}

@media (max-width: 349px)					{ /* Mini Mobile View */ 
	 .school-info							{ padding: 0 8px; }
	 .schoolDetails h3 span					{ -webkit-line-clamp: 2;}
	 .signin-one h2							{ margin-bottom: 5px; font-size: 14px; }
	 .signin-one h3.roleTitle 				{ margin-bottom: 5px; }
	 /* .register-btn 							{ height: 30px; line-height: inherit; min-height: 30px; margin: 3px 0; font-size: 12px; } */
	 .formMain								{ padding: 8px; }
	.login-error							{ margin-bottom: 5px; }
	.newUI md-radio-group 					{ margin: 5px 0;}
	.md-button.sign-btn 					{ margin-top: 5px; }
	.help-link 								{ min-height: max-content; }
	.footer_quote a.app-image img 			{ height: 20px; }
	.beagle-logo img 						{ height: 24px; }
	.logo									{ right: 80px; }
	.logo img 								{ height: 26px; }
	.newUI #loginForm md-radio-group .md-label span 	{ margin-right: 5px; }
	body[lang="ar"].newUI #loginForm md-radio-group .md-label span { margin-right: 0; margin-left: 5px; }
	.rememberBlock 							{ min-height: 32px; }
	.formMain md-checkbox .md-label			{ margin-left: 22px;}
	.formMain md-checkbox .md-container		{ transform: translateY(-50%) scale(0.8);}
	body[lang="ar"] .formMain md-checkbox .md-label			{ margin-left: 0; margin-right: 22px; }
	.forgot_password 						{ padding: 0 4px; }
	.chooselanguage 						{ min-height: 45px; }
	.schoolLogo img 						{ height: 45px; }
	.languagePosition 						{ top: 16px; right: 8px; }
	body[lang="ar"] .languagePosition 		{ right: auto; left: 8px; }
}
@media only screen and (min-width: 1025px) and (max-width: 1130px) 	{
	.formSection 							{ min-width: 360px;max-width: 360px;}
}
@media (max-height: 600px) 					{
	.login-info 							{ overflow-y: auto;overflow-x: hidden;}
}
/*=================== Responsive CSS Ends: ===================*/