body {
   position: relative;
   width: 100%;
   height: 100%;
   font-size: 1.1em;
   overflow: hidden;
}
.pageHider {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: white;
   z-index: 2000;
}

.page {
   display: none;
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: white;
}
.center {
   position: absolute;
   width: 100%;
   top: 50%;
   transform: translate(0,-50%);
   text-align: center;
}
.ruvi-logo {
   position: absolute;
   width: 100%;
   height: 35px;
   background: transparent url(../img/eos-logo_turquoise.svg) center center no-repeat;
   background-size: auto 80%;
   margin-top: 50px;
}

.message-line {
   display: none;
   position: relative;
   margin-left: 0;
   margin-right: 0;
   text-align: center;
   padding: 8px 0 8px 0;
   margin-top: 5px;
   margin-bottom: 50px;
   color: white;
   background-color: transparent;
}
.message-line.error {
   background-color: rgba(212,0,0,1);
}
.box {
   margin-left: 40px;
   margin-right: 40px;
   overflow: hidden;
}
.inp {
   position: relative;  /*xxx*/
   margin-bottom: 30px;
}
.delButton {
   display: none;
   position: absolute;
   right: 0;
   bottom: 4px;
   width: 20px;
   height: 20px;
   background: transparent url(../img/cross.png) center center no-repeat;
   background-size: auto 70%;
   cursor: pointer;   
}
.inp input {
   width: 100%;
   font-size: 1.1em;
   border: none;
   outline: none;
   padding: 0 30px 0 20px;
   border-bottom: 1px solid rgba(179,179,179,1);
   color: black;
   text-decoration: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.inp input.active{
   /*border-bottom: 1px solid black;*/
   border-bottom: 1px solid rgba(0,170,212,1);
}
.inp input.error {
   color: red;
}
.inp input.error.active{
   border-bottom: 1px solid red;
}
.bottom {
   position: absolute;
   bottom: 15px;
   width: 100%;
   height: 30px;
   text-align: center;
}
.button {
   padding-top: 4px;
   width: 150px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   font-size: 1.2em;
   color: rgba(179,179,179,1);
}
.button.active {
   color: black;
   cursor: pointer;
}
.button.error {
   color: rgba(255,0,0,0.5);
}
.button.error.active {
   color: rgba(255,0,0,1);
}
.zurueck {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding: 20px 20px 20px 35px;
   height: 25px;
   background: transparent url(../img/arrow-left_black.svg) left center no-repeat;
   background-size: auto 50%;
   cursor: pointer;
}
.zurueck div {
   position: relative;
   top: 50%;
   transform: translate(0,-50%);
}
.agb-page .zurueck {
   position: fixed;
   background-color: white;
   z-index: 10;
}

.with-hint {
   margin-bottom: 25px;
}

/*
   <div class="login-page page">
      <div class="ruvi-logo"></div>
      <div class="center">
         <div class="message-line error">Gottfried Schellner</div>

         <div class="login-box">
            <div class="inp">
                <input type="text" class="login-username" placeholder="Emailadresse"/>
            </div>
            <div class="inp">
                <input type="password" class="login-password" placeholder="Passwort"/>
            </div>
            <div class="forgotpw">
                  Passwort vergessen ?
            </div>
            <div class="button anmeldenButton" title="Anmelden">Anmelden</div>
         </div>
      </div>
      <div class="bottom">
         <div class="button registrierenButton active" title="Registrieren">Registrieren</div>
      </div>
   </div>  <!-- end login-page -->
*/
.inp.login-pw {
   margin-bottom: 8px;
}
.forgotpw {
   font-size: 0.6em;
   font-weight: bold;
   cursor: pointer;
   text-align: right;
   margin-top: 3px;
}
.anmeldenButton {
   margin-top: 40px;
}

/*
   <div class="forgotpw-page page">
      <div class="zum-login goto-login">Zum Login</div>
      <div class="center">

         <div class="forgotpw-box">
            <div class="inp">
                <input type="text" class="forgotpw-username" placeholder="Emailadresse"/>
            </div>
            <div class="button passwordResetButton" title="Passwort zurücksetzen">Passwort zurücksetzen</div>
         </div>
      </div>
   </div>  <!-- end forgotpw-page -->
*/
.fgpw-username {
   margin-bottom: 35px;
}
.passwordResetButton {
   width: 250px;
}

/*
   <div class="changepw-page page">
      <div class="zum-login goto-login">Zum Login</div>
      <div class="center">
         <div class="message-line error"></div>
         <div class="changepw-box">
            <div class="inp">
                <input type="text" class="changepw-username" placeholder="Emailadresse" readonly/>
            </div>
            <div class="inp chgpw-password">
                <input type="password" class="changepw-password  enter-password" placeholder="Passwort"/>
                <div class="hint-text">&nbsp;</div>
            </div>
            <div class="inp">
                <input type="password" class="changepw-password-repeat" placeholder="Passwort wiederholen"/>
                <div class="hint-text">&nbsp;</div>
            </div>
            <div class="button changePwButton" title="Passwort ändern">Passwort ändern</div>
         </div>
      </div>
   </div>  <!-- end changepw-page -->
*/
.chgpw-password {
   margin-bottom: 35px;
}
.changepw-username {
   font-weight: bold;
}

/*
   <div class="register-page page">
      <div class="zum-login goto-login">Zum Login</div>
      <div class="center">
         <div class="message-line"></div>
         <div class="box">
            <div class="inp">
                <input type="text" class="register-username" autocapitalize="off" placeholder="Emailadresse"/>
            </div>
            <div class="inp">
                <input type="text" class="register-firstname" placeholder="Vorname"/>
            </div>
            <div class="inp">
                <input type="text" class="register-lastname" placeholder="Nachname"/>
            </div>
            <div class="inp reg-password">
                <input type="password" class="register-password enter-password" placeholder="Passwort"/>
                <div class="hint-text">&nbsp;</div>
            </div>
            <div class="inp regpw-repeat">
                <input type="password" class="register-password-repeat" placeholder="Passwort wiederholen"/>
                <div class="hint-text">&nbsp;</div>
            </div>
            <div class="inp akzeptAGB">
                Ich akzeptiere die AGB
            </div>
            <div class="button doRegisterButton" title="Registrieren">Registrieren</div>
         </div>
      </div>
   </div>  <!-- end register-page -->
*/
.register-password {
  margin-top: 10px;
}

.reg-password {
   margin-bottom: 35px;
}

.inp.regpw-repeat {
   margin-bottom: 10px;
}
.enter-password.insecure {
   border-bottom: 1px solid rgba(212,0,0,1) ! important;
}
.enter-password.midsecure {
   border-bottom: 1px solid rgba(255,204,0,1)  ! important;
}
.enter-password.secure {
   border-bottom: 1px solid rgba(0,128,0,1)  ! important;
}
.hint-text {
   text-align: right;
   font-size: 0.8em;
}
.hint-text.insecure {
   color: rgba(212,0,0,1);
}
.hint-text.midsecure {
   color: rgba(255,204,0,1);
}
.hint-text.secure {
   color: rgba(0,128,0,1);
}

.ruvi-eos {
   text-decoration: none;
   font-weight: bold;
   color: black;
}

.ruviapp {
   width: 30px;
   height: 30px;
   background: transparent url(../img/ruviapp.png) right center no-repeat;
   background-size: 100% auto;
   border: 1px solid rgba(179,179,179,1);
}

.progressPanel {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: transparent;
   z-index: 2000;
}
.progress {
   display: none;
   position: absolute;
   width: 0;
   height: 100%;
   background-image: -ms-linear-gradient(left, #DAF0F5 0%, #00AAD4 100%);
   background-image: -moz-linear-gradient(left, #DAF0F5 0%, #00AAD4 100%);
   background-image: -o-linear-gradient(left, #DAF0F5 0%, #00AAD4 100%);
   background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #DAF0F5), color-stop(100, #00AAD4));
   background-image: -webkit-linear-gradient(left, #DAF0F5 0%, #00AAD4 100%);
   background-image: linear-gradient(to right, #DAF0F5 0%, #00AAD4 100%);
}

::-webkit-input-placeholder { /* WebKit browsers */
   color: rgba(179,179,179,1);
   font-family: 'TitilliumWeb Light', Verdana, sans-serif; 
   font-size: 1.0em;
}
::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: rgba(179,179,179,1);
   font-family: 'TitilliumWeb Light', Verdana, sans-serif; 
   font-size: 1.0em;
}
::-ms-input-placeholder { /* Internet Explorer 10+ */
   color: rgba(179,179,179,1);
   font-family: 'TitilliumWeb Light', Verdana, sans-serif; 
   font-size: 1.0em;
}
::placeholder { 
   color: rgba(179,179,179,1);
   font-family: 'TitilliumWeb Light', Verdana, sans-serif; 
   font-size: 1.0em;
}