.hide {
  display:none !important;
}
.mosaic-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
/*	min-height: 100vh;*/
	margin: 0;
	font-family: "Lato";
	font-weight: 300;
	font-size: 24px;
	background: #2b2b2b;
 }
 .mosaic-loader {
  --cell-size: 24px;
  --cell-spacing: 1px;
  --border-width: 1px;
  --cells: 6;
  --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
  display: flex;
  flex-wrap: wrap;
  width: var(--total-size);
  height: var(--total-size);
}
.mosaic-loader > .cell {
  width: 24px;
  height: 24px;  
  --cell-color: white;
  flex: 0 0 var(--cell-size);
  margin: var(--cell-spacing);
  background-color: transparent;
  box-sizing: border-box;
  border: var(--border-width) solid var(--cell-color);
  animation: 1.5s ripple ease infinite;
}
.mosaic-loader > .cell.d {
  animation: none;
  border: none;
}
.mosaic-loader > .cell.d {
  animation: none;
  border: none;
}
.mosaic-loader > .cell.d-0 {
  --cell-color: #B3E5FC;
}
.mosaic-loader > .cell.d-1 {
  animation-delay: 100ms;
  --cell-color: #81D4FA;
}
.mosaic-loader > .cell.d-2 {
  animation-delay: 200ms;
  --cell-color: #4FC3F7;
}
.mosaic-loader > .cell.d-3 {
  animation-delay: 300ms;
  --cell-color: #29B6F6;
}
.mosaic-loader > .cell.d-4 {
  animation-delay: 400ms;
  --cell-color: #03A9F4;
}
.mosaic-loader > .cell.d-5 {
  animation-delay: 500ms;
  --cell-color: #039BE5;
}
.mosaic-loader > .cell.d-6 {
  animation-delay: 600ms;
  --cell-color: #0288D1;
}
.mosaic-loader > .cell.d-7 {
  animation-delay: 700ms;
  --cell-color: #0277BD;
}
.mosaic-loader > .cell.d-8 {
  animation-delay: 800ms;
  --cell-color: #01579B;
}

@keyframes ripple {
  0% {
    background-color: transparent;
  }
  30% {
    background-color: var(--cell-color);
  }
  60% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}