:root {
    --primary-color: tomato;
}

header,
.top-nav,
.second-nav {
    position: sticky;
    z-index: 1000;
}

header {
    /*position: sticky;*/
    top: 0;
    /*z-index: 1000;*/
    background-color: #870000;
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    white-space: nowrap;
    font-size: 18pt;
}

.logo a.headerText:hover {
    text-decoration: none;
    color: #fff;
}

.logoffMenu a.headerText:hover {
    text-decoration: underline;
    color: #fff;
}

.headerText {
    color: #fff;
}

.header-content {
    flex: 1;
    text-align: center;
}

.env-text {
    font-weight: bold;
    font-size: 1.2rem;
    color: navajowhite;
    white-space: nowrap;
}

.user-profile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 1em;
    line-height: 1.2;
    white-space: nowrap;
}

.user-profile a:hover {
    color: #ffbf00;
}

.user-subtext {
    font-size: 0.95em;
    color: #ccc;
}

#ShadowHeaderContainer {
    height: 62px;
    position: fixed;
}

#ShadowMenuContainer {
    height: 32px;
    position: fixed;
}

#ShadowActionBar {
    height: 60px;
    position: fixed;
}


/* Top nav */
nav.top-nav {
    /*position: sticky;*/
    top: 56px; /* adjust based on header height */
    z-index: 999;
    background-color: #a71919;
    padding: 8px 10px;
    /*display: flex;*/
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

    nav.top-nav a {
        color: white;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 1.1rem;
    }

        nav.top-nav a.active {
            background-color: #e3c503;
            color: black;
        }

/* Hamburger toggle */
.hamburger {
    font-size: 1.5em;
    cursor: pointer;
    color: white;
    margin-right: 10px;
    display: none; /* Hidden by default */
}

.second-nav {
    /*position: sticky;*/
    /*top: @(ShowTopBanner && !IsPopupView && ShowMenuBar && ShowActionBar ? 92 : 0)px;*/
    /*top: 92px;*/ /* header + nav height */
    z-index: 998;
    background-color: #ecf0f1;
    display: flex;
    padding: 5px 10px;
    flex-wrap: wrap;
    /*gap: 0.8rem;*/
    /*overflow-x: auto;*/
    border-bottom: 1px solid #ccc;
}

/* Columns of second-level nav */
.second-nav .column {
    display: flex;
    flex-direction: column;        
    flex-wrap: wrap;
    padding: 0 10px;
}

/* Add spacing and border between columns */
.second-nav .column:not(:last-child) {
    border-right: 1px solid #ccc;
    padding-right: 1rem;
}

.second-nav a {
    margin-bottom: 6px;
    color: #2c3e50;
    text-decoration: none;
    white-space: nowrap;
    font-size: 9pt;
}

.second-nav a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .top-nav-items {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .top-nav.open .top-nav-items {
        display: flex;
    }

    .hamburger {
        display: block;
    }
}

@media (max-width: 576px) {
    .second-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .second-nav .column, .second-nav .column:not(:last-child) {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.5rem;
    }    
}


.divActionBar {
    float: left;
    /*height: 75px;*/
    width: 100%;
    background-color: #dce7f5;
    /*background-image: url(../../images/ActionBarBackground.png);*/
    background-image: url(../images/bgActionBar.png);
    background-repeat: repeat-x;
    overflow-x: auto;
    border-collapse: inherit;
}

.tblActionBar {
    height: 55px;
}

.tdActionGroup {
    border-right: 1px solid gray;
}

.tdActionItem {
    padding: 1px 6px 1px 3px;
    vertical-align: middle;
}

.tdActionItemDisabled {
    padding: 1px 6px 1px 3px;
}

/*.tdActionItem img {
    margin: 0px 3px 0px 0px;
    top: 2px;
    position: relative;
}*/


.tdActionItem a {
    outline: none;
    /*color: #000000;*/
    /*color: #084EFF;*/
    color: var(--primary-color);
    white-space: nowrap;
    font-size: 8pt;
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    border: 1px solid transparent;
}

.tdActionItemDisabled a {
    outline: none;
    color: #57676a;
    white-space: nowrap;
    font-size: 8pt;
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    text-decoration: none;
    border: 1px solid transparent;
}

.tdActionItem a:hover {
    /*background-image: url(../../images/ActionItemHover.png);*/
    /*background-color: #FDEEB3;*/
    background-repeat: repeat-x;
    white-space: nowrap;
    /*text-decoration: none;*/
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    /*border: 1px solid #F1C43F;*/
}

.tdActionItemDisabled a:hover {
    /*background-image: url(../../images/ActionItemHover.png);*/
    background-color: #FDEEB3;
    background-repeat: repeat-x;
    white-space: nowrap;
    text-decoration: none;
    font-weight: bold;
    padding: 1px 6px 1px 3px;
    border: 1px solid #F1C43F;
}

.tdActionItemHeader {
    text-align: center;
    text-decoration: none;
    /*color:Blue;*/
    font-size: 9pt;
    font-weight: bolder;
    font-family: arial;
    /*color: #084EFF;*/
    color: black;
}

.imgGreen {
    background: url(../images/actionGreen.png) no-repeat;
    position: relative;
    z-index: 999;
    display: inline;
    height: 12px;
    width: 12px;
    border: 0;
    /*top: 2px;*/
    vertical-align: top;
}

.imgRed {
    background: url(../images/actionRed.png) no-repeat;
    position: relative;
    z-index: 999;
    display: inline;
    height: 12px;
    width: 12px;
    border: 0;
    /*top: -1px;*/
    vertical-align: top;
}