.web-form-header .left-menu, .web-form-header .right-menu { display: none !important; }
header.main-header.web-form-header .main-menu { justify-content: center; }


.single-rench-main { padding: 50px 0; padding-top: 300px; }
.single-rench-wrap { background: #FCF3F4; border-radius: 25px; overflow: hidden; padding: 40px 60px; position: relative; z-index: 12; border-bottom: 5px solid #BD0B31; }
/* .single-rench-wrap h2 { font-size: clamp(1.625rem, 1.509rem + 0.617vw, 2.25rem); font-weight: 600; color: var(--primary); } */
.single-rench-wrap-main ul { padding-left: 0; margin-bottom: 0; display: flex; gap: 50px; flex-wrap: wrap; justify-content: space-between; }
.single-rench-wrap-main ul li { width: 47%; list-style: none; }
.single-rench-wrap-main ul li .range-slider .form-label { font-size: clamp(1.375rem, 1.329rem + 0.247vw, 1.625rem); margin-bottom: 30px; }
.single-rench-wrap-main ul li .range-slider { position: relative; }
.single-rench-wrap-main { margin-top: 50px; }
.single-rench-wrap-main ul li .range-slider input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; position: relative; z-index: 2; border: none; height: auto !important; }

/* Custom styling for thumb */
.single-rench-wrap-main ul li .range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: #002768; border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); position: relative; margin-top: -7px; }
.single-rench-wrap-main ul li .range-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: #002768; border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); }
.single-rench-wrap-main ul li .range-slider .thumb { position: absolute; top: -23px; left: 50%; transform: translateX(-50%); color: #002768; font-weight: 700; transition: left 0.1s; font-size: clamp(0.875rem, 0.829rem + 0.247vw, 1.125rem); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.value-name { display: flex; justify-content: space-between; align-items: center; }
.value-name p { background: transparent; border: none; font-size: clamp(0.875rem, 0.829rem + 0.247vw, 1.125rem); font-weight: 700; color: #778397; margin-bottom: 0; }
.value-name p:last-child { text-align: right; }
.btn-group-box .btn { padding: 20px; min-width: 250px; margin-right: 10px; }
.voter-analytics .modal-dialog { max-width: 1600px; padding: 0 10px; }
.single-rench-wrap-main ul li label { font-size: clamp(1.375rem, 1.329rem + 0.247vw, 1.625rem); font-weight: 600; margin-bottom: 25px; }


.voter-progress{     position: relative; margin: 4px; text-align: center; display: flex ; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto;} 
.barOverflow{ position: relative; overflow: hidden; width: 400px; height: 192px; margin: 0 auto ; margin-bottom: 80px; text-align: center;} 
.bar{ position: absolute; top: 0; left: 0; width: 400px; height: 400px; border-radius: 50%; box-sizing: border-box; border: 15px solid #eee; border-bottom-color: #FF597D; border-right-color: #FF597D; }
.currernt-vote-wrapper { border-radius: 15px; text-align: center; height: 100%; display: flex ; flex-direction: column; justify-content: center; }
.percent { position: absolute; display: flex;top: 34px; color: #FF597D; font-size: clamp(3.125rem, 2.894rem + 1.235vw, 4.375rem); font-weight: 800;     flex-wrap: wrap; align-items: center; justify-content: center;}
.percent h4 { color: #fff; width: 100%; font-size: clamp(0.875rem, 0.829rem + 0.247vw, 1.125rem); font-weight: 500;font-family: "Outfit", serif;  }
.clclut-compatibility-box .modal-content { background: #002768; margin: 0 10px; position: relative; border-radius: 20px; border: none; border-bottom: 8px solid #BD0B31; }
.clclut-compatibility-box .modal-dialog { max-width: 770px; }
.clclut-compatibility-box .modal-content .modal-body { padding: 60px 100px; }
.clclut-compatibility-box .modal-content button.btn-close { position: absolute; top: 15px; right: 15px; background: url('../images/close-btn.svg'); background-repeat: no-repeat; background-size: cover; width: 20px; height: 20px; padding: 0; opacity: 1; cursor: pointer; z-index: 1; }
.percent-details h3 { font-size: clamp(1.625rem, 1.509rem + 0.617vw, 2.25rem); color: #fff; font-family: "Outfit", serif; }
.percent-details p { color: #fff; font-family: "Outfit", serif;}

.form-modal-wrapper-main .modal-dialog { max-width: 720px; }
.form-modal-wrapper-main .modal-dialog .modal-content { border-radius: 20px; border: transparent; }
.form-modal-wrapper-main .modal-dialog .modal-content .modal-header { padding: 20px 30px; }
.form-modal-wrapper-main .modal-dialog .modal-content .modal-header h3 { font-size: clamp(1.25rem, 1.204rem + 0.247vw, 1.5rem);font-family: "Outfit", serif; color: #002768; font-weight: 600; }
.form-modal-wrapper-main .modal-dialog .modal-content .modal-header .btn-close { opacity: 1; }
.form-modal-wrapper-main .modal-dialog .modal-content .modal-body { padding: 30px; }
.form-modal-wrapper-main .modal-dialog .modal-content .modal-body form label { font-size: clamp(1rem, 0.977rem + 0.123vw, 1.125rem); font-weight: 600; color: #002768; }
.form-modal-wrapper-main .modal-dialog .modal-content .modal-body form input.form-control { border-radius: 10px; border: 1px solid #CCCCCC; }
.form-modal-wrapper-main .modal-dialog .modal-content .modal-body .btn { padding: 20px; width: 100%; margin-top: 10px; border-radius: 10px; }



@media only screen and ( max-width:1199px ) {
    .single-rench-wrap-main ul {gap: 40px; }
    .single-rench-main { padding: 50px 0; padding-top: 150px; }
    .political-match-main-box .political-match-rench-box ul { gap: 40px;}
}

@media only screen and ( max-width:991px ) {
    .single-rench-wrap-main ul { gap: 30px; }
    .political-match-main-box .political-match-rench-box ul { gap: 30px;}
    .single-rench-wrap, .political-match-main-box { padding: 30px !important; }
    .bar { width: 300px; height: 300px;}
    .barOverflow { width: 300px; height: 150px;margin-bottom: 50px;}
    .clclut-compatibility-box .modal-content .modal-body { padding: 50px; }
}

@media only screen and ( max-width:767px ) {
    .single-rench-wrap-main ul li, .political-match-main-box .political-match-rench-box ul li { width: 100%;}
    .single-rench-wrap-main ul { gap: 20px; } 
    .clclut-compatibility-box .modal-content .modal-body { padding: 30px; }
    .form-modal-wrapper-main .modal-dialog .modal-content .modal-body { padding: 20px; }
    .form-modal-wrapper-main .modal-dialog .modal-content .modal-header { padding: 20px; }
}
@media only screen and ( max-width:575px ) {
    .bar { width: 250px; height: 250px;}
    .barOverflow { width: 250px; height: 120px;margin-bottom: 30px;}
}

@media only screen and ( max-width:480px ) {

}

/* ---------------------------------------------------------------------------
   Poll + breakdown pages: header flow and thumb contrast.
   Appended last so source order wins over the rules and media queries above.
   --------------------------------------------------------------------------- */

/* The header on these two pages is only a centred logo, but it was
   position:fixed, forcing .single-rench-main to reserve a guessed 300px
   (150px under 1200px) of top padding - most of it dead space, especially on
   mobile. Sticky keeps the logo pinned on scroll while staying in normal
   flow, so the content starts right below the real header height whatever
   size the campaign's logo is. */
header.main-header.web-form-header { position: sticky; top: 0; }

/* The mobile logo card pulled itself 88px down out of the header box to
   overlap marketing-page heroes. In normal flow that would sit on top of the
   content, so neutralise it here. */
.web-form-header .only-mobile.for-mobile .logo { margin-bottom: 0; }
.main-header.fixed .web-form-header .only-mobile.for-mobile .logo,
.web-form-header.fixed .only-mobile.for-mobile .logo { margin-bottom: 0; }

/* With the header back in flow, only modest breathing room is needed. */
.single-rench-main { padding-top: 40px; }

/* Candidate thumb contrast: the navy #002768 marker was nearly invisible
   against the campaign's navy card. A white ring (box-shadow, so layout and
   the label-position math are untouched) separates every marker from the
   background, matching the white-bordered thumbs of the poll form. */
.double_range_slider input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #ffffff, 0 4px 6px rgba(0, 0, 0, 0.25);
}
.double_range_slider input[type="range"]::-moz-range-thumb {
    box-shadow: 0 0 0 3px #ffffff, 0 4px 6px rgba(0, 0, 0, 0.25);
}