*{
  font-family: 'Lato', sans-serif !important;
}
body {
  margin: 0;
  padding: 0;
}


.sidebar {
  color: #ecf0f1;
  height: 100%;
  overflow-y: auto;
}

.sidebar a.pages{
  color: white;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sidebar a.pages:hover{
  background-color: #525252;
}
.sidebar a.pages:active{
  background-color: #525252;
}
.sidebar hr{
  border-color: #525252; 
}

input[type = 'checkbox']{
  accent-color: #d2232a;
}

.i::before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 20%;
  background: white;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.i:hover:before {
  animation: anim-in 0.7s forwards ease-out;
}

@keyframes anim-in {
  100% {
    opacity: 0%;
    border-radius: 0;
    width: 600px;
    height: 600px;
  }
  0% {
    width: 0px;
    height: 0px;
    border-radius: 100%;
    opacity: 20%;
  }
}

.animate-fade-in {
  animation: fadeIn 1.5s ease-in-out;
}

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