:root {
    --left-margin: 25%; /* controls the width of the sidebar */
    --background-lightest: rgba(248,248,255,.5);
    --background-lightest-opaque: rgba(248,248,255,1);
    --background-lighter: rgba(232,232,239,.5);
    --background-lighter-opaque: rgba(232,232,239,1);
    --background-light: rgba(217,217,223,.5);
    --background-light-opaque: rgba(217,217,223,1);
    --background-neutral: rgba(201,201,207,.5);
    --background-neutral-opaque: rgba(201,201,207,1);
    --background-dark: rgba(186,186,191,.5);
    --background-dark-opaque: rgba(186,186,191,1);
    --background-darker: rgba(170,170,175,.5);
    --background-darker-opaque: rgba(170,170,175,1);
    --background-darkest: rgba(155,155,159,.5);
    --background-darkest-opaque: rgba(155,155,159,1);
    --text-color--primary: #003366;
    --text-color--secondary: #660000;
    --border: 1px solid var(--background-darkest);
    --color-emphasis: rgba(215,25,28,0.5);
    --font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, "Trebuchet MS", Verdana, sans-serif;
}
body {
    overflow-x: hidden;
}

/*------------------------------------------------------------------------------------------------\
  main
\------------------------------------------------------------------------------------------------*/

    .fdg-main {
        width: 100%;
        height: calc(100vh - 16px);
        position: relative;
        font-family: var(--font-family);
    }
    .fdg-hidden {
        display: none !important;
    }
    .fdg-invisible {
        visibility: hidden !important;
    }
    .fdg-emphasized {
        /*outline: thick solid var(--color-emphasis);*/
        color: var(--color-emphasis);
    }
    .fdg-info-icon {
        font-size: 1rem;
        cursor: help;
        font-weight: normal;
    }
    .fdg-main > * {
        display: inline-block;
    }

    /**-------------------------------------------------------------------------------------------\
      sidebar
    \-------------------------------------------------------------------------------------------**/

        .fdg-sidebar {
            width: calc(var(--left-margin));
            font-size: 1.25rem;
            float: left;
            min-height: 100%;
            clear: left;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: var(--background-darker);
            color: var(--text-color--primary);
        }
        .fdg-sidebar > div {
            width: calc(100% - 20px);
            padding: 10px;
            background-clip: padding-box;
        }
        .fdg-sidebar__label {
            padding-bottom: 2px;
            font-size: 1.25rem;
            font-weight: 300;
            text-align: left;
        }

        /* events */

            div.fdg-events {
                padding-bottom: 2px;
                font-size: 2.5rem;
                font-weight: lighter;
                text-align: left;
                color: var(--text-color--secondary);
            }

        /* legends */

            .fdg-legends {
                background: var(--background-lightest);
            }
            .fdg-legend {
                margin: 10px 0;
            }
            .fdg-legend > * {
            }
            .fdg-legend__label {
                font-weight: bold;
            }
            text.fdg-legend__label {
                fill: var(--text-color--primary);
                stroke: var(--text-color--primary);
                stroke-width: .3;
            }
            .fdg-legend svg {
                width: 100%;
            }
            .fdg-legend__shape {
                fill: var(--background-light);
                stroke: var(--text-color--primary);
                stroke-width: 2px;
            }
            .fdg-legend table {
                width: 100%;
            }
            .fdg-legend td:first-child {
                width: 20px;
            }
            .fdg-legend td:first-child svg {
                width: 20px;
            }
            .fdg-legend td:nth-child(2) {
                font-weight: lighter;
                font-size: 1rem;
            }
            .fdg-legend td:last-child {
                text-align: right;
                font-weight: bold;
                font-variant-numeric: tabular-nums;
            }

        /* progress */

            .fdg-progress {
                position: relative;
                text-align: center;
            }
            .fdg-timepoint {
                font-size: 1.75rem;
                padding-bottom: 0;
            }
            .fdg-time-relative {
                text-align: left;
            }
            .fdg-timer {
                width: 75%;
                display: inline-block;
            }
            .fdg-timer__path {
                fill: white;
                stroke: black;
                stroke-width: 0.5;
            }
            .fdg-timer__path--background {
                fill: var(--background--lightest);
            }
            .fdg-timer__path--foreground {
                fill: var(--text-color--primary);
                stroke: none;
                stroke-width: 0.5;
            }
            .fdg-timer__percent-complete {
                text-anchor: middle;
                alignment-baseline: middle;
                font-weight: bold;
                font-size: 2.25rem;
                top: 3rem;
                position: absolute;
                fill: var(--text-color--secondary);
                stroke: var(--text-color--secondary);
                margin-left: 4px;
            }
            .fdg-countdown {
                display: inline-block;
            }
            .fdg-countdown div {
                display: inline-block;
            }

        /* frequency table */

            .fdg-freq-table {
                background: var(--background-lightest);
                overflow-x: auto;
            }
            .fdg-freq-table__title {
                font-weight: bold;
            }
            .fdg-freq-table__table {
                width: 100%;
                white-space: nowrap;
            }
            .fdg-freq-table__th {
                text-align: right;
            }
            .fdg-freq-table__th,
            .fdg-freq-table__td {
                padding: 0 4px;
            }
            .fdg-freq-table__th:first-child,
            .fdg-freq-table__td:first-child {
                padding-left: 0;
                font-weight: lighter;
                font-size: 1rem;
            }
            .fdg-freq-table__th:last-child,
            .fdg-freq-table__td:last-child {
                padding-right: 10px;
            }

            /* first column */

            .fdg-freq-table__th--label,
            .fdg-freq-table__td--label {
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* vertical table structure */

            .fdg-freq-table__th--id {
                direction: rtl;
            }
            .fdg-freq-table__tr--subgroup .fdg-freq-table__td--label {
                padding-left: 1rem;
            }
            .fdg-freq-table__td--id {
                text-align: right;
                position: relative;
                border: 1px solid var(--background-darkest);
                padding: 0 4px;
                font-variant-numeric: tabular-nums;
            }
            .fdg-freq-table__td--event {
                text-align: right;
                font-weight: bold;
                font-variant-numeric: tabular-nums;
            }

            /* horizontal table structure */

            .fdg-freq-table__td--freq {
                text-align: right;
                font-variant-numeric: tabular-nums;
            }

    /**-------------------------------------------------------------------------------------------\
      canvas
    \-------------------------------------------------------------------------------------------**/

        .fdg-animation {
            width: calc(100% - var(--left-margin));
            height: 100%;
            position: relative;
            float: right;
        }

        .fdg-svg--background,
        .fdg-canvas,
        .fdg-svg--foreground {
            position: absolute;
            left: 0;
        }

        /* progress bar */

            .fdg-progress-timepoint {
                position: absolute;
                font-size: 20px;
                font-weight: bold;
                bottom: 6px;
                right: 0;
                white-space: nowrap;
                color: var(--text-color--primary);
            }
            .fdg-progress-bar {
                position: absolute;
                bottom: 0;
                /*left: -6px;*/
                width: 0%;
                height: 2px;
                background: var(--color-emphasis);
            }
            .fdg-progress-bar:before,
            .fdg-progress-bar:after {
                content: '';
                position: absolute;
                height: 2px;
                opacity: 0.6;
                box-shadow: var(--color-emphasis) 1px 0 6px 6px;
                border-radius: 100%;
            }
            .fdg-progress-bar:before {
                width: 20px;
                right: 0;
                clip: rect(-6px, 22px, 14px, 10px);
            }
            .fdg-progress-bar:after {
                width: 180px;
                right: -80px;
                clip: rect(-6px, 90px, 14px, -6px);
            }

        /* background */

            .fdg-svg--background {
                z-index: -1;
            }

        /* midground */

        /* foreground */

            .fdg-focus-annotation {
                font-weight: bold;
                font-size: 1.5rem;
                text-rendering: optimizeLegibility;
            }
            .fdg-focus-annotation__foreground {
                fill: var(--text-color--primary);
            }
            .fdg-focus-annotation__background {
                stroke: var(--background-lightest-opaque);
            }
            .fdg-focus-annotation__label {
                stroke-width: 4px;
            }
            .fdg-focus-annotation__event-count {
                stroke-width: 3px;
                font-size: 1rem;
            }
            .fdg-custom-annotation {
                font-size: 3rem;
                font-weight: bold;
                stroke-width: 4px;
            }
            .fdg-custom-annotation .fdg-focus-annotation__foreground {
                fill: var(--text-color--secondary);
            }
            .fdg-custom-annotation__line {
                stroke: var(--text-color--secondary);
            }

        /* modal */

            .fdg-modal {
                position: absolute;
                padding: 2%;
                font-size: 2rem;
                text-shadow: var(--text-color--primary) 0px 0px 10px;
            }
            .fdg-modal--center {
                text-align: center;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .fdg-modal--top {
                top: 0;
            }
            .fdg-modal--right {
                text-align: right;
                right: 0;
            }
            .fdg-modal--bottom {
                bottom: 0;
            }
            .fdg-modal--left {
                text-align: left;
                left: 0;
            }

        /* footnotes */

            .fdg-footnotes {
                font-size: .8rem;
                position: absolute;
                bottom: 1rem;
                left: 1rem;
            }

    /**-------------------------------------------------------------------------------------------\
      controls
    \-------------------------------------------------------------------------------------------**/

        /* container */

            .fdg-controls {
                width: 7.5%;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                padding: 10px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                flex-wrap: wrap;
                z-index: 1;
            }
            .fdg-controls > * {
                display: inline-block;
            }
            .fdg-display-controls {
                text-align: center;
                cursor: pointer;
                padding-bottom: 2px;
                border-bottom: 1px solid rgba(155,155,159,.5);
                margin-bottom: 4px;
            }
            .fdg-display-controls:hover {
                background: var(--background-lighter);
            }
            .fdg-control {
                font-size: 0.75rem;
                text-transform: uppercase;
                width: 100%;
                max-height: 1000px;
                transition: max-height 0.5s ease-in;
                overflow: hidden;
            }
            .fdg-control:hover {
                overflow: visible;
            }
            .fdg-control--collapsed {
                max-height: 0;
                transition: max-height 0.5s ease-out;
            }
            .fdg-control:not(:last-child) {
                margin-bottom: 25px;
            }

        /* buttons */

            .fdg-button {
                padding: 3px 3px;
                text-align: center;
                border: var(--border);
                cursor: pointer;
                width: calc(100% - 8px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                transition: width 1s;
                float: right;
                margin-bottom: 2px;
                border-radius: 4px;
            }
            .fdg-button:not(:last-child) {
            }
            .fdg-button--current {
                color: var(--text-color--primary);
                background: var(--background-darker);
                border: 1px solid var(--background-darkest);
                font-weight: bold;
            }
            .fdg-button:not(.fdg-button--current):hover {
                background: var(--background-lighter);
                font-weight: bold;
            }
            .fdg-button--clicked {
                background: var(--background-lighter);
            }
            .fdg-button--sequence:hover {
                width: max-content;
            }
            .fdg-button input {
                text-align: right;
            }