@font-face {
  font-family: 'proxima';
  src: url('/fonts/proximanova/proximanova-regular-webfont.eot');
  src: url('/fonts/proximanova/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('/fonts/proximanova/proximanova-regular-webfont.woff2') format('woff2'),
      url('/fonts/proximanova/proximanova-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'proxima';
  src: url('/fonts/proximanova-bold/fontsfree-net-proxima-nova-bold-webfont.eot');
  src: url('/fonts/proximanova-bold/fontsfree-net-proxima-nova-bold-webfont.eot?#iefix') format('embedded-opentype'),
      url('/fonts/proximanova-bold/fontsfree-net-proxima-nova-bold-webfont.woff2') format('woff2'),
      url('/fonts/proximanova-bold/fontsfree-net-proxima-nova-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;

}

*, html, body {
  margin: 0px;
  padding: 0px;
  line-height:1;
  font-size:62.5%;
  font-family: 'proxima';
}

body { 
  text-align: left !important;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,body {
  height:100%;
  /* overflow:hidden; */
}

img {
  max-width: 100%;
}

.blob-top, .blob-bottom {
  position: absolute;
  z-index: -1;
}

.blob-top {
  top:0;
  right:0;
}

.blob-bottom {
  bottom:0;
  left:0;
}
body {
  width: 100%;
  position:relative;
  background: linear-gradient(171deg, #00A3F0 10%,#0090d4 75%);
  background-repeat: no-repeat;
  color: #454444;
  background-size: 100% 150%;
  background-position: unset;
}

.col-cont {
  width:100%;
  height: auto;
  display:flex;
  justify-content: center;
  align-items:center;
}


.form-cont-inner {
  display:flex;
  flex-direction:column;
  justify-content: center;
  height: 100%;
  position: relative;
}

.connected-content {
  color: white;
  font-size: clamp(6rem,12vw,10rem);
  display:flex;
  align-items:flex-start;
  height: 77%;
  padding-top: clamp(8rem,5vw,20rem);
  flex: 1 1 30%;
  justify-content: center;
  z-index: 1;
}

.login-form, 
.password-reset-new-form, 
.password-reset-edit-form, 
.user-setup-form, 
.user-register-form,
.user-not-in-system-containor,
.multi-factor-authentication-containor,
.enforce-multi-factor-authentication-containor{
  background:white;
  padding: clamp(4rem,2vw,7rem) clamp(4rem,3vw,8rem);
  position:relative;
  height: 80%;
  border-radius: clamp(4rem,4%,8rem);
  box-shadow: 3px 5px 24px rgba(0,0,0,.2);
  margin: 0 clamp(3rem,6vw,8rem);
  /* flex: 1 1 clamp(50rem,25vw,30%);  */
  margin-bottom: 20px;
  width: 525px;
}


input[type=text], input[type=password], input[type=email]{
  height: clamp(4rem,4vh,4.5rem);
  width:100%;
  border-radius: 1rem;
  border: .2rem solid #eaecef;
  font-size: clamp(1.6rem,.5vw,1.8rem);
  padding: 1rem;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus{
  outline: none;
  border-color: #0090D4;
  background-color: #f6fcff;
}


label {
  font-size:1.4rem;
  font-weight:600;
  color:#454444;
  display: block;
  line-height: 2.5;
  margin-top: .7rem;
}

.login-form h2 {
  font-size: clamp(4.8rem,4.2vw,5rem);
  line-height:1.5;color: #454444;
}

.login-form p {
  font-size:clamp(1.6rem,.5vw,2rem);
  line-height:1.35;
}

.register-table label {
  text-align: left;
  width: 126px;
}

.form-cont-inner .form-heading {
  text-align: center;
  margin-bottom: clamp(3rem,2vw,4rem);
}

.popup-inner .form-heading {
  text-align: center;
  margin-bottom: clamp(2rem,1vw,4rem);
}

.deployed-content {
  color: white;
  height: 77%;
  font-size: clamp(6rem,12vw,10rem);
  display:flex;
  align-items:flex-end;
  padding-bottom: clamp(10rem,5vw,20rem);
  flex: 1 1 30%;
  justify-content: center;
  z-index: 1;
}

.logoportal {
  justify-self: flex-start;
  align-self:flex-start;
  top: -5%;
}

.login-layout-body .invisible-logo{
  visibility: hidden !important;
}

button {
  outline: 0;
  border:none;
  cursor: pointer;
}

a, input[type=submit]{
  cursor: pointer;
}

.ucview-logo {
  max-width: clamp(12rem,12vw,180rem);
  margin: 4rem 0 0 4rem;
}

.yellow-blob,.blue-blob {
  position:absolute;
}

.yellow-blob {
  left: -4%;
  bottom:0%;
  max-width: 6rem;
}

.blue-blob {
  right: 0%;
  top: 6%;
  max-width: 6rem;
}

#forgot-password-btn {
  color:#0090D4;
  font-weight:bold;
  font-size: clamp(1.4rem,.4vw,1.8rem);
  text-align: right;
  line-height: 3;
  margin-bottom: clamp(1rem,.5vw,2rem);
}

.login-button {
  display:flex;
  flex-direction:column;
}

.forgot-password-buttons{
  flex-direction:row !important;
  position: relative;
}

.multi-factor-authentication-button{
  margin-top: 10px;
}

.blue-btn {
  background:#0090D4;
  width:100%;
  color:white;
  font-weight: bold;
  text-align: center;
  font-size: clamp(1.8rem,.5vw,2rem);
  padding: clamp(1.5rem,1.75vw,2rem);
  border-radius:1rem;
  margin-bottom: clamp(1rem,.5vw,2rem);
  text-decoration: none;
  -webkit-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  transition: background-color 0.3s;
  border: none;
}

.blue-btn:hover, .blue-btn:focus {
  background-color:#e7b428; 

}



.grybutton:hover {
  background-color:#e7b428; 
}

#forgot-password-btn:hover {
  color:#e7b428; 
}

.grybutton {
  background: #ebebeb;
  width:100%;
  color:white;
  font-weight: bold;
  text-align: center;
  font-size: clamp(1.8rem,.5vw,2rem);
  padding: clamp(1.5rem,1.75vw,2rem);
  border-radius:1rem;
  color: #454444;
  text-decoration: none;
}

.deployed-content span {
  display:block;
  color:#FFC52B;
}

.connected-content span {
  display:block;
  color:#FFC52B;
}

#close-forgot-password-popup:hover {
  transform: scale(1.1);
} 


#popup-wrapper {
  opacity:0;
  top: 0%;
  pointer-events: none;
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00000069;
  align-items: start;
  padding-top: 100px;
}

.popup-content {
  background:#fff;
  width: clamp(20rem,50%,70rem);
  height: clamp(43rem,33%,50rem);
  display: flex;
  border-radius: 2rem;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%) scale(0.5);
  transition: all .36s;
  position: relative;
}

.show {
  width:100%;
  height:100%;
  opacity:1 !important;
  pointer-events: all !important;
  z-index:9999;

}

.show > .popup-content {
  transform: translateY(0%) scale(1);
}

.blur {
  filter: blur(1rem);
  pointer-events: none;
  z-index:0;
}

.popup-content > img {
  position:absolute;
}

.popup-inner {
  max-width: clamp(30rem,50%,60rem);
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#close-forgot-password-popup {
  font-size:8rem;
  color:#f55858;
  cursor:pointer;
  top: -6rem;
  position: absolute;
  right: 0rem;
  transition: all .3s;
}

.passwordimgtop {
  position: absolute;
  top: 3rem;
  right: -3rem; 
  max-width: 8rem;
}

.signed-form {
  display:flex;
  justify-content: flex-end;
}

.passwordimgbottom {
  position: absolute;
  bottom: 2.7rem;
  left: -3rem; 
  max-width: 8rem;
}

.form-heading h2 {
  text-align: center;
  font-size: clamp(4.8rem,1.5vw,6rem);
  line-height: 1.35;
}

.form-heading p {
  text-align: center;
  font-size: clamp(1.6rem,.5vw,1.8rem);
  line-height: 1.35;
}

.popup-inner .form-group {
  margin-bottom: clamp(1rem,1vw,2rem);
}

.login-form .form-heading h2 {
  font-size: 36px;
}

.login-layout-body {
  height: 100vh;
}
.form-cont-inner .form-heading {
  margin-bottom: 0px;
}

@media screen and (max-width: 1400px) {   
  .logoportal {
    align-self: center;
  }
  .ucview-logo {
    max-width:  clamp(15rem,35vw,180rem);
    width: 130px;
  }

  .popup-content .form-heading h2 {
    font-size: clamp(3.6rem,1.5vw,4rem);
  }

  .popup-content .form-heading p {
    text-align: center;
    font-size: clamp(1.4rem,.35vw,1.6rem);
    line-height: 1.35;
  }

}


@media screen and (max-width: 768px) {  
  .form-cont-inner {
    padding: 0;
   }
   .yellow-blob {
      width: 6rem;
      left: -5%;
   }
   .blue-blob {
      width: 6rem;
      right: 0%;
   }
   .popup-inner {
      max-width: 75%;
   }
   .popup-content {
      width: 75%;
   }
   .popup-inner form .login-button .blue-btn {
      margin-top:2rem;
   }
}


@media screen and (max-width: 540px) {  
  .yellow-blob {
    display:none;
   }
   .blue-blob {
    display:none;
   }
   .popup-content > img {
      display:none;
   }

   .popup-content {
      width: 90%;
   }

   .popup-content .form-heading h2 {
      font-size: 3rem;
   }

  .login-layout-body .under-maintainance {
    border-radius: clamp(4rem,4%,8rem) !important;
  }
   
  .login-form {
    flex: none;
    height:100%;
    border-radius:0;
    width:100%;
    max-width: 100% !important;
  }

  .form-cont-inner {
    justify-content: space-around;
    height: 90%;
  }
  .col-cont{
    height:92.2%;
  }
  #bg {
    height: auto;
  }
  .form-heading h2{
    font-size: 34px;
    margin-bottom: 10px;
  }
  #bg .login-form{
    margin-top: 0px;
  }

  .ucview-logo {margin: 0;padding: 2rem;}
  .logoportal {
    display:none;
  }
}

@media screen and (min-width: 5000px) {  
  .form-cont-inner {
    justify-content: space-evenly;
  }

  .login-form {
    flex: 1 1 clamp(50rem,20vw,30%);
    height:70%;
  }

  .connected-content {
    font-size: clamp(6rem,12vw,15rem);
  }

  .deployed-content {
      font-size: clamp(6rem,12vw,15rem);
  }
  body {
    background-position: center, 123% -18%, -39% 134%, left;

  }
}

@media screen and (max-width: 1400px) {  
  .login-form{
    margin-top: 40px;
    height: auto;
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 1023px) {  
  .connected-content {
    display:none;
  }

  .deployed-content {
      display:none;
  }

}
@media screen and (max-width: 1200px) and (min-width: 1024px)  {
  .connected-content h2.connecttitle, .deployed-content h2.connecttitle {
    font-size: 40px;
  }
}

@media screen and (max-height: 710px) and (min-height: 500px)  {
  .login-form {
    height: 88vh !important;
  }
  .login-form .login-button .blue-btn, .login-form .login-button .grybutton {
    padding: clamp(0.0rem,0.75vw,1rem);
  }
  div#bg {
    position: relative;
    bottom: 60px;
  }

  .user-setup-form, 
  .user-not-in-system-containor{
    margin-top: 20px;
  }

  .user-not-in-system-containor .user-not-in-system *,
  .user-register-form .error-message span{
    font-size: 1.4rem !important;
  }

  .enforce-multi-factor-authentication-containor{
    margin-top: 40px;
  }

  .password-reset-new-form, 
  .password-reset-edit-form, 
  .multi-factor-authentication-containor{
    margin-top: 80px;
  }
}

@media screen and (max-height: 499px) and (min-height: 360px)  {
  .password-reset-new-form, 
  .password-reset-edit-form, 
  .user-setup-form, 
  .user-register-form, 
  .user-not-in-system-containor,
  .multi-factor-authentication-containor,
  .enforce-multi-factor-authentication-containor{
    margin-top: 20px;
  }
  .login-form {
    height: 88vh !important;
  }


  div#bg {
    position: relative;
    bottom: 60px;
  }
  .login-form .login-button .blue-btn, 
  .login-form .login-button .grybutton,
  .multi-factor-authentication-containor .blue-btn, 
  .multi-factor-authentication-containor .grybutton,
  .user-not-in-system-containor .blue-btn, 
  .user-not-in-system-containor .grybutton{
    padding: clamp(0.0rem,0.75vw,1rem);
    margin: 0px 5px;
  }
  .login-button {
    flex-direction: row;
  }
  .login-button .grybutton{
    height: 35px;
  }
  .login-form .form-heading p{
    display: none;
  }
  .login-form .logoportal {
    max-width: 20%;
  }
  .login-layout-body .blob-top {
    top: -331px;
    right: 0;
  }
}

@media screen and (max-height: 710px) and (min-height: 470px)  {
  .user-setup-form{
    height: auto;
  }
  .user-register-form{
    margin-top: 15px;
  }
  .user-setup-form .user-setup-button button, 
  .user-register-form .register-buttons .blue-btn, 
  .user-not-in-system-containor .login-button .blue-btn,
  .user-not-in-system-containor .login-button a{
    padding: clamp(0.0rem,0.75vw,1rem);
  }
}

@media screen and (max-height: 570px) and (min-height: 470px){
  .user-register-form .register-table label{
    margin-top: 0
  }
  .user-register-form .register-table td{
    padding-top: 0;
  }
  .user-register-form{
    height: 93vh;
  }
}


.password-reset-new-form .login-button button{
  font-size: 30px;
}
.blob-top {
  top: -161px;
  right: 0;
}


@media screen and (max-height: 600px) {   
  .login-form {
    height:100%;
  }
  .ucview-logo {
    max-width: clamp(18rem,5vw,180rem);
  }
  .login-form h2 {
    font-size: clamp(2.8rem,3.2vw,6rem);
    line-height: 1.5;
    color: #454444;
  }
  .logoportal {
    align-self: center;
    max-width: 15%;
  }
  .ucview-logo {
    margin: 1rem 0 0 4rem;
  }
}

.warning-message, .warning-message *{
  font-size: 1.4rem;
  color: red;
  font-weight:bolder;
  margin-top: 2rem;
}

.register-message{
  color:green;
  font-weight:bolder;
  font-size: 1.4rem;
}

.box-user_setup .box-user-setup-info,
.user-register-form .box-user_setup{
  margin-top: 10%;
}

.box-user_setup .errorExplanation{
  margin-top: 1rem;
}

.user-setup-table, 
.user-setup-button .blue-btn, 
.errorExplanation, 
#fatfree_div span, 
.btn-reset-password,
.btn-update-password,
.user-not-in-system{
  margin-top: 2rem; 
}

.errorExplanation h2, .errorExplanation p{
  font-size: 16px;
  color: red;

}

.errorExplanation ul li{
  font-size: 1.4rem;
  color: red;
}

.box-user-setup-info p{
  font-size: 1.8rem;
  font-weight: 1000;
}

.box-user_setup p{
  font-size: 16px;
  font-weight: 1000;
  margin-bottom: 15px;
}

#fatfree_div span, .register-table *{
  font-size: 1.7rem;
}

.register-table td{
  padding-top: 1.2rem;
  padding-left: 1.2rem;
}

.register-buttons{
  display: flex;
  align-items: center;
}

.user-not-in-system *{
  font-size: 1.7rem;
}

.ucview-logo-for-card{
  display: none;
}

.uniguest-form-loader,
.register-buttons .loader{
  margin-left: 50%;
  margin-right: 50%;
  display: none;
  width: 25px;
  margin-bottom: 5px;
}

.user-setup-button .loader,
.login-button .password-reset-new-loader,
.login-button .password-reset-edit-loader,
.register-buttons .loader{
  margin-top: 2rem;
}

.under-maintainance .site-maintainance{
  width: auto !important;
}

.login-layout-body .under-maintainance{
  height: 100% !important;
}

.site-maintainance .header{
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}

@media screen and (max-height: 700px) and (max-width: 880px){
  .login-form .ucview-logo-for-card,
   .password-reset-new-form .ucview-logo-for-card,
    .password-reset-edit-form .ucview-logo-for-card,
    .user-setup-form .ucview-logo-for-card,
    .user-register-form .ucview-logo-for-card,
    .user-not-in-system-containor .ucview-logo-for-card,
    .multi-factor-authentication-containor .ucview-logo-for-card,
    .enforce-multi-factor-authentication-containor .ucview-logo-for-card{
    display: block;
    background-color: #24a9eb;
    padding: 10px;
    border-radius: 8px;
    width: 102px;
    position: relative;
    bottom: 24px;
    right: 15px;
  }
  .login-form .logoportal, 
  .password-reset-new-form .logoportal, 
  .password-reset-edit-form .logoportal, 
  .user-setup-form .logoportal,
  .user-register-form .logoportal,
  .user-not-in-system-containor .logoportal,
  .multi-factor-authentication-containor .logoportal,
  .enforce-multi-factor-authentication-containor .logoportal{
    display: none;
  }
  .login-layout-body .ucview-logo{
    display: none;
  }
}

@media screen and (max-width: 880px) { 
  div#bg {
    bottom: 0;
  }
}

@media screen and (max-height: 650px) and (min-height: 570px){
  .user-not-in-system-containor{
    height: 89vh;
  }
}

@media screen and (max-height: 710px){
  .password-reset-edit-form .uniguest-form-button,  
  .password-reset-new-form .uniguest-form-button,
  .multi-factor-authentication-containor .uniguest-form-button,
  .enforce-multi-factor-authentication-containor .uniguest-form-button{
    padding: clamp(0.0rem,0.75vw,1rem);
  }
}