body {
  background: var(--cyber-light-grey);
  letter-spacing: -0.03em
}

.flex {
  position: sticky;
}

.rounded-lg {
  border-radius: 0px;
}

.bg-secondary-100 {
  --tw-bg-opacity: 0;
}

.h3-tos-cyber {
  font-size: 1.2rem;
  font-family: "InterSemiBold";
  margin-top: 10px !important;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.p-tos-cyber {
  padding-left: 1rem;
  padding-right: 1rem;
}

.ul-tos-cyber {
  padding-left: 2rem;
  padding-right: 1rem;

}

.a-cyber {
  text-decoration: underline;
  text-decoration-color: var(--cyber-red);
  transition: color var(--transition-color);
}

.a-cyber:hover {
  color: var(--cyber-red)
}

.bg-cyber {
  filter: brightness(0.9);
  background-color: var(--cyber-light-grey);
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
  background-image: var(--bg);
  -webkit-animation: fadeInLight 1s;
  -moz-animation: fadeInLight 1s;
  -o-animation: fadeInLight 1s;
  animation: fadeInLight 1s;
}

.border-secondary-200#username,
.border-secondary-200#password {
  border-top: unset;
  border-left: unset;
  border-right: unset;
  border-radius: unset;
}

.border-secondary-200:focus {
  border-radius: unset;
}

.totp-secret {
  font-weight: 700 !important;
  text-align: center;
  padding-top: 9px;
}

.bg-primary-600 {
  background-color: var(--cyber-green);
}

.bg-primary-600:hover {
  filter: brightness(0.993);
}

.ml-2 {
  color: var(--cyber-black) !important;
}

.bg-white {
  -webkit-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  border-radius: 4px !important;
}

.text-secondary-600 {
  color: var(--cyber-black);
}

.space-y-2 {
  padding-top: 1rem;
}

.xl-heading-cyber {
  margin-left: 10px;
  font-size: 1.8rem;
  font-family: "InterSemiBold";
  margin-top: 10px !important;
  -webkit-animation: fadeInHeaderXL 0.8s;
  -moz-animation: fadeInHeaderXL 0.8s;
  -o-animation: fadeInHeaderXL 0.8s;
  animation: fadeInHeaderXL 0.8s;


}

.l-heading-cyber {
  color: #9e9e9e;
  margin-left: 13px;
  margin-top: 8px !important;
  margin-bottom: -5px !important;
  -webkit-animation: fadeInHeaderl 0.8s;
  -moz-animation: fadeInHeaderL 0.8s;
  -o-animation: fadeInHeaderL 0.8s;
  animation: fadeInHeaderL 0.8s;

}

.cyberlogo {
  max-width: 210px;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-left: -7px;
}

.focus\:border-primary-300:focus {
  border-color: var(--cyber-dark-grey);

}

.border-secondary-200 {
  border-color: var(--cyber-light-grey);
}

/*Dark mode*/
@media (prefers-color-scheme: dark) {
  body {
    background: #5c5c5c;
  }

  .bg-cyber {
    filter: brightness(0.36);
    background-color: var(--cyber-black);
    -webkit-animation: fadeInDark 1s;
    -moz-animation: fadeInDark 1s;
    -o-animation: fadeInDark 1s;
    animation: fadeInDark 1s;
  }

  .bg-white {
    -webkit-box-shadow: 0 2px 20px #707070;
    -moz-box-shadow: 0 2px 20px #707070;
    box-shadow: 0 2px 20px #707070;
  }

  .text-secondary-600 {
    color: var(--cyber-dark-grey);
  }
}

/*End of dark mode*/

@keyframes fadeInDark {
  from {
    opacity: 0;
    filter: brightness(0.2);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.36);
    transform: scale(1);
  }
}

@-o-keyframes fadeInDark {
  from {
    opacity: 0;
    filter: brightness(0.2);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.36);
    transform: scale(1);
  }
}

@-moz-keyframes fadeInDark {
  from {
    opacity: 0;
    filter: brightness(0.2);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.36);
    transform: scale(1);
  }
}

@-webkit-keyframes fadeInDark {
  from {
    opacity: 0;
    filter: brightness(0.2);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.36);
    transform: scale(1);
  }
}

@keyframes fadeInLight {
  from {
    opacity: 0;
    filter: brightness(0.7);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.9);
    transform: scale(1);
  }
}

@-o-keyframes fadeInLight {
  from {
    opacity: 0;
    filter: brightness(0.7);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.9);
    transform: scale(1);
  }
}

@-moz-keyframes fadeInLight {
  from {
    opacity: 0;
    filter: brightness(0.7);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.9);
    transform: scale(1);
  }
}

@-webkit-keyframes fadeInLight {
  from {
    opacity: 0;
    filter: brightness(0.7);
    transform: scale(0.995);
  }

  to {
    opacity: 1;
    filter: brightness(0.9);
    transform: scale(1);
  }
}

@keyframes fadeInHeaderL {
  from {
    opacity: 0;
    margin-left: 12px;
  }

  to {
    opacity: 1;
    margin-left: 13px;
  }
}

@-o-keyframes fadeInHeaderL {
  from {
    opacity: 0;
    margin-left: 12px;
  }

  to {
    opacity: 1;
    margin-left: 13px;
  }
}

@-moz-keyframes fadeInHeaderL {
  from {
    opacity: 0;
    margin-left: 12px;
  }

  to {
    opacity: 1;
    margin-left: 13px;
  }
}

@-webkit-keyframes fadeInHeaderL {
  from {
    opacity: 0;
    margin-left: 12px;
  }

  to {
    opacity: 1;
    margin-left: 13px;
  }
}

@keyframes fadeInHeaderXL {
  from {
    opacity: 0;
    margin-left: 9px;
  }

  to {
    opacity: 1;
    margin-left: 10px;
  }
}

@-o-keyframes fadeInHeaderL {
  from {
    opacity: 0;
    margin-left: 9px;
  }

  to {
    opacity: 1;
    margin-left: 10px;
  }
}

@-moz-keyframes fadeInHeaderL {
  from {
    opacity: 0;
    margin-left: 9px;
  }

  to {
    opacity: 1;
    margin-left: 10px;
  }
}

@-webkit-keyframes fadeInHeaderL {
  from {
    opacity: 0;
    margin-left: 9px;
  }

  to {
    opacity: 1;
    margin-left: 10px;
  }
}