#proposal, #contract, #contact {
    padding: 3.11em 17px 0;
}

#proposal .fields {
    padding: 1.33em 0 1.11em;

}

#proposal input {
    width: 100%;
}

#proposal input[type="submit"] {
    width: auto;
}

#proposal .wp-block-button .ajax-loader {
    display: block;
    margin-top: 10px;
}

#proposal input[type="checkbox"] {
    width: 24px;
    align-self: flex-start;
    margin-top: 6px;
    margin-right: 24px;
}

#tarifSlider {
    padding-top: 2rem;
}

#tarifSlider .icon-box {
    background: none;
    line-height: 25px;
}

/*https://codepen.io/thebabydino/pen/WdeYMd*/
#tarifs .tarif-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}

#tarifs .tarif-block.red {
    padding: 1.33em 40px 0.95em;
}

#tarifs .info-box {
    font-family: "Open Sans", serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 29px;
    box-sizing: inherit;
    display: flex;
    /*flex-wrap: wrap;*/
    padding: 0 0 5.25em 34px;
    gap: 1rem;
}

#tarifs .tarif-block .info-box {
    padding: 0.83em 8px 1.22em 0;
}

#tarifs .tarif-block .info-box .icon-box {
    background: none;
    line-height: 25px;
    font-family: "Open Sans", serif;
    font-weight: 400;
    font-size: 16px;
    box-sizing: inherit;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    margin: 0;
    width: 25px;
    height: 25px;
}

#tarifs .tarif-block .info-box .content {
    padding-left: 32px;
    display: flex;
    width: 100%;
    max-width: 330px;
    line-height: 2;
    gap: 1rem;
}

#tarifs .tarif-block .info-box .content .info {
    background: var(--wp--preset--color--red-800);
    color: var(--wp--preset--color--white);
    border-radius: 0.25rem;
    display: inline-block;
    font-size: 1rem;
    margin-left: auto;
    width: 90px;
    text-align: center;
}

#tarifs .info-box a {
    font-size: 1rem;
}

#tarifs .price {
    font-size: 1.67em;
    padding-top: 10px;
    line-height: 2.25em;
    font-weight: bold;
}

#tarifs .price.big {
    font-size: 2.75em;
}

#tarifs input[type="range"] {
    flex: 1;
    margin: 0;
    padding: 0;
    min-height: 18px;
    background: transparent;
    font: inherit;
    border: none;
    width: 100%;
    height: 18px;
    position: relative;
    cursor: pointer;
}

#tarifs input[type="range"]::before,
#tarifs input[type="range"]::after {
    background: #c4c4c4;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    left: -3px;
    top: 6px;
    content: " ";
    z-index: 0;
}

#tarifs input[type="range"]::after {
    right: -3px;
    left: auto;
}

#tarifs .axis {
    display: flex;
    margin-top: -6px;
}

#tarifs .axis .left {
    margin-left: -5px;
}

#tarifs .axis .right {
    margin-left: auto;
    margin-right: -17px;
}

[type=range], [type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    z-index: 11;
    cursor: ew-resize;
}

[type=range]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    border: none;
    height: 3px;
    background: #c4c4c4;
    cursor: ew-resize;
}

[type=range]::-moz-range-track {
    box-sizing: border-box;
    border: none;
    height: 3px;
    background: #c4c4c4;
    cursor: ew-resize;
}

[type=range]::-ms-track {
    box-sizing: border-box;
    border: none;
    height: 3px;
    background: #c4c4c4;
    cursor: ew-resize;
}

[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    border: none;
    width: 20px;
    height: 20px;
    background: url('/wp-content/plugins/publicroam-calculators/assets/images/slider.png');
    background-size: contain;
    position: relative;
    z-index: 10;
    margin-top: -9px;
    cursor: ew-resize;
}

/*
[type=range].left::-webkit-slider-thumb {
  margin-left:-50px;
}

[type=range].right::-webkit-slider-thumb {
  margin-left:50px;
} */

[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wp--preset--color--red-600);
    position: relative;
    z-index: 10;
    cursor: ew-resize;
}

[type=range]::-ms-thumb {
    box-sizing: border-box;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wp--preset--color--red-600);
    position: relative;
    z-index: 10;
    cursor: ew-resize;
}

[type=range]::-ms-tooltip {
    display: none;
}

[type=range] ~ output {
    display: none;
}

.js [type=range] ~ output {
    display: block;
    position: absolute;
    left: 0.75em;
    top: 0;
    padding: 0.25em 0.5em;
    border-radius: 3px;
    transform: translate(calc((var(--val) - var(--min)) / (var(--max) - var(--min)) * 11em - 50%));
    background: #9955aa;
    color: #eeeeee;
}

#header.shallow {
    padding-bottom: 20.5em;
    margin-bottom: 0;
}

.range-wrapper {
    width: 100%;
    position: relative;
    margin: -4px 0 0 -20px;
}

.range-value {
    position: absolute;
    top: -48px;
    z-index: 10;
}

.range-value .icon {
    margin-right: 5px;
}

.range-value .icon:before {
    text-align: left;
    margin-left: 0;
}

.range-value span {
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: var(--wp--preset--color--red-600);
    color: var(--wp--preset--color--white);
    font-size: 14px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 5px;
    white-space: nowrap;
    padding: 0 12px;
}

.range-value span:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 11px solid var(--wp--preset--color--red-600);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    margin-top: -3px;
}


/* .range-value span:after{
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
  background:var(--wp--preset--color--red-600);
  top: 50px;
  left: 50%;
  margin-left: -9px;
  margin-top: -3px;
  border-radius: 50%
} */

.more {
    margin: 1em 0 0;
    display: none
}

.range-wrapper #bar1, .range-wrapper #bar2 {
    height: 3px;
    width: 18px;
    border-radius: 0.25rem;
    content: "";
    position: absolute;
    background: var(--wp--preset--color--red-600);
    top: 10px;
    margin-left: -9px;
    left: 55px;
    z-index: 10000;
}

.range-wrapper #bar1:hover, .range-wrapper #bar2:hover {
    display: none;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}

#tarifSummary {
    background: #f2f2f2;
    border-radius: 0.5rem;
}

.bg-red-600 {
    background: var(--wp--preset--color--red-600);
}

.bg-red-800 {
    background: var(--wp--preset--color--red-800);
}

.text-white {
    color: var(--wp--preset--color--white);
}

#tarifs .tarif-block {
    position: relative;
    border-radius: 0.5rem;
}

.align-bottom {
    position: absolute;
    bottom: 1.33em;
    margin-bottom: 0 !important;
    font-size: 14px;
    padding-left: 15px;
}

.red .align-bottom {
    padding-left: 0;
}

@media (max-width: 767px) {
    .row {
        gap: 0;
        grid-template-columns: 1fr;
    }

    #tarifSlider {
        padding-top: 0;
    }

    #tarifs {
        max-width: 100%;
        /*padding: 2.8em 0 2.25em;*/
    }

    #tarifs .info-box {
        padding: 0;
    }

    .range-wrapper {
        max-width: 75%;
        margin: 4rem auto 0;
    }

    #tarifSlider {
    }

    #tarifs .tarif-block,
    .red .align-bottom {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #tarifSlider .col-span-4 {
        padding: 0;
    }

    #tarifSlider .col-span-8 {
        padding: 0;
        margin-bottom: 2.25em;
    }

    #tarifSummary {
        display: block;
    }

    #tarifSummary .costs br {
        display: none;
    }

    #tarifSummary .tarif-block .col-sm-6 {
        padding: 0;
    }

    .wp-block-buttons.is-content-justification-center {
        display: block;
        padding: 0;
    }

    .wp-block-buttons > div:nth-child(n+2) {
        margin-left: 0;
    }

    .wp-block-buttons > .wp-block-button {
        width: 100%;
    }

    .wp-block-buttons > .wp-block-button:first-child::after {
        content: 'of';
        margin: -0.5em 0 1em;
        display: block;
        text-align: center;
        font-weight: bold;
    }

    #proposal input[type="submit"] {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #tarifs, #tarifSummary, #tarifs .tarif-block.red {
        border-radius: 0 !important
    }

    #tarifs .price {
        padding-top: 0;
        line-height: 1.5em;
        margin-bottom: 1em;
    }

    #tarifs .tarif-block {
        padding-bottom: 3.66em !important;
    }

    #tarifs .tarif-block .info-box .content {
        padding-left: 15px;
    }

    #tarifs .tarif-block .info-box .content .info {
        height: 2em;
    }

    #proposal, #contract, #contact {
        padding-left: 0;
        padding-right: 0;
    }

    form .col-sm-6, form .col-sm-12 {
        padding-left: var(--padding-mobile-side);
        padding-right: var(--padding-mobile-side)
    }

    .col-span-4 {
        grid-column: 1 / -1;
    }

    .col-span-6 {
        grid-column: 1 / -1;
    }

    .col-span-8 {
        grid-column: 1 / -1;
    }
}

#gform_10 :focus-visible {
    outline: 2px solid var(--wp--preset--color--red-600);
}