$primaryColor: #e9175e;
$successBackColor: #d1e7dd;
$successBorderColor: #badbcc;
$darkGreen: #0f5132;
$lightGreen: #7ad03a;
$lightBlue: #007cba;
$errorBackColor: #f8d7da;
$errorBorderColor: #f5c2c7;
$errorColor: #842029;
$lightRed: #a00;
$defaultBoxShadow: 0 0 15px rgba(0, 0, 0, 0.1);

// Material icons
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/material-icons.woff2") format("woff2");
  font-display: swap;
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.error-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 40%;
  min-width: 400px;
  margin: 24px auto;

  p {
    font-size: 1.5em;
    font-weight: bold;
  }

  img {
    width: 400px;
    height: auto;
  }
}

.nav-tab-wrapper {
  .nav-tab.active {
    border-bottom: 3px solid $lightBlue;
  }
}

.alert {
  text-align: center;
  padding: 10px 20px;
  margin-top: 20px;
  color: $primaryColor;
}

.two-col-grid {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
  gap: 10px;
  li {
    background-color: #fff;
    padding: 16px;
    border-radius: 5px;
    text-align: center;
    box-shadow: $defaultBoxShadow;
    a:hover {
      text-decoration: underline;
    }
  }
}

input:disabled {
  cursor: not-allowed;
}