html, body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1 {
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
}

h2 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
}

h3 {
    opacity: 0.9;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.sidebar {
    padding: 2.5rem;
    background: linear-gradient(180deg, #166a7a, #d7e293);
    flex-direction: column;
    display: flex;
    color: white;
}

.card-item {
    padding: 1rem;
    background-color: rgb(22 106 122 / 20%);
    border-radius: 0.75rem;
    justify-content: space-between;
    align-items: center;
    display: flex;
    width: 100%;
    margin-bottom: 0.5rem;
}

.leftside {
    margin: 0;
    padding: 3.5rem;
    background-color: white;
}

.form-data input {
    line-height: 2;
}

.btn.btn-primary, .btn.btn-secondary:not(.btn-zipcode) {
    border-radius: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    width: 100%;
    margin-top: 2rem;
}

.btn-zipcode {
    margin-left: -1rem !important;
}

.btn-add-form {
    line-height: 2.2rem;
}

.btn-primary {
    border-color: #1d6b7a;
    background-color: #1d6b7a;
}

.btn-primary:hover {
    border-color: #3793a5;
    background-color: #3793a5;
}

.btn-secondary {
    border-color: #d7e293;
    background-color: #d7e293;
    color: black;
}

.btn-secondary:hover {
    border-color: #eff8b6;
    background-color: #eff8b6;
    color: black;
}

.btn-primary {
    --bs-btn-bg: #1d6b7a;
    --bs-btn-border-color: #1d6b7a;
    --bs-btn-hover-bg: #3793a5;
    --bs-btn-hover-border-color: #3793a5;
    --bs-btn-active-bg: #3793a5;
    --bs-btn-active-border-color: #3793a5;
    --bs-btn-disabled-bg: #1d6b7a;
    --bs-btn-disabled-border-color: #1d6b7a;
}

.btn-secondary {
    --bs-btn-bg: #d7e293;
    --bs-btn-border-color: #d7e293;
    --bs-btn-hover-bg: #eff8b6;
    --bs-btn-hover-border-color: #eff8b6;
    --bs-btn-active-bg: #eff8b6;
    --bs-btn-active-border-color: #eff8b6;
    --bs-btn-disabled-bg: #d7e293;
    --bs-btn-disabled-border-color: #d7e293;
}

.quantity-input {
    margin-top: 10px;
}

.quantity-input input {
    width: 80px;
}

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.subtitle {
    background-color: #efefef;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}

.small-muted { 
    font-size: .9rem; 
    color: #6c757d; 
}

.btn-sm-outline { 
    padding: .25rem .5rem; 
}

#loading-indicator {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.form-client input.form-control, .form-client select.form-select {
    border: 1px solid lightgray;
    line-height: 2;
}

/* Steps */
.step {
  position: relative;
  min-height: 1em;
}
.step + .step {
  margin-top: 1.5em
}
.step > div:first-child {
  position: static;
  height: 0;
}
.step > div:not(:first-child) {
  margin-left: 3.5em;
  padding-left: 1em;
}
.step.step-active .circle {
  background: #d7e293;
  color: black;
}
.circle {  
  background-color: #166a7a;
  color: white;
  position: relative;
  width: 3.5em;
  height: 3.5em;
  line-height: 3.5em;
  border-radius: 100%;
  
  text-align: center;
  box-shadow: 0 0 0 3px #fff;
}
.circle svg {
    fill: white;
    display: none;
}
.step.concluded svg {
    display: block !important;
}
.step.concluded .number {
    display: none !important;
}
.step:last-child .circle:after {
  display: none
}
.title {
  line-height: 1.5em;
  font-weight: bold;
}

@media (min-width: 992px) {
    #subscriptionForm .card-form {
        height: 510px;
    }
    .card-plan {
        height: 145px;
    }
    .card-acessories {
        height: 355px; 
        overflow-y: auto;
    }
    .form-data {
        padding: 3rem;
    }
    html, body {
        height: 100%;
        overflow: hidden;
    }
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
    }
    .progress {
        display: none;
    }
}

@media (max-width: 991px) {
    img {
        max-width: 50px;
        max-height: 50px;
    }
    .leftside{
        padding: 2rem;
    }
    .form-client .sidebar {
        display: none !important;
    }
    .progress {
        margin-bottom: 1.5rem;
    }
    .progress-bar {
        background-color: #166a7a;
    }
}