/* === Begin Table Styles ===  */

/* This class puts a little hand above a selectable line. */
tr.selectable
{ cursor: pointer !important }

/* The makes sure the buttons to the left and right
   does not mess up the caption title (must stay in center) */
.table-btns-left
{ margin-left: 1px;
  display: inline-flex;
  /* Ensures the table caption stays centered.*/
  width: 0px;
  float: left; }
  
.table-btns-right
{ margin-right: 1px;
  display: inline-flex;
  /* Ensures the table caption stays centered.*/
  width: 0px;
  float: right; 
  direction: rtl;  }

.table-caption
{ line-height: 24px; 
  user-select: none;
  -webkit-user-select: none; }

.table-caption-main
{ }

.table-caption-extra
{ }

.table-input
{ font-size: 120%;
  xfont-family: Monaco,Menlo,Consolas,"Courier New",monospace !important; }


/* voorlopige kleuren
    #EEF6FF  lichte regel / background
    #DDEEFF donkere regel
    #C9E4FF caption
*/

/* Begin definition list tables. */

/* Zorgt ervoor dat de tabel niet over de randen loopt, maar verschuifbaar is. */
.table-list-box
{ display: inline-block;
  padding-left: 4px; /* voor symmetry met verschuifbare tabellen */
  padding-right: 4px;
  width: 100%; }

.table-list
{ width: 100%;
  font-size: 80%;
  border-collapse: separate;
  border-radius: 4px;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  border-spacing: 0px;
  margin-top: 0px;
  margin-bottom: 6px;  /* Tussenruimte bij gestapelde tabellen */
  padding: 3px;
  line-height: 1.4; }
  
.table-list.table-glue
{ margin-bottom: -3px; }


.table-list caption
{ border-radius: 4px;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  font-weight: bold;
  margin-bottom: 2px; }

.table-list.table-glue caption
{ margin-bottom: 2px;}

.table-list td,
.table-list th
{ /* Dit kunnen we pas vaststellen als we ook een table-list gebruiken. */
  Xpadding-left: 0px;
  Xpadding-right: 0px; }

.table-list th
{ text-align: left; }

.table-list td:first-child
{ padding-left: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.table-list td:last-child
{ border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.table-list tr.selected
{ background-color: #96b1cc !important; }

/* opacity kan je niet gebruiken in bovenliggende elementen want die werkt op zowel
   foreground als background. Daarom deze direct middels td op het juiste element
   richten. Er is GEEN CSS methode om alleen opacity van het font aan te passen
   en de bestaande kleur met rust te laten. */
td.table-text-strong 
{ font-style: italic;
  font-weight: bold; }

td.table-text-weak 
{ opacity:0.50; }

td.table-text-faint 
{ opacity:0.25; }

/* Begin definition swiss tables. */

.table-table-box
{ display: inline-block;
  Xpadding-left: 4px; /* nodig om te voorkomen dat de schuifbalk te vroeg verschijnt. Stond op 4, kijk of dit nog nodig is. */
  Xpadding-right: 4px; /* nodig om te voorkomen dat de schuifbalk te vroeg verschijnt. */
  width: 100%;
  overflow-x: auto; }
 

.table-swiss
{ width: 100%;
  border-collapse: separate;
  border-radius: 4px;
  border-style: solid;
  border-color: #ddd;
  border-width: 1px;
  border-spacing: 0px;
  background: #EEF6FF;
  margin-top: 0px;
  margin-bottom: 4px; /* Tussenruimte bij gestapelde tabellen */
  padding: 6px;
  line-height: 1.4; }

/* Add this to the class to completely hide de body after
   setting tbody and thead to display: none */
.table-bodyhidden
{ border-style: none;
  padding: 0px; }

.table-swiss.table-glue
{ margin-bottom: 0px; }

.table-swiss caption
{ border-radius: 4px;
  border-style: solid;
  border-color: #ddd;
  border-width: 1px;
  font-weight: bold;
  background-color: #C9E4FF;
  margin-bottom: 4px; }

.table-swiss.table-glue caption
{ margin-bottom: 4px;}

.table-swiss tr.selected 
{ background-color: #ffe0b2 !important; }
  
.table-swiss tr.deactivated td
{ opacity: 0.25; }
  
/* Omdat we geen verticale scheidingen hebben, is wat meer ruimte nodig. */
.table-swiss td,
.table-swiss th
{ padding-left: 5px;
  padding-right: 5px; }

.table-swiss th  
{ text-align: left; }

/* Begin definition striped tables. */

.table-stripes tr.oddRow,
.table-stripes tr.oddRow
{ background-color: #DDEEFF; }

.table-stripes tr.evenRow,
.table-stripes tr.evenRow
{ background-color: #EEF6FF; }

tr.lastRow > td
{ height: 100%;
  background-color: #EEF6FF; }

/* Begin definition rotated tables. */

.table-header-rotated td.skew-cell
{ width: 30px; /* dit was 20px, waarom moet dat nu ineens 30 zijn??  Waar hangt dit vanaf? Kunnen we dit niet dynamisch maken ??*/
  text-align: center;      /* Dit kan er later af, omdat hetin de tabel generator ook gekozen kan worden. */
  border-left: 2px solid #ddd;
}


.table-header-rotated th
{ vertical-align: bottom; }

.table-header-rotated th.skew-head
{ height: 80px; /* 80 Dit kunnen we dynamisch maken, afhankelijk van het aantal karakters */
  position: relative;
  padding: 0; }

.table-header-rotated div.skew-head
{ position: relative;
  top: 0px;
  left: -40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
  height: 100%;
  transform:skew(45deg,0deg);
  overflow: hidden;
  border-left: 2px solid #ddd; }

.table-header-rotated span.skew-head
{ transform: skew(-45deg,0deg) rotate(-315deg);
  position: absolute;
  bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
  right: -30px; /*Because it looked good, but there is probably a mathematical link here as well*/
  display: inline-block;
  width: 100%; /* Heeft dit zin??*/
  width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
  text-align: right;
  white-space: nowrap; /*whether to display in one line or not*/ }

/* Begin definition rotated tables. */
.table-progression th.prog-head
{ text-align: center; }

.table-progression td.prog-data
{ width: 24px; }

.table-progression div.prog-won,div.prog-lost,div.prog-open
{ border-radius: 4px;
  height: 12px;
  width: 20px;  }

.table-progression div.prog-won
{ background-color: #FF7F00; }

.table-progression div.prog-lost
{ background-color: #BF5F00; }

.table-progression div.prog-open
{ background-color: #FFDFBF; }

/* Begin definition flex tables. */

.flex-table { }

.flex-td { }

.flex-box
{ position: relative; }

.flex-content
{ /* background-color: yellow; */
  /* Let op: deze truuc werkt NIET als er geen enkele spatie in de text staat.
     De cell blijft dan blokkeren.  Zorg dus voor spaties. Daarnaast moet het
     langste woord er ook tussenpassen, je moet dus niet al te lange worden hebben.
     Tip: onderbreek met ‌ of ‌ \u{200C} */
  position: absolute;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/* Dit is om te zorgen dat er geen regelafbreek ontstaat. Is verder onzichtbaar.*/
.flex-spacer
{ height: 0px;
  overflow: hidden;
  /* hiermee voorkomen we springende cellen in tabellen bij selectie bij lange inhoud.*/
  font-style: normal;
  font-weight: normal; }

/* Alleen nodig indien de lineheight niet voldoende ruimte biedt.*/
.flex-height
{ /* font-size: 110%;  */ }

/* End definition flex tables. */

/* === End Table Styles ===  */