/* Epicor-specific styles */
:root {
    /*118AAB*/
    /* Teal */
    --main-color: #025064;
    /* Aqua */
    --secondary-color: #90D2B5;
    /* Red */
    --ternary-color: #FF2102;
    /* Light Gray */
    --background-color: #EEF2F5;

    /* Watermelon */
    --accent-color-1: #FF8873;
    /* Jade */
    --accent-color-2: #049E8A;
    /* Peach */
    --accent-color-3: #FEBE9F;
    /* Mauve */
    --accent-color-4: #B5709A;
    /* Sky Blue */
    --accent-color-5: #A9DCF8;
}

.navbar-default {
    background-color: var(--main-color);
    border-color: #ffffff !important;
}

#about .modal-header {
    background-color: var(--main-color);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#about .modal-header .close {
    opacity: 1;
    color: white;
}

.navbar-default .navbar-brand {
    color: #ffffff !important;
}

.navbar-default .navbar-brand:hover,
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.navbar-default .navbar-brand:focus {
    color: #525252 !important;
}

.navbar-default .navbar-text {
    color: #ffffff !important;
}

.navbar-default .navbar-nav > li > a {
    color: #ffffff !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--secondary-color) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #525252 !important;
    background-color: #ffffff !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #525252 !important;
    background-color: #ffffff !important;
}

.navbar-default .navbar-toggle {
    border-color: #ffffff !important;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #ffffff !important;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff !important;
}

.navbar-default .navbar-link {
    color: #ffffff !important;
}

.navbar-default .navbar-link:hover {
    color: #525252 !important;
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff !important;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #525252 !important;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #525252 !important;
        background-color: #ffffff !important;
    }
}

.btn-primary {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
    filter: brightness(.8);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
    filter: brightness(.8);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.panel-primary {
    border-color: var(--main-color);
}

.panel-primary > .panel-heading {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--main-color);
}

.panel-primary > .panel-heading .badge {
    color: var(--main-color);
    background-color: #fff;
}

.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: var(--main-color);
}

td.sideMenu {
    color: var(--main-color);
}

a {
    color: var(--main-color);
    text-decoration: none;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    color: #fff;
    background-color: var(--main-color);
    border-color: var(--main-color);
}

/*  Icon styles - the icon color depends on the background color. 
    The general case is: colored "FontAwesome" icons and white "Bootstrap" icons. The color is set directly to their own CSS classes.
    However, the opposite cases also exist and they are handled by the additional CSS classes "whiteIcon" and "coloredIcon".
*/
.fa {
    color: var(--main-color);
}

.dropdown-menu .glyphicon {
    color: var(--main-color);
}

.coloredIcon {
    color: var(--main-color);
}

.whiteIcon {
    color: white;
}

/* Content removal */
#dvMLSectionTitle,
#sidebar-ml-models,
#history-links {
    display: none;
}