body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #e6e8ed;
  color: #666666;
  font-family: "Montserrat", sans-serif;
}

.material-icons-outlined {
  vertical-align: middle;
  line-height: 1px;
}

.text-primary {
  color: #666666;
}

.text-blue {
  color: #246dec;
}

.text-red {
  color: #cc3c43;
}

.text-green {
  color: #367952;
}

.text-orange {
  color: #f5b74f;
}

.font-weight-bold {
  font-weight: 600;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "main"
    "login";
  height: 100vh;
}


/* ---------- MAIN ---------- */

.main-container {
  grid-area: main;
  overflow-y: auto;
  padding: 20px 20px;
}

.main-title {
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;
}

.main-title > p {
  font-size: 50px;
}

.instructions {
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;
}

.instructions > p {
  font-size: 25px;
}

.main-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}


.log-container {
  min-height: 1vh;
  justify-content: center;
  align-items: top;
  display: flex;
  text-align: center;
  padding: 10px;
}

.test-dashboard-container {
  min-height: 1vh;
  justify-content: center;
  align-items: top;
  display: flex;
  text-align: center;
  padding: 10px;
}



button {
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  font-weight: 600;
  margin: 0 10px;
  width: 200px;
  padding: 10px 0;
  box-shadow: 0 0 20px rgba(104, 85, 224, 0.2);
  transition: 0.4s;
}


.test-dashboard {
  color: rgb(255, 0, 0);
  background-color: rgba(252, 240, 240, 0.377);
  border: 1px solid rgb(255, 62, 62);
}


.log-in {
  color: rgb(255, 0, 0);
  background-color: rgba(252, 240, 240, 0.377);
  border: 1px solid rgb(255, 62, 62);
}


button:hover {
  color: white;
  width:;
  box-shadow: 0 0 20px rgba(92, 73, 73, 0.705);
  background-color: rgb(255, 62, 62);
}


/* ---------- MEDIA QUERIES ---------- */


/* Medium <= 992px */
@media screen and (max-width: 992px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 3fr;
    grid-template-areas:
      "header"
      "main";
  }

  #sidebar {
    display: none;
  }

  .menu-icon {
    display: inline;
  }

  .sidebar-title > span {
    display: inline;
  }
}

/* Small <= 768px */
@media screen and (max-width: 768px) {
  .main-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 0;
  }

  .charts {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
}

/* Extra Small <= 576px */
@media screen and (max-width: 576px) {
  .header-left {
    display: none;
  }
}