:root {
    --bs-primary: #1E1E1E;
    --bs-secondary: #1BD32C;
    --bs-secondary-dark: #23c42b;
    --bs-primary-rgb: 30, 30, 30;
    --bs-secondary-rgb: 27, 211, 44;
    --bs-secondary-color: rgba(148, 148, 148, 1);
    --bs-body-color: #000000;
    --bs-footer: rgba(var(--bs-secondary-rgb), .1);

    --bs-primary-hover: #131313;
    --bs-primary-active: #000000;
    --bs-secondary-hover: #17ad26;
    --bs-secondary-active: #12881e;
    --bs-semi-dark: #1e1e1e;

    --ee-gray: #959595;
}

main {
    margin-top: 110px;
}

.flex-0 {
    flex: 0;
}

.flex-1 {
    flex: 1;
}

.min-width-100 {
    min-width: 100px;
}

.progress {
    --bs-border-radius: 0;
}

.progress-moved .progress-bar {
    width: calc(var(--value)* 1%);
    animation: progressAnimation 1.5s;
}

.progress-bar {
    height: 100%;
    border-radius: 0;
    background: linear-gradient(90deg, #fff 0%, var(--bs-secondary) 100%);
}

.br-10 {
    border-radius: 10px;
}

.form-control {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

small,
.small {
    line-height: 20px;
    display: inline-block;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary-dark);
    --bs-btn-border-color: var(--bs-secondary-dark);
    --bs-btn-disabled-bg: var(--bs-secondary-dark);
    --bs-btn-disabled-border-color: var(--bs-secondary-dark);
    --bs-btn-hover-bg: var(--bs-secondary-hover);
    --bs-btn-hover-border-color: var(--bs-secondary-hover);
    --bs-btn-active-bg: var(--bs-secondary-active);
    --bs-btn-active-border-color: var(--bs-secondary-active);
}

.bg-footer,
footer {
    background-color: var(--bs-footer);
}

.fs-13 {
    font-size: 12px;
}

#address-input {
    --bs-secondary-color: rgba(var(--bs-primary-rgb), .75);
}

header {
    z-index: 1;
}

.circle {
    position: fixed;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--bs-secondary-rgb), .75) 0%, rgba(255, 255, 255, .5) 100%);
    z-index: -1;
}

#circle-1 {
    right: -370px;
}

#circle-2 {
    left: -370px;
    top: 50%;
}

.text-semi-dark {
    color: var(--bs-semi-dark);
}

.range-slider {
    --progress: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    height: 20px;
    height: 6px;
    background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-primary) calc(var(--progress)* 1%), #ccc calc(var(--progress)* 1%));
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 30px;
    width: 30px;
    background: var(--bs-primary);
    background-image: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6.56921 18.75L11.3962 12L6.56921 5.25H8.40371L13.2307 12L8.40371 18.75H6.56921ZM12.4422 18.75L17.2692 12L12.4422 5.25H14.277L19.1037 12L14.277 18.75H12.4422Z" fill="white"/%3E%3C/svg%3E');
    background-size: contain;
    border-radius: 5px;
    transition: .2s ease-in-out;
}

/* Thumb: Firefox */
.range-slider::-moz-range-thumb {
    height: 30px;
    width: 30px;
    background: var(--bs-primary);
    background-image: url('data:image/svg+xml,%3Csvg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6.56921 18.75L11.3962 12L6.56921 5.25H8.40371L13.2307 12L8.40371 18.75H6.56921ZM12.4422 18.75L17.2692 12L12.4422 5.25H14.277L19.1037 12L14.277 18.75H12.4422Z" fill="white"/%3E%3C/svg%3E');
    background-size: contain;
    border: none;
    border-radius: 5px;
    transition: .2s ease-in-out;
}

.sliderticks {
    display: none;
    justify-content: space-between;
    padding: 0;
}

.sliderticks span {
    display: flex;
    justify-content: center;
    line-height: 40px;
}

.form-check-label.border {
    border-color: var(--ee-gray) !important;
}

.form-check-input:not([type="checkbox"]):checked+label {
    background-color: #E9F6F8;
}

.border-bottom-gray {
    border-bottom: 1px solid var(--ee-gray);
}

.quantita-ostacolo[value="0"] {
    color: var(--ee-gray);
}

.hide-radio {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.hide-radio+label {
    cursor: pointer;
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
    border-color: var(--bs-form-invalid-color) !important;
    color: initial;
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: initial;
}

.form-check-input:checked.is-valid~.form-check-label,
.was-validated .form-check-input:checked:valid~.form-check-label {
    border-color: var(--bs-form-valid-color) !important;
}

#row-submit {
    z-index: 10;
}

.label-batteria,
.label-ottimizzatori {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

#batteria:checked+.form-check-label #batteria-on,
#ottimizzatori:checked+.form-check-label #ottimizzatori-on,
#batteria:not(:checked)+.form-check-label #batteria-off,
#ottimizzatori:not(:checked)+.form-check-label #ottimizzatori-off {
    display: none;
}

#toggles {
    width: 45px;
}

.checkbox-label {
    display: block;
    position: relative;
    padding: 5px;
    font-size: 12px;
    line-height: 16px;
    width: 100%;
    height: 22px;
    border-radius: 30px;
    background-color: var(--ee-gray);
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.checkbox-label:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    line-height: 34px;
    text-indent: 40px;
    height: 16px;
    width: 16px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    top: 3px;
    left: 3px;
    right: auto;
    background-color: var(--bs-white);
    transition: all .2s ease-in-out;
}

.ios-toggle:checked+.checkbox-label {
    background-color: var(--bs-primary);
}

.ios-toggle:checked+.checkbox-label:before {
    left: calc(100% - 20px);
}

body:not(.home) footer {
    margin-bottom: 86px;
    padding-bottom: 10px;
}

#riepilogo-pagamento.nav-pills .nav-link {
    color: var(--ee-gray);
    border-bottom: 2px solid var(--ee-gray);
    border-radius: 0;
}

#riepilogo-pagamento.nav-pills .nav-link.active,
#riepilogo-pagamento.nav-pills .show>.nav-link {
    background-color: transparent;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

#totale-pagamento-diretto::after {
    content: "";
    width: 130%;
    height: 2px;
    background-color: var(--bs-body-color);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate3d(1, 0, 1, -45deg);
}

.modal-bottom .modal-dialog-centered {
    align-items: flex-end;
    height: 100%;
    --bs-modal-margin: 0;
    width: 100vw;
    max-width: none;
}

.modal-bottom .modal-dialog-centered .modal-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.modal .btn-close {
    --bs-btn-close-opacity: 1;
    font-size: .7rem;
}

button[data-bs-toggle="modal"].btn.active,
button[data-bs-toggle="modal"].btn.show,
button[data-bs-toggle="modal"].btn:first-child:active {
    --bs-btn-active-border-color: transparent;
}

@keyframes progressAnimation {
    0% {
        width: 0%;
    }

    100% {
        width: calc(var(--value)* 1%);
    }
}

.hide-map {
    opacity: 0;
}

#mq-casa.not-valid-custom {
    border-color: var(--bs-form-invalid-border-color);
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.modal-body {
    max-height: 70vh;
}

.iti {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .sliderticks {
        display: flex;
    }
}