#main-content-container {
  /*position: relative;*/
  height: 100vh;
}

#container {
  text-align: left;
  height: 100vh;
  display: flex;
}

#leftCard {
  padding: 15% 10rem;
  width: 50%;
  background-color: white;
}

#rightCard {
  width: 50%;
  overflow: hidden;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
}

.form-group i {
  position: relative;
}


.hover-link {
  text-transform: uppercase;
  margin-top: 2rem;
  float: left;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.hover-link:hover {
  text-decoration: underline;
}

.form-group > input {
  min-width: 220px;
}

.input-icons i {
  position: fixed;
  text-align: center;
}

.input-icons {
  width: 100%;
  /* margin-bottom: 10px; */
}

.icon {
  padding: 15px;
  min-width: 40px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px 35px;
  
}

img {
  image-rendering: auto;
  /* height: 100vh; */
  width: 50vw;
}

label {
  font-size: 11px;
  text-transform: uppercase;
}

.logo-login {
  margin: 5px;
  position: absolute;
  width: 120px;
  height: fit-content;
}

.footer {
  display: inline;
  position: absolute;
  z-index: 3;
}

#backToTop {
  display: none;
}

@media only screen and (max-width: 992px) {
  #leftCard {
    padding: 20% 7rem;
  }
}

@media only screen and (max-width: 768px) {
  #rightCard {
    display: none;
  }
  
  #leftCard {
    width: 100%;
    padding: 20%;
  }
}

@media only screen and (max-width: 580px) {
  #leftCard {
    padding: 30% 5rem;
  }
}

@media only screen and (max-width: 300px) {
  #leftCard {
    padding: 50% 3rem;
  }
}