@font-face {
    font-family: "neo latina";
    src: url("https://db.onlinewebfonts.com/t/2a3b4ac4f313da1cbf67e31db002cfc0.eot");
    src: url("https://db.onlinewebfonts.com/t/2a3b4ac4f313da1cbf67e31db002cfc0.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/2a3b4ac4f313da1cbf67e31db002cfc0.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/2a3b4ac4f313da1cbf67e31db002cfc0.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/2a3b4ac4f313da1cbf67e31db002cfc0.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/2a3b4ac4f313da1cbf67e31db002cfc0.svg#neo latina")format("svg");
}
@import url(https://db.onlinewebfonts.com/c/2a3b4ac4f313da1cbf67e31db002cfc0?family=neo+latina);


@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* overflow: auto; /* or overflow: visible; */
  overflow: -moz-hidden-unscrollable;
  overflow: hidden;
}


.ring {
  position: relative;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.ring i {
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  transition: 0.5s;
  z-index: 1;
}
.ring i:nth-child(1) {
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  animation: animate 6s linear infinite;
}
.ring i:nth-child(2) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate 4s linear infinite;
}
.ring i:nth-child(3) {
  border-radius: 41% 44% 56% 59%/38% 62% 63% 37%;
  animation: animate2 10s linear infinite;
}
.ring:hover i {
  border: 6px solid var(--clr);
  filter: drop-shadow(0 0 20px var(--clr));
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.login {
  position: absolute;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.login h2 {
  font-size: 2em;
  color: #fff;
}
.login h3 {
  font-size: 2em;
  color: #fff;
}


.login .inputBx {
  position: relative;
  width: 100%;
}
.login .inputBx input {
  position: relative;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 40px;
  font-size: 1.2em;
  color: #fff;
  box-shadow: none;
  outline: none;
  text-transform: none; /* Evitar la transformación automática de mayúsculas y minúsculas */
  -webkit-text-autocapitalize: none; /* Propiedad específica para Safari e iOS */
}
/* Agregar los nuevos estilos para el botón de inicio de sesión */
.overlay__btns {
  width: 100%;
  max-width: 30rem;
  display: flex;
}

.overlay__btn {
  width: 50%;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 599;
  color: #fff; /* Cambié var(--light-color) a #fff para la demostración */
  background: #333; /* Cambié var(--dark-color) a #333 para la demostración */
  border: none;
  border-radius: 0.5rem;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease; /* Añadir transiciones para más propiedades */
  outline-color: hsl(210, 95%, 50%); /* Añadí un valor fijo para el ejemplo */
}

.overlay__btn:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.overlay__btn--transparent {
  background: transparent;
  color: #333; /* Cambié var(--dark-color) a #333 para la demostración */
  border: 2px solid #333; /* Cambié var(--dark-color) a #333 para la demostración */
  margin-right: 0.75rem;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease; /* Añadir transiciones para más propiedades */
}

.overlay__btn--transparent:hover {
  background: #333; /* Cambiar el color de fondo en hover */
  color: #fff; /* Cambiar el color del texto en hover */
  cursor: pointer;
}

.login .links {
  position: relative;
  width: 100%;
  display: flex;
  font-size: 1em;
  justify-content: space-between;
  padding: 0 20px;
}
.login .links a {
  color: #fff;
  text-decoration: none;
}


         
@media only screen and (max-width: 400px) {
  .overlay {
    padding: 1.5rem;
  }

  .overlay__btns {
    flex-wrap: wrap;
  }

  .overlay__btn {
    width: 100%;
    font-size: 0.75rem;
    margin-right: 0;
  }

  .overlay__btn:first-child {
    margin-bottom: 1rem;
  }
}

/* Estilos específicos para pantallas de hasta 600px de ancho (móviles) */
@media only screen and (max-width: 400px) {
  .ring {
    width: 100%;
    height: auto;
  }

  .ring i {
    border: 2px solid #fff;
    margin: 5px;
  }

  .login {
    width: 80%;
    margin: 10px; /* Añadir un margen para evitar que se aleje demasiado del borde de la pantalla */
  }

  .login h2,
  .login h3 {
    font-size: 1.8em; /* Aumentar el tamaño de las cabeceras en pantallas pequeñas */
  }

  .login .inputBx input {
    padding: 12px 18px; /* Ajustar el relleno del campo de entrada */
    font-size: 1.2em; /* Aumentar el tamaño del texto del campo de entrada */
  }

  .overlay__btn {
    font-size: 1rem; /* Aumentar el tamaño del texto del botón */
    margin-right: 0;
  }

  .overlay__btn:first-child {
    margin-bottom: 1rem;
  }
}


@media only screen and (max-width: 500px) {
  .ring {
    width: 96%;
    height: 450px;
  }

  .login {
    position: absolute;
    width: 272px;
    height: 89%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    }
    .login .links {
      position: relative;
      width: 100%;
      display: flex;
      font-size: 0.9em;
      justify-content: space-between;
      padding: 0 20px;
      }
}
.p-b-20 {
  padding-bottom: 10px !important;
}

.p-t-20 {
  padding-top: 10px !important;
}	
p {
  font-size: 11.5px;
}
.auth-wrapper a, .auth-wrapper p > a {

  font-size: 11.5px;
}
.wrap-login100{
 /*background: rgb(73 80 87 / 60%); */
 background-color: rgba(255,255,255,0.13);
 border-radius: 10px;
 backdrop-filter: blur(10px);
 padding: 50px 35px;
 box-shadow: 0 0 40px rgb(8 7 16 / 60%);
}

.auth-wrapper{
 background-color: hsl(218, 41%, 15%);
    background-image: radial-gradient(650px circle at 0% 0%,
        hsl(218, 41%, 35%) 15%,
        hsl(218, 41%, 30%) 35%,
        hsl(218, 41%, 20%) 75%,
        hsl(218, 41%, 19%) 80%,
        transparent 100%),
      radial-gradient(1250px circle at 100% 100%,
        hsl(218, 41%, 45%) 15%,
        hsl(218, 41%, 30%) 35%,
        hsl(218, 41%, 20%) 75%,
        hsl(218, 41%, 19%) 80%,
        transparent 100%);
}
.hh{
color: #fff;	
}	
.txt2{
color: #fff;
}

.btn-outline-dark {
color: #ffffff;
background-color: transparent;
background-image: none;
border-color: #ffffff;
}


  #id_error_display_fixed table {
      color: #dedede;
  }
  #id_error_display_fixed table td{
    padding: 2px 5px;
  }
  #id_error_display_fixed table .scButton_default{
    background: transparent;
    font-weight: bold;
    cursor:pointer;
  }
  #id_error_display_fixed {
    z-index: 1;
      color: #dedede;
    bottom: 56% !important;
    right: 9%;
    padding: 15px;
      background-color: rgba(222, 44, 44, 1);
          background: rgba(222, 44, 44, 1);
    -webkit-box-shadow: 10px 10px 13px -9px rgba(0,0,0,0.65);
    -moz-box-shadow: 10px 10px 13px -9px rgba(0,0,0,0.65);
    box-shadow: 10px 10px 13px -9px rgba(0,0,0,0.65);
    border-radius: 19px 19px 19px 19px;
    -moz-border-radius: 19px 19px 19px 19px;
    -webkit-border-radius: 19px 19px 19px 19px;
    border: 0px solid #000000;
    position: fixed;
   }
.lotne{
    width: 50%;
  
  
}
.loginIndex{
  z-index: 2;

}