.menu-icon {
  display: inline-block;
  fill: #171a1c;
  width: 24px;
  height: 24px;
  text-align: center;
  margin-bottom: 0.5rem;
}

.menu-ub {
  display: block;
  width: 92px;
  height: 34px;
  margin-left: calc(50% - 46px);
  text-align: center;
  margin-top: calc(20% + 12px);
  content: url('../images/Ub_Logo.svg');
}

.menu-ub:hover {
  background-color: #001d49f !important;
  opacity: 1 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}

.spinning {
  animation: logo-spin infinite 10s linear;
}

@keyframes logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

i.indicator-positive {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #393939 0%, #151515 100%);
  position: relative;
  margin-right: 25px;
  margin-left: 10px;
}
i.indicator-positive:before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #19f000;
  border: 2px solid black;
  position: absolute;
  left: 1px;
  top: 1px;
}
i.indicator-positive:after {
  content: '';
  width: 11px;
  height: 8px;
  border-radius: 80%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  transform: rotate(-18deg);
  left: 3px;
  top: 3px;
}

i.indicator-neutral {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: relative;
  margin-right: 25px;
  margin-left: 10px;
}

i.indicator-negative {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #393939 0%, #151515 100%);
  position: relative;
  margin-right: 25px;
  margin-left: 10px;
}

i.indicator-negative:before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #b10000;
  border: 2px solid black;
  position: absolute;
  left: 1px;
  top: 1px;
}

i.indicator-negative:after {
  content: '';
  width: 11px;
  height: 8px;
  border-radius: 80%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  transform: rotate(-18deg);
  left: 3px;
  top: 3px;
}

i.prediction-confident {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: relative;
  margin-right: 25px;
  margin-left: 10px;
  background: url('../images/wifi-solid.svg');
  background-size: 16px 16px;
  display: inline-block;
}

i.prediction-neutral {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: relative;
  margin-right: 25px;
  margin-left: 10px;
  background: url('../images/wifi-neutral.svg');
  background-size: 16px 16px;
  display: inline-block;
}

i.prediction-bad {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  position: relative;
  margin-right: 25px;
  margin-left: 10px;
  background: url('../images/wifi-weak.svg');
  background-size: 16px 16px;
  display: inline-block;
}