.ddp-form{

    margin-top:100px;
}

.step {
    display: none;
}

.step.active {
    display: block;
}

.question-group {
    position: relative;
}

.question {
    display: none;
}

.question.active {
    display: block;
}

.btn-group-toggle .btn {
    border-radius: 0;
    border: 1px solid #ccc;
    margin-right: -1px;
    padding: 10px 20px;
    cursor: pointer;
}

.btn-group-toggle .btn:last-child {
    margin-right: 0;
}

.btn-group-toggle .btn.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.btn-group-toggle .btn:not(.active):hover {
    background-color: #0056b3;
    color: #fff;
}

.nav-link.active {
    font-weight: bold;
}

#formSteps > li > a{
    color:#FFFFFF !important;

}
.question > div > .btn-group {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    margin: 0px auto;
   /* height: 300px;*/
}

#step-container{

  /*  height:400px;*/
}


.div-menu-form-content{
/*-   border-left: 1px solid #ffffff;*/
}
.div-menu-form {

    width: 20em;
    height: 100%;
    padding: 0 0.6em 0 0;
    color: #92fffd;
    display: table;
    float: left;
}

.div-menu-form-immo {
    box-shadow: 21px 0 33px -24px rgba(0, 0, 0, 0.3);
    border-right: 0 !important;
}

.div-menu-form-conso {
/*    border-right: 1px solid #05ac95;*/
    box-shadow: 21px 0 33px -24px rgba(0, 0, 0, 0.3);
}

.form-container{
    width:100% !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
max-width: none;
}
.form-container > .row{

    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.question > div > .btn-group > label {
    height: 100px;
    background-color: #FFFFFF;
    color: #354651;
    margin-right: 30px;
    margin-top: 30px;
    border: none !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-radius: 10px;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    width: 200px;
    text-align: center;


}
.label-form-option {
    display: inline-flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content if needed */
    padding: 10px; /* Adjust padding as needed */
    /* Add your additional styles here */
}

.label-form-option input[type="radio"] {
    margin-right: 8px; /* Space between radio button and text */
    /* Additional styles for the input if needed */
}



.question > div > .btn-group > label:hover {

}

.question > div > div > input[type=text],
.question > div > div > input[type=tel],
.question > div > div > input[type=date],
.question > div > div > input[type=email],
.question > div > div > input[type=number],
.question > div > select{
    width: 60% !important;
    margin: 0 auto  !important;
    padding: 0 .8em;
    background-color: #FFFFFF;
    color: #354651;
    z-index: 1;
    font-weight: 700;
    text-align: left;
    border: 2px solid #fff;
    border-radius: .25em;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
    display: block;
    height:50px;

}

#step-container > .form-control{

}
.error-container{
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 50px;
}
.error-message{
    margin: 0 auto;
    padding: 5px;
    border-radius: 5px;
    color: #dc3545;
    font-weight: 600;
    white-space: nowrap;
}
#next-question{
    width: 100%;
    display: block;
    margin-top: 50px;
    text-align: center;
}
#next-question > a{
    background-color: #EC6519 !important;
    border-color: #EC6519 !important;
    font-weight: 900;
}
#next-question > a:hover, #previous-question > a:hover{
    color: #EC6519 !important;
    border-color: #EC6519 !important;
    background-color:#FFFFFF !important;

}

#previous-question{
    position: absolute;
    top: 20%;
    left: -22px;
}
#previous-question > a{
    background-color: #EC6519 !important;
    border-color: #EC6519 !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    text-align: center;
    line-height: 36px; /* Adjusts the text vertically */
    font-weight: 900;
}
div.input-group.date{
    width: 60%;
    margin: 0 auto;

}
.isCity, .isSFCity, .isQuartier {
    width: 60%;
    margin: 0 auto;
    display: block; /* Centers the input with margin auto */
    position: relative; /* Helps position the ul absolutely within the same container */
}

/* Suggestions container styling */
.suggestions,.sf_suggestions ,.q_suggestions, #choices-list  {
    position: absolute; /* Dropdown is placed relative to input */
    width: 60%;
    background-color: white;
    /* border: 1px solid #ccc; */
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    top: 43%;
    left: 20%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Individual list item styling */
.suggestions li,.sf_suggestions li,.q_suggestions li, #choices-list li {
    padding: 10px;
    background-color: #f9f9f9;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

/* Change background color on hover */
.suggestions li:hover,.sf_suggestions li:hover,.q_suggestions li:hover, #choices-list li:hover {
    background-color: #ececec;
}

.question > div > label{
    color:#FFFFFF !important;
    font-size: 1.42em;
    line-height: 1.2em;
    font-weight: 700;
    text-align: center;
    width:100%;
    margin-bottom: 20px;
}


.nav-sub-item > .nav-link{
    padding: 0.35rem 1rem !important;
}
.nav-sub-item{
line-height:1;
    font-size: 0.9rem;
}

/* Custom styles for the phone input with flags */
.iti {

    width: 60% !important;
    margin: 0 auto  !important;
}
.iti input[type=tel], .formDatepicker, .input-group-text {
    height:50px !important;
}

.formDatepicker[readonly] {
    background-color: var(--cafpi-white); /* Keep the original background */
    cursor: pointer; /* Change cursor to indicate it's clickable */
}
.phone-container{
    width:100%;
    text-align: center;
}

.iti__flag {
zoom:1.4
}
.iti__country-name{
    margin-left: 20px;
}

#subgroup-title{
/*    color:#335d65;*/
    font-size: 0.93rem;
    margin-bottom:50px;
    text-align: center;
    letter-spacing: normal;
}
.form-nav-group{
    color: var(--cafpi-dark) !important;


}
.form-nav-subgroup{
    color: var(--cafpi-dark) !important;


}

a.form-nav-group.active{


}
a.form-nav-subgroup.active{
    font-weight: bold;
    color: #FFFFFF !important;

}

.label-form-option {

}


.label-form-option:hover {

}
   /*    DATE PICKER STYLE  */

.datepicker {


}

.datepicker-switch{
    padding: 10px;
}
.datepicker-days{

}
.datepicker-months{

}
.datepicker-years{

}
.datepicker-days .day{
    height: 40px;
}


.datepicker table tr td.active.active, .datepicker table tr td span.active.active
{
    background-image: linear-gradient(to bottom, #f4b66e, #ec6519);
}


.datepicker table tr td.active.active:hover, .datepicker table tr td span.active.active:hover
{
    background-image: linear-gradient(to bottom, #ec6519, #f4b66e);
}
.datepicker table tr td span {
    height: 60px;
}
/* END DATE PICKER STYLE */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags@2x.png");
    }
}


.left-pret-pro{
    color: var(--cafpi-white);
}
.left-pret-pro h1{
font-weight: 700;
    font-size: 3.5rem;
    color: var(--cafpi-white);
}
.left-pret-pro ul{

    font-size: 1.6rem;
    margin-top:2rem;
}

.left-pret-pro ul > li{
margin-bottom:0.75rem;
}

.bg-pro #subgroup-title{
    margin-top: 3rem;
}
.form-pro{

    background-color: var(--cafpi-white) !important;
    margin-bottom:2.5rem;

}
.form-pro #formSteps > li > a{
    color:var(--cafpi-dark) !important;
    font-size: 1.1rem;
    font-weight: 600;
}
.form-pro .question > div > label, .form-pro .show-final{
    color:var(--cafpi-dark) !important;
}
.form-pro input{
    border: 1px solid var(--cafpi-dark) !important;
}
.form-pro .custom-menu-group.active {
    border-bottom: 4px solid var(--cafpi-primary) !important;
}
.form-pro .show-final{
    height:200px !important;
}
#formSteps.nav {
    flex-direction: column !important;
}

.question > div > div > input[type="text"].minmaxnumber {
    width:25% !important;
    float: left;
}
@media (max-width: 430px) {
    #step-container{
        width: 96% !important;
        margin: 0 auto;
    }
    .fixed-header{
     /*   top:auto !important;
        bottom : 0;*/
    }
    .group-subgroups{
        display:none;
    }
    .div-menu-form-conso{
        border-right : 0;
    }
    #formSteps.nav {
        flex-direction: row !important;
        flex-wrap: wrap;
        margin-left: 1rem;
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }
    .div-menu-form{
        width:100%;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    #formSteps .nav-item {
        display: inline-block;
        margin-right: 0px;
    }
    #formSteps > li > a{
        font-size: 0.765rem;
        padding: .1rem 0.2rem;
    }

.div-menu-form-content{
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.simulateur-immo{
    padding-top: 1rem !important;

}
    #previous-question {
        top: 18%;
        left: 20px;
    }
    #formSteps .nav-sub-item {
        display: inline-block;
        margin-right: 10px;
    }
    .question > div > .btn-group > label{
        width:90%  !important;
        margin:0.8rem auto !important;
    }

    div.input-group.date,.iti, .question > div > div > input[type=text], .question > div > div > input[type=tel], .question > div > div > input[type=date], .question > div > div > input[type=email], .question > div > div > input[type=number], .question > div > select{
        width:90%  !important;
    }

    .form-container{
        padding-left:0px !important;
        padding-right:0px !important;
        width: 98% !important;

    }


    .bootstrap-select {
        width: 96% !important;
        margin-left: 2% !important;
    }

    .left-pret-pro h1{
        font-size: 2.5rem;
    }
    .left-pret-pro ul{
        font-size: 1.2rem;
    }
    .left-pret-pro ul > li {
        margin-bottom: 0.35rem;
        line-height: 1.3;
    }
    .question > div > div > input[type="text"].minmaxnumber {
        width:47% !important;
        float: left;
    }
}


#tags-container {
    margin-top: 10px;
}

.tag {
    display: inline-block;
    background-color: #EC6519;
    color: white;
    padding: 5px;
    margin: 5px;
    border-radius: 15px;
}

.remove-tag {
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
}

#choices-list {
    list-style-type: none;
    padding: 0;
}

.choice-item {
    cursor: pointer;
    padding: 5px;
    background-color: #f0f0f0;
    margin: 3px 0;
    border-radius: 4px;
}

.choice-item:hover {
    background-color: #dcdcdc;
}