﻿body {
    padding: 0;
    margin: 0;
    height: 100%;
}

/* Public Website Menu Classes*/
.HoverMenuPanelHeader {
    font-weight: normal !important; /* 04-23-2019 TG. Changed from Bold */
    background-color: #33506A;
}

.ajax__tab_header {
    background-image: none !important; /* Needs !important to overwrite a pre-set image. It doesn't actually seem to display anything if allowed but just in case. */
    /*height: 43px;*/
    width: calc(100% - 1px); /* For some reason, either due to padding or border problems I'm guessing, the full width of the header was expanding a little past 100%. This fixes that issue. */
    border-width: 2px 0;
    border-color: #182A38;
    border-style: solid;
    /*width: 100%;*/
}

.ajax__tab {
    display: table !important;
    margin-top: 0 !important; /* Needs !important for spacing issues. */
    /*height: 42px !important;*/ /* Needs !important for the hover effect to fully fill out the tab. */
    text-align: center;
    /*border-radius: 30px;*/
    /*border: 1px pink dashed;*/
    /*border-width: 2px 1px;
    border-color: #182A38;
    border-style: solid;*/
}

.ajax__tab_outer {
    display: table-cell !important;
    vertical-align: middle;
    height: 40px !important;
    transition: 0.1s;
    cursor: pointer;
    padding-right: 0px !important;
    text-align: center;
    margin: 0;
    color: #FFF;
    /*font-size: 10.5pt;*/
    font-weight: normal !important; /* 04-23-2019 TG. Changed from Bold */
    background-image: none !important;
    width: 100%;
    /*border-radius: 30px;
        border: 1px green dashed;*/
    border-width: 0 1px;
    border-color: #182A38;
    border-style: solid;
}

.ajax__tab:first-of-type > .ajax__tab_outer {
    border-width: 0 1px 0 0;
}

.ajax__tab:last-of-type > .ajax__tab_outer {
    border-width: 0 0 0 1px;
}

.ajax__tab_inner {
    /*height: 45px !important;*/ /* REMOVED */
    padding-left: 0px !important;
    display: block !important;
    vertical-align: middle;
    background-image: none !important;
    width: 100%;
}

.ajax__tab_tab {
    /*height: 45px !important;*/ /* REMOVED */
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    background-image: none !important;
    transition: 0.1s !important;
    display: block !important;
    color: #FFF !important;
    max-height: 32px;
    width: 100%;
}

.ajax__tab_header > .ajax__tab:last-of-type > .ajax__tab_outer > .ajax__tab_inner > .ajax__tab_tab {
}

.ajax__tab_tab span {
    display: table;
    width: 95%;
    margin: auto;
}

    .ajax__tab_tab span div {
        /* when hardcoding Tabpanels, use .ajax__tab_tab span div above. When creating dynamically, take the div off*/
        /*display: block;   CAN ONLY USE THIS WHEN NOT HARDCODING TABPANELS, BUT IT HOSES UP MOUSE EVENT CORRDINATES*/
        /* 03/27/2019 - Removing 'cause it doesn't seem necessary. */
        /*height: 45px !important;*/
        /*width: 220px !important;  Moved this to code behind so that when we get percentages working, we know where to put it there.
        max-width: 220px !important;
        min-width: 220px !important;*/
        display: table-cell;
        vertical-align: middle;
        height: 33px;
        padding: 0 3px;
        margin: 0;
        line-height: 17px;
    }

.ajax__tab_active,
.ajax__tab_hover {
    display: block;
    transition: 0.1s;
    background-color: #253A4C;
}

.ajax__tab_xp ajax__tab_body {
    background-color: transparent !important;
    border: 0px !important;
    padding: 0px !important;
}

/* ADDED */
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
}

.ajax__tab_xp .ajax__tab_header .ajax__tab:last-of-type .ajax__tab_outer {
    padding-right: 0;
}

.ajax__tab_body {
    z-index: 9999;
    opacity: 0.98;
    background-color: #253A4C !important;
    width: 100%;
    border: 0px !important;
    padding: 0px !important;
    position: absolute;
}

.ajax__tab_panel {
    margin: 10px 0;
}

.HoverMenuMiddleColumn {
    padding-left: 50px !important;
}

.HoverMenuRightMostColumn {
    padding-left: 50px !important;
}

.HoverMenuItemSpacerNone {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.HoverMenuItemSpacerBoth {
    margin: 0px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.HoverMenuItemSpacerBefore {
    margin: 0px;
    padding-top: 10px !important;
}

.HoverMenuItemSpacerAfter {
    margin: 0px;
    padding-bottom: 10px !important;
}

.HoverMenuItemUL {
    font-family: Google_Raleway !important;
    padding: 1px 0px 1px 15px !important;
    list-style-type: none !important;
    color: white !important;
}

    .HoverMenuItemUL > p {
        text-decoration: underline !important;
    }

.HoverMenuItemLI {
    padding: 1px 0px 1px 20px !important;
    list-style-type: none !important;
    color: #dfdad8 !important;
}

    .HoverMenuItemLI img {
        height: 14px;
        width: 14px;
        margin-bottom: -1px;
        margin-left: -17px;
        margin-right: 3px;
    }

    .HoverMenuItemLI a:not(.HoverMenuItemHighlight) {
        color: #dfdad8 !important;
    }

    .HoverMenuItemLI:hover a:not(.HoverMenuItemHighlight) {
        color: #0090FF !important;
    }
.HoverMenuItemLink {
    transition: 0.1s;
    color: #dfdad8 !important;
    text-decoration: none !important;
}

    /* ADDED */
    .HoverMenuItemLink:hover {
        color: #75B6EF !important;
    }

@keyframes arrowMoveLeft {
    0% {
        margin-left: -19px;
    }

    50% {
        margin-left: -16px;
    }

    100% {
        margin-left: -19px;
    }
}

@keyframes arrowMoveRight {
    0% {
        margin-left: 4px;
    }

    50% {
        margin-left: 1px;
    }

    100% {
        margin-left: 4px;
    }
}

.HoverMenuItemHighlight {
    color: white !important;
    /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;*/
    font-weight: normal !important;
    /*text-transform: uppercase !important;
    animation: arrowMoveRight 2s linear infinite alternate;
    animation-delay: 0s;*/
}

.HoverMenuItemHighlight:hover {
    color: #0090ff !important;
    /*text-decoration: wavy !important;*/
}

.SBEStylinNUPOverride > div {
    padding: 0px !important;
}
