/*** Icones steps ***/
/* .icone-top{
  font-size : 3.2vw !important;
} */

#ligne_steps {
  width: 100%;
  position : absolute;
  top : 45%;
  z-index : 0;
  display: flex;
  border-top: 1vw solid #eee;
  border-bottom: 0px;
  border-left : 0px;
  border-right : 0px;
}

.steps, .steps > ul, .steps > ul > li{
  z-index:1;
  display: flex;
}

/* .steps > ul {
  padding-left : 0px;
  padding-right : 0px;
} */

.steps > ul > li {
  margin-left: auto;
  margin-right : auto;
}

/*** Eléments cachés ***/
.cache {
  display : none !important;
}

/*** Form des radio buttons ***/
input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  color: #9a929e;
  display: inline-block;
  cursor: pointer;
  /* font-weight: bold; */
  font-size : 10px;
  padding-top: 5px;
  padding-bottom : 0px;
  padding-left : 20px;
  padding-right : 20px;
  margin : 0px !important;
  text-align:center;
}

input[type=radio]:checked + label {
  color: red;
  border-style:solid;
  border-color:red;
  }

/* label + input[type=radio] + label {
  border-left: solid 3px #675f6b;
} */

.radio-group {
  border: solid #675f6b;
  display: block;
  margin-bottom: 20px;
  text-align:center;
  border-radius: 10px;
  overflow: hidden;
}

.radio-group > h3{
  margin-top : 2px;
  margin-bottom :5px;
  margin-left : 10px;
  margin-right : 10px;
}

input[type="radio"] {
  display : inline-block !important;
}

/*** Style des icones ***/
.ico {
  height : 100px;
  display : block;
}

.ico-color {
  height : 50px;
  width : 100px;
  display : block;
}

.ico-hub {
  height : 50px;
  display : block;
  margin-left:auto;
  margin-right:auto;
}

.ico-grille {
  height : 50px;
  display : block;
  margin-left:auto;
  margin-right:auto;
}

.ico-moteur {
  height : 80px;
  display : block;
  margin-left:auto;
  margin-right:auto;
}

.ico-dispo-grille {
  width : 100px;
  display : block;
  margin-left:auto;
  margin-right:auto;
}

.ico-ouv {
  width : 100px;
  display : block;
  margin-left:auto;
  margin-right:auto;
}

.ico-ouv-opt {
  height : 80px;
  display : block;
  margin-left:auto;
  margin-right:auto;
}

/*** icones des couleurs ***/
.blanc{
  background-color: white;
}

.noir{
  background-color: #000000;
}

.gris1{
  background-color: #a2a6a4;
}

.gris2{
  background-color: #8e8e8b;
}

.gris3{
  background-color: #363e42;
}

.gris4{
  background-color: #545c60;
}

.vert1{
  background-color: #0e4235;
}

.vert2{
  background-color: #25382e;
}

.marron{
  background-color: #48382c;
}

.bleu{
  background-color: #12437b;
}

.rouge{
  background-color: #b00900;
}

.beige{
  background-color: #f5e1aa;
}

.bois1{
  background-image:url("../img/couleur-bois1.jpg");
  background-size:cover;
}

.bois2{
  background-image:url("../img/couleur-bois2.jpg");
  background-size:cover;
}

.autrecouleur{
  background-image:url("../ico/ico_ral.jpg");
  background-size:cover;
}

/*** Gestion des images superposées ***/
.img-container{
  display : inline-block;
  position : relative;
}

.img-fond{
  z-index:1;
  /* position: relative; */
  display: inline-block;
}

.img-pdg{
  z-index:2;
  width: 90%;
  height : 90%;
  bottom : 0px;
  position: absolute;
  left: 5%;
}

.img-contour-pdg{
  z-index:5;
  width: 90%;
  height : 90%;
  bottom : 0px;
  position: absolute;
  left: 5%;
}

.img-poignee-pdg{
  z-index:8;
  bottom : 10%;
  left : 10%;
  position: absolute;
  height : 3%;
  width : 6%;
}

.layer{
  z-index:3;
  width: 90%;
  height : 90%;
  bottom : 0px;
  position: absolute;
  left: 5%;
}

/*** Gestion des champs mesure ***/
input[type=number]{
    width: 100%;
}

.posit-hauteur{
  position : absolute;
  left: 12%;
  width : 20%;
  bottom : 50%;
}

.posit-largeur{
  position : absolute;
  right: 10%;
  width : 20%;
  bottom : 73%;
}

.posit-ecoga{
  position : absolute;
  left : 1%;
  bottom : 25%;
  width : 20%;
}

.posit-ecodr{
  position : absolute;
  right : 1%;
  bottom : 25%;
  width : 20%;
}

.posit-linteau{
  position : absolute;
  right : 40%;
  bottom : 90%;
  width : 20%;
}

/*** Informations sur les dimensions ***/
#info-dim{
  background-color: black;
  opacity : 0.3;
  color:white;
  border-radius: 5px;
  padding : 20px;
}

/*** Rappel des dimensions ***/
.dimensions > p{
  margin-top : 5px !important;
  margin-bottom : 0px !important;
  margin-left : 10px !important;
}

/*** Placement des lames ***/
.lame-4, .lame-grille-4{
  position: absolute;
  z-index:5;
  left:5%;
  height:22.5%;
  width:90%;
}

.lame-4-1, .lame-grille-4-1{
  top:10%;
}

.lame-4-2, .lame-grille-4-2{
  top:32.5%;
}

.lame-4-3, .lame-grille-4-3{
  top:55%;
}

.lame-4-4, .lame-grille-4-4{
  top:77.5%;
}

/*** Taille de al porte et placement des poignées ***/
.porte{
  position: absolute;
  z-index:4;
  bottom:1%;
  height:85%;
  width:20%;
  z-index:4;
}

.poignee_pint{
  position: absolute;
  z-index:4;
  bottom:1%;
  height:80%;
  width:20%;
}

/*** Gestion des hublots en drag and drop ***/
#draggable, .hublot_draggable{
  z-index:7;
}

.hublot-couche{
  z-index:6;
}

.hublot-couche div{
display:inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}

.hublot-couche div img{
  /*max-height:50px;*/
}

#draggable, .hublot_draggable, .hublot-couche{
  position: absolute;
  top : 10%;
  width : 80%;
  left : 10%;
  height:22.5%;
}

.hublot-couche > img, #draggable > div, .hublot_draggable > div, .lame-grille-4 > div {
  /* top: 50%; */
  transform: translate(0%,50%);
  height:50%;
}

/*** Affichage du prix toujours sur l'écran ***/
.stickydiv {
    background-color: red;
    opacity : 0.6;
    text-align:center;
    font-size : 30px;
    color: white;
    border-radius: 15px;
    position: fixed;
    left: 50%;
    transform: translate(1%, -50%);
    bottom: 5px;
    max-width: 50%;
    z-index:1000;
    margin-bottom : 20px;
  }

/***colonnes non responsive pour les hublots ***/
.column {
  float: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* position images de hublot */
.center {
  display: block;
  text-align:center;
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*** Tableaux zébrés, affichage du résumé et bouton de validation de l'achat ***/
.table-striped tbody tr:nth-of-type(odd) {
 background-color: rgba(0, 0, 0, 0.05);
}

.shop_table tbody tr{
  height : 10px !important;
}

.btn_valid{
  color: orange;
  background-color:transparent;
  border : 2px solid orange !important;
  padding : 10px 20px;
  font-size : 20px;
  border-radius : 15px !important;
  margin-left : 20px;
  display: flex;
  float:right;
}

.btn_valid:hover{
  color:green;
  border : 2px solid green !important;
}

.gauche{
  left:15%;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
}

.droite{
  position:absolute;
  right:15%;
  top: 50%;
  transform: translateY(-50%);
}

.dimensions > p {
  text-align : left;
}