/* COLOR PALETTE */

:root {
    --bg-med: #2b5672;
    --bg-drk: #142b46;

    --fg-lit: #e7ecef;
    --fg-med: #bbbbbb;

    --contrast-dim: #fff9d1;
    --contrast-brt: #f2e27a;
}

/* W/H SHOULD INCLUDE ADD MARGIN/PADDING */
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

/* GENERAL STYLES */

a {
    color: var(--contrast-dim);
    text-decoration: none;
}
a:hover {
    color: var(--contrast-brt);
    text-decoration: underline;
}
a.is-same-state {
    color: var(--fg-med);
}
a.is-same-state:after {
    content: " (state matches selected)";
    font-weight: bold;
}
a.is-selected-state {
    background: var(--contrast-dim);
    border: solid 1px var(--contrast-brt);
    border-radius: 3px;
    color: var(--bg-med);
}
a.is-ignored {
    color: var(--fg-med);
    text-decoration: none;
}
a.is-ignored:after {
    content: " (ignored)";
    font-weight: bold;
}
body {
    font-family: sans-serif;
    font-size: 14px;
    margin: 0;
}
h1, h2, ul {
    margin-bottom: 0.1em;
    margin-top: 0.3em;
}
label {
    font-weight: bold;
}
ul {
    margin: 0;
}
.color-med {
    background: var(--bg-med);
    color: var(--fg-lit);
}
.color-dark {
    background: var(--bg-drk);
    border: solid var(--contrast-dim) 1px;
    color: var(--fg-lit);
}
.font-code {
    font-family: "Courier New", "Lucida Console", Monaco, monospace;
}
.font-small {
    font-size: 0.9em;
}
.hscroll {
    overflow: scroll;
}
@media only screen and (min-width: 360px) { /* Small phone */
    .hscroll { width: 350px; }
}
@media only screen and (min-width: 375px) { /* iPhone 6/X portrait */
    .hscroll { width: 365px; }
}
@media only screen and (min-width: 414px) { /* iPhone 6 Plus portrait */
    .hscroll { width: 404px; }
}
@media only screen and (min-width: 667px) { /* iPhone 6 landscape */
    .hscroll { width: 657px; }
}
@media only screen and (min-width: 736px) { /* iPhone 6 Plus landscape */
    .hscroll { width: 726px; }
}
@media only screen and (min-width: 768px) { /* iPad portrait */
    .hscroll { width: 758px; }
}
@media only screen and (min-width: 812px) { /* iPhone X landscape */
    .hscroll { width: 802px; }
}
@media only screen and (min-width: 1024px) { /* iPad landscape and larger */
    .hscroll {
        overflow: auto;
        width: auto;
    }
}
.margin-bottom-small {
    margin-bottom: 5px;
}
.padding-small {
    padding: 5px;
}
.rounded {
    border-radius: 10px;
}

/* SECTION-SPECIFIC STYLES */

.header {
    border: 0 !important;
    border-bottom: solid var(--contrast-dim) 1px !important;
    padding-left: 5px;
}
.header h1 {
    display: inline-block;
    margin-right: 10px;
}
.header-links-container a {
    padding: 5px;
}

.heading-with-controls {
    display: block;
}
.heading-with-controls h2 {
    display: inline-block;
    margin-right: 40px;
}

.main-flex {
    display: flex;
    flex-wrap: wrap;
}
.main-flex-left {
    flex-basis: 400px;
    flex-grow: 1;
    padding-left: 5px;
}
.main-flex-right {
    flex-basis: 400px;
    flex-grow: 3;
    margin-left: 25px;
    margin-right: 25px;
}

.path-list a {
    border: solid 1px transparent;
    display: inline-table;
}

.svg-actor-label {
    fill: var(--fg-lit);
}
.svg-actor-timeline {
    stroke: var(--bg-med);
}
.svg-event-label {
    fill: var(--contrast-brt);
}
.svg-event-line {
    fill: var(--bg-med);
    stroke: var(--bg-med);
    stroke-width: 2;
}
.svg-event-shape {
    fill: var(--bg-med);
    stroke: var(--bg-med);
}