:root {
  --RWMcolor: #57C991;
  --IPMcolor: skyblue;
  --SWcolor: #FF7165;
  --JWcolor: #999FFF;
  --SDcolor: orange;
  --JDcolor: violet;
  --IGcolor: #D9CD48;
  --OGcolor: orange;
  --Ocolor: orange;
  --Ccolor: rgb(200,200,200);

  --RWMcol: #57C991;
  --IPMcol: skyblue;
  --SWcol: #FF7165;
  --JWcol: #999FFF;
  --SDcol: orange;
  --JDcol: violet;
  --IGcol: #D9CD48;
  --OGcol: orange;
  --Ocol: orange;
  --Ccol: rgb(200,200,200);
}


.toc {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

.tool{
/*  display: flex;*/
position: fixed;
  align-items: center;
/*  visibility: visible;
  float: left;*/
}

#tool.hover #DocToc{
  left: 0px;
}

#off.hover #offSelect{
  left: 0px;
}

.doc {
  position: absolute;
  left: 50px;
  padding: 15px;
  margin-top: 80px;
  padding-bottom: 180px;
  height: 100%;
}

#DocToc {
  position: absolute;
  padding-left: 10px; 
  padding-right: 10px; 
  border: solid 1px;
  background: rgb(240,240,240);
  left: -800px;
}

.clos{
  width:15px;
  float: right;
  margin: 9px;
}

#offSelect {
  position: absolute;
  padding-left: 10px; 
  padding-right: 10px; 
  padding-bottom : 10px; 
  width: 300px;
  border: solid 1px;
  background: rgb(240,240,240);
  left: -800px;
}

#closeOff{
  float: right;
  margin-top: 5px;
}

#RWM{
  background-color: var(--RWMcol);
}

#IPM{
  background-color: var(--IPMcol);
}

#SW{
  background-color: var(--SWcol);
}

#JW{
  background-color: var(--JWcol);
}

#SD{
  background-color: var(--SDcol);
}

#JD{
  background-color: var(--JDcol);
}

#IG{
  background-color: var(--IGcol);
}

#OG{
  background-color: var(--OGcol);
}

#O{
  background-color: var(--Ocol);
}

#C{
  background-color: var(--Ccol);
}

a:link, a:visited {
  color: black;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: black;
}

h1 {
  text-align: center;
  font-size: 24px;
}

label{
/*  width: 100%;*/
  display: block;
}

.TocLink {
  margin: 5px;
  text-align: left;
  width: max-content;
}

.TocTitle{
  text-align: center;
  padding-left: 10px;
}

h2   {
  color: black;
  text-align: center;
  margin-top: 100px;
}

td{
  text-align: left;
}

div:focus{
  border:solid red 5px;
}

.RWM{
  background-color: var(--RWMcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.RWMintro{
  float: left;
  color: var(--RWMcolor);
  margin-left: -55px;
}

.IPM{
  background-color: var(--IPMcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.IPMintro{
  float: left;
  color: var(--IPMcolor);
  margin-left: -55px;
}

.C{
  background-color: var(--Ccol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.Cintro{
  float: left;
  color: rgb(60,60,60);
  margin-left: -55px;
}

.SW{
  background-color: var(--SWcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.SWintro{
  float: left;
  color: var(--SWcolor);
  margin-left: -55px;
}
.JW{
  background-color: var(--JWcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.JWintro{
  float: left;
  color: var(--JWcolor);
  margin-left: -55px;
}
.SD{
  background-color: var(--SDcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.SDintro{
  float: left;
  color: var(--SDcolor);
  margin-left: -55px;
}
.JD{
  background-color: var(--JDcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.JDintro{
  float: left;
  color: var(--JDcolor);
  margin-left: -55px;
}
.IG{
  background-color: var(--IGcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.IGintro{
  float: left;
  color: var(--IGcolor);
  margin-left: -55px;
}
.OG{
  background-color: var(--OGcol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.OGintro{
  float: left;
  color: rgb(60,60,60);
  margin-left: -55px;
}
.O{
  background-color: var(--Ocol);
  border:solid white; 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 3px;
  text-align: justify;
}
.Ointro{
  float: left;
  color: rgb(60,60,60);
  margin-left: -55px;
}
.text {
  background-color: rgba(255,255,255,0.7);
  font-style: italic;
  text-align: justify;
}
.song{
  font-style: italic;
  background-color: yellow;
  font-family: sans-serif;
  margin-left: 15px;
  margin-top : 5px;
  margin-bottom: 3px;
}
.page{
/*  Affichage des numeros de page de l'edition papier : */
/* display: inline-block; */
  display: none;
  color:yellow;
  font-style: italic;
  font-size: 12px;
}

.tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */*/
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #888;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  padding: 5px;
  border-radius: 3px;
  position: absolute;
  top: -30px;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
/*  visibility: visible;*/
}

table{
  border: solid 1px black;
}

td{
  border: solid 1px black;
  padding-right: 5px;
  padding-left: 3px;
}