/* 20240126 dal - Defaulting to using new BoxLogic style */
:root.old {
    --login-background: url(../images/background.png);
    --login-image: url(../images/optiShipLoginLogo.png);
    --page-header-image: url(../images/header100.gif);
    --main-background: #C5BD99;
    --menu-background: #003366;
    --menu-color: white;
    --results-bar-background: #999999;
    --results-bar-color: black;
    --search-options-background: #cccccc;
    /*Optiship Additions*/
    --form-section-color: #ffffff;
    --form-section-background: #003366;
    --page-header-color: white;         /* from mainMenu class */
    --page-header-background: url(../images/headerbg2.jpg);
    --page-header-background-color: #003366;  /* from mainMenu class */
    --submenu-background-color: #CCCCCC;
    --actionmenu-background-color: #CCCCCC;
}

/* Had a ".new" class on here so we could toggle it via a button press */
:root {
    --primary-red: rgb(159, 0, 5);
    /* rhonda suggested: white */
    --login-background: white;
    --login-image: url(../images/BL_Optiship_2.jpg);
    --page-header-image: url(../images/BL_Optiship_2.jpg);
    --main-background: white;
    --menu-background: black;
    --menu-color: white;
    --results-bar-background: var(--primary-red);
    --results-bar-color: white;
    --search-options-background: white;
    /*Optiship Additions*/
    --form-section-color: white;
    /*--form-section-background: var(--primary-red);*/
    --form-section-background: black;
    --page-header-color: black;
    --page-header-background: white;
    --page-header-background-color: white;
    --submenu-background-color: var(--primary-red);
    --actionmenu-background-color: #CCCCCC;
}

/* 20240418 dal - Adding .page-auth.login-page because we need this for materials design pages, and we don't have access to the body there. */
body.login-page, .page-auth.login-page {
    color: #ffffff;
    background: var(--login-background);
}

body.bl-user-page {
    color: #ffffff;
    background: var(--login-background);
}

img.login {
    content: var(--login-image);
    max-height: 110px;
    border: none;
}

tr.login-box > td {
    background-color: white;
}

img.bl-page-header {
    content: var(--page-header-image);
    /*max-height: 110px;*/ /* This is the TPS size */
    max-height: 76px;	/* OptiShip */
    border: none;
}

/* This is the overall background for the page header */
td.bl-page-header {
    height: 78px;
    width: 100%;
    text-align: left;
    color: var(--page-header-color);
    background: var(--page-header-background);
}

div.bl-page-header {
    color: var(--page-header-color);
    background: var(--page-header-background-color);

    /*
     * These first 4 are a common entry
     */
    text-decoration: none;
    font-variant: normal;
    font-weight: 500;
    font-size:11pt;

    letter-spacing:.1em;
}

a.bl-page-header, b.bl-page-header, section.bl-page-header {
    color: var(--page-header-color);
    background: var(--page-header-background-color);
}

table.submenu {
    border: 0;
    padding: 0;         /* style cellpadding */
    border-spacing: 0;  /* style cellspacing */
    background-color: var(--submenu-background-color);
    vertical-align: top;
}

tr.submenu {
    background-color: var(--submenu-background-color);
    vertical-align: top;
}

table.actionmenu {
    border: 0;
    padding: 0;         /* style cellpadding */
    border-spacing: 0;  /* style cellspacing */
    background-color: var(--actionmenu-background-color);
    width: 100%;
    vertical-align: top;
}
/*
    Basic classes to use for styling the various section:

    bl-user-page        - Putting this on the BODY html element so we can style and find "main" pages quickly.
    bl-page-header      - This is the top icon, full bar
                        -   In oee/header.tpl, cview/header.tpl, oee/admin/adminHeader.tpl,
                        -   oee/XmlExport.html, ltlShippingHelp.tpl, parcelShippingHelp.tpl
    mainMenu            - This is the main menu right below the bl-page-header
                        -   This should only be used in oee/menu.tpl, cview/menu.tpl, admin/menu.tpl
    parcelMenu, ltlMenu,- This is the optional tabs (Shipping,History,Search,etc) below the mainMenu.
      purchaseMenu      -   This is in ltlMenu.tpl, parcelMenu.tpl, purchaseMenu.tpl (search for tab_end)
                        -   This images are set in Smarty depending on what page is currently active.
    HTML Style          - This is the actions bar below the "tabs". This is for things like Shop, Ship, Save, etc
                        -   This is in things such as shippingMenu.tpl, ltlShippingMenu.tpl, ltlRateQuoteMenu.tpl,
                        -   purchasingSubMenu.tpl, rateShippingMenu.tpl
    darkBlueHeader      - This is the "input area" such as the "Ship To", "Bill To", "Extra Services" sections in
                        -   a form.
*/

.menutabholder {
    height: 35px;
    /*width: 100%;*/
    position: relative;
    background-color: var(--submenu-background-color);
    box-sizing: border-box;
    border-collapse: collapse;  /* Since we are probably wrapped in a table */
}

/* Adds the 7px darker grey bar with the 1px darker grey separator */
.menutabtop {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    border-bottom: 1px solid #bbbbbb;
}

ul.menutab {
    position: absolute;
    left: 0;
    top: 8px;
    height: 20px;
    padding-left: 5px;
    padding-right: 30px;
    border-radius: 0 6px 0 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    background: -webkit-linear-gradient(#fdfdfd, #adadad);
    font-weight: 500;
    font-size: 11pt;
    letter-spacing: .1em;
}

.tabgeneric, .tabgeneric>a {
    position: relative;
    display: inline-block;
    min-width: 5em;
    text-align: center;
    vertical-align: middle;
    padding: 0 10px 0 10px; /* t r b l - for text padding */
    height: 20px;
    line-height: 20px; /* Needed for text centering */
    margin-left: 10px; /* for space around tabs */
    margin-right: 5px; /* for space around tabs */
    color: black;
    text-decoration: none;
}

/* physically after .tabgeneric to define precedence */
.tabselected>a {
    position: relative;
    top: -4px;
    height: 24px !important;
    line-height: 24px !important; /* Needed for text centering */
    border: 1px solid red;
    border-radius: 10px 10px 0px 0px;
    color: white;
}

.colorbar {
    position: absolute;
    top: 28px;
    height: 7px;
    width: 100%;
}

.tabgeneric:hover {
    cursor: hand;
}

.ltlcolor .tabselected>a {
    background: -webkit-linear-gradient(#c7c8c9, #006305);
    border-color: #005a1a;
}

.ltlcolor .colorbar {
    background-color: #006305;
}

.parcelcolor .tabselected>a {
    background: -webkit-linear-gradient(#c7c8c9, #003366);
    border-color: #1a4673; /* trying something besides the darkest color - using mid */
}
.parcelcolor .colorbar {
    background-color: #003366;
}

.purchasingcolor .tabselected>a {
    background: -webkit-linear-gradient(#c7c8c9, #320102);
    border-color: #542c2c; /* trying something besides the darkest color - using mid */
}
.purchasingcolor .colorbar {
    background-color: #320102;
}

body .ui-listbox.no-padding .ui-listbox-list .ui-listbox-item {
    padding: 0;
    cursor: auto;
}