/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 10, 2021, 4:24:46 PM
    Author     : w3schools.com, modified extensively by james
*/
ul.circ {list-style-type: circle;}
ul.sqr {list-style-type: square;}
ol.uproman {list-style-type: upper-roman;}
ol.lowalpha {list-style-type: lower-alpha;}
ol.lowroman {list-style-type: lower-roman;}
ol.rstyle { list-style-type: lower-roman !important;}
div ol li ol li { list-style-type: lower-roman; }
/* .indented1 { padding: 0 0 0 .8em; } */
.nonumber  { list-style-type: none; }
div#rcol div.tjust { padding: 0 0 0 .4em; }
ol {
  counter-reset: item;
  list-style-position: outside;
} 
ol li {
  position: relative;
  left: 2em;
  display: block;
  /* list-style-type: upper-roman; */
  list-style-position: outside;
}

summary#topleftSummary { font-style: italic; font-weight:  900; margin-left: .1em; }
summary#toprightSummary { font-style: italic; font-weight:  900; margin-left: .1em; }
details details summary { font-style: italic; font-weight:  700; margin-left: .5em; }

/*  
  ol li ol { 
    padding-left: 1.5em;
} */

li:before {
  content: counters(item, ".");
  counter-increment: item;
  position: absolute;
  left: -2.5em; /* ~org 2.5 */
  display: block;
  width: 2em; /* ~org 2em to give the same dimensions to all counter 'blocks' */
  text-align: right; /* does exactly what you'd think =) */
}

/* nesting to 7 levels; should be more than enough */
li li:before {
  left: -2.5em; /* ~org 2.5 */
}

li li li:before {
  left: -3.0em; /* ~org 3.0 */
}
li li li li:before {
  left: -3.5em; /* ~org 3.5 */
}

li li li li li:before {
  left: -4em;
}
li li li li li li:before {
  left: -4.5em;
}
li li li li li li li:before {
  left: -5em;
}

div#leftMenuDiv {
}
div#rightMenuDiv {
}

/* other than list items below this line */
.tooltip {
  position: relative;
  /*  display: inline-block; */ 
  display: flex;
  /* border-bottom: 1px solid black; */
}

.tooltip .tooltiptext {
  visibility: hidden;
  /*  width: 120px; */
  padding: 5px 0;
  background-color: #ccffff;
  color: #000000;
  border-radius: 6px;
  border-style: solid;
  flex-wrap: wrap;
  order: 1;

  /* Position the tooltip 
  position: absolute;
  position: relative 
  position: relative; 
  width: 1px;
  height: 1px;*/
  /*  align-content:  stretch; */
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  /*  align-content: space-around;  */
  /*  flex-direction: column; 
  display: contents;*/
  align-content: space-around;
  justify-content: space-between;
  flex-direction: column;
  width: 200px; /* 300px; */ 
  z-index: 999;
}
.tooltipwidebox { display: flex; flex-wrap: wrap; flex-direction: column; z-index: 7; }
.tooltipwidebox:hover { visibility: visible; align-content: flex-start; flex-wrap: wrap;}

/* Example implementation
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
*/