@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

body {
   --aurora-logo-pink: #ff2eff;
   --aurora-logo-dark-blue: #2d2e82;
   --aurora-logo-cyan: #00c2c7;
   --aurora-logo-green: #00ff98;
   --error-colour: #D88393;
   background: var(--background-colour, #000);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   color: #fff;
}

* {
   margin: 0;
   padding: 0;
}

video, .background_image {
   position:absolute;
   z-index:-1;
   height:100%;
   right:0;
}

.background_image {
   transition: opacity 0.5s ease-in-out;
}

.validation-summary-errors > ul {
   list-style: none;
   padding: 5px;
}

.message {
   padding: 5px;
   font-size: 12px;
   flex-shrink: 0;
   color: #3f51b5;
   cursor: pointer;
}

.hidden {
   display: none;
}

.logo {
   flex-shrink: 1;
   object-fit: contain;
   min-height: 9.91rem;
   max-height: 50%;
   min-width: 10%;
   max-width: 50%;
   width: 50%;
   margin-bottom: 0.5rem;
   /* Chrome sub-pixel rendering was having touble keeping the image the same size on email vs login - less than a pixel difference.
      This rotate trick helps to force sub pixel rendering and prevents the slight shift between the two pages. */
   transform: rotate(0.001deg);
}

.logo--small {
   height: 31px;
}

.flavour-text {
   font-size: 1.5rem;
   padding-bottom: 0.75rem;
}

.login-waves {
   background-image: url(../media/originalwave.png);
   position: absolute;
   top: 0;
   left: 100px;
   right: 0;
   bottom: 0;
   background-repeat-x: no-repeat;
   background-repeat-y: no-repeat;
   background-size: contain;
   opacity: 0.15;
   background-position: top right;
}

.login-form {
   width: 100%;
}

.login-form__group {
   margin-top: 0.75rem;
   display: flex;
   flex-flow: column;
   box-sizing: border-box;
}

.login-form__group-email {
   margin-top:0.25rem;
}

.login-form__next-button {
   width: 114px;
}

p {
   text-overflow: ellipsis;
   overflow: hidden;
}

.login {
   display: flex;
   flex-direction:column;
   align-items: center;
   justify-content: safe center;
   padding: 0;
   width: 100%;
   height: 100%;
   margin: 0 auto 0 auto;
   background-color: rgba(0,0,0,0);
   box-sizing: border-box;
   font-size: 1em;
   box-sizing: border-box;
}

   .login .card {
      text-align: center;
      box-sizing: border-box;
      max-width: 440px;
      width: 90%;
      display: flex;
      flex-flow: column nowrap;
      border-radius: 0.5rem;
      overflow: auto;
      padding: 10px 25px 10px 31px;
      align-items: center;
      justify-content: safe center;
      margin-bottom: 15px;
      background: rgba(26, 26, 26, 0.11);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(9.7px);
      -webkit-backdrop-filter: blur(9.7px);
      border: 1px solid rgba(26, 26, 26, 0.34);
      scrollbar-width: thin;
      scrollbar-color: #272626 rgb(6 6 6);
      scrollbar-gutter: stable;
   }

      .login .card h2 {
         font-size: 48px;
         font-weight: 300;
         color: #fff;
         display: inline-block;
         padding-bottom: 5px;
      }

      input {
         color: white;
         padding: 8px 12px;
         text-align: center;

         background: var(--input-background-colour, rgba(26, 26, 26, 0.95));
         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(9.7px);
         -webkit-backdrop-filter: blur(9.7px);
         border: 1px solid rgba(26, 26, 26, 0.34);
      }

         input::placeholder {
            color: #ABABAB;
         }

   .login form .input-group {
      margin-top: 20px;
      border-bottom: 1px solid #c6d0da;
      display: flex;
   }

      .login form .input-group span {
         background: transparent;
         min-width: 22px;
         border: none;
         margin-right: 10px;
         padding-top: 5px;
      }

         .login form .input-group span i {
            font-size: 26px;
            color: #fff;
         }

.button_container { 
   display: flex;
}

.btnSpace {
   width: 100%;
}

.btn {
   border: none;
   font-size: 22px;
   height: 37px;

   border-radius: 0.5rem;
   cursor: pointer;
}

   .btn.btn-primary {
      display: inline-block;
      color: #fff;
      min-width: 115px;
      padding: 0 0.5rem;
      background-image: linear-gradient( 125deg, hsl(239deg 49% 34%) 8%, hsl(210deg 100% 32%) 80%, hsl(204deg 100% 36%) 88%, hsl(197deg 100% 38%) 96%, hsl(189deg 100% 39%) 100%, hsl(182deg 100% 39%) 100% );
      transition: background-color linear 0.4s;
   }

.btn-primary:active {
   background-color: #2b377b;
}

   .btn.btn-secondary {
      background-color: transparent;
      font-weight: 300;
      color: #fff;
      padding-top: 0.25rem;
   }

.btn-secondary:active {
   color: #2b377b;
}

.btn-primary:disabled {
   background-color: #526ea2;
}

.btn-secondary:disabled {
   color: #526ea2;

}

video#bgvideo {
   position: fixed;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -100;
}

#email {
}

#password {
   flex-grow: 1;
   padding: 8px 12px;
}

#showpassword {
   background: transparent;
   position: absolute;
   top: 0.5rem;
   right: 1rem;
   border: none;
   font-size: 1rem;
}

.show-password { 
   filter: invert(1);
   mix-blend-mode: difference;
}

#forgot-password > i {
   padding-left: 0.25rem;
}

#register {
   text-decoration: underline;
}

footer {
   margin-top: 2rem;
   padding-top: 2rem;
   border-top: solid 1px white;
}

.footer {
   font-size: 14px;
   color: #fff;
   margin-top: 2rem;
   margin-bottom: 0.75rem;
   display: flex;
   flex-direction: column;
}

.footer_text {
   display: block;
}

a {
   color: white;
   text-decoration: none;
}

   a:visited {
      color: white;
   }

   a:hover {
      text-decoration: underline;
   }

.trust-service-status {
   height: 1em;
   opacity: 0;
   width: 0px;
   overflow: hidden;
   transition: width 0.66s;
   margin-left: 0.75rem;
}

.service-status {
   position: relative;
   font-size: 18px;
}

.status-circle {
   top: -10px;
   font-size: 1em;
}

.status-symbol {
   font-size: 0.6em;
   top: -10px;
}

.service_degradation {
   color: #ef6c00;
}

.service_disruption {
   color: #d50000;
}

.service_maintenance {
   color: #304ffe;
}

.service_status_unavailable {
   color: #555;
}

.accessibility_button {
   color: white;
   font-size: 1.75rem;
   margin: 1rem;
   position: absolute;
   left: 0;
   bottom: 0;
   background-color: transparent;
   border: none;
}

.accessibility-enabled {
   color: var(--aurora-logo-cyan);
}

.password-input {
   position:relative;
   width: 100%;
   display: flex;
}

#emailfield {
   display: none;
}

#login-button {
   display: none;
}

.email_placeholder {
   height: 1em;
   margin-bottom: 0.7em;
}

.text-danger {
   padding:0.2em;
}

.text-danger:empty {
   height: 1.2em;
}

.symology-logo {
   width: 12rem;
}

.footer a { 
   padding-top: 0.75rem;
}

.external_link_icon { 
   transform: rotate(45deg) translate(-3px, -3px);
   font-size: 0.75rem;
   position: absolute;
}

@media screen and (min-width: 0px) and (max-width: 600px), (min-height: 0px) and (max-height: 500px) {
   .logo {
      height: 9.91rem;
   }
}