:root {
    color-scheme: light dark;
    --krisholmblue: rgb(6,56,126);
    --krisholmyellow: #ffe100;
    --col_git_red: #f04f33;
    --col_git_white: #FFFFFF;

    --col_main: #765bd5;
    --col_main_sub: #967fe9;

    --col_text: light-dark(#2f2d33, #afafaf);
    --col_back: light-dark(#e0e0e0, #2d2d2d);
    --col_back_b: light-dark(#a098ac, #1f1f1f);
    --col_mid: light-dark(#888, #424242);
    --col_fore: light-dark(#30260e, #424242);

    --col_button: light-dark(#FFF, var(--col_mid));
    --col_button_border: light-dark(#FFF, var(--col_mid));
    --col_button_text: var(--col_text);
    --col_button_active: var(--col_main_sub);
    --col_button_active_text: var(--col_button_text);
    --col_button_active_outline: var(--col_main_sub);
    --col_button_hover: var(--col_main);
    --col_button_hover_text: var(--col_text);

    --col_button_dm: light-dark(var(--col_sitemap), var(--col_button));
    --col_button_dm_text: light-dark(var(--col_sitemap_text), var(--col_button_text));

    --col_breadcrumb_link: light-dark(var(--col_button), var(--col_fore));
    --col_breadcrumb_link_outline: light-dark(var(--col_fore), var(--col_text));
    --col_breadcrumb_link_text: var(--col_text);
    --col_breadcrumb_link_hover: var(--col_main);
    --col_breadcrumb_link_hover_text: var(--col_breadcrumb_link_text);
    --col_breadcrumb_link_hover_outline: var(--col_breadcrumb_link_outline);

    --col_files_text: var(--col_text);
    --col_files_hover: var(--col_main_sub);
    --col_files_hover_text: light-dark(var(--col_files_text), var(--col_back));
    --col_files_line: var(--col_mid);
    --col_files_head: light-dark(var(--col_fore), var(--col_back));
    --col_files_head_text: light-dark(var(--col_back), var(--col_text));

    --col_gitactivity_text: var(--col_text);
    --col_gitactivity_active_a: var(--col_main);
    --col_gitactivity_active_b: var(--col_main_sub);
    --col_gitactivity_active_c: #405693;
    --col_gitactivity_active_d: #5a6faa;
    --col_gitactivity_inactive_a: light-dark(rgba(0,0,0, .18), rgba(66,66,66,.5));
    --col_gitactivity_inactive_b: light-dark(rgba(0,0,0, .09), rgba(66,66,66,1));

    --col_hamburger: light-dark(var(--col_sitemap_text), var(--col_text));

    --col_logo_off: light-dark(var(--col_sitemap_text), #2d2d2d);
    --col_logo_outer: var(--col_main_sub);
    --col_logo_inner: var(--col_main);

    --col_mediaplayer: var(--col_back);
    --col_mediaplayer_close: var(--col_fore);
    --col_mediaplayer_close_text: var(--col_back);
    --col_mediaplayer_close_hover: var(--col_main_sub);
    --col_mediaplayer_outline: var(--col_text);
    --col_mediaplayer_divide: var(--col_fore);
    --col_mediaplayer_thumb: light-dark(var(--col_fore), rgba(0,0,0,.2));

    --col_polaroid: light-dark(#FFF, var(--col_back));
    --col_polaroid_outline: var(--col_fore);
    --col_polaroid_label: light-dark(var(--col_back), var(--col_fore));
    --col_polaroid_label_outline: light-dark(var(--col_back), var(--col_fore));
    --col_polaroid_text: var(--col_text);
    --col_polaroid_hover: var(--col_main_sub);
    --col_polaroid_hover_outline: var(--col_main);
    --col_polaroid_hover_text: var(--col_back);
    --col_polaroid_hover_label: var(--col_main);
    --col_polaroid_hover_label_outline: var(--col_main);

    --col_sitemap: var(--col_fore);
    --col_sitemap_text: light-dark(rgba(255,255,255, .4), var(--col_text));
    --col_sitemap_highlight: var(--col_main);
    --col_sitemap_highlight_text: light-dark(var(--col_text), var(--col_back));
    --col_sitemap_hover: var(--col_main_sub);
    --col_sitemap_hover_text: light-dark(var(--col_text), var(--col_back));

    --col_shadow: light-dark(rgba(0,0,0,.5), #000);


    --col_diagrams_highlight: light-dark(var(--col_sitemap_highlight), #EEAA00);
    --col_diagrams_numbers: #EEAA00;

    --col_issue_status0: #1d1d1d;
    --col_issue_status1: #081021;
    --col_issue_status2: #005481;
    --col_issue_status3: #66aa00;

    --col_issue_rating0: #005481;
    --col_issue_rating1: #AAEE00;
    --col_issue_rating2: #ffac00;
    --col_issue_rating3: #AA0000;

    --col_issue_status0_fg: rgba(255,255,255,.7);
    --col_issue_status1_fg: rgba(255,255,255,.7);
    --col_issue_status2_fg: rgba(255,255,255,.7);
    --col_issue_status3_fg: rgba(0,0,0,.7);

    --col_issue_rating0_fg: rgba(255, 255, 255, .7);
    --col_issue_rating1_fg: rgba(0, 0, 0, .7);
    --col_issue_rating2_fg: rgba(0, 0, 0, .7);
    --col_issue_rating3_fg: rgba(255, 255, 255, .7);
}

@font-face {
    font-family: heavy;
    src: url(/content/fonts/FiraSans/Bold.otf);
}
@font-face {
    font-family: primary;
    font-weight: bold;
    src: url(/content/fonts/FiraSans/Bold.otf);
}
@font-face {
    font-family: primary;
    src: url(/content/fonts/FiraSans/Regular.otf);
}
@font-face {
    font-family: primary;
    font-weight: 300;
    src: url(/content/fonts/FiraSans/Light.otf);
}
@font-face {
    font-family: primary;
    font-weight: 200;
    src: url(/content/fonts/FiraSans/Light.otf);
}
@font-face {
    font-family: primary;
    font-weight: 100;
    src: url(/content/fonts/FiraSans/Light.otf);
}

@font-face {
    font-family: light;
    src: url(/content/fonts/FiraSans/Light.otf);
}
@font-face {
    font-family: monospace;
    src: url(/content/fonts/FiraMono/Regular.woff2);
}

html {
    scroll-behavior: smooth;
}

html:not(:has([value="dm_light"]:checked)) {
  color-scheme: dark;
    --shadow_size: .5em;
    --shadow: var(--shadow_size) var(--shadow_size) 0 0 var(--col_shadow);
    --sitemap_shadow: none;
    --gitactivity_boxshadow: none;
}
html:has([value="dm_light"]:checked) {
  color-scheme: light;
    --shadow_size: .1em;
    --shadow: var(--shadow_size) var(--shadow_size) .2em -1px var(--col_shadow);
    --sitemap_shadow: var(--shadow);
    --gitactivity_boxshadow: .05em .05em .1em -1px #2d2d2d;
}

a {
    text-decoration: none !important;
    color: inherit;
}
pre {
    margin: 0;
}

body {
    margin: 0;
    font-family: primary;
    background-color: var(--col_back_b);
    color: var(--col_text);
}
body > .body_wrapper {
    background-color: var(--col_back);
}

.removed {
  display: none;
}

.vh_top,
.vh_mid,
.vh_bot {
    display: inline-block;
    height: 100%;
    width: 0;
    ~ * {
        display: inline-block;
    }
}


.vh_top ~ *,
.vh_top {
    vertical-align: top;
}
.vh_mid,
.vh_mid ~ * {
    vertical-align: middle;
}
.vh_bot,
.vh_bot ~ * {
    vertical-align: bottom;
}


.sitemap {
    color: var(--col_sitemap_text);
    background-color: var(--col_sitemap);
    box-shadow: var(--sitemap_shadow);
    > div {
        > .slug-HamburgerMenu {
            text-align: right;
            .custom-select {
                display: inline-block;
                height: 100%;
                > .wrapper {
                    height: 100%;
                }
            }
            .hamburger-wrapper {
                height: 100%;
                .hamburger {
                    height: 100%;
                    width: 5em;
                    cursor: pointer;
                    > div {
                        padding: 1.2em;
                        height: calc(100% - 2.4em);
                        > div {
                            width: 100%;
                        }
                        > div:nth-child(even) {
                            height: 17%;
                        }
                        > div:nth-child(odd) {
                            height: 22%;
                            background-color: var(--col_hamburger);
                            border-radius: 3em;
                        }
                    }
                }
            }
        }
        > .slug-HamburgerMenu.active {
            .hamburger-wrapper {
                .hamburger {
                    > div {
                        > div:nth-child(odd) {
                            background-color: var(--col_highlight);
                            opacity: 1;
                        }
                    }
                }
            }
        }

        .header {
            font-weight: bold;
        }
        .item.active {
            font-weight: bold;
            color: var(--col_sitemap_highlight_text);
            background: 
                linear-gradient(var(--col_sitemap_highlight) 0 0) 
                0 100% /var(--w, 0) 100%
                no-repeat;
            --w: 100%;
        }

        .item {
            background: 
                linear-gradient(var(--col_sitemap_hover) 0 0) 
                0 100% /var(--w, 0) 100%
                no-repeat;
            transition:  none;
           /* transition: 
                ease-out background .2s,
                ease-out background-color .2s; */
        }

        .item:not(:hover) {
        }


        .item:hover:not(.active) {
            color: var(--col_sitemap_highlight_text);
            --w: 100%;
        }

        .item:hover:not(.active) > div {
            font-weight: bold;
        }

    }
}

.sitemap.home > div > .logo {
    svg {
        path {
            fill: var(--col_back);
            stroke: none;
        }
    }
}

.sitemap:not(.home) > div > .logo {
    svg {
        path {
            fill: var(--col_back);
            stroke: var(--col_main_sub);
        }
    }
}
.sitemap.git > div > .logo {
    svg {
        path.tire,
        path.frame {
            fill: var(--col_main);
            stroke: var(--col_main_sub);
        }
        path {
            fill: var(--col_back);
            stroke: none;
        }
    }
}
.sitemap.manual > div > .logo {
    svg {
        path.tire,
        path.frame {
            fill: var(--col_back);
            stroke: var(--col_main_sub);
        }
        path {
            fill: var(--col_back);
            stroke: none;
        }
    }
}
.sitemap.unicycling > div > .logo {
    svg {
        path {
            fill: var(--col_main);
            stroke: var(--col_main_sub);
        }
    }
}

.content {
    padding: 1em;
    width: calc(100vw - 2em);
    > div { }
}

.content.daisy {
    text-align: center;
    padding: 1em;
    width: calc(100% - 2em);
    .img_wrapper {
        padding: 0 10vw;
        svg {
            max-height: 50vh;
            display: inline-block;
            max-width: 100%;
            border-radius: 50%;
            .petals {
                fill: #FFF;
            }
            .stamen {
                fill: #c16500;
            }
            .stem {
                fill: #4a772f;
            }
        }
    }
    .details {
        padding: 1em;
        font-weight: bold;
        font-size: 1.4em;
    }
}

.index.content {
  text-align: center;
  padding: 2em;
  > div {
    max-width: 100%;
  }
  .details {
    > div {
      padding: 1em 0 0 0;
    }
    .nametag {
      font-family: heavy;
      font-weight: bold;
      font-size: 2em;
    }

    .nametag + div {
      font-family: light;
      font-size: 1.2em;
    }

    .slug-GitActivityWidget:empty {
      display: inline-block !important;
      height: 90vh !important;
      width: 150px !important;
      background-color: var(--col_mid) !important;
    }

    .shields {
        .shield > svg {
            padding: .25em .25em 0 .25em;
            height: 2em;
            width: 2em;
            path {
                transition: all 200ms ease;
                fill: var(--col_main_sub);
            }
        }
        .shield:hover > svg {
            path {
                fill: var(--col_main);
            }
        }
        .shield:not(:last-child) {
            padding-right: .5em;
        }

    }

    .externals {
      padding-bottom: 1em;
    }

    .externals > a {
      height: 5em;
      width: 5em;
      margin-bottom: -1em;
      text-align: center;
      white-space: nowrap;
      display: inline-block;
      svg {
        transition-duration: .2s;
        transition-property: width, height, padding, margin, box-shadow;
        transition-timing-function: ease;
        padding: .5em 1em;
        box-shadow: 0px 0px 0px 0px #000;
        background-color: rgba(255, 255, 255, .05);
        width: 2em;
        height: 2em;
        margin-top: 1em;
        path {
          fill: var(--col_text);
        }
        .emailicon {
          path {
            stroke: var(--col_text);
          }
        }
      }
    }

    .externals > a:hover {
      outline: none;
      svg {
        outline: 4px solid var(--col_sitemap_hover);
        path {
          fill: var(--col_sitemap_hover);
        }
        .emailicon {
          path {
            stroke: var(--col_sitemap_hover);
          }
        }
        
      }
    }
  }
}

.media {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin-right: -1em;
    margin-bottom: -1em;
    > div {
        padding: 0 1em 1em 0;
        flex: 1 1 auto;
        vertical-align: bottom;
        text-align: center;
        width: 20%;
        min-width: 16em;
    }
}

.polaroid {
    background-color: var(--col_polaroid);
    cursor: pointer;
    width: calc(100% - 2em - 2px);
    padding: 1em;
    border: 1px solid var(--col_polaroid_outline);
    box-shadow: var(--shadow);
    > div {
        > img {
            width: 100%;
            max-height: 16em;
            max-width: 16em;
            display: inline-block;
            text-align: center;
            border: 1px solid var(--col_polaroid_outline);
            background-color: rgba(0,0,0, .2);
        }
    }
    > div.label-wrapper {
        padding-top: 1em;
        height: 2em;
        > .label {
            color: var(--col_polaroid_text);
            background-color: var(--col_polaroid_label);
            border: 1px solid var(--col_polaroid_label_outline);
        }
    }
}

.polaroid:hover {
    border-color: var(--col_polaroid_hover_outline);
    background-color: var(--col_polaroid_hover);
    > div {
        > img {
            border-color: var(--col_polaroid_hover_outline);
        }
    }
    > div.label-wrapper {
        > .label {
            color: var(--col_polaroid_hover_text);
            background-color: var(--col_polaroid_hover_label);
            border-color: var(--col_polaroid_hover_label_outline);
        }
    }
}


.mp_overlay {
    z-index: 10;
    top: 0;
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, .7);
    text-align:center;
    > div {
        height: 100%;
    }
}

.media_player {
    text-align: center;
    background-color: var(--col_mediaplayer);
    border-color: var(--col_mediaplayer_outline);
    padding: .5em;
    > div {
        display: flex;
        flex-direction: column;
        height: 100%;
        > div:first-child {
            flex: 0 1 auto;
            text-align: right;
            .close_button {
                display: inline-block;
                cursor: pointer;
                height: 2em;
                padding: 0 1.5em;
                background-color: var(--col_mediaplayer_close);
                color: var(--col_mediaplayer_close_text);
            }
            .close_button:hover {
                background-color: var(--col_mediaplayer_close_hover);
                color: var(--col_mediaplayer_close_hover_text);
            }
        }

        > div:nth-child(2) {
            flex: 1 1 auto;
            .mp_video_wrapper {
                flex: 1 1 auto;
                > * {
                    max-height: 100%;
                }
                video {
                    max-height: 90%;
                    max-width: 90%;
                }
            }

            .mp_title {
                flex: 0 1 auto;
                height: 3em;
                > div {
                    border-top: solid 1px var(--col_mediaplayer_divide);
                }
            }
        }
        > div:nth-child(2):last-child {
            height: calc(100% - 2em);
        }
        > div:nth-child(2):not(:last-child) {
            height: calc(75% - 3em);
        }

        .mp_selector {
            .thumb:first-child:last-child {
                display: none;
            }

            .thumb {
                cursor: pointer;
                display: inline-block;
                filter: grayscale(100%);
                > div {
                    transition-duration: .2s;
                    transition-property: width, height, margin;
                    transition-timing-function: ease;
                    box-shadow: var(--shadow);
                    display: inline-block;
                    height: calc(100% - 2em);
                    width: calc(100% - 2em);
                    max-width: 16em;
                    margin: 1em;

                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    background-color: var(--col_mediaplayer_thumb);
                }
            }
            .thumb.selected {
                filter: none;
                > div {
                    height: calc(100% - 1em);
                    width: calc(100% - 1em);
                    margin: .5em;
                }
            }
        }
    }
}

.manual + .content {
    .markdown-wrapper {
        > .markdown {
            > h1,
            > h1 + p {
                text-align: center;
            }
        }
    }
}

h1, h2, h3, h4, h5, th, b, strong {
    font-family: heavy;
}
em { }

.markdown-wrapper {
    > .markdown {

        > * {
            max-width: 100%;
        }
        > *:first-child {
            margin: 0;
        }
        > :not(:first-child) {
            margin: 1em 0 0 0;
        }

        > h1:not(:first-child),
        > h2:not(:first-child),
        > h3:not(:first-child),
        > h4:not(:first-child),
        > h5:not(:first-child) {
            margin: 1.4rem 0 0 0;
        }

        > p {
            + p {
                margin: 1rem 0 0 0;
            }
            > img {
                display: inline-block;
                max-width: 100%;
            }
        }
        > h1 {
            font-family: heavy;
            text-decoration: underline;
        }

        > h1 + p + p {
            text-align: center;
            > * {
                background-color: var(--col_button);
                color: var(--col_button_text);
                padding: .5em 1em;
                box-shadow: var(--shadow);
            }
            > a:focus,
            > a:hover {
                outline: none;
                background-color: var(--col_button_hover);
                color: var(--col_button_hover_text);
            }

        }
        > h1 + p + p ~ p {
            a {
                font-weight: 500;
            }
        }
        > h1 + p + p ~ * {
            a:hover {
            }
        }

        > h2 {
            font-family: heavy;
            border-bottom: 1px solid var(--col_fore);
        }
        > :not(h2) + ul {
            font-weight: 200;

        }

        .md-table-of-contents > ul,
        > ul {
            margin: 1em 0 0 0;
            padding-left: 0em;
            ol, ul {
                padding-left: 1em;
            }
            li {
                list-style: none;
                line-height: 1.7em;
                > p {
                    margin: 0;
                }
            }
        }

        .md-table-of-contents a:hover {
          color: var(--col_sitemap_hover);
        }

    }

    .inline-svg {
        display: inline-block;
        vertical-align: bottom;
        margin-top: 0 !important;
        height: 2em;
        width: 2em;
        svg {
            path {
                fill: var(--col_text);
            }
        }
    }
}

.git-overview {
    > div.markdown-wrapper {
        border: 1px solid var(--col_fore);
        padding: 1em;
    }
    .slug-CloneButtonWidget {
        white-space: nowrap;
        max-width: 100%;
        > div {
            display: flex;
            > div {
                flex: 0 1 auto;
                font-family: monospace;
                padding: .5em;
            }
            > div:first-child {
                cursor: pointer;
                text-align: center;
                user-select: none;
                background-color: var(--col_button);
                border: 1px solid var(--col_button_border);
                width: calc(7.5em - 1em - 2px);
            }
            > div:first-child.copied {
                font-weight: bold;
                background-color: var(--col_button_active);
                border-color: var(--col_button_active_border);
                color: var(--col_button_active_text);
            }
            > div:last-child {
                border: 1px solid var(--col_button_border);
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
    .files-wrapper {
        width: 100%;
        > .std-table {
            > thead {
                > tr:not(:hover) {
                    > th {
                        background-color: rgba(0,0,0,.1);
                    }
                }
                > tr:first-child {
                    > th {
                        padding:0;
                        background-color: var(--col_files_head);
                        color: var(--col_files_head_text);
                    }
                    > th:first-child {
                        text-align: left;
                    }
                    > th:last-child {
                        text-align: right;
                        padding-right: .5em;
                        white-space: nowrap;
                    }
                }
            }
            > tbody {
                > tr:hover {
                    > td {
                        > a {
                            path, rect {
                                stroke: var(--col_files_hover_text);
                            }
                        }
                    }
                }

                > tr {
                    > td {
                        white-space: nowrap;
                    }
                    > td.description {
                        max-width: calc(Min(30vw, 307px) - 5em);
                        text-overflow: ellipsis;
                        overflow: hidden;
                        padding-left: 1em;
                        padding-right: 1em;
                    }
                    > td:last-child {
                        padding-right: .5em;
                        text-align: right;
                    }
                }
            }
        }
    }
    .icon-svg:empty {
        display: none;
    }
    .icon-svg:not(:empty) {
        width: 2em;
        display: inline-block;
        svg {
            width: 1.6em;
            height: 1.6em;
            display: block;
            rect, path {
                stroke: var(--col_files_text);
            }
        }
    }
    .readme {
        text-align: left;
        table {
          border-collapse: collapse;
          td {
            border: 1px solid var(--col_fore);
            padding: .5em;
            img {
              width: 100%;
            }
          }
        }
    }
    .slug-GitActivityWidget:empty {
        height: 9em;
        background-color: var(--col_mid);
    }
    .slug-CloneButtonWidget:empty {
        height: 1.6em;
        background-color: var(--col_mid);
        display:inline-block;
        width: 16em;
    }
}


.git-fileoverview {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    > * {
        flex: 1 1 auto;
    }
    > pre:last-child {
        overflow-y: auto;
    }
}
.git-overview,
.git-fileoverview {
    .navigation-row {
        > div:last-child {
            margin-right: -.5em;
        }
    }

    .title-row {
        text-align: center;
        padding-bottom: .5em;
        > div:last-child {
            text-align: center;
            > div {
                display: inline-block;
            }
            > div:nth-child(2) {
                padding: 0 .5em;
            }
        }
    }

    .breadcrumb-nav {
        font-weight: normal;
        a:hover {
            background-color: var(--col_breadcrumb_link_hover);
            color: var(--col_breadcrumb_link_hover_text);
        }
        span, a {
            display: inline-block;
            padding: .2em .3em;
        }
        a {
            background-color: var(--col_breadcrumb_link);
            color: var(--col_breadcrumb_link_text);
            border-top: none;
            border-bottom: none;
        }
        span {
            display: inline-block;
        }

    }
}

.slug-GitActivityWidget {
    font-size: 1rem;
    > div.title {
        text-align: center;
        font-size: 1rem;
        font-weight: bold;
    }
    > .table-wrapper {
        text-align: center;
    }

    .year-table {
        display: inline-table;
        border-collapse: collapse;
        th {
            font-weight: normal;
            font-family: monospace;
        }
        td.year-delim {
            > span {
                display: flex;
                > hr {
                    border: none;
                    border-top: 1px solid var(--col_gitactivity_text);
                    flex: 1 1 auto;
                }
                > div {
                    flex: 0 1 auto;
                }
            }
        }
        td:not(.year-delim) {
            text-align: center;
            > div {
                width: .9em;
                height: .7em;
            }
        }
        td:not(.oob) {
            > div {
                background-color: var(--col_gitactivity_inactive_a);
            }
        }
        td.active:not(.other) {
             > div {
                background-color: var(--col_gitactivity_active_a);
                box-shadow: var(--gitactivity_boxshadow);
            }
        }
        td.active.evenmonth:not(.other) {
            > div {
                background-color: var(--col_gitactivity_active_b);
            }
        }
        td.active.other {
             > div {
                background-color: var(--col_gitactivity_active_c);
                box-shadow: var(--gitactivity_boxshadow);
            }
        }
        td.active.evenmonth.other {
            > div {
                background-color: var(--col_gitactivity_active_d);
            }
        }
        td:not(.active).evenmonth {
            > div {
                background-color: var(--col_gitactivity_inactive_b);
            }
        }
        td:hover {
            > div {
                border-color: var(--col_hover);
            }
        }
    }
}

.slug-GitActivityWidget.horizontal {
    text-align: center;
    .table-wrapper {
        font-size: .85rem;
        overflow-x: scroll;
        padding-bottom: 1em;
    }
}

.slug-GitBranchSelect {

}

.slug-GitCommitSelect {

}

.custom-select {
    box-shadow: var(--shadow);
    > .wrapper {
        position: relative;
        > select {
            cursor: pointer;
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        > .facade {
            display: flex;
            padding: .25em .5em .25em .5em;
            background-color: var(--col_button);
            > div:first-child {
                flex: 1 1 auto;
                padding-right: .5em;
                white-space: nowrap;
            }
            > div.arrow {
                flex: 0 1 auto;
                margin-top: -.1em;
            }
            > div.arrow:before {
            }
        }
    }
}
.button {
    appearance: none;
    text-align: center;
    color: var(--col_button_text);
    background-color: var(--col_button);
    padding: .5em 1em;
    box-shadow: var(--shadow);
    margin: 0 .5em .5em 0;
}
.button:hover {
    background-color: var(--col_button_hover);
    color: var(--col_button_hover_text);
}

.numbered-diagram.portrait > div:first-child > div:nth-child(2) {
    height: 500px;
}
.numbered-diagram.landscape > div:first-child {
  display: flex;
  > div:nth-child(2) {
    margin: auto;
    width: 252px;
    img {
      width: 100%;
    }
  }
}

.numbered-diagram {
    > div:first-child {
        > div:nth-child(2) {
            position: relative;
            img {
                border: 1px solid var(--col_fore);
                height: 100%;
                display: block;
            }
            > .label-layer {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                span, a {
                    font-size: 1.5em;
                    position: absolute;
                    display: inline-block;
                    color: var(--col_diagrams_numbers);
                    text-shadow: 2px 2px 3px #000000;
                    font-weight: bold;
                    user-select: none;
                    opacity: .4;
                }

                .selected { opacity: 1; }
                :nth-child(1):before { content: "01"; }
                :nth-child(2):before { content: "02"; }
                :nth-child(3):before { content: "03"; }
                :nth-child(4):before { content: "04"; }
                :nth-child(5):before { content: "05"; }
                :nth-child(6):before { content: "06"; }
                :nth-child(7):before { content: "07"; }
                :nth-child(8):before { content: "08"; }
                :nth-child(9):before { content: "09"; }
                :nth-child(10):before { content: "10"; }
                :nth-child(11):before { content: "11"; }
                :nth-child(12):before { content: "12"; }
            }
        }
    }
    > div:last-child {
        > table {
            border-collapse: collapse;
            tr:not(:last-child) {
                td {
                    border-bottom: 1px solid var(--col_fore);
                }
            }
            tr.selected {
                td {
                    color: var(--col_diagrams_highlight);
                }
            }

            tr:nth-child(1) td:first-child:before { content: "01"; }
            tr:nth-child(2) td:first-child:before { content: "02"; }
            tr:nth-child(3) td:first-child:before { content: "03"; }
            tr:nth-child(4) td:first-child:before { content: "04"; }
            tr:nth-child(5) td:first-child:before { content: "05"; }
            tr:nth-child(6) td:first-child:before { content: "06"; }
            tr:nth-child(7) td:first-child:before { content: "07"; }
            tr:nth-child(8) td:first-child:before { content: "08"; }
            tr:nth-child(9) td:first-child:before { content: "09"; }
            tr:nth-child(10) td:first-child:before { content: "10"; }
            tr:nth-child(11) td:first-child:before { content: "11"; }
            tr:nth-child(12) td:first-child:before { content: "12"; }
        }
    }
}

div.slug-IssuesTable {
    width: 100%;
    .status,
    .rating {
        text-align: center;
        padding: .25em .5em;
    }

    > .std-table {
        > thead {
            > tr {
                > th {
                    cursor: pointer;
                }
                > th:last-child,
                > th:first-child,
                > th:nth-child(3) {
                    width: 1em;
                }

                > th:not(:last-child) {
                    text-align: left;
                    border-right: solid 1px var(--col_fore);
                }
                > th:first-child,
                > th:nth-child(3),
                > th:nth-child(4) {
                    text-align: center;
                }
            }
        }
        > tbody {
            > tr {
                cursor: pointer;
                > td {
                    padding: .5rem;
                }
                > td:nth-child(2) {
                    max-width: 0;
                    > span {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                > td:first-child,
                > td:nth-child(3) {
                    text-align: center;
                }
                > td:last-child {
                    text-align: right;
                }
            }
        }
    }
}

.issue-body,
.slug-IssuesTable {
    .status.s0 {
        color: var(--col_issue_status0_fg);
        background-color: var(--col_issue_status0);
    }
    .status.s1 {
        color: var(--col_issue_status1_fg);
        background-color: var(--col_issue_status1);
    }
    .status.s2 {
        color: var(--col_issue_status2_fg);
        background-color: var(--col_issue_status2);
    }
    .status.s3 {
        color: var(--col_issue_status3_fg);
        background-color: var(--col_issue_status3);
    }
    .rating.r1 {
        color: var(--col_issue_rating1_fg);
        background-color: var(--col_issue_rating1);
    }
    .rating.r2 {
        color: var(--col_issue_rating2_fg);
        background-color: var(--col_issue_rating2);
    }
    .rating.r3 {
        color: var(--col_issue_rating3_fg);
        background-color: var(--col_issue_rating3);
    }
    .rating.r0 {
        color: var(--col_issue_rating0_fg);
        background-color: var(--col_issue_rating0);
    }
}

.issue-body {
    > .status-line {
        > div {
            display: inline-block;
        }
    }

    .status,
    .rating {
        padding: .25em .5em;
    }

    .notes-table {
        margin-top: 1em;
        .status-update {
            display:inline-block;
        }
        .author {
            padding-right: .5em;
        }
        > div:nth-child(2n + 1) {
            background-color: rgba(0,0,0,.1);
        }
        > div {
            border-top: 1px solid var(--col_fore);
            padding: .5em;
            > .top-line {
                display: flex;
                > div:nth-last-child(3) {
                    flex: 0 1 auto;
                }
                > div:nth-last-child(2) {
                    flex: 1 1 auto;
                }
                > div:last-child {
                    flex: 0 1 auto;
                    text-align: right;
                }
            }
            > div.note-description {
                padding: .5em;
                font-weight: 300;
            }
        }
    }

    .issue_note_imgs {
        display: flex;
        flex-wrap: wrap;
        padding-top: .5em; 
        padding-left: .5em; 
        border-top: 1px solid var(--col_fore);
        > div {
            flex: 1 1 auto;
            height: 8em;
            padding-bottom: .5em;
            padding-right: .5em;
            text-align: center;
            > img {
                display: inline-block;
                border: 1px solid var(--col_fore);
                max-height: 100%;
                max-width: 100%;
            }
        }
    }
}

.std-table {
    width: 100%;
    border-collapse: collapse;

    > thead {
        > tr {
            > th {
                background-color: rgba(0,0,0,.1);
                padding: .5rem;
            }
        }
    }

    > tbody {
        > tr:hover {
            > td {
                background-color: var(--col_files_hover);
                color: var(--col_files_hover_text);
            }
        }
        > tr:nth-child(2n):not(:hover) {
            > td {
                background-color: rgba(0,0,0,.1);
            }
        }
        > tr {
            > td:first-child {
                padding: .5rem;
            }
            > td {
                border-top: solid 1px var(--col_files_line);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: .5rem 0;
            }
        }
    }
}

.img_overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    z-index: 2;
    > img {
        box-shadow: 1em 1em 0em 0em #000000;
        max-height: calc(100% - 3em);
        max-width: calc(100% - 3em);
    }
}

div.slug-StepDiagram {
  display: flex;
  flex-wrap: wrap;
  margin-right: 2%;

  > div:nth-child(odd) {
    flex: 1 1 0;
    min-width: 30%;
  }
  > div:nth-child(even) {
    flex: 1 1 1;
  }
  > div {
    margin-left: 2%;
    margin-bottom: 1em;

    .img-wrapper {
      text-align: center;
      margin-bottom: 1em;
      > img {
        display: inline-block;
      }
    }

    .label {
      text-align: center;
      padding: .5em;
    }

    .label:empty {
      display: none;
    }

    > * {
      border: 1px solid var(--col_fore);
    }
  }
}

.dmtoggle {
  z-index: 10;
  position: fixed;
  right: 1em;
  bottom: 0em;
  overflow: clip;
  cursor: pointer;
  font-size: 3em;
  line-height: .5em;
  height: 1.4em;

  text-align: center;
  transition: all ease-in 100ms;
  box-shadow: 2px 3px 5px 0px #000;
  color: var(--col_button_dm_text);
  background-color: var(--col_button_dm);
  border-top-left-radius: .3em;
  border-top-right-radius: .3em;
  padding: .1em .2em 0 .2em;
  cursor: pointer;
}

.dmtoggle:not(:hover) {
  bottom: -1em;
}

.dmtoggle input,
.dmtoggle input:checked + label {
  display: none;
}