:root {
  --font-family:          "Helvetica Neue", "Segoe UI Light", Helvetica, Tahoma, Arial, sans-serif;
  --font-size:            17px /* X_Css.FONT_SIZE */; 
  --font-weight:          200; 
  /* X_Css.LINE_HEIGHT: measure in browser, https://dev.to/lampewebdev/css-line-height-jjp, overridden for input in X_Field */
  --line-height:          1.3;
  
  --margin:               20px;
  --padding:              13px;
  --border:               1px solid hsl(0, 0%, 87%);
  --border-radius:        0px;
  
   
  --sat:                  70% /* X_Css.SAT */ ;
  --l-light:              94% /* X_Css.L_LIGHT */ ;
  --l-strong:             35% /* X_Css.L_STRONG */;
  
  --col-shaded:           rgb(245, 245, 245);
  --col-shaded-hover:     rgb(230, 230, 230);
  
  --col-text-gray:        hsl(0, 0%, 50%);
    
  --col-1-light:          hsl(var(--hue-1), var(--sat), calc(var(--l-light) +  0%));  
  --col-1-light-hover:    hsl(var(--hue-1), var(--sat), calc(var(--l-light) -  7%));  
  --col-1-light-active:   hsl(var(--hue-1), var(--sat), calc(var(--l-light) - 15%));  
  
  --col-1-strong:         hsl(var(--hue-1), var(--sat), calc(var(--l-strong) +  0%));  
  --col-1-strong-hover:   hsl(var(--hue-1), var(--sat), calc(var(--l-strong) + 15%));  
  --col-1-strong-active:  hsl(var(--hue-1), var(--sat), calc(var(--l-strong) -  7%));
     
  --focus-col:            hsl(var(--hue-2), var(--sat), var(--l-strong));
  --focus-outline:        2px solid var(--focus-col); 
  --focus-outline-offset: 0px; 
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
body { 
  box-sizing:     border-box;  /* https://css-tricks.com/box-sizing */	
  background:     white;
  color:          black;
  fill:           var(--col-1-strong);
  /* many icons do not look well with stroke painted */
  stroke:         none;
  font-family:    var(--font-family);
  font-size:      var(--font-size);
  font-weight:    var(--font-weight);
  font-style:     normal;
  line-height:    var(--line-height);
  text-align:     left;
  vertical-align: top;
  
  user-select:    text;
  
  /* impact on absolutely positioned dropdowns and focus outlines */
  /*   overflow:       visible; */
  
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break */
  word-break:     normal;
  /* word-wrap: alias for overflow-wrap */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
  overflow-wrap:  normal;
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
  white-space:    normal;
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
*, *:before, *:after {
  margin:         0px;
  padding:        0px;
  border:         0px;
  box-shadow:     none;
  outline:        none;
  /* don't inherit or set background for all elements. it will cover outlines, adjacent pressed items etc. */  
	/*   background:     ?; */

  box-sizing:     inherit;
  color:          inherit;
  fill:           inherit;
  stroke:         inherit;
  font-family:    inherit;
  font-weight:    inherit;
  font-size:      inherit;
  font-style:     inherit;
  line-height:    inherit;
  text-align:     inherit;
  vertical-align: inherit;
  
  user-select:    inherit;
  
  /* cannot inherit overflow, because children of scrollpanes would all be scrolling as well */
  /*   overflow:       inherit; */
  word-break:     inherit;
  overflow-wrap:  inherit;
  white-space:    inherit;  
}

/* resetting focus */
*:focus         { outline:  none }

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* blocks */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
p {
	margin-top:    var(--margin);
	margin-bottom: var(--margin);
}

/* think about collapsing vertical margins */
h1 {
	font-size:     250%;
	color:         var(--col-text-gray);
	/* keey in sync with D_Label */
	margin-top:    calc(4.0 * var(--margin));
	margin-bottom: calc(2.0 * var(--margin));
}

h2 {
	font-size:     180%;
	color:         var(--col-text-gray);
	/* keey in sync with D_Label */
	margin-top:    calc(2.6 * var(--margin));
	margin-bottom: calc(1.3 * var(--margin));
}

ul {
  padding-left:  40px;
	margin-top:    var(--margin);
	margin-bottom: var(--margin);
}

pre  {
	font-family:   "Courier New", monospace;
	margin-top:    var(--margin);
	margin-bottom: var(--margin);
  white-space:   pre;
}

img  { 
  /* avoid space below images, e.g. the logo in the top left corner */
  /* https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image */
	display: block;   
}

b, strong         { font-weight:  bold;   }
i, em             { font-style:   italic; }

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* anchors */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
a           { 
	/* avoiding whole set of problems by not having pressed transform effect  */
  color:           var(--col-1-strong);          
  fill:            var(--col-1-strong);
  text-decoration: none;      
  cursor:          pointer;  
}

a:hover     { 
  color:           var(--col-1-strong-hover);
  fill:            var(--col-1-strong-hover);
  text-decoration: underline;	
}

a:active    { 
  color:           var(--col-1-strong-active);
  fill:            var(--col-1-strong-active);
}

/* https://stackoverflow.com/questions/3397113/how-to-remove-focus-border-outline-around-text-input-boxes-chrome */
a:focus:not(:hover)     { 
  color:           var(--col-1-strong);
  fill:            var(--col-1-strong);
  outline:         var(--focus-outline);
  outline-offset:  var(--focus-outline-offset);
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* table */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
table {
  border-spacing:  0px;
	margin-top:      var(--margin);
	margin-bottom:   var(--margin);
}

td * {
  /* no margins for blocks inside tables, especially paragraphs inside tables should not have margin */
  margin:          0px;          
}


/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* W_Button */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
.w-button[type=LINK]                                 { background: transparent; } 
.w-button[type=LINK]:hover.w-button[enabled=true]    { background: transparent; }
.w-button[type=LINK]:active.w-button[enabled=true]   { background: transparent; }

.w-button[type=LIGHT]                                { background: var(--col-1-light); } 
.w-button[type=LIGHT]:hover.w-button[enabled=true]   { background: var(--col-1-light-hover); } 
.w-button[type=LIGHT]:active.w-button[enabled=true]  { background: var(--col-1-light-active); } 

.w-button[type=STRONG]                               { background: var(--col-1-strong); } 
.w-button[type=STRONG]:hover.w-button[enabled=true]  { background: var(--col-1-strong-hover); } 
.w-button[type=STRONG]:active.w-button[enabled=true] { background: var(--col-1-strong-active); } 

.w-button:focus:not(:hover) {
  outline:         var(--focus-outline);
  outline-offset:  var(--focus-outline-offset);
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* W_Field */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
.w-field:focus-within { 
  outline:         var(--focus-outline);
  outline-offset:  var(--focus-outline-offset);
}
 
/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* W_Section */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
.w-section-header                                    { 
  font-size:       160%;
}

.w-section-header {
	color:           var(--col-1-strong);        
	fill:            var(--col-1-strong);        
}

.w-section-header:hover   {
	color:           var(--col-1-strong-hover);        
	fill:            var(--col-1-strong-hover);        
}

.w-section-header:active   {
	color:           var(--col-1-strong-active);        
	fill:            var(--col-1-strong-active);        
}

/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* W_Table */
/* -------------------------------------------------------------------------------------------------------------------------------------- */
.w-table th {
	color:           var(--col-text-gray);
	padding-right:   7px;
  border-right:    1px solid hsl(0, 0%, 90%);
  border-bottom:   1px solid hsl(0, 0%, 90%);
  overflow:        hidden;
}

.w-table td {
  /* inner div should take complete space of cell */
  /* but space between rows can only be enforced like this */
  /* setting it on the inner div doesn't help because overflow:hidden will just cut it off */
  border-right:    5px solid transparent;
  overflow:        hidden;
}

.w-table td:last-child {
  border-right:    0px;
}

.w-table > thead > tr > th > div {
  padding-top:     0px;
  padding-bottom:  2px;
  padding-left:    2px;
  padding-right:   0px;
}

.w-table > tbody > tr > td > div {
  padding-top:     2px;
  padding-bottom:  2px;
  padding-left:    2px;
  /* right: cutoff */
  padding-right:   0px;
}


.w-table > tbody > tr:nth-child(even) {
  background:      var(--col-shaded);
}

.w-table > tbody > tr:hover, .w-table tr:nth-child(even) {
  background:      var(--col-shaded-hover);
}

.w-table td input[type='checkbox'] {
  vertical-align:  -1px;
}

.inner {
  table-layout:    fixed;
  width:           0px;
  white-space:     nowrap;
}

.inner td {
  overflow:        hidden;
  margin-right:    7px solid transparent;
}

.inner td {
  margin-right:    0px;
}