/* CSS Document */
@font-face{
    font-family:'asafeerFont';
    src: url(HacenAlgeria.eot);
    src: url(HacenAlgeria.eot#) format('eot'), 
    url(HacenAlgeria.woff) format('woff'), 
    url(HacenAlgeria.ttf') format('truetype'),
    url(HacenAlgeria.svg#HacenAlgeria) format('svg');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}
@font-face{
    font-family:'asafeerEn';
    src: url(Poppins-Medium.eot);
    src: url(Poppins-Medium.eot#) format('eot'), 
    url(Poppins-Medium.woff) format('woff'), 
    url(Poppins-Medium.ttf) format('truetype');
    font-weight: normal;
    font-style:normal;
	font-display:swap;
}
*,*:focus,*:hover{
    outline:none;
}
	#header{display:none;}
	::placeholder{color:#d3d3d3;}
	.right{float:right;}
	.left{float:left;}
	.english{direction:ltr;}
	.ui-dialog .ui-dialog-title{float:right !important;right:.3em;white-space: pre-wrap;}
	.ui-dialog .ui-dialog-titlebar-close{left:.3em !important;right:auto !important;}
	.ui-dialog .ui-dialog-titlebar {line-height: 1.2em;}
	.ui-dialog {float:right !important;height:100%;width:550px; max-height: 600px!important;top:10% !important;z-index: 999;overflow-y: auto;}
	.ui-widget-overlay { background: #000; opacity: .8;}
	 .ui-widget .ui-widget{text-indent: -9999999px; background: #e6e6e6 url('../images/school/ui-icons_888888_256x240.png');background-position: -96px -128px; padding: 0.4em;left:.3em; right: auto ;} 
	 .ui-widget-header .ui-icon{display: none;}
	
body{margin:0;padding:0;background-color:#3d8700;font-family:AsafeerFont,AsafeerEn;color:#55575e;overflow: hidden;}
label,input,div,p{font-family:asafeerFont,asafeerEn;}
body.blue{background-color:#01938b !important;}
body.blue div.colorNote, body.blue input.submitbutton{background-color:#00baaf !important;}
body.blue div.colorNote{background-image:url('../images/parentbg.webp');}	
body.blue .tabs div.active:before,body.blue img.userpic:hover{border-color: #00baaf !important;}
body.purple{background-color:#6927a3 !important;}
body.purple div.colorNote, body.purple input.submitbutton{background-color:#a74fee !important;}
body.purple div.colorNote{background-image:url('../images/teacherbg.webp');}	
body.purple .tabs div.active:before,body.purple img.userpic:hover{border-color: #a74fee !important;}
.colorNote{height:100%;width:40%;background-color:#58ae02;float:left;color:#fff;font-family:asafeerEn;position:relative;background-image:url('../images/studentbg.webp');text-align:center;}
.lgn-btn{
	cursor:pointer;
	background-position:right;
	width:295px;position:fixed;right:2em;border:3px solid #66cc00;border-radius:5px 5px 5px 5px;padding:0.2em;background-color:#fff;
}
a#forgot:hover{text-decoration: underline !important;}
.lgn-btn a span{
	font-size:1.2em;
	font-weight:bolder;
}
.error{
	color:#d44a32;
	text-align:center;
	padding:1em;
	line-height:1.2em;
	width:100%;
	box-sizing:border-box;
	margin:1em;
	float:right;
}
.info{color:#3d8700;text-align:center;padding:1em;line-height:1.2em;width:100%;box-sizing:border-box;margin:1em;float:right;font-weight:bolder;}
	
input[type="checkbox"]{margin:1.5em 0 1.5em 0.5em;}
img.userpic {width: 80px;height: 80px;border-radius: 50px;border: 3px solid #fff;box-shadow:0px 0px 10px rgba(0,0,0,0.5);}
.imagestu { margin: auto; width: 100px; height: 100px;text-align: center;display: inline-block;}

button#newstudentlogin {position: relative;display: inline-block;margin: 2.5vw; padding: 0.5vw;}
#rememberstudents{display: inline-block; position: relative;margin: auto;width:100%;padding: 1vh 0 0 0;}

.subcontainer {margin: auto;text-align: center;}
#loginpanel{
	border-radius: 1vw;
	margin: 5vh auto;
	width: 75%;
	height: 90vh;
	background-color: #fff;
	box-shadow: 0px 10px 15px rgba(0,0,0,0.25)!important;
}
.userpic:hover{border:3px solid #58ae02;cursor: pointer;}

.formcontainer{float:right;padding:2% 2em;width:60%;box-sizing:border-box;}
.tabs{display: grid;grid-template-columns: repeat(3, 30%);grid-column-gap: 2vw;margin: 1% auto 2% auto;width:100%;position:relative;}
.tabs div{float:left;text-align:center;font-size: 1.5vw;font-family: asafeerEn;position: relative;cursor:pointer;color:#b4b4b4;}
.formcontainer input[type="text"],.formcontainer input[type="password"]{border-radius:2em;margin:0.5vh 0 1vh 0;border:2px solid #d9d9d9;padding:1em;font-size:1vw;width:100%;background: #fff;font-family: asafeerEn,fontAwesome;direction:ltr;text-align:left;}
.submitbutton{color:#fff;border-radius:2em;padding:0.5em;border:0;font-size:1.3vw;background-color:#58ae02;width:200px;margin:1vh auto 0 auto;
display: block;cursor:pointer;}
form{width: 60%;margin: 1em auto;}
.tabs div.active{color:#63636c;}
.tabs div.active:before {
	border: 4px solid #77B52E;
	border-radius: 4px;
	content: " ";
	position: absolute;
	width: 90%;
	box-sizing: border-box;
	right: 5%;
	bottom: -60%;
}
.tabs:before{border: 4px solid #f0f0f0;
	border-radius: 4px;
	content: " ";
	position: absolute;
	width: 90%;
	box-sizing: border-box;
	right: 5%;
	bottom: -60%;
}
.apps{text-align:center;position: absolute;width: 100%;bottom: 0;padding:1vw;box-sizing: border-box;}
.apps button{
	background-color: transparent;
	border: 2px solid #fff;
	color: #fff;
	border-radius: 1.5vw;
	font-size: 1.2vw;
	margin: 0.5vw;
	padding: 0.4vw 2vw;
	cursor: pointer;
	line-height: 2vw;
}
.apps button i {float: left;margin-right: 1vw;line-height: 2.2vw;}
@media (min-width:922px){
	img.mascot{max-width:100%;max-height:60vh;}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
	body,button,input[type="submit"]{-webkit-appearance: none;}
	#header{display:none;}
	.colorNote{height:30%;width:100%;border-top-left-radius: 1em;border-top-right-radius:1em;}
	#loginpanel{border-radius: 1em;max-height:none;}
	.formcontainer{width:100%;}
	.tabs div {font-size:1.5em;}
	input[type="checkbox"]{margin:1.5em 0 1.5em 0.5em;}
	img.mascot{display:none;}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	.desktop{display: none;}
	body,button,input[type="submit"]{-webkit-appearance: none;}
	.colorNote{height:8em;width:100%;border-top-left-radius:1em;border-top-right-radius:1em;}
	.colorNote h1{font-size: 3em;}
	#loginpanel{width:90%;margin: 12vh auto 2vh auto;height:75vh;}
	.apps{font-size: 1.8em; display:none;}
	.apps button{font-size:1em;line-height:1.5em;border-radius:1.5em;}
	.apps button i{line-height:1.5em;}
	.tabs div {font-size: 1.8em;}
	form{width:85%;font-size:1.8em;}
	.formcontainer input[type="text"], .formcontainer input[type="password"] {font-size:1em;box-sizing: border-box;border: 3px solid #d9d9d9;}
	input[type="checkbox"]{margin: 0 0.5em;zoom: 2.5;}
	.submitbutton{font-size:1.3em;width:100%;}
	img.userpic{width:150px;height:150px;border-radius:50%;}
	.imagestu{width:170px;height:170px;}
	.remember{margin:1em 0;}
	#header{background-color:#fff;color:#77b52e;font-size:4.5em;padding: 0.5em 0.5em 0.2em 0.5em;display: block;position: fixed;top: 0;width: 100%;z-index: 3;height: 10vh;box-sizing: border-box;box-shadow: 5px 0 10px rgba(0,0,0,0.2);}
	#header img{width: 250px;margin: 0 auto;display: block;}
	.error{font-size: 2em;}
	img.mascot{display:none;}
	.info{font-size:2em;}
}