.global_div_demarche .btn_calculer_prix_plaque{ 

background: <?= @$all_apparence['main_color']?> ;
background-color: <?= @$all_apparence['main_color']?> !important;
color: #fff;
border: 1px solid <?= @$all_apparence['main_color']?> ;
}
.global_div_demarche .img_icon_imm {

background: <?= @$all_apparence['main_color']?> ;
}



.div_spi_region{
float: left;
width: 10%;
padding: 3px;
position:relative;

}


.div_spi_region img{
width: 66px !important;
height: 66px !important;
border-radius: 6px !important;
border: 1px solid #006ca4 !important;
padding: 2px
}

.departement_selected{
position:relative;
}

.coderegion_selected:before,.departement_selected:before {
color: #4CAF50;
content: "\f058";
font-family: "Font Awesome 5 Pro";
font-weight: 900;
right: 0;
top: 0;
position: absolute;
background: white;
height: 20px;
width: 20px;
border-radius: 50%;
line-height: 20px;
}


.div_spi_departement{
float: left;
width: 100%;
padding: 2px;
margin: 5px;
}

.all_spi_departement{
float: left;
height: 50px;
width: 50px;
border: 1px solid gray;
color: #272727;
text-align: center;
margin: 3px;
line-height: 50px;
border-radius: 50%;
}


.div_spi_region:has(.error) img {
border: 1px solid red !important;
}

.spi_region.error,.spi_region.valid{border: none !important;}

.all_spi_departement:has(.error) {
border: 1px solid red !important;
}
.spi_departement.error,.spi_departement.valid{border: none !important;}


.label_text_personnalise {
position: relative;
padding: 7px;
border: 1px solid;
margin: 8px;
border-radius: 4px;

}
.text_personnalise_checked:before {
color: #4CAF50;
content: "\f058";
font-family: "Font Awesome 5 Pro";
font-weight: 900;
right: -7px;
top: -10px;
position: absolute;
background: white;
line-height: 20px;
border-radius: 50%;
}



#div_text_personnalise {
width: 33.33% !important;
max-width: 100% !important;
margin-bottom: 9px;
float: left;
padding: 12px;
}

#div_val_text_personnalise {
width: 33.33%;
max-width: 100% !important;
margin-bottom: 9px;
float: left;
padding: 12px;
}


#form_spi #message{
margin: 1px !important;
padding: 1px !important;
}

.global_div_spi_immatriculation_plaque{
background: white;
}
#div_spi_immatriculation{
position: relative;
width: 50% !important;
max-width: 100% !important;
margin-bottom: 9px;
float:left;
}

.type_materiau_checked,.type_fixation_checked,.type_vehicule_checked{
border: 1px solid #4CAF50 !important;

}
.type_materiau_checked:before,.type_fixation_checked:before,.type_vehicule_checked:before,.type_plaque_checked:before{
color: #4CAF50;
content: "\f058";
font-family: "Font Awesome 5 Pro";
font-weight: 900;
right: 0;
top: 0;
position: absolute;
}


#div_spi_immatriculation .div_spi_immatriculation{
position: relative;
}

#div_spi_immatriculation .img_icon_imm {
position: absolute;
top: 0px;
width: auto;
height: 50px;
background: #192777;
left: 0;
border: none;
box-shadow: none;
border-radius: 7px 0 0 7px;
}



#img_loading_cart_spi{
display:none;
height: 18px;
width: 18px;
margin-top: -4px;
margin-right: 5px;
}

#div_spi_immatriculation input[type=number], #div_spi_immatriculation input[type=text] {
height: 50px;
border-radius: 7px;
margin-bottom: 0;
border: 1px solid #c1c1c3;
margin-top: 0px;
padding-left: 30px !important;
color: #262525;
width: 100%;
text-transform: uppercase;
text-align: center;
}

#div_spi_departement{width: 33.33% !important;max-width: 100% !important;margin-bottom: 9px;float:left;padding: 12px;}


#div_spi_departement select{}
#div_spi_btn_calcluler{
width: 100% !important;
max-width: 100% !important; 
}


#div_spi_btn_calcluler .btn_calculer_prix_plaque {
background: #192777;
background-color: #192777!important;
color: #fff;
padding: 10px;
height: 50px;
min-width: 180px;
border: 1px solid #a7c7e8;
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgb(0 0 0/14%), inset 3px 0px 1px -2px rgb(0 0 0/6%), 0 1px 5px 0 rgb(0 0 0/12%);
width: 100%;
text-align: center;
line-height: 18px;
cursor: pointer;
margin-top: 0px;
}



#div_spi_btn_calcluler .loading_img {
display: none;
background: 0 0;
height: 23px;
float: left;
margin-top: -2px;
}

#type_vehicule{
max-width: 100% !important;
width: 100% !important;
border: 1px solid #e3dada;
border-radius: 7px;
line-height: 39px;
padding-left: 8px;
float: left;
margin-top: 9px;
position: relative;
}

#type_materiau,#type_fixation{
max-width: 100% !important;
width: 100% !important;
border: 1px solid #cccaca;
border-radius: 7px;
line-height: 40px;
padding-left: 8px;
float: left;
margin-top: 9px;
margin-bottom: 9px;
}


#type_materiau .label_,#type_fixation .label_{
position: relative;
min-height: 90px;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #c1c0c0;
background-color: #f6f6f6;
width: 31% !important;
float: left;
padding: 4px;
margin: 3px;
color: #192777;
margin-bottom: 11px;
border-radius: 7px;
}

#type_materiau .label_ .prix_,#type_fixation .label_ .prix_{
position: absolute;
bottom: 6px;
right: 11px;
}


#type_materiau .label_ .taille_,#type_fixation .label_ .taille_{
position: absolute;
bottom: 6px;
left: 8px;
color: gray;
}





#type_materiau .label_ .img_produit_,#type_fixation .label_ .img_produit_{
font-weight: bold;
height: auto;
max-width: 100%;
max-height: 50px;
}



#type_materiau .label_ input,#type_fixation .label_ input{
float:left;
}

#type_materiau .label_ input,#type_fixation .label_ input{
float:left;
margin-right: 6px;
margin-top: 7px;
}

#type_materiau .label_ .nom_produit_,#type_fixation .label_ .nom_produit_{
font-weight: bold;
float: left;
line-height: 13px;
margin-top: 11px;
}


#form_spi h3{font-size: 22px;text-align: center;}

#form_spi h5{font-size: 17px;text-align: center;}


#form_spi{
float: left;
width: 100%;
padding: 10px;
border-radius: 12px;
border: 1px solid #cac7c7;
background: white;
max-width: 900px;
margin: 0 auto;
}



#form_spi h6{color: #343434;font-size: 15px;margin: 4px;padding: 4px;}

#form_spi hr{

background-color: #e2dede;
padding: 0px;
width: 53%;
margin: 0 auto;
margin-bottom: 16px;
}


#form_spi input.error,#form_spi select.error{color:red;border: 1px solid red;}
#form_spi input.valid,#form_spi select.valid{color:#4CAF50;border: 1px solid #4CAF50;}


#form_spi .label_:has(> input.error) {
color:red;
border: 1px solid red;
}


#form_spi label.error{display: none !important;}



#type_plaque {width: 45%;float: left;padding-left: 14px;}

#type_plaque .label_{
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid #c1c0c0;
    background-color: #f6f6f6;
    width: 31% !important;
    float: left;
    padding: 4px;
    margin: 1px;
    margin-bottom: 6px;
    border-radius: 7px;
    position: relative;
    margin-right: 5px;
    min-height: 52px;
}



#type_vehicule .label_{
position: relative;
min-height: 100px;
background-repeat: no-repeat;
background-size: contain;
border: 1px solid #c1c0c0;
background-color: #f6f6f6;
width: 24% !important;
float: left;
padding: 4px;
margin: 3px;
margin-bottom: 11px;
border-radius: 7px;
max-height: 93px;
position: relative;
}

#type_plaque .label_ b{
font-size: 20px;
text-align: center;
color: #192674;
}


#type_plaque .label_ p{
    font-size: 12px;
    text-align: center;
    color: #192674;
    margin: 0;
    padding: 0;
    float: left;
}

#type_vehicule .label_ i{
font-size: 30px;
text-align: center;
color: #192674;
    margin-bottom: 15px;
}


#type_vehicule .label_ p{
text-align: center;
font-weight: bold;
color: #192674;
margin: 2px;
    margin-top: -15px;
}

#div_spi_region_departement{
width:100%;
float:left;

}

#div_qte_plaque{width: 33.33% !important;max-width: 100% !important;margin-bottom: 9px;float: left;padding: 12px;}


#div_total_commande{width: 33.33% !important;max-width: 100% !important;margin-bottom: 9px;float: left;}



#div_total_commande .total_commande_{
text-align: center;
line-height: 27px;
font-weight: bold;
margin-top: 50px;
}


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



#type_vehicule .label_ p {
font-size:11px;
}

#type_plaque .label_ p {
font-size: 9px;
text-align: center;
}

#type_plaque,#div_spi_immatriculation{
width: 100% !important;
float: left; 
}

#div_text_personnalise,#div_val_text_personnalise{
width: 100% !important;
float: left;
margin: 0;
padding: 0;
}

.div_spi_region {
width: 20% !important;
}

#type_fixation .label_ ,#type_materiau .label_ {
width: 48% !important;
}

#type_vehicule .label_{
width: 48% !important;
}


#form_spi h3{font-size: 14px;text-align: center;}

#form_spi h5{font-size: 11px;text-align: center;}

#form_spi h6 {
font-size: 12px;
}


#div_spi_departement,#div_qte_plaque,#div_total_commande{
width: 98% !important; 
padding:2px;
}

#div_total_commande .total_commande_{
margin-top:2px;
}
}