/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #C0C0C0;
    font-size: 10pt;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #000000;
}

textarea 
{
    font-size: 10pt;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

a:link, a:visited, a:active
{
    color: #0040FF;
}

a:hover
{
    color: #2060FF;
    text-decoration: none;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    color: #404040;
    font-variant: small-caps;
    text-transform: none;
    font-weight: bold;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

h1
{
    font-size: 16pt;
}

h2
{
    font-size: 14pt;
}

h3
{
    font-size: 12pt;
}

h4
{
    font-size: 11pt;
}

h5, h6
{
    font-size: 10pt;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    width: 95%;
    min-height: 100vh;
    background-color: #fff;
    margin: 0px auto;
    border-left: 1px solid #496077;
    border-right: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #FFFFFF;
    color: #000000;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #204060;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.pageTitle
{
    text-align: center;
    font-size: 14pt; 
    font-weight: bold;
    color: #606060;
    padding: 0.25em;
}

.subTitle {
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
    color: #606060;
    padding: 0.25em;
}

.main
{
    padding: 0.25em 1em;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    width: 95%;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

.DashboardWidget, .DashboardWidget:active, .DashboardWidget:visited, .DashboardWidget:link
{
    display: inline-block;
    text-align: center;
    min-width: 200px;
    color: #000000;
    font-weight: bold;
    font-size: 10pt;
    text-decoration: none;
    background: linear-gradient(#F8F8F8,#FFFFFF,#F0F0F0,#E0E0E0);
    border: 1px outset #C0C0C0;
    border-radius: 0.5em;
    padding: 1em;
    margin: 0.25em;
    vertical-align: bottom;
}

.DashboardWidget:hover 
{
    color: #FFFFFF;
    background: #004080;
    background: linear-gradient(#004080,#004080,#002040);
}
.DashboardWidget img
{
    margin-bottom: 8px;
    border: none;
    max-height: 96px;
    max-width: 96px;
}

.ErrorMessageBox {
    color: #000000;
    background-color: #FFE0D0;
    font-weight: bold;
    display: block;
    padding: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.SuccessMessageBox {
    color: #000000;
    background-color: #D0FFD0;
    font-weight: bold;
    display: block;
    padding: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.autocompleteExtender {
    position: absolute;
    margin: 0px;
    padding: 2px;
    background-color: #FFFFFF;
    color: #000000;
    border: outset 1px;
    box-shadow: #404040 2px 2px 2px;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background: #004080;
    background: linear-gradient(#004080,#004080,#002040);
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
    font-weight: bold;
}

div.menu ul
{
    background: #004080;
    background: linear-gradient(#004080,#004080,#004080,#002040);
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    z-index: 3;
}

div.menu ul li ul
{
        box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
        border: none;
}

div.menu ul li a, div.menu ul li a:visited
{
    background: transparent;
    color: #FFFFFF;
    display: block;
    line-height: 1.25em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #FFFFFF;
    color: #203040;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #405080;
    color: #FFFFFF;
    text-decoration: none;
}

a.popout.dynamic {
    padding-right: 28px;
}
a.popout.dynamic::after {
    content: "►";
    display: inline-block;
    position: absolute;
    right: 6px;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/*Customer Master
----------------------------------------------------------*/
    .customerSideMenuTitle {
        width: 200px;
        font-size: 16pt;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
        padding-right: 0px

    }

    .customerSideMenu a {
        text-decoration: none;
        padding: 8px;
    }

    :not(.dxrp-hasDefaultImages).dxrpControl .dxrpHeader{
        border-radius: 0px;
    }

    :not(.dxrp-hasDefaultImages).dxrpControl > tbody > tr.dxrpCR > .dxrpcontent{
        border-radius: 0px
    }
        /* MISC  
----------------------------------------------------------*/
.esGridviewContainer{
    padding-left: 16px;
    padding-right: 16px;
}
.clear {
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

.button
{
    background: #004080;
    background: linear-gradient(#004080,#004080,#002040);
    color: #FFFFFF;
    font-size: 10pt;
    padding: 2px 0.5em;
    border: solid 1px #404060;
    border-radius: 0.5em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.button:visited, .button:link, .button A
{
    color: #FFFFFF;
}

.button:hover
{
    background: #F0F0F0;
    color: #000000;
}

.button:disabled
{
    background: #FFFFFF;
    color: #808080;
    cursor: default;
}

.buttonGrey {
    background: #E0E0E0;
    background: linear-gradient(#E0E0E0,#F0F0F0,#C0C0C0);
    color: #000000;
    font-size: 10pt;
    padding: 2px 0.5em;
    border: solid 1px #404040;
    border-radius: 0.5em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

    .buttonGrey:visited, .buttonGrey:link, .buttonGrey A {
        color: #000000;
    }

    .buttonGrey:hover {
        background: #E0E8FF;
        color: #000000;
    }

    .buttonGrey:disabled {
        background: #FFFFFF;
        color: #808080;
        cursor: default;
    }

.buttonLightBlue {
    background: #E0E4FF;
    background: linear-gradient(#E0E4FF,#F0F4FF,#C0C4FF);
    color: #000000;
    font-size: 10pt;
    padding: 2px 0.5em;
    border: solid 1px #404040;
    border-radius: 0.5em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

    .buttonLightBlue:visited, .buttonLightBlue:link, .buttonLightBlue A {
        color: #000000;
    }

    .buttonLightBlue:hover {
        background: #E0E8FF;
        color: #000000;
    }

    .buttonLightBlue:disabled {
        background: #FFFFFF;
        color: #808080;
        cursor: default;
    }

.buttonSmall
{
    background: #004080;
    background: linear-gradient(#004080,#004080,#002040);
    color: #FFFFFF;
    font-size: 8pt;
    padding: 2px 0.5em;
    border: solid 1px #404040;
    border-radius: 0.5em;
    font-weight: bold;
    cursor: pointer;
}

.buttonSmall:visited, .buttonSmall:link, .buttonSmall A
{
    color: #FFFFFF;
}

.buttonSmall:hover
{
    background: #F0F0F0;
    color: #000000;
}

.buttonSmall:disabled
{
    background: #FFFFFF;
    color: #808080;
    cursor: default;
}
.buttonSpinner {
    background: #FFFFFF;
    background: linear-gradient(#E0E0E0,#FFFFFF,#C0C0C0);
    color: #000000;
    font-size: 8pt;
    padding: 0em;
    margin: 0px 1px;
    border: outset 1px #808080;
    font-weight: bold;
    cursor: pointer;
    width: 20px;
}

.buttonMenu
{
    background: #FFFFFF;
    color: #000000;
    font-size: 10pt;
    padding: 0.5em 1em;
    border: none;
    border-radius: 0.5em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.buttonMenu:visited, .buttonMenu:link, .buttonMenu A
{
    color: #000000;
}

.buttonMenu:hover
{
    background: linear-gradient(#004080,#004080,#002040);
    color: #FFFFFF;
}

.buttonMenu:disabled
{
    background: #FFFFFF;
    color: #808080;
    cursor: default;
}

.buttonImage
{
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    height: 24px;
    margin: 0px;
}
.buttonImage:visited, .buttonImage:link, .buttonImage A
{
    color: #000000;
}
.buttonImage:hover
{
    background: #E0E0E0;
    background: linear-gradient(#E0E0E0,#FFFFFF,#C0C0C0);
    color: #000000;
    border: 1px outset #C0C0C0;
}

/*-------------------ToolTip Gridview----------------*/

.CustomerInfoToolTipContainer {
    display: block;
    position: relative;
}

    .CustomerInfoToolTipContainer .CustomerInfoToolTip {
        display: none;
        position: absolute;
        margin: 0em;
        bottom: 0.5em;
        left: -0.5em;
    }

    .CustomerInfoToolTipContainer:hover .CustomerInfoToolTip {
        display: block;
        position: absolute;
        z-index: 10;
        box-shadow: #808080 4px 4px 4px;
    }


/* GRIDS */

.gridView
{
    font-size: 10pt;
    border-collapse: collapse;
    background: #FFFFFF;
    border-spacing: 0em;
}

    .gridView > TR > TH, .gridView > TR > TD, .gridView > tbody > tr > td, .gridView > tbody > tr > th {
        padding: 4px 8px !important;
    }

.gridViewBorderless
{
    font-size: 10pt;
    border-collapse: collapse;
    background: #FFFFFF;
    border-spacing: 0em;
    border: 0px none;
}

    .gridViewBorderless > TR > TH, .gridViewBorderless > TR > TD, .gridViewBorderless > tbody > tr > th, .gridViewBorderless > tbody > tr > td {
        padding: 4px 8px !important;
        border: 0px none;
    }

.gridViewWide
{
    font-size: 10pt;
    border-collapse: collapse;
    background: #FFFFFF;
    border-spacing: 0em;
    border: 0px none;
    
}

    .gridViewWide > TR > TH, .gridViewWide > tbody > tr > th {
        padding: 4px 8px !important;
        border: 0px none;
    }
    .gridViewWide > TR > TD, .gridViewWide > tbody > tr > td {
        padding: 8px !important;
        border: 0px none;
    }

.Bordered > TR > TH, .Bordered > TR > TD, .Bordered > tbody > tr > th, .Bordered > tbody > tr > td
{
    border: 1px solid #808080;
}

.gridViewNarrow {
    font-size: 10pt;
    border-collapse: collapse;
    background: #FFFFFF;
    border-spacing: 0em;
}

    .gridViewNarrow > TR > TH, .gridViewNarrow > TR > TD, .gridViewNarrow > tbody > tr > th, .gridViewNarrow > tbody > tr > td {
        padding: 2px 6px !important;
    }

.gridViewHeaderStyle
{
    background: #004080;
    background: linear-gradient(#004080,#004080,#002040);
    border-color: #FFFFFF;
    color: #FFFFFF;    
    
}

.gridViewAlternatingItemStyle {
    background-color: #E0E0E0;
    
}

.gridViewPagerStyle {
    background: #C0C0C0;
    background: linear-gradient(#C0C0C0, #F0F0F0, #FFFFFF, #E0E0E0, #C0C0C0);
    font-weight: bold;
    
    
    
}
.gridViewPagerStyle TD
{
    padding: 0em !Important;
    border: 0px none;
    
    
}

.gridViewPagerStyle SPAN
{
    display: inline-block;
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    border: 2px solid #C0C0C0;
    color: #000000;
    background: #FFFFFF;
    
    
}

.gridViewPagerStyle A
{
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #000000;
    border: 2px solid transparent;
        
}

.Block
{
    display: block;
}
.AlignLeft, .AlignLeft > TR > TH, .AlignLeft > TR > TD, .AlignLeft > tbody > tr > th, .AlignLeft > tbody > tr > td {
    text-align: left !important;
}

.AlignRight, .AlignRight > TR > TH, .AlignRight > TR > TD, .AlignRight > tbody > tr > th, .AlignRight > tbody > tr > td {
    text-align: right !important;
}

.AlignCenter, .AlignCenter > TR > TH, .AlignCenter > TR > TD, .AlignCenter > tbody > tr > th, .AlignCenter > tbody > tr > td {
    text-align: center !important;
}

.AlignTop
{
    vertical-align: top;
}
.AlignBottom
{
    vertical-align: bottom;
}
.AlignMiddle
{
    vertical-align: middle;
}

.Bold
{
    font-weight: bold;
}
.Borderless
{
    border: none;
}
.BorderBottomSolid
{
    border-bottom-style: solid;
}

.modalPopup
{
    background-color: #FFFFFF;
    padding: 1em;
    border: outset 2px;
    border-radius: 0.5em;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.5);
}

.popup
{
    background-color: #FFFFFF;
    padding: 0em;
    border: outset 1px;
    border-radius: 0.25em;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.5);
}

.PopupTitle {
    font-size: 12pt;
    font-weight: bold;
    display: block;
    text-align: center;
    margin-bottom: 5px;
}

.modalBackground
{
    background-color: rgba(0,0,0, 0.25);
}

.FormInput {
    border-collapse: collapse;
    border-spacing: 0px;
}

    .FormInput > TR > TH, .FormInput > tbody > TR > TH {
        text-align: right;
        padding: 0.25em 0.5em;
    }
    .FormInput > TR > TD, .FormInput > tbody > TR > TD {
        padding: 0.25em 0.5em;
    }
        .FormInput > TR > TD > .FormInput, .FormInput > TR > TH > .FormInput, .FormInput > tbody > TR > TD > .FormInput, .FormInput > tbody > TR > TH > .FormInput {
            margin: -0.25em -0.5em;
        }

.RequiredField 
{
    background-color: #FFFFE0;
}

.DashboardStatBar
{
    border-collapse: collapse;
    border-spacing: 0px;
    color: #000000;
    background-color: #E0E0E0;
    background: linear-gradient(#F8F8F8,#F4F4F4,#F0F0F0,#ECECEC,#E8E8E8,#E4E4E4,#E0E0E0,#D0D0D0);
}
    .DashboardStatBar > TR > TH {
        text-align: right;
        padding: 0.25em 0.5em;
        padding-left: 2em;
        white-space: nowrap;
    }
    .DashboardStatBar > TR > TD {
        padding: 0.25em 0.5em;
        white-space: nowrap;
    }

.TabControl {
    display: inline-block;
    text-align: left;
}

.TabControl .ajax__tab_header {
    border-bottom: solid 1px #808080;
    font-weight: bold;
    font-size: 10pt;
}

.TabControl .ajax__tab_outer {
    background: linear-gradient(#F0F0F0,#FFFFFF,#F0F0F0,#D0D0D0);
    color: #000000;
    border: solid 1px #808080;
    border-bottom: 1px solid #808080;
    border-radius: 0.5em 0.5em 0em 0em;
    margin-right: 1px;
}

.TabControl .ajax__tab_active .ajax__tab_outer {
    position: relative;
    top: 1px;
    z-index: 0;
    background: #FFFFFF;
    color: #000000;
    border-bottom: solid 1px #FFFFFF;
}

.TabControl .ajax__tab_tab {
    display: block;
    background: transparent;
    color: #000000;
    padding: 2px 1em;
}

.TabControl .ajax__tab_active .ajax__tab_tab {
    color: #000000;
}

.TabControl .ajax__tab_body {
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #808080;
    padding: 0.5em;
    height: auto;
}

.requiredSpan
{
    color: #FF0000;
    vertical-align: top;
}

.ActionBar {
    position: relative;
    height: 33px;
    overflow: visible;
    background: linear-gradient(#E0E0E0,#F0F0F0,#F0F0F0,#E8E8E8,#E0E0E0);
}

.GreybarHorizontal
{
    background: linear-gradient(#F8F8F8,#FFFFFF,#FFFFFF,#F8F8F8,#F0F0F0);
}
.GrayBorderedBox
{
    background: linear-gradient(#F0F0F0,#FFFFFF,#FFFFFF,#F8F8F8,#F0F0F0);
    padding: 0.5em; 
    border: 1px outset #C0C0C0; 
    border-radius: 0.5em; 
    display: inline-block; 
    text-align: left; 
}
.GrayBorderedPanel
{
    background: linear-gradient(#F0F0F0,#FFFFFF,#FFFFFF,#F8F8F8,#F0F0F0);
    padding: 0.5em; 
    margin: 1em 0em;
    border-left: 1px solid #C0C0C0;
    border-top: 1px solid #C0C0C0;
    border-right: 1px solid #606060;
    border-bottom: 1px solid #606060;
    border-radius: 0.5em; 
    display: block; 
    text-align: left; 
}
.ExpanderHeader, .ExpanderHeader:active, .ExpanderHeader:link, .ExpanderHeader:visited
{
    display: block;
    text-decoration: none;
    font-size: 13pt;
    font-weight: bold;
    color: #404040;
    cursor: pointer;
    padding-bottom: 0.5em;
}
.ExpanderHeader:hover
{
    color: #0000FF;
}

.ActivityNoteToolTipContainer {
    display: block;
    position: relative;
}

    .ActivityNoteToolTipContainer .ActivityNoteToolTip {
        display: none;
        position: absolute;
        margin: 0em;
        bottom: -0.5em;
        left: -0.5em;
        box-shadow: #808080 4px 4px 4px;
    }

    .ActivityNoteToolTipContainer:hover .ActivityNoteToolTip {
        display: block;
        z-index: 10;
    }

.CheckBox24 {
    border: 2px solid #808080;
    display: inline-block;
    height: 12px;
    width: 12px;
    margin: 4px;
    text-decoration: none;
}

/* Treeview */
.TreeView
{
    font-weight: bold;
    color: #000000;
}
.TreeView table
{
    border-collapse: collapse;
}
.TreeView th, .TreeView td
{
    padding: 0px 2px;
}
.TreeView a
{
    color: #000000;
    display: inline-block;
    padding: 0px;
}
.TreeView img, .TreeNode img
{
    max-height: 24px;
}

.TreeView tr:hover
{
    color: #000000;
    background: linear-gradient(#E0F0FF,#E0F0FF,#8090C0);
}
.TreeView .TreeViewSelected
{
    color: #000000;
    background: linear-gradient(#E0F0FF,#E0F0FF,#8090C0);
    padding: 0em 0.5em;
    border-radius: 0.25em;
    border: 1px outset #0000C0;
}
.TreeView .TreeViewSelected a
{
    color: #000000;
    background: transparent;
    padding: 0px;
    border: 0px none;
}

.ToggleButton_Off, a.ToggleButton_Off
{
    display: inline-block;
    color: #000000;
    background: linear-gradient(#E0E0E0,#FFFFFF,#FFFFFF,#C0C0C0);
    border-width: 1px 2px 2px 1px;
    border-style: outset;
    border-color: #E0E0E0;
    border-radius: 0.25em;
    text-decoration: none;
    padding: 2px 0.5em;
}
.ToggleButton_On, a.ToggleButton_On
{
    display: inline-block;
    color: #000000;
    background: #E0F0FF;
    background: linear-gradient(#C0D0FF,#FFFFFF,#FFFFFF,#90A0D0);
    border-width: 2px 1px 1px 2px;
    border-style: inset;
    border-color: #E0E8FF;
    border-radius: 0.25em;
    text-decoration: none;
    padding: 2px 0.5em;
}

.TimeEditFlexContainer {
    display: table;
    border-spacing: 0.5em 0.25em;
}

.TimeEditorFlexPanel {
    display: table-cell; 
    vertical-align: top; 
}

.TimeEditorFooter {
    text-align: center;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.ActivityLogHighlight {
    background: linear-gradient(#B0C0B0,#F0FFF0,#F8FFF8,#F8FFF8,#F0FFF0,#B0C0B0);
}

/*---------------------------------DevExpress CSS--------------------------------*/

.dxeHLC, .dxeHC, .dxeHFC {
    display: none;
}

.dxrpControl td.dxrpHeader, .dxrpControl > tbody > tr > .dxrpcontent {
    background: linear-gradient(#F0F0F0,#FFFFFF,#FFFFFF,#F8F8F8,#F0F0F0);
}

.comboBoxTitle {
    background-color: gray;
    margin: -3px -6px -4px;
    color: whitesmoke;
    font-weight: bold;
    padding: 4px
}

.comboBoxSubItem {
    padding-left: 16px
}

.dashboardContainers {
    display: inline-block;
    width: 30%;
    padding: 4px;
    padding-bottom: 32px;
    background-position: right top;
    vertical-align: top;
    text-align: left;
}

    .dashboardContainers .dashboardTitles {
        font-size: 20px;
        line-height: 31px;
        text-align: left;
        margin: 8px 8px 0px 8px;
    }
    .dashboardTable{
        border-collapse: collapse;
        margin: 8px
    }
        .dashboardTable td{
            padding-right: 8px;
            padding-top: 4px;
        }
.dashboardLinkContainers {
    border: 0.5px black solid;
    margin: 0px 8px 8px;
    font-size: 12pt;
    background: linear-gradient(rgb(248, 248, 248), rgb(235, 235, 235) 75%, rgb(235, 235, 235));
    height: 140px;
}
    .dashboardLinkContainers a {
        color: black;
        text-decoration: none;
    }
/*---------------------------------------------------------------------------------*/
@media screen and (max-width: 1760px) {
    .TimeEditFlexContainer {
        display: block;
    }

    .TimeEditorFlexPanel {
        display: block;
        margin: 0.5em;
    }

    .TimeEditorFooter {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
    }
}