body {
  margin:0;
  
  background-image: url("/cas/themes/edbookshelf/images/loginpage/edbookshelf_bg-110b378ab2606a9d6594ae941b78159a.jpg");
  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position:  top right; 
  background-size: 100% auto;    
  
  min-width: 320px; /*Support very small phone*/
  min-height: 860px; 
}
#login_form{
  margin: 0;
}
.alert{
  margin-top: -2em;
}

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

.content{
  min-height: 790px;
}


.footer{
  order:-1; /*put footer at bottom*/
  background: pink;
  height: 6em;
}
.footer .footer-inner {
  font-family:sans-serif;
  padding-top: 1em;
  
}
.oauth-icons .oauth-inner-button{
  padding-right: 1em;
  padding-top: 0.5em;
  display: flex;
}



.oauth-icons .oauth-inner-button > a{
  padding-right: 0.2em;
  margin-right: 0.4em;
  width: 32px;
  height: 32px;
  opacity: 0.85;
  display: inline-block;
}


.oauth-icons .oauth-inner-button > a.icon-facebook-120 {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_facebook_32-e275e049f33e128da1ed574c080d8c14.png) no-repeat;
}      
.oauth-icons .oauth-inner-button > a.icon-facebook-120:hover {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_facebook_32_dim-53e116c3449dac14a4bea7789931af19.png) no-repeat;
}      
.oauth-icons .oauth-inner-button > a.icon-yahoo-120 {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_yahoo_32-7cc32aa889f6fa1ad36691db5aadb23c.png) no-repeat;
}    
.oauth-icons .oauth-inner-button > a.icon-yahoo-120:hover {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_yahoo_32_dim-f779eb18fc7e922c306998de248fa1d3.png) no-repeat;
}    
.oauth-icons .oauth-inner-button > a.icon-google-120 {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_google_32-851cab7af567059311882921949a4a7b.png) no-repeat;
}    
.oauth-icons .oauth-inner-button > a.icon-google-120:hover {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_google_32_dim-066fe9ad8cbb3ebd29d1d5f05b24c94e.png) no-repeat;
}    
.oauth-icons .oauth-inner-button > a.icon-winlive-120 {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_winlive_32-9dc7af9daba09c127caa929cd017664a.png) no-repeat;
}  
.oauth-icons .oauth-inner-button > a.icon-winlive-120:hover {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_winlive_32_dim-3dbea5f04df083a2212eda5c39879c6e.png) no-repeat;
}
.oauth-icons .oauth-inner-button > a.icon-apple-120 {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_apple_32-7dcec57078e229fc58baa7fb1e84cb64.png) no-repeat;
}
.oauth-icons .oauth-inner-button > a.icon-apple-120:hover {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_apple_32_dim-aa049797b745cedf3b7e94b555844070.png) no-repeat;
}
.oauth-icons .oauth-inner-button > a.icon-azure-120 {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_azure_32-9dc7af9daba09c127caa929cd017664a.png) no-repeat;
}    
.oauth-icons .oauth-inner-button > a.icon-azure-120:hover {
    background: url(/cas/themes/edbookshelf/images/loginpage/logos/logo_azure_32_dim-3dbea5f04df083a2212eda5c39879c6e.png) no-repeat;
}    
      
.content{
  display: flex;
  flex-direction: column;
  
}
.edbookshelf-logo{

  text-align: center;
  display:flex;
  justify-content:center;
  
}
.edbookshelf-logo .edbookshelf-logo-img{
  width: 30vh;
  height: 30vh;
min-height: 200px;
min-width: 200px;
}
.content .login-panel {
  display:flex;
  justify-content:center;
}


.content .login-panel > div{
  margin-left: 1.5vw; 
  margin-right: 1.5vw; 
}
.content .login-panel .login-panel-blank{
  margin-top: -3em;
  padding-top: 1em;
  display:flex;
  flex-direction: column;
  max-width: 18em;
  width: 42%;
  min-height: 8em;
}
.content .login-panel .login-panel-userpass{
  margin-top: -0.5em;
  padding-top: 1em;
  display:flex;
  flex-direction: column;
  max-width: 18em;
  width: 80%;
  min-height: 21em;
}
.content .login-panel .login-panel-userpass .login-panel-userpass-input{
  width: 100%;
  height: 2.8em;
  margin-bottom: 1em;
  padding-left: 10px;
  
  border: none; 
  border:solid 1px #ccc;
  border-radius: 1.1em;
  font-size: 1em;
}


.content .login-panel .login-panel-userpass .login-panel-userpass-button{
  width: 100%;
  height: 2.8em;
  min-height: 2.8em;
  border-radius: 1.1em;
  border-width: medium;
  border-color: black;
  text-align: center;
  font-size: 1em;
  cursor: pointer;
margin-bottom: 14px;
}

.content .login-panel .login-panel-guest{
  width: 42%;
  display:flex;
  max-width: 18em;
  margin-top: 24em;
  
}
.login-panel-guest-button{
  width: 100%;
  height: 2.8em;
  border-radius: 1.1em;
  border-width: medium;
  border-color: black;
  text-align: center;
  font-size: 1em;
  align-self: flex-end;
  margin-bottom: 3em;
  margin-left: -3em;
  cursor: pointer;
  max-width: 14em;
  
}

.content .login-panel .login-panel-continue .login-panel-continue-button{
  width: 100%;
  height: 2.8em;
  border-radius: 1.1em;
  border-width: 0.2em;
  border-color: black;
  text-align: center;
  cursor: pointer;
}


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

#error_message_div{
color: red;
text-align: center;
}
#error_message_span{
margin-bottom: 0.5em;
margin-top: -0.5em;
display: block;
}
#third-party-text {
margin-left: -10px;
margin-right: -10px;
}

.grey-button {
  background: #dbdbdb; /* Old browsers */
  background: -moz-linear-gradient(top, #dbdbdb 50%, #adadad 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#dbdbdb), color-stop(50%,#adadad)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #dbdbdb 50%,#adadad 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #dbdbdb 50%,#adadad 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #dbdbdb 50%,#adadad 50%); /* IE10+ */
  background: linear-gradient(to bottom, #dbdbdb 50%,#adadad 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#adadad',GradientType=0 ); /* IE6-9 */
  
  display: block;
  text-decoration:none;
  font-family:sans-serif;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  
  -webkit-transition: all 1s;
}

.grey-button:hover {
  background: #ededed; /* Old browsers */
  background: -moz-linear-gradient(top, #ededed 50%, #bababa 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ededed), color-stop(50%,#bababa)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ededed 50%,#bababa 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ededed 50%,#bababa 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ededed 50%,#bababa 50%); /* IE10+ */
  background: linear-gradient(to bottom, #ededed 50%,#bababa 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
}

.orange-button {
  background: #f4d09a; /* Old browsers */
  background: -moz-linear-gradient(top, #f4d09a 50%, #fcbe62 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f4d09a), color-stop(50%,#fcbe62)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f4d09a 50%,#fcbe62 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f4d09a 50%,#fcbe62 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f4d09a 50%,#fcbe62 50%); /* IE10+ */
  background: linear-gradient(to bottom, #f4d09a 50%,#fcbe62 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d09a', endColorstr='#fcbe62',GradientType=0 ); /* IE6-9 */
  
  display: block;
  text-decoration:none;
  font-family:sans-serif;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  
  -webkit-transition: all 1s;
}

.orange-button:hover {
  background: #f2ddbf; /* Old browsers */
  background: -moz-linear-gradient(top, #f2ddbf 50%, #ffd599 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f2ddbf), color-stop(50%,#ffd599)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2ddbf 50%,#ffd599 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2ddbf 50%,#ffd599 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2ddbf 50%,#ffd599 50%); /* IE10+ */
  background: linear-gradient(to bottom, #f2ddbf 50%,#ffd599 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ddbf', endColorstr='#ffd599',GradientType=0 ); /* IE6-9 */
}     


.text-center {
  
  text-align: center;
  justify-content: center;
}
.create-accout-link {
  padding-top: 1em;
}
.forget-password-link {
  padding-top: 0.5em;
}
.copyright{
  padding-top:0.5em;
  font-size: 15px;
  color:grey;
}

.ebs3-warning {
  display: none;
  margin-top: -2em;
  margin-bottom: -0.3em;
  padding-left: 0.2em;
  padding-right: 0.2em;
}

.ebs3-warning-text {
  color: #f93e08;
  font-family: bold;
  font-size: 14;
}

.google-play-logo-img{
  width: 11em;
  height: 4.26em;
}

.red-text {
  color: red;
}

.iamsmart-dark {
  width: 100%;
  min-height: 2.1em;
  background-color: #2b7366;
  border: none;
  color: #FFFFFF;
  padding: 8px 8.75px 8px 8.75px;
  cursor: pointer;
  outline: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans SC', Arial, Helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
}

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

@media (max-width : 640px) {
  
  .content .login-panel {
    flex-direction: column;
    align-items: center;
  }
  .content .login-panel .login-panel-blank {
    display: none;
  }
  .login-panel-guest-button{
    margin: auto;
    max-width: 100%;
  }
  .content .login-panel .login-panel-guest{
    margin-top: 0;
    width:100%;
  }
}