/**
 * @file login.css
 * @brief Archivo de Estilos para las pantallas de Inicio de Sesion o Similares
 * @author IoPLAY
 */

@font-face {
  font-family: 'SKPayidar';
  src: url('/vistas/fonts/SKPayidar.woff2') format('truetype');
}

@font-face {
  font-family: 'HelveticaNowText';
  src: url('/vistas/fonts/HelveticaNowText.woff2') format('truetype');
}

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

body {
  color: #000;
  font-family: 'HelveticaNowText';
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  text-align: left;
  overflow-y: scroll;
  background: #293139;
}

form {
  height: 100%;
  width: 100%;
}

a:not(.btn) {
  color: #aeaeae;
}

button,
input[type='button'] {
  border: 0;
  cursor: pointer;
  transition: 0.25s ease-in-out transform;
  outline: none;
}

.box {
  z-index: 2003;
  min-height: 570px;
  justify-content: center;
  background: #1d252d;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  padding: 0 1mm;
  top: 0;
  height: 100%;
  max-width: 400px;
  width: 100%;
}

.content {
  z-index: 1;
  gap: 4mm;
  display: flex;
  flex-direction: column;
  color: #fffedf;
}

i.ion-o.logo-o {
  font-size: 20px;
}

i.ion-o.logo-o span:first-child:before {
  color: #293239;
}

i.ion-o.logo-o span:last-child:before {
  color: var(--blue) !important;
}

.form-control *,
button {
  z-index: 1;
}

.form-control {
  display: flex;
  flex-direction: row;
  gap: 2mm;
  align-items: center;
}

.form-control label {
  font-size: .9rem !important;
  min-width: 120px;
  text-align: right;
  line-height: .8rem;
}

.content input {
  font-family: 'HelveticaNowText';
  min-height: 25px;
  width: 100%;
  background: #343d45;
  border-style: solid;
  border-color: transparent;
  border-width: 1px;
  color: #cdd1d4;
  font-size: 1rem;
  outline: 2px solid transparent;
  max-width: 240px;
  outline-offset: 2px;
  padding: 0 3.5mm;
}

.content input:focus {
  border-color: var(--blue);
}

.content button:not(.view_pass),
.content a.btn {
  font-family: 'HelveticaNowText';
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  min-height: 25px;
  color: #ffffff;
  font-size: 1rem;
  min-width: 25px;
  width: fit-content;
  padding: 0 2mm;
  background-color: var(--blue);
  outline: none;
  border: none;
  z-index: 3;
}

.content>button:not(.view_pass),
.content>a.btn {
  margin-left: calc(120px + 2mm);
}

div:has(>.logo-iomux) {
  z-index: 1;
  display: flex;
  gap: 2mm;
  margin-left: 15.5px;
  margin-top: 2mm;
  position: absolute;
  top: 0;
  justify-content: left;
  align-items: center;
}

.logo-iomux {
  font-family: 'SKPayidar';
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 2px;
}

.logo {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20mm;
  justify-content: center;
}

.logo i.ion-o-iomux {
  z-index: 2;
  font-size: 60px;
}

.logo i {
  z-index: 1;
  font-size: 60px;
}

.logo>i.ion-hexagon {
  position: absolute;
  z-index: 1;
  font-size: 90px;
}

.logo>i.ion-hexagon .path1::before {
  color: transparent !important;
}

.logo .ion-o-iomux .path1:before {
  color: #eef0f1 !important;
}

.logo .ion-o-iomux .path2:before {
  color: var(--blue) !important;
}

.logo .extra-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  opacity: .7;
  z-index: 0;
}

.logo-o {
  font-size: 20px;
}

.logo .extra-bg::after {
  content: '';
  background: rgb(29, 37, 45);
  background: linear-gradient(90deg, rgb(29, 37, 45, 1) 0%, rgba(0, 0, 0, 0) 50%);
  height: 304px;
  position: absolute;
  width: 500px;
  z-index: 2;
}

.logo .extra-bg i {
  position: absolute;
}

.logo .extra-bg i span:before {
  color: #30383f !important;
}

.logo .extra-bg i:nth-child(1) {
  right: 30px;
}

.logo .extra-bg i:nth-child(2) {
  right: calc(30px + 27.04px + 1mm);
  margin-bottom: calc(90px + 4mm);
}

.logo .extra-bg i:nth-child(3) {
  right: calc(30px - 27.04px - 1mm);
  margin-bottom: calc(90px + 4mm);
}

.logo .extra-bg i:nth-child(4) {
  right: 30px;
  margin-bottom: calc(180px + 8mm);
}

.logo .extra-bg i:nth-child(5) {
  right: calc(30px + 54.08px + 2mm);
  margin-bottom: calc(90px + 90px + 8mm);
}

.logo .extra-bg i:nth-child(6) {
  right: calc(30px + 108.16px + 4mm);
  margin-bottom: calc(180px + 8mm);
}


.logo .extra-bg i:nth-child(7) {
  right: calc(30px + 81.12px + 3mm);
  margin-top: calc(90px + 4mm);
}

.logo .extra-bg i:nth-child(8) {
  right: calc(30px + 135.2px + 5mm);
  margin-bottom: calc(90px + 4mm);
}

.content p {
  font-size: 1rem;
  color: #aeaeae;
  text-align: center;
}

.error {
  z-index: 2;
  color: var(--error) !important;
}

.info {
  z-index: 2;
  color: #000000 !important;
}

.lightmode .info {
  z-index: 2;
  color: #ffffff !important;
}

.captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.captcha img {
  width: fit-content;
}

.captcha div {
  display: flex;
  gap: 2mm;
  width: 100%;
}

.passwordContainer {
  width: 100%;
  position: relative;
  display: flex;
  max-width: 240px;
  align-items: center;
}

.passwordContainer input {
  width: 100%;
}

.passwordContainer button {
  position: absolute;
  right: 2mm;
  text-decoration: none;
  cursor: pointer;
  color: #cdd1d4;
  font-size: 1rem;
  outline: none;
  background: transparent;
  border: none;
}

.ion-iomux {
  font-size: 35px;
}

.settings-navbar-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2005;
  border-radius: 2px;
}

.settings-navbar-container.show {
  display: initial;
}

.settings-title {
  color: #cdd1d4;
  font-size: 1.2rem;
}

.settings-navbar {
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  background: #293139;
  padding: 6mm;
  max-width: 355px;
  min-width: 205px;
  margin: 2mm;
}

.settings-item p {
  color: #cdd1d4;
  font-size: 0.95rem;
}

.settings-item>span {
  color: #7f888f;
  font-size: 0.9rem;
}

.settings-item {
  padding: 2mm 0;
}

.settings-item:last-child {
  padding-bottom: 0;
}

.settings-x {
  cursor: pointer;
  position: absolute;
  background: transparent;
  top: 0;
  min-width: 25px;
  min-height: 25px;
  right: 0;
  margin: 4mm;
  color: #ffffff;
}

.settings-x:hover {
  background: #343b43;
}

.top-navbar-content {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: center;
  height: 35px;
  width: 100%;
}

.top-navbar-content>div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-navbar {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100%);
  z-index: 2000;
  background: #1d252d;
  padding-left: 2mm;
}

.top_settings {
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  color: #caccce;
  padding: 4px;
}

.top_settings:hover {
  background: #293038;
}

.top-item {
  padding: 0 1mm;
  height: 100%;
}

.modo-claro {
  cursor: pointer;
  width: 25px;
  height: 25px;
  position: relative;
  display: block;
  background-color: #666666;
  overflow: hidden;
}

.modo-claro::after {
  content: '\e950';
  font-family: 'ioplay_icons';
  font-size: 16px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #293139;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modo-claro.active::after {
  content: '\e94f';
  color: #e6e8e9;
}

.modo-claro.active {
  background-color: var(--blue);
}

.login-info .box {
  max-width: 100%;
}

.login-info .content>button:not(.view_pass),
.content>a.btn {
  margin: auto;
}

.login-info .top-navbar,
.login-info.lightmode .top-navbar {
  z-index: 2004;
  border: none;
  background: transparent;
}

.login-info .error {
  font-size: 20px;
}

.snd-btn {
  background: #3f464d !important;
  color: #cdcfb9 !important;
}

.lightmode .ion-x-iomux .path3:before {
  color: #293239;
}

.lightmode i.ion-o.logo-o span:first-child:before,
.lightmode i.ion-o.logo-o span:last-child:before,
.lightmode .logo-iomux {
  color: #293239;
}

.lightmode .logo .ion-o-iomux .path1:before {
  color: #1d252d !important;
}

.lightmode .settings-title,
.lightmode .settings-item p {
  color: #2f1d23;
}

.lightmode .settings-x {
  color: inherit;
}

.lightmode .settings-x:hover {
  background: #dbdedf;
}

.lightmode .settings-navbar {
  background: #e6e8e9;
}

.lightmode .top-navbar {
  background: #eef0f1;
}

.lightmode .top_settings {
  color: #202020;
}

.lightmode .top_settings:hover {
  background: #e3e6e7;
}

.lightmode .box {
  background: #eef0f1;
}

.lightmode .logo .extra-bg::after {
  background: rgb(238, 240, 241);
  background: linear-gradient(90deg, rgba(238, 240, 241, 1) 0%, rgba(0, 0, 0, 0) 50%);
}

.lightmode .logo .extra-bg i span:before {
  color: #ffffff !important;
}

.lightmode .content {
  color: #000000;
}

.lightmode .content input {
  background: #ffffff;
  border-color: #ffffff;
  color: rgb(58 74 86/1);
}

.lightmode .content input:focus {
  border-color: var(--blue);
}

.lightmode .passwordContainer button {
  color: rgb(58 74 86/1);
}

.lightmode {
  background: #ffffff;
}

.lightmode .box {
  border-color: #bdc2c6;
}

.lightmode .snd-btn {
  background: #c8cbcd !important;
  color: #2a1d1d !important;

}

@media screen and (max-width: 991px) {
  .buttons-container {
    padding-left: 0 !important;
  }

  .top-item {
    padding: 0;
  }

  .top-navbar {
    z-index: 2004;
    width: calc(100% - 399px);
  }

  .captcha img {
    width: 100%;
  }

  .logo .extra-bg::after {
    width: 100vw;
  }
}

@media screen and (max-width: 450px) {
  .form-control {
    flex-direction: column;
  }

  .form-control input,
  .passwordContainer {
    max-width: inherit;
  }

  .form-control label {
    min-width: 100%;
    text-align: left;
  }

  .captcha .form-control {
    flex-wrap: nowrap;
    flex-direction: row;
  }

  .captcha .form-control label {
    max-width: fit-content;
    min-width: fit-content;
  }

  .content>button:not(.view_pass),
  .content>a.btn {
    margin-left: 0;
  }

  .box {
    min-width: 100%;
    border-color: transparent !important;
  }

  .top-navbar {
    z-index: 2004;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
  }
}

@keyframes rotate {
  0% {
    transform: rotate3d(3, 2, 3, 310deg);
  }

  100% {
    transform: rotate3d(-3, 2, -3, 310deg);
  }
}

button, a, input:not([type="radio"], [type="checkbox"]), select, textarea, .custom_select, .ca_style, .cv_style, .cr_style, .cg_style, .btn, .status-indicator, .collapse, .reboot-card, .top-item, .small-box, .custom_option_container, img, .modo-claro, .settings-navbar{
    border-radius: 2px !important;
}

#refresh-captcha{
  padding: 0 !important;
}