/* ===========================
//          USTA CSS
//   -----------------------
//    New Start Mobile 2017
//         Eli Mellen
//    eli@newstartmobile.com
   ===========================

# Assumptions
   - Use with normalize.css

   ===========================

  == Universal Styles ==

  Colors */

:root {
    --black: #4c4c4c;
    --black-o: rgba(0, 0, 0, 0.5);
    --gray: #adadad;
    --grey: #adadad;
    --light-gray: #dcdcdc;
    --light-grey: #dcdcdc;
    --silver: #f9f9f9;
    --dark-red: #e7040f;
    --red: #ff4136;
    --light-red: #ff725c;
    --orange: #ff6300;
    --gold: #ffb700;
    --yellow: #ffde37;
    --light-yellow: #fbf1a9;
    --purple: #5e2ca5;
    --light-purple: #a463f2;
    --dark-pink: #d5008f;
    --hot-pink: #ff41b4;
    --pink: #ff80cc;
    --light-pink: #ffa3d7;
    --dark-green: #137752;
    --green: #19a974;
    --light-green: #9eebcf;
    --navy: #001b44;
    --dark-blue: #00449e;
    --blue: #357edd;
    --light-blue: #96ccff;
    --lightest-blue: #cdecff;
    --washed-blue: #f6fffe;
    --washed-green: #e8fdf5;
    --washed-yellow: #fffceb;
    --washed-red: #ffdfdf;
    --brand-green: #4ADF4A;
    --brand-blue: #1D82E1;
    --brand-gray: #3A3A3A;
    --brand-purple: #8022FF;
    --brand-orange: #F48831;
    --brand-yellow: #F5ED4D;
    --brand-dark-blue: #002B5C;
}

/*
//   OLD BRAND COLORS
//    --brand-green: rgb(49, 159, 55);
//    --brand-blue: rgb(27, 77, 142);
*/


/* Typography and Text */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'Segoe UI', 'lucida grande', 'helvetica neue', helvetica, 'Fira Sans', roboto, noto, 'Droid Sans', cantarell, oxygen, ubuntu, 'franklin gothic medium', 'century gothic', 'Liberation Sans', sans-serif;
}

html {
    font-size: 16px;
    background-color: var(--silver);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* Duplicated intentionally */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    margin-bottom: 0;
}

.h1, h1 {
    font-size: 3rem;
}

.h2, h2 {
    font-size: 2.25rem;
}

.h3, h3 {
    font-size: 1.5rem;
}

.h4, h4 {
    font-size: 1.25rem;
}

.h5, h5, p {
    font-size: 1rem;
}

.h6, h6 {
    font-size: .875rem;
}

p {
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: var(--brand-blue);
    opacity: 1;
    transition: opacity .15s ease-in;
    -webkit-backface-visibility: hidden;
}

a:hover,
a:focus {
    opacity: .5;
    transition: opacity .15s ease-in;
}

a:active {
    opacity: .8;
    transition: opacity .15s ease-out;
}

a:visited {
    color: var(--brand-blue);
}

/* Forms and Buttons */

form {
    padding-top: 1em;
    padding-bottom: 1em;
}

form p {
    color: var(--gray);
    margin-top: -10px;
}

label {
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: #666666;
}

#selector-multi > label {
    font-weight: 400;
    letter-spacing: 0;
}

input[type="text"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea {
    background-color: white;
    border-radius: 3px;
    border: 1px solid var(--light-gray);
    padding: 0.3em 0.5em 0.3em 0.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: calc(100% - 20px);
    margin-bottom: 12px;
}

select {
    /*noinspection CssUnknownTarget*/
    background: #fff url("images/icons/arrowdown.gif") no-repeat 98% 50%;
    border-radius: 3px;
    border: 1px solid var(--light-gray);
    padding: 0.3em 0.5em 0.3em 0.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: calc(100% - 2px);
    margin-bottom: 12px;
}

button,
input[type="submit"],
a.button {
    margin-top: 12px;
    border-radius: 3px;
    border: 1px solid var(--light-gray);
    padding: 0.3em 1em 0.3em 1em;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
}

a.button {
    color: black;
    background-color: var(--gray);
    text-align: center;
}

a.button:visited {
    color: black;
    background-color: var(--gray);
}

button.brand-button--blue,
input[type="submit"].brand-button--blue,
a.button.brand-button--blue {
    background-color: var(--brand-blue);
    color: white;
    -webkit-backface-visibility: hidden;
}

button.brand-button--green,
input[type="submit"].brand-button--green,
a.button.brand-button--green {
    background-color: var(--brand-green);
    color: white;
    -webkit-backface-visibility: hidden;
}

button.button--red,
input[type="submit"].button--red,
a.button.button--red {
    background-color: transparent;
    color: red;
    -webkit-backface-visibility: hidden;
    border: 1px solid transparent;
}

button.button--date-select {
    background-color: white;
    color: black;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--light-gray);
    text-align: left;
    width: 100%;
}

button.button--date-select:before {
    /*noinspection CssUnknownTarget*/
    content: url("images/icons/calendar.svg");
    vertical-align: middle;
    padding-right: 0.25em;
    margin-right: 0.25em;
    margin-left: -10px;
}

button,
input[type="submit"],
a.button {
    opacity: 1;
    transition: opacity .15s ease-in;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
a.button:hover,
a.button:focus {
    opacity: .5;
    transition: opacity .15s ease-in;
}

button:active,
input[type="submit"]:active,
a.button:active {
    opacity: .8;
    transition: opacity .15s ease-out;
}

button.button--centered,
input[type="submit"].button--centered,
a.button.button--centered {
    width: 75%;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 0.5em;
}

/* Button Links */

.button--link {
    background-color: transparent;
    border: none;
}

.button--link:hover,
.button--link--next:hover,
.button--link--back:hover,
.button--link--delete:hover,
.button--link--edit:hover,
.button--link--email:hover,
.button--link--transfer:hover,
.button--link--wrench:hover,
.button--link--add:hover,
.button--link--view:hover,
.button--link--exit:hover,
.button--image-delete:hover {
    cursor: pointer;
}

.button--link--next:after {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/cheveronRight-small-blue.svg');
    font-weight: lighter;
}

.button--link--excel:after {
    /*noinspection CssUnknownTarget*/
    content: url("images/icons/excel-white-small.png");
    padding-left: 0.5em;
    vertical-align: sub;
}

.button--link--back:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/cheveronLeft-small-blue.svg');
}

/* TODO: CONSIDER REMOVING DELETE IF IT ISN'T BEING USED */

.button--link--delete, .button--link--delete-alt {
    color: var(--red);
}

.button--link--delete:after {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/delete-small-red.svg');
    padding-left: 3px;
    vertical-align: middle;
}

.button--link--delete-alt:after {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/close-gray.svg');
    padding-left: 3px;
    vertical-align: middle;
}

.button--link--edit:after {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/edit-small-blue.svg');
    padding-left: 3px;
    vertical-align: middle;
}

.button--link--exit:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/exit.svg');
    padding-right: 3px;
    vertical-align: middle;
}

.button--link--add {
    color: var(--green);
}

.button--link--add:after {
    content: "+";
    font-weight: bold;
    font-size: 1.25em;
    color: var(--green);
    padding-left: 3px;
    vertical-align: baseline;
}

.button--link--close {
    color: var(--gray);
}

.button--link--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.button--link--settings {
    float: right;
}

.button--link--settings:after {
    content: "⋮";
    padding-left: 3px;
    font-family: monospace;
    font-size: 2.75em;
    font-weight: bold;
    vertical-align: middle;
}

.button--link--settings-small:after {
    content: "⋮";
    padding-left: 6px;
    font-family: monospace;
    font-size: 2em;
    font-weight: bold;
    vertical-align: middle;
}

.button--link--manual {
    float: right;
    padding: 0 18px 0 12px;
    margin-top: -1px;
}

.button--link--manual:after {
    content: "+";
    padding: 0 6px 0 6px;
    font-family: monospace;
    font-size: 2.75em;
    font-weight: bold;
    vertical-align: middle;
}

.button--link--report {
    float: right;
    padding: 0 18px 0 12px;
    margin-top: -1px;
}

.button--link--report:after {
    content: "◶";
    padding: 0 6px 0 6px;
    font-family: monospace;
    font-size: 2.75em;
    font-weight: bold;
    vertical-align: middle;
}

.button--link--transfer {
    color: var(--blue);
}

.button--link--transfer:after {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/swap-horiz.svg');
    padding-left: 3px;
    vertical-align: middle;
}

.button--link--wrench {
    color: #F6A623;
}

.button--link--wrench:after {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/wrench.svg');
    padding-left: 5px;
    vertical-align: middle;
}

.button--link--email {
    color: var(--blue);
}

.button--link--email:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/mail.svg');
    padding-right: 3px;
    vertical-align: middle;
}

.button--link--view {
    color: var(--blue);
}

.button--link--view:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/eye.svg');
    padding-right: 3px;
    vertical-align: middle;
}

@media screen and (max-width: 800px) {
    .button--link--settings {
        float: right;
        padding: 0;
        margin-top: 0;
    }
    .button--link--settings:after {
        font-size: 2em;
    }

    .button--link--manual {
        float: right;
        padding: 0;
    }

    .button--link--manual:after {
        border: none;
        padding: 0 3px 0 0;
        font-family: monospace;
        font-size: 2em;
        font-weight: bold;
        vertical-align: middle;
    }
}

#empty {
    color: var(--gray);
    text-align: center;
}

.col > button {
    vertical-align: baseline;
}


/* == Utilities == */

.wrap {
    max-width: 978px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75em;
}

.wrap--wider {
    max-width: 1128px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75em;
}

.wrap--widerer {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75em 1em;
}

.wrap--responsive {
    margin-left: auto;
    margin-right: auto;
    padding: 0.75em 3.25em;
}

@media screen and (max-width: 800px) {
    .wrap--responsive {
        margin-left: auto;
        margin-right: auto;
        padding: 0.75em;
    }
}

.cf:before,
.clear-fix:before,
.cf:after,
.clear-fix:after {
    content: " ";
    display: table;
}

.cf:after,
.clear-fix:after {
    clear: both;
}

.cf,
.clear-fix {
    *zoom: 1;
}

.text-align-center, .t-a-c {
    text-align: center;
}

.text-align-left, .t-a-l {
    text-align: left;
}

.text-align-right, .t-a-r {
    text-align: right;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.fl,
.float-left {
    float: left;
    _display: inline;
}

.fr,
.float-right {
    float: right;
    _display: inline;
}

.fn,
.float-none {
    float: none;
}

.m0 {
    margin: 0;
}

/* == Grid and Grid Elements == */

.row {
    overflow: hidden;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.row--neutral {
    margin: 0;
    overflow: hidden;
}

.row--tight {
    margin-top: -17px;
    margin-bottom: -17px;
}

.col,
.col-right,
.col-center,
.mobile-col,
.px-gutter {
    box-sizing: border-box;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.mobile-col {
    float: left;
}

.mobile-col-1 {
    width: 8.33333%;
}

.mobile-col-2 {
    width: 16.66667%;
}

.mobile-col-3 {
    width: 25%;
}

.mobile-col-4 {
    width: 33.33333%;
}

.mobile-col-5 {
    width: 41.66667%;
}

.mobile-col-6 {
    width: 50%;
}

.mobile-col-7 {
    width: 58.33333%;
}

.mobile-col-8 {
    width: 66.66667%;
}

.mobile-col-9 {
    width: 75%;
}

.mobile-col-10 {
    width: 83.33333%;
}

.mobile-col-11 {
    width: 91.66667%;
}

.hide-on-mobile, .h-o-m, .h-o-m-il {
    display: none;
}

.show-on-mobile, .s-o-m {
    display: block;
}

.inline-on-mobile, .i-o-m {
    display: inline;
}

.center-on-mobile, .c-o-m {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.grid-item {
    padding: 0.25em;
    width: 100%;
}

.grid-item--image-grid {
    width: 100%;
    max-width: 100px;
    height: 100px;
    overflow: hidden;
}

.h-o-m--wider {
    display: none;
}

.s-o-m--wider {
    display: block;
}

.col-6--wb {
    width: 100%;
}

@media screen and (min-width: 1300px) {
    .h-o-m--wider {
        display: block;
    }
    .s-o-m--wider {
        display: none;
    }
    .col-6--wb {
        width: 50%;
    }
}

@media screen and (min-width: 1000px) {

}

@media screen and (min-width: 800px) {
    .col {
        float: left;
    }
    .col-right {
        float: right;
    }
    .col-center {
        margin-right: auto;
        margin-left: auto;
    }
    .col-1 {
        width: 8.33333%;
    }
    .col-2 {
        width: 16.66667%;
    }
    .col-3 {
        width: 25%;
    }
    .col-4 {
        width: 33.33333%;
    }
    .col-5 {
        width: 41.66667%;
    }
    .col-6 {
        width: 50%;
    }
    .col-7 {
        width: 58.33333%;
    }
    .col-8 {
        width: 66.66667%;
    }
    .col-9 {
        width: 75%;
    }
    .col-10 {
        width: 83.33333%;
    }
    .col-11 {
        width: 91.66667%;
    }
    .col-12 {
        width: 100%;
    }
    .hide-on-mobile, .h-o-m {
        display: block;
    }
    .h-o-m-il {
        display: inline;
    }
    .show-on-mobile, .s-o-m, .inline-on-mobile, .i-o-m  {
        display: none;
    }
    .center-on-mobile, .c-o-m {
        text-align: start;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}

@media screen and (min-width: 760px) {
    .grid {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-width: fill-available;
        -moz-column-width: fill-available;
        column-width: fill-available;
    }

    .grid-item, .grid-item--image-grid {
        display: inline-block;
    }

     .grid--more {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
        -webkit-column-width: fill-available;
        -moz-column-width: fill-available;
        column-width: fill-available;
    }
}


/* == Components == */


/* Alerts and Cards */

.alert-red {
    background-color: var(--light-red);
    color: white;
    border-radius: 3px;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0.5em auto 2px;
    display: block;
}

.alert-green {
    background-color: var(--green);
    color: white;
    border-radius: 3px;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0.5em auto 2px;
    display: block;
}

.alert-yellow {
    background-color: var(--yellow);
    color: black;
    border-radius: 3px;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0.5em auto 2px;
    display: block;
}

.alert-blue {
    background-color: var(--light-blue);
    color: white;
    border-radius: 3px;
    padding: 0.5em 1em 0.5em 1em;
    margin: 0.5em auto 2px;
    display: block;
}

.card {
    background-color: white;
    border-radius: 3px;
    border: 1px solid var(--silver);
    padding: 1.25em;
    margin: 0.25em auto 0.25em auto;
    display: block;
    box-shadow: 2px 2px 3px 0 rgba( 0, 0, 0, 0.1 );
}

.card--flat {
    background-color: white;
    border-radius: 3px;
    border: 1px solid var(--silver);
    padding: 1.25em;
    margin: 0.25em auto 0.25em auto;
    display: block;
    box-shadow: 0;
}

.card--ghost {
    /*background-color: var(--silver);*/
    border-radius: 3px;
    border: 2px dashed var(--gray);
}

.note--thumb {
    width: 100%; 
    max-width: 7em;
    background: lightgray;
    height: auto; 
    margin-left: auto; 
    margin-right: auto; 
    display: block;
}

.note--thumb-edit {
    width: 100%; 
    max-width: 70px;
    height: auto;
    background-size: cover;
    background: lightgray no-repeat center center;
    overflow: hidden;
    margin-left: auto; 
    margin-right: auto; 
    display: block;
}
@media screen and (max-width: 800px) {
    .note--thumb, .note--thumb-edit {
        width: 100%; 
    }
    .grid-item--image-grid {
        max-width: 100%;
        height: auto;
    }
}

#panels-container {
    height: 100%;
}

/* Heros */

.hero {
    color: white;
    padding: 0;
    background-clip: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
}

.hero--readable {
    padding: 7em 0 0 0;
    background-color: rgba(0,0,0,0.025);
    height: auto;
    bottom: 0;
}

.hero h1,
.hero h2,
.hero h3,
.hero h4 {
    font-weight: 400;
    margin: 0.12em 0 0.12em 0;
}

.hero h1 {
    font-size: 2.75rem;
}

.hero a {
    color: white;
    cursor: pointer;
}

.scrolling-container {
    height: 100%;
    min-height: 91.5vh;
    overflow: auto;
}

@media screen and (max-width: 800px) {
    .hero {
        padding: 0;
    }

    .hero--readable {
        padding: 3em 0 2em 0;
        min-height: 100%;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero > .h4 {
        font-size: 0.75rem;
    }
    .scrolling-container {
        height: 100%;
        min-height: 100%;
        overflow: auto;
    }
}


/* Date and Location Selection */

.date-picker, .location-picker {
    border-bottom: 1px solid white;
    padding: 0 16px 0 16px;
}

.date-picker:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/calendar.svg');
    vertical-align: baseline;
    padding-right: 0.25em;
    margin-right: 0.25em;
    border-right: 1px solid white;
}

.location-picker:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/pin.svg');
    vertical-align: baseline;
    padding-right: 0.25em;
    margin-right: 0.25em;
    border-right: 1px solid white;
}

.location-picker--small:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/pin-small.svg');
    vertical-align: baseline;
    padding-right: 0.5em;
    margin-right: 0.5em;
    border-right: 1px solid white;
}

.location-picker--list {
    font-size: 1.75em;
    line-height: 1.4em;
}

@media screen and (max-width: 800px) {
    .date-picker, .location-picker {
        padding: 0;
        margin: 0;
    }
    .date-picker:before, .location-picker:before {
        padding-right: 4px;
        margin-right: 4px;
    }
}

/* Header and Nav */

.logo--header {
    max-width: 7em;
    vertical-align: middle;
}

.nav--universal {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1.2em 3.5em 1.2em 3.5em;
    background-color: var(--brand-dark-blue);
    border-bottom: 1px solid;
    border-color: var(--silver);
}

.nav--universal nav {
    display: block;
    vertical-align: middle;
}

.nav--universal .nav-link--universal {
    text-decoration: none;
    color: white;
    text-align: right;
    padding: 0 1em 0 1em;
    vertical-align: middle;
}

.nav--sub, .nav--toolbar {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 3.5em 0 3.5em;
    color: white;
    margin: 0;
    overflow: hidden;
}

.nav--sub--blue {
    background-color: var(--brand-dark-blue);
}

.nav--sub--white {
    background-color: white;
}

.nav--sub--green {
    background-color: var(--green);
}

.nav--toolbar {
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

.nav--toolbar-item {
    width: 33%;
}

.nav--toolbar-item p a {
    color: white;
}

.nav--sub ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
}

.nav--sub ul li {
    display: inline-block;
    color: white;
    padding: 0 15px 0 15px;
}

.nav--sub--blue ul li a.selected {
    padding-bottom: 11px;
    border-bottom: 5px solid var(--green);
}

.nav--sub--green ul li a.selected {
    padding-bottom: 11px;
    border-bottom: 5px solid white;
}

.nav--sub--trans ul li a.selected {
    padding-bottom: 11px;
    color: var(--brand-gray);
    border-bottom: 5px solid var(--brand-gray);
}

.nav--sub ul li a {
    color: white;
}

.nav--sub--trans ul li a {
    color: var(--gray);
}

.nav--sub p a {
    color: white;
    padding-right: 7px;
    padding-left: 7px;
}


.mini-picker:hover {
    cursor: pointer;
}

.mini-picker {
    border: 1px solid white;
    color: white;
    padding: 3px 5px 3px 5px;
    margin-right: 12px;
}

.popup {
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 1em;
}

@media screen and (max-width: 800px) {

    .nav--sub {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        color: white;
        margin: 0;
        overflow: hidden;
    }

    .nav--toolbar {
        width: 100%;
        padding: 0 1.5em 0 1.5em;
    }

    .nav--sub ul {
        list-style: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1em;
        text-indent: -1em;
        text-align: center;
    }

    .nav--sub ul li {
        display: block;
        color: white;
        padding: 7px 0;
        text-align: center;
    }

    .nav--sub ul li.no-mobile {
        display: inline-block;
        padding-top: 14px;
        margin-left: 18px;
        margin-right: 18px;
    }

    .nav--sub--blue ul li.no-mobile a.selected {
        padding-bottom: 17px;
        border-bottom: 8px solid var(--green);
    }

    .nav--sub--green ul li a.selected {
        padding-bottom: 17px;
        border-bottom: 8px solid white;
    }

    .mini-picker {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}


/* ================= */

.row--nav {
    margin: -16px;
    overflow: hidden;
}

.nav--secondary {
    padding: 1em;
    background-color: var(--brand-dark-blue);
    color: white;
}

.nav--secondary-inner {
    margin: 0 3em 0 3em;
}

.nav--secoundary-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.nav--secondary a {
    color: white;
    margin-right: 2em;
    padding-bottom: 0.2em; /*0.68em;*/
    border-bottom: 5px solid var(--brand-dark-blue);
}

.nav--secondary a.selected {
    padding-bottom: 8px;
    border-bottom: 5px solid var(--green);
}

.nav--secondary-special--hover:hover {
    cursor: pointer;
}

.nav--secondary-special--no-hover:hover {
    opacity: 1;
}

.nav--ternary {
    padding-left: 1.75em;
    font-size: 100%;
}

.nav--ternary.selected {
    font-weight: bold;
    border-left: 4px solid var(--brand-orange);
    padding-left: 1.5em;
    color: #4c4c4c;
}

@media screen and (max-width: 800px) {

    .logo--header {
        padding: 0.5em 0em 0.25em 1em;
        display: table-cell;
        vertical-align: middle;
        width: 2em;
        height: 2em;
    }

    .nav--burger {
        display: table-cell;
        text-decoration: none;
        text-align: right;
        padding: 0.5em 1em 0.25em 0.75em;
        width: 3em;
        vertical-align: middle;
    }

    .nav--burger:after {
        /*noinspection CssUnknownTarget*/
        content: url('images/icons/burger.svg');
    }

    .nav--burger:hover {
        cursor: pointer;
        opacity: 1;
        transition: none;
    }

    .nav--universal {
        display: table;
        width: 100%;
        box-sizing: border-box;
        padding: 0.25em;
    }

    /*
    // Float overrides in .nav elements
    */

    .nav--universal {
        position: fixed;
        z-index: 99999;
    }

    .nav--universal > .fl,
    .nav--universal > .float-left {
        float: none;
        _display: block;
    }

    .nav--universal > .fr,
    .nav--universal > .float-right {
        float: none;
        _display: block;
    }

    .nav--universal > .fn,
    .nav--universal > .float-none {
        float: none;
    }
}

@media screen and (max-width: 740px) {
    .nav--secondary {
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
        align-content: center;
    }

    .nav--secondary a {
        display: block;
        text-align: center;
        padding: 1.25em;
        margin: 0;
        border-bottom: none;
    }

    .nav--secondary a:first-child {
        margin: 0;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tabs */

div#tab-bar.text-align-right.tab-bar--vertical > div > div#tab-bar > nav.tabs.m0 > ul > li.tab {
    margin-bottom: 1.25em;
}

div#tab-bar.text-align-right.tab-bar--vertical > div > div#tab-bar > nav.tabs.m0 {
    border: 0;
}

.tabs {
    width: 100%;
    font-size: 1.05em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 2px;
    margin-bottom: 1.25em;
}

.tabs > ul {
    padding: 0;
    margin: 0;
}

.tabs > ul > li {
    list-style: none;
    display: inline-block;
}

.tabs > ul > li {
    padding: 0.5em 0.5em 0 0.5em;
}

.tab {
    cursor: pointer;
    font-weight: bold;
}

.tabs > ul > li.tab {
    min-width: 15%;
}

a.tab {
    color: var(--gray);
}

a.tab--selected {
    color: var(--brand-blue);
    border-bottom: 2px solid var(--brand-blue);
}

@media screen and (max-width: 800px) {
    .tabs > ul > li {
        list-style: none;
        display: block;
        text-align: center;
        padding-bottom: 0.5em;
    }
}

/* Workboard Items */

p.work-item {
    margin: 0;
    vertical-align: middle;
}

.work-item--name {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input.work-item--note {
    max-width: 50%;
}

input.work-item--hours {
    width: 2em;
}

/* ======================== */

@media screen and (max-width: 1300px) {
    input.work-item--note {
        max-width: 75%;
    }
}

@media screen and (max-width: 1205px) {
    input.work-item--note {
        max-width: 73%;
    }
}

@media screen and (max-width: 1125px) {
    input.work-item--note {
        max-width: 67%;
    }
}

@media screen and (max-width: 937px) {
    input.work-item--note {
        max-width: 63%;
    }
}

@media screen and (max-width: 842px) {
    input.work-item--note {
        max-width: 58%;
    }
}

@media screen and (max-width: 756px) {
    input.work-item--note {
        max-width: 53%;
    }
}

@media screen and (max-width: 685px) {
    input.work-item--note {
        max-width: 50%;
    }
}

@media screen and (max-width: 647px) {
    input.work-item--note {
        max-width: 45%;
    }
}

@media screen and (max-width: 598px) {
    input.work-item--note {
        max-width: 100%;
    }
}


/* =============================== */

@media screen and (max-width: 2000px) {

    /*.work-item {
        height: auto;
    }

    input.work-item--note {
        width: 100%;
        display: block;
        vertical-align: middle;
    }*/

    input.work-item--hours {
        width: 3em;
    }
}

/* Scrolling Container */

.scrolling-container {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    overflow: scroll;
    height: 800px;
}

.scrolling-container::-webkit-scrollbar {
    width: 0 !important
}

/* Breadcrumbs */

ul > li.breadcrumbs {
    list-style: none;
}

li.breadcrumbs > a:after {
    content: " \00BB";
    color: black;
}

li.breadcrumbs > a:last-of-type:after {
    content: "";
}

/* Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 100%;
}

thead th {
    color: var(--gray);
    background-color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

th {
    font-weight: normal;
}

tr:nth-child(odd) {
    background-color: var(--silver);
}


td, th {
    padding: 0.5em;
}

thead > tr {
    font-size: 85%;
}

.table-row--roomier {
    height: 3em;
}

@media screen and (max-width: 800px) {

    .table--responsive > tr:nth-child(odd) {
        background-color: white;
    }

    table.table--responsive {
        border: 0;
    }

    table.table--responsive > thead {
        display: none;
    }

    table.table--responsive tr {
        /* TODO: WTF is going on here? */
        margin-bottom: 0.12em;
        display: block;
        margin-bottom: 1.5em;
    }

    table.table--responsive td {
        display: block;
        text-align: right;
        border-bottom: 1px solid var(--silver);
    }

    table.table--responsive td:before {
        content: attr(data-label);
        float: left;
        font-weight: normal;
        color: var(--gray);
    }

    .table--threshold-extreme {
        border-left: 3px solid var(--red);
    }

    .table--threshold-warning {
        border-left: 3px solid var(--gold);
    }

    .table--threshold-normal {
        border-left: 3px solid var(--green);
    }

    .table-row--roomier {
        height: auto;
    }


}

/* == Themes and Effects == */

.stripes:hover {
    background-color: var(--silver) !important;
}

.stripes--list {
    border-bottom: 1px solid var(--silver);
}

.stripes--panel {
    border-bottom: 3px solid var(--silver);
}

.no-stripes {
    background-color: transparent !important;
}

.list--label {
    color: var(--gray);
}

.link--card, .link--card:visited, .link--card:hover {
    color: inherit;
}

.panel--provider {
    color: var(--gray);
}

.panel--title {
    margin: 0.35em auto;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #cecece;
    font-weight: bold;
    /* border-bottom: 1px solid var(--gray); */
}

.panel--title--workboard {
    letter-spacing: 1px;
    color: var(--black);
    font-weight: bold;
}

.card--clickable {
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
}

.card--clickable:active {
    transform: scale(.96);
    box-shadow: none;
}

.card--clickable:hover {
    cursor: pointer;
}

.card--flat {
    background-color: #ececec;
}

.card--flat-tall {
    height: 94vh;
}

/* Misc. Icons */

/*
// TODO: consider removing arrow icons since they aren't used anywhere.
*/

.arrow--down:before,
.arrow--up:before,
.arrow--left:before,
.arrow--right:before {
    vertical-align: middle;
}

.arrow--down:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/triangleDown.svg');
}

.arrow--up:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/triangleUp.svg');
}

.arrow--right:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/triangleRight.svg');
}

.arrow--left:before {
    /*noinspection CssUnknownTarget*/
    content: url('images/icons/triangleLeft.svg');
}

/* Footer */

footer {
    width: 100%;
    margin: 0;
    text-align: center;
    color: var(--gray);
}

footer p {
    font-size: 0.85em;
}

.only-print {
    display: none;
}

canvas {
    width: 100%;
    height: auto;
}

#chart-canvas-pie {
    vertical-align: middle;
}