/*css projet RoadBook*/
.container {
  display: grid;
  grid-template-columns: 18.5% 11% 12.5% 8.5% 5.5% 25.5% 18.5%;
  grid-template-rows: 7em 14em 18em;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-items: stretch;
  grid-template-areas:
    "dessin intersection direction disTotal icone blocText commande"
    "dessin ecran ecran ecran ecran ecran commande"
    "dessin tabIcone tabIcone tabIcone tabIcone tabIcone commande";
}

.intersection { grid-area: intersection; /*background-color: yellow;*/}

.direction {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "disEvent";
  grid-area: direction;
  /*background-color: gray;*/
}

.disEvent { grid-area: disEvent;/*background-color: orange;*/ }

.disTotal { grid-area: disTotal;/*background-color: greenyellow; */}

.icone { grid-area: icone;/*background-color: olivedrab;*/ }

.blocText { grid-area: blocText; /*background-color: orangered;*/}

.dessin { grid-area: dessin;/* background-color: red;*/}

.commande { grid-area: commande;/*background-color: skyblue; */}

.tabIcone { grid-area: tabIcone;/* background-color: purple*/}

.ecran { grid-area: ecran; /*background-color: blue;*/}


html, body , .container {
  height: 100%;
  margin: 0;
}
  
/* For presentation only, no need to copy the code below */

/*.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}
*/
#dessinId {border: 4px outset red;}
  #ecranId{/*display: grid;width: 60%;*/ border: 4px outset blue;overflow: auto;}
#intersectionId{border: 4px outset yellow;}
#directionId{border: 4px outset gray;}
#disEventId{border: 4px outset orange;}
#disTotalId{border: 4px outset greenyellow;}
#iconeId{border: 4px outset olivedrab;}
#blocTextId{border: 4px outset orangered;}
#commandeId{border: 4px outset skyblue;}
#tabIconeId{border: 4px outset purple;overflow: auto;}

/*Partie vraiment utile ;-)*/
/***************************/
/*Gère la taille des inputs number*/
#id, #intersection{width: 50%;}
th{padding-right: 15px;padding-left: 15px;}
td{text-align: center;padding: auto;}