body {
  background: #d0d0d0;
  font-family: "Roboto", "Helvetica Neue", sans-serif;
}

h3 {
  font-size: 1.375rem;
  margin-top: 1rem;
}

h4 {
  margin-bottom: 0.625rem;
  font-size: 1.25rem;
}

p {
  color: #979797;
  font-size: 0.875rem;
}

.card {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.card .card-header {
  border-bottom: 1px solid #ececec;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 1rem;
  text-decoration: none;
}
.card .card-header h4 {
  color: #3a7be0;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}
.card .card-header .supervisor-details {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}
.card .card-header .supervisor-details img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-right: 0.625rem;
}
.card .card-header .supervisor-details p {
  margin-right: 0.625rem;
}
.card .card-header .supervisor-details a {
  margin-top: -1rem;
}
.card .card-header .supervisor-details span.toggle-card {
  margin-right: 0.5rem;
  color: #979797;
  border: 2px solid #979797;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
}

.user-image {
  width: 10rem;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
}

.user-name {
  text-align: center;
}
.user-name h3 {
  margin-bottom: 0.125rem;
  color: #3a7be0;
  text-transform: uppercase;
}
.user-name h4 {
  margin-top: 0.125rem;
  color: #3a7be0;
  text-transform: uppercase;
}
.user-name p {
  line-height: 1.5rem;
}

.menu .item, .menu .sub-item {
  display: flex;
  flex-direction: column;
}
.menu .item .item-details, .menu .item .sub-item-details, .menu .sub-item .item-details, .menu .sub-item .sub-item-details {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 0.625rem;
  border-left: 5px solid #fff;
  cursor: pointer;
}
.menu .item .item-details:hover, .menu .item .sub-item-details:hover, .menu .sub-item .item-details:hover, .menu .sub-item .sub-item-details:hover {
  background: #ececec;
  border-left: 5px solid #3a7be0;
}
.menu .item .item-details span.fa, .menu .item .sub-item-details span.fa, .menu .sub-item .item-details span.fa, .menu .sub-item .sub-item-details span.fa {
  font-size: 1rem;
  margin-right: 0.25rem;
  display: inline-block;
  color: #979797;
}
.menu .item .item-details p, .menu .item .sub-item-details p, .menu .sub-item .item-details p, .menu .sub-item .sub-item-details p {
  margin-top: 0.875rem;
}
.menu .item .sub-menu, .menu .sub-item .sub-menu {
  display: none;
}
.menu .item.active .item-details {
  background: #ececec;
  border-left: 5px solid #3a7be0 !important;
}
.menu .item.active .sub-menu {
  display: flex;
  flex-direction: column;
}
.menu .item.active .sub-menu .sub-item {
  margin-left: 1rem;
}
.menu .item.active .sub-menu .sub-item.active .sub-item-details {
  background: #ececec;
  border-left: 5px solid #3a7be0 !important;
}

.cards {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.cards .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 0;
  /*height: 7rem;*/
  text-align: center;
}
.cards .card span.fa, .cards .card img {
  font-size: 2rem;
}
.cards .card h4 {
  margin-top: 0.5rem;
}
.cards .card-schedule {
  background: #f8d849;
  color: #fff;
}
.cards .card-cafeteria {
  background: #4aa393;
  color: #fff;
}
.cards .card-absences {
  background: #4ca9df;
  color: #fff;
}
.cards .card-tardies {
  background: #c4342f;
  color: #fff;
}

.clubs .club h4 {
  font-weight: bold;
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  color: #949494;
}
.clubs .club .club-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}
.clubs .club .club-details img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-right: 0.625rem;
}
.clubs .club .club-details p {
  margin-right: 0.625rem;
}
.clubs .club .club-details a {
  margin-top: -1rem;
}

.subject-details .chart .supervisor-details {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}
.subject-details .chart .supervisor-details img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-right: 0.625rem;
}
.subject-details .chart .supervisor-details p {
  margin-right: 0.625rem;
}
.subject-details .chart .supervisor-details a {
  margin-top: -1rem;
}
.subject-details .assignments .assignment-detail {
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #333;
  margin-bottom: 1rem;
}
.subject-details .assignments .assignment-detail .assignment-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.subject-details .assignments .assignment-detail .assignment-header .assignment-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}
.subject-details .assignments .assignment-detail .assignment-header .assignment-heading span.fa {
  font-size: 0.875rem;
  margin-right: 0.5rem;
  color: #979797;
  border: 2px solid #979797;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subject-details .assignments .assignment-detail .assignment-header .assignment-heading .title {
  display: flex;
  flex-direction: column;
}
.subject-details .assignments .assignment-detail .assignment-header .assignment-heading .title .assignment-title, .subject-details .assignments .assignment-detail .assignment-header .assignment-heading .title .assignment-sub-title {
  margin: 0.125rem 0;
  font-size: 0.875rem;
  font-weight: normal;
}
.subject-details .assignments .assignment-detail .assignment-header .assignment-heading .title .assignment-title {
  color: #979797;
}
.subject-details .assignments .assignment-detail .assignment-header .assignment-heading .title .assignment-sub-title {
  color: #3a7be0;
}
.subject-details .assignments .assignment-detail .assignment-header .completion {
  font-size: 0.875rem;
  color: #979797;
}
.subject-details .assignments .assignment-detail .assignment-content {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.subject-details .assignments .assignment-detail .assignment-content .assignment-description, .subject-details .assignments .assignment-detail .assignment-content .assignment-info {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #d4d4d4;
  font-size: 0.875rem;
  color: #979797;
}
.subject-details .assignments .assignment-detail .assignment-content .assignment-info {
  border: none;
}

/*# sourceMappingURL=index.css.map */