/* Extra small devices (portrait phones, less than 576px)
   No media query since this is the default in Bootstrap */

.header {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  font-weight: 300;
  margin-top: 30px;
  margin-bottom: 30px;
}

.content-cards {
  box-shadow: 1px 2px rgba(0, 0, 0, 0.2);
}


.submit-button {
  /* margin-top: 5%; */
  width: 70%;
  background-color: #0181B6;
  border-color: #0181B6;
  color: white;
}


.info-card-body {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: auto;
  flex-wrap: wrap;
}

.info-button {
  margin: 0.25rem;
}

/* Remove default label margin in button groups for proper alignment */
.btn-group label {
  margin-bottom: 0;
}

/* Language selector and header container */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
  gap: 1rem;
}

#languageSelector {
  max-width: 180px;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Small devices (landscape phones, less than 576px) */
@media (max-width: 575px) {
  .header-container {
    flex-direction: column;
    text-align: center;
  }

  .header {
    margin-top: 0;
    margin-bottom: 0;
  }

  #languageSelector {
    width: 100%;
    max-width: none;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  .header {
    text-align: center;
    font-weight: 300;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .content-cards {
    width: 75%;
  }

  .select-label {
    font-size: 1.25em;
    font-weight: 300;
  }

  .custom-select {
    width: 100%;
  }

  .submit-button {
    /* margin-top: 5%; */
    width: 70%;
    background-color: #0181B6;
    border-color: #0181B6;
    color: white;
  }

  .info-cards {
    width: 75%;
  }

}

/* Extra large devices (large desktops, 1200px and up) */
/* @media (min-width: 1200px) {  } */

html {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Avoid the IE 10-11 `min-height` bug. */
}

p {
  font-size: 1.25em;
  font-weight: 300;
}

td {
  font-size: 0.8em;
  font-weight: 300;
}

#form2,
#form3,
#form4,
#form5,
#form6,
#result {
  display: none;
}

#result p {
  font-size: 1em;
  font-weight: bold;
}

.btn-secondary:not([disabled]):not(.disabled).active {
  color: #fff;
  background-color: #0181B6;
  border-color: #0181B6;
  box-shadow: 0 0 0 0.1rem rgba(134, 142, 150, .5);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn.btn-secondary.focus.active {
  color: #fff;
  background-color: #0181B6;
  border-color: #0181B6;
}

.container {
  flex: 1 0 auto;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

.footer {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}