/*
 Theme Name:   Abacor
 Theme URI:    https://monsite.com
 Description:  Theme enfant pour l'agence ABACOR de neuilly
 Author:       Antoine
 Author URI:   https://wpmarmite.com
 Template:     oceanwp
 Version:      0.1.0
*/


/* .left,
        .right {
            width: 25px;
            height: 25px;
            transition: .5s;
            box-shadow: -2px 2px 0 black;
        }
  
        .left {
            transform: rotate(45deg);
        }
  
        .right {
            transform: rotate(-135deg);
        } */

/* Global Elementor Form font size */
.elementor-form input {
    font-size: 16px !important;
}

ul{
    list-style: none;
}
#custom-ul-subheader ul  {
    margin: 5px 0px 5px 20px;
}
/* FORMULAIRE COTATION */
#form-field-objet {
    pointer-events: none;
    background-color: rgba(238, 234, 221, 0.8)
}

.item_form_cotation_page{
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-right: calc( 10px/2 );
    padding-left: calc( 10px/2 );
    margin-bottom: 10px;
}
.item_form_cotation_page input {
    font-size: 16px;
    line-height: 1.8;
    padding: 6px 12px;
    border-radius: 3px;
    transition: all 0.3s ease;
    border: 1px solid #818a91;

    -webkit-appearance: none;
    
}
.span_info_cotation{
    text-align: center;
    width: 100%;
    font-size: 25px;
}
.span_info_cotation_product{
    text-align: center;
    width: 100%;
    font-size: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form_cotation_page, .user_info_cotation, .list_cotation_product{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 0px;
}
.user_information_cotation_row, .product_information_cotation_row{
    display: flex;
    width: 100%;
    justify-content: center;
    padding-left:20px
    /* align-items: center; */
}
.user_information_cotation_row{
    padding-right: 20px;
}
.required_item_form_cotation_page {
    color: #DFC05A;
    font-size: 18px;
}

.button_form_cotation_page_container{
    display: flex;
    width: 100%;
    /* justify-content: center; */
    gap: 10px;
    margin-top: 10px;
}
.button_remove_objet_form_cotation{
    padding: 5px;
    cursor: pointer;
    padding-top: 15px;
}
.button_form_cotation_page  {
    margin-bottom: 10px;
    font-size: 16px;
    padding: 15px 30px;
    border-radius: 4px;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    background-color: #DFC05A;
    border: none;
}

.button_form_cotation_page:hover  {
    color:white
}

.button_send_container,
.button_add_container{
    width: 50%;
}

.button_send_container{
    justify-content: flex-end;
    display: flex;
}

.item_form_cotation_page_objet{
    pointer-events: none;
    background-color: rgba(238, 234, 221, 0.8);
}

@media only screen and (max-width: 1200px) {
    .button_remove_objet_form_cotation{
        padding: 0px;
        padding-top: 10px;
    }
 }


/* VARIATION  */

.variation-text {
    font-size: 14px;
}
.positive-variation{
    color:green
}
.negative-variation{
    color: red;
}
.no-variation {
    color:grey
}




.color_or{
    color:#DFC05A;
}



/******* FORMULAIRE RACHAT OR *******/

#myForm input {
    font-size: 16px;
}
#myForm .form-row {
    margin-bottom: 15px;
  }
  
#myForm .half {
    width: 48%;
    display: inline-block;
    margin-bottom: 10px;
  }
  
#myForm button {
    padding: 8px 16px;
    cursor: pointer;
    background-color: #dfc05a;
    color: black;
    border: 0px;
  }
  
#myForm #selectedProducts {
    margin-bottom: 10px;
  }

#myForm input[type="number"] {
    max-width: 80% !important
}

.delete-button {
    margin-left: 10px;
}

.form-row-rachat-product{
    padding-block: 5px;
}

@media (max-width: 768px) {
    .half {
      width: 100% !important;
      display: block !important;
    }
    #myForm input[type="number"] {
        max-width: 100% !important
    }
    #myForm button {
        width: 100%;
        margin-top: 10px;
    }
  }
  
/******  STICKY CONTACT BUTTON ***/
.sticky-contact-button {
    position: fixed;
    bottom: 2rem;
    right: 5rem;
    width: 50px;
    height: 50px;
    font-size: 22px;
    border-radius: 50%;
    background-color: white;
    z-index: 10000;
    padding: 10px;
    border: 2px #dfc05a solid;
    display: flex;
    align-items: center;
    justify-content: center;
        
}
.sticky-contact-button a:hover {
    color: #dfc05a;
}
.sticky-panier-button {
    position: fixed;
    bottom: 2rem;
    right: 5rem;
    width: 50px;
    height: 50px;
    font-size: 22px;
    border-radius: 50%;
    background-color: white;
    z-index: 10000;
    padding: 10px;
    border: 2px #dfc05a solid;
    display: flex;
    align-items: center;
    justify-content: center;
        
}
 /* RESPONSIVE DESIGN  */

 @media only screen and (max-width: 1200px) {
    .sticky-contact-button, .sticky-panier-button{
        right: 2.5rem;
    }
 }


/*******  WIDGET COURS DES DEVISES ******/

.widgetContainer {
    display: flex;
    justify-content: space-evenly;
    overflow: scroll;
    padding-right: 0px;
    transition: all 3s ease-in-out;
    font-family: "overpass";
    background-color: #F5F5F5;
    /* border: 1px solid #e3e4e8; */
    /* border-radius: 20px; */
}
.widgetContainer:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-top: 2px solid #DFC05A;
    border-left: 2px solid #DFC05A;
    margin: -15px;
}
.widgetContainer:after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-right: 2px solid #DFC05A;
    border-bottom: 2px solid #DFC05A;
    margin-right: -15px;
    margin-top: 15px;
}
.deviseContainer {
    /* border-left: 1px solid #e3e4e8; */
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 7px;
    
}
/* .deviseContainer:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 25%;
    height: 50%;
    border-left: 1px solid #0000CC;
    
} */
.deviseContainer:first-child {
    border: none;
    padding: 10px;
    display: flex;
    flex-direction: column;
    row-gap: 7px;
}
.deviseLibelle {
    display: flex;
    column-gap: 10px;
    font-size: 16px;
    font-weight: bold;
}
.fit-flag {
    /* width: 90%; */
    height: 30px !important;
    max-width: 42px !important;
}

.valueContainer  {
    /* font-size: 22px; */
    text-align: right;
    /* color: #bb9d3b; */
    color: #3d6e37; 
    font-size: 24px;
}

.widgetMetalValue{
    color: #3d6e37; 
    font-size: 24px;
}

.vertical-line{
    border-left: 1px solid #e3e4e8;
    display: inline-block;
    height: 63px;
    align-self: center;
  }
  .vertical-line:last-child{
    display: none;
  }

  .divValueContainer{
    text-align: right;
    /* padding-right: 15%; */
    font-weight: bold;
  }

  @media only screen and (max-width: 1200px) {
    .widgetContainer{
        flex-wrap: wrap;
        justify-content:initial;
    }

    .widgetContainer .vertical-line {
        display: none;
    }
    .deviseContainer{
        width: 100%;
    }
 }

/*******  WIDGET COURS DES METAUX ******/

.widgetCoursMetauxContainer {
    /* height: 46px; */
    display: flex;
    justify-content: space-evenly;
    font-family: "overpass";
    background-color: #F5F5F5;
    /* padding-right: 0px; */
    /* transition: all 3s ease-in-out; */
    /* border: 1px solid #e3e4e8; */
    /* border-radius: 20px; */
}

.widgetCoursMetauxContainer:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-top: 2px solid #DFC05A;
    border-left: 2px solid #DFC05A;
    margin: -15px;
}
.widgetCoursMetauxContainer:after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-right: 2px solid #DFC05A;
    border-bottom: 2px solid #DFC05A;
    margin-right: -15px;
    margin-top: 15px;
}

.widgetCoursMetauxContainer .vertical-line {
    height: 46px;
}
.metauxContainer{
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* justify-content: space-evenly; */
    /* align-items: center; */
}
.metauxLibelle {
    /* font-weight: bolder; */
    text-transform: uppercase;
    display: flex;
    font-size: 17px;
    padding-left: 20px;
}
.metauxLibelleType{
    width: 100%;
}
.customBorderBottom {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    width: 30%;
}

.circleType {
    height: 20px;
    width: 20px;
    background-color: gold;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 10px;
}
.typeOr {
    /* background-color: gold; */
    border-color: gold;
}
.typeSilver {
    /* background-color: silver; */
    border-color: silver;

}
.typePlatine {
    /* background-color: #979392; */
    border-color: #979392;

}
.typePalladium {
    /* background-color: #c1c1bb; */
    border-color: #c1c1bb;
}
.metauxContainer .divValueContainer {
    font-size: 22px;
}
.info_file_update{
    text-align: right;
}



 /* RESPONSIVE DESIGN  */

 @media only screen and (max-width: 1200px) {
    .widgetCoursMetauxContainer {
        flex-wrap: wrap;
        width: 90%;
        /* height: 100px;
        overflow: scroll; */
        justify-content:initial;
        margin-left: auto;
        margin-right: auto;
    }
    .widgetCoursMetauxContainer::before{
        margin: 0;
        margin-top: -15px;
    }
    .widgetCoursMetauxContainer::after{
        margin-right: 0;
    }
    .widgetCoursMetauxContainer .vertical-line {
        display: none;
    }

    .metauxContainer{
        flex-direction: initial;
    }
    .metauxLibelle{
        width: 50%;
    }
    .info_file_update{
        padding-right: 20px;
        font-size: 12px;
    }
    .widget_devise_info_file_update{
        padding-right: 0px;
    }
 }

/******** Widget RESERVATION COURS DES METAUX  ********/
.widget_reservation_cours_metaux_container {
    display: flex;
    flex-direction: column;
    font-family: "overpass";
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22);
    border-radius: 20px;
    padding: 20px 32px;
    /* font-size: 17px;
    font-family: "overpass"; */
    background-color: #F5F5F5;
    font-size: 17px;
    position:relative;
    background-image: url('https://dev.abacor-neuilly.fr/wp-content/uploads/bijoux-estimation-scaled.jpg');
    background-size: cover;

}

.widget_reservation_cours_metaux_container::before {    
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 19px;
    background-color: rgba(255,255,255,0.92);
}

.type_metal_container, .type_objet_container,.poids_objet_container{
    display: flex;
    position: relative;
}

.type_metal_label_container, .type_metal_list, .type_objet_label_container, .type_objet_list {
    display: flex;
    align-items: center;
    width: 30%;
}
.type_metal_label, .type_objet_label {
    padding: 0px 20px;
    flex: 1;
    line-height: 20px;
    font-weight: bold;
}

.type_metal_list, .type_objet_list{
    flex:2;
    justify-content: space-evenly;
}

.type_metal_item, .type_objet_item{
    padding: 0px 15px;
    width: 27%;
}  
.type_metal_item_selected{
    width: 27%;
    position: relative;
}
.label_type_metal,.label_type_object{
    width: 90%;
    position: relative;
    cursor: pointer;
    text-align: center;
    /* transition:  0.05s; */
}

/* .label_type_metal::after,.label_type_object::after{
    content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #DFC05A;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
} */
/* .label_type_metal:hover::after,.label_type_object:hover::after{
    transform: scaleX(1);
    transform-origin: bottom left;
} */
.label_type_metal:hover,.label_type_object:hover{
    border: 2px solid #DFC05A;
    background-color: white;
    border-radius: 5px;
}

.type_metal_item_selected, .type_object_item_selected {
    /* border-bottom:2px solid #DFC05A; */
    border: 2px solid #DFC05A;
    background-color: white;
    border-radius: 5px;
}


.item_or{
    border-color: #DFC05A;
}
.item_argent{
    border-color: #979392;
}
.item_platinum{
    border-color: #979392;
}
.item_palladium{
    border-color: #979392;

}

.widget_reservation_cours_metaux_container hr {
    border-top:1px solid #DFC05A;
    padding: 0 4px;
    margin: 15px 0px;

}

.type_no_references {
    flex-direction: column;
}
.type_no_references_div {
    padding: 5px 0px;
}

.product_list_container_hide {
    display: none !important;
}
.product_list_container {
    display: flex;
    width: 60%;
}
.type_bijoux_list,.type_lingots_list, .type_pieces_list,.type_others_list{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.poids_objet_container {
    justify-content: space-between;
}

.type_bijoux_list > .product_poids,
.type_lingots_list > .product_poids,
.type_pieces_list > .product_poids,
.type_others_list > .product_poids{
    flex: 1 1 50%; /*grow | shrink | basis */
    max-width: 50%;
    justify-content: space-between;
}
.product_poids{
    width: 20%;
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
}

.product_poids input {
  -webkit-appearance: none;
  margin: 0;
  /* background-color: white; */
}

/* Firefox */
.product_poids input {
  -moz-appearance: textfield;
  width: 50%;
  /* background-color: white; */
}

.product_poids img {
    width: 40%;
    margin-bottom: 25px;
}
.info_type_bijoux, .info_type_lingots, .info_type_pieces,.info_type_others {
    display: flex;
    flex-direction: column;
    line-height: 20px;
}
.value_type_objet {
    color: #3d6e37;
    font-style: italic;
    padding: 5px 0px;
}
.info_item_object{
    font-size: 19px;
    text-decoration: underline;
}

.widget_reservation_section_bottom{
    background-color: #DFC05A;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    padding: 5px 25px;
    border-radius: 20px;
    padding: 5px 20px;
    margin-top: 20px;
    position: relative;
    align-items: center;
}
.widget_reservation_button_confirmation_container,.widget_reservation_button_confirmation_formulaire_container {
    position: relative;
    display: flex;
    justify-content: right;
    margin: 10px 0px;
}
.widget_reservation_button_confirmation,.widget_reservation_button_numero_telephone, .widget_reservation_button_confirmation_formulaire{
    border-radius: 20px;
    border: none;
    border: 2px solid #DFC05A;
    background-color: white;
    padding: 0px 30px;
    color: black;
    transition: all ease 0.5s;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
}
.widget_reservation_button_confirmation:hover, .widget_reservation_button_numero_telephone:hover, .widget_reservation_button_confirmation_formulaire:hover{
    color: #DFC05A;
    /* box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) */
}
.error_list_product_empty {
    display: none;
    position: relative;
    color: red;
    padding-top: 10px;
    padding-left: 10px;
}

.info_taxe_pieces_lingots{
    font-size: 13px;
}

/* FORMULAIRE */
.widget_reservation_form {
    display: none;
    position: relative;
}
.back_button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.5rem;
    color: #DFC05A;
    border: 2px solid #DFC05A;
    border-radius: 20px;
    background-color: #fff;
    padding: 5px;
    font-size: 10px;
}

.circleStepTitleSectionHeaderInformation {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:1.5rem;
    height:1.5rem;
    color:transparent;
    border:2px solid transparent;
    border-radius:100%;
    background-color:transparent; 
    padding: 13px;
    font-size: 16px;
}

.reservation_product_item{
    display: flex;
    align-items: center;
}

.reservation_product_item_label_rate{
    display: flex;
    flex-direction: column;
    width: 40%;
    text-align: center;
}
.reservation_product_item_rate{
    margin-top: -13px;
    font-size: 13px;
    font-style: italic;
    color: #dfc05a;
    
}
.reservation_product_header{
    font-weight: bold;
}

.reservation_product_item_info{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.reservation_product_item_poids{
    width: 20%;
    text-align: center;

}
.reservation_product_item_prix{
    width: 30%;
    text-align: center;
}
.button_remove_objet_form{
    border: 1px #dfc05a solid;
    padding: 5px;
    border-radius: 5px;
    background: white;
    cursor: pointer;
}
.div_no_product_in_list{
    text-align: center;
    padding: 10px 0px;
}

.div_no_product_in_list span{
    font-size: 21px;
}


.button_remove_objet_form:hover{
    color:#dfc05a
}

.label_moontant_total_formulaire{
    padding: 0px 20px;
}
.user_information_form_tableau_widget_reservation_cours_metaux{
    width: 50%;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    row-gap: 55px;
}

.widget_reservation_recapitulatif{
    display: none;
    position: relative;
    width: 100%;
    justify-content: center;
    flex-direction: column;
}

input[name="user_name"],input[name="user_prenom"],input[name="user_mail"],input[name="user_telephone"]{
    transition: all ease 0.5s;
   }


/* RESPONSIVE DESIGN WIDGET RESERVATION COURS DES METAUX */
   @media only screen and (max-width: 1200px) {
        .type_metal_container, .type_objet_container, .poids_objet_container {
            flex-direction: column;
            row-gap: 20px;
        }
        .type_metal_label_container, .type_objet_label_container{
            width: auto;

            /* align-self: center; */
        }
        .type_metal_list,.type_objet_list{
            padding: 10px 0px;
            width: auto;
            flex-wrap: wrap;
        }
        .type_metal_item, .type_objet_item{
            width: auto;
            padding: 0px 0px;
            flex-basis: 50%;
            box-sizing: border-box;
        }
        .label_type_metal, .label_type_object{
            width: auto;
            padding: 3px;
            border: 2px solid transparent;
        }
        .type_metal_item_selected, .type_object_item_selected{
            border: 2px solid #DFC05A;
            background-color: white;
            border-radius: 5px;
        }

        .product_list_container{
            width: auto;
        }
        .product_poids {
            padding: 10px 10px;
        }
        .product_poids input{
            width: 100%;
            font-size: 16px;
        }
        .widget_reservation_section_bottom{
            flex-direction: column;
            align-items: initial;
            row-gap: 15px;
            padding: 5px 15px;
        }
        .containerFormTableau{
            flex-direction: column;
        }
        .user_information_form_tableau_widget_reservation_cours_metaux{
            width: 100%;
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            row-gap: 55px;
        }
        .info_number_product{
            display: none;
        }
        .reservation_product_item_poids{
            width: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .reservation_product_item_prix{
            width: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .reservation_product_item_label_rate{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .info_type_bijoux, .info_type_lingots, .info_type_pieces,.info_type_others {
            justify-content: flex-end;
            height: 100%;
        }
        .info_item_object{
            font-size: 16px;
        }
        .product_poids img {
            width: 70%;
        }
        .custom_style_item_widget {
            align-items: initial;
            margin-top: -5px !important;
        }
    
        /* info_type_pieces 
        max-width: 96%; */
        .value_type_objet{
            font-size: 12px;
        }
        .value_type_objet_input::placeholder{
            font-size: 12px;
        }
        .widget_reservation_button_confirmation_formulaire_container{
            flex-direction: column;
            justify-content: center;
        }
        .reservation_product_header{
            font-size: 13px;
        }
        .reservation_product_item_info{
            font-size: 12px;
        }
        .reservation_product_item_rate{
            font-size: 11px !important;
            margin-top: 0px !important;
        }
        .reservation_product_item_label{
            line-height: 0.9;
        }
   }

/************* WIDGET COTATION *************/
.cotations_container {
    display: flex;
    /* justify-content: space-evenly; */
    font-family: "overpass";
    gap:30px;
    /* background-color: #F5F5F5; */

}
.cotations_lingots, .cotations_pieces {
    width: 100%;
    position: relative;
}

/* .cotations_lingots:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-left: 2px solid #DFC05A;
    margin: -15px;
}
.cotations_lingots:after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-right: 2px solid #DFC05A;
    margin-right: -15px;
} */
.cotation_title_container{
    text-align: center;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
}
.cotation_title{
    font-size: 20px;
    font-weight: bold;
}

.cotation_header_list_lingot{
    display: flex;
    text-align: center;
    border-top: 2px solid #DFC05A;
    border-bottom: 2px solid #DFC05A;
    font-size: 18px;
}
.cotation_header_item{
    width: 30%;
    padding: 0px 10px;
}

.cotation_item_list_lingot, .cotation_item_list_piece {
    display: flex;
    margin: 10px 0px;
    font-size: 18px;
    border: 3px solid transparent;
}
.cotation_item_list_lingot:hover, .cotation_item_list_piece:hover {
    border: 3px solid #DFC05A;
}

.cotation_item_list {
    width: 40%;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #F5F5F5;
    justify-content: center;
    text-align: center;
}

.cotation_item_list img{
    /* width: 80%; */
    /* height: 90%; */
    width: 95px;
    height: 94px;
}
.cotation_lingot_prix {
    font-weight: bold;
}
.cotation_piece_prix {
    font-weight: bold;
}
.cotation_bouton_action{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.bouton_action{
    border: 1px solid;
    border-radius: 10px;
    padding: 5px;
    width: 80%;
}
.bouton_link{
    width: 100%;
    cursor: pointer;
    color: white;
}
.bouton_link:hover {
    color:white;
    text-decoration: underline;
}
.bouton_action{
    width: 100%;
    border: none;
}

.action_acheter{
    background-color: #DFC05A;
}

.action_vendre{
    background-color: #3d6e37;

}
/* PRICE */
.cotation_price_desktop{
    display:flex;
    flex-direction: column;
}

.cotation_price_mobile{
    display:none;
}

.information_cotation_form{
    text-align: center;
    display: none;
}

.information_cotation_form_span{
    font-size: 25px;
}

@media only screen and (max-width: 1200px) {
    .cotations_container{
        flex-direction: column;
    }
    .cotation_header_item {
        padding: 0px;
    }
    .cotation_item_list img{
        max-width: none !important;
        width: 75px;
        height: 78px;
    }
    .cotation_item_list{
        font-size: 12px;
        padding: 0px;
        justify-content: center;
    }
    .variation-text {
        font-size: 10px;
      }
    .cotation_piece_img{
        padding: 0px 5px;
    }
    .cotation_piece_nom{
        padding: 0px 15px;
    }
    .cotation_lingot_prix {
        font-weight: bold;
    }
    .cotation_piece_prix {
        font-weight: bold;
    }
    .cotation_header_item {
        width: 40%;
    }
    .cotation_header_list_lingot {
        font-size: 16px;
    }
    .cotation_title{
        font-weight: bold;
    }
    .cotation_item_list_img {
        width: 30%;
    }
    .cotation_bouton_action {
        padding: 10px 0px;
    }
    .cotation_header_item_img{
        width: 30%;
    }
    .button_form_cotation_page{
        font-size: 13px;
        padding: 6px 12px;
    }

    /* PRICE */
    .cotation_price_desktop{
        display:none;
    }

    .cotation_price_mobile{
        display:flex;
        flex-direction: column;
    }
    .information_cotation_form_span{
        font-size: 18px;
    }
}


/****************     CONVERTISSEUR FRAME   *****************/

.col1{
    width: 75% !important;
    display: flex;
}

.col2{
    width: 25%;
}

.section_convertisseur_col{
    width: 50%;
}
.elementor-slides .swiper-slide-bg{ background-size: 100%;
    background-position: center; }
#convertisseurMain {
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22);
    border-radius: 20px;
    padding: 20px 32px;
    background-color: #F5F5F5;
    display: flex;
    /* justify-content: space-between; */
    font-size: 17px;
    font-family: "overpass";
}
.section_convertisseur {
    /* width: 100%; */
}
.listExoticDevises{
    display: none;
}
.mobile_devises_exotic{
    display: none;
}

#caonvertisseurMain > .section_convertisseur {
    flex: 1 1 30%; /*grow | shrink | basis */
    height: 140px;
    /*padding: 15px;*/
    max-width: 30%;

}

.simulation_info_header{
    width: 100% !important;
}
.info_header_section {
    background-color: #dfc05a;
    display: flex;
    padding-left: 2rem;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 20px;
    width: 90%;

}
.section_simulation_convertisseur_form {
    /* flex-direction: inherit !important; */
    align-items: end;
    /* height: 87%; */
    /* max-width: 35%; */
}
.containerFormulaire_convertisseur_devise {
    display: flex;
    /* column-gap: 40px; */
    justify-content: space-between;
}

.user_information_convertisseur_devise {
    width: 40%;
}


.section_action_convertisseur, .section_devises_convertisseur, .section_simulation_convertisseur {
    /* padding-left: 4rem; */
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
}

/* #form_simulation_section {
    
} */

#form_devises{
    padding-bottom: 15px;
}

.input_row_simulation{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.divBoutonSubmitSimulateur{
    display: flex;
    justify-content: center;
    
}

.error_input_message, .error_input_message_form{
    padding: 20px 0px;
    display: none;
    transition: all 2s linear;
}
.error_message{
    font-size: 16px;
    color: red;
}
.action_convertisseur {
    background-color: white;
    max-width: 70%;
    border-radius: 20px;
    display: flex;
    padding: 3px 5px;
    margin :8px 0px;
    align-items: center;
    padding-left: 10px;
    transition: all ease 0.5s;
    cursor: pointer;
}
.action_convertisseur:hover {
    color: #DFC05A;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
}
.input_radio_convertisseur {
      /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #DFC05A;
  border-radius: 50%;
  transition: all ease 0.5s;
}
.input_radio_convertisseur:hover {
    color: #DFC05A;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5)
}
.input_radio_convertisseur:checked {
    background-color: #DFC05A;
    border: double #DFC05A 9px;

}
.span_action {
    padding-left: 10px;
    display: flex;
    align-items: center;
}

.devises_convertisseur {
    background-color: white;
    max-width: 90%;
    border-radius: 20px;
    display: flex;
    /* padding: 3px 5px; */
    margin :8px 0px;
    align-items: center;
    padding-left: 10px;
    transition: all ease 0.5s;
    cursor: pointer;
    margin-left: 10px;
}
.devises_convertisseur:hover {
    color: #DFC05A;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
}

.span_flag {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.span_flag img {
    width: 112px;
    /* height: 52px; */
    max-height: 56px;
    border-radius: 0px 20px 20px 0px !important;
    align-self: center;
}
.exoticDeviseFlag{
    width: 60px !important;
    max-height: 33px !important;
    border-radius: 0px 20px 20px 0px !important;
}

.div_header_section {
    width: 35%;
    max-width: 40%;
}
.section_form_convertisseur {
    display: none;
    width: 100%;
    flex-direction: column;
}
.section_form_convertisseur_header {
    display: flex;
    /* justify-content: space-around;
    align-items: center; */
}
.convertisseur_button_stepBack {
    pointer-events: auto;
    cursor: pointer;
}
.containerFormTableau {
    display: flex;
    justify-content: space-between;
    /* column-gap: 40px; */
    font-size: 17px;
}
.user_information_form_tableau {
    width: 50%;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    row-gap: 55px;
}

.currentRateInfoSection {
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-bottom: 2.25em;
    text-align: center;
}
.currentRateInfoTitle{
    font-size: 17px;
}
.rowCurrentRate{
    font-size: 22px;
    font-weight: bold;
}
.rowCurrentRateReverse{
    font-size: 14px;
    text-align: center;
}

/***  EXOTIC   ***/
.exoticCurrentRateInfoSection {
    display: none;
    flex-direction: column;
    width: 80%;
    text-align: center;
    row-gap: 15px;
    align-self: center;
}

.user_information, .user_information_convertisseur_devise{
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    row-gap: 55px;
}
.info_convertisseur{
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}
.title_info_convertisseur{
    font-family: "vidaloka";
    font-size: 22px;
    text-align: center;
}
.info_convertisseur_value{
    font-weight: 900;
}
#form_information_client {
    padding-top:20px;

    width: 45%;
}

.convertisseur_input_row {
    padding:5px 0px;
    display: flex;
    column-gap: 51px;
}
.convertisseur_input_row:first-child {
    padding:0px 0px;
}
.convertisseur_input{
    width: 40%;
}
.convertisseur_textarea{
    width: 90% !important;
}
.convertisseur_input label{
    padding-left: 11px;
}


.button_form {
    margin-top: 2rem;
    text-align: right;
}

.section_information_reservation_convertisseur {
    display: none;
    width: 100%;
    justify-content: center;
    flex-direction: column;
}
.section_information_reservation_list {
    display: none;
    width: 100%;
    justify-content: center;
    flex-direction: column;
}

.header_reservation_success{
    background-color: #297a0b;
    color: white;
    font-size: 22px;
    border-radius: 20px;
}

.div_recap_title {
    text-align: center;
    padding: 12px 0px;
}

.recap_title {
    font-size: 22px;
    font-weight: bold;
    padding-top: 20px;
}
.recap_subtitle{
    font-size:17px;
}

.div_header_section_recap_info{
    display: flex;
    justify-content: center;
}
.div_info_header_section {
    width: 30%;
}

.div_recap_title {
    display: flex;
    flex-direction: column;
}
/* .span_libelle_recap {
    font-weight: bolder;
} */
.span_recap {
    column-gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

#form_devises input::-webkit-outer-spin-button,
#form_devises input::-webkit-inner-spin-button,
.section_list_row_input input,
.inputPoidContainer input {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#form_devises input[type=number],
.section_list_row_input input,
.inputPoidContainer input {
  -moz-appearance: textfield;
}


/****************     CUSTOM ARROW   *****************/

.element_next_container {
    display: flex;
    align-items: center;
    cursor: pointer;
}
#arrowAnim {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .arrow {
    width: 30px;
    height: 30px;
    border:  5px inset;
    border-color: #DFC05A transparent transparent #DFC05A;
    transform: rotate(-45deg);
  }
  .arrow:hover {
    border: 10px solid;
    border-color: #DFC05A transparent transparent #DFC05A;
  }

  .arrowNext {
    width: 25px;
    height: 25px;
    border:  5px solid;
    border-color: #1d2327 transparent transparent #1d2327;
    transform: rotate(135deg);
  }
  
  
  /* .arrowSliding {
    position: absolute;
    -webkit-animation: slide 2s linear ; 
            animation: slide 2s linear ;
  }
  
  .delay1 {
    -webkit-animation-delay: 1s; 
      animation-delay: 1s;
  }
  .delay2 {
    -webkit-animation-delay: 2s; 
      animation-delay: 2s;
  }
  .delay3 {
    -webkit-animation-delay: 3s; 
      animation-delay: 3s;
  } */
  
  /* @-webkit-keyframes slide {
      0% { opacity:0; transform: translateX(15vw); }	
     20% { opacity:1; transform: translateX(9vw); }	
     80% { opacity:1; transform: translateX(-9vw); }	
    100% { opacity:0; transform: translateX(-15vw); }	
  }
  @keyframes slide {
      0% { opacity:0; transform: translateX(15vw); }	
     20% { opacity:1; transform: translateX(9vw); }	
     80% { opacity:1; transform: translateX(-9vw); }	
    100% { opacity:0; transform: translateX(-15vw); }	
  } */



  /************ WIDGET ESTIMATION  ********/
.estimation_container{
    display: flex;
    flex-direction: column;
    margin: auto;
    font-family: "overpass";
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22);
    border-radius: 20px;
    padding: 20px 32px;
    background-color: #F5F5F5;
    /* width:1220px; */
}
 .item_image img {
    width: 180px;
    height: 180px;
    /* border-radius: 20px 20px 0px 0px; */
    margin: auto;
}
.estimation_type_objet_container, .estimation_type_metal_container, .estimation_carat_container, .estimation_poids_container{ 
    display: flex;
    width: 100%;
    flex-direction: column;
    row-gap: 10px;
    padding-bottom: 20px;
    
}
.estimation_valeur_argent_container, .estimation_valeur_platine_container, .estimation_valeur_palladium_container{
    display: none;
    width: 100%;
    flex-direction: column;
    row-gap: 10px;
    padding-bottom: 20px;
}
.estimation_type_objet_list_item, .estimation_type_metal_list_item, .estimation_carat_list_item{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}
.type_objet_infos, .type_metal_infos, .carat_infos, .poids_infos{
    display: flex;
    align-items: center;
    width: 30%;
}
.estimation_type_objet_item, .estimation_type_metal_item, .estimation_carat_item{
    display: flex;
    flex-direction: column;
    margin: auto;
    /* width: 18%; */
    align-items: center;
    transition: all 0.2s ease-out;
    box-shadow: rgb(100, 100, 100) 0px 1px 6px 0px;
    padding: 10px;
}
.estimation_type_objet_item:hover{
    box-shadow: 3px 5px 20px 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.1, 1.1);
    cursor: pointer;
}
.estimation_type_objet_item:hover > .item_description{
    background-color:  #DFC05A ;
    color: white;
}
.estimation_type_object_item_selected > .item_description{
    background-color:  #DFC05A ;
    color: white;
}
.estimation_type_metal_item_selected > .item_description{
    background-color:  #DFC05A ;
    color: white;
}
.estimation_type_metal_item:hover > .item_description{
    background-color:  #DFC05A ;
    color: white;
}

.estimation_type_metal_item:hover{
    box-shadow: 3px 5px 20px 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.1, 1.1);
    cursor: pointer;
}
.estimation_carat_item{
    flex:1 ;
    border: 2px solid transparent;
    padding: 7px 0px;
    margin: 2px 7px;
    font-size: 15px;
}
.estimation_carat_item:hover {
    /* border: 2px solid #DFC05A; */
    background-color: #DFC05A;
    /* border-radius: 20px; */
    cursor: pointer;
}
.estimation_carat_item_selected{
    border: 2px solid #DFC05A;
    background-color: white;
    border-radius: 20px;
}

.item_description{
    text-align: center;
    /* background-color: #dfc05a; */
    width: 100%;
    padding: 8px 0px;
    font-size: 17px;
    border: 2px solid #DFC05A;
}

.circleStepTitleSection{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #DFC05A;
    border: 2px solid #DFC05A;
    border-radius: 100%;
    background-color: #fff;
    padding: 13px;
    font-size: 16px;
}
.label_objet_info, .label_metal_info, .label_carat_info, .label_poids_info {
    padding: 0px 20px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: underline;
    font-size: 17px;
}
.estimation_poids_item{
    padding: 0px 20px;
    font-size: 16px;
}

.estimation_poids_item input {
-webkit-appearance: none;
margin: 0;
border: none;
border-bottom: 2px solid #dfc05a;
}

.estimation_poids_item input::placeholder {
    font-weight: bold;
    opacity: 0.5;
    font-size: 14px;
}
  
/* Firefox */
.estimation_poids_item input {
-moz-appearance: textfield;
padding: 15px 10px;
margin: 0px 15px;
}

.bijoux_info_supp_container{
    padding: 20px;
    font-size: 17px;
    display: none;
}
.bijoux_info_supp{
    display: flex;
}
.bijoux_info_supp_input_container{
    padding: 0px 20px;
}

.bijoux_info_supp_container input[type="checkbox"]:checked::before{
    color:#dfc05a;
}

.widget_estimation_button_confirmation_container,.widget_estimation_button_confirmation_formulaire_container {
    position: relative;
    display: flex;
    justify-content: right;
    margin: 10px 0px;
}
.widget_estimation_button_confirmation,.widget_estimation_button_numero_telephone, .widget_estimation_button_confirmation_formulaire{
    border-radius: 20px;
    border: none;
    border: 2px solid #DFC05A;
    background-color: white;
    padding: 0px 30px;
    color: black;
    transition: all ease 0.5s;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    font-size: 17px;
}

.widget_estimation_button_confirmation:hover, .widget_reservation_button_numero_telephone:hover, .widget_estimation_button_confirmation_formulaire:hover{
    color: #DFC05A;
    cursor: pointer;
    /* box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) */
}
.widget_estimation_error_message {
    display: none;
    color: red;
    align-items: center;
    padding: 0px 20px;
}


/* FORMULAIRE */
.widget_estimation_form {
    display: none;
    position: relative;
}
.back_button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.5rem;
    color: #DFC05A;
    border: 2px solid #DFC05A;
    border-radius: 20px;
    background-color: #fff;
    padding: 5px;
    font-size: 10px;
}

.circleStepTitleSectionHeaderInformation {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:1.5rem;
    height:1.5rem;
    color:transparent;
    border:2px solid transparent;
    border-radius:100%;
    background-color:transparent; 
    padding: 13px;
    font-size: 16px;
}

.reservation_product_item{
    display: flex;
    align-items: center;
}

.reservation_product_item_label_rate{
    display: flex;
    flex-direction: column;
    width: 40%;
    text-align: center;
}
.reservation_product_item_rate{
    margin-top: -13px;
    font-size: 13px;
    font-style: italic;
    color: #3d6e37;;
    
}
.reservation_product_header{
    font-weight: bold;
}

.reservation_product_item_info{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.reservation_product_item_poids{
    width: 20%;
    text-align: center;
    /* display: flex;
    justify-content: center;
    align-self: center; */

}
.reservation_product_item_prix{
    width: 30%;
    text-align: center;
}
.label_moontant_total_formulaire{
    padding: 0px 20px;
}
.user_information_form_tableau_widget_reservation_cours_metaux{
    width: 50%;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    row-gap: 55px;
}

.widget_estimation_recapitulatif{
    display: none;
    position: relative;
    width: 100%;
    justify-content: center;
    flex-direction: column;
}

input[name="user_name"],input[name="user_prenom"],input[name="user_mail"],input[name="user_telephone"]{
    transition: all ease 0.5s;
   }

   .widget_estimation_hr {
    border-top:1px solid #DFC05A;

}


@media only screen and (max-width: 1200px) {
    .estimation_container{
        padding: 20px 30px;
    }
    .type_objet_infos, .type_metal_infos, .carat_infos, .poids_infos {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 15px 0px;
    }
    .label_objet_info, .label_metal_info, .label_carat_info, .label_poids_info {
        font-size: 18px;
    }
    .estimation_poids_item{
        padding: 0px;
        display: flex;
        justify-content: space-around;
    }
    .estimation_poids_item input{
        width: 50%;
    }
    .estimation_poids_item input::placeholder {
        font-weight: bold;
        opacity: 0.5;
        font-size: 12px;
    }

    .estimation_type_objet_item:hover > .item_description{
        background-color: #DFC05A;
        color: white;
    }
    .estimation_type_object_item_selected > .item_description{
        background-color: #DFC05A;
        color: white;
    }

    .estimation_type_metal_item:hover > .item_description{
        background-color: #DFC05A ;
        color: white;
    }
    .estimation_type_metal_item_selected > .item_description{
        background-color: #DFC05A;
        color: white;
    }
    .estimation_type_objet_list_item, .estimation_type_metal_list_item{
        row-gap: 20px;
    }
    .estimation_carat_list_item {
        gap: 10px;
    }
    .estimation_type_objet_item, .estimation_type_metal_item, .estimation_carat_item{
        padding: 15px 15px;
        /* border: 2px solid #DFC05A; */
        box-shadow: rgb(100, 100, 100) 0px 1px 6px 0px;

    }
    .estimation_type_metal_item_autre{
        width: 100%;
    }
     .item_image img {
        width: 100%;
        border-radius: 0px;
        height: auto;
    }
    .item_description{
        background-color: white
    }
    .estimation_carat_item_selected {
        border-radius: 10px;
        background-color: #DFC05A;
        color: white;
    }

    .estimation_carat_item:hover {
        background-color: #DFC05A;
    }
    .widget_estimation_button_confirmation_container{
        justify-content: center;
        flex-direction: column;
    }
    .bijoux_info_supp_container{
        padding: 15px 0px;
    }
    .bijoux_info_supp{
        flex-direction: column;
    }
    .bijoux_info_supp_input_container{
        padding:0px
    }
    .user_information_form_tableau_widget_reservation_cours_metaux{
        width: 100%;
    }
    .button_phone_notice{
        display: flex;
        justify-content: center;
        padding: 10px 0px;
    }
    .user_information_form_tableau_widget_reservation_cours_metaux{
        padding-right: 0px;
        padding-left: 0px;
    }
    #form_information_client input, #form_information_client textarea, #form_devises input,
    .section_list_row_input input, #form_information_client input,
    .wizarFormulaireInfoUser input, .wizarFormulaireInfoUser textarea {
        font-size: 16px !important;
}
}

@media only screen and (min-width: 1600px){
    .item_image img {
        width: 223px;
        height: 223px;
    }
}



/****************     WIIZARD FRAME   *****************/
#mainDivEstimation {

    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22);
    border-radius: 20px;
    padding: 20px 32px;
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    font-family: "overpass";
    flex-direction: column;
    row-gap: 20px;
}



.fit-picture {
    width: 40%;
}
.item_img_span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* .itemEtape2
{
    height: 60px !important;
} */

.spanEtape2{
    display: flex;
    align-items: center;
}

#page-estimated-title {
    text-align: center;
}

.produit_estimated_texte_span {
    padding-left: 15px;
}

#wizardFrame {
    box-shadow:0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22);
    border-radius: 20px;
    padding: 20px 32px;
    background-color: #F5F5F5;
    width:70%;
    margin-top: 20px;
    margin-bottom: 25px;

}
.section {
    padding-top: 10px;
}
.StepTitleSection {
    margin-left: 15px;
    font-size:16px;
}
.flex-row-container {
    /*background: #aaa;*/
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    justify-content: space-between;
}
.flex-row-container > .flex-row-item {
    flex: 1 1 30%; /*grow | shrink | basis */
    height: 140px;
    /*padding: 15px;*/
    max-width: 30%;

}

.flex-row-item {
    margin: 25px 0px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22);
    cursor: pointer;
    transition: 0.4s;
    background-size: 100% 70%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}

.flex-row-item:hover {
  transform: scale(1.1, 1.1);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22)
}
.flex-row-item span {
    justify-content: center;
    text-align: center;
    font-weight: bolder;
    font-size: 17px;
    align-items: flex-end;
    display: flex;
}

.row_input {
    display: flex;
    padding: 15px 0px;
}
#input_button {
    padding: 7px 17px;
    background-color: #DFC05A;
    color: white;
    border: none;
    border-radius: 20px;

}

.titleSection {
    font-size: 20px;
    display: flex;
    align-items:center;
}

.div_input_button {
    padding: 0px 15px;
}
.section.transition {
    transition: all 0.2s ease-out;
}

 /* .section div {
             display: flex;
             -webkit-animation: slide-down 1.3s ease-out;
             -moz-animation: slide-down 1.3s ease-out;
         }
         @-webkit-keyframes slide-down {
             0% {
                 opacity: 0;
             }
             100% {
                 opacity: 1;
             }
         }
         @-moz-keyframes slide-down {
             0% {
                 opacity: 0;
             }
             100% {
                 opacity: 1;
             }
         } */


.info-produit-estimated {
    padding: 3px 20px;
    background-color: rgba(0, 0,0, 0.25);
    color: black;
    margin: 0rem 1rem;
    border-radius: 20px;

}

#produit-estimated {
    padding: 0.5rem 0rem;
    justify-content: stretch;
    background-color: white;
    display: none;
    align-items: center;
    border-radius: 50px;
}

.progressBarMainContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.arrowGoBack {
    display: none;
    align-items: center;
    padding-right: 63px;
}
.arrowGoBack i:hover {
    transform: scale(1.35);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.listSteps {
    display: flex;
    column-gap: 20px;
}
.step {
    display: flex;
    flex-direction: column;
    opacity: 0.4;
}
.stepNumero {
    text-align: center;
}
.stepActive {
    color:#DFC05A; 
    opacity: 1;
}
.stepSuccess{
    color: #1d2327;;
    text-align: center;
    opacity: 1;
}
.stepSuccessCheck{
    color: green;
    text-align: center;
    opacity: 1;
}

.arrowNextWizard {
    width: 20px;
    height: 20px;
    border:  2px solid;
    border-color: #1d2327 transparent transparent #1d2327;
    transform: rotate(135deg);
    opacity: 0.4;
  }
.arrowNextWizardSuccess {
    width: 20px;
    height: 20px;
    border:  2px solid;
    border-color: #DFC05A transparent transparent #DFC05A !important;
    transform: rotate(135deg);
    opacity: 1;
  }
  .mobileProgressBarMainContainer {
    width: 100%;
    justify-content: center;
  }
  .currentStepProgressBar {
    color: #DFC05A
  }

  .progressBar {
    display: flex;
    column-gap: 15px;
  }

  .progressBarObjetContainer{
    display: none;
    justify-content: center;
  }

  .progressBarObjet {
    display: flex;
    background-color: white;
    border-radius: 20px;
    padding: 4px 10px;
    column-gap: 10px;
    width: 50%;
  }
  .libelleProgressBarObjet {
    display: flex;
    align-items: center;
  }

  .progressBarObjetItem{
    border: 1px #DFC05A solid ;
    border-radius: 20px;
    padding: 2px 15px;
  }

  .infoWizardTitle {
    text-align: center;
    font-size: 22px;
  }
.listCard {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 75%;
    align-self: center;
    column-gap: 35px;
    row-gap: 40px;
}
.card {
    /* flex: 0 0 33.333333%; */
}
 .listCard figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 223px;
    height: 299px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}
.listCard figure:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    /* box-shadow: 0px 15px 20px rgba(223,192,90,0.4); */
}
/* .listCard figure:hover img {
    transform: scale(1.25);
} */

.listCard figure:hover  {
    transform: scale(1.05);
}


.listCard figure:hover figcaption h3 {
    color: white;
    transition: 0.25s;
    /* bottom: -5%; */
}
.titleCard {
    position: absolute;
    top: 50px;
    left: 20px;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 60px;
    font-weight: 100;
    line-height: 1;
}
.listCard figure img {
    height: 100%;
    transition: 0.25s;
}
.listCard figure figcaption {
    position: absolute;
    bottom: -85%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 30px;
    background-color: rgba(223, 192, 90, 0.95);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    color: black;
    line-height: 1;
    /* transition: 0.25s; */
}
.listCard figure figcaption h3 {
    margin: 0 0 20px;
    padding: 0;
    color: black;
}
.listCard figure figcaption p {
    font-size: 14px;
    line-height: 1.75;
}
.listCard figure figcaption button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: 10px 0 0;
    padding: 10px 30px;
    background-color: #1abc9c;
    border: none;
    border-radius: 5px;
    color: black;
    font-size: 14px;
}
 .listMetaux, .listCarat,.cardPoids,.wizardFormulaireContainer, .wizardRecapContainer {
    display: none;
}
.cardPoids {
    justify-content: center;
    flex-direction: column;
    row-gap: 15px;
}
.inputPoidContainer {
    display: flex;
    justify-content: center;
    column-gap: 10px;
}
.inputPoidContainer input{
    border: none;
    background-color: white;
    border-radius: 20px;
    padding: 5px 13px;
}
.wizardButtonValidPoidsContainer{
    display: flex;  
    justify-content: center;
}

.wizardFormulaireContainer {
    justify-content: center;
}
.wizardRecapContainer{
    justify-content: center;
    column-gap: 40px;
}
.wizardRecapObjet {
    
}

.circleStepTitleSection {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:1.5rem;
    height:1.5rem;
    color:#DFC05A;
    border:2px solid #DFC05A;
    border-radius:100%;
    background-color:#fff; 
    padding: 13px;
    font-size: 16px;
}

.noMargin {
    margin: 0px !important;
}
#form_information_client input, #form_information_client textarea, #form_devises input,
.section_list_row_input input, #form_information_client input,
.wizarFormulaireInfoUser input, .wizarFormulaireInfoUser textarea {
    border: none;
    background-color: white;
    border-radius: 20px;
}
#form_information_client .input_tableau_des_cours{
    /* background-color: #F5F5F5 !important; */
}
#form_devises input[type="number"] {
    max-width: 70%;
    align-items: center;
    padding-left: 10px;
    display: flex;
}

.formContainerConvertisseur{
    padding-top: 30px;
}

.input_row_devise {
    width: 70%;
    max-width: 70%;
}

.div_input_row {
    display: flex;
    justify-content: space-between;
}

.inputRow {
    width: 50%;
    max-width: 50%;
}

.spanMoreCurrencies{
    color: #DFC05A;
    /* text-decoration: underline; */
    text-underline-offset: 8px;
    pointer-events: auto;
    cursor: pointer;
}
.spanMoreCurrencies:hover{
    color: #DFC05A;
    text-decoration: underline;
}
.buttonMoreCurrencies {
    border-radius: 100px;
    background-color: transparent;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    border: 2px #dfc05a solid;
    padding: 2px 25px;
}

#buttonSubmit, #confirmationReservation, #moreCurrencies, #boutonPhoneConvertisseur, .button_array_reservation,.wizardButtonValidPoids, .wizardButtonValidFormulaire ,.boutonPhoneNumber {
    background-color: #DFC05A;
    border: none;
    color: black;
    border-radius: 20px;
    padding: 2px 25px;
}

#buttonSubmit, #confirmationReservation, #moreCurrencies, #boutonPhoneConvertisseur, .button_array_reservation,.wizardButtonValidPoids, .wizardButtonValidFormulaire, .boutonPhoneNumber  {
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    font-size: 22px;
}
#boutonPhoneConvertisseur {
    font-size: 17px;
}

.boutonPhoneNumber {
    font-size: 22px;
    margin-top: 20px;
}
#buttonSubmit{
    font-size: 22px;
    border-radius: 100px;
}

.boutonPhoneNumber:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
    /* transform: translateX(7px); */
}
.boutonPhoneNumber:hover a {
    color: white !important;
    /* transform: translateX(7px); */
}
#buttonSubmit:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
    /* transform: translateX(7px); */
  }
  #confirmationReservation{
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
    font-size: 22px;
}
#confirmationReservation:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
    /* transform: translateX(7px); */
  }
#moreCurrencies:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
    /* transform: translateX(7px); */
  }
.button_array_reservation:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
    /* transform: translateX(7px); */
  }
#boutonPhoneConvertisseur:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
}

.wizardButtonValidPoids:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
}
.wizardButtonValidFormulaire:hover {
    background-color: #DFC05A;
    box-shadow: 0px 15px 20px rgba(223,192,90,0.4);
    color: white;
}
.divBoutonPhoneConvertisseur{
    /* text-align: center; */
    font-size :22px;
    padding-top: 15px;

}

#div_button_submit {
    display: flex;
    justify-content: right;
}

.recap_header {
    background-color: white;
    display: flex;
    padding-left: 2rem;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 20px;

}
.recap_header_texte {
padding-left: 1rem;
font-size: 17px;
font-weight: bold;

}
#main_div_recap_info {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
#div_recap_texte_confirmation {
    text-align: center;
    padding: 20px 0px;
    font-size: 17px;
}


.main_div_recap {
    display:flex; 
    flex-direction:column;
    padding-left: 5rem;
    padding-top: 2rem;
}
.recap_info {
    display: flex;
}
.subDiv_recap {
    max-width: 45%;
    width: 45%;
}


/***************** TABLEAU COURS OR ARGENT PLATINE FRAME ****************/

.main_array_container {
    display: flex;
    flex-direction: column;
    font-family: "overpass";
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25), 0px 0px 20px 0px rgba(0,0,0,0.22);
    border-radius: 20px;
    padding: 20px 32px;
    /* font-size: 17px;
    font-family: "overpass"; */
    background-color: #F5F5F5;
}
.header_section{
    display:flex;
    justify-content: space-between;
}

.header_section_title {
    width: fit-content;
    padding: 0px 34px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    width: 118px;
    font-weight: bold;
    font-size: 17px;
}
.header_section_background_gold {
    background: #DFC05A;
}
.header_section_background_silver, .header_section_background_platine {
    background: #C0C1C5;
}
.section_list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 5px auto;
}
.section_list_row {
    background-color: white;
    border-radius: 20px;
    padding: 5px 25px;
    margin: 5px 0px;
    display: flex;
    justify-content: space-between;
}
.section_list_row_label {
    width: 30%;
}
.section_list_row_rate {
    display: flex;
    vertical-align: center;
    align-items: center;
    width: 14%;
}

.section_list_row_input input {
    margin-right: 1rem;
    padding: 5px 13px;
    width: 85px;
    background-color: #F5F5F5;
}
.section_list_row_input {
    width: 23%;
}
.section_montant_total {
    background-color: #DFC05A;
    border-radius: 50px;
    display: flex;
    justify-content: right;
    padding: 5px 25px;
}
.label_montant_total{
    font-size:18px;
}
.div_button_array_reservation {
    display: flex;
    justify-content: right;
}
/* .button_array_reservation {
    background-color: #DFC05A;
    border: none;
    color: white;
    border-radius: 20px;
    padding: 6px 25px;
} */
.section_list_row_value {
    width: 18%;
}

.estimated_product {
    column-gap: 10px;
    display: flex;
    margin: 5px 0px;
    justify-content: space-between;
}
.info_tableau_des_cours{
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}
.info_convertisseur_value_montant_total {
    display: flex;
    justify-content: right;
    border-top: 1px solid black;
    margin-top: 10px;
    padding-top: 5px;
}



/* ///////////////////       RESPONSIVE DESIGN  //////////////// */



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 1200px) {
/*********** CONVERTISSEUR  ***********/

    .col1{
        width: 100% !important;
        flex-direction: column;
    }
    .col2{
        width: 100% !important;
    }
    .extension_devises {
        display: none;
    }
    .mobile_devises_exotic {
        display: flex;
        flex-direction: column;

    }

    .section_convertisseur_col{
        width: initial;
    }
    .action_convertisseur, .devises_convertisseur{
        width: 100%;
        max-width: none;
    }
    
    .devise_info_header, .simulation_info_header, .action_info_header,.user_info_header{
        justify-content: left;
        padding-left: 0rem !important;
    }
    .info_header_section{
        
        display: flex;
        padding-left: 2rem;
        padding-top: 6px;
        padding-bottom: 6px;
        border-radius: 20px;
        width: 100%;
        justify-content: center;
    }
    .section_simulation_convertisseur_form {
        max-width: none;
    }
    .section_action_convertisseur, .section_devises_convertisseur, .section_simulation_convertisseur{
        padding-left: 0rem;
        padding-top: 1rem;
    }
    .section_convertisseur{
        margin: 2rem 0rem;
    }
    #convertisseurMain {
        display:  block;
        padding: 20px 18px;
    }

    .div_header_section_recap_info {
        display: block;
    }
    .div_info_header_section {
        width: 100%;
        margin: 2rem 0rem;
    }
    .containerFormulaire_convertisseur_devise{
        flex-direction: column-reverse;
    }
    .section_form_convertisseur {
        flex-direction: column;
    }
    .input_row_simulation {
        margin-bottom: 10px;
    }
    #form_simulation_section,.input_row_simulation {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
    }
    #form_devises input[type="number"]{
        max-width: none !important;
    }
    .button_form{
        text-align: initial;
    }
    
    .div_header_section {
        width: 100%;
        max-width: none;
        column-gap: 15px;
      }
      #form_information_client {
        padding-top: 2rem;
        width:100%;
      }
      .convertisseur_input_row {
        flex-direction: column;
        align-items: center;
      }
      .convertisseur_input {
        width: 100% !important;
      }
      .recap_subtitle {
        text-align: justify;
        padding-top: 15px;
      }
      .user_information_convertisseur_devise {
        width: 100%;
        row-gap: 30px;
      }
      .span_flag img {
        max-width: 70px;
        margin-left: 5px;
        align-self: initial !important;
      }

/************ TABLEAU DES COURS ***********/

.section_list_row_input {
    width: auto;
    display: flex;
    column-gap: 11px;
}
.section_list_row {
    /* align-items: center; */
    flex-direction: column;
    row-gap: 10px;
    
}

.section_list_row_input input {
    margin-right: 1rem;
    padding: 5px 13px;
    width: 90px;
  }

  .desktop_tab {
    display: none;
  }

  .mobile_tab{
    display: flex;
  }
  .align-center {
    text-align: center;
  }
  .list_row_libelle{
    /* width: 40%; */
    display: flex;
    justify-content: space-between;
    /* column-gap: 10px; */
  }
  .section_list_row_estimation {
    display: flex;
    column-gap: 15px;
  }
  .section_montant_total {
    border-radius: 20px;
    padding: 5px 20px;
  }
  .main_array_container{
    padding: 20px 20px;
  }
  .containerFormTableau{
    /* flex-direction: column-reverse; */
  }
  .user_information_form_tableau{
    width: 100%;
    padding-top: 15px;
    padding-left: 10px;
  }

  .display_information {
    flex-direction: column;
    padding-bottom: 20px;
  }
  .display_information:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    width: 15%; /* Change this to whatever width you want. */
    padding-top: 5px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
}

.user_information_form_tableau {
    row-gap: 15px;
}

.info_tableau_des_cours{
    row-gap: 0px
}
/************ ESTIMATION EN LIGNE ***********/

.progressBarMainContainer{
    display: none;
}
.mobileProgressBarMainContainer {
    display: flex;
}
.listCard figure {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important;
}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
/************ CONVERTISSEUR ***********/

    /* .info_header_section{
        width: 100%;
    }
    .section_simulation_convertisseur_form {
        max-width: none;
    }
    .section_action_convertisseur, .section_devises_convertisseur, .section_simulation_convertisseur{
        padding-left: 0rem;
        padding-top: 1rem;
    }
    .section_convertisseur{
        margin: 2rem 0rem;
    }
    #convertisseurMain {
        display:  block;
    }
    .div_info_header_section {
        width: 45%;
    }
    .div_header_section_recap_info {
        justify-content: space-around;
    }
    .section_form_convertisseur {
        align-items: center;
    }
    .div_header_section {
        width: 50%;
        max-width: 80%;
      }
    #form_information_client {
        width: 80%;
    }
    #form_simulation_section,.input_row_simulation {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
    /*}*/
    /* #form_devises input[type="number"]{
        max-width: none !important;
    }  */

    /************ ESTIMATION EN LIGNE ***********/

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
/************ CONVERTISSEUR ***********/
    /* #convertisseurMain {
        display:  block;
    } */
/************  ESTIMATION EN LIGNE ***********/

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/************ CONVERTISSEUR ***********/

    /* #convertisseurMain {
        display:  flex;
    }
    .info_header_section{
        display: flex;
        padding-left: 2rem;
        padding-top: 6px;
        padding-bottom: 6px;
        border-radius: 20px;
        width: 90%;
    }
    .section_action_convertisseur, .section_devises_convertisseur, .section_simulation_convertisseur {
        padding-left: 4rem;
        padding-top: 3rem;
    }
    #form_information_client {
        padding-top:20px;
        width: 45%;
    }
    .div_header_section {
        width: 35%;
        max-width: 40%;
    }
    .section_form_convertisseur {
        align-items: normal;
    } */

/************ ESTIMATION EN LIGNE ************/

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/********** CONVERTISSEUR ***********/

    .section_action_convertisseur, .section_devises_convertisseur, .section_simulation_convertisseur {
      /* padding-left: 4rem; */
      padding-top: 2rem;
      display: flex;
      flex-direction: column; 
      padding-bottom: 2rem;
    }
    #convertisseurMain {
        display: flex;
    }

/************ TABLEAU DES COURS   ************/
  .mobile_tab{
    display: none;
  }
/************ ESTIMATION EN LIGNE  ************/
.progressBarMainContainer {
    display:flex;
}
.mobileProgressBarMainContainer {
    display: none;
}

} 
/* @media only screen and (min-width: 1380px) {
    
    .section_simulation_convertisseur_form {
        max-width: 70%;
    }
}  */


/*input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;


}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
   -webkit-appearance: none;
    background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1em;
    border-left: 1px solid #bbb;
    opacity: .5;
}*/



/*  .steps{padding:0;margin:0;list-style:none;display:flex;overflow-x:auto}
 .steps .step:first-child{margin-left:auto}
 .steps .step:last-child{margin-right:auto}
 .step:first-of-type .step-circle::before{display:none}
 .step:last-of-type .step-content{padding-right:0}
 .step-content{box-sizing:content-box;display:flex;align-items:center;flex-direction:column;width:5rem;min-width:5rem;max-width:5rem;padding-top:.5rem;padding-right:1rem}
 .step-circle{position:relative;display:flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;color:#adb5bd;border:2px solid #adb5bd;border-radius:100%;background-color:#fff}
 .step-circle::before{content:"";display:block;position:absolute;top:50%;left:-2px;width:calc(5rem + 1rem - 1.5rem);height:2px;transform:translate(-100%,-50%);color:#adb5bd;background-color:currentColor}
 .step-text{color:#adb5bd;word-break:break-all;margin-top:.25em}
 .step-active .step-circle{color:#fff;background-color:#007bff;border-color:#007bff}
 .step-active .step-circle::before{color:#007bff}.step-active .step-text{color:#007bff}
 .step-error .step-circle{color:#fff;background-color:#dc3545;border-color:#dc3545}
 .step-error .step-circle::before{color:#dc3545}.step-error .step-text{color:#dc3545}
 .step-success .step-circle{color:#28a745;background-color:#fff;border-color:#28a745}
 .step-success .step-circle::before{color:#28a745}.step-success .step-text{color:#28a745}
*/










/*.card {
  position: relative;
  min-width: 320px;
  height: 440px;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  margin: 30px;
  transition: 0.5s;
}

.card:nth-child(1) .box .content a {
  background: #2196f3;
}

.card:nth-child(2) .box .content a {
  background: #e91e63;
}

.card:nth-child(3) .box .content a {
  background: #23c186;
}

.card .box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #2a2b2f;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;
    background-image: url(http://localhost:8888/ABACOR-NEUILLY/wp-content/uploads/2022/07/rachat-or1-1024x682.jpg);
  background-size: cover;

}

.card .box:hover {
  transform: translateY(-50px);
}

.card .box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
}

.card .box .content {
  padding: 20px;
  text-align: center;
}

.card .box .content h2 {
  position: absolute;
  top: -10px;
  right: 30px;
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.1);
}
.card .box .content h3 {
  font-size: 1.8rem;
  color: #fff;
  z-index: 1;
  transition: 0.5s;
  margin-bottom: 15px;
}
*/