:root {
  --valid: #62af9a;
  --invalid: #ce7e7b;
  --blue: #2060df;
}

.point {
  cursor: pointer;
}

.login-box {
  max-width: 600px;
}

.center-login {
  max-width: 400px;
  display: block;
  padding: 35px;
  margin-left: auto;
  margin-right: auto;
}

.blue-color {
  color: var(--blue);
}

.valid {
  color: var(--valid);
}

.invalid {
  color: var(--invalid)
}

.undecorated-link {
  text-decoration: none;
}

.center-text {
  text-align: center;
}

.center-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-div {
  max-width: 500px;
  display: block;
  padding: 35px;
  margin-left: auto;
  margin-right: auto;
}

.material-symbols-outlined {
  display: inline-flex;
  vertical-align: text-bottom;
}

.icon-for-heading-fix {
  vertical-align: 0.5px;
}

.fit-text {
  text-wrap: nowrap;
}

.link-padding {
  padding: 4px;
}

/* CSS Loader */

#loader {
  width: 100%;
  height: 4.8px;
  position: fixed;
  top: 0px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

#loader::after {
  content: '';
  box-sizing: border-box;
  width: 0;
  height: 4.8px;
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  animation: animFw 10s linear infinite;
}

@keyframes animFw {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}