/* css style for the foreground's main body (sections, steps, blocks) of cafr.youdge cp */

/* ------------------------------------------ */
/* ---------- START TO MOBILE DEVICE -------- */
/* ------------------------------------------ */
* {
    margin: 0;
    padding: 0;
    font-family: 'roc-grotesk', Arial, Helvetica, sans-serif;
    -moz-font-feature-settings:  "ss06"; 
    -webkit-font-feature-settings: "ss06"; 
    font-feature-settings: "ss06";
}
.row{
    margin:0px !important;
}

.left-content {
    padding: 16px 5%;
}

#formulaire {
    padding: 0;
    background:#fff;
}

.logo-header{
    width:130px;
}
.w-50 {
    width: 50%;
}

.w-80 {
    width: 80%;
}

.product p{
    margin-bottom: 0px;
    font-size: 22px;
}
.bg-success {
    background-color: #B5EED7!important;
    color: #282828 !important;
}

#progress_bar_int_block {
    font-size: 14px !important;
    letter-spacing: inherit !important;
}
#cp-title {
    /*h1*/
    font-size: 18px;
    font-weight: 500;
    padding-right:5px;
}
strong{
    font-weight: 600
}

/* ------------------------------------------------- */
/* ---------- BANDEAU PRODUCT + IMG PRODUCT -------- */
/* ------------------------------------------------- */

.breadcrumb-title{
    display:none;
}
.step-title {
    font-size: 22px;
    font-weight: 600;
    color: #282828;
    margin-top: 25px;
}
.step-subtitle{
    font-size: 18px;
    font-weight: 400;
}
.step-infos {
    padding: 0;
    background-color: #fff;
    padding-bottom: 10px !important;
    text-align: center;
    margin: 0;
}

.step-info{
    display: flex;
    align-items: top;
    background-color: #F0F3FF;
    padding : 20px 30px;
    color: #282828;
    border-radius: 40px;
    line-height: 1.2;
    width: fit-content; 
    margin-top: 40px;
}

.step-info p{
    padding-left:10px;
    font-size: 16px;
    margin-bottom: 0px;
}
.step-info:before{
    content: url("/assets/images/common/logoSite/youdge-picto-silver.png");
    position: inline-block; 
    left:-3px;
    top:10px;
}

#cp-info-subtitle {
    font-size: 18px;
    display: flex;
    justify-content: left;
    font-weight: normal;
}

/* ------------------------------ */
/* -- --------- MAIN  ----------- */
/* ------------------------------ */
.main-content{
    padding: 0;
}

.container-form {
    background-color: white;
}

/*===========================
|    STYLE for CP SECTION    |
============================*/

/*add space betwen all field in one step*/
#step-form section .field {
    padding-top: 15px;
}

/*===========================
|  STYLE for STEP & BLOCK    |
============================*/

.block-title {
    font-size: 15px;
    font-weight: bold;
    padding-top: 20px;
}

.block-subtitle {
    font-size: 15px;
    font-weight: normal;
}

.step-container button {
    cursor: pointer;
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid #c6c6c6;
    padding: 5px 25px;
    width: 100%;
    color: #282828;
    text-align: center;
    outline: none;
    font-size: 16px;
}

.step-container .modal button{
    width: 5%;
}
.step-container a:hover{
    color: #35C087 !important;
    cursor: pointer;
}
.step-container button:hover {
    background-color: #B5EED7;
}

.btn.btn-success {
    background-color:#B5EED7;
    border: 1px solid #c6c6c6;
    color:#282828;
}

.btn.btn-success:hover {
    background-color:#B5EED7;
    color:#282828;
}

.job-button-reset,.job-button-reset-co, .bank-button-reset{
    width:fit-content;
    margin-bottom:15px;
    padding: 5px 25px;
}

button.job-button-reset, button.job-button-reset-co, button.bank-button-reset{
    padding: 5px 25px;
    width: fit-content;
}
.job-button-reset,.job-button-reset-co{
    margin-top:20px;
}

/*===========================
|      STYLE for label      |
============================*/
.field > label{
    font-size: 16px;
    color: #282828;
    margin-bottom: .5rem;
}

.field.text-field label,
.field.tel-field label,
.field.number-field label,
.field.select-field label,
.field.radio-field label {
    font-size: 16px;
    color: #282828;
    margin-bottom: .5rem;
}
.field.text-field label i,
.field.tel-field label i,
.field.number-field label i,
.field.select-field label i,
.field.radio-field label i {
    color: #5CE3B0 !important;
}
.fa-question-circle {
    padding-left: 3px;
}

.alert{
    padding: 0px;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    font-weight: 500;
}

.date-before-label{
    padding-top: 0px !important;
}


/*===========================
|      STYLE for input      |
============================*/

input[type="text"],
input[type="tel"],
input[type="number"]{
    display: inline-block;
    cursor: pointer;
    background-color: #ffffff;
    width: 100%;
    /*min-width: 100%;*/
    text-align: left;
    text-decoration: none;
    border-radius: 50px;
    color: #282828;
    border: 1px solid #c6c6c6;
    padding: 5px 16px;
    font-size: 16px;
}

input[type="text"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="text"]:active,
input[type="tel"]:active,
input[type="number"]:active,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus {
    border: 1px solid #B5EED7;
    outline: none;
}

#input-symbol {
    display: flex;
    flex-wrap: nowrap;
}

#input-symbol .input-group-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0px 15px 0px 10px;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    /*color: #495057;*/
    text-align: center;
    white-space: nowrap;
    background-color: #f6f6f6;
    border-radius: 0 20px 20px 0;
    border: 1px solid #c6c6c6;
    border-left: none;
}

#input-symbol .form-control {
    box-shadow: none;
}

/*===========================
|      STYLE for select      |
============================*/

/*style all select expect those of date splitter
select2_custom.css : file for date splitter css*/

.field.select-field>select {
    border: 1px solid #c6c6c6;
    color: #000000;
    border-radius: 50px;
    padding: 5px 16px;
    background-color:#ffffff;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    width: 100%;
    /* reset style of arrow*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* add style for arrow*/
    background: url("/assets/images/campaign/cp.youdge.com/cp/select_arrow_down.png") no-repeat;
    background-position: right 3% bottom 55%;
}

.two-choices {
    text-align: center;
}
.field.select-field>select:focus {
    /* add style for arrow*/
    background: url("/assets/images/campaign/cp.youdge.com/cp/select_arrow_up.png") no-repeat;
    background-position: right 3% bottom 55%;
    border: 1px solid #B5EED7;
}

/*===========================
|      STYLE for radio      |
============================*/
.field .two-choices{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
}
.field.radio-field .two-choices label{
    width: 50%;
}
.field.radio-field .two-choices label:first-child {
    margin-right: 10px;
}
/* hide input radio */
input[type=radio] {
    display: none;
}

/* custom radio label*/
.field.radio-field>div label{
    display: flex;
    width: fit-content;
    justify-content: center;
    cursor: pointer;
    color: #000000;
    font-size: 16px;
    padding: 5px 23px;
    background-color: #ffffff;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    border: 1px solid #c6c6c6;
}
.two-choices label{
    margin-bottom: 0px !important;
}
/*custom when label hover and when radio cheked*/
.field.radio-field>div label:hover,
.field.radio-field input[type=radio]:checked+label{
    background-color: #B5EED7;
    border: 1px solid #c6c6c6;
    color: #282828;
}

button:hover {
    background-color: #B5EED7 !important;
}

.right-text {
    background-color: rgb(28, 28, 28);
    color: white; 
}
.right-text p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}
.right-img img{
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 30px;
    width: 100%;
    max-width: 400px;
    height: 370px;
    object-fit: cover;
}
.right-text .title-garantie {
    font-size: 18px;
    font-weight: 600 !important;
    text-align: center;
    margin-bottom: 10px;
}
.right-text span {
    font-weight: 600 !important;
}

/*===========================
|        MEDIA QUERIES       |
============================*/
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 767px) {
    .step-container{
        min-height: 50vh;
    }
    label:empty {
        display: none;
    }
    .right-content{
        padding: 0 0 96px 0;
        position: relative;
    }
   .position-credit-need{
        padding: 0% 5% 0%;
        background: #f6F6F6;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 3px 10px;
    }
    .breadcrumb-progress {
        padding: 0px 5% 8px;
        box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.06);
    }
    .step-title, .step-subtitle, #step-form section{
        padding: 0 5% 0;
    }
    .step-info{
        margin: 40px 5% 0;
    }
}
/* large Small devices (desktops, 768px and up) MEDIUM */
@media (min-width: 500px) {
    .garantie-image{
        width:165px;
    }  
}
/* Medium devices (desktops, 768px and up) MEDIUM */
@media (min-width: 768px) {
    .main-content {
        min-height: 100vh;
    }
   
    .right-text{
        background-color: rgb(255 255 255 / 94%);       
        background-repeat: no-repeat;
        background-size: 150px;
        background-position: 200px 150px;
        margin-top: 50px;
        margin-top: 50px;
        padding: 20px;
        border-radius: 20px; 
        box-shadow: rgb(196 196 196 / 22%) 0px 3px 12px;
    }
    .right-text p{
        color: #282828;
    }
    .right-text p:last-child{
        margin-bottom: 0rem;
    }
    .right-text p span{
        font-weight: 600 !important;
    } 
    #cp-info-subtitle {
        font-size : 22px;
    }

    #cp-title{
        font-weight: 600;
        line-height: 1;
        font-size: 32px;
    }
    #background_regroupement-pret #cp-title{
        font-size: 29px;
    }
    .step-subtitle{
        height:33px;
        display: block;  
        font-weight: normal;
        padding-bottom: 50px !important;
    }
    .breadcrumb-progress{
        margin-top:20px;
    }
    .breadcrumb-title{
        display:block;
    }
    .breadcrumb-title p{
        font-weight: 500;
    }
    .logo-header{
        margin-bottom:50px;
        width:180px;
    }
    .right-content {
        padding: 0px;
        box-shadow: 0px -8px 20px rgba(135, 135, 135, 0.15);
        min-height: 100vh;
    }

    .step-container{
        padding-top: 50px;
        height: calc(100vh - 50px);
        scroll-behavior: auto;
        overflow-y: scroll;
        padding-bottom: 100px;
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .step-container::-webkit-scrollbar{
        display: none; /* Safari and Chrome */
    }
    .step-container section,.step-title,.step-subtitle {
        padding: 0px 40px;
    }
    .step-info, #before_result_block {
        margin: 40px 40px 20px;
    }
    .step-info{
        align-items: center;
    }
    .step-title{
        margin-top: 0px;
        padding-bottom: 10px !important;
    }
    .left-content{
        display: flex;
        flex-direction: column;
        padding: 30px 40px 0 40px;
        height: 100vh;
    }
    
    /* custom radio label*/
    .field.radio-field>div label{
        display: inline-block;
    }
    #habitation_details_block #habitation_details_block_s_title_radio{
        display: block !important;
    }
    .trustpilot-widget {
        margin-top: auto;
    }
    
    #input-symbol {
        width: 100%;
        max-width: 232px;
    }
}
/* Large devices (desktops, 992px and up) LG */
@media (min-width: 992px) {
    .right-content {
        min-height : 100vh;
    }
    .right-text{ 
        margin-top: 50px;   
        padding: 20px;
    }    
    .container{
        background-color: #f6f6f6;
    }
    .field-width, .two-choices, .text-field {
        width: 484px;
    }
    .radoi-field {
        width: auto !important;
    }
    #formulaire {
        position: relative;
    }
    .left-content {
        padding: 40px 50px 0 50px;
    }
    .step-title {
        font-size: 24px;
    }
    .step-container section, .step-title, .step-subtitle {
        padding: 0px 80px;
    }
    .step-info, #before_result_block {
        margin: 40px 80px;
    }
    .container-form {
        width: 80%;
    }
    /* custom radio label for desktop */
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    .field.select-field>select,
    .field.radio-field>div label {
        display: inline-block;
        cursor: pointer;
        color: #000000;
        font-size: 16px;
        padding: 5px 16px;
        background-color: #ffffff;
        text-decoration: none;
        border-radius: 50px;
        border: 1px solid #c6c6c6;
    }

    .field.select-field>select {
        width: 484px;
        min-width: 232px;
    } 
    
}
/* XLarge devices (desktops, 1300px and up) XL */
@media (min-width: 1200px) {
    .right-text p{
        font-size: 18px;
        line-height: 1.2;
    }
    .title-garantie{
        font-size: 22px !important;
    }
    .right-text{ 
        margin-top: 60px;   
        padding: 30px;
    }    
    .tp-widget-wrapper {
        margin : 0 0px !important;
    }
    .left-content {
        padding: 40px 80px 0 80px;
    }
}