/*****************************************************
    CREATED BY:     Elizabeth Welch
    DATE:           2019-02-12
    DESCRIPTION:    For use with iPass2
******************************************************/

@font-face {
    font-family: 'FuturaTLight';
    src: url('../Content/font/FuturaPTLight.otf');
}

@font-face {
    font-family: 'FuturaTMedium';
    src: url('../Content/font/FuturaPTMedium.otf');
}

body {
    font-family: FuturaTLight, 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
}

h1 {
    font-family: FuturaTMedium;
}

.page-header {
    padding: 7px;
    margin: 20px 0 20px;
    background-color: #eeeeee;
    border-radius: 5px;
    font-size: 15px;
    text-transform:uppercase;
}

.popup a {
    color: rgba(255, 255,255, 0.75);
    text-decoration: none;
}
.popup a:hover {
    color: rgba(255, 255,255, 1);
}

#brandImageDiv {
    float: left;
}

/* This is where bootstraps "brand" in the nav-bar sits.
            In your case it might not have anything in it, though if you followed
            what we did with ours it would say "Site Management" or something along those lines. */
#appNameDiv {
    float: left;
    font-family: FuturaTMedium, Arial, sans-serif;
    font-variant: small-caps;
}

/* this handles the entire black area on your current nav bar */
.headerHeight {
    float: right;
}

/* .sidebar is the "skidata/administration/sign out" nav. */
.sidebar-nav a {
    color: white;
}

.sidebar ul li:hover {
    background: rgba(100, 100, 100, 0.5);
}

.sidebar ul li a.active {
    background: rgba(100, 100, 100, 0.5);
}

.sidebar ul li {
    border: none;
}

#appNameDiv a {
    color: #e7e7e7;
}

    #appNameDiv a:hover {
        color: #8DC63F;
    }

.navbar-default {
    background: black;
}

    .navbar-default .navbar-nav > li > a {
        color: white;
    }

        .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a.active {
            color: white;
            background: rgba(100, 100, 100, 0.5);
        }

    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
        color: white;
        background: rgba(100, 100, 100, 0.5);
    }

    .navbar-default .navbar-nav > li > a:focus {
        color: white;
    }

.nav.dropdown-menu a:hover {
    color: #00645D;
}

/*.navbar-default > .navbar-collapse {
    background: linear-gradient(60deg, #00645D, #8DC63F);
}*/

.nav::-webkit-scrollbar, .nav-second-level::-webkit-scrollbar {
    width: 10px;
    background: #e7e7e7;
}

.nav::-webkit-scrollbar-thumb, .nav-second-level::-webkit-scrollbar-thumb {
    background: #00645D;
}

.panel-heading {
    background: linear-gradient(60deg,#00645D,#8DC63f);
}

.panel-default > .panel-heading {
    color: white;
    font-family: FuturaTMedium;
}

.panel, .panel-default > .panel-heading, .form-control, .btn-default {
    border-color: #00645D;
}

.btn-primary {
    background: #00645D;
    border: 1px solid #00645D;
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
        background: #8DC63f;
        border: 1px solid #8DC63f;
    }

#searchpanel {
    margin-bottom: 100px;
}

/* PAGE STYLES */

.mainPageContent {
    margin-bottom: 100px;
}

/* PAGINATION BUTTONS */
.pagination > .active > a {
    background: #00645D;
    border: #00645D 1px solid;
}

    .pagination > .active > a:hover {
        background: #008e85;
        border: #008e85 1px solid;
    }

.pagination > li > a {
    color: #008e85;
    border: #008e85 1px solid;
}

    .pagination > li > a:hover {
        color: white;
        background: #00645D;
        border: #008e85 1px solid;
    }

.pagination > .disabled > a, .pagination > .disabled > a:hover {
    color: #00645D;
    border: #00645D 1px solid;
}

/* ACCOUNT DETAILS */
.panel-details-nav > .nav-tabs {
    border-bottom: 1px solid #00645D;
    text-align: center;
}

.panel-details-nav > .nav-tabs > li > a {
    border: 1px solid #00645D;
    border-bottom: 1px solid transparent;
    color: black;
    min-width: 100px;
}

.panel-details-nav > .nav-tabs > li > a:hover {
    background: linear-gradient(60deg,#00645D,#8DC63f);
    color: white;
    font-family: FuturaTMedium;
}

.panel-details-nav > .nav-tabs > li.active > a {
     background: linear-gradient(60deg,#00645D,#8DC63f);
     color: white;
     font-family: FuturaTMedium;
     border: 1px solid #00645D;
}

.panel-details {
    border: 1px solid #00645D;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

/* MODALS */

.modal-header {
    background: linear-gradient(60deg, #00645D, #8DC63F);
    color: white;
    font-family: FuturaTMedium;
    border-bottom: 1px solid #00645D;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.modal-content {
    border: 1px solid #00645D;
}

#btnGroupApplyPayment {
    margin: 0px auto 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* INVOICE */
.invoice-template {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.invoice-header {
    font-size: 20px;
    background: black;
    color: white;
    padding: 3px;
}

.invoice-brief-table {
    font-size: smaller;
    width:100%;
}

.invoice-detail-table thead {
    background: #eeeeee;
    border:1px solid black;
}

.invoice-detail-table table, .invoice-detail-table td, .invoice-detail-table th {
    padding: 7px;
}

.invoice-detail-table tbody {
    border: 1px solid black;
}

.invoice-disclaimer {
    border-top: 1px solid black;
    border-right: 1px solid black;
    font-size: smaller;
}

.invoice-card-count {
    border-right: 1px solid black;
}

.invoice-sub-totals {
    border: 1px solid black;
}

.invoice-currency-entry {
    text-align:right;
}

.table-hover tr:hover {
    background-color: #71d1eb !important;
}

.selected-row {
    background-color: #00645D;
}

@font-face {
    font-family: 'AvenirProBold';
    src: url('fonts/Avenir.woff2') format('woff2'), url('Content/font/Avenir/Avenir Regular/Avenir Next LT Pro Bold.woff') format('woff');
    /* Add other formats if necessary */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirProDemi';
    src: url('fonts/Avenir.woff2') format('woff2'), url('Content/font/Avenir/Avenir Light/Avenir Next LT Pro Demi.woff') format('woff');
    /* Add other formats if necessary */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AvenirProMedium';
    src: url('fonts/Avenir.woff2') format('woff2'), url('Content/font/Avenir/Avenir Heavy/Avenir Next LT Pro Regular.woff') format('woff');
    /* Add other formats if necessary */
    font-weight: normal;
    font-style: normal;
}
/* at smaller screen widths, our nav bar changes so there is no longer a side-bar.
        This handles that change's style, however it isn't complete yet.*/
@media only screen and (max-width: 768px) {
    .headerHeight {
        height: 50px !important;
    }

    #appNameDiv {
        float: left;
    }

    #brandImageLight {
        height: 50px;
    }

    .navbar-brand {
        font-size: 1.5em;
    }
}

/* These are the styles for a regular "large" width screen. (so not mobile) */
@media only screen and (min-width: 768px) {
    /* wraps the entire page */
    #wrapper {
        max-height: 100vh;
        overflow-y: hidden;
    }

    #page-wrapper {
        min-height: 95vh;
        max-height: 95vh;
        overflow-y: auto;
    }
    /* styles for the main nav (with branding and user dropdown) */
    .nav.navbar-default {
        background: #646464;
    }

    .navbar-header {
        width: 100%;
        height: 75px;
        background: #212121;
    }
    /* side nav main styles */
    .nav.navbar-default.sidebar {
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        margin-top: 75px;
        background: linear-gradient(135deg,#00645D,#8DC63f);
    }

    .nav-second-level a {
        background: rgba(100, 100, 100, 1);
    }
    /* styles for the white-on-black version of the logo */
    #brandImageLight {
        width: 200px;
        height: auto;
        margin: auto 25px;
        z-index: 100;
        position: absolute;
    }
    /* For the text part of the brand, not the logo image. */
    .navbar-brand {
        font-size: 2em;
        margin-top: .4em;
        margin-left: 250px;
    }
    /* for the logo image. */
    #brandImageDiv {
        border-right: solid 1px #e7e7e7;
        position: absolute;
    }
    /* only changes the style of the dropdowns in the very top bar. */
    .headerHeight .dropdown-toggle {
        font-size: 1.2em;
    }

    .headerHeight .dropdown {
        padding-top: 10px;
        padding-bottom: 5px;
    }

        .headerHeight .dropdown a {
            color: #e7e7e7;
        }

            .headerHeight .dropdown a:hover {
                color: #8DC63F;
            }

    .headerHeight .dropdown-menu a:hover, .headerHeight .dropdown-menu a:active {
        color: #212121;
        background: #8DC63F;
    }

    .nav .open > a,
    .nav .open > a:focus,
    .nav .open > a:hover,
    .nav > li > a:focus,
    .nav > li > a:hover {
        background-color: transparent;
    }

    .headerHeight .dropdown-menu {
        border: none;
        background: #212121;
    }

    .dropdown-menu {
        border: none;
    }

    .modal-dialog {
        width: 750px;
    }

}