.error-msg {
  margin: 100px auto;
  display: table;
}

.loader-container {
  box-sizing: border-box;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100vw;
  /* 
  dvw and dvh are relatively new to css, and browser support isn't fantastic yet.
  they are declared after vw and vh so that they will override the previous width and heights,
  if supported.
  */
  width: 100dvw;
  z-index: 1;
}

.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

p {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}