.gen-resilience-tracker-wrapper .container-navbar {
  display: flex;
  flex-wrap: nowrap;
}

.survey-tab {
  color: #fff;
  text-decoration: none;
  padding: 1rem;
  border-radius: 20px 20px 0 0;
  flex: 1;
  text-align: center;
  background: #ababab;
  font-size: 1rem;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.gen-resilience-tracker-wrapper .survey-tab:hover {
  background: #8b8b8b;
  text-decoration: none;
  color: white;
}

.gen-resilience-tracker-wrapper .survey-tab.active {
  font-weight: bold;
  color:white;
  text-decoration: none;
}

.survey-tab.active-diversity {
  background-color: #085f76;
}

.survey-tab.active-redundancy {
  background-color: #d2a838;
}

.survey-tab.active-balancing_connectivity {
  background-color: #597029;
}

.survey-tab.active-system_feedbacks {
  background-color: #a2583f;
}

.survey-tab.active-inclusivity_equity {
  background-color: #848939;
}

.survey-tab.active-adaptive_learning {
  background-color: #ce733a;
}

.survey-container {
  background-color: white;
  margin-top: -1px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.survey-form {
  width: 100%;
}

.survey-container img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-left: 5%;
}

.survey-container .section-diver {
  color: white;
  background-image: url("../Images/diver.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #0073aa;
  width: 100%;
  height: 11rem;
  display: flex;
  align-items: center;
}

.survey-container .section-diver h1 {
  font-size: 3rem;
  margin: 0 auto;
  color: white;
  font-weight: 200;
}

.survey-container .section-redu {
  color: white;
  background-image: url("../Images/redu.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -2px;
  background-color: #0073aa;
  width: 100%;
  height: 11rem;
  display: flex;
  align-items: center;
}

.survey-container .section-redu h1 {
  font-size: 3rem;
  margin: 0 auto;
  color: white;
  font-weight: 200;
}

.survey-container .section-bala {
  color: white;
  background-image: url("../Images/bala.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -2px;
  background-color: #0073aa;
  width: 100%;
  height: 11rem;
  display: flex;
  align-items: center;
}

.survey-container .section-bala h1 {
  font-size: 3rem;
  margin: 0 auto;
  color: white;
  font-weight: 200;
}

.survey-container .section-sistem {
  color: white;
  background-image: url("../Images/sistem.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -2px;
  background-color: #0073aa;
  width: 100%;
  height: 11rem;
  display: flex;
  align-items: center;
}

.survey-container .section-sistem h1 {
  font-size: 3rem;
  margin: 0 auto;
  color: white;
  font-weight: 200;
}

.survey-container .section-inclu {
  color: white;
  background-image: url("../Images/inclu.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -2px;
  background-color: #0073aa;
  width: 100%;
  height: 11rem;
  display: flex;
  align-items: center;
}

.survey-container .section-inclu h1 {
  font-size: 3rem;
  margin: 0 auto;
  color: white;
  font-weight: 200;
}

.survey-container .section-adapt {
  color: white;
  background-image: url("../Images/adaptive.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -2px;
  background-color: #0073aa;
  width: 100%;
  height: 11rem;
  display: flex;
  align-items: center;
}

.survey-container .section-adapt h1 {
  font-size: 3rem;
  margin: 0 auto;
  color: white;
  font-weight: 200;
}

.survey-container .questions {
  padding: 2% 5%;
}

.gen-resilience-tracker-wrapper .question {
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.gen-resilience-tracker-wrapper .question-ult {
  padding-bottom: 10px;
  position: relative;
}

.gen-resilience-tracker-wrapper .description {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: space-between;
}

.gen-resilience-tracker-wrapper .description-item {
  width: 25%;
  margin-top: 25px;
  margin-bottom: 10px;
}

.gen-resilience-tracker-wrapper .range-slider {
  margin: 2% auto;
  position: relative;
  width: 85%;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  color: #333;
}

.range-labels span {
  width: 3%;
  text-align: center;
  font-weight: bold;
}

.question-title-diver {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #085f76;
  font-family: Arial, Helvetica, sans-serif;
}

.sky-input-diver {
  display: none;
}

.sky-label-diver {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  color: #085f76;
  margin-left: 25px;
}

.sky-label-diver::before {
  content: "X";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 23px;
  border: 2px solid rgb(52, 122, 187);
  border-radius: 3px;
  background-color: white;
  color: white;
  text-align: center;
}

.sky-input-diver:checked+.sky-label-diver::before {
  background-color: #8eb9c7;
  border: 2px solid rgb(30, 92, 150);
}

.range-diver {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.range-diver::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  cursor: pointer;
  border: 2px solid rgb(30, 92, 150);
  border-radius: 50%;
  margin-top: -7px;
}

.range-diver::-webkit-slider-runnable-track {
  background: #8eb9c7;
  height: 8px;
  border-radius: 5px;
}

.sky-input-adapt:checked~.description .description-item,
.sky-input-bala:checked~.description .description-item,
.sky-input-diver:checked~.description .description-item,
.sky-input-inclu:checked~.description .description-item,
.sky-input-redu:checked~.description .description-item,
.sky-input-sistem:checked~.description .description-item,
.sky-input-adapt:checked~.range-slider .range-diver,
.sky-input-bala:checked~.range-slider .range-diver,
.sky-input-diver:checked~.range-slider .range-diver,
.sky-input-inclu:checked~.range-slider .range-diver,
.sky-input-redu:checked~.range-slider .range-diver,
.sky-input-sistem:checked~.range-slider .range-diver,
.sky-input-adapt:checked~.range-slider .range-labels span,
.sky-input-bala:checked~.range-slider .range-labels span,
.sky-input-diver:checked~.range-slider .range-labels span,
.sky-input-inclu:checked~.range-slider .range-labels span,
.sky-input-redu:checked~.range-slider .range-labels span,
.sky-input-sistem:checked~.range-slider .range-labels span {
  color: gray !important;
}

.sky-input-adapt:checked~.range-slider .range-adapt::-webkit-slider-runnable-track,
.sky-input-bala:checked~.range-slider .range-bala::-webkit-slider-runnable-track,
.sky-input-diver:checked~.range-slider .range-diver::-webkit-slider-runnable-track,
.sky-input-inclu:checked~.range-slider .range-inclu::-webkit-slider-runnable-track,
.sky-input-redu:checked~.range-slider .range-redu::-webkit-slider-runnable-track,
.sky-input-sistem:checked~.range-slider .range-sistem::-webkit-slider-runnable-track {
  background: gray !important;
}

.sky-input-adapt:checked~.range-slider .range-adapt::-webkit-slider-thumb,
.sky-input-bala:checked~.range-slider .range-bala::-webkit-slider-thumb,
.sky-input-diver:checked~.range-slider .range-diver::-webkit-slider-thumb,
.sky-input-inclu:checked~.range-slider .range-inclu::-webkit-slider-thumb,
.sky-input-redu:checked~.range-slider .range-redu::-webkit-slider-thumb,
.sky-input-sistem:checked~.range-slider .range-sistem::-webkit-slider-thumb {
  border: 2px solid gray !important;
}

.question-title-redu {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #d19f3e;
  font-family: Arial, Helvetica, sans-serif;
}

.sky-input-redu {
  display: none;
}

.sky-label-redu {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  color: #d19f3e;
  margin-left: 25px;
}

.sky-label-redu::before {
  content: "X";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 23px;
  border: 2px solid #f1a567;
  border-radius: 3px;
  background-color: white;
  color: white;
  text-align: center;
}

.sky-input-redu:checked+.sky-label-redu::before {
  background-color: #ffa500;
  border: 2px solid #eb9045;
}

.range-redu {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.range-redu::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  cursor: pointer;
  border: 2px solid #ffa500;
  border-radius: 50%;
  margin-top: -7px;
}

.range-redu::-webkit-slider-runnable-track {
  background: #ebbc96;
  height: 8px;
  border-radius: 5px;
}

.question-title-bala {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #768b48;
  font-family: Arial, Helvetica, sans-serif;
}

.sky-input-bala {
  display: none;
}

.sky-label-bala {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  color: #768b48;
  margin-left: 25px;
}

.sky-label-bala::before {
  content: "X";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 23px;
  border: 2px solid #b5e64b;
  border-radius: 3px;
  background-color: white;
  color: white;
  text-align: center;
}

.sky-input-bala:checked+.sky-label-bala::before {
  background-color: #b5e64b;
  border: 2px solid #6b8a29;
}

.range-bala {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.range-bala::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  cursor: pointer;
  border: 2px solid #a7d640;
  border-radius: 50%;
  margin-top: -7px;
}

.range-bala::-webkit-slider-runnable-track {
  background: #768b48;
  height: 8px;
  border-radius: 5px;
}

.question-title-sistem {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #a2583f;
  font-family: Arial, Helvetica, sans-serif;
}

.sky-input-sistem {
  display: none;
}

.sky-label-sistem {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  color: #a2583f;
  margin-left: 25px;
}

.sky-label-sistem::before {
  content: "X";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 23px;
  border: 2px solid #e76d09;
  border-radius: 3px;
  background-color: white;
  color: white;
  text-align: center;
}

.sky-input-sistem:checked+.sky-label-sistem::before {
  background-color: #eb6010;
  border: 2px solid #9c4905;
}

.range-sistem {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.range-sistem::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  cursor: pointer;
  border: 2px solid #eb6010;
  border-radius: 50%;
  margin-top: -7px;
}

.range-sistem::-webkit-slider-runnable-track {
  background: #a2583f;
  height: 8px;
  border-radius: 5px;
}

.question-title-inclu {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #848939;
  font-family: Arial, Helvetica, sans-serif;
}

.sky-input-inclu {
  display: none;
}

.sky-label-inclu {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  color: #848939;
  margin-left: 25px;
}

.sky-label-inclu::before {
  content: "X";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 23px;
  border: 2px solid #9ecf43;
  border-radius: 3px;
  background-color: white;
  color: white;
  text-align: center;
}

.sky-input-inclu:checked+.sky-label-inclu::before {
  background-color: #79af04;
  border: 2px solid #3d4f1d;
}

.range-inclu {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.range-inclu::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  cursor: pointer;
  border: 2px solid #9ecf43;
  border-radius: 50%;
  margin-top: -7px;
}

.range-inclu::-webkit-slider-runnable-track {
  background: #848939;
  height: 8px;
  border-radius: 5px;
}

.question-title-adapt {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #ce733a;
  font-family: Arial, Helvetica, sans-serif;
}

.sky-input-adapt {
  display: none;
}

.gen-resilience-tracker-wrapper .sky-label-adapt {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  color: #ce733a;
  margin-left: 25px;
}

.gen-resilience-tracker-wrapper .sky-label-adapt::before {
  content: "X";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 23px;
  border: 2px solid #df9747;
  border-radius: 3px;
  background-color: white;
  color: white;
  text-align: center;
}

.gen-resilience-tracker-wrapper .sky-input-adapt:checked+.sky-label-adapt::before {
  background-color: #cb5e1f;
  border: 2px solid #864a1c;
}

.gen-resilience-tracker-wrapper .range-adapt {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper .range-adapt::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: white;
  cursor: pointer;
  border: 2px solid #cb5e1f;
  border-radius: 50%;
  margin-top: -7px;
}

.gen-resilience-tracker-wrapper .range-adapt::-webkit-slider-runnable-track {
  background: #ce733a;
  height: 8px;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper .navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.gen-resilience-tracker-wrapper .navigation-buttons button {
  margin-bottom: 20px;
  margin-right: 20px;
  padding: 20px 30px;
  font-size: 1.2rem;
  font-family: "Arial", sans-serif;
  background-color: #31abaf;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.gen-resilience-tracker-wrapper .navigation-buttons button:hover {
  background-color: #1a888b;
  box-shadow: 0 4px 8px rgba(49, 171, 175, 0.3);
}

.gen-resilience-tracker-wrapper input[type="checkbox"] {
  margin-right: 5px;
  width: 25px;
  height: 25px;
}

@media (min-width: 700px) and (max-width: 997px) {
  .survey-container {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .gen-resilience-tracker-wrapper .questions {
    overflow-y: auto;
    height: 26rem;
    padding-right: 10px;
    margin-right: -10px;
    padding-left: 10px;
  }

  .gen-resilience-tracker-wrapper .description {
    font-size: 0.9rem;
  }

  .survey-container .section-diver img,
  .survey-container .section-redu img,
  .survey-container .section-bala img,
  .survey-container .section-sistem img,
  .survey-container .section-adapt img,
  .survey-container .section-inclu img {
    width: 30%;
    max-width: none;
    margin: 0 auto;
  }

  .gen-resilience-tracker-wrapper .container-navbar {
    flex-wrap: nowrap;
  }

  .gen-resilience-tracker-wrapper .survey-tab {
    flex: 1 1 100%;
  }
}

@media (max-width: 700px) {
  .gen-resilience-tracker-wrapper .container {
    flex-direction: column;
  }

  .gen-resilience-tracker-wrapper .survey-tab {
    flex: 1 1 100%;
    justify-content: center;
    font-size: 15px;
  }

  .gen-resilience-tracker-wrapper .container-navbar {
    flex-wrap: wrap;
  }

  .survey-container {
    overflow: hidden;
    position: relative;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .gen-resilience-tracker-wrapper .questions {
    overflow-y: auto;
    height: 22rem;
    padding-right: 10px;
    margin-right: -10px;
    padding-left: 10px;
  }

  .survey-container .section-diver,
  .survey-container .section-redu,
  .survey-container .section-bala,
  .survey-container .section-sistem,
  .survey-container .section-adapt,
  .survey-container .section-inclu {
    height: 85px;
  }

  .survey-container .section-diver img,
  .survey-container .section-redu img,
  .survey-container .section-bala img,
  .survey-container .section-sistem img,
  .survey-container .section-adapt img,
  .survey-container .section-inclu img {
    width: 100px;
    max-width: none;
    margin: 0 auto;
  }

  .survey-container .section-diver h1,
  .survey-container .section-redu h1,
  .survey-container .section-bala h1,
  .survey-container .section-sistem h1,
  .survey-container .section-inclu h1,
  .survey-container .section-adapt h1 {
    font-size: 1.5rem;
  }

  .survey-container .questions {
    padding: 10px;
  }

  .question-title-diver,
  .question-title-redu,
  .question-title-bala,
  .question-title-inclu,
  .question-title-adapt,
  .question-title-sistem {
    font-size: 19px;
  }

  .gen-resilience-tracker-wrapper .description {
    font-size: 0.8rem;
  }

  .gen-resilience-tracker-wrapper .description-item {
    width: 100%;
    margin: 10px 2px;
  }

  .gen-resilience-tracker-wrapper .navigation-buttons button {
    padding: 0.4rem 1rem;
  }

  .gen-resilience-tracker-wrapper .left {
    margin-right: 19px;
    text-align: right;
  }

  .gen-resilience-tracker-wrapper .center {
    text-align: justify;
  }

  .gen-resilience-tracker-wrapper .rigth {
    margin-left: 19px;
    text-align: left;
  }
}