body{
    --bs-border-radius: 10px;
    --progress_background: #2a3e6e;
    --progress_borders: hsl(226, 100%, 92%);
    --main_background: #a4c9f9;
    --step_1_background:#a4c9f9;
    --step_1_foreground:#ffffff;
    --step_2_background:#f3f3f3;
    --step_2_foreground:black;
    --step_3_background:#f3f3f3;
    --step_3_foreground:black;
    --step_4_background:#f3f3f3;
    --step_4_foreground:black;
}

#funnel_step_2{
    display: none;
    opacity: 0;
}
#funnel_step_3{
    display: none;
    opacity: 0;
}
#funnel_step_4{
    display: none;
    opacity: 0;
}
#funnel_step_5{
    display: none;
    opacity: 0;
}
#funnel_step_6{
    display: none;
    opacity: 0;
}
#funnel_step_7{
    display: none;
    opacity: 0;
}
#funnel_step_8, #funnel_step_9, #funnel_step_10, 
#funnel_step_11, #funnel_step_12, #funnel_step_13, 
#funnel_step_14, #funnel_step_15, #funnel_step_16, 
#funnel_step_17, #funnel_step_18, #funnel_step_19,
#funnel_step_20, #funnel_step_21, #funnel_step_22,
#funnel_step_23
{
    display: none;
    opacity: 0;
}
.header_background{
    background-color: var(--main_background);
}
.quote_container {
background-color: white;
max-width: 800px;
box-shadow: 3px 3px rgb(202, 202, 202, 0.32)
}
.quote_container_outer {
padding: 0 15px 15px 15px;
margin-bottom: 20px;
}
.form-control{
background-color: #e8edfe;
}
.form-check-input{
background-color: #e8edfe;
}
.form-select{
background-color: #e8edfe;
}
.form-check-label{
margin-top: 5px;
}
.themed-grid-col {
border-radius: 10px;
padding: 8px;
}
.progress_arrow{
background-image:url('./assets/images/progress_arrow.png');
background-size: 100% 100%;
color: white;
border-radius: 0px;
}
.progress_arrow_mobile{
background-image:url('./assets/images/progress_arrow_mobile.png');
background-size: 100% 100%;
color: white;
border-radius: 0px;
}
.progress_nc_arrow{
background-image:url('./assets/images/progress_nc_arrow.png');
background-size: 100% 100%;;
border-radius: 0px;
}
.progress_nc_last{
background-image:url('./assets/images/progress_nc_last.png');
background-size: 100% 100%;;
border-radius: 0px;
}
label{
font-size:20px;
font-weight: 400;
}
.birthdate_label{
font-size:18px;
font-weight: 400;
}
input, select{
font-size: 20px !important;
}
input[type="radio"]{
width: 20px;
height: 20px;
margin-top: 8px;
}
.btn-primary {
font-size: 20px;
}
.mobile_only {
display: none;
}
.desktop_only {
display: block;
}
.themed-grid-col {
padding: 4px;
}
.birthdate_container { 
display: flex; 
flex-wrap: nowrap; 
max-width: 420px;
width: 100%;
margin: 0 auto;
}

.birthdate_input { 
flex-grow: 1; 
width: calc(33% - 2px); 
padding-left: 0.5em;
padding-right: 0.5em;
}
.btn-primary{
background-color: var(--progress_background);
}
/*progress*/
.progress_container{
--bs-gutter-x: 0;
height: 18px;
margin-top: -8px;
top: 0;
background-color: var(--progress_background)
}
body .progress_inner{
max-width: 720px;
margin-top: 20px !important;
}
body .progress{
--bs-progress-bg: white;
--bs-progress-height:  none;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base, body .progress_inner #step-5:checked + div + div + div + div > .box_base, body .progress_inner #step-4:checked + input + div + div + div + div > .box_base, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base {
top: 50%;
left: 0px;
opacity: 1;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item {
top: -30px;
left: 0px;
opacity: 0;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid, body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
top: -20px;
left: 0px;
opacity: 0;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
top: -10px;
left: 0px;
opacity: 1;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
top: 10px;
left: 0px;
opacity: 1;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid, body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
top: -1px;
left: 0px;
opacity: 1;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_ribbon, body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon {
top: 70%;
left: 0px;
opacity: 0;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_bow, body .progress_inner #step-5:checked + div + div + div + div > .box_bow, body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow {
top: 0px;
left: 0px;
opacity: 0;
}
body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon, body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon {
top: 50%;
left: 0px;
opacity: 1;
}
body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow, body .progress_inner #step-5:checked + div + div + div + div > .box_bow {
top: -10px;
left: 0px;
opacity: 1;
}
body .progress_inner #step-5:checked + div + div + div + div > .box_tag {
top: 10px;
left: 20px;
opacity: 1;
}
body .progress_inner #step-5:checked + div + div + div + div > .box_string {
top: 10px;
left: 20px;
opacity: 1;
}
body .progress_inner__status .box_string, body .progress_inner__status .box_tag, body .progress_inner__status .box_bow__right, body .progress_inner__status .box_bow__left, body .progress_inner__status .box_bow, body .progress_inner__status .box_ribbon, body .progress_inner__status .box_item, body .progress_inner__status .box_base, body .progress_inner, body .progress_inner__step:before {
position: absolute;
left: 0;
right: 0;
transform: translateY(-50%);
margin: auto;
}
body .progress_inner__bar--set, body .progress_inner__bar {
height: 6px;
left: 10%;
background: repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
border-radius: 6px;
width: 0;
position: relative;
z-index: -1;
}
body .progress_inner__step:before {
width: 25px;
height: 25px;
background: #ffffff;
color: var(--progress_background);
line-height: 20px;
border: 3px solid var(--progress_borders);
font-size: 12px;
top: 3px;
border-radius: 100%;
transition: all 0.4s;
cursor: pointer;
pointer-events: none;
}

body .progress_inner__step {
    color:white;
    width: 25%;
    font-size: 14px;
    padding: 0 10px;
    transition: all 0.4s;
    float: left;
    text-align: center;
    position: relative;
}

.progress_inner__step:nth-of-type(1)::before {
    background: var(--step_1_background);
    color: var(--step_1_foreground);
}

.progress_inner__step:nth-of-type(2)::before {
    background: var(--step_2_background);
    color: var(--step_2_foreground);
}

.progress_inner__step:nth-of-type(3)::before {
    background: var(--step_3_background);
    color: var(--step_3_foreground);
}

.progress_inner__step:nth-of-type(4)::before {
    background: var(--step_4_background);
    color: var(--step_4_foreground);
}


body .progress_inner__step label {
font-size: 14px;
padding-top: 40px;
top: -20px;
display: block;
position: relative;
cursor: pointer;
}
body .progress_inner #step-5:checked + div {
width: 80%;
}
body .progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) {
opacity: 1;
top: 0;
}
body .progress_inner #step-5:checked + div + div + div + div {
right: 10%;
}
body .progress_inner #step-4:checked + input + div {
width: 60%;
}
body .progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
opacity: 1;
top: 0;
}
body .progress_inner #step-4:checked + input + div + div + div + div {
right: 30%;
}
body .progress_inner #step-3:checked + input + input + div {
width: 40%;
}
body .progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
opacity: 1;
top: 0;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div {
right: 50%;
}
body .progress_inner #step-2:checked + input + input + input + div {
width: 20%;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
opacity: 1;
top: 0;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div + div {
right: 70%;
}
body .progress_inner #step-1:checked + input + input + input + input + div {
width: 0%;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
opacity: 1;
top: 0;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
right: 90%;
}
body .progress_inner__step:nth-of-type(1):before {
content: "1";
}
body .progress_inner__step:nth-of-type(2):before {
content: "2";
}
body .progress_inner__step:nth-of-type(3):before {
content: "3";
}
body .progress_inner__step:nth-of-type(4):before {
content: "4";
}
body .progress_inner__step:nth-of-type(5):before {
content: "5";
}
body .progress_inner__bar--set {
width: 80%;
top: -6px;
background:  var(--progress_borders);
position: relative;
z-index: -2;
}
body .progress_inner__tabs .tab {
opacity: 0;
position: absolute;
top: 40px;
text-align: center;
margin-top: 80px;
box-shadow: 0px 2px 1px #80b7d5;
padding: 30px;
background: white;
border-radius: 10px;
transition: all 0.2s;
}
body .progress_inner__tabs .tab h1 {
margin: 0;
}
body .progress_inner__tabs .tab p {
font-weight: 400;
opacity: 0.8;
}
body .progress_inner__status {
width: 40px;
height: 40px;
top: -80px;
transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
transform: translateX(50%);
position: absolute;
}
body .progress_inner__status div {
opacity: 0;
transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
transition-delay: 300ms;
}
body .progress_inner__status div {
position: absolute;
}
body .progress_inner__status .box_base {
background: repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
width: 36px;
height: 40px;
z-index: 1;
border-radius: 1px;
}
body .progress_inner__status .box_lid {
width: 40px;
height: 13.3333333333px;
background: #775144;
z-index: 2;
border-radius: 1px;
top: 0;
}
body .progress_inner__status .box_item {
width: 20px;
height: 20px;
background: #be69d2;
z-index: 0;
border-radius: 4px;
transform: rotate(45deg);
}
body .progress_inner__status .box_ribbon {
width: 10px;
height: 42px;
background: #ee0f29;
z-index: 4;
border-radius: 1px;
}
body .progress_inner__status .box_bow__right, body .progress_inner__status .box_bow__left {
width: 6px;
height: 10px;
background: #be0c21;
position: absolute;
z-index: 3;
opacity: 1;
border-radius: 1px;
}
body .progress_inner__status .box_bow {
top: -6px;
z-index: 1;
transition-delay: 500ms;
}
body .progress_inner__status .box_bow__left {
left: 6px;
transform: rotate(45deg);
}
body .progress_inner__status .box_bow__right {
left: -4px;
transform: rotate(-45deg);
}
body .progress_inner__status .box_tag {
width: 20px;
height: 10px;
background: #487ac7;
z-index: 4;
transform: rotate(-10deg) translateX(-40px) translateY(0px);
border-radius: 2px;
transition-delay: 500ms;
}
body .progress_inner__status .box_string {
width: 17px;
height: 2px;
background: #343434;
z-index: 4;
transform: rotate(-39deg) translateX(-22px) translateY(-12px);
}
body .progress_inner input[type=radio] {
display: none;
}
.quote_button{
background-color: #ffa51b;
border: 1px solid black;
min-width: 160px;
}
.quote_button:hover {
    background-color: #fbbb5c;
}
h1 {
   color: var(--progress_background)
}

.checkbox{
margin: 0;
border-radius: 5%;
display: inline-block;
overflow: hidden;
position: relative;
}
.checkbox input[type=checkbox]{
margin: 0;
visibility: hidden;
left: 7px;
top: 7px;
}
.checkbox label{
width: 30px;
height: 30px;
padding: 0;
margin: 0;
border-radius: 50%;
border: 5px solid #666;
box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
cursor: pointer;
display: block;
position: relative;
transition: all 0.3s ease 0s;
}
.checkbox label:hover{ border-width: 7px; }
.checkbox input[type=checkbox]:checked+label{
background-color: var(--progress_background);
border: 7px solid var(--progress_background);
box-shadow: none;
}
.checkbox label:before,
.checkbox label:after{
content: "";
background: #fff;
width: 4px;
height: 18px;
opacity: 0;
transform: translateX(-50%) rotate(55deg);
position: absolute;
left: 160%;
top: -10px;
transition: all 0.2s ease 0s;
}
.checkbox label:after{  
height: 10px;
transform: translateX(-50%) rotate(-33deg);
left: -35%;
top: -6px;
}
.checkbox input[type=checkbox]:checked+label:before{
opacity: 1;
transform: translateX(-50%) rotate(55deg);
left: 62%;
top: 0px;
}
.checkbox input[type=checkbox]:checked+label:after{
opacity: 1;
transform: translateX(-50%) rotate(-33deg);
left: 12%;
top: 6px;
}
.hidden{
    display: none;
}

.form-check-label{
    vertical-align: top;
    margin-left: 3px;
    height: 30px;
    display: inline;
}
.rates_valid_text{
    font-size:12px
}

.slidecontainer {
    /* width: 100%; */
    margin:20px
}

.sliderBoxContainer{
    display: flex; flex-wrap: no-wrap;
}



.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
  
.slider:hover {
    opacity: 1;
}
  
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--progress_background);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--progress_background);
    cursor: pointer;
}


.valueSliderHandle {
    background-color: brown !important;
    background-color: var(--progress_background) !important;
    border-radius: 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin-top: -5px !important;
}

.sliderBox {
    flex-grow: 1; 
    width: 33%; 
    background: white;
    padding: 20px 10px;
}
.sliderDisplay{
    text-align: center;
    font-size:38px
}
.resultTitle{
    text-align: center;
    font-size:30px
}
.resultDisplay{
    text-align: center;
    font-size: 90px;
    font-weight: bold;
    line-height: 95px;
}
.sliderDisplaySubTitle{
    text-align: center;
    font-size: 22px;
}
.sliderDisplaySubTitleLower{
    text-align: center;
    font-size: 14px;
    margin: 0 auto;
    max-width: 350px;
    padding-top: 6px;
}
.navbar{
    padding: 4px;
}
.navbar-brand {
    margin-left: 50px;
}
.quote_button_desktop{
    display: block;
    margin: 0 auto !important;
    
}
.col-md-6:has(> .quote_button_desktop ){
    margin: 0 auto !important;
    text-align:center;
    
}
.quote_button_mobile{
    display: none;
}

.card_container{
    margin: auto; 
    display:flex; 
    flex-wrap: wrap; 
    justify-content: center;
}
.card {
    width: 42%;
    height: 30%;
    margin:10px
  }
  
  .us-autocomplete-pro-example {
font-family: helvetica;
color: #0a0a0a;
text-align: center;
}

.us-autocomplete-pro-example .container {
background-color: #ddd;
padding: 2em;
}

.us-autocomplete-pro-example .container label {
color: #0a0a0a;
}

.us-autocomplete-pro-example .container input {
font-size: 16px;
padding: 0 .75em;
border: 1px solid #ccc;
color: #0a0a0a;
height: 3em;
box-sizing: border-box;
width: 100%;
margin-top: .5em;
}

.us-autocomplete-pro-example .container input:disabled {
background-color: #eee;
color: #999;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-input-container {
margin: 0 auto 2em;
width: 60%;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu {
overflow-y: scroll;
max-height: 13em;
box-shadow: 0 7px 7px rgba(0, 0, 0, 0.12);
color: #7d7d7d;
position: absolute;
text-align: left;
z-index: 10;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu li div {
padding: .75em;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu b {
color: #0a0a0a;
}

.us-autocomplete-pro-example .container .us-autocomplete-pro-menu .ui-menu-item-wrapper {
padding-left: 1em;
}

.us-autocomplete-pro-example .container .labels {
display: inline-block;
font-weight: bold;
width: 40%;
}

.us-autocomplete-pro-example .container .data {
display: inline-block;
padding-left: 1em;
width: 50%;
}

.us-autocomplete-pro-example .docs-pricing-links {
font-weight: bold;
margin-top: 2em;
}

.inline {
display: inline-block;
vertical-align: top;
width: 40%;
}

.data-container {
text-align: center;
margin-bottom: 2em;
}

.align-right {
text-align: right;
}

.align-left {
text-align: left;
}

.card{
    cursor: pointer;
}

.ui-menu-item .ui-state-active{
 color:#2a3e6e   
}

.back{
    height: 43px;
    font-size: 21px;
    margin-left: 10px;
}

.phoneContainer{
    text-align:left; 
    padding-left:40px
}

@media only screen and (max-width: 767px) {
    .phoneContainer{
        text-align:right; 
        padding-left:0
    }

    .quote_container_outer {
        /* min-height: 620px; */
    }
    
    .sliderDisplaySubTitle{
        display: none;
    }

    .checkbox{ margin: 0; }
    .logo{
    width:220px
    }
    .desktop_only {
    display: none;
    }
    .mobile_only {
    display: block;
    }
    label{
    font-size:16px;
    font-weight: 400;
    }
    #progress_label{
    background-color: rgb(6, 0, 111);
    font-size: 24px;
    color: white;
    text-align: center;
    padding: 8px;
    }
    .sliderBoxContainer{
        display: flex; flex-wrap: wrap;
    }
    .sliderBox {
        flex-grow: 1; 
        width: 100%; 
        height: 100px; 
        background: white;
        height: 240px;
    }
    .navbar-brand {
        margin-left: 0;
    }
    .subHeader_Slider{
        display: none !important;
    }
    .sliderDisplay {
        font-size: 30px;
    }
    .sliderBox {
        height: 220px;
        padding:5px
    }
    #outerSliderContainer{
        background: white;
        border-radius: 15px;
    }
    .sliderBox {
        background-color: white;
    }
    .sliderBox:nth-of-type(1){
        padding:10px, 0, 0, 0;
        margin:0 !important;
        /* height:170px */
        height: 100%;
    }
    .sliderBox:nth-of-type(2){
        padding: 0px;
        margin:0 !important;
        height:150px
    }
    .sliderBox:nth-of-type(3){
        padding: 0px;
        margin:0 !important;
    }
    .container-fluid:has(> .sliderBoxContainer ){
        /* min-height: 660px;  */
        padding: 0 10px !important;
        
    }
    .sliderDisplaySubTitle{
        text-align: center;
        font-size: 18px;
    }
    .sliderDisplaySubTitleLower{
        text-align: center;
        font-size: 12px;
        margin: 0 auto;
        max-width: 380px;
        padding-top: 3px;
    }
    .resultTitle {
        font-size: 20px;
    }
    .quote_button_desktop{
        display: none;
    }
    .quote_button_mobile{
        display: block;
        margin: 10px auto !important;
    }
    .field_mobile{
        margin-top:4px !important
    }
    
    .resultDisplay {
        font-size:70px
    }

}

@media only screen and (max-width: 425px) {
    .phoneContainer{
        display: none;
    }
}