body { font-family :Arial; 
    margin:10px; 
    padding:10px; 
    color: #333; 
    text-align: justify; 
    height: 100%; 
    background-color: RGB(236,237,237); }

/* Menu */
/* --------------------- */
.dropdown-submenu {
  position: relative;
  font-size: 12px;
}
.dropdown-submenu .dropdown-menu {
  font-size: 12px;
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
/* SPECIAL : ROTATION des flèches */
/* --------------------- */
.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

/* --------------------- */
/* SPECIAL : ROTATION des flèches */
/* Niveau 1 */
li .dropdown-toggle:after {
  transition: all 0.5s;
}
li.show > .dropdown-toggle:after {
  transform: rotate(180deg);
}
/* sous-Niveaux suivants */
li li.show > .dropdown-toggle:after {
  transform: rotate(90deg);
}
/* --------------------- */
.form-inline input {
  width: 200px;
  font-size: 12px;
}
.navbar {
font-size: 12px;
  height: 50px;
}
 a.dropdown-item {
  font-size: 12px;
 }
.container .bar {
    font-size: 20px;
    width: 200px;
    height: 25px;
    border: 3px solid #eaeaea;
    margin: 100px auto;
    border-radius: 7px;
    position: relative;
    background: rgba(255,255,255,0.6);
}
.container .bar::after {
    content: "Chargement...";
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: absolute;
    left: 18%;
    top: 150%;
}

.container .bar .sphere {
display: block;
width: 23px;
height: 100%;
background: #eaeaea;
border-radius: 50%;
-moz-animation: slide 1.75s infinite ease-in-out alternate;
-webkit-animation: slide 1.75s infinite ease-in-out alternate;
-ms-animation: slide 1.75s infinite ease-in-out alternate;
-o-animation: slide 1.75s infinite ease-in-out alternate;
}

@-moz-keyframes slide {
    to {margin-left: 90%;}
}

@-webkit-keyframes slide {
    to {margin-left: 90%;}
}

@-ms-keyframes slide {
    to {margin-left: 90%;}
}

@-o-keyframes slide {
    to {margin-left: 90%;}
}

#content {
    display: none;
    text-align: center;
}

#fond {
    position:absolute;
    z-index:9000;
    background-color: darkgray;
    display:none;
    border-radius: 10px;
 }
 
 .popup {
    position:fixed;
    display: flex ;
    align-items: center;
    justify-content: center;
    width:300px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
    border-radius: 10px;
    background-color: white;
    border: 1px solid grey;
 }
 
 #modal {
    width:300px;
    height:200px;
 }