/*-----------------------------------------------
  ExampleStyles.css
    - Basic styles for example content
*/
/* Basic reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*-- set basis for page sizes --*/
html {
  /* height: 100vh; */
  width: 100vw;
}
/*-- define CSS shared variable values --*/
:root {
  --light: #fefefa;
  --dark: #224466;
  --menu: #eee;
  --atten: #9cfbf5;
  --hr: #224466;
  --border: #224466;
  --headerh : 4.0rem;
  --footerh : 3rem;
  --mainh : calc(100% - var(--headerh) - var(--footerh));
  --topmenuh: 2.25rem;
}
/*--- Styles for WebDev bite examples --*/
h1 { 
  font-size: 1.5rem; 
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
header h1 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
h2 { 
  font-size: 1.35rem; 
  margin-top: 1.25rem;
  margin-bottom: 1.0rem;
}
h3 { 
  font-size: 1.2rem; 
  margin-top: 1.00rem;
  margin-bottom: 0.75rem;
}
h4 {
  font-size: 1.1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
ol, ul {
  margin: 0.25rem 1.5rem;
}
ol li, ul li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
hr {
  opacity: 0.6;
}
.undef {
  opacity: 0.6;
}
body {
  width:100%;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.25;
  font-size: 16pt;
  background-color: var(--light);
  color: var(--dark);
  overflow-y: auto;
  user-select: none;
}
.right-button {
  float:right;
}
/*-- splitter defined in SplitterComponent.js --*/
splitter-container {
  display: flex;
  width:100%;
  overflow: auto;
}
splitter-container > div[slot] {
  overflow: visible;
  flex: 1;
}
/*-- used for toggling element visibility --*/
.hidden {
  display: none;
}
.indent {
  margin-left: 1rem;
  margin-right: 1rem;
}
.label {
  display:flex;
  flex-direction: row;
  padding:0.5rem 1rem;
  width: calc(100vw - 4rem);
  font-weight: bold;
}
.left {
  margin-right: auto;
}
.right {
  margin-left: auto;
}
t-b {
  display: block;
  margin: 0.75rem 0rem;
  max-width: 50rem;
}
table.semantic {
  border-collapse: collapse;
  width: 100%;
  max-width: 50rem;
  table-layout: fixed;
  font-size: 0.95rem;
}
table.semantic col:first-child {
  width: 7rem;
}
table.semantic col:nth-child(2) {
  width: 30rem;
}
table.semantic col:nth-child(3) {
  width: 18rem;
}
table.semantic th,
table.semantic td {
  border: 1px solid var(--dark);
  padding: 0.25rem 1rem;
  text-align: left;
  vertical-align: top;
}
th {
  background-color: var(--dark);
  color: var(--light);
  font-size: 1.15rem;
}
td {
  background-color: var(--light);
  color: var(--dark);
}
indent {
  display:block;
  margin-left:1rem;
  margin-right:1rem;
}