@charset "utf-8";
*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}
html, body{
    height: 100%;
    padding: 0;
    overflow:auto;
	font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
      font-size: unset;
}

.forgetpw_content input{
    width: 100%;
    height: 2.5em;
    margin: 0.5em 0;
    padding-left: 10px;
    border: none;
    border: solid 1px #ccc;
    border-radius: 0.5em;
    font-size: 1em;
}

canvas#nokey{
    background-color: transparent;
	opacity: 0.65;
    position: absolute;
	z-index:-1;
	width:100%;
    height:100%;
}

body{
        margin:0;
        /*background-image: url("../images/edcitylogin_bg.jpg");*/
        background-repeat: no-repeat;
        background-attachment: fixed;
		background-size:cover;
        background-position:  top right;
        background-size: 100% auto;
        min-width: 320px; /*Support very small phone*/
        min-height: 500px;
		font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}

input[type=button] {
  font-family:"Microsoft JhengHei","微軟正黑體","Microsoft JhengHei","Tahoma","Verdana","Arial","sans-serif";
}

.language_select{
    position:relative;
    width: 90%;
    max-width: 1600px;
    text-align: right;
    /* padding-bottom:15px; */
    font-size:1.2em;
    font-weight:bold;
    top: 25px;
    z-index:5000;
}

#login_form{
        margin: 0;
}

.container {
        min-height: 500px;
        height: 100%;
        bottom: 1em;
        right: 1em;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        max-height: 650px;
}

.forgetlabel{
		float:right;
		padding: 10px 0px 0px 0px;
		font-size: 0.9em;
}

.warning_message{
	color:red;
	font-size:0.8em;
	display:block;
	height:auto;
	padding: 8px 0 14px;
}

.content{
      	min-height: 400px;
}
/*.footer{
        order:-1; (/*)put footer at bottom)
        background-image: linear-gradient(to right, #00a2af, #0081c4, #00a2af, #00bc73, #99cb28);
        height: 6em;
      }
*/
       .footer{
        order:-1; /*put footer at bottom*/
        height: 5em;}

      .footer-inner {
      	font-family:sans-serif;
      	padding: 1em 0;
      	color: #000;
      	margin: 0;

      }

      .footer-inner .footer-inner-button{
        padding-right: 1em;
        padding-top: 0.5em;
        display: flex;
      }

       .footer-inner .footer-inner-button > a{
        padding-right: 0.2em;
        margin-right: 0.4em;
        width: 32px;
        height: 32px;
        opacity: 1;
      }

      .footer-inner .footer-inner-button > a.icon-facebook-120 {
          background: url(../frontpage/images/props/logo_facebook_32.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-facebook-120:hover {
          background: url(../frontpage/images/props/logo_facebook_32_dim.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-yahoo-120 {
          background: url(../frontpage/images/props/logo_yahoo_32.png) no-repeat;
      }
       .footer-inner .footer-inner-button > a.icon-yahoo-120:hover {
          background: url(../frontpage/images/props/logo_yahoo_32_dim.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-google-120 {
          background: url(../frontpage/images/props/logo_google_32.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-google-120:hover {
          background: url(../frontpage/images/props/logo_google_32_dim.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-winlive-120 {
          background: url(../frontpage/images/props/logo_winlive_32.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-winlive-120:hover {
          background: url(../frontpage/images/props/logo_winlive_32_dim.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-apple-120 {
          background: url(../frontpage/images/props/logo_apple_32.png) no-repeat;
      }
      .footer-inner .footer-inner-button > a.icon-apple-120:hover {
          background: url(../frontpage/images/props/logo_apple_32_dim.png) no-repeat;
      }

      .content{
        display: flex;
        flex-direction: column;
      }

      .centre_logo{
        text-align: center;
        display:flex;
        justify-content:center;
     }

      .centre_logo .centre_logo_img{
        width: 12vh;
        height: 12vh;
        min-height: 200px;
        min-width: 200px;
      }
      .content .login-panel {
        display:flex;
        justify-content:center;
        /*height: 40%!important;*/
        height: 38vh;
        min-height: 400px;
      }

      .content .login-panel > div{
        margin-left: 1.5vw;
        margin-right: 1.5vw;
      }

      .panel-title{
		  font-weight: bold;
		  font-size: 1.5em;
		  padding: 10px 0 10px;
	  }

      .content .login-panel .login-panel-userpass{
      /*padding-top: 1em;*/
       display:flex;
       flex-direction: column;
       max-width: 18em;
       width: 42%;
       min-height: 8em;

      }

      .content .login-panel .login-panel-userpass .login-panel-userpass-input{
        width: 100%;
        height: 2.5em;
        margin: 0.5em 0;
        padding-left: 10px;
        border: none;
        border:solid 1px #ccc;
        border-radius: 0.5em;
        font-size: 1em;

      }

       .content .login-panel .login-panel-userpass .login-panel-userpass-input:hover,
       .forgetpw_content:hover input{
        box-shadow:0px 0px 5px 0px #7ec7e5;
      }

      .content .login-panel .login-panel-userpass .login-panel-userpass-button{
        width: 100%;
        height: 2.5em;
        min-height: 2.5em;
        border-radius:8px;
        border-width: medium;
        text-align: center;
        font-size: 1.25em;
        border:0;
      }

      .content .login-panel .login-panel-register{
       /* padding-top: 6em; */
        max-width: 18em;
        width: 42%;
        display:flex;
      }
      .content .login-panel .login-panel-register .login-panel-register-button{
        width: 85%;
        height: 2.5em;
        border-radius: 8px;
        border-width: medium;
        text-align: center;
        font-size: 1.25em;
        border:0;
        margin-top: 50px;
      }

      .content .login-panel .login-panel-continue .login-panel-continue-button{
        width: 100%;
        height: 2.5em;
        border-radius: 5px;
        border-width: 0.2em;
		text-align: center;
	    font-size: 1.25em;
      }
      .staylabel{
		padding:0 0 15px 0;
		display:block;
		min-height:70px;
		}

      .content .login-panel .login-panel-verticle-line{
        border-left: 2px dashed LightGrey;
        height: 100%;
      }

      #error_message_div{
		color: red;
		text-align: center;
      }

     /*.login-button {
      background: #2084af url("../images/bg_gradient.png");
      padding: 8px 20px;
      min-width: 20px;
      min-height: 20px;
      color: #FFF;
      text-align: center;
      vertical-align: middle;
      border-radius: 3px;
      font-weight:bold;
      -webkit-transition: all 0.5s;
      transition:all 0.5s;
      }*/
      .ordinary-button{
		  color:white;
		  width:auto!important;
		  background:#1F7EA7 url("./bg_gradient.png") repeat;
		  -webkit-transition: all 0.5s;
		  transition:all 0.5s;
		  height: 2em;
		  margin: 1em 3px !important;
		  padding: 0 20px!important;
		  border: none!important;
		  border-radius: 0.4em;
		  font-size: 1em;
		  float: right;
		  }

      .login-button{
		  color:white;
      background-color: #2084af;
      }

      .ordinary-button:hover, .login-button:hover {
        opacity: 0.6;
      }

      .container_forgetpw h2{
      margin:6px 0 6px 0;
      }

      /*.register-button {
      background: #29ab29 url("../images/bg_gradient.png");
      padding: 8px 20px;
      min-width: 20px;
      min-height: 20px;
      color: #FFF;
      text-align: center;
      vertical-align: middle;
      border-radius: 3px;
      font-weight:bold;
      -webkit-transition: all 0.5s;
      transition:all 0.5s;
      }*/

      .register-button {
	  color:white;
      background: url("./bg_gradient.png") repeat,
       url("./icon_register30.png")27% 50% no-repeat,
       #29ab29;
       -webkit-transition: all 0.5s;
      transition:all 0.5s;}

      .register-button:hover {
         opacity: 0.6;
      }

/* 4steps */
.container_forgetpw{
  width:70%;
  min-height:400px;
  margin: auto;
  position: relative;
}

.forgetpw_frame{
	border:1px solid #aaa;
	padding: 2px;
	display: grid;
	height: auto;
}

.forgetid_frame{
	border: 1px solid #ccc;
	padding: 2px;
	display: grid;
}

.forgetpw_content{
	margin: auto;
	padding: 1.25em 0 0 0;
	margin-bottom: 25px;
	width: 50%;
	min-height:200px;
	display: block;
}
.forgetid_content{
	margin: auto;
	padding:2em 0 0;
	margin-bottom:50px;
	width: 50%;
	display: block;
}

.forgetpw_content img{
    height:auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90px;
}

.user_email{
	color:darkblue;
	font-weight:bold;
	width: 100%;
	text-align: center;
	padding-top: 0.85em;
	font-size: 1.25em;
}
.user_resend{
	color:darkblue;
	text-decoration: underline;
	width:100%;
	text-align: center;
	padding-top: 0.5em;
	font-size: 0.85em;
}

.container_4steps{
  width: 100%;
  background:url("../images/forgetpw_bg.jpg")repeat;
  padding: 3px 0;
  font-size: 1em;
  letter-spacing: -0.5px;
  position: relative;
  z-index: -1;
  height: 120px;
  }

.progressbar {
  counter-reset: step;
  padding: 0;
}
.progressbar li {
  list-style: none;
  display: inline-block;
  width: 24.25%;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border: 1px solid #a5a5a5;
  border-radius: 100%;
  display: block;
  text-align: center;
  margin: 0 auto 15px auto;
  background-color: #fff;
  font-size: 1.5em;
}
.progressbar li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #a5a5a5;
  top: 20px;
  left: -50%;
  z-index : -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: darkgreen;
  font-weight:bold;
}
.progressbar li.active:before {
  border-color: #070707;
  background: darkgreen;
  border:0;
  font-size:1.5em;
  color:#f0ff21;
}
.progressbar li.active + li:after {
  /* background-color: darkgreen; */
}


@media all and (max-width:1024px) {
	  .forgetpw_content {
      width: 80%;
      height: auto;
      }
      .container_forgetpw{
      width:85%;
      }
}


@media all and (max-width: 650px){

	   canvas#nokey{
       display:none;
        }

	    .centre_logo .centre_logo_img {
        width: 18vh;
        height: 18vh;
        min-height: 180px;
        min-width: 180px;
        top: -30px;
        position: relative;
      }
	 	.content .login-panel {
		padding-bottom: 15px;
        display: inline-grid;
		height: auto!important;
        min-width:98%;
      }
	  .content .login-panel .login-panel-userpass{
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 15px;
        /*border-bottom:2px dashed lightgrey;*/
      }
	  .content .login-panel .login-panel-register {
        width: 100%;
        margin-top: 10px;
        display: block;
      }
	  .login-panel-verticle-line{
       display:none;
      }
      .content .login-panel .login-panel-register .login-panel-register-button{
        width: 100%;
        margin-top: 0px;
      }
	  .language_select{
	  width: 95%;
	  }
	  .container_4steps {
      font-size:0.9em;
      }
      .centre_logo {
       max-height: 100px;
      }
      .container {
        margin-top: 2em;
      }
}

@media all and (min-width: 650px){
	.content .login-panel .login-panel-register{
        /* padding-top: 6em; */
        display: block;
 }
}

@media all and (max-width:480px) {

.container_forgetpw h2{
 margin:3px 0 3px 0;
 font-size: 1.2em;
}

.progressbar li {
  font-size: 0.75em;
  width:24%;
}

.container_forgetpw{
  width:95%;
}

.prompt_box{
	top:40%;
	right:15%;
 }

.language_select{
	 font-size: 0.85em;
	 position: relative;
	 top: 25px;
	}
 .forgetid_content{
 	width:95%;
 }

ul.progressbar li.active{
	font-size:0.85em;
}

.centre_logo {
    max-height: 50px;
}
.content .login-panel .login-panel-userpass {
    width: 100%;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.centre_logo .centre_logo_img {
    top: -60px;
}

}


@media all and (max-width:330px) {
.progressbar li {
  font-size: 0.7em;
}
}