/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/17973908.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: -1;
}

button {
  width: auto;
  padding: 12px;
  font-size: 16px;
  color: white;
  background-color: #0078d4;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.azure-signin {
  margin-top: 10px;
  background-color: #0072c6;
}

button:hover {
  background-color: #005a9e;
}

/*-----------------------------------------------*/
.login-main-container {
  position: absolute;
  top: 50%;
  /* Move the div to the middle of the page */
  left: 50%;
  /* Move the div to the middle of the page */
  transform: translate(-50%, -50%);
  /* Adjust position to truly center */
  width: max-content;
}
/* Centered Box Container */
.centered-box {
  display: flex;
  width: auto;
  max-width: 1200px;
  /* margin: 70px auto; */
  /* margin: 50px auto 70px auto; */
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.centered-box-bottom {
  width: auto;
  max-width: 1200px;
  /* margin: -55px auto; */
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}

.new-copyright-text {
  text-align: center;
  font-size: 12px;
  color: #5c5c5c;
  padding: 0 0 0 2px;
}

.new-tou {
  text-align: center;
  font-size: 12px;
  color: #5c5c5c;
  padding: 0 2px 0 0;
}

/* Form Section */
.form-container {
  flex: 1;
  /* padding: 40px; */
  padding: 40px 10px 40px 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* background-color: #eff7ff; */
  background-color: #f6f6f6;
  max-width: 450px;
}

.form-container h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.form-container label {
  font-size: 14px;
  margin-bottom: 5px;
  color: #404040;
}

.form-container input[type="text"],
.form-container input[type="password"] {
  width: 90%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-container input[type="text"]#captcha-input {
  margin-top: 16px;
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 5px;
  /* margin-bottom: 15px; */
  /* margin-top: -11px; */
}

.captcha-canvas {
  /* border: 1px solid #ddd; */
  border-radius: 4px;
  /* background-color: #f0f0f0; */
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-top: -10px;
}

.checkbox-container label {
  font-size: 14px;
  margin-left: 5px;
  color: #404040;
  margin-top: 6px;
}

.logo-container {
  text-align: center;
  mix-blend-mode: multiply;
  padding: 0px 0 10px 0;
}

/* Right Image Section */
.image-container {
  /* flex: 1; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  display: none;
}

.image-container img {
  /* width: 100%; */
  height: auto;
  /* max-width: 100%; */
  border-radius: 0 8px 8px 0;
  /* image-rendering: pixelated; */
}

.btn-grad {
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  );
}

.btn-grad {
  /* margin: 10px; */
  /* padding: 15px 45px; */
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  /* border-radius: 10px; */
  display: block;
}

.btn-grad:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

.btn-grad-azure-signin {
  background-image: linear-gradient(
    to right,
    #ece9e6 0%,
    #ffffff 51%,
    #ece9e6 100%
  );
}

.btn-grad-sign-in,
.btn-grad-reset {
  background-image: linear-gradient(
    to right,
    #5ab4ff 0%,
    #2277bd 51%,
    #5ab4ff 100%
  );
}

.btn-grad-sign-in,
.btn-grad-reset {
  /* margin: 10px; */
  padding: 10px 25px;
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  /* border-radius: 10px; */
  /* display: block;*/
}

.btn-grad-sign-in:hover,
.btn-grad-reset:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.btn-grad-azure-signin {
  margin: 10px 0 0 0;
  /* padding: 15px 45px; */
  /* text-align: center; */
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: black;
  box-shadow: 0 0 20px #eee;
  font-size: 12px;
  border: 1px solid #d3d3d3;
  /* border-radius: 10px; */
  display: flex;
  align-items: center;
}

.btn-grad-azure-signin:hover {
  background-position: right center;
  color: #757575;
  text-decoration: none;
}

.btn-grad-azure-signin img {
  margin-right: 10px;
}

.hint-text {
  font-size: 10px;
  font-style: italic;
  color: #757575;
}

.image-container img {
  /* width: 100%; */
  height: auto;
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

.input-container-username i.fa-user,
.input-container-password i.fa-lock,
.input-container-username i.fa-inbox {
  position: relative;
  left: -55px;
  /* top: 80%; */
  transform: translateY(170%);
  /* font-size: 18px; */
  color: #888;
}

#username,
#password,
#emailsystem {
  padding-left: 35px;
}

.toggle-password {
  padding: 0 0 0 5px;
  cursor: pointer;
}

.toggle-password i {
  font-size: 14px;
  color: #888;
}

#captcha-input {
  /* width: 51%; */
}

.captcha-error-container {
  margin-top: -28px;
  font-size: 12px;
  padding: 10px 0 10px 2px;
  color: #bc0000;
  display: none;
}

.new-tou a {
  color: #2c76b3;
  text-decoration: none;
}

.new-tou a:hover {
  color: #2c76b3;
  text-decoration: underline;
}

/* Visited link state */
.new-tou a:visited {
  color: #2c76b3;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ------ Dante Chat Custom Css ------ */
/* .dante-image-wrapper div.message-badge {
  display: none !important;
} */
.dante-embed-tooltips {
  display: none !important;
}

/* ------------------------------------ */

/* Desktop View */
@media (min-width: 1024px) {
  /* .centered-box {
    margin: 70px auto;
  } */
  .form-container {
    padding: 40px;
  }
  .image-container {
    display: flex;
  }

  .new-copyright-text {
    float: left;
    font-size: 12px;
    color: #5c5c5c;
    padding: 0 0 0 2px;
  }

  .new-tou {
    float: right;
    font-size: 12px;
    color: #5c5c5c;
    padding: 0 2px 0 0;
  }
}
/* Mobile View */
@media only screen and (max-width: 991px) {
  .hint-text {
    display: block;
  }
}