:root {
  --app-color-blue: #456ef5;
  --app-color-yellow: #f5d536;
  --app-color-dark: #363636;
  --app-color-green: #85c7af;

  --app-font-family: "Inter", sans-serif;
  --app-font-size: 1rem;
  --app-font-color: #363636;

  --app-navbar-height: 4.3rem;
}

* {
  font-family: var(--app-font-family);
  font-size: var(--app-font-size);
  color: var(--app-font-color);

  line-height: 1;
}

body {
  min-height: 100vh;
  padding-top: var(--app-navbar-height);
}

.fs-xsmall {
  font-size: x-small !important;
}

.fs-smaller {
  font-size: smaller;
}

.fs-small {
  font-size: small;
}

/* ---------------------------------------------- */
/* ---------------- NAVBAR ---------------------- */
/* ---------------------------------------------- */

.navbar-brand > img {
  width: 20%;
}

/* ---------------------------------------------- */
/* ---------------- SCROLLBAR ------------------- */
/* ---------------------------------------------- */

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey;
  border-radius: 10px;
}

/* Handle */
-webkit-scrollbar-thumb {
  background: var(--app-color-dark);
  border-radius: 10px;
}

/* Handle on hover */
-webkit-scrollbar-thumb:hover {
  background: var(--app-color-blue);
}

/* ---------------------------------------------- */
/* ---------------- FORM INPUTS ----------------- */
/* ---------------------------------------------- */

.form-control {
  border-color: var(--app-color-dark);
}

/* ---------------------------------------------- */
/* ---------------- PRELOADER ------------------- */
/* ---------------------------------------------- */

.loading span {
  display: inline-block;
  vertical-align: middle;
  width: 0.6em;
  height: 0.6em;
  margin: 0.19em;
  background: #007db6;
  border-radius: 0.6em;
  animation: loading 1s infinite alternate;
}

.loading span:nth-of-type(2) {
  background: #008fb2;
  animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
  background: #009b9e;
  animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
  background: #00a77d;
  animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
  background: #00b247;
  animation-delay: 0.8s;
}
.loading span:nth-of-type(6) {
  background: #5ab027;
  animation-delay: 1s;
}
.loading span:nth-of-type(7) {
  background: #a0b61e;
  animation-delay: 1.2s;
}

@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}