#surveyResults { display: none; }
.official-blue{ background: #3C629A; }
.official-red{ background: #BE435D; }
.official-green{ background: #8FBA98; }
.official-yellow{ background: #DE8743; }
.official-black{ background: #2F2F2E; }
.official-gray{ background: #8E8E8B; }
.official-lightgray{ background: #D9D9D8; }


.styled-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  outline: none;
  margin: 2px 7px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.styled-checkbox:checked {
  border-color: #333;
  background-color: #090;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fff;
}

.styled-checkbox:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #090;
}

.styled-checkbox:checked::before {
  content: "\2713";
  position: absolute;
  top: 55%;
  left: 55%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 16px;
  color: #E1F3D6;
  transition: all 0.3s ease-in-out;
}

.styled-checkbox:disabled {
  background-color: #ddd; /* Light gray color */
}

.checkbox-label {
  display: flex;
  align-items: center;
  margin-left: 8px;
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  line-height: 18px !important;
  cursor: pointer;
}

.checkbox-container {
  display: grid; /* Use grid display */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Set the column width and allow auto-fill */
  grid-gap: 1rem; /* Adjust the gap between columns as needed */
}

.checkbox-container.col-count-2 {
  column-count: 2;
}

.checkbox-container.col-count-3 {
  column-count: 3;
}

.bold-label {
  font-family: "Avenir Next", sans-serif;
  font-weight: bold;
}

/*.checkbox-container label {
  display: flex;
  align-items: center;
}
*/
/* Generic page elements */
.question-container,
#question-container {
  font-family: "Avenir Next", sans-serif;
  width: 100%;
  padding: 0px;
  background-color: #ffffff;
  border: 0px solid #fff;
  border-radius: 0px;
  margin-bottom: 0px;
  display: flex;
  justify-content: center; /* Center the question boxes horizontally */
/*  justify-content: flex-start;*/
  align-items: flex-start;
  flex-wrap: nowrap;
  box-sizing: border-box;
  --flex-basis: calc((100% - 40px) / 3);
  --width: 33.33%;
  --max-width: calc((100% - 40px) / 3);
}


.question-box {
  font-family: "Avenir Next", sans-serif;
  margin: 3px;
  padding: 8px;
  border: 1px solid #7fb980; /* Lighter shade of green for the border */
  border-radius: 12px;
  background-color: #f1fff5; /* Lighter shade of green for the background */
  box-sizing: border-box;

/*  display: flex;
  flex-direction: column;
*/  flex-direction: row; /* Change flex-direction to row */
  align-items: center;
  text-align: center;

  flex-basis: var(--flex-basis);
  width: var(--width);
  max-width: var(--max-width);
}

.rate-description {
font-family: "Avenir Next", sans-serif;
color: #2F2F2E;
margin: 0 6px;
font-size: 14px;
display: inline-block;
width: 100%;
white-space: normal;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}

.tip-container {
  font-family: "Avenir Next", sans-serif;
  width: 100%;
  padding: 20px;
  background-color: #f0f8ff; /* Official light blue */
  border: 1px solid #add8e6; /* Official lighter blue */
  border-radius: 5px;
  margin-bottom: 20px;
}

.tip-box {
  font-family: "Avenir Next", sans-serif;
  padding: 10px;
  background-color: #e0f7fa; /* Official lighter blue */
  border: 1px solid #4dd0e1; /* Official blue */
  border-radius: 5px;
  margin-bottom: 10px;
}

.question {
  font-family: "Avenir Next", sans-serif;
  font-size: 90%; /* Reduce font size by 10% */
  font-weight: bold;
  color: #333;
  line-height: 1.4; /* Adjust line height as needed */
  min-height: 2.8em; /* Height to accommodate three lines of text */
/*  overflow: hidden; */
}

/* Radio-related classes */
.styled-radio {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  outline: none;
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  background-color: #fff; /* Add this line to set the background color to white */
}

.styled-radio:checked {
  border-color: #090;
  background-color: #090;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #090; /* Add this line to create a thin white space */
}

.styled-radio:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #090;
}

.styled-radio:checked + label {
  color: #000;
}

.styled-radio + label {
  margin-right: 10px; /* Add desired margin value here */
  display: inline-flex; /* Use inline-flex to keep the label and radio inline */
  align-items: center; /* Align items vertically */
  color: #000;
  margin-top: -3px; /* Shift the label up by 3 pixels */
  cursor: pointer;
}

.styled-radio:checked + label {
  color: #000;
}

.radio-label-text, .styled-radio + .radio-label-text {
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
}

/* Visual effects */
.visual-effect {
  transition: all 0.3s ease-in-out;
}

.visual-effect:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.bold-label {
  font-family: "Avenir Next", sans-serif;
  font-weight: bold;
}

/* Progress bar */
.progress-container {
  font-family: "Avenir Next", sans-serif;
  width: 100%;
  height: 20px;
  background-color: #f3f3f3;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  position: relative;
  margin-bottom:14px;
}

.progress-bar {
  height: 100%;
  background-color: #090;
  border-radius: 5px;
  width: 0;
  transition: width .4s ease-in-out;
}

#centered-content {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.progress-label {
  font-family: "Avenir Next", sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  display: inline-block;
}

.timer,
#timer {
  font-family: "Avenir Next", sans-serif;
  font-size: 14px;
  color: #333;
  display: inline-block;
}

.paused-text {
  display: none; /* Initially hidden */
  color: #090;
  font-weight: 900;
  background:#f3f3f3;
  border-radius: 3px;
  margin-left: 6px;
  padding: 4px;
  border: 1px solid #090;
  vertical-align: middle;
  font-size: 14px; /* Adjust the font size as needed */
  /* Add any other desired styles for the "paused-text" span tag */
}

/* Ratings-related classes */
.rating-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  white-space: nowrap;
}

.rating-circle-container {
  display: flex;
}

.rating-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid #D9D9D8;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.rating-circle:hover {
  background-color: #090;
  border-color: #2F2F2E;
}

.rating-circle.selected {
  background-color: #090;
  border-color: #090;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #090;
}

.rating-circle.selected:hover {
  background-color: #090;
  border-color: #090;
}

.rating-number {
  font-weight: bold;
  color: #2F2F2E;
}

.rating-circle.selected .rating-number,
.rating-circle:hover .rating-number {
  color: #fff;
}

.radio-button {
  display: none;
}

.radio-button-label {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  background-color: #689f38;
  transition: background-color 0.3s ease-in-out;
}

.radio-button-label:hover,
.radio-button:checked + .radio-button-label {
  background-color: #090;
}

.radio-button:checked + .radio-button-label:before {
  content: "\u2714";
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}

/* Modal */
/* Add this CSS code to your stylesheet or <style> tag */
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 9999;
}

#modal-container {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translate(-50%, 150px);
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  opacity: 0;
}

#modal-content {
  /* Add your desired styles for the content of the modal */
}

#next-page-button, .modal-button {
  display: block;
  margin: 20px auto 0;
  background-color: #4caf50;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
/* Animation for modal fade-in */
.modal-fade-in {
  animation: modalFadeIn 250ms ease-in-out forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.hp_h3 {
  font-size: 150% !important;
  text-align: center !important;
}

.hp_p {
  text-align: left;
}

.start-over-button {
  background-color: #4caf50;
  color: #fff;
}

.go-back-button {
  background-color: #ff0000;
  color: #fff;
}

/* Other generic styles */
p,
h3,
h4,
div,
b,
strong,
span,
label {
  font-family: "Avenir Next", sans-serif;
}

/* Default style to ensure horizontal display on desktop */
.radio-unit {
    display: inline-flex;
}

@media only screen and (max-width: 768px) {
    #question-container {
        width: 100%;  /* Maximizing the container width */
        padding: 0 2%; /* Optional: Add a small padding to the left and right */
    }

    .question-box {
        flex-basis: 100%; /* Sets the default size of an element before the remaining space is distributed */
        max-width: 100%; 
        width: 100%;
    }

    .question {
      font-size: 85%; /* Reduce font size by 15% */
    }

    #modal-container {
      top: 25%;
      left: 50%;
      transform: translate(-50%, 0);
      width: 90vw;
      padding: 16px;
    }

    /* Positioning the styled radio and its label on separate lines on mobile */
    .radio-unit {
        display: block; /* This stacks the .radio-unit containers vertically on mobile */
        margin-bottom: 5px; /* Some space between each radio+label pair */
        text-align: left; 
    }

    .styled-radio {
        margin-right: 10px;
    }
}