:root {
    --cs-color: #000000;
    --cs-title-color: #6E2674;
    --cs-bg-color: #F9FAFC;

    --cs-input-bg-color: #F5F5F5;
    --cs-input-border-color: #F5F5F5;

    --cs-input-distance-color: #BDBBBB;
    --cs-input-distance-bg-color: #FFFFFF;
    --cs-input-distance-border-color: #FFFFFF;

    --cs-input-spe-bg-color: #FFF;
    --cs-input-spe-border-color: #F5F5F5;

    --cs-homepage-color: #FFFFFF;
    --cs-homepage-title-color: #FFFFFF;
    --cs-homepage-bg-color: #0D9BA6;

    --cs-form-rgpd-color: #BDBBBB;

    --cs-choice-container-bgcolor: #FFFFFF;
    --cs-choice-results-bgcolor: #FFFFFF;
    --cs-results-footer-color: #BDBBBB;

    --cs-header-shadow-color-rgba: rgba(0, 0, 0, 0.25);

    --cs-button-color: #FFFFFF;
    --cs-button-bg-color: #0D9BA6;
    --cs-button-bg-color-disabled: rgba(13, 155, 166, 0.4);

    --cs-button-back-color: #6E2674;
    --cs-button-back-color-hover: #FFFFFF;
    --cs-button-back-border-color: #6E2674;
    --cs-button-back-border-color-hover: #6E2674;
    --cs-button-back-bg-color: #FFFFFF;
    --cs-button-back-bg-color-hover: #6E2674;

    --cs-legend-color: #FFFFFF;
    --cs-legend-bg-color: #0D9BA6;

    --cs-button-color-hover: #FFFFFF;
    --cs-button-bg-color-hover: #0A6F77;

    --cs-button-home-color: #FFFFFF;
    --cs-button-home-bg-color: #6E2674;

    --cs-footer-contact-color: #000000;
    --cs-footer-contact-bgcolor: #FFFFFF;

    --cs-button-home-color-hover: #FFFFFF;
    --cs-button-home-bg-color-hover: #8C3B91;

}


/** Corplex FONTS **/

@font-face {
    font-family: 'ITCKabel';
    src: url('fonts/ITCKabelStdBook.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
}


@font-face {
    font-family: 'ITCKabel';
    src: url('fonts/ITCKabelStdBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'ITCKabelDemi';
    src: url('fonts/ITCKabelStdDemi.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Gravity';
    src: url('fonts/Gravity-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Gravity';
    src: url('fonts/Gravity-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'GravityLight';
    src: url('fonts/Gravity-Light.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
}

/** DEFAULT **/
body {
    background-color: var(--cs-bg-color) !important;
    font-family: 'Gravity', sans-serif !important;
    color: var(--cs-color) !important;
    font-size: 1rem !important;
}

h1 {
    font-family: 'Gravity', sans-serif !important;
    font-size: 40px !important;
    font-weight: bold !important;
}

h2 {
    font-family: 'Gravity', sans-serif !important;
    font-size: 2.5em !important;
    color: var(--cs-title-color) !important;
    font-weight: bold !important;
}

h3 {
    font-family: 'Gravity', sans-serif !important;
    font-size: 1.2em !important;
    color: var(--cs-color) !important;
    font-weight: bold !important;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
    height: 25px;
}

p {
    line-height: 1.4rem !important;
    margin-bottom: 1rem !important;
}

input, textarea, select {
    background-color: var(--cs-input-bg-color) !important;
    border-color: var(--cs-input-border-color) !important;
}

.cs_form-container-td_address_to input {
    background-color: var(--cs-input-spe-bg-color) !important;
    border-color: var(--cs-input-spe-border-color) !important;
    border-left: 0;
}

.cs_input-group-before-img {
    min-width: 22px !important;
    padding-top: 3px;
    padding-left: 4px;
    background-color: var(--cs-input-bg-color) !important;
}

.cs_form-container-td_address_to .cs_input-group-before-img {
    background-color: var(--cs-input-spe-bg-color) !important;
    border-width: 1px 0 1px 1px !important;
    border-color: var(--cs-input-spe-border-color);
    border-style: solid;
}


.cs_input-group-before-img img {
    width: 15px !important;
}

select {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist-button !important;
    padding: .5rem .75rem !important;
}

@media (min-width: 768px) {
    p {
        line-height: 1.7rem !important;
    }
}

.cs_btn-corplex {
    background-color: var(--cs-button-bg-color) !important;
    border-width: 2px !important;
    color: var(--cs-button-color) !important;
    min-width: 160px;
    text-decoration: none !important;
    font-weight: bold !important;
    border-radius: 20px !important;
    transition: background-color 0.3s ease !important;
}

.cs_btn-corplex:hover {
    background-color: var(--cs-button-bg-color-hover) !important;
    color: var(--cs-button-color-hover) !important;
}

.cs_btn-corplex:disabled {
    background-color: var(--cs-button-bg-color-disabled) !important;
    cursor: not-allowed;
}

.cs_btn-corplex-back {
    min-width: 160px !important;
    text-align:center !important;
    background-color: var(--cs-button-back-bg-color) !important;
    color: var(--cs-button-back-color) !important;
    border-color: var(--cs-button-back-border-color) !important;
}

.cs_btn-corplex-back:hover {
    background-color: var(--cs-button-back-bg-color-hover) !important;
    color: var(--cs-button-back-color-hover) !important;
    border-color: var(--cs-button-back-border-color-hover) !important;
}

.cs_btn-corplex-no-size {
    width: auto !important;
    min-width: auto !important;
}


.cs_btn-corplex-change-type-container .input-group-text{
    background-color: transparent !important;
    border-width: 0 !important;
}



.cs_legend-img {
    width: 20px;
    height: 20px;
}

.cs_tooltip .tooltip-inner {
    background-color: var(--cs-legend-bg-color);
    color: var(--cs-legend-color);
}

.cs_tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: var(--cs-legend-bg-color) !important;
}

.cs_tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: var(--cs-legend-bg-color) !important;
}

.cs_tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--cs-legend-bg-color) !important;
}

.cs_tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: var(--cs-legend-bg-color) !important;
}

.input-group-text.cs_legend {
    background-color: var(--cs-choice-container-bgcolor) !important;
    border: 0;
}

.cs_title-description {
    font-size: 1em !important;
    font-weight: 700 !important;
}

@media (min-width: 768px) {
    .cs_title-description {
        font-size: 1.5em !important;
        font-weight: 700 !important;
    }
}

.cs_form-label {
    font-size: 1em !important;
    font-weight: bold;
}

.cs_form-label-checkbox, .cs_form-label-checkbox a {
    color: var(--cs-form-rgpd-color) !important;
    font-size: 0.9em !important;
}

.cs_form-container {
    background-color: var(--cs-choice-container-bgcolor)  !important;
    border-radius: 25px !important;
}

.cs_form-transport .cs_form-container {
    min-height: 345px !important;
}

.cs_form-container-td_address_to {
    margin-bottom: 0 !important;
}

.cs_form-container-td_address_to::after {
    content: url('transport_line.png');
    display: block;
    margin-top: 5px;
    margin-left: 22px;
}

.input-group-text {
    background-color: var(--cs-input-bg-color) !important;
    border-color: var(--cs-input-border-color) !important;
}

.cs_distance-results .form-control {
    background-color: var(--cs-input-distance-bg-color) !important;
    border-color: var(--cs-input-distance-border-color) !important;
    color: var(--cs-input-distance-color) !important;
    text-align: right !important;
}

.cs_distance-results .input-group-text {
    background-color: var(--cs-input-distance-bg-color) !important;
    border-color: var(--cs-input-distance-border-color) !important;
    color: var(--cs-input-distance-color) !important;
}


/** RADIO BUTTON TYPE BOX **/

.cs_box_col {
    font-weight: bold;
    text-align: center;
    position: relative;
    line-height: 1em;
}

@media (min-width: 768px) {
    .cs_box_col {
        width: 12%;

    }
}

.cs_main-radio-image {
    display: block;
    width: 80px;
}

.cs_checkbox-container {
    position: absolute;
    top: 5px; /* Adjust position as needed */
    right: 20px; /* Adjust position as needed */
    width: 25px; /* Adjust size as needed */
    height: 23px; /* Adjust size as needed */
    z-index: 2;
}

.cs_checkbox-container input {
    display: none;
}

.cs_checkbox-label {
    font-size: 1em !important;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.cs_checkbox-label .off,
.cs_checkbox-label .on {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
}


/** RESULTS - many CSS **/

.cs_results-container {
    background-color: var(--cs-choice-results-bgcolor) !important;
    border-radius: 25px !important;
    text-align:center
}

.cs_results-container-top {
    border-radius: 0 !important;
    font-size: 1.1rem !important;
}

.cs_results-slogan {
    font-size: 1.3rem !important;
    font-weight: bold !important;
}


.cs_results-graph-title {
    font-size: 1.3rem !important;
    font-weight: bold !important;
}

.cs_results-saveup-title {
    font-size: 1.3rem !important;
    font-weight: bold !important;
}
.cs_results-saveup-pct {
    font-size: 3.2rem !important;
    color: var(--cs-title-color) !important;
    font-weight: bold !important;

}
.cs_results-saveup-tons {
    font-size: 1.3rem !important;
    color: var(--cs-title-color) !important;
    font-weight: bold !important;

}
.cs_results-saveup-text {
    font-size: 1.2rem !important;

}
.cs_results-saveup-change {
    font-size: 0.9rem !important;

}

.cs_results-footer-title{
    font-weight: bold !important;
    font-size: 1.3rem !important;
}

.cs_results-footer-text{
    font-size: 1rem !important;
    color: var(--cs-results-footer-color) !important;
}

.cs_results-footer-text strong{
    color: var(--cs-color) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
}


/** HOMEPAGE - many overloads **/

#cs_homepage {
    background-color: var(--cs-homepage-bg-color) !important;
    color: var(--cs-homepage-color) !important;
}

#cs_homepage h1 {
    font-family: "ITCKabelDemi", sans-serif !important;
    font-size: 1.3rem !important;
    color: var(--cs-homepage-title-color) !important;
}

@media (min-width: 768px) {
    #cs_homepage h1 {
        font-size: 2.5rem !important;
    }
}

#cs_homepage h2 {
    font-family: "ITCKabelDemi", sans-serif !important;
    font-size: 2rem !important;
    font-weight: bold;
    color: var(--cs-homepage-title-color) !important;
}

@media (min-width: 768px) {
    #cs_homepage h2 {
        font-size: 3rem !important;
    }
}

#cs_homepage .cs_title .row {
    padding-top: 3rem;
    height: 15rem;
}

@media (min-width: 768px) {
    #cs_homepage .cs_title .row {
        padding-top: 3.4rem;
    }
}

#cs_homepage .cs_title {
    background-image: url('boxes_row_mob.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    min-height: 240px;
    margin-top: -40px;
}

@media (min-width: 768px) {
    #cs_homepage .cs_title {
        background-image: url('boxes_row.png');
    }
}

#cs_homepage .cs_subtitle {
    font-family: "ITCKabelDemi", sans-serif !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: normal;
}

@media (min-width: 768px) {
    #cs_homepage .cs_subtitle {
        font-size: 1.4rem !important;
    }
}

#cs_homepage .cs_content {
    font-family: "GravityLight", sans-serif !important;
}

#cs_homepage .cs_logo {
    margin-top: 15px;
    margin-bottom: 15px;
    max-height: 104px;
    border-radius:0;
}

#cs_homepage .cs_choice_container {
    background-color: var(--cs-choice-container-bgcolor);
    border-radius: 10px;
}

#cs_header {
    min-height: 137px;
    box-shadow: 0 4px 4px var(--cs-header-shadow-color-rgba);
    cursor: default;
}

#cs_header .container {
    min-height: 119px;
    padding: 9px 0;
}

#cs_header .cs_logo {
    max-height: 103px;
    border-radius: 0 !important;
}

.cs_btn-home {
    background-color: var(--cs-button-home-bg-color) !important;
    color: var(--cs-button-home-color) !important;
    width: auto;
    padding: 10px 20px;
}

.cs_btn-home:hover {
    background-color: var(--cs-button-home-bg-color-hover) !important;
    color: var(--cs-button-home-color-hover) !important;
}


#cs_footer-contact .cs_footer_title {
    font-size: 1.4em !important;
    font-weight: bold;
}

#cs_footer-contact .cs_contact-bloc {
    background-color: var(--cs-footer-contact-bgcolor) !important;
    font-size: 1.5em !important;
    font-weight: bold;
}

#cs_footer-contact .cs_contact-bloc a {
    color: var(--cs-footer-contact-color) !important;
    text-decoration: none;
}