.eslo-container {
	max-width: 1600px;
	min-width: 600px;
	width: 100%;
	margin: 0 auto;
}

.eslo-header {
	background: url("images/bluewave.png") no-repeat center bottom;
	height: 130px;
	margin: 0 auto;
	background-size: 99.5% 75%;
}

.eslo-logo {
	float: left;
	top: 40%;
  	width: 76%;
	padding-left: 3%;
}

.eslo-selectlang {
	float: right;
	top: 70%;
  	width: 20%;
	padding-right: 3%;
	text-align: right;
}

.eslo-footer {
	background: url("images/orangewave.png") no-repeat center top;
	height: 115px;
	background-size: 99.5% 100%;
	position: relative;
}

.eslo-statement {
	position: absolute;
	bottom: 3px;
  	width: 94%;
	padding-left: 3%;
}

.eslo-center {
	width: 100%;
}

.eslo-center .eslo-center-left {
	float: left;
	width: 30%;;
	min-height: 500px;
}

.eslo-center .eslo-center-left .eslo-form {
	width: 70%;
	margin: 10vh auto 0 auto;
}

.eslo-center .eslo-center-middle {
	float: left;
	width: 40%;;
	height: 500px;
}

.eslo-center .eslo-center-middle .eslo-wheel {
	margin: 3vh auto 0 auto;
	width: 100%;
	max-width: 509px;
	max-height: 500px;;
}

.eslo-center .eslo-center-middle .eslo-wheel img {
	width: 100%;
}

.eslo-center .eslo-center-right {
	float: left;
	width: 30%;
	min-height: 500px;
}

.eslo-center .eslo-center-right .eslo-right-content {
	margin: 8vh auto 2vh auto;
}






.eslo-button-logon {
	border: 1px solid black;
}
.eslo-button-logon .ui-icon {
	background: url(images/LogonIcon.png) no-repeat 0 0;
}
.eslo-button-logon[class~="ui-button-text-icon-left"] .ui-button-text { 
	padding-left: 40px;
	text-align: left;
}
.eslo-button-logon .ui-button-icon-left {
	left: 14px;
}

.eslo-button-teacher {
	border: 1px solid black;
	background: #e76422;
}
.eslo-button-teacher .ui-icon {
	width: 14px;
	background: url(images/ResetPasswordButtonTeacherIcon.png) no-repeat 0 0;
}
.eslo-button-teacher[class~="ui-button-text-icon-left"] .ui-button-text { 
	padding-left: 38px;
	text-align: left;
}
.eslo-button-teacher .ui-button-icon-left {
	left: 14px;
}

.eslo-button-school {
	border: 1px solid black;
	background: #2264e7;
}
.eslo-button-school .ui-icon {
	width: 26px;
	background: url(images/ResetPasswordButtonSchoolIcon.png) no-repeat 0 0;
}
.eslo-button-school[class~="ui-button-text-icon-left"] .ui-button-text { 
	padding-left: 50px;;
	text-align: left;
}
.eslo-button-school .ui-button-icon-left {
	left: 14px;
}

.eslo-button-register {
	border: 1px solid black;
	background: rgb(0, 106, 105);
}
.eslo-button-register .ui-icon {
	width: 32px;
	background: url(images/RegisterIcon.png) no-repeat 0 0;
}
.eslo-button-register[class~="ui-button-text-icon-left"] .ui-button-text { 
	padding-left: 56px;;
	text-align: left;
}
.eslo-button-register .ui-button-icon-left {
	left: 14px;
}


.ui-inputfield {
	max-width: 85%;
}

ul {
	margin-top: 0;
	padding-left: 2em;
}

.ui-outputlabel-rfi {
	display: none;
}


body .ui-dialog .ui-dialog-content {
	background: #ffffff;
}

body .ui-dialog .ui-dialog-content iframe {
	border: 0;
}

body .ui-dialog .ui-dialog-titlebar-icon {
	background: inherit;
	border: 0;
}


/* for pop up dialog */

.es-dialog-medium {
	width: 50vw !important;
	height: 65vh !important;
}

.es-dialog-medium .es-dialog-scroll {
	width: 100%;
	height: 57vh;
}

.es-dialog-large {
	width: 70vw !important;
	height: 70vh !important;
}

.es-dialog-large .es-dialog-scroll {
	width: 100%;
	height: 60vh;
}

@media only screen and (max-width: 1600px) {
	.es-dialog-medium {
		width: 70vw !important;
	}

	.es-dialog-medium .es-dialog-scroll {
		width: 100%;
	}

	.es-dialog-large {
		width: 70vw !important;
	}

	.es-dialog-large .es-dialog-scroll {
		width: 100%;
	}
}


@media only screen and (max-height: 800px) {
	.es-dialog-medium {
		height: 80vh !important;
	}

	.es-dialog-medium .es-dialog-scroll {
		height: 67vh;
	}

	.es-dialog-large {
		height: 80vh !important;
	}

	.es-dialog-large .es-dialog-scroll {
		height: 67vh;
	}
}






@media only screen and (min-height: 900px) {
	.eslo-container {	padding-top: 1.5%;	}
	.eslo-center .eslo-center-left { min-height: 600px; }
	.eslo-center .eslo-center-middle {	height: 600px;	}
	.eslo-center .eslo-center-middle .eslo-wheel {	top: 50px;	}
	.eslo-center .eslo-center-right {	min-height: 600px;	}
}


@media only screen and (max-width: 1400px) and (min-width: 1201px) {
	.eslo-center .eslo-center-left { width: 25%;	min-height: 450px; }
	.eslo-center .eslo-center-left .eslo-form { width: 80%;	left: 10%;	margin: 5vh auto 0 auto;	}
	.eslo-center .eslo-center-middle {	width: 40%;	height: 450px;	}	
	.eslo-center .eslo-center-middle .eslo-wheel {	max-width: 450px;	margin: 1vh auto 0 auto;	}
	.eslo-center .eslo-center-right {	width: 35%;	min-height: 450px;	}	
	.eslo-center .eslo-center-right .eslo-right-content {	margin: 2vh auto 0 auto;	}
}


@media only screen and (max-width: 1200px) {
	.eslo-center .eslo-center-left {	width: 40%;	min-height: 550px;	}	
	.eslo-center .eslo-center-middle {	width: 60%;	min-height: 550px;	}
	.eslo-center .eslo-center-right {	width: 100%;	min-height: 400px;	}
	.eslo-center .eslo-center-right .eslo-right-content .eslo-right-part1 {	float: right;	width: 55%;	}
	.eslo-center .eslo-center-right .eslo-right-content .eslo-right-part2 {	float: left;	width: 45%;	}
}

@media only screen and (max-width: 800px) {
	.eslo-center .eslo-center-left {	width: 100%;	}
	.eslo-center .eslo-center-middle {	width: 100%;	}
	.eslo-center .eslo-center-right {	width: 100%;	min-height: 580px;	}
	.eslo-center .eslo-center-right .eslo-right-content .eslo-right-part1 {	float: left;	width: 100%;	}
	.eslo-center .eslo-center-right .eslo-right-content .eslo-right-part2 {	float: right;	width: 100%;	}	
}