/* ------------------------------------------------------------------------------------------------------------------ */
/* Base configuration */
/* ------------------------------------------------------------------------------------------------------------------ */

/** Main flex container **/
.flexMainContainer{
  /* -- Flex -- */
  display:          flex;
  flex-direction:   row;
  align-items:      center;
  /* -- Size and margin -- */
  width:        900px;    /* optional */
  margin:           0 auto;   /* optional: horizontal centering */
  margin-bottom:    1em;
  /* Style */
  border-radius:    4px;
}

/** Normal flex container **/
.flexContainer{
  display:          flex;
  flex-direction:   row;
}

.flexRowContainer{
  width:        900px;    /* optional */
  display:          flex;
  flex-direction:   row;
  justify-content: space-between;
}

/** Flex variations **/
.flexSpace{
  justify-content: space-between;
}

.flexSpaceAround{
  justify-content: space-around;
}

.flexColumn{
  flex-direction: column;
}

/** Bootstrap correction **/
.bg-primary input {
  color: #444;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Control panel */
/* ------------------------------------------------------------------------------------------------------------------ */

/** Panel style **/
#controlPanel{
  padding: 1em;
}

/** Genome **/
.ctl-genome-rec,
.ctl-genome-sym,
.ctl-genome-item {
    max-width: 4em; /* chaque item fait au moins 4em (tu peux virer le width sur les input qui ne sert plus) */
    flex: 1;        /* chaque items s'élargissent de manière égale pour remplir le conteneur flex */
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Display */
/* ------------------------------------------------------------------------------------------------------------------ */

#displayPanel{
  padding: 1em;
}

.cell {
  box-sizing: border-box;
  flex:       0;                /* les "cell" s'adaptent pour remplir la "row" de manière égale */
  width:      150px;            /* optionel: tu peux ajuster la largeur minimale, ou max avec max-width, etc. */
  height:     150px;            /* optionel: tu peux ajuster la largeur minimale, ou max avec max-width, etc. */
  margin:       10px;             /* optionel : espace les cellules */
  border:       2px solid black;
  background:   white;
}

.cellCanvas{
  width:  148px;
  height: 148px;
}

.mainCell {
  border:2px solid green;
  background:   white;
}

.cell:hover{
  outline: 5px solid black;
}

.mainCell:hover{
  outline: 5px solid green;
}