.gen-resilience-tracker-wrapper .container-edit {
  text-align: center;
}

.gen-resilience-tracker-wrapper .container h1 {
  font-size: 3rem;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  margin: 5px;
}

.gen-resilience-tracker-wrapper .container h2 {
  font-size: 2rem;
  margin-bottom: 5px;
}

.gen-resilience-tracker-wrapper .card {
  
  margin-bottom: 30px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gen-resilience-tracker-wrapper .card.active {
  display: block;
}

.gen-resilience-tracker-wrapper .card-header {
  color: #fff;
  padding: 15px;
  border-top-left-radius: 100px;
  border-top-right-radius: 8px;
  font-size: 1.25rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gen-resilience-tracker-wrapper .icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 10rem;
  height: 10rem;
  margin-right: 15px;
}

.gen-resilience-tracker-wrapper .card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  position: relative;
}

.gen-resilience-tracker-wrapper .card-header .icon {
  position: absolute;
  left: 15px;
}

.gen-resilience-tracker-wrapper .card-header.category-header-1 .icon {
  background-image: url("../Images/diverF.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-2 .icon {
  background-image: url("../Images/reduF.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-3 .icon {
  background-image: url("../Images/balaF.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-4 .icon {
  background-image: url("../Images/sistemF.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-5 .icon {
  background-image: url("../Images/incluF.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-6 .icon {
  background-image: url("../Images/adaptiveF.webp");
}

.gen-resilience-tracker-wrapper .card-header .category-title {
  flex-grow: 1;
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
}

.gen-resilience-tracker-wrapper .form-group {
  margin-bottom: 20px;
}

.gen-resilience-tracker-wrapper .description {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  color: #666;
}

.gen-resilience-tracker-wrapper .form-navigation {
  margin-top: 20px;
  text-align: center;
}

.gen-resilience-tracker-wrapper #prev-btn,
.gen-resilience-tracker-wrapper #next-btn,
.gen-resilience-tracker-wrapper #submit-btn {
  margin-right: 10px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.gen-resilience-tracker-wrapper #prev-btn,
.gen-resilience-tracker-wrapper #next-btn {
  background-color: #007bff;
  color: #fff;
}

.gen-resilience-tracker-wrapper #submit-btn {
  background-color: #28a745;
  color: #fff;
}

.gen-resilience-tracker-wrapper .description-span {
  margin-left: 80px;
  display: flex;
  margin-top: -15px;
  color: #666;
  font-weight: bold;
}

.gen-resilience-tracker-wrapper .card-header.category-header-1 {
  background-image: url("../Images/diver.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-2 {
  background-image: url("../Images/redu.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-3 {
  background-image: url("../Images/bala.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-4 {
  background-image: url("../Images/sistem.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-5 {
  background-image: url("../Images/inclu.webp");
}

.gen-resilience-tracker-wrapper .card-header.category-header-6 {
  background-image: url("../Images/adaptive.webp");
}

.gen-resilience-tracker-wrapper .card-header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -2px;
  width: 100%;
  height: 11rem;
  font-size: 2.5rem;
  font-weight: bold;
}

.gen-resilience-tracker-wrapper .category-header div {
  cursor: pointer;
  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;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.gen-resilience-tracker-wrapper .category-header div:hover {
  background: #8b8b8b;
  text-decoration: none;
  color: white;
}

.gen-resilience-tracker-wrapper .category-header .active {
  font-weight: bold;
  color: white;
  background-color: #e0e0e0;
}

.gen-resilience-tracker-wrapper [data-category="0"].active {
  background-color: #256f7b;
}

.gen-resilience-tracker-wrapper [data-category="1"].active {
  background-color: #D4701E;
}

.gen-resilience-tracker-wrapper [data-category="2"].active {
  background-color: #3A764B;
}

.gen-resilience-tracker-wrapper [data-category="3"].active {
  background-color: #9F3A17;
}

.gen-resilience-tracker-wrapper [data-category="4"].active {
  background-color: #9A9F26;
}

.gen-resilience-tracker-wrapper [data-category="5"].active {
  background-color: #CB971F;
}

.gen-resilience-tracker-wrapper #card-0 .card-body .form-group .raw .col label {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #085f76;
  font-family: Arial, Helvetica, sans-serif;
}

.gen-resilience-tracker-wrapper #card-1 .card-body .form-group .raw .col label {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #ce733a;
  font-family: Arial, Helvetica, sans-serif;
}

.gen-resilience-tracker-wrapper #card-2 .card-body .form-group .raw .col label {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #768b48;
  font-family: Arial, Helvetica, sans-serif;
}

.gen-resilience-tracker-wrapper #card-3 .card-body .form-group .raw .col label {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #a2583f;
  font-family: Arial, Helvetica, sans-serif;
}

.gen-resilience-tracker-wrapper #card-4 .card-body .form-group .raw .col label {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #848939;
  font-family: Arial, Helvetica, sans-serif;
}

.gen-resilience-tracker-wrapper #card-5 .card-body .form-group .raw .col label {
  font-size: 1.7rem;
  margin-top: 15px;
  font-weight: bold;
  display: block;
  color: #d19f3e;
  font-family: Arial, Helvetica, sans-serif;
}

.gen-resilience-tracker-wrapper .sky-input-adapt:checked ~ .range-slider .range-adapt::-webkit-slider-thumb,
.gen-resilience-tracker-wrapper .sky-input-bala:checked ~ .range-slider .range-bala::-webkit-slider-thumb,
.gen-resilience-tracker-wrapper .sky-input-diver:checked ~ .range-slider .range-diver::-webkit-slider-thumb,
.gen-resilience-tracker-wrapper .sky-input-inclu:checked ~ .range-slider .range-inclu::-webkit-slider-thumb,
.gen-resilience-tracker-wrapper .sky-input-redu:checked ~ .range-slider .range-redu::-webkit-slider-thumb,
.gen-resilience-tracker-wrapper .sky-input-sistem:checked ~ .range-slider .range-sistem::-webkit-slider-thumb {
  border: 2px solid gray !important;
}

.gen-resilience-tracker-wrapper #card-0 .card-body .form-group .raw .col-auto label {
  font-size: 1rem;
  display: inline-block;
  cursor: pointer;
  color: #085f76;
}

.gen-resilience-tracker-wrapper #card-1 .card-body .form-group .raw .col-auto label {
  font-size: 1rem;
  display: inline-block;
  cursor: pointer;
  color: #ce733a;
}

.gen-resilience-tracker-wrapper #card-2 .card-body .form-group .raw .col-auto label {
  font-size: 1rem;
  display: inline-block;
  cursor: pointer;
  color: #768b48;
}

.gen-resilience-tracker-wrapper #card-3 .card-body .form-group .raw .col-auto label {
  font-size: 1rem;
  display: inline-block;
  cursor: pointer;
  color: #a2583f;
}

.gen-resilience-tracker-wrapper #card-4 .card-body .form-group .raw .col-auto label {
  font-size: 1rem;
  display: inline-block;
  cursor: pointer;
  color: #848939;
}

.gen-resilience-tracker-wrapper #card-5 .card-body .form-group .raw .col-auto label {
  font-size: 1rem;
  display: inline-block;
  cursor: pointer;
  color: #d19f3e;
}

.gen-resilience-tracker-wrapper .description-item {
  width: 25%;
  margin-top: 25px;
  margin-bottom: 10px;
  cursor: pointer;
}

.gen-resilience-tracker-wrapper .left {
  text-align: right;
}

.gen-resilience-tracker-wrapper .center {
  text-align: justify;
}

.gen-resilience-tracker-wrapper .right {
  text-align: left;
}

.gen-resilience-tracker-wrapper #card-0 .card-body .form-group input[type="range"] {
  width: 75%;
  margin-left: 80px;
  -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 #card-0 .card-body .form-group input[type="range"]::-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;
}

.gen-resilience-tracker-wrapper #card-0 .card-body input[type="range"]::-webkit-slider-runnable-track {
  background: #8eb9c7;
  height: 8px;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper #card-1 .card-body .form-group input[type="range"] {
  width: 75%;
  margin-left: 80px;
  -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 #card-1 .card-body .form-group input[type="range"]::-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 #card-1 .card-body input[type="range"]::-webkit-slider-runnable-track {
  background: #ce733a;
  height: 8px;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper #card-2 .card-body .form-group input[type="range"] {
  width: 75%;
  margin-left: 80px;
  -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 #card-2 .card-body .form-group input[type="range"]::-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;
}

.gen-resilience-tracker-wrapper #card-2 .card-body input[type="range"]::-webkit-slider-runnable-track {
  background: #768b48;
  height: 8px;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper #card-3 .card-body .form-group input[type="range"] {
  width: 75%;
  margin-left: 80px;
  -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 #card-3 .card-body .form-group input[type="range"]::-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;
}

.gen-resilience-tracker-wrapper #card-3 .card-body input[type="range"]::-webkit-slider-runnable-track {
  background: #a2583f;
  height: 8px;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper #card-4 .card-body .form-group input[type="range"] {
  width: 75%;
  margin-left: 80px;
  -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 #card-4 .card-body .form-group input[type="range"]::-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;
}

.gen-resilience-tracker-wrapper #card-4 .card-body input[type="range"]::-webkit-slider-runnable-track {
  background: #848939;
  height: 8px;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper #card-5 .card-body .form-group input[type="range"] {
  width: 75%;
  margin-left: 80px;
  -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 #card-5 .card-body .form-group input[type="range"]::-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;
}

.gen-resilience-tracker-wrapper #card-5 .card-body input[type="range"]::-webkit-slider-runnable-track {
  background: #ebbc96;
  height: 8px;
  border-radius: 5px;
}

.gen-resilience-tracker-wrapper .range-value {
  display: none;
}

.gen-resilience-tracker-wrapper .col-auto {
  margin-left: 15px;
}

@media (max-width: 790px) {
  .gen-resilience-tracker-wrapper .category-header {
    flex-direction: column;
  }

  .gen-resilience-tracker-wrapper .category-header div {
    font-size: 15px;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-1,
  .gen-resilience-tracker-wrapper .card-header.category-header-2,
  .gen-resilience-tracker-wrapper .card-header.category-header-3,
  .gen-resilience-tracker-wrapper .card-header.category-header-4,
  .gen-resilience-tracker-wrapper .card-header.category-header-5,
  .gen-resilience-tracker-wrapper .card-header.category-header-6 {
    height: 85px;
    font-size: 1.5rem;
  }

  .gen-resilience-tracker-wrapper .card {
    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 .card-body {
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -10px;
    padding-left: 10px;
  }

  .gen-resilience-tracker-wrapper #card-0 .card-body .form-group .raw .col label,
  .gen-resilience-tracker-wrapper #card-1 .card-body .form-group .raw .col label,
  .gen-resilience-tracker-wrapper #card-2 .card-body .form-group .raw .col label,
  .gen-resilience-tracker-wrapper #card-3 .card-body .form-group .raw .col label,
  .gen-resilience-tracker-wrapper #card-4 .card-body .form-group .raw .col label,
  .gen-resilience-tracker-wrapper #card-5 .card-body .form-group .raw .col label {
    font-size: 1rem;
  }

  .gen-resilience-tracker-wrapper .description-item {
    margin: 10px 2px;
  }

  .gen-resilience-tracker-wrapper .left {
    margin-right: 2px;
    text-align: right;
  }

  .gen-resilience-tracker-wrapper .center {
    text-align: justify;
  }

  .gen-resilience-tracker-wrapper .right {
    margin-left: 2px;
    text-align: left;
  }

  .gen-resilience-tracker-wrapper #card-0 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-1 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-2 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-3 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-4 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-5 .card-body .form-group input[type="range"] {
    margin-left: 55px;
  }

  .gen-resilience-tracker-wrapper .description-span {
    margin-left: 55px;
    margin-top: 1px;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-1 .icon {
    width: 18%;
    height: 5rem;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-2 .icon {
    width: 30%;
    height: 65%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-3 .icon {
    width: 21%;
    height: 90%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-4 .icon {
    width: 13%;
    height: 95%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-5 .icon {
    width: 17%;
    height: 95%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-6 .icon {
    width: 20%;
    height: 95%;
  }
}

@media (max-width: 425px) {
  .gen-resilience-tracker-wrapper #card-0 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-1 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-2 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-3 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-4 .card-body .form-group input[type="range"],
  .gen-resilience-tracker-wrapper #card-5 .card-body .form-group input[type="range"] {
    width: 80%;
    margin-left: 20px;
  }

  .gen-resilience-tracker-wrapper .description-span {
    margin-left: 20px;
    margin-top: 1px;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-1 .icon {
    width: 25%;
    height: 95%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-2 .icon {
    width: 40%;
    height: 60%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-3 .icon {
    width: 40%;
    height: 92%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-4 .icon {
    width: 25%;
    height: 95%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-5 .icon {
    width: 30%;
    height: 95%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-6 .icon {
    width: 30%;
    height: 95%;
  }

  .gen-resilience-tracker-wrapper .card-header.category-header-1,
  .gen-resilience-tracker-wrapper .card-header.category-header-2,
  .gen-resilience-tracker-wrapper .card-header.category-header-3,
  .gen-resilience-tracker-wrapper .card-header.category-header-4,
  .gen-resilience-tracker-wrapper .card-header.category-header-5,
  .gen-resilience-tracker-wrapper .card-header.category-header-6 {
    font-size: 1rem;
  }

  .gen-resilience-tracker-wrapper .container h1 {
    font-size: 1.5rem;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    margin: 5px;
  }

  .gen-resilience-tracker-wrapper .container h2 {
    font-size: 1rem;
    margin-bottom: 5px;
  }
}

@media (max-width: 1200px) {
  .gen-resilience-tracker-wrapper .card-header .category-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 992px) {
  .gen-resilience-tracker-wrapper .card-header .category-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .gen-resilience-tracker-wrapper .card-header .category-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .gen-resilience-tracker-wrapper .card-header .category-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 425px) {
  .gen-resilience-tracker-wrapper .card-header .category-title {
    font-size: 1rem;
  }
}
