body {
   font-family: "Open Sans", sans-serif;
   font-size: 0.8em;
   height: 100vh;
   background: url("/Styles/images/bg/login.jpeg?v=1") 50% fixed;
   background-size: cover;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
}

.main-content {
   flex: 1;
   overflow: auto;
   display: flex;
   background-color: rgba(0,0,0,0.5);
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

@@keyframes spinner {
   0% {
      transform: rotateZ(0deg);
   }

   100% {
      transform: rotateZ(359deg);
   }
}

* {
   box-sizing: border-box;
}

a {
   color: #2196F3;
   text-decoration: none;
}

.login {
   border-radius: 2px 2px 5px 5px;
   padding: 10px 20px 20px 20px;
   background: #ffffff;
   position: relative;
   padding-bottom: 60px;
   box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.7);
   width: 400px;
   max-width: 90%;
}

   .login.loading button {
      max-height: 100%;
      padding-top: 50px;
   }

      .login.loading button .spinner {
         opacity: 1;
         top: 40%;
      }

   .login.ok button {
      background-color: #8bc34a;
   }

      .login.ok button .spinner {
         border-radius: 0;
         border-top-color: transparent;
         border-right-color: transparent;
         height: 20px;
         animation: none;
         transform: rotateZ(-45deg);
      }

   .login input.text {
      display: block;
      padding: 15px 10px;
      margin-bottom: 10px;
      width: 100%;
      border: 1px solid #ddd;
      transition: border-width 0.2s ease;
      border-radius: 2px;
      color: #505050;
   }

   .login input + i.fa {
      color: #fff;
      font-size: 1em;
      position: absolute;
      margin-top: -43px;
      opacity: 0;
      left: 0;
      transition: all 0.1s ease-in;
   }

   .login input:focus {
      outline: none;
      color: #444;
      border-color: #2196F3;
      border-left-width: 35px;
   }

      .login input:focus + i.fa {
         opacity: 1;
         left: 30px;
         transition: all 0.25s ease-out;
      }

   .login .title {
      color: #444;
      font-size: 1.2em;
      font-weight: bold;
   }

   .login .flags {
      position: absolute;
      right: 10px;
      top: 10px;
   }

      .login .flags .loginicons {
         margin: 0 5px;
         cursor: pointer;
      }

   .login button {
      width: 100%;
      height: 100%;
      padding: 10px 10px;
      background: #2196F3;
      color: #fff;
      display: block;
      border: none;
      margin-top: 20px;
      position: absolute;
      left: 0;
      bottom: 0;
      max-height: 40px;
      border: 0px solid rgba(0, 0, 0, 0.1);
      border-radius: 0 0 2px 2px;
      transform: rotateZ(0deg);
      transition: all 0.1s ease-out;
      border-bottom-width: 7px;
   }

      .login button:focus {
         outline: none;
      }

      .login button .spinner {
         display: block;
         width: 40px;
         height: 40px;
         position: absolute;
         border: 4px solid #ffffff;
         border-top-color: rgba(255, 255, 255, 0.3);
         border-radius: 100%;
         left: 50%;
         top: 0;
         opacity: 0;
         margin-left: -20px;
         margin-top: -20px;
         animation: spinner 0.6s infinite linear;
         transition: top 0.2s 0.2s ease, opacity 0.2s 0.2s ease, border-radius 0.2s ease;
         box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
      }

   .login:not(.loading) button:hover {
      box-shadow: 0px 1px 3px #2196F3;
   }

   .login:not(.loading) button:focus {
      border-bottom-width: 4px;
   }

   .login .remember-forgot {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
   }

   .login .password-toggle {
      position: absolute;
      right: 30px;
      margin-top: -46px;
      font-size: 18px;
      color: #808080;
      cursor: pointer;
   }

footer {
   display: block;
   padding-top: 50px;
   text-align: center;
   color: #ddd;
   font-weight: normal;
   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
}

   footer a, footer a:link {
      color: #fff;
      text-decoration: none;
   }

.error, .error-msg {
   color: #ff0000;
   margin-bottom: 10px;
}

.btnlink {
   background: transparent;
   border: none;
   padding: 5px;
   margin-right: 5px;
   cursor: pointer;
   width: 70px;
   color: #ddd;
}

   .btnlink:hover {
      background: #d9e6e5;
      color: #333;
   }

.agreement-popup {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: rgba(4, 40, 68, 0.85);
   min-height: 100%;
}

.agreement-container {
   background: rgba(255, 255, 255, .9);
   border-radius: 6px;
   border: 3px solid #ccc;
   width: 600px;
   max-width: 90%;
   height: 600px;
   max-height: 90%;
   display: flex;
   flex-direction: column;
}

.agreement-content {
   flex: 1;
   overflow: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
}

   .agreement-content iframe {
      width: 100%;
      height: 100%;
      border: none;
      vertical-align: top;
   }

.agreement-actions {
   display: flex;
   justify-content: center;
   padding: 10px;
}

.agreement-ok, .agreement-cancel {
   border: 1px solid #1a73e8;
   padding: 12px 25px;
   text-transform: uppercase;
   color: #1a73e8;
   font-size: 14px;
   margin: 0 10px;
   border-radius: 20px;
   cursor: pointer;
   background-color: #ddd;
}

.agreement-ok {
   background: #1a73e8;
   color: #fff;
}

.copyright {
   padding: 5px;
   background-color: rgba(255,255,255,0.4);
   color: #000;
   text-align: center;
}

.forgot-password {
   border-radius: 2px 2px 5px 5px;
   padding: 10px 20px 20px 20px;
   background: #ffffff;
   box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.7);
   width: 400px;
   max-width: 90%;
}

   .forgot-password .title {
      color: #444;
      font-size: 1.2em;
      font-weight: bold;
   }

   .forgot-password input {
      display: block;
      padding: 10px;
      margin-bottom: 10px;
      width: 100%;
      border: 1px solid #ddd;
      transition: border-width 0.2s ease;
      border-radius: 2px;
      color: #505050;
      outline: none;
   }

      .forgot-password input:focus {
         border-color: #2196F3;
      }

   .forgot-password .actions {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
   }

      .forgot-password .actions button {
         background-color: #2196F3;
         border: none;
         border-radius: 4px;
         outline: none;
         padding: 5px 20px;
         color: #fff;
         cursor: pointer;
      }

.cp {
   margin: 5px 0;
}

   .cp.small {
      display: none;
   }

@media (max-width: 600px) {
   .cp.small {
      display: block;
   }

   .cp.large {
      display: none;
   }
}