:root {
    --one-mile-club: #dbda34;
    --one-mile-club-text: #000000;

    --two-mile-club: #db981d;
    --two-mile-club-text: #000000;

    --three-mile-club: #349f30;
    --three-mile-club-text: #dbdbdb;

    --four-mile-club: #587cdb;
    --four-mile-club-text: #dbdbdb;

    --five-mile-club: #db4136;
    --five-mile-club-text: #dbdbdb;

    --six-mile-club: #6b1c0e;
    --six-mile-club-text: #dbdbdb;

    --color-primary: #ff0000;


    /* bootstrap colors */
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --bootstrap-primary: #007bff;
    --primary: #ff0000;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}
body {
    border-left: 5px solid var(--dark);
    border-right: 5px solid var(--dark);
}

.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.top {
    vertical-align: top;
    align-content: space-between;
    align-items: flex-end;
}

.bold,
.text-bold {
    font-weight: bold;
}

.text-red { color: var(--red); }
.text-blue { color: var(--blue); }

.nowrap {
    white-space: nowrap;
}

.pre {
    white-space: pre;
}

/* logo */
a.navbar-brand {
    padding-top: 2px;
}

/* navigation tabs */
ul.navbar-nav {
    height: 35px;
}

li.nav-item {
}

li.nav-item:hover {
}

.bg-dark a.nav-link {
    height: 30px;
    padding: 5px 10px;
    color: #b4b400;
    color: silver;

    /* border-bottom: 3px solid rgba(255, 255, 255, 0); */
}

.bg-dark .nav-tabs .nav-link:focus,
.bg-dark .nav-tabs .nav-link:hover,
.bg-dark a.nav-link:focus,
.bg-dark a.nav-link:hover {
    border-color: rgba(255, 255, 255, 0);
    /* border-bottom: 3px solid #c7303d; */
    font-weight: bold;
}

.dropdown-item:hover {
    background: var(--dark);
    color: var(--light);
}
.dropdown-divider.font-bold {
    padding-left: 8px;
    font-weight: bold;
}
.dropdown-item.active {
    background: var(--dark);
    color: var(--light);
    font-weight: normal;
}

a.nav-link.active {
    /* border-bottom: 3px solid #c7303d; */
}

a.disabled.nav-link {
    color: #b4b400;
    color: silver;
}


span.navbar-text {
    padding-top: 3px;
    padding-bottom: 4px;
}

.page-crumbs-container {

}

.page-content-container {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width:100%;
    display:flex;
    flex-flow:column;
}

.page-content-footer {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    bottom: 0;
}


.btn {
    padding-left: 3px;
    padding-right: 3px;
}

.login-btn {
    /* login button */
    border: 1px solid darkred;
}

.login-btn {
    /* login button */
    border: 1px solid darkred;
}

iframe.chart {
    height: 300px;
    width: 500px;
}

svg-icon svg {
    max-width: 300px;
    max-height: 300px;
}

img.glyph-icon-sm,
svg-icon.glyph-icon-sm svg {
    width:16px;
    height:16px;
}

img.glyph-icon-md,
svg-icon.glyph-icon-md svg {
    width:32px;
    height:32px;
}

img.glyph-icon-lg,
svg-icon.glyph-icon-lg svg {
    width:64px;
    height:64px;
}

.fill-green {
    background: green;
    fill: green;
    color: green;
}
.fill-blue { color: blue; }
.fill-red { color: red; }
.fill-orange { color: rebeccapurple; }

.chart-container {
    /* position: relative; */
    /* overflow: auto; */
    margin:  6px;
    padding:  6px;
    min-width: 280px;
    max-width: 1400px;
    /* height: auto; */
    min-height: 280px;
    position: relative;
}

.chart-container-vertical-800 {
    padding:  6px;
    min-width: 280px;
    /* max-width: 820px; */
    max-height: 800px;
    /* height: auto; */
}
.chart-container-vertical-600 {
    padding:  6px;
    min-width: 280px;
    /* max-width: 820px; */
    max-height: 600px;
    /* height: auto; */
    height: 100vh;
}
.chart-container-vertical-400 {
    padding:  6px;
    min-width: 280px;
    /* max-width: 820px; */
    max-height: 400px;
    /* height: auto; */
}

.chart-container-horizontal {
    padding:  6px;
    min-height: 250px;
    max-width: 820px;
}

.chart-flight-classifications {
    padding:  6px;
    min-height: 100px;
    max-height: 150px;
    max-width: 820px;
    min-width: 400px;
}

.chart-container-vertical-sm {
    padding:  6px;
    min-width: 280px;
    max-width: 420px;
    height: auto;
}

.btn {
    padding-left: 3px;
    padding-right: 3px;
    border-left: 3px;
    border-right: 3px;
}

button.active {
    border: 2px solid #0f6674;
}




/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.chart-selector.glyph-icon-sm {
    fill: red;
}

.chart-container-vertical {
    padding-top: 0px;
    margin-top: 0px;
}
.navbar.nav-pills.chart-selector {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.light-blue {
    border-radius: 8pt 8pt 0pt 0pt;
    background: rgba(51, 143, 188, 0.25);
    border: 3px solid #ffffff;
    border-bottom: 0px #ffffff;
    padding-left: 7px;
    padding-bottom: 3px;
}

.navbar.nav-pills.chart-selector button.btn {
    margin: 5px 5px 0px 0px;
    background: rgba(51, 143, 188, 0.25);
    width: 120px;
    font-size: 0.9em;
    border-radius: 8pt 8pt 0pt 0pt;
    border: 3px solid #ffffff;
    border-bottom: 0px #ffffff;
}


.navbar.nav-pills.chart-selector button.btn.active {
    background: #338fbc;
    color: white;
    width: 120px;
    border: 3px solid #ffffff;
    border-bottom: 0px #ffffff;
}

.help {
    max-width: 40px;
    text-align: center;
    alignment: center;
    align-content: center;
}

.border {
    border: 1px solid #000000;
}

.tiny-font {
    font-size: 0.6em;
}

.small-font {
    font-size: 0.8em;
}

.large-font {
    font-size: 1.1em;
}

.huge-font {
    font-size: 1.5em;
}

.small-caps {
    font-variant-caps: all-small-caps;
}

.badge-mile-club {
    font-size: +0.7em;
    font-variant-caps: all-small-caps;
}

.badge-mile-club:hover,
.badge-mile-club.active {
    background: white;
    color: black;
}

.badge-1mile-club {
    background: var(--one-mile-club);
    color: var(--one-mile-club-text);
}

.badge-2mile-club {
    background: var(--two-mile-club);
    color: var(--two-mile-club-text);
}

.badge-3mile-club {
    background: var(--three-mile-club);
    color: var(--three-mile-club-text);
}

.badge-4mile-club {
    background: var(--four-mile-club);
    color: var(--four-mile-club-text);
}

.badge-5mile-club {
    background: var(--five-mile-club);
    color: var(--five-mile-club-text);
}

.badge-6mile-club {
    background: var(--six-mile-club);
    color: var(--six-mile-club-text);
}

/* no 7 or 8 mile flights yet.. */
.badge-7mile-club {
    background: rgba(0, 0, 0, 1.0);
    color: white;
}

.badge-8mile-club {
    background: rgba(0, 0, 0, 1.0);
    color: white;
}


.photo {
    border-radius: 5px;
    padding-bottom: 15px;
    display: block;
}
.photo label {
    border-radius: 5px;
    display: block;
}
.photo div {
    display: block;
}
.photo img {
    padding-top: 15px;
    border-radius: 5px;
    display: block;
}


/* admin menu tabs */
.nav-admin {
    /*
    background: var(--dark);
    color: var(--light);
     */
}
.nav-admin .nav-item:hover,
.nav-admin .nav-item.active {
    /*
    border-bottom: 5px solid #78a0e9;
    background: var(--dark);
    color: var(--light);
     */
}

/* user menu tabs */
.nav-user {
}
.nav-user .nav-item:hover,
.nav-user .nav-item.active {
    border-bottom: 5px solid #78a0e9;
}

@media only screen and (max-width: 1200px) {
    .space-saver {
        display: none;
    }
}