body, html, :root {
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  scroll-behavior: smooth;
  --haxcms-system-bg: var(--simple-colors-default-theme-blue-grey-7, #37474f);
  --haxcms-system-action-color: var(--simple-colors-default-theme-light-blue-7, #007ffc);
  --haxcms-system-danger-color: var(--simple-colors-default-theme-red-7, #FF7777);
  --paper-toast-color: #FFFFFF;
  --paper-toast-background-color: var(--haxcms-system-bg, #000000);
  --simple-modal-titlebar-color: #FFFFFF;
  --simple-modal-z-index: 10000000;
  --simple-modal-titlebar-background: var(--haxcms-system-bg);
  --simple-modal-header-color: #FFFFFF;
  --simple-modal-header-background: var(--haxcms-system-bg);
  --simple-modal-button-color: #FFFFFF;
  --haxcms-tooltip-color: #FFFFFF;
  --haxcms-tooltip-background-color: #000000;
  --github-corner-background: var(--haxcms-color, --haxcms-system-bg);
  --haxcms-base-styles-body-font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  /** HAX specific settings **/
  --hax-color-bg: var(--haxcms-system-bg, #37474f);
  --hax-color-border-outline: var(--haxcms-system-bg, --simple-colors-default-theme-light-blue-7);
  --hax-color-menu-heading-bg: var(--haxcms-system-bg, --simple-colors-default-theme-light-blue-7);
  --hax-color-accent-text: #FFFFFF;
  --hax-color-accent1: var(--haxcms-system-bg, --simple-colors-default-theme-light-blue-7);
  --hax-color-accent1-text: #000000;
  --hax-color-menu-heading-color: #FFFFFF;
  --hax-ink-color: var(--haxcms-system-bg, black);
  --hax-panel-padding: 8px 0 8px 80px;
  --hax-panel-item-active: #FFFFFF;
  --hax-panel-item-active-border-color: #444444;
  --hax-panel-item-border-color: #444444;
  --hax-panel-item-ink: var(--haxcms-color, white);
  --hax-panel-item-bg: #000000;
  --hax-panel-item-text: #EEEEEE;
  --hax-tray-width: 350px;
  --hax-toolbar-item-color: var(--haxcms-system-bg, black);
  --hax-export-dialog-import-button-bg: var(--haxcms-system-danger-color);

  /** Internals of the hax-body tag that can help with spacing normalization **/
  --hax-base-styles-h1-font-size: 2.5em;
  --hax-base-styles-h1-line-height: 2.5em;
  --hax-base-styles-h2-font-size: 2em;
  --hax-base-styles-h3-font-size: 1.75em;
  --hax-base-styles-h4-font-size: 1.5em;
  --hax-base-styles-h5-font-size: 1.25em;
  --hax-base-styles-h6-font-size: 1.25em;
  --hax-base-styles-p-line-height: 1.8;
  --hax-base-styles-p-min-height: 43px;
  --hax-base-styles-p-font-size: 32px;
  --hax-base-styles-p-letter-spacing: 0.5px;
  --hax-base-styles-a-color: #2196f3;
  --hax-base-styles-a-font-size: 24px;
  --hax-base-styles-a-font-weight: normal;
  --hax-base-styles-a-color-visited: #2196f3;
  --hax-base-styles-a-color-active: #2196f3;
  --hax-base-styles-a-font-weight-active: normal;
  --hax-base-styles-list-padding-bottom: 1.5em;
  --hax-base-styles-list-line-height: 40px;
  --hax-base-styles-list-font-size: 24px;
  --hax-base-styles-list-max-width: 28em;
  --hax-base-styles-list-last-child-padding-bottom: 1em;
  --hax-base-styles-list-padding-left: 20px;
  --hax-base-styles-list-margin-left: 20px;

  /** vaadin **/
  --lumo-primary-text-color: var(--haxcms-system-bg, black);

  /** simple-toast **/
  --simple-toast-z-index: 10000000;
  --simple-toast-color: black;
  --simple-toast-bg: white;
  --simple-toast-font-size: 16px;
  --simple-toast-margin: 0;
  --simple-toast-left: 0;
  --simple-toast-bottom: 0;
  --simple-toast-right: 0;
  --simple-toast-height: 80px;

  /** hax forms **/
  --primary-color: var(--simple-colors-default-theme-cyan-7, #3b97e3);
  --paper-input-container-focus-color: var(--haxcms-color, --haxcms-system-bg);
  --lumo-primary-text-color: var(--haxcms-color, --haxcms-system-bg);
  --a11y-tabs-color: var(--haxcms-color, --haxcms-system-bg);
  --a11y-tabs-focus-color: var(--haxcms-color, --haxcms-system-bg);

  /** placeholder **/
  --place-holder-drag-over-border: 4px dashed var(--haxcms-color, --haxcms-system-bg);
}
body[hax-ui-theme="haxdark"] a,
body.dark-mode a {
  --hax-base-styles-a-color: var(--simple-colors-default-theme-cyan-10, #3b97e3);
  --hax-base-styles-a-color-visited: var(--simple-colors-default-theme-cyan-9, #3b97e3);
  --hax-base-styles-a-color-active: var(--simple-colors-default-theme-cyan-11, #3b97e3);
}

super-daemon {
  --simple-modal-z-index: 100000001;
}

simple-modal::part(title) {
  background-color: transparent;
  margin: 0;
  text-align: center;
  font-size: 24px;
  color: white;
  font-family: sans-serif;
  line-height: 24px;
  padding: 4px;
}
simple-modal button.hax-modal-btn {
  font-size: 30px;
  padding: 8px;
  margin: 4px;
  color: white;
  background-color: green;
  border: 4px solid black;
  border-radius: 8px;
  font-family: sans-serif;
}
simple-modal button.hax-modal-btn.cancel {
  background-color: red;
}
simple-modal button.hax-modal-btn:hover,
simple-modal button.hax-modal-btn:focus {
  outline: 2px solid black;
  cursor: pointer;
  background-color: darkgreen;
}
simple-modal button.hax-modal-btn.cancel:hover,
simple-modal button.hax-modal-btn.cancel:focus {
  background-color: darkred;
}

@keyframes blinkTargetHeading {
  0%   { background-color: yellow; }

  100% { background-color: transparent; }
}

:target {
  animation: blinkTargetHeading 1s ease-in-out; 
}

hax-tray {
  position: absolute;
}

@media print {
  body {-webkit-print-color-adjust: exact;}
}

@media screen and (max-width: 800px) {
  body, html, :root {
    --hax-panel-padding: 8px 0 8px 50px;
    --hax-base-styles-p-font-size: 24px;
  }
  simple-modal::part(title) {
    font-size: 18px;
    line-height: 18px;
    padding: 4px;
    font-family: sans-serif;
  }
  simple-modal button.hax-modal-btn {
    font-size: 20px;
    padding: 4px;
    font-family: sans-serif;
  }
}

body {
  --app-hax-accent-color: black;
  --app-hax-background-color: white;
}
body.dark-mode {
  --app-hax-accent-color: white;
  --app-hax-background-color: black;
  --editable-table-bg-color: var(--simple-colors-default-theme-grey-8);
  --editable-table-stripe-bg-color: var(--simple-colors-default-theme-grey-9);
  --editable-table-color: var(--simple-colors-default-theme-grey-1);
  --editable-table-heading-bg-color: var(--simple-colors-default-theme-grey-7);
  --editable-table-heading-color: var(--simple-colors-default-theme-grey-1);
}

body, html {
  padding: 0;
  margin: 0;
  font-size: var(--haxcms-base-styles-body-font-size, 16px);
  font-family: var(--haxcms-base-styles-body-font-family);
  line-height: var(--haxcms-base-styles-body-line-height, 1.8);
  letter-spacing: var(--haxcms-base-styles-body-letter-spacing, .5px);
}

img {
  max-width: 100%;
}

h1 {
  font-size: var(--hax-base-styles-h1-font-size);
  line-height: var(--hax-base-styles-h1-line-height);
}

h2 {
  font-size: var(--hax-base-styles-h2-font-size);
}

h3 {
  font-size: var(--hax-base-styles-h3-font-size);
}

h4 {
  font-size: var(--hax-base-styles-h4-font-size);
}

h5 {
  font-size: var(--hax-base-styles-h5-font-size);  
}

h6 {
  font-size: var(--hax-base-styles-h6-font-size);
}

hr {
  border-top-width: 2px;
}

p {
  min-height: var(--hax-base-styles-p-min-height);
  font-size: var(--hax-base-styles-p-font-size);
  line-height: var(--hax-base-styles-p-line-height);
  letter-spacing: var(--hax-base-styles-p-letter-spacing);
}

a,
a:-webkit-any-link {
  color: var(--hax-base-styles-a-color);
  font-size: var(--hax-base-styles-a-font-size);
  font-weight: var(--hax-base-styles-a-font-weight);
}

a:visited {
  color: var(--hax-base-styles-a-color-visited);
}

a:active,
a:focus,
a:hover {
  color: var(--hax-base-styles-a-color-active);
  font-weight: var(--hax-base-styles-a-font-weight-active);
}

ol,
ul
ol li,
ul li {
  padding-bottom: var(--hax-base-styles-list-padding-bottom);
  line-height: var(--hax-base-styles-list-line-height);
  font-size: var(--hax-base-styles-list-font-size);
  max-width: var(--hax-base-styles-list-max-width);
}

ol li:last-child,
ul li:last-child {
  padding-bottom: var(--hax-base-styles-list-last-child-padding-bottom);
}

ul,
ol {
  padding-left: var(--hax-base-styles-list-padding-left);
  margin-left: var(--hax-base-styles-list-margin-left);
}
mark {
  padding: 4px 8px;
  border-radius: 6px;
}
abbr:focus, abbr:active, abbr:hover {
  text-decoration: none;
  background-color: var(--hax-base-styles-abbr-focus, #ffff33);
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 2px;
}
abbr {
  transition: all 0.6s ease 0s;
  padding: 2px 4px;
  font-style: italic;
  text-underline-position: under;
  text-decoration: underline double;
  cursor: help;
  outline-color: var(--hax-base-styles-abbr-outline, #ffff33);
}
code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 12px;
  background-color: var(--hax-base-styles-code-background-color,rgba(175, 184, 193, 0.2));
  border-radius: 6px;
  font-family: var(--hax-base-styles-code-font-family, ui-monospace,monospace);
}

pre {
  padding: 16px;
  overflow: auto;
  line-height: 1.45;
  background-color: var(--hax-base-styles-pre-background-color,rgba(175, 184, 193, 0.2));
  border-radius: 6px;
  margin-bottom: 0;
  word-break: normal;
  word-wrap: normal;
  margin-top: 0;
  font-family: var(--hax-base-styles-pre-font-family, ui-monospace,monospace);
  font-size: 12px;
}

blockquote {
  font-family: var(
    --hax-base-styles-accent-font-family,
    "Playfair Display",
    serif
  );
  font-size: var(
    --hax-base-styles-blockquote-font-size,
    calc(1.33333337 * var(--haxcms-base-styles-body-font-size, 18px))
  );
  font-style: italic;
  letter-spacing: -0.36px;
  line-height: 44.4px;
  overflow-wrap: break-word;
  margin: 55px 0 33px 0;
  color: rgba(0, 0, 0, 0.68);
  padding: 0 0 0 50px;
  border-left: 0.25em solid #d7d0de;
}

dt {
  font-weight: bold;
}

dl,
dd {
  font-size: .9rem;
}

dd {
  margin-bottom: 1em;
}

haxcms-site-builder[disable-features*="breadcrumb"] .haxcms-theme-element::part(page-breadcrumb),
haxcms-site-builder[disable-features*="print"] .haxcms-theme-element::part(print-branch-btn),
haxcms-site-builder[disable-features*="rss"] .haxcms-theme-element::part(rss-btn),
haxcms-site-builder[disable-features*="git-link"] .haxcms-theme-element::part(git-corner-btn),
haxcms-site-builder[disable-features*="search"] .haxcms-theme-element::part(search-btn),
haxcms-site-builder[disable-features*="footer"] .haxcms-theme-element::part(footer),
haxcms-site-builder[disable-features*="qr-code"] .haxcms-theme-element::part(qr-code-btn),
haxcms-site-builder[disable-features*="right-col"] .haxcms-theme-element::part(right-col),
haxcms-site-builder[disable-features*="left-col"] .haxcms-theme-element::part(left-col)
{
  display: none !important;
}


/**
 *  @deprecated ELMS:LN textbook styles
 * https://github.com/elmsln/issues/issues/1658
 */
/* Required list template */
.textbook_box {
  display: block;
  margin: 1em 0px 2em 0px;
  padding: .5em;
  border-radius: 4px 4px 0px 0px;
}
.textbook_box h3 {
  font-size: 24px;
  font-weight: bold;
  display: block;
  float: right;
  margin-top: -25px !important;
  margin-bottom: 0px;
  margin-left: 5px;
  margin-right:0px;
  background-color: var(--simple-colors-default-theme-grey-2);
  border:2px solid;
  padding:4px 6px;
  letter-spacing:.06em;
  border-radius: 4px;
}
.textbook_box_required {
  border: var(--simple-colors-default-theme-pink-8) 2px solid;
}
.textbook_box_required h3{
  color: var(--simple-colors-default-theme-pink-8);
}
.textbook_box_required li:before{
  color: var(--simple-colors-default-theme-grey-1);
  background:  var(--simple-colors-default-theme-pink-8);
}
.textbook_box_required li:hover:before{
 font-weight:bold;
 color: var(--simple-colors-default-theme-pink-8);
 border: .3em solid  var(--simple-colors-default-theme-pink-8);
 background: var(--simple-colors-default-theme-grey-1);
}
/* Optional list color shift */
.textbook_box_optional {
  border:var(--simple-colors-default-theme-cyan-8) 2px solid;
}
.textbook_box_optional h3{
  color: var(--simple-colors-default-theme-cyan-8);
}
.textbook_box_optional li:before{
  color: var(--simple-colors-default-theme-grey-1);
  background: var(--simple-colors-default-theme-cyan-8);
}
.textbook_box_optional li:hover:before{
 font-weight:bold;
 color: var(--simple-colors-default-theme-cyan-8);
 border: .3em solid var(--simple-colors-default-theme-cyan-8);
 background: var(--simple-colors-default-theme-grey-1);
}

.textbook_box ol, div.textbook_box ul{
  counter-reset: li; /* Initiate a counter */
  list-style: none; /* Remove default numbering */
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0px 0px 0px 14px;
  margin: 30px 20px 20px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.textbook_box li{
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  margin: .7em 0 !important;
  background: var(--simple-colors-default-theme-grey-1);
  color: var(--simple-colors-default-theme-grey-9);
  text-decoration: none;
  border-radius: .3em;
  transition: all .3s ease-out;
  font-size: 14px;
  line-height: 24px;
}

.textbook_box li:hover{
  background: var(--simple-colors-default-theme-grey-2);
}

.textbook_box li:before{
  content: counter(li);
  counter-increment: li;
  position: absolute;  
  left: -1.3em;
  top: 50%;
  margin-top: -1.3em;
  height: 2em;
  width: 2em;
  line-height: 2em;
  border: .3em solid var(--simple-colors-default-theme-grey-1);
  text-align: center;
  font-weight: bold;
  border-radius: 2em;
  transition: all .3s ease-out;
}