html,
body,
#root {
  height: fit-content;
  background-color: #f3f6f9 !important;
  color: #0f0f0f !important;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}

main {
  margin: 0 auto;
  flex-grow: 1;

  max-width: calc(100vw - var(--main-margin-left) - var(--main-margin-right) - var(--nav-width))
    /* max-width: ;
  width: var(--main-width)); */
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper {
  width: 100%;
}

#content {
  margin-top: 60px;
  width: 100%;
  padding: 0;
  margin-left: 0px;
  min-height: 100vh;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#content.active {
  margin-left: 240px;
}

main.form-public {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 87px;
  /* margin-bottom: 100px; */
  margin: 0px;
  max-width: 100%;
}

/* .form-control {
  background-color: #f1f1f1;
} */

.public .form-control {
  font-size: 1rem;
  max-width: 315px;
}

.container.public .form-group {
  width: 265px;
  text-align: center;
}

.loader-container-overlay {
  position: fixed;
  background: transparent;
  opacity: 0.8;
  height: 100%;
  width: 100%;
  z-index: 999999;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
}

.bg-spinner {
  background: #202020;
  position: absolute;
  width: 100%;
  height: auto;
  min-height: 100%;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.loadingContainer {
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.loadingContainerInner {
  position: relative;
  width: 100%;
  height: 100%;
}

.rainbow {
  position: relative;
  z-index: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  margin-top: 30px;
}

.rainbow.inner {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  margin-top: 30px;
}

.loadingContainerInner .rainbow::before,
.loadingContainer .rainbow::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(#f1f1f1, #f1f1f1), linear-gradient(transparent, transparent),
    linear-gradient(#f1f1f1, #f1f1f1);
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
}

.rainbow::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#202020, #202020),
    linear-gradient(#f1f1f1, #f1f1f1), linear-gradient(#202020, #202020),
    linear-gradient(#f1f1f1, #f1f1f1);
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
}

.loadingContainerInner .rainbow::after,
.loadingContainer .rainbow::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 9px;
  top: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  background: #ededed;
  border-radius: 5px;
}

.rainbow::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 9px;
  top: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  background: #202020;
  border-radius: 5px;
}

@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }
}

@media (min-width: 992px) {
  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }
}

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}