.main {
  /* background-color: rgb(206, 29, 29); */
  flex-direction: column;
  align-items: center;
  color: #3366CC;
  height: 117.6vh;
  zoom: 85%;
}

.left-section {
  height: 117.6vh;
}

.right-section {
  /* background-color: rgb(123, 106, 85); */
  height: 117.6vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.title-logo-name-section {
  /* padding: 12px; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 20vh;
  width: 100%;
  color: white;
  background-color: #1285a8ce;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 2vh;
  position: relative;
  margin-top: 2vh;
}

.title-section {
  background-color: rgba(0, 255, 255, 0);
  position: relative;
  text-align: center;
  /* letter-spacing: 2.5px; */
  font-weight: bold;
  margin-top: 20px;
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 21px;
}

.header-footer {
  width: 100%;
}

.form-section {
  margin-top: 2vh;
}

/* CSS Styles for the .login-box */
.login-box {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  background-color: #1285a8ce;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 2vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* CSS Styles for the .login-box h5 */
.login-box h5 {
  margin: 0 0 10vh;
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 3vh;
  text-align: center;
  color: #000080;
  display: flex;
}

.Elab {
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-align: center;
}

/* CSS Styles for the .input_text */
.input_text {
  margin-bottom: 3vh;
  width: 70vh;
  position: relative;
}

/* CSS Styles for the input[type="text"] and input[type="password"] */
input[type="text"],
input[type="password"] {
  height: 6vh;
  width: 100%;
  background-color: #fff;
  outline: 0;
  padding: 5px 10px;
  padding-left: 5vh;
  border-radius: 10px;
}

#captcha-input {
  border: none;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.915);
  height: 6vh;
  width: 40vh;
  font-size: 2.5vh;
}

.form-control {
  font-size: 2.5vh;
}

/* CSS Styles for the .fa-lock and .fa-user icons */
.fa-lock,
.fa-user {
  position: absolute;
  top: 2vh;
  font-size: 2.5vh;
  left: 1dvh;
  cursor: pointer;
  color: #70747C;
}

.fa-eye {
  position: absolute;
  top: 2vh;
  font-size: 2.5vh;
  right: 1.2vh;
  cursor: pointer;
  color: #70747C;
}

.fa-eye-slash {
  position: absolute;
  top: 2vh;
  font-size: 2.5vh;
  right: 1dvh;
  cursor: pointer;
  color: #70747C;
}

/* CSS Styles for the .login_btn */
.login_btn {
  margin-top: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CSS Styles for the login button */
.login_btn button {
  margin-top: 15px;
  height: 6vh;
  outline: 0;
  border: none;
  width: 30%;
  border-radius: 30px;
  color: #fff;
  font-size: 2vh;
  cursor: pointer;
  border: none;
  background-color: #1e5085;
  transition: all 0.5s;
  margin-bottom: 25px;
}

/* CSS Styles for the login button on hover */
.login_btn button:hover {
  background-color: #0056b3;
}

/* CSS Styles for the .brand_logo_container */
.brand_logo_container {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #ffffff;
  padding: 5px;
  text-align: center;
}

/* CSS Styles for the .brand_logo */
.brand_logo {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #ffffff;
  padding: 3px;
  text-align: center;
}

/* CSS Styles for the .brand_logo on hover */
.brand_logo:hover {
  border-radius: 100px;
  padding: 1px;
  box-shadow: rgba(255, 255, 255, 0.486) 0px 0px 0px 2px, rgba(78, 0, 235, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  transform: translateY(-1px);
  color: #3366CC;
  border-bottom: #000000;
}

.error-message {
  color: rgb(3, 28, 63);
  animation: blink 0.50s infinite alternate;
}

@keyframes blink {
  0% {
    color: red;
  }

  100% {
    color: white;
  }
}

.elab-section {
  margin-top: 2vh;
}

/* CSS Styles for responsive design */
@media screen and (max-width: 1202px) {
  .main-row {
    display: flex;
    flex-direction: column-reverse;
  }

  .titel-section {
    background-color: rgba(224, 255, 196, 0);
    display: flex;
    justify-content: center;
    position: relative;
    /* top: px; */
    left: 0px;
  }

  .elab-section {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 85vh;
    left: -0px;
  }

  .uk-slideshow-items-eLab-login {
    top: 30vh;
    margin-bottom: 35vh !important;
  }

  .error-message {
    top: 78vh;
    color: rgb(3, 28, 63);
    animation: blink 0.50s infinite alternate;
  }
}

@media screen and (max-width: 668px) {
  .carousel-section {
    background-color: rgba(255, 228, 196, 0);
    display: flex;
    justify-content: center;
    position: absolute;
    top: 1400px;
    left: 0px;
    padding: 30px;
  }

}

.eLab-login-card-outersection {
  background-color: #FDEBB9 !important;
  /* height: 1000vh !important; */
  width: 100vw !important;
  border-radius: 3vh;
}

.eLab-card-login {
  width: 100% !important;
  border-radius: 3vh;
  border: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  position: relative;
}

.uk-slideshow-items-eLab-login {
  width: 100vw !important;
  border-radius: 10vh;
}