* {
	margin:auto;
	padding:0px;
}
html, body
{
    background-image:url('/adfs/portal/images/clo_bg.png');
    height:100%;
    width:100%;
    /*background-color:#ffffff;*/
    color:#000000;
    font-weight:normal;
    font-family:"Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;
    min-width:500px;
    -ms-overflow-style:-ms-autohiding-scrollbar;
}

body {
    font-size: 0.9em;
    display: none;		   
}

#companyLogo{
    width: 100% !Important;
    height: 100% !Important;
}

#noScript { margin:16px; color:Black; }

:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}
:lang(zh){font-family:微软雅黑;}

@-ms-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-webkit-viewport { width: device-width;  }
@viewport { width: device-width; }

/* Theme layout styles */

#fullPage
{
    width:100%;
    height:100%;
    background-color:inherit;
}
#brandingWrapper
{
    	background-color:#4488dd;
	width:100%;
	/*height:30px;*/
	/*display:none;*/
}
#branding
{       
    /* A background image will be added to the #branding element at run-time once the illustration image is configured in the theme. 
       Recommended image dimensions: 1420x1200 pixels, JPG or PNG, 200 kB average, 500 kB maximum. */
    height:100%;
    margin-right:500px; margin-left:0px;
    background-color:inherit;
    background-repeat: no-repeat;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}
#contentWrapper
{
    position:relative;
    width:100%;    
    height:100%;
    overflow:auto;
    /*background-color:#ffffff;*/ /* for IE7 */
    margin-left:0px; margin-right:0px; 
}
#content
{
    min-height:50%;
    /*width:1280px;*/
    height: auto !important;
    /*margin:0 auto 0 auto !important;*/
    /*margin-left: 8% !important;*/
    /*padding:0px 80px 0px 80px;*/
    max-width:1024px;
    padding-left:5%;
}
#header
{
    font-size:2em;
    font-weight:lighter;
    font-family:"Segoe UI Light" , "Segoe" , "SegoeUI-Light-final", Tahoma, Helvetica, Arial, sans-serif;
    padding-top: 90px;
    margin-bottom:60px;
    min-height:100px;
    overflow:hidden;
}
#header img
{
    /* Logo image recommended dimension: 60x60 (square) or 350X35 (elongated), 4 kB average, 10 kB maximum. Transparent PNG strongly recommended. */
    width:auto;
    height:auto;
    max-width:100%;
	/*margin-left:-10px;*/
}
#workArea, #header
{
    word-wrap:break-word;
    width:420px;
}

#workArea
{
    margin-bottom:90px;
}
#footerPlaceholder
{
    /*height:40px;*/
}
#footer
{
    height:40px;
    padding:10px 0px 0px 50px;
    position:relative;
    color:#666666;
    font-size:0.78em;
	text-align:center;
}
#footerLinks
{
    float:none;
}
#copyright {color:#696969;}
.pageLink { color:#666666;
}

#teacherAccount{
	padding-top:20px;
    }
#schoolAccount{
	margin-top:20px;
	/*background:#c6e6ec;
	border-radius:5px;
	box-shadow:1px 3px 6px 2px #ccc;*/
        width:375px;
        padding:5px 5px 5px 5px;
		margin-left:0px;
    }
#notification{
	margin-left:30px !important;
	margin-top:20px;
	background:#fff3e6;
	color:#cd6108;
	border-radius:5px;
        font-size:12px;
        width:400px;
        padding:15px 15px 15px 15px;
		margin-left:0px;
    }
#link:hover{
	cursor: pointer;
}
#secruityGuidelines{
	margin-left:0px;
}

#loading-img {
    background: url(https://clo.edb.gov.hk/images/loading.gif) center center no-repeat;
    height: 100%;
    z-index: 20;
}
#overlay {
    background: #e9e9e9;
    display:none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}
.expiredTimeout{
	font-weight:bold;
	font-size:14px;
	color:red;
}
/* Common content styles */

.clear {clear:both;}
.float { float:left; } 
.floatReverse { float:right; } 
.indent { margin-left:16px; } 
.indentNonCollapsible { padding-left:16px; }
.hidden {display:none;}
.notHidden {display:inherit;}
.error { color:#c85305; 
    //-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
    //animation: mymove 1s ;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    //20% {font-size: 20px;}
}

/* Standard syntax */
@keyframes mymove {
    20% {font-size: 20px;}
}
.actionLink { margin-bottom:8px; display:block; }
a
{
    color:#2672ec;
    text-decoration:none;
    background-color:transparent;
}
ul { list-style-type: disc; }
ul,ol,dd { padding: 0 0 0 16px; }
h1,h2,h3,h4,h5,label { margin-bottom: 8px; }
.submitMargin { margin-top:10px; margin-bottom:10px; }
.topFieldMargin { margin-top:8px; }
.fieldMargin { margin-bottom:8px; }
.groupMargin { margin-bottom:30px; } 
.sectionMargin { margin-bottom:64px; }
.block { display: block; }
.autoWidth { width:auto; }
.fullWidth { width:342px; }
.fullWidthIndent { width:326px; }
.smallTopSpacing { margin-top:15px; }
.mediumTopSpacing { margin-top:25px; }
.largeTopSpacing { margin-top:35px; }
.smallBottomSpacing { margin-bottom:5px; }
.mediumBottomSpacing { margin-bottom:15px; }
.largeBottomSpacing  { margin-bottom:25px; }
input
{
    max-width:100%; 
    font-family:inherit;
    margin-bottom:8px;
}
input[type="radio"], input[type="checkbox"] {
    vertical-align:middle;
    margin-bottom: 0px;
}
span.submit, input[type="submit"]
{
    border:none;
    background-color:rgb(38, 114, 236);
	/*background-color:rgb(13, 142, 99);*/
    min-width:80px;
    width:auto;
    height:30px;
    padding:4px 20px 6px 20px;
    border-style:solid;
    border-width:1px;
    transition:background 0s;
    color:rgb(255, 255, 255);
    cursor:pointer;
    margin-bottom:8px;
	border-radius: 5px;
	margin-left:125px;
    
    -ms-user-select:none;
    -moz-transition:background 0s;
    -webkit-transition:background 0s;
    -o-transition:background 0s;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select:none;
}

span.submit1, input[type="submit"]
{
    border:none;
    background-color:#ff9900;
	/*background-color:rgb(13, 142, 99);*/
    min-width:80px;
    width:auto;
    height:30px;
    padding:4px 20px 6px 20px;
    border-style:solid;
    border-width:1px;
    transition:background 0s;
    color:rgb(255, 255, 255);
    cursor:pointer;
    margin-bottom:8px;
	border-radius: 5px;

    
    -ms-user-select:none;
    -moz-transition:background 0s;
    -webkit-transition:background 0s;
    -o-transition:background 0s;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select:none;
}
span.submit2, input[type="submit"]
{
    border:none;
    background-color:rgb(38, 114, 236);
	/*background-color:rgb(13, 142, 99);*/
    min-width:80px;
    width:auto;
    height:30px;
    padding:4px 20px 6px 20px;
    /* border-style:solid;
    border-width:1px; */
    transition:background 0s;
    color:rgb(255, 255, 255);
    cursor:pointer;
    margin-bottom:8px;
	border-radius: 5px;

    
    -ms-user-select:none;
    -moz-transition:background 0s;
    -webkit-transition:background 0s;
    -o-transition:background 0s;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select:none;
}
span.submit3, input[type="submit"]
{
    font-size:12px;
    border:none;
    background-color:#009933;
	/*background-color:rgb(13, 142, 99);*/
    min-width:80px;
    width:auto;
    height:30px;
    padding:4px 10px 6px 10px;
    /* border-style:solid;
    border-width:1px; */
    transition:background 0s;
    color:rgb(255, 255, 255);
    cursor:pointer;
    margin-bottom:8px;
	border-radius: 5px;

    
    -ms-user-select:none;
    -moz-transition:background 0s;
    -webkit-transition:background 0s;
    -o-transition:background 0s;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select:none;
}
input[type="submit"]:hover,span.submit:hover
{
    /*background: rgb(212, 227, 251);*/
	background: rgb(60, 249, 167);
}
input.text{
    height:28px;
    padding:0px 3px 0px 3px ;
    border:solid 1px #BABABA;
    font-size:1.0em;
}
input.text:focus
{
  border: 1px solid #6B6B6B;
}
select
{
    height:28px;
    min-width:60px;
    max-width:100%; 
    margin-bottom:8px;

    white-space:nowrap;
    overflow:hidden;
    box-shadow:none;
    padding:2px;
    font-family:inherit;
}
h1, .giantText
{
   font-size:2.0em; 
   font-weight:lighter;
}          
h2, .bigText
{
   font-size:1.33em;
   font-weight:lighter;
}
h3, .normalText
{
    font-size:1.0em;
    font-weight:normal;
}
h4, .smallText
{
    font-size:0.9em;
    font-weight:normal;
}
h5, .tinyText
{
    font-size:0.8em;
    font-weight:normal;
}
.hint
{
    color:#999999;
}
.emphasis
{
    font-weight:700;
    color:#2F2F2F;
} 
.smallIcon
{
    height:20px;
    padding-right:12px;
    vertical-align:middle;
}
.largeIcon
{
    height:48px;
    /* width:48px; */
    vertical-align:middle;
}
.largeTextNoWrap
{
    height:48px;
    display:table-cell; /* needed when in float*/
    vertical-align:middle;
    white-space:nowrap;
    font-size:1.2em;
}
.idp
{
    height:48px;
    clear:both;
    padding:8px;
    overflow:hidden;
}
.idp:hover 
{
    background-color:#cccccc;
}
.idpDescription
{
    width:80%;
}
#forgetPwdBtn{
	width:200px;
	text-align:right;
	margin-left:150px;
}
#homeLink{
	margin-right:10px;
	color:#666666;
}
#cloLogout{
 	margin-top:20px;
}
#headerChi{
	font-size:24px;
	letter-spacing: 2px;
}
#selfReg{
	margin-top:10px;
}
#forNonTeaching{
	width:380px;
	font-size:12.5px;
	font-family: "Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;
	padding-top:5px;
}
#regNewSch{
	padding-top:15px;
	margin-bottom:10px;
}
#privacy{
	padding-bottom:5px;
}
#sideInfo{
	padding: 0 2em;
	padding-bottom:35px;
}
#sideInfo2{
	padding-top:5px;
}
#sideInfo3{
	padding: 0px 2em;
}
#noticeIcon{
	float:left;
	margin-left:-5px;
	margin-top:-10px;
	margin-right:5px;
}
#noticeTitle{
	text-align:justify;
}

#privacy {
 /*text-decoration: underline;*/
}
#cloLogoutNotice{
 	text-align: center; 
	color: dodgerblue; 
	font-weight: bold;
	margin-top:20px;
}
#cloLogoutMsg{
 	margin-top:20px;
	margin-bottom:10px;
	font-size:14px;
}

.cloBtn{
    margin-top:10px;
    margin-left:10px;
    font-size:12px;
    border:none;
    background-color:rgb(38, 114, 236);
    min-width:80px;
    width:auto;
    height:30px;
    padding:4px 10px 6px 10px;
    /* border-style:solid;
    border-width:1px; */
    transition:background 0s;
    color:rgb(255, 255, 255);
    cursor:pointer;
    margin-bottom:8px;
	border-radius: 5px;

    
    -ms-user-select:none;
    -moz-transition:background 0s;
    -webkit-transition:background 0s;
    -o-transition:background 0s;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select:none;
}

/*  iAM Smart CSS - start  */
.iAmSmartLoginDarkBtn {
    background-color: #2b7367;
    border: 1px solid #2b7367;
    color: #FFFFFF;
    padding: 4.375px 8.75px 4.375px 27.75px;
    cursor: pointer;
    outline: none;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans SC', Arial, Helvetica, sans-serif;
    margin-left: 0px;
    background-image: url(/adfs/portal/images/icon-dark.png);
    background-position: 5px;
    background-repeat: no-repeat;
}

.iAmSmartLoginDarkBtn:hover, .iAmSmartLoginDarkBtn:focus {
    background-color: #FFFFFF;
    border: 1px solid #2b7367;
    color: #2b7367;
    padding: 4.375px 8.75px 4.375px 27.75px;
    cursor: pointer;
    outline: none;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans SC', Arial, Helvetica, sans-serif;
    background-image: url(/adfs/portal/images/icon-light.png);
}

.buttontext {
    font-size: 12px;
    padding-left: 8.75px;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
} 

/*#iAmSmartDiv {
    display: none;
}*/

/*  iAM Smart CSS - end  */
/* Form factor: intermediate height layout. Reduce space of the header. */
@media only screen and (min-width: 796px) {
    #header {
        padding-top: 20px;
        min-height:0px;
        overflow: hidden;
		margin:0px 0px !important;
    }
    #workArea{
        margin-bottom:60px; 
		margin:0px 0px !important;
    }
	.submitMargin{
		margin-top:10px;
		margin-bottom:10px;
	}
	span.submit, input[type="submit"]{
		margin-left:0px;
	}
	
	.A{
	float:right;
	margin-right:80px;
	}

	.eslo-center-right{
		
	min-height:420px;
	width:490px;
	margin-top:-390px!important;
	margin-left:130%;
	text-align:justify;
	font-family:"Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;
	}

	#forgetPwdBtn{
	width:200px;
	text-align:right;
	margin-left:150px;
	}
}

/* Form factor: intermediate layout (WAB in non-snapped view falls in here) */
@media only screen and (max-width: 1024px){
    body {
        font-size: 0.8em;
    }

    #content {
        margin-left:-2% !important;
    }

    #content, #footer {
        width:auto;
        margin-right:33px;
        margin-left:25px;
    }

    #header {
        /*width: auto;*/
    }

    span.submit, input[type="submit"] {
        font-size: 0.9em;
    }

    /*.fullWidth{
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }*/

    .fullWidthIndent {
        width: 85%;
    }

    .idpDescription {
        width:70%;
    }
    .eslo-center-right{
	min-height:470px;
	width:490px;
	margin-top:-380px!important;
	margin-left:120%;
	text-align:justify;
	font-family:"Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;
    }
    #forgetPwdBtn{
	width:180px;
	text-align:right;
	margin-left:160px;
    }
}
/* Form factor: snapped WAB (for WAB to work in snapped view, the content wrapper width has to be set to 260px) */
@media only screen and (max-width:768px)
{
    body {
        font-size: 0.8em;
    }

    #content, #footer {
        width:auto;
        margin-right:33px;
        margin-left:25px;
    }

    #header {
        /*width: auto;*/
    }

    span.submit, input[type="submit"] {
        font-size: 0.9em;
    }

    .fullWidth{
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .fullWidthIndent {
        width: 85%;
    }

    .idpDescription {
        width:70%;
    }
	.eslo-center-right{
		margin-top:50px!important;
		margin-left:-50px;
		width:440px;
		text-align:justify;
	}
}