:root {
  --color-lime: hsl(61, 70%, 52%);
  --color-lime-hover: hsla(61, 70%, 52%, 1);
  --color-lime-hover-a: hsla(61, 70%, 52%, 0.2);
  --color-lime-200: hsl(66.36deg 41.25% 68.63%);
  --color-red: hsl(4, 69%, 50%);
  --white: hsl(0, 0%, 100%);
  --slate-100: hsl(202, 86%, 94%);
  --slate-300: hsl(203, 41%, 72%);
  --slate-500: hsl(200, 26%, 54%);
  --slate-700: hsl(200, 24%, 40%);
  --slate-900: hsl(202, 55%, 16%);
  --slate-990: hsl(202.29deg 55.56% 12.35%);
}

.color-slate-700 {
  color: var(--slate-700);
}
.color-slate-500 {
  color: var(--slate-500);
}
.color-slate-300 {
  color: var(--slate-300);
}
.color-slate-900 {
  color: var(--slate-900);
}
.bg-color-slate-900 {
  background-color: var(--slate-900);
}
* {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  color: var(--slate-900);
  font-weight: 500;
}

body {
  background-color: var(--slate-100);
}
.fw-700 {
  font-weight: 700;
}
.form-check {
  height: 3rem;
  .form-check-label {
    font-size: 1.1rem;
  }
}
.border-default {
  border-color: var(--slate-700) !important;
}
.btn-clear {
  cursor: pointer;
}
.divide {
  width: 100%;
  height: 1px;
  background-color: var(--slate-700);
}
.panel-result {
  color: var(--white);
  /* border-bottom-left-radius: calc(var(--bs-border-radius-xxl) * 2) !important; */
  padding: 1.7rem 1.4rem;
  .result-content-home {
    img {
      height: 12rem;
    }
  }
  .show-results {
    padding: 1rem;
    .card {
      margin-top: 3rem;
      border-width: 4px;
      border-color: var(--color-lime);
      border-left-width: 0px;
      border-right-width: 0px;
      border-bottom-width: 0px;
      background-color: var(--slate-990);
      .card-body {
        padding: 2rem;
        .result-value-unique {
          font-size: 3.5rem;
          color: var(--color-lime);
        }
        .result-value-acumulated {
          font-size: 1.5rem;
        }
        .divide {
          margin-bottom: 2rem;
        }
      }
    }
  }
}
.rounded-card {
  border-radius: 0px !important;
}
.app-calculator {
  .invalid-feedback {
    color: var(--color-red);
  }
  .container-check-radio {
    /* background-color: red; */
    &:has(.invalid-feedback.d-block) .container-form-check {
      border-color: var(--color-red) !important;
    }
    .container-form-check {
      padding-left: 1.2rem !important;

      .form-check {
        display: flex;
        align-items: center;
        .form-check-label {
          font-size: 1.1rem;
        }
        &:hover {
          border-color: var(--color-lime) !important;
        }

        .form-check-input {
          margin-top: 0px;
          width: 1.2rem;
          height: 1.2rem;
          margin-right: 1rem;
          border-width: 2px;
          border-color: var(--slate-700);
          &:has(.invalid-feedback.d-block) {
            border-color: var(--color-red);
          }
          /* box-shadow: 0 0 0 1px var(--slate-700); */

          &:checked {
            /* background-color: var(--color-lime); */
            background-color: transparent;
            border-color: var(--color-lime);
            /* width: 1rem;
            height: 1rem; */
            /* background-color: #cb17176e; */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.5' fill='hsla(61, 70%, 52%, 1)'/%3e%3c/svg%3e");
            /* border-color: #f3f1f1; */
            /* border-width: 2px; */
            /* border-spacing: 2px; */
            /* box-shadow: 0 0 0 1px var(--slate-700); */
            /* outline: red; */
          }
          &:focus {
            box-shadow: none;
          }
        }
      }
      &:has(.form-check-input:checked) {
        border-color: var(--color-lime);
        background-color: var(--color-lime-hover-a);
        border-color: var(--color-lime-200) !important;
      }
    }
  }
  .input-group-text {
    background-color: var(--slate-100);
  }
  color: var(--slate-900);
  .input-group {
    input,
    span {
      border-color: var(--slate-700);
    }

    &:hover {
      input,
      span {
        border-color: var(--slate-900);
        /* border-color: yellow; */
      }
    }
    input {
      font-size: 1.1rem;

      /* &:hover {
        box-shadow: none;
        border-color: yellow;
       
      } */
    }
    &:focus-within {
      .input-group-text {
        background-color: var(--color-lime);
        color: var(--slate-900);
      }
      .input-group-text,
      .form-control {
        /* background-color: var(--color-lime); */
        border-color: var(--color-lime-200);
        box-shadow: none;
      }
    }
    & > input:first-child {
      border-right: none;
    }
    span ~ input {
      border-left: none;
      /* background-color: green; */
    }

    .input-group-text {
      font-size: 1.1rem;
    }

    &.input-group-lg {
      .form-control {
        padding: 0.7rem 1rem;
      }
    }
    &:has(.invalid-feedback.d-block) {
      span {
        background-color: var(--color-red);
        color: var(--white);
        border-color: var(--color-red);
      }
      input {
        border-color: var(--color-red);
      }
    }
  }

  /* color: var(--slate-700) !important; */
  .input-group-text,
  .form-label {
    color: var(--slate-700);
  }

  .form-check-input,
  .form-check-input {
    border-color: var(--slate-700);
  }
  form button[type="submit"] {
    font-size: 1.2rem;
    padding: 0.8rem 2.5rem;
    letter-spacing: -0.04rem;
    font-weight: 700;
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: var(--color-lime);
    color: var(--slate-900);
    border-color: var(--color-lime-200);
    &:hover {
      background-color: var(--color-lime-hover);
      color: var(--slate-900);
      border-color: var(--color-lime-200);
    }
  }
}
.container {
  padding: 0px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .panel-result {
    border-bottom-left-radius: calc(var(--bs-border-radius-xxl) * 2) !important;
    border-top-right-radius: calc(var(--bs-border-radius-xxl) * 1) !important;
    border-bottom-right-radius: calc(
      var(--bs-border-radius-xxl) * 1
    ) !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .rounded-card {
    border-radius: 2rem !important;
  }
  .container-card {
    max-width: 63rem;
    .card-body {
      .p-5 {
        padding: 2.6rem 2.4rem !important;
      }
    }
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .app-calculator {
    height: 100vh;
  }
}

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

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}