.login-body{
    width: 100%;
    min-height: 100vh; position: relative;
}

/* Slide Divs */
 .login-bgslide{
    width: 100vw; height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat;
    
}

/* Login Page */
 .login-login-pg{
    position: absolute;width: 100%; height: auto;
    z-index: 3; background-color: rgba(0,0,0,.8);
    min-height: 100vh; top:0px;font-family: 'Encode Sans Condensed', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}

.pop-login-header img, .pop-login-header span{
  display: inline-block;
  vertical-align: middle;
}

.pop-login-header img{
  width: 60px;
}

.login-login-pg-pop{
    position: fixed;width: 100vw; height: 100vh;
    z-index: 3; background-color: rgba(0,0,0,.8);
    min-height: 100vh; top:0px
}
 .login-login-pg .login-login-pg-cont{
    width: 100%; min-height: 100vh;
}
 .login-login-pg .login-login-pg-cont .login-login-pg-panel, .form-pg-panel{
    background-color: #FFF; padding: 50px;  width: calc(100% - 20px); max-width: 380px;
    height: auto; min-height: 300px;color: #555;
}
.form-pg-panel{
  max-width: 600px;
  background-image: url(../images/bbwa/logofade.png);
    background-position: 300px -200px;
    background-repeat: no-repeat;
    max-height: calc(100vh - 20px);
    overflow:auto;

}
.formpopimg{
  width: calc(100% - 20px);
  padding: 10px;
border:thin solid #eee;
}
 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-dis{
    width: 100%;
}
 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-dis .login-login-logo{
  width: 40px; height: auto; float: left;
}
 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-dis .login-login-logo img{
width: 100%;
}
 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-dis .login-login-sch{
    width: calc(100% - 50px); margin-left: 10px; float: left;
}

 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-dis .login-login-sch .login-login-sch-name{
    font-weight: bold; text-transform: uppercase; font-size: 1.1em; line-height: 16px;
}

 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-dis .login-login-sch .login-login-sch-ep{
color: #4CAF50; /*Theme*/
}

/* Login Title */
 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-tit{
    margin-top: 30px; font-weight: bold; font-size: 1.4em; color: #777
}
 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-login-tit a{
padding: 3px; width: 30px; height: 30px; vertical-align: middle; display: inline-block; font-size: 0.8em
}

.login-textbox{
    width: 100%; /* max-width: 400px; */ padding: 10px 0px; color: #aaa; position: relative;
   }
   .login-textbox > i{
     width: 30px; text-align: center; float: right; border-bottom: #aaa thin solid; height: 30px;display: block; position: relative;
     transition: border-bottom-color 0.4s, color 0.4s; color:#666 !important;
   }
   
   .login-textbox > i::before{
       position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);
   }

   .login-textbox > i + i{
       position: absolute; float: none; right: 0px;
   }

   .login-textbox input, .login-textbox select {
       width: calc(100% - 30px); display: block; border:none; background-color: transparent; float: right; border-bottom: #aaa thin solid; height: 30px;
       transition: border-bottom-color 0.4s, color 0.4s
     }

     .login-textbox select {
       padding:0px
     }
   
     .login-textbox input:focus, .login-textbox input:focus + i, .login-textbox select:focus, .login-textbox select:focus + i{
       border-bottom-color: #4CAF50; /*Theme*/
       transition: border-bottom-color 0.8s, color 0.8s
     }
     .login-textbox input:focus + i, .login-textbox select:focus + {
       color: #4CAF50; /*Theme*/
     }
     .login-textbox > div{
   width: 100%;
     }
     .login-textbox a{
   display:block; padding: 0px 2px; float: right; text-decoration: none;
   transition: color 0.4s; font-size:0.8em;
     }
     .login-text-color-hover{
       transition: color 0.4s;
     }
     .login-textbox a:hover, .login-text-color-hover:hover{
       transition: color 0.8s;
       color: #4CAF50; /*Theme*/
     }

     .login-textbox  .err{
        font-size: 0.8em; position: absolute; bottom: -14px; padding: 2px 5px; border-radius: 0px 0px 3px 3px; display: none;
     }

     .iserr ~ .err{
      display: block;
     }


     /* Footer */
 .login-login-pg .login-login-pg-cont .login-login-pg-panel .login-footer,.login-menu-page .login-menu-footer{
    font-size:0.7em; text-align:center; margin-top:20px;
}

.spresheet{
  border-color: #777;
}

.pgindicator,.pgindicator2{
  color:#ccc;
  border:thin #999 solid;
  width:15px; height:15px; display:inline-block;margin:0px 3px; font-size:0.5em
}

.infochecckbx{
  opacity: 0; display: block; width: 100%; height: 100%; position: absolute;
}


.pgindicator2{
  width:25px; height:25px; vertical-align: middle;
}

.attesdet{
  display: inline-block; vertical-align: middle; width: calc(100% - 50px); margin-left: 5px; text-align: left;
}

.current{
  color:#fff!important;background-color:#f44336!important;border:none
}

.done,.infochecckbx:checked ~ .pgindicator2{
  color:#fff!important;background-color:#4CAF50!important;border:none
}

.spresheet input{
  border:none; background-color: transparent; width: 100%;
}

/* Login Error Box */
.login-error-bx{
  width: 90%;
  margin: 10px auto;
  padding: 5px 10px;
  background-color: rgb(250, 211, 211);
  border: solid thin rgb(250, 143, 143);
}

  /* Small */
  @media (max-width:600px){
.form-pg-panel{
  padding: 10px;
}

  }

  .tcolline-body{
    width: 100%;
    min-height: 200px; position: relative;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Slide Divs */
.tcolline-body .tcolline-bgslide{
    width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute;
    background-attachment: fixed;
}

.tcolline-menu-page{
    width: 100%; height: auto;
    z-index: 20; /* background-color: rgba(0,0,0,.8); */
    min-height: 200px;
}

/* Menus */
.tcolline-menu-page{
    color: inherit;
}
.tcolline-menu-page .tcolline-menu-header{
 margin-top: 10px;text-align: center; font-size: 1.4em;
}
.tcolline-menu-page .tcolline-menu-header .tcolline-menu-header-top img{
  opacity: 1; font-size: 1.1em; width: 40px;
}
.tcolline-menu-page .tcolline-menu-body{
    min-height: 200px;
    height: auto;
    overflow: visible;
}
.tcolline-menu-page .tcolline-menu-body .tcolline-menu-bx{
    min-height: inherit; margin-bottom: 10px;
}
.tcolline-ind-menu{
    text-align: center;
 }
 .tcolline-ind-menu .tcolline-ind-menu-logo{
 width: 50px; height: 50px; margin-left: auto;margin-right: auto; border-radius: 50px; border:solid thin #999;
 }
 
 .tcolline-ind-menu .tcolline-ind-menu-title{
     text-align: center; font-size: 1.2em;margin-top: 10px;
 }.tcolline-ind-menu .tcolline-ind-menu-title .tcolline-ind-menu-title-big{
     font-size: 1.4em; line-height: 20px;opacity: 0.7;text-align: center;
 }
 
 .tcolline-ind-menu .tcolline-ind-menu-descr{
 font-style: italic; text-align: center; padding: 10px 5px; width: 100%; overflow: hidden;min-width: 228px; font-size: 0.8em;
 }
 
 .tcolline-ind-menu  .tcolline-ind-menu-exbtn{
   margin:10px auto;font-size: 0.9em;
 }

 /* Lines */
.tcolline-line-outer {
    width: 1px;
    min-height: inherit;
    margin: auto;
    /* position: relative; */
    overflow: hidden;
    opacity: 1;
  }
  .tcolline-line-inner {
    position: absolute;
    width:100%;
    height: 30%;
    background: grey;
    top: 35%;
    box-shadow: 0px 0px 30px 20px grey;
  }

  /* Lines */
.tcolline-line-outer-h {
    height: 1px;
    min-width: 100vw;
    margin: auto;
    /* position: relative; */
    overflow: hidden;
    opacity: 1;
  }
  .tcolline-line-inner-h {
    position: absolute;
    height:1px;
    width: 30%;
    background: grey;
    left: 35%;
    box-shadow: 0px 0px 30px 20px grey;
  }