html {
  height: 100%;
  font-family: "Overpass", sans-serif;
}

body {
  height: 100%;
  flex-direction: column;
}

main {
  width: 100%;
  min-height: calc(100% - 64px - 60px - 170px);
  display: flex;
  padding-top: 2em;
}

.vertical-center {
  align-self: center;
  width: 100%;
}

footer {
  width: 100%;
}

.footer-text > a:link,
.footer-text > a:visited {
  color: white;
  padding-left: 1em;
}

.footer-text {
  text-align: center;
  padding: 0.3em;
  height: 3em;
  background: linear-gradient(
    90deg,
    rgb(195, 158, 193) 0%,
    rgba(7, 106, 171) 100%
  );
  margin-top: -10px;
}

.footer-text > a > i {
  vertical-align: middle;
}

.wave-container {
  z-index: -1;
  position: relative;
  text-align: center;
  overflow: hidden;
}

/*Material.css color adaption -> switch to sass sometimes*/
.btn,
.btn-floating {
  background-color: rgb(15, 3, 3);
}

.btn:hover,
.btn-floating:hover {
  background-color: rgb(7, 106, 171);
}

/* label focus color */
input:focus + label {
  color: rgb(7, 106, 171) !important;
}
/* label underline focus color */
input:focus {
  border-bottom: 1px solid rgb(7, 106, 171) !important;
  box-shadow: 0 1px 0 0 rgb(7, 106, 171) !important;
}

.marquee {
  background-color: red;
  position: fixed;
  top: 64px;
  width: 100%;
  height: 32px;
  white-space: nowrap;
  overflow: hidden;

  display: flex;
  align-items: center;
}

.marquee span {
  display: inline-block;
  color: white;
  font-size: 18px;
  vertical-align:middle;
  padding-left: 33.33%;
  left: 100%;
  animation: marquee 15s linear infinite;
}

.marquee span:nth-child(2) {
  left: 133.33%;
}

.marquee span:nth-child(3) {
  left: 166.66%;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

#adminIcon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  z-index: 1200;
  background-color: transparent;
  display: none;
}