/* Please ❤ this if you like it! */


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

/* #login-page-container {
  min-height: 100%;
  height: auto;
} */

#login-page-row {
  /* min-height: 100%; */
  /* height: 100%; */
  /* height: auto; */
  max-height: 100%;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}


#login-logo-col {
  /* background-color: yellow; */
  background-color: var(--aethero-linen);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 20rem;
  /* column constrains logo */
  height: 20rem;
  /* prevent stretching */
  /* flex: 0 0 auto;        */
}
#login-form-col {
  background-color: var(--aethero-sage);
  /* height: 60%; */
  /* height: fit-content; */
  display: flex;
  /* align-self: flex-start; */
  align-items: center;
  justify-content: center;
}


#login-telos-logo {
  height: 100%;
  width: auto;
  max-height: 100%;
  /* max-height: 20rem; */
  object-fit: contain;
}










#login-form-card {
  display: flex;
  flex-direction: column;
  background-color: var(--aethero-navy);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  /* margin: 4rem; */
  /* min-width: 32rem; */
  /* width: 100%; */
  /* width: 36rem; */
  /* max-width: 85%; */
  /* height: 100%; */
  max-height: 100%;
}
#login-form-card-title {
  /* color: red; */
  font-size: 1.75rem;
}
.login-form-group{ 
  position: relative;
  display: block;
  /* display: flex; */
  /* margin: 0; */
  padding: 0;
  /* background-color: aquamarine; */
  width: auto;
  flex: 1;
}

.form-group{ 
  position: relative;
  display: block;
  /* display: flex; */
  /* margin: 0; */
  padding: 0;
  /* background-color: aquamarine; */
  width: auto;
  flex: 1;
}

.form-style {
  /* padding: 13px 20px; */
  padding: 1rem 3.5rem;
  padding-left: 3.5rem;
  height: 3rem;
  width: 100%;
  /* font-weight: 500; */
  /* border-radius: 4px; */
  font-size: 1.125rem;
  /* line-height: 22px; */
  /* letter-spacing: 0.5px; */
  outline: none;
  /* color: #c4c3ca; */
  /* background-color: #1f2029; */
  border: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
  
  color: black;
  background-color: var(--aethero-linen);
  border-radius: 100px;
  font-family: var(--aethero-body-font-family);
  
  
}
.form-style:focus,
.form-style:active {
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
  position: absolute;
  top: 0rem;
  left: 0.5rem;
  /* height: 3rem; */
  font-size: 2rem;
  /* line-height: 3rem; */
  text-align: left;
  /* color: #ffeba7; */
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    
  color: var(--aethero-ochre);
    
}

/* Placeholder styles for all browsers */
.form-group input::placeholder {
  opacity: 0.7;
  color: var(--bs-secondary-color);
  transition: opacity 200ms linear;
}
.form-group input:focus::placeholder {
  opacity: 0;
}

/* Chrome, Safari, Opera */
.form-group input::-webkit-input-placeholder {
  opacity: 0.7;
  color: var(--bs-secondary-color);
  transition: opacity 200ms linear;
}
.form-group input:focus::-webkit-input-placeholder {
  opacity: 0;
}

/* Firefox 19+ */
.form-group input::-moz-placeholder {
  opacity: 0.7;
  color: var(--bs-secondary-color);
  transition: opacity 200ms linear;
}
.form-group input:focus::-moz-placeholder {
  opacity: 0;
}

/* IE 10+ */
.form-group input:-ms-input-placeholder {
  opacity: 0.7;
  color: var(--bs-secondary-color);
  transition: opacity 200ms linear;
}
.form-group input:focus:-ms-input-placeholder {
  opacity: 0;
}

/* Firefox 4-18 */
.form-group input:-moz-placeholder {
  opacity: 0.7;
  color: var(--bs-secondary-color);
  transition: opacity 200ms linear;
}
.form-group input:focus:-moz-placeholder {
  opacity: 0;
}

#login-submit-btn {
  /* height: 8rem; */
  font-size: 1.125rem;
}

.forgot-password-link {
  font-size: 1rem;
  text-decoration: none;
  color: #c4c3ca;
  text-decoration: none;
}
.forgot-password-link:hover {
  color: #ffeba7;
  transition: all 200ms linear;
  cursor: pointer;
  /* color: var(--aethero-ochre); */
}




/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* ... */

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* ... */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* ... */
    #login-page-row {
    /* background-color: cornflowerblue; */
    height: 100%;
    /* max-height: 100%; */
  }
  #login-logo-col {
    /* background-color: yellowgreen; */
    height: 100%;
    max-height: 100%;
  }
  #login-form-col {
    /* background-color: orange; */
    height: 100%;
    max-height: 100%;
  }
  #login-telos-logo {
    max-height: 30rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* ... */
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  /* ... */
}