/* GrandID CSS v0.5 - Status Edition (minimized) */

/* global variables */
:root {
    --blue: #086797;
    --light-blue: #128cc4;
    --green: #517a51;
    --light-green: #69a069;
    --white: #ffffff;
    --nav-hover: rgba(18, 140, 196, 0.12);
    --nav-active: rgba(18, 140, 196, 0.05);
}
/* colors */
.blue { color: var(--blue); }
/* main */
body {
    font-family: "proxima-nova", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.22;
    margin: 0;
    color: #444;
    background-color: #efefef;
}
html { -webkit-font-smoothing: antialiased; }
/* tables */
table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-left: 0;
}
table tbody tr:nth-child(2n+1) { background-color: #f9f9f9; }
th, td { border: 1px solid #ddd; line-height: 20px; padding: 10px; text-align: left; vertical-align: top; }
td svg { position: relative; top: 4px; }
p + svg { position: relative; top: 6px; }
td.center { text-align: center; }
td.right { text-align: right; }
td.nowrap { white-space: nowrap; }
td.nowrap.center { text-align: center; }
td.nowrap.right { text-align: right; }
td.nowrap.left { text-align: left; }
td.nowrap.top { vertical-align: top; }
td.nowrap.middle { vertical-align: middle; }
td.nowrap.bottom { vertical-align: bottom; }
th { border-top: 0; }
/* wrap table within a container with this class and it will be responsive */
.responsive-table-container { display: block; overflow-x: auto; width: 100%; }
/* containers */
section { padding: 20px 20px; background-color: #fefefe; border-bottom: 1px solid #ddd; }
/* footer */
footer { margin-top: 0; padding: 15px 10px 30px; text-align: center; border-top: 2px solid transparent; }
footer h2 { border: 0; }
footer p { color: #999; }
/* typography */
h1, h2, h3, h4, h5, h6 { color: #444; padding: 5px 0 5px 0; margin: 10px 0 10px 0; font-weight: normal; }
h2 { border-bottom: 1px solid #ddd; border-bottom-color: #f1f1f1; }
p { padding: 0; margin: 10px 0; }
hr { border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #eee; }
/* anchor */
a { text-decoration: none; color: var(--blue); border-bottom: 1px dotted transparent; }
a:hover, a:active, a:focus { outline: 0; }
a:hover { color: var(--light-blue); border-bottom: 1px solid transparent; }
a.danger { color: red; }
a.danger:hover { color: #810000; }
/* dull links */
a.dull-link { color: #555; }
a.dull-link:hover { color: var(--blue); }
/* code */
pre { background-color: #eee; border: 2px solid #ccc; padding: 10px; border-radius: 6px; overflow-wrap: normal; overflow: scroll; }
code { font-weight: normal; font-size: 0.9em; }
.pull-right { float: right; }
/* Buttons */
button, a.button, input[type=submit] {
    background-color: var(--light-blue);
    color: #fff;
    font-weight: bold;
    padding: 12px 18px;
    font-size: 12px;
    border: 1px solid var(--light-blue);
    border-radius: 24px;
}
button:hover, a.button:hover, input[type=submit]:hover { border: 1px solid var(--blue); background-color: var(--blue); color: #fff; }
button.green, a.button.green, input[type=submit].green { background-color: var(--light-green); }
button.green:hover, a.button.green:hover, input[type=submit].green:hover { background-color: var(--green); }
button.important, a.button.important, input[type=submit].important { border: 1px solid transparent; }
button.important:hover, a.button.important:hover, input[type=submit].important:hover {
    border: 1px solid #BD362F;
    background-color: #BD362F;
    color: #fff;
}
button.outline, a.button.outline, input[type=submit].outline {
    border: 2px solid var(--light-blue);
    background-color: transparent;
    color: var(--light-blue);
}
button.outline:hover, a.button.outline:hover, input[type=submit].outline:hover {
    border: 2px solid var(--light-blue);
    background-color: var(--light-blue);
    color: white;
}
button.green.outline, a.button.green.outline, input[type=submit].green.outline {
    border: 2px solid var(--light-green);
    background-color: /*white*/ transparent;
    color: var(--light-green);
}
button.green.outline:hover, a.button.green.outline:hover, input[type=submit].green.outline:hover {
    border: 2px solid var(--light-green);
    background-color: var(--light-green);
    color: white;
}
button.thin, a.button.thin, input[type=submit].thin { padding: 6px 16px; border-radius: 18px; }
/* forms */
form { width: 100%; }
input, select { font-size: 1.0em; }
select { border: 2px solid #ddd; background-color: #fff; padding: 8px 15px; }
select:focus { outline: none; border: 2px solid var(--blue); }
select:hover { border: 2px solid #bbb; }
input[type=submit], button { cursor: pointer; }
input[type=text], input[type=search] {
    width: 100%;
    border: 2px solid #ddd;
    padding: 6px;
    margin: 0 0 4px;
    box-sizing: border-box;
}
input[type=text]:hover, input[type=search]:hover { border: 2px solid #bbb; }
input[type=text]:focus, input[type=search]:focus { border: 2px solid var(--light-blue); outline: none; }
input[type=text]:disabled { background-color: #eee; }
/* search animation */
input[type=search] { width: 100px; transition: width 0.4s ease-in-out; }
input[type=search]:focus { width: 300px; }
input[type=search].error { border-color: red; }
input.subscribe {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #074264;
    color: white;
    width: 150px;
}
input.subscribe:hover, input.subscribe:focus { border: 0; border-bottom: 2px solid #0d5686; }
/* grid */
.grid-container { display: grid; grid-template-columns: 50% 50%; grid-column-gap: 1rem; }
.grid-minimal { display: grid; grid-template-columns: 50% 50%; grid-column-gap: 0; }
.grid-container.column { grid-column: 1; }
.grid-container.info-column { grid-template-columns: 25fr 75fr; }
.grid-container.four-column { grid-template-columns: 1fr 1fr 1fr; }
.grid-container.three-column { grid-template-columns: 30% 30% 30%; }
/* navigation */
nav.horizontal a.logo {
    background: url("/static/logo.svg") no-repeat center;
    width: 130px;
    height: 11px;
    margin-left: 15px;
    margin-top: 2px;
    margin-right: 20px;
    font-size: 1.2em;
}
/* responsive label, starts hidden */
nav.horizontal a label { display: none; }
nav.horizontal {
    overflow: hidden;
    position: relative;
    width: 100%;
    box-shadow: #eee 0 5px 10px;
    background-color: white;
    border-bottom: 1px solid #dedede;
}
nav.horizontal a {
    float: left;
    color: #444;
    padding: 25px 15px;
    text-decoration: none;
}
nav.horizontal a:hover { background-color: var(--nav-hover); color: var(--blue); font-weight: normal; }
nav.horizontal a.active { background-color: var(--nav-active); color: var(--blue); }
nav.horizontal a.active:hover { background-color: var(--nav-hover); }
nav.horizontal a.text-logo {
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 165px;
}
nav.horizontal a.logo:hover, nav.horizontal a.text-logo:hover { font-weight: normal; background-color: transparent; }
nav.horizontal a.pull-right { float: right; }
nav.horizontal .hamburger-menu { display: none; }
/* nav */
.nav-container {
    width: 100%;
    top: 0;
    bottom: 0;
    position: sticky;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: #eee 0 5px 10px;
    z-index: 100;
}
/* widgets for dashboard for example*/
.widget {
    border: 1px solid #eee;
    box-shadow: #eee 0 5px 10px;
    background-color: white;
    padding: 0 15px 15px;
    border-bottom: 1px solid #dedede;
    border-radius: 4px;
    margin-bottom: 10px;
}
.widget h4 { font-weight: bold; margin-right: 15px; }
/*
.widget.info {
    border: 1px solid rgba(179, 205, 225, 0.7);
    box-shadow: #eee 0 5px 10px;
    background-color: rgba(179, 205, 225, 0.4);
    padding: 0 15px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #664d03;
}
.widget.info h4 { color: #664d03; }
*/
.widget.info {
    border: 1px solid #9ec5fe;
    box-shadow: #eee 0 5px 10px;
    background-color: #cfe2ff;
    padding: 0 15px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #052c65;
}
/* When the screen is less than 800 pixels wide, hide all links, except for the first one */
@media screen and (max-width: 800px) {
    nav.horizontal a:not(:first-child) { display: none; }
    nav.horizontal a.hamburger-menu { float: right; display: block; }
}
/* The "responsive" class is added */
@media screen and (max-width: 800px) {
    nav.horizontal.responsive a.hamburger-menu { position: absolute; right: 0; top: 0; }
    nav.horizontal.responsive a { float: none; display: block; text-align: left; }
    nav.horizontal a label { display: inline; }
    .grid-container, .grid-container.four-column, .grid-container.info-column { grid-template-columns: none; }
}