/**
 * _custom.scss for marlinfw.org
 */
:root {
  --bg-midsection: radial-gradient(circle, rgba(0,0,0, 1) 0%, rgba(0,0,0, 0) 60%, rgba(0,0,0, 0) 100%);
  --color-background: #FFF;
  --color-color: #000;
  --color-nesting: #00000014;
  --color-article-border: #888;
  --color-bitmap: #118;
  --color-bitmap-label-hover: #090;
  --color-bitmap-preview-lg: gray;
  --color-bitmap-preview-sm: #FFF;
  --color-bitmap-input: #ABF;
  --color-bitmap-output: #300;
  --color-bitmap-output-bg: #F8FFFF;
  --color-bitmap-output-border: #077;
  --color-bitmap-selector-bg: #EEE;
  --color-bitmap-selector-options-bg: #FFF;
  --color-bitmap-selector-label: #FDD;
  --color-bitmap-err-box: red;
  --color-code: #0088CC;
  --color-code-bg: #DEF;
  --color-data-search: #FFF;
  --color-data-search-bg: #BBB;
  --color-features: #000;
  --color-features-body: #000;
  --color-features-bg: rgba(255,255,255,0.8);
  --color-features-hover-bg: rgba(255,255,255,0.8);
  --color-features-hover: #FFF;
  --color-features-body-hover: grey;
  --color-features-image-bg: rgba(3,3,3,0.8);
  --color-gcode-h5-bg: #CCC;
  --color-gcode-h5-code: #FFF;
  --color-gcode-h5-code-bg: #444;
  --color-gcode-usage: #246;
  --color-gcode-usage-bg: #ADF;
  --color-gcode-usage-hover: #BEF;
  --color-gcode-usage-opt: #624;
  --color-gcode-usage-opt-bg: #FAD;
  --color-gcode-usage-opt-hover: #FBE;
  --color-gcode-examples-bg: #E9F5FF;
  --color-gcode-gallery: #601;
  --color-gcode-related: #000;
  --color-gcode-related-bg: #DDD;
  --color-h1-gcode: #B88;
  --color-h1-basic: #8B8;
  --color-h1-feat: #8BB;
  --color-h1-hardware: #88B;
  --color-h1-devel: #BB8;
  --color-h1-setting: #B8B;
  --color-header: #000;
  --color-header-bg: #8CF;
  --color-article-header: #000;
  --color-hr: #333;
  --color-highlighter-rouge: #C99;
  --color-highlighter-rouge-bg: #300;
  --color-iframe-border: #444;
  --color-iframe-search: #002;
  --color-iframe-search-a: #000;
  --color-iframe-search-bg: #FFF;
  --color-iframe-search-search: #FCA;
  --color-iframe-search-search-bg: #000;
  --color-iframe-search-search-border: #000;
  --color-iframe-search-submit-bg: #C4E6DB;
  --color-iframe-search-submit-border: #000;
  --color-iframe-overlay-bg: linear-gradient(0deg, #DDF1EA, #DDF1EA, #FFFFFF);
  --color-iframe-overlay-a: #00F;
  --color-item-bg: #F0F0FF;
  --color-item-code-bg: #E0E0F0;
  --color-item-post: #EAEAFC;
  --color-jumbo: #000;
  --color-jumbo-bg: #EEE;
  --color-jumbo-h1: #000;
  --color-jumbo-table-bg: #FFF;
  --color-jumbo-th-bg: #DDD;
  --color-jumbo-th-td: #000;
  --color-jumbo-th-th: #EEE;
  --color-jumbo-td-td: #FFF;
  --color-jumbo-strong: red;
  --color-jumbo-h2-bg: transparent;
  --color-lcd-th-bg: #DDD;
  --color-lcd-td-bg: #0639FF;
  --color-lcd-td-border: #000;
  --color-lcd-td: #72D5FB;
  --color-lcd-td-a: #C2F5FF;
  --color-lcd-td-code: #E2D5FB;
  --color-lcd-td-code-bg: #3669FF;
  --color-lcd-td-strong: #72D5FB;
  --color-lcd-code: #C7254E;
  --color-lcd-code-bg: #F9F2F4;
  --color-list-group-item-border: #CCC;
  --color-list-group-item-bg: #EEE;
  --color-list-group-item-hover: #DDD;
  --color-list-group-item-a: #000;
  --color-list-group-item-a-hover: #222;
  --color-link: #8492FD;
  --color-link-hover: #8492FD;
  --color-link-hover-bg: #0002;
  --color-logo-fill: #000;
  --color-logo-fill-hover: #606;
  --color-nav: #AA0;
  --color-nav-bg: #F8F8F8;
  --color-nav-list: #09B;
  --color-navbar-default: #777;
  --color-navbar-default-bg: #3A633F;
  --color-navbar-bg: #FFF;
  --color-navbar-border: #222;
  --color-navbar-li: #FFF;
  --color-navbar-li-bg: #0088CC;
  // Top nav
  --color-nav: #FFF;
  --color-nav-border: #222;
  --color-nav-hover: #000;
  --color-nav-hover-bg: #AAA;
  --color-nav-active: #FFF;
  --color-nav-active-bg: #0088CC;
  --color-dropdown: #262626;
  --color-dropdown-a: #000;
  --color-dropdown-a-hover: #0088CC;
  --color-dropdown-a-hover-bg: #F5F5F5;
  --color-dropdown-bg: #FFF;
  --color-gcode-toc-border: #EEE;
  --color-search-bg: #FFF;
  --color-search: #000;
  // Side nav
  --color-toc-hover: #66C;
  --color-toc-hover-bg: #DDD;
  --color-panel: #FFF;
  --color-panel-bg: rgba(255,255,255,0.5);
  --color-panel-outer-bg: rgba(0,0,0,0.4);
  --color-panel-header: #FFF;
  --color-panel-body-bg: rgb(59, 59, 59);
  --color-panel-header-border: rgba(255,255,255,0.1);
  --color-panel-wrapper-link: #000;
  --color-panel-info: #9F9;
  --color-panel-info-bg: #044;
  --color-panel-info-border: #033;
  --color-panel-info-header-bg: #011;
  --color-panel-info-h4: #0AA;
  --color-panel-info-h4-bg: linear-gradient(90deg, #000, #066, #0AA);
  --color-panel-warning: #FF0;
  --color-panel-warning-border: #440;
  --color-panel-warning-h4: #000;
  --color-panel-warning-h4-bg: linear-gradient(90deg, #A80, #540, #000);
  --color-post-bg: #EEE;
  --color-pre: #000;
  --color-pre-bg: #EEE;
  --color-highlight-bg: #EEE;
  --color-primary: #CCC;
  --color-primary-bg: #333;
  --color-primary-border: #EEE;
  --color-info: #31708F;
  --color-info-bg: #D9EDF7;
  --color-info-border: #BCE8F1;
  --color-warning: #F92;
  --color-warning-border: #F92;
  --color-warning-bg: #FF0;
  --color-warning-code: #FFF;
  --color-warning-code-bg: #CC08;
  --color-danger: #F92;
  --color-danger-bg: #600;
  --color-danger-border: #E11;
  --color-danger-code: #F00;
  --color-danger-code-bg: #C228;
  --color-required: #FF0;
  --color-tagline: #111;
  --color-tagline-bg: #FFF;
  --color-tagline-header: #00F;
  --color-tagline-id: cadetblue;
  --color-tagline-btn: #FFF;
  --color-table-header: #FFF;
  --color-table-header-bg: #000;
  --color-table-striped-bg: #CCC;
}

/* Variable declaration for dark mode */
[data-theme="dark"] {
  --bg-midsection: radial-gradient(circle, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 60%, rgba(255,255,255, 0) 100%);
  --color-background: #000;
  --color-color: #B5B5B5;
  --color-nesting: #FFFFFF14;
  --color-article-border: #888;
  --color-bitmap: #CCF;
  --color-bitmap-label-hover: #9D9;
  --color-bitmap-preview-lg: gray;
  --color-bitmap-preview-sm: #FFF;
  --color-bitmap-input: #BBF;
  --color-bitmap-output: #2D2;
  --color-bitmap-output-bg: #444;
  --color-bitmap-output: #666;
  --color-bitmap-selector-bg: #226;
  --color-bitmap-selector-options-bg: #8888;
  --color-bitmap-selector-label: #FDD;
  --color-bitmap-err-box: red;
  --color-code: #AAF;
  --color-code-bg: #114;
  --color-data-search: #FFF;
  --color-data-search-bg: #BBB;
  --color-features: #FFF;
  --color-features-body: #000;
  --color-features-bg: rgba(3,3,3,0.5);
  --color-features-hover-bg: rgba(255,255,255,0.8);
  --color-features-hover: grey;
  --color-features-body-hover: grey;
  --color-features-image-bg: rgba(3,3,3,0.8);
  --color-gcode-h5: #FFF;
  --color-gcode-h5-bg: #444;
  --color-gcode-h5-code: #000;
  --color-gcode-h5-code-bg: #CCC;
  --color-gcode-usage: #ADF;
  --color-gcode-usage-bg: #246;
  --color-gcode-usage-hover: #358;
  --color-gcode-usage-opt: #FAD;
  --color-gcode-usage-opt-bg: #624;
  --color-gcode-usage-opt-hover: #835;
  --color-gcode-examples-bg: #1D262D;
  --color-gcode-gallery: #904;
  --color-gcode-related: #FFF;
  --color-gcode-related-bg: #222;
  --color-h1-gcode: #B88;
  --color-h1-basic: #8B8;
  --color-h1-feat: #8BB;
  --color-h1-hardware: #88B;
  --color-h1-devel: #BB8;
  --color-h1-setting: #B8B;
  --color-hr: #FFF;
  --color-header-bg: #004466;
  --color-header: #FF0;
  --color-article-header: #FF0;
  // Top nav
  --color-nav: #CCC;
  --color-nav-border: #333;
  --color-nav-bg: #222;
  --color-nav-hover: #FFF;
  --color-nav-hover-bg: #333;
  --color-nav-focus: #444;
  --color-nav-focus-bg: #AAA;
  --color-nav-active: #FF0;
  --color-nav-active-bg: #004466;
  --color-dropdown: #333;
  --color-dropdown-a: #CCC;
  --color-dropdown-a-hover: #FFF;
  --color-dropdown-a-hover-bg: #222;
  --color-dropdown-bg: #555;
  --color-gcode-toc-border: #EEE;
  --color-link: #F88;
  --color-link-hover: #F88;
  --color-link-hover-bg: #FFF2;
  --color-logo-fill: #FFF;
  --color-logo-fill-hover: #FCF;
  --color-search-bg: #333;
  --color-search: #EEE;
  // Side nav
  --color-toc-hover: #FCC;
  --color-toc-hover-bg: #222;
  --color-panel: #FFF;
  --color-panel-bg: rgba(255,255,255,0.5);
  --color-panel-outer-bg: rgba(255,255,255,0.6);
  --color-panel-header: #FFF;
  --color-panel-body-bg: rgb(59, 59, 59);
  --color-panel-header-border: rgba(255,255,255,0.1);
  --color-panel-wrapper-link: #000;
  --color-panel-info: #9F9;
  --color-panel-info-bg: #044;
  --color-panel-info-border: #033;
  --color-panel-info-header-bg: #011;
  --color-panel-info-h4: #000;
  --color-panel-info-h4-bg: linear-gradient(90deg, #0AA, #066, #000);
  --color-panel-body-bg: #022;
  --color-panel-warning: #FF0;
  --color-panel-warning-border: #440;
  --color-panel-warning-h4: #FF0;
  --color-panel-warning-h4-bg: linear-gradient(90deg, #000, #540, #A80);
  --color-post-bg: #556;
  --color-pre: #CCC;
  --color-pre-bg: #000;
  --color-highlight-bg: #111;
  --color-highlighter-rouge: #C99;
  --color-highlighter-rouge-bg: #222;
  --color-primary: #333;
  --color-primary-bg: #CCC;
  --color-primary-border: #EEE;
  --color-info: #ADD029;
  --color-info-bg: #022535;
  --color-info-border: #66A98A;
  --color-warning: #FF0;
  --color-warning-border: #FF0;
  --color-warning-bg: #C58A03;
  --color-warning-code: #FFF;
  --color-warning-code-bg: #CC08;
  --color-danger: #F80;
  --color-danger-bg: #600;
  --color-danger-border: #E11;
  --color-danger-code: #F00;
  --color-danger-code-bg: #C228;
  --color-required: #FF0;
  --color-iframe-border: #444;
  --color-iframe-search: #FFF;
  --color-iframe-search-bg: #111;
  --color-iframe-search-a: #C80;
  --color-iframe-search-search: #FCA;
  --color-iframe-search-search-bg: #000;
  --color-iframe-search-search-border: #FC0;
  --color-iframe-search-submit-bg: #425FB3;
  --color-iframe-search-submit-border: #FFF8;
  --color-iframe-overlay-bg: linear-gradient(0deg, #000, #142, #000);
  --color-iframe-overlay-a: #FF0;
  --color-item-bg: #111;
  --color-item-code-bg: #E0E0F0;
  --color-item-post: #EAEAFC;
  --color-jumbo: #FFF;
  --color-jumbo-bg: #202;
  --color-jumbo-h1: #F80;
  --color-jumbo-table-bg: #614;
  --color-jumbo-th-bg: #F404;
  --color-jumbo-th-td: #000;
  --color-jumbo-th-th: #202;
  --color-jumbo-td-td: #201;
  --color-jumbo-strong: #FE4;
  --color-jumbo-h2-bg: transparent;
  --color-lcd-th-bg: #DDD;
  --color-lcd-td-bg: #0639FF;
  --color-lcd-td-border: #000;
  --color-lcd-td: #72D5FB;
  --color-lcd-td-a: #C2F5FF;
  --color-lcd-td-code: #E2D5FB;
  --color-lcd-td-code-bg: #3669FF;
  --color-lcd-td-strong: #72D5FB;
  --color-lcd-code: #C7254E;
  --color-lcd-code-bg: #F9F2F4;
  --color-list-group-item-border: #999;
  --color-list-group-item-bg: #222;
  --color-list-group-item-bg-hover: #333;
  --color-list-group-item-a: #EEE;
  --color-list-group-item-a-hover: #FFF;
  --color-tagline: #EEE;
  --color-tagline-bg: #000;
  --color-tagline-header: #DDF;
  --color-tagline-id: cadetblue;
  --color-tagline-btn: #FFF;
  --color-table-header: #000;
  --color-table-header-bg: #CCC;
  --color-table-striped-bg: #333;
}
body { background: var(--color-background); color: var(--color-color); }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  code { background-color: inherit; }
}
h3, h4, h5, h6 { background: var(--color-header-bg); color: var(--color-header); }
h1+h2 { color: #BBC; }
a, a:hover { color: var(--color-link); }

code { color: var(--color-code); background-color: var(--color-code-bg); }
pre { background-color: var(--color-pre-bg); }
pre, pre>code { color: var(--color-pre); }
pre.highlight{ background-color: var(--color-highlight-bg); }

// Marlin logo SVG
#mflogo {
  > g > path { fill: var(--color-logo-fill); }
  &:hover > g > path { fill: var(--color-logo-fill-hover); }
}

// Top nav bar
.navbar { background-color: var(--color-nav-bg); border-color: var(--color-nav-border); }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus{background-color: inherit; }
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{ background-color: var(--color-nav-hover-bg); color: var(--color-nav-hover); }
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{ background-color: var(--color-nav-hover-bg); color: var(--color-hover-focus); }
.nav.navbar-nav li.here>a { color: var(--color-nav-active); background: var(--color-nav-active-bg);}
.nav.navbar-nav li.here.open>a { color: var(--color-nav); }
.nav.navbar-nav li:hover { background-color: var(--color-nav-hover-bg); color: var(--color-nav-hover);}

// Nav bar drop down menu
.dropdown-menu { background-color: var(--color-dropdown-bg); color: var(--color-dropdown); }
.dropdown-menu li a { color: var(--color-dropdown-a); }
.dropdown-menu li a:hover, .dropdown-menu>li>a:active { color: var(--color-dropdown-a-hover); background-color: var(--color-dropdown-a-hover-bg); }

// Mav bar search box
li#searchbox input[type="search"]{ background-color: var(--color-search-bg); color: var(--color-search); }

// Mid section
.mid-section { background-image: var(--bg-midsection); }
.custom-tagline { color: var(--color-tagline); background-color: var(--color-tagline-bg);
  h1 { color: var(--color-tagline-header); }}
#tagline { color: var(--color-tagline-id); }
.custom-tagline-btn a { color: var(--color-tagline-btn); }
hr.custom-hr{ color: var(--color-hr);
  $color: #333;
  color: var(--color-hr);
  border-image: linear-gradient(
    90deg,
    rgba($color, 0),
    rgba($color, 1) 50%,
    rgba($color, 0) 100%) 0 0 100%; }
.features-tile-wrapper:hover, .features-tile-wrapper a:hover {
  .features-tile-body {
    color: var(--color-features-body-hover);
  }
  .features-tile-title {
    background-color: var(--color-features-hover-bg);
    color: var(--color-features-hover);
  }
}
.features-tile-title{
  color: var(--color-features);
  background-color: var(--color-features-bg);
}
.features-tile-body, .features-tile-body a {
  color: var(--color-features);
}
.features-tile-image:hover > div { background-color: var(--color-features-image-bg); }
.custom-article, .calipat {
  h1, h2, h3, h4, h5, h6 {
    color: var(--color-article-header);
  }
  table { border-top-color: var(--color-article-border); }
  th, td { border-color: var(--color-article-border); }
}
.panel { background-color: var(--color-panel-bg); }
.panel-body { background-color: var(--color-panel-body-bg); color: var(--color-panel); }
.panel-heading, a.panel-heading {
  border-color: var(--color-panel-border);
  h1, h2, h3, h4 { color: var(--color-panel-header); }
}
a.panel-wrapper:hover, a.panel-wrapper:active {
  .panel-heading, a.panel-heading {
    h1, h2, h3, h4 { color: var(--color-panel-wrapper-link);}
  }
}
.post { background-color: var(--color-post-bg); }
[data-search-results]>h1 { color: var(--color-data-search); background: var(--color-data-search-bg); }
h1.gcode { background: var(--color-h1-gcode); }
h1.basics { background: var(--color-h1-basics); }
h1.feat { background: var(--color-h1-feat); }
h1.hardware { background: var(--color-h1-hardware); }
h1.devel { background: var(--color-h1-devel); }
h1.setting { background: var(--color-h1-setting); }

div.panel.panel-info {
  background-color: var(--color-panel-info); border-color: var(--color-panel-info-border); color: var(--color-panel-info-bg);
  .panel-heading {
    background-color: var(--color-panel-info-header-bg);
    border-color: var(--color-panel-info-border);
    h4 { color: var(--color-panel-info-h4); background: var(--color-panel-info-h4-bg); }
  }
}
div.panel.panel-warning {
  background-color: var(--color-panel-warning-bg); border-color: var(--color-panel-warning-border); color: var(--color-panel-warning);
  .panel-heading {
    padding: 0;
    background-color: #110;
    border-color: var(--color-panel-warning-border);
    h4 { color: var(--color-panel-warning-h2); background: var(--color-panel-warning-h4-bg); }
  }
}
div.row.alert { margin: 0.5em 0; }
div.alert-primary {
  background-color: var(--color-primary-bg); border-color: var(--color-primary-border); color: var(--color-primary);
}
div.alert-info {
  background-color: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info);
}
div.alert-warning {
  background-color: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning);
  code { background-color: var(--color-warning-code-bg); color: var(--color-warning-code); }
  a { color: var(--color-warning-code); }
}
div.alert-danger {
  background-color: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger);
  code { background-color: var(--color-danger-code-bg); color: var(--color-danger-bg); }
}
.item.odd {
  background: var(--color-item-bg);
  code, pre, .table>thead>tr>th { background-color: var(--color-item-code-bg); }
  .post { background-color: var(--color-item-post); }
  }
#lcd_menu-page .col-lg-9 {
  th { background-color: var(--color-lcd-th-bg); }
  td {
    background-color: var(--color-lcd-td-bg);
    border-color: var(--color-lcd-td-border);
    color: var(--color-lcd-td);
    a { color: var(--color-lcd-a); }
    code { background-color: var(--color-lcd-td-code-bg); color: var(--color-lcd-td-code); }
    strong { color: var(--color-lcd-strong); }
    }
    td+td code { background-color: var(--color-lcd-code-bg); color: var(--color-lcd-code); }
  }

#bitmap-converter {
  label:hover { color: var(--color-bitmap-label-hover); }
  #preview-lg { border-color: var(--color-bitmap-preview-lg); }
  #preview-sm { border-color: var(--color-bitmap-preview-sm); }
  input#pasted { color: var(--color-bitmap-input); }
  textarea#output {
    border-color: var(--color-bitmap-output-border);
    background: var(--color-bitmap-output-bg);
    color: var(--color-bitmap-output);
  }
  div.file-selector {
    background: var(--color-bitmap-selector-bg);
    .options { background-color: var(--color-bitmap-selector-options-bg); }
    label.tbd, label.tbd:hover { color: var(--color-bitmap-selector-label) !important; }
  }
  div#err-box { color: var(--color-bitmap-err-box); }
}

div.container.detail, div.container.config {
  div.row {
    h4, h5, h6 { background: var(--color-code-bg); color: var(--color-code); }
    h5 {
      background: var(--color-gcode-h5-bg); color: var(--color-gcode-h5);
      code { background: var(--color-gcode-h5-code-bg); color: var(--color-gcode-h5-code); }
    }
  }
  div.row.examples pre { background: var(--color-gcode-examples-bg); }
  div.row.gallery p { color: var(--color-gcode-gallery); }
}

.jumbotron {
  background-color: var(--color-jumbo-bg);
  color: var(--color-jumbo);
  h1, h1 strong { color: var(--color-jumbo-h1); }
  table { background: var(--color-jumbo-table-bg); }
  th, td { border-bottom-color: var(--color-jumbo-th-td); }
  th { background: var(--color-jumbo-th-bg); }
  th+th { border-left-color: var(--color-jumbo-th-th); }
  td+td { border-left-color: var(--color-jumbo-td-td); }
  strong em { color: var(--color-jumbo-strong); }
  h2 { background: var(--color-jumbo-h2-bg); }
  }
iframe.youtube { border-color: var(--color-iframe-border); }
#search.container {
  color: var(--color-iframe-search);
  background: var(--color-iframe-search-bg);
  a { color: var(--color-iframe-search-a); }
  input[type="search"] { border-color: var(--color-iframe-search-border); background: var(--color-iframe-search-bg); color: var(--color-iframe-search); }
  input[type="submit"] { background: var(--color-iframe-search-submit-bg); border-color: var(--color-iframe-search-submit-border); }
  .overlay { background: var(--color-iframe-overlay-bg); }
  [data-search-results]>.item:hover a { color: var(--color-iframe-overlay-a); }
}

.table-striped>tbody>tr:nth-of-type(odd) { background: var(--color-table-striped-bg); }
a.list-group-item {
  color: var(--color-list-group-item-a);
  background-color: var(--color-list-group-item-bg);
  border-color: var(--color-list-group-item-border);
  &:hover {
    color: var(--color-list-group-item-a-hover);
    background-color: var(--color-list-group-item-bg-hover);
  }
  h4 { background: none; margin: 0; padding: 0.25 0; }
  .list-group-item-heading { color: var(--color-header); }
}

h1+h2 { margin-top: -0.4em; color: #BBC; }

.row { margin: 0; padding: 0; }
.back-to-top { padding-right: 2em; }

#daynite { visibility: hidden; margin: 6px 0 0 4px; padding-left: 4px; }

#discord-frame { float: right; margin-left: 1em; }
.home-discord { width: 350px; margin: 0 auto; text-align: center; }

#carouselmarlin { background-color: #F8F8F9; .item { height: 320px; img { padding: -50px 0; } } }
.carousel-inner { max-width: 1500px; margin: 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-heading;
  margin-top: 0.2em;
}
h1+h2 { margin-top: -0.4em; }

div.highlight { margin-bottom: 25px; }

.extra-panels {
   h1, h2, h3, h4, h5, h6 {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
.container {
  h2, h3, h4, h5, h6 {
    padding: 0.25em;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.05em;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
  }
  h3, h4, h5, h6 {
    margin-top: 1em;
    margin-left: 0.25em;
  }
}
.container td {
  h2, h3, h4, h5, h6 {
    background: none !important;
    padding: 4px;
    margin-top: 0.25em;
  }
}
.ctr { text-align: center; }
.custom-border-warning { border-left-color: #F0AD4E;  }
.custom-no-margin { margin: 0 !important; }
.custom-no-padding { padding: 0 !important; }
.custom-pl10  { padding-left: 10px; }
.custom-pt5   { padding-top: 5px; }
.custom-pt25  { padding-top: 25px; }
.custom-ptb40 { padding: 40px 0px 40px 0px !important; }
.custom-alert { display: table; }
.custom-alert-icon {
  display: table-cell;
  vertical-align: middle;
  float: none;
  .fa-1x { padding: 0.5em 0 0.5em; }
  .fa-2x { padding: 0.25em 0 0.25em; }
  .fa-4x { padding: 0.125em 0 0.125em; }
}
.custom-alert-text {
  display: table-cell;
  vertical-align: middle;
  float: none;
  padding: 1em;
  > p { margin: 0; }
}
.param-desc-list p { display: inline; }
td.arg code { white-space: nowrap; }
#search-block-form .button { margin-right: 0.25em; }

/*
 * Edit this page Button
 */
.btn-edit { background: #C58A03; }

/*
 * Follow Button
 */
.navbar-nav>li>a.btn-follow {
  color: rgb(0, 132, 180);
  &:hover, &:active {
    color: white;
    background: rgb(0, 172, 237);
  }
}

/*
 * Contribute Button
 */
.btn-contribute { background: #B8B; }

/*
 * Download Button
 */
 .btn-download { background: #5BC0DE; }

/*
 * Learn More Button
 */
 .btn-learn, .panel-learn { background: rgb(120, 168, 120); }

/*
 * Nav bar expand/collapse btn
 */
.navbar-toggle { margin-right: 0; }

/*
 * Panels
 */
.highlight-panels {
  .panel-heading { height: auto; }
  .panel-body {
    min-height: inherit;
    max-height: inherit;
  }
}
.panel-heading, a.panel-heading {
 h1, h2, h3, h4 {
   margin: 0;
   padding: 0;
   background-color: transparent !important;
   color: #000;
  }
}

a.panel-wrapper:hover, a.panel-wrapper:active {
  text-decoration: none;
  color: gray;
  .panel-body, .panel-heading { color: gray; }
  .panel-heading, a.panel-heading { h1, h2, h3, h4 { color: white; } }
}
.panel {
  background-color: var(--color-panel-outer-bg);
  border-radius: 0.75em 0.25em 0.75em 0.75em;
}
.panel-body{
  color: #000;
  background-color: white;
  border-radius: 0 0 0.75em 0.75em;
  font-size: 1.2em;
}
.panel-heading {
  border-radius: 0.75em 0.25em 0 0;
  border-width: 0 0 1px 0;
  border-color: white;
}
.panel-github { background: rgb(65, 131, 196); }
.panel-discord { background: rgb(115, 138, 219); }
.panel-svg { padding: 1em; }

/*
 * Tagline
 */
.custom-tagline {
  text-align: left;
  padding-top: 1em;
  padding-right: 2em;
  padding-left: 2em;
}

#tagline { padding: 0; margin-top: 0; }

/*
 * Tiles
 */
.mid-section {
  padding-top: 3em;
  width: auto;
  background-size: 100% 500%;
  background-position: 0% 96%;
  background-repeat: no-repeat;
}
.features-tile-wrapper {
  padding-right: 1em;
  padding-left: 1em;
  margin: 5em 0 5em 0;
}
hr.custom-hr{
  border-width: 0 0 1px;
  border-style: solid;
  width: 90%;
  clear: both;
}
.features-tile-wrapper:hover, .features-tile-wrapper a:hover {
  text-decoration: none;
}
.features-tile-image {
  margin: 0 0 2em 0;
  padding: 0;
  height: 300px;
  justify-content: center;
}
.row .features-tile-title { margin: 0; padding: 0; }
.features-tile-title {
  font-family: $font-family-heading;
  font-size: 1.7em;
  padding-left: 1em !important;
}
.features-tile-body {
  margin-bottom: 2em;
  font-size: 1.2em;
}

/*
 * Scrolling code blocks
 */
div.language-cpp { overflow: hidden; }
pre {
  width: auto;
  margin: 0 1px 1em 1em;
  code { white-space: pre; }
}

img.floater {
  float: right;
  margin: 0 0 1em 1em;
}
img.floater.framed { border: 4px solid #000; }
div.custom-article, div.col-md-12>.row.long, div.col-md-12>.row.notes {
  padding-top: 0;
  margin-top: 0;
  table {
    margin-bottom: 1.1em;
    border-top: 1px solid #888;
  }

  th, td {
    padding: 2px 0.5em;
    border: 1px solid #888;
  }

  .table>thead>tr>th {
    color: var(--color-table-header);
    background-color: var(--color-table-header-bg);
    border-bottom: 1px solid #888;
  }
  .row, .item { margin-bottom: 0.5em; }
  >p, >table { margin-left: 1em; }
}

.col-md-12>.row.long, .col-md-12>.row.notes {
  table { margin-left: 2em; }
  th { background: #DDD; }
}
.post {
  margin: -1em 0 1em;
  padding: 0.5em 0.5em 0.25em;
}
.detail-header h1 { margin-bottom: 4px; }
#authors {
  height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
  img.avatar { float: right; margin: 8px 0 0 2px; background: white; }
}

div.custom-article {
  p, ul>li {
    font-size: 110%; clear: both;
    ul>li p { font-size: 100%; }
    img {
      display: block;
      &.inline { display: inline; }
    }
  }
  >table { margin: 0 auto 1em; }
}

div.container.detail {
  div.row {
    margin-left: 16px;
    h3, h4 { margin-left: -0.5em; }
    h4, h5, h6 { margin-left: -0.5em; padding-left: 0.5em; }
    font-size: 110%;
  }
  div.row.examples .post {
    margin: -0.25em 0 1em;
    p { font-size: 85%; }
  }

  div.row {
    &.related {
      margin: 0.5em 0 0;
      padding: 5px 0 6px 1em;
      border-radius: 6px;
      color: var(--color-gcode-related);
      background: var(--color-gcode-related-bg);
      code { background: #FFFA; color: #000; }
    }
    &.meta { margin-left: 0; }
    &.examples pre { background: var(--color-gcode-examples-bg); }
    &.gallery p { font-size: normal; }
    &.usage {
      >div {
        >code {
          background: transparent;
          >span {
            padding: 0 1px;
            white-space: nowrap;
            color: var(--color-gcode-usage);
            background: var(--color-gcode-usage-bg); &:hover { background: var(--color-gcode-usage-hover); }
            &.optional { color: var(--color-gcode-usage-opt); background: var(--color-gcode-usage-opt-bg); &:hover { background: var(--color-gcode-usage-opt-hover); } }
          }
        }
        +div {
          margin-top: 1px;
          border-top: 1px #000 dotted;
        }
      }
      >code {
        background: transparent;
        >span { white-space: nowrap; }
      }
    }

    &.gallery p { font-size: normal;}
  }

  img { max-width: 100%; }

  div.row.meta { margin-left: 0; }
  img { max-width: 100%; }
}

.clear { clear: both; }
.params .table>tbody>tr:first-child>td { border-top: 0; }
.gcode.item, [data-search-results]>.item {
  padding-bottom: 1em;
  border-top: 2px solid #888;
  p { margin-top: 1em; font-size: 120%; padding-left: 1em; }
  >span { float: right; margin: 1em 0.5em 0 0; }
  h2 { margin-top: 0; }
}
[data-search-results]>.item h2 {
  margin-bottom: 0;
  padding: 0;
  a { display: block; padding: 4px; }
}
[data-search-results]>h1 {
  text-transform: capitalize;
  color: white;
  display: block;
  width: 12em;
  margin: 0.125em 0 0.25em;
  background: #BBB;
  padding: 0.25em 0 0.25em 0.25em;
  border-top-right-radius: 0.75em;
  border-bottom-right-radius: 0.75em;
  border-top-left-radius: 0.125em;
  border-bottom-left-radius: 0.125em;
}
#lcd_menu-page .col-lg-9 {
  td {
    white-space: nowrap;
    font-family: $font-family-monospace;
    strong { display: inline-block; float: right; }
  }
  td+td {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
    white-space: inherit;
    font-family: inherit;
  }
}
#bitmap-converter {
  margin-top: 0.5em;

  p { font-size: 120%; }
  canvas {
    display: block;
    padding: 2px;
    margin-top: 5px;
  }
  #preview-lg {
    border: 1px solid;
    margin: 5px;
  }
  #preview-sm {
    border: 2px solid;
    float: right;
  }
  input#pasted {
    margin: 0.5em 0.5em 0.5em 0;
    font-family: $font-family-monospace;
  }
  textarea#output {
    width: 100%;
    border: 2px solid;
    border-radius: 8px;
    font-family: $font-family-monospace;
    font-size: 90%;
    line-height: 1.1;
    resize: none;
    cursor: default;
  }
  div.file-selector {
    clear: both;
    padding: 1em;
    margin: 1em 0;
    border-radius: 1em;
    // noselect
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
           -o-user-select: none; /* Opera */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
    .options {
      clear: both;
      border-radius: 1em;
      padding: 4px 0.5em 0;
    }
  }
  #file-input { display: inline-block; }
  div#err-box {
    display: none;
    padding: 1em;
    font-size: 150%;
    font-weight: bold;
  }
  div#cpp-container,
  #stat-sub { display: none; }
}

// Secondary label background color
$brand-requires: #380 !default;
$label-requires-bg: $brand-requires !default;
.label-requires { @include label-variant($label-requires-bg); color: var(--color-required); }

// A table to emulate a list
table.pretty-list {
  border: 0;
  th, td { border: 0; vertical-align: top; }
  td:first-child { text-align: right; }
}
table.pretty-list.headless thead { display: none; }

div[role=main] { padding-bottom: 33vh; }
.jumbotron {
  h1, p { text-align: center; }
  ul li { display: block; margin: 0.5em auto; width: 20em; }
  table { margin: 1em auto; }
  th, td { border-bottom: 1px solid; padding: 1em; }
  th { font-size: 110%; }
  th+th { border-left: 4px solid; }
  td+td { border-left: 4px solid; }
  td>em { display: block; font-size: x-small; text-align: right; }
  strong em { font-size: x-small; font-weight: bold; text-align: left; }
}
li#searchbox {
  padding-left: 0.5em;
  height: 50px;
  overflow: hidden;
  form {
    display: none;
    padding: 12px 0;
  }
  input[type="search"] {
    border: 1px solid;
    border-radius: 0.25em;
    padding: 2px 0.25em;
    font-size: 100%;
    width: 7em;
  }
}
li#searchbox { &:hover, &:active { background-color: transparent; } }

iframe.youtube {
  border: 2px solid;
  margin: 0.5em auto;
}
hr { margin-top: 0; margin-bottom: 0; }
summary h3 { display: inline; }
#search.container {
  padding-left: 0;
  padding-right: 0;
  a { text-decoration: none; }
  p.found { margin: 0.5em 0 0.5em 1em; }
  form { display: block; }
  input[type="search"] {
    width: 70%;
    padding: 4px 0.5em;
    border: 1px solid;
    font-size: 150%;
  }
  input[type="submit"] {
    border: 1px solid;
    border-radius: 4px;
    padding: 3px 0.5em;
    font-size: 150%;
  }
  .overlay {
    position: fixed;
    width: 100%;
    padding: 0;
    text-align: center;
  }
  p.excerpt {
    font-size: 120%; padding: 0; margin: 0;
    a { display: block; padding: 0.5em 0 0.5em 1em; }
  }
}
#install_platformio-page .custom-article ol ol,
#install_platformio_sublime-page .custom-article ol ol {
  list-style-type: upper-alpha;
}
.navbar-header { min-width: 153px; }
.navbar-brand { padding: 4px 0 0 0; }
footer>.container { display: block; clear: both; width: 100%}
.noshift-footer, .shift-footer { padding: 1em; }
@media (min-width: 991px) {
  .shift-footer { padding-left: 342px !important; }
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
  .highlight-panels {
    .panel-heading { height: 70px;}
    .panel {
      min-height: 280px;
      svg { height: 150px; }
    }
  }
}
@media (min-width: $screen-sm-min) {
  #search.container .overlay { width: 750px; }
  .navbar-nav>li>a { padding-left: 4px; padding-right: 4px; }
  @media (min-width: 768px) {
    .navbar-nav { margin: 0 .25em 0 .25em; }
  }
}
@media (max-width: $screen-sm-min) {
  .highlight-panels, .extra-panels { padding: 0 2em !important;}
  li#searchbox input[type="search"] { width: 10em; }
  .tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 324px; }
}
@media (min-width: $screen-md-min) {
  .highlight-panels {
    .panel-body {
      min-height: 260px;
      max-height: 260px;
    }
  }
  .features-tile-body { margin-bottom: 0; padding: 4em 0 2em 3em; }
  hr.custom-hr { width: 70%; }
  .features-tile-image { margin: 0; }
  li#searchbox input[type="search"] { width: 13em; }
  #search.container .overlay { width: 970px; }
  #daynite { display: inline; }
  .tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 320px; }
  .custom-tagline { padding-left: 1em; padding-right: 3em; }
  .features-tile-image { height: 300px; }
}
.container {
  width: 100%;
  max-width: 1400px;
  padding: 0 1em;
}
.navbar-fixed-top { padding: 0 1em; }
@media (min-width: $screen-lg-min) {
  .highlight-panels {
    .panel-body {
      min-height: 240px;
      max-height: 240px;
    }
  }
  .custom-btn { top: 5em; }
  li#searchbox input[type="search"] { width: 14em; }
  #search.container .overlay { width: 1170px; }
  .navbar-nav>li>a { padding-left: 12px; padding-right: 12px; line-height: inherit; }
  .tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 292px; }
}

@media (max-width: $screen-sm-min) {
  li#searchbox input[type="search"] { width: 10em; }
  .tocify.bigtoc, .custom-fixed-sidebar .tocify { width: 324px; }
  //footer>.container { width: 100%; padding-left: 0; }
  footer>.container { width: ($screen-lg-min - 30 - 20); padding-left: 312px; }
}
// Fix headings in panels
div.panel.panel-info, div.panel.panel-warning {
  >.panel-heading { padding: 0; }
  h4 { margin-top: 0; padding: 0.5em; }
}

.label code { background: none; color: #FFF; }

.left-align { margin-left: 1em !important; }

/* Configuration Options Pages */
div.subopt {
  clear: both;
  padding: 1em 0 0.75em 0.5em;
  margin-bottom: 0.5em;
  background: var(--color-nesting);
  .long { margin-top: 0.75em; }
  pre { margin: 0 1px 1em 0; }
  .detail-header { h3, h4 { clear: none; } }
}
.main > div.subopt { background: none; border-top: 1px solid var(--color-color); }
div.container.detail div.row div.subopt {
  h3, h4, h5, h6 { margin: 0.5em 0 0.5em 0; padding: 0; background: none; }
  div.subopt { h3, h4, h5, h6 { margin-top: 0; } }
}

div.settings.item {
  padding: 0.25em;
  margin-bottom: 1em;
  h2 { margin-bottom: 0; padding-bottom: 0; }
  p { margin-left: 1em; }
}
div.summ-opts {
  a.opt {
    padding: 3px 1em;
    display: inline-block;
    width: 45%;
    &:hover, &:active {
      background: var(--color-link-hover-bg);
      color: var(--color-link-hover);
      text-decoration: none;
    }
  }
}
div.options table {
  margin-left: 1em;
  th, td { padding: 0 0.5em; }
  th { font-family: monospace; }
  td { font-size: 90% }
}

.detail-header { position: relative; a[name] { position: absolute; top: -5em; } }

div.brief { font-weight: bolder; }
div.since { float: right; margin-right: 0.25em; }
div.tags { display: inline-block; float: right; margin: 0.5em; }