/* ================================
    CSS STYLES FOR 3EOnline PORTAL
    v3.0, 8/2019
   ================================
*/

/* Table of Contents

    1. structure

    2. global styles

    3. typography

    4. decorative

    5. components
       5.1. component arts styles
       5.2 . old table styles

    6. bootstrap overrides

    7. miscellaneous

/*

/*  ==============
    global styles
    ============= */

@media print {
    .PortalBanner {
        display: none;
    }

    .PortalFooter {
        display: none;
    }

    .NoPrint {
        display: none;
    }

    tr {
        page-break-inside: auto;
    }

    a[href]:after {
        content: "";
    }
}

/*@media screen {*/

html {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
}

body {
    /*unicode-bidi: embed;*/
    font-family: "Arial Unicode MS", Arial, Helvetica, Sans-Serif;
    margin-bottom: 100px;
    height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    margin: auto;
}

/* Standard Colors */

.base-color {
    color: #0f4876;
}

.lite-base-color {
    color: #0078ae;
}

.accent {
    color: #d07a20
}

TFOOT, THEAD {
    font-size: .85em;
    color: #0f4876;
}

table {
    max-width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    font-size: 1em;
}

    table.border td {
        border: 1px #cccccc solid;
    }
/*check to see if can be deleted*/


H1 {
    margin: 0;
    font-size: 1.6em;
    color: #0f4876;
}

H1, H2, H3, H4, H5, H6 {
    text-rendering: auto;
    font-family: "Arial Unicode MS", Arial, Helvetica, Sans-Serif;
}

H2 {
    font-size: 1.3em;
    font-weight: bold;
    color: #d07a20;
}

H3 {
    font-size: 1.15em;
    padding: 0.2em 30px 0.2em 0;
    margin: .5em 0 0.7em;
    border-top: 3px solid #d07a20;
    color: #0f4876;
}

H4 {
    font-size: 1em;
}

H5, DT {
    font-weight: bold;
}

H6 {
    font-weight: bold;
}

sup {
    top: 0;
}

hr {
    height: 1px !important;
    border: none !important;
    background-color: #dcdcdc !important;
}

label {
    padding: 0 10px 0 5px;
    font-weight: normal;
    font-size: 1em;
}

[href].label:hover, [href].label:focus {
    color: #d07a20;
    text-decoration: underline;
    cursor: pointer;
}

input[disabled], select[disabled], textarea[disabled], button[disabled], input:hover[disabled], select:hover[disabled],
textarea:hover[disabled], button:hover[disabled] {
    background-color: #ddd;
    color: #aaaaaa;
    text-shadow: none;
}

a {
    color: #0f4876;
    text-decoration: none;
}

    a:link {
        color: #0f4876;
        text-decoration: underline;
    }

    a:visited {
        color: #0f4876;
    }

    a:hover,
    a:focus {
        color: #0078ae;
        text-decoration: underline;
    }

    a:focus {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    a:active {
        outline: none;
    }

.break-all {
    word-break: break-all !important;
}

/*  ==========
    structure
    ========== */

/* PORTAL STRUCTURE */
/* PAGE BACKGROUND */
/* background color for the content part of the pages */

.LeftPane {
    background-color: #f5f5f5;
}

@media (min-width: 768px) {
    .LeftPane, .LightBack {
        min-height: calc(100vh - 256px);
    }
}

#BannerTabs {
    border-top: 1px solid #eee;
}

.BreadCrumbs {
    color: #0f4876;
    font-size: .85em;
}

/* hyperlink style for the breadcrumbs */
a.BreadCrumbs:link {
    color: #999999;
    text-decoration: underline;
}

a.BreadCrumbs:visited {
    color: #999999;
}

a.BreadCrumbs:hover {
    color: #d07a20;
    text-decoration: underline;
}

a.BreadCrumbs:active {
    color: #999999;
    text-decoration: underline;
}

.BreadCrumbSeparator {
    color: #999999;
}

/* style for the text of the site title */
.SiteTitle {
    color: #0f4876;
    text-align: left;
    font-weight: bold;
    font-size: 1.2em;
}

/* hyperlink style for the site links */
a.SiteLink:link {
    color: #0f4876;
    text-decoration: underline;
    font-size: .85em;
}

a.SiteLink:visited {
    color: #0f4876;
}

a.SiteLink:hover {
    color: #0078ae;
    text-decoration: underline;
    font-size: .85em;
}

a.SiteLink:active {
    color: #0f4876;
    text-decoration: underline;
    font-size: .85em;
}

.Welcome {
    color: #0f4876;
    font-size: .85em;
}

/*Login Styles*/

#login {
    z-index: 0;
    border-right: 1px solid #eee;
}

.box-log-in {
    background-color: rgba(0, 120, 174, 0.05);
    border-radius: 20px;
    border-style: solid;
    border-color: rgba(0, 120, 174, 0.03);
}

#login #actions,
.password #actions {
    margin: 10px 0 0;
}

input::-webkit-input-placeholder {
    color: #999 !important;
}

input::-moz-placeholder {
    color: #999 !important;
}

input:-moz-placeholder { /* Older versions of Firefox */
    color: #999 !important;
}

input:-ms-input-placeholder {
    color: #999 !important;
}

#login #inputs INPUT,
.password #inputs INPUT {
    background: #FFFFFF url('../images/login-sprite.png') no-repeat 0 0;
    border-radius: 5px 5px 5px 5px;
    margin: 10px auto;
    padding-left: 30px;
    font-size: 14px;
    height: 34px;
    color: #555;
}

#login .password {
    background-position: 5px -60px !important;
}

#login .username {
    background-position: 5px -10px !important;
}

/* PAGE FOOTER */

.PortalFooter {
    color: #FFFFFF;
    height: 100%;
    position: relative;
    margin-top: 6px;
    border-top: 3px solid #FFFFFF;
    text-align: center;
    font-size: .75em;
    background-color: #f5f5f5;
    background-image: url("../images/3eIqBanner.svg");
    -webkit-background-size: 400px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat no-repeat;
}

    .PortalFooter A {
        color: #FFFFFF !important;
        text-decoration: none;
    }

    .PortalFooter:before {
        content: '';
        border-top: 3px solid #d07a20;
        width: 100%;
        position: absolute;
        top: -6px;
        left: 0;
    }

.Disclaimer {
    font-size: .75em;
}

.FooterText {
    color: #666;
    font-size: .6em;
}

.footer-first-line-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

.footer-second-line-text {
    margin-top: 5px;
    font-size: 12px;
    margin-bottom: 17px;
}

/*SiteMap Styles begin-----------------------------------------------*/
.SiteMap {
    background-color: white;
    font-size: 1em;
    padding: 5px;
    line-height: 1em;
}

.SiteMapTableCell {
    padding: 5px;
    vertical-align: top;
}

.SiteMapRootNode {
    color: #333;
    font-size: 1em;
    font-weight: bold;
    padding-left: 5px;
    line-height: 1em;
}

    .SiteMapRootNode a:link {
        color: #333;
        text-decoration: none;
    }

    .SiteMapRootNode a:visited {
        color: #333;
    }

    .SiteMapRootNode a:hover {
        color: #0f4876;
        text-decoration: underline;
    }

    .SiteMapRootNode a:active {
        color: #333;
        text-decoration: none;
    }

.SiteMapParentNode {
    font-size: .9em;
    padding-left: 5px;
    text-align: left;
    line-height: 1.2em;
}

    .SiteMapParentNode a {
        color: #333;
        text-decoration: none;
    }

        .SiteMapParentNode a:link {
            color: #333;
            text-decoration: none;
        }

        .SiteMapParentNode a:visited {
            color: #333;
        }

        .SiteMapParentNode a:hover {
            color: #0f4876;
            text-decoration: underline;
        }

        .SiteMapParentNode a:active {
            color: #333;
            text-decoration: none;
        }

.SiteMapLeafNode {
    color: #333;
    font-size: .9em;
    padding-left: 5px;
    text-decoration: none;
    line-height: .9em;
}

    .SiteMapLeafNode a {
        color: #333;
        text-decoration: none;
    }

        .SiteMapLeafNode a:link {
            color: #333;
            text-decoration: none;
        }

        .SiteMapLeafNode a:visited {
            color: #333;
        }

        .SiteMapLeafNode a:hover {
            color: #0f4876;
            text-decoration: underline;
        }

        .SiteMapLeafNode a:active {
            color: #333;
            text-decoration: none;
        }

.SiteMapContentCell {
    color: #FFFFFF;
    border: 0 solid #CCCCCC;
}

.SiteMapShade {
    width: 1px;
    vertical-align: top;
}

/*
SiteMap Styles end-----------------------------------------------
*/
/* RSS Feed Styles begin -----*/
.RssFeedTitle {
    font-size: 1em;
    font-weight: normal;
}

.RssFeedDescription {
    color: #76797C;
    font-size: .85em;
    font-weight: normal;
    line-height: 12px;
    text-align: left;
}

.RssFeedLink {
    font-size: .85em;
    font-weight: normal;
}

/* RSS Feed Styles end -----*/



/*  ===========
    typography
    =========== */

/* ---------------------------------------------------------------------------------------*/
/* LABEL STYLES */
/*Same as NormalTextBox*/
.Label {
    font-weight: normal;
    /*color: #666;*/
    font-size: 1em;
}

.LabelBold {
    font-weight: bold;
}

/* ---------------------------------------------------------------------------------------*/
/* DATA STYLES */
/*Same as LabelBold */
.Data {
    color: #333;
    font-weight: bold;
    font-size: .85em;
}

.DataLabel {
    padding-right: 5px;
    color: #666;
    font-size: .85em;
}

.DataHead {
    padding-right: 5px;
    color: #333;
    font-size: .85em;
}

.DataHeadGrey {
    padding-right: 5px;
    color: #666;
    font-size: .85em;
}

.DataSubHead {
    padding-right: 5px;
    color: #333;
    font-size: .85em;
}

/* ---------------------------------------------------------------------------------------*/
/* TEXT STYLES */
/* text style used for most text rendered by modules */
.Normal {
    font-weight: normal;
}

.NormalBold {
    font-weight: bold;
}

.NormalBack {
    background-color: #eee;
}

.NormalBoldLarge {
    font-weight: bold;
    font-size: 1.2em;
}

.NormalItalic {
    font-style: italic;
}

/* text style used for error messages */
.NormalRed {
    color: #c00;
    font-weight: bold;
    font-size: 1.2em;
}

/* text style used for error messages */
.SmallRed {
    color: #c00;
    font-weight: bold;
    font-size: 0.85em;
}

/* text style used for error messages */
.SmallRedWarning {
    color: #c00;
    font-weight: bold;
    font-size: 0.85em;
    background-color: #ffe8e7;
    padding: 5px;
    border-radius: 5px;
}

.sds-table-container {
    display: table;
    width: 60%;
}

.sds-table-row {
    display: table-row;
}

.sds-table-cell {
    display: table-cell;
    text-align: left;
}

.PolicyText {
    font-size: .85em;
}

.Hint {
    padding-right: 5px;
    color: #666;
    font-size: .85em;
}


/* ---------------------------------------------------------------------------------------*/
/* Chemical Approval Form TEXT STYLES */

.ca-title {
    color: #666;
    font-weight: bold;
    font-style: italic;
    font-size: 1.2em;
}

.ca-header1 {
    font-size: 1.2em;
    font-weight: bold;
}

.ca-header2 {
    font-size: 1.1em;
    font-weight: bold;
}

.ca-instruction {
    background-color: #f7e9b4;
    padding: 10px;
    font-weight: bold;
    max-width: fit-content;
}


/* ---------------------------------------------------------------------------------------*/
/* HEADER STYLES */
.RedHeaderBoldText {
    color: #fff;
    background-color: #0f4876;
    font-size: 1em;
    padding: 5px;
}

.SubSectionTitle {
    color: #666;
    font-weight: bold;
    font-style: italic;
}

.SubSectionHeader {
    color: #FFF;
    background-color: #0f4876;
    font-weight: normal;
    padding: 6px;
}

.SubSectionHeaderClean {
    font-weight: bold;
    font-size: 1.2em;
    color: #0f4876;
    border-bottom-color: #d07a20;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    white-space: nowrap;
    padding: 18px 0 5px 0;
}

/*  ===========
    decorative
    =========== */

.rule-below {
    font-size: 1.15em;
    padding: 0 0 .2em 0;
    margin: 0 0 1.5em 0;
    border-bottom: 3px solid #d07a20;
    color: #0f4876;
}

.TopLightBack {
    background-color: #f4f4f4;
}

.LightBack {
    background-color: #f4f4f4;
}

.WhiteBack {
    background-color: #fff;
}

.watermark {
    color: #999;
}

.SpacerLine {
    border-top: 3px solid #d07a20;
    margin: 5px 0;
}

.DividerLineDark {
    border-bottom: 1px solid #999999;
}

.DividerLineMedium {
    border-bottom: 1px solid #cccccc;
}

.DividerLineLight {
    border-bottom: 1px solid #dddddd;
}

/* ---------------------------------------------------------------------------------------*/
/* BOX STYLES */
.ClearContentBox {
    padding: 2px;
    border: 1px solid #d07a20;
}

.BoxAroundTable {
    border: 1px solid #d0d0d0;
    padding: 2px;
}

.StyledBoxAroundTable {
    color: #999;
    background-color: #FFF;
    padding: 2px;
    border: 1px solid #999;
}

.StyledBoxAroundTableBack {
    color: #555;
    background-color: #eee;
    font-size: .85em;
    border: 2px solid #999;
    padding: 2px;
}

.TableHeaderStyle {
    color: #FFF;
    background-color: #555;
    text-align: center;
    font-weight: bold;
    padding: 0 2px;
    border: 1px solid;
    border-color: #999 #ece9d8 #999;
}

.TableItemStyle {
    border-right: #ece9d8 1px solid;
    padding: 0 2px;
    color: #555;
    background-color: #FFF;
    text-align: center;
}

#gridTable {
    border: 1px solid #eee;
    padding: 2px;
}

    #gridTable td {
        border: 1px solid #eee;
    }

.tabular_list {
    border: 1px solid #bbb;
}

    .tabular_list th {
        border: 1px solid;
        border-color: #ddd #999 #888 #ddd;
        background-color: #ddd;
        padding: 2px 2px 0 2px;
    }

    .tabular_list td {
        border: 1px solid;
        border-color: #fff #fff #ece9d8;
        background-color: #fff;
        padding: 1px;
    }

.ShadedBoxAroundTable {
    margin: 5px 0;
    background-color: #eeeeee;
    padding: 3px 3px 0 3px;
}

.MSDSNameTable {
    background-color: #f4f4f4;
    padding: 3px;
}

.LayoutOuterTable {
    width: 100%;
    height: 100%;
    border-spacing: 0;
    padding: 4px;
}

.LayoutInnerTable {
    border-spacing: 0;
    padding: 0;
}

.FullWidth {
    width: 100%;
}

.FullHeight {
    height: 100%;
}

.Right {
    text-align: right;
    margin-right: 1em;
}

.Left {
    text-align: left;
    margin-left: 1em;
}

/* ---------------------------------------------------------------------------------------*/
/* HELP CONTROLS */
.MessagePanel {
    background-position: left center;
    background-position-x: 8px;
    background-image: url(../images/icons/warning.svg);
    background-size: 16px 16px;
    color: #A87000;
    background-repeat: no-repeat;
    background-color: #fcf8e3;
    border: 1px solid #A87000;
    padding: 10px 10px 10px 35px;
    font-weight: normal;
    margin: 20px 0;
    border-radius: 4px;
}

.ErrorPanel {
    background-position: left center;
    background-position-x: 8px;
    background-image: url(../images/icons/error.svg);
    background-size: 16px 16px;
    color: #a94442;
    background-repeat: no-repeat;
    background-color: #F2DEDE;
    border: 1px solid #a94442;
    padding: 10px 10px 10px 35px;
    font-weight: normal;
    margin: 20px 0;
    border-radius: 4px;
}

.SuccessMessagePanel {
    background-position: left center;
    background-position-x: 8px;
    background-image: url(../images/icons/approved.svg);
    background-size: 16px 16px;
    color: #009900;
    background-repeat: no-repeat;
    background-color: #E7EDE9;
    border: 1px solid #009900;
    padding: 10px 10px 10px 35px;
    font-weight: normal;
    margin: 20px 0;
    border-radius: 4px;
}

.PageMessage {
    background: #fcf8e3;
    border: 1px solid #A9A9A9;
    padding: 4px;
    color: #A87000;
    background-color: #fcf8e3;
    border: 1px solid #A87000;
    font-weight: normal;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------------------*/
/* MISC CONTROLS */
.sysconfig {
    color: #666666;
}

.configHeader {
    color: #666666;
    background-color: #eeeeee;
}

#configTable {
    border: 1px solid #cccccc;
}

    #configTable td {
        border-bottom-style: dotted;
        border-bottom-width: 1px;
        border-bottom-color: #888;
        border-left-style: dotted;
        border-left-width: 1px;
        border-left-color: #888;
    }

.chemical-approval-ro td, .chemical-approval-ro th {
    border: 1px solid #e6e6e6;
    padding: 2px;
}

.Highlight {
    color: #000;
    background-color: #ff0;
}

/* ---------------------------------------------------------------------------------------*/
/* BUTTON STYLES */
/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton {
    color: #0f4876;
    background-color: #eee;
    cursor: pointer;
}

.AdminButton {
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.SubmitButton {
    background: none repeat scroll 0 0 #0f4876;
    border: 0 solid #FFFFFF;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 1em;
    font-style: normal;
    font-weight: bold;
    height: 34px;
    margin: 5px 15px 5px 0;
    padding: 0 15px;
    text-align: center;
    text-shadow: 1px 1px #333333;
}

    .SubmitButton:hover {
        background: #0078ae;
    }

.SubmitButtonDisabled {
    color: #999999;
    background-color: #eeeeee;
    font-size: 1em;
    font-style: normal;
    font-weight: bold;
    cursor: pointer;
}

.LinkToSubmitButton {
    background: none repeat scroll 0 0 #0f4876;
    border: 0 solid #FFFFFF;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-size: 1em;
    font-style: normal;
    font-weight: bold;
    height: 34px;
    margin: 5px 15px 5px 0;
    padding: 7px 15px;
    text-align: center;
    text-shadow: 1px 1px #333333;
    text-decoration: none !important;
}

    .LinkToSubmitButton:hover {
        background: #0078ae;
        text-decoration: none !important;
    }

.GridSubmitButton {
    color: #333;
    background-color: #eeeeee;
    font-size: .85em;
    cursor: pointer;
}

.ResetButton {
    color: #d07a20;
    background-color: #eee;
    border: 1px solid #999;
    padding: 2px;
    font-size: .7em;
    cursor: pointer;
}

/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
    text-decoration: underline;
    color: #0f4876;
}

A.CommandButton:visited {
    color: #0f4876;
}

A.CommandButton:hover {
    color: #c00;
    text-decoration: underline;
}

A.CommandButton:active {
    text-decoration: underline;
    color: #0f4876;
}

A.AdminButton:link {
    text-decoration: underline;
    color: #0f4876;
}

A.AdminButton:visited {
    color: #0f4876;
}

A.AdminButton:hover {
    color: #0f4876;
    text-decoration: underline;
}

A.AdminButton:active {
    text-decoration: underline;
    color: #0f4876;
}

/* ---------------------------------------------------------------------------------------*/
/* FAQ STYLES */
.FAQQuestionLetter, .FAQQuestion {
    color: #0f4876;
    font-size: 1em;
    font-style: normal;
}

.FAQAnswerLetter {
    clear: left;
    float: left;
    color: #0f4876;
    font-size: .85em;
    font-style: normal;
}

.FAQAnswer {
    left: 5px;
    width: 85%;
    color: #555;
    position: relative;
    font-size: .85em;
    font-style: normal;
    display: inline-block;
}


/*  ===========
    components
    =========== */

/* ---------------------------------------------------------------------------------------*/
/* MODULE CONTROLS */
/* style for module titles */
.ModuleTitle {
    padding-left: 5px;
    font-weight: bold;
    color: #333;
}

.OffsetModuleTitle {
    position: relative;
    left: 15px;
    top: -15px;
    color: #555;
    background-color: #FFF;
    font-weight: bold;
    padding: 0 4px;
}

.GreyOffsetModuleTitle {
    position: relative;
    left: 15px;
    top: -15px;
    color: #555;
    background-color: #eee;
    padding: 5px;
    font-weight: bold;
    border: 1px solid #eee;
}

.ModuleBoxGreyLine {
    border: 1px solid #d0d0d0;
}

.ModuleBoxGreyLineGreyBack {
    background-color: #eee;
    border: 1px solid #d0d0d0;
    padding: 5px;
}

.StepNumber {
    background: none repeat scroll 0 0 #d07a20;
    border-radius: 0.8em;
    color: #FFFFFF;
    display: inline-block;
    font-size: 0.95em;
    font-weight: bold;
    line-height: 1.6em;
    margin: 0 5px;
    text-align: center;
    width: 1.6em;
}

.StepTitle {
    color: #555;
    font-size: 1em;
    padding-left: 5px;
}


.Head {
    color: #555;
    font-weight: bold;
    padding: 0 5px;
}

/* style of item titles on edit and admin pages */
.SubHead {
    color: #0f4876;
    font-weight: bold;
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
    color: #555;
    font-weight: bold;
}

/* style of item titles by Announcements and events */
.ItemTitle {
    color: #0f4876;
    font-weight: bold;
}

.HelpSDSOnDemandLink {
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------------------------*/
/* FORM CONTROLS */
/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox, .FormEntry {
    height: 30px;
    padding: 2px 6px;
    font-size: 1em;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

    .NormalTextBox:focus, .FormEntry:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

.DropDownBox {
    height: 34px;
    padding: 2px 6px;
    line-height: 1.428571429;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

    .DropDownBox:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

.FormLabel {
    display: inline-block;
    margin-left: 5px;
    font-weight: bold;
}

.FormEntry {
    font-weight: normal;
}

fieldset {
    margin: 1px 0px 20px 10px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #cccccc;
    padding: 2px 10px 10px 10px;
}

legend {
    display: block;
    padding: 4px 4px 4px 0;
    font-weight: bold;
    font-size: 1em;
    width: auto;
    border: none;
    color: #666666;
    margin-bottom: 0;
    background-color: #FFF;
}

.FormEntryReadOnly {
    background-color: #eee;
}

.TruncatedLabel {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 230px;
    font-weight: bold;
}

.TruncatedProductName {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 500px;
    font-weight: bold;
}

.SearchBox {
    height: 30px;
    width: 100%;
    max-width: 100%;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.SearchBoxBold {
    font-weight: bold;
}

.SearchBox:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.ui-widget {
    font-family: "Arial Unicode MS", Arial, Helvetica, Sans-Serif;
    font-size: .85em;
}

    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
        background-color: #0f4876;
        color: #fff;
        font-family: "Arial Unicode MS", Arial, Helvetica, Sans-Serif;
        font-size: .85em;
        border: none;
        line-height: normal;
        vertical-align: middle;
        text-align: center;
        overflow: visible;
        margin-right: 1em;
        padding: .5em 1em;
        float: right;
    }

        .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button:disabled {
            background-color: #ccc;
            color: #fff;
            font-family: "Arial Unicode MS", Arial, Helvetica, Sans-Serif;
            font-size: .85em;
            border: none;
            line-height: normal;
            vertical-align: middle;
            text-align: center;
            overflow: visible;
            margin-right: 1em;
            padding: .5em 1em;
            float: right;
        }

.ui-widget-content {
    background: #ffffff;
}

.ui-widget-header {
    background: #0f4876;
    font-weight: normal;
    color: #fff;
}

    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        background: #fff;
        border: transparent;
    }

    .ui-state-hover,
    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-state-focus,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        background: #eeeeee
    }

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active {
        background: #0f4876;
        border: 1px solid #0f4876;
    }

    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        background: #fbf9ee;
    }

    .ui-state-error,
    .ui-widget-content .ui-state-error,
    .ui-widget-header .ui-state-error {
        background: #fef1ec;
        color: #cd0a0a;
    }

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0;
}

/*  =====================
    component arts styles
    ===================== */

/* ---------------------------------------------------------------------------------------*/
/* GRID CONTROL - EeeDataGridBase automatically applies these. */
.GridStyle {
    color: #0f4876;
    background-color: #FFF;
    border: 1px solid #eee;
    padding: 0 3px;
    font-size: 1em;
    font-style: normal;
}

.HeaderStyle {
    vertical-align: top;
    color: #0f4876;
    background-color: #fff;
    text-align: left;
}

.HeaderStyleCentered {
    text-align: center;
}

.HeaderStyleBorder {
    border-left: 1px solid #eee;
    border-bottom: 2px solid #0f4876;
}

.ItemStyle {
    vertical-align: top;
    color: #555;
    background-color: #FFF;
    text-align: left;
}

/* applies to items, alternating items, selected items, edit items. */
.ItemStyleBorder {
    border: 1px solid #eee;
    padding-left: 5px;
}

.AlternatingItemStyle {
    vertical-align: top;
    color: #555;
    background-color: #FFF;
    text-align: left;
}

.SelectedItemStyle {
    vertical-align: top;
    color: #555;
    background-color: #b0d4e3;
    text-align: left;
}

.EditItemStyle {
    vertical-align: top;
    color: #555;
    background-color: #b0d4e3;
    text-align: left;
}

.FooterStyle {
    vertical-align: top;
    color: #555;
    background-color: #b0d4e3;
    text-align: left;
}

.FooterStyleBorder {
    border: 1px solid #eeeeee;
}

.PagerStyle {
    vertical-align: middle;
    color: #555;
    background-color: #fff;
    text-align: left;
}

/* ---------------------------------------------------------------------------------------*/
/* WEBUI TREE CONTROL */
.TreeNodeRow {
    height: 20px;
}

.TreeView {
    background-color: #fff;
    cursor: default;
    padding: 5px;
}

.TreeViewNoBorder {
    background-color: #fff;
    cursor: default;
    padding: 5px;
}

.TreeNode {
    color: #555;
    padding: 2px 3px 1px 3px;
    font-size: .9em;
}

.GrayedTreeNode {
    color: #666;
    cursor: default;
    font-size: .9em;
    padding: 2px 3px 1px 3px;
}

.HoverTreeNode {
    color: #0f4876;
    text-decoration: underline;
    cursor: default;
    font-size: .9em;
    padding: 2px 3px 1px 3px;
}

.SelectedTreeNode {
    background-color: #0f4876;
    color: #FFF;
    cursor: default;
    font-size: .9em;
    padding: 2px 3px 1px 3px;
}

.SelectedHoverTreeNode {
    text-decoration: underline;
    background-color: #0f4876;
    color: #FFF;
    cursor: default;
    font-size: .9em;
    padding: 2px 3px 1px 3px;
}

/* ---------------------------------------------------------------------------------------*/
/* MENU CONTROLS */
/*WebUI Action Menu */
.ActionMenuButton {
    font-size: .85em;
    cursor: pointer;
    color: #0f4876;
    background-color: #eee;
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    height: 22px;
    margin: 2px 0;
}

    .ActionMenuButton:hover {
        color: #FFF;
        background-color: #0078ae;
    }

.ActionMenuDeleted {
    color: #999;
    border: 1px solid #999;
    font-size: .85em;
}

.TopItem img, .TopItemHover img {
    width: 15px;
    height: 10px;
    margin-bottom: 3px;
}

.TopItem {
    cursor: pointer;
    color: #0f4876;
    background-color: #eee;
    border-bottom: 1px solid #666;
    border-left: 1px solid #CCC;
    border-right: 1px solid #666;
    border-top: 1px solid #CCC;
}

.TopItemHover {
    cursor: pointer;
    color: #FFF;
    background-color: #0078ae;
    border-bottom: 1px solid #CCC;
    border-left: 1px solid #666;
    border-right: 1px solid #CCC;
    border-top: 1px solid #666;
}

.MenuItem {
    cursor: pointer;
    background-color: #f0f7fa;
    border: 1px solid #ccc;
}

.MenuItemHover {
    cursor: pointer;
    color: #fff;
    background-color: #0f4876;
    border: 1px solid #666;
}

.MenuItemDown {
    cursor: pointer;
    color: #555;
    background-color: #eee;
    border: 1px solid #666;
}

.DisabledMenuItem {
    cursor: pointer;
    color: #808080;
    background-color: #ccc;
    border: 1px solid #666;
}

.DisabledMenuItemHover {
    cursor: pointer;
    color: #808080;
    background-color: #ccc;
    border: 1px solid #666;
}

.DisabledMenuItemDown {
    cursor: pointer;
    color: #808080;
    background-color: #d3d3d3;
    border: 1px solid #666;
}

/*WebUI PortalMenu Menu */
/* Menu groups -------------------------------------------- */

.PortalMenuGroupClass {
    cursor: pointer;
    border-bottom: #333 1px solid;
    border-right: #ababab 1px solid;
    border-left: #333 1px solid;
    border-top: #333 1px solid;
    background: #FFF;
    padding: 2px 5px;
}

.PortalMenu {
    padding: 5px 0 0 5px;
    border-bottom: 3px solid #0f4876;
}

.PortalMenuMainClass {
    cursor: pointer;
    position: relative;
    overflow: visible;
    color: #777777;
    min-height: 40px;
    z-index: 2;
    bottom: -3px;
}

/* Top item styles ------------------------------------ */
.PortalMenuTopItem {
    color: #0f4876;
    padding: 5px 15px 6px;
    bottom: 5px;
}

.PortalMenuTopItemHover {
    color: #777777;
    padding: 5px 15px 6px;
    bottom: 5px;
}

.PortalMenuTopItemSelected {
    background: #0f4876 !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px #333333;
    font-weight: bold;
    padding: 5px 15px 6px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 5px solid #d07a20;
    bottom: 3px;
}

/* Default item styles ------------------------------------ */
.PortalMenuItem {
    color: #0f4876;
    padding: 4px;
    margin: 2px;
    font-size: .9em;
}

.PortalMenuItemHover {
    color: #777777;
    padding: 4px;
    margin: 2px;
    font-size: .9em;
}

/* Selected item styles ------------------------------------ */
.PortalMenuSelectedItem {
    cursor: pointer;
    background: #FFF;
    color: #0f4876;
    padding: 4px;
    margin: 2px;
    font-size: .9em;
    border-bottom: #888 1px solid;
    border-right: #aaa 1px solid;
    border-left: #aaa 1px solid;
    border-top: #aaa 1px solid;
}

.PortalMenuSelectedItemHover {
    cursor: pointer;
    background: #FFF;
    color: #c00;
    padding: 4px;
    margin: 2px;
    font-size: .9em;
    border-bottom: #888 1px solid;
    border-right: #aaa 1px solid;
    border-left: #aaa 1px solid;
    border-top: #aaa 1px solid;
}

.PortalMenuSelectedItemExpanded {
    cursor: pointer;
    background: #FFF;
    color: #0f4876;
    padding: 4px;
    margin: 2px;
    font-size: .9em;
    border-bottom: #888 1px solid;
    border-right: #aaa 1px solid;
    border-left: #aaa 1px solid;
    border-top: #aaa 1px solid;
}

/* Child selected item styles ------------------------------------ */
.PortalMenuChildSelectedItem {
    cursor: pointer;
    border-bottom: #888 1px solid;
    border-right: #aaa 1px solid;
    border-left: #aaa 1px solid;
    border-top: #aaa 1px solid;
    background-color: #ffe4c4;
}

.PortalMenuChildSelectedItemHover {
    cursor: pointer;
    border-bottom: #888 1px solid;
    border-right: #aaa 1px solid;
    border-left: #aaa 1px solid;
    border-top: #aaa 1px solid;
    background-color: #e9cfb1;
    color: #000;
}

.PortalMenuChildSelectedItemExpanded {
    cursor: pointer;
    border-bottom: #888 1px solid;
    border-right: #aaa 1px solid;
    border-left: #aaa 1px solid;
    border-top: #aaa 1px solid;
    background-color: #e9cfb1;
    color: #000;
}

/* ---------------------------------------------------------------------------------------*/
/* TAB CONTROLS */
/*WebUI TabStrip */
.TopGroup {
    position: relative;
    width: 100%;
}

.Default_Tab {
    border: 1px solid #aaa;
    background-color: #fff;
    color: #555;
    cursor: pointer;
    font-size: .75em;
    width: 100%
}

.Default_TabHover {
    color: #555;
    border: 1px solid #aaa;
    text-decoration: underline;
    cursor: pointer;
    font-size: .75em;
}

.Selected_Tab {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #0f4876;
    /*border: 1px solid #aaa;*/
    border-image: none;
    color: #fff;
    cursor: default;
    font-size: .75em;
    position: relative;
    top: 0;
    width: 100%;
}

.Disabled_Tab {
    color: #AAA;
    cursor: default;
    font-size: .75em;
    border: 1px solid #666666;
}

.MultiPageNoBorder {
    overflow: auto;
    width: 100%;
    height: calc(100% - 24px);
    position: relative;
    top: -1px;
    background-color: #FFF;
}

.MultiPage {
    background-color: #FFF;
    border: 1pt solid #CCC;
    width: 100%;
    height: calc(100% - 24px);
    position: relative;
    top: -1px;
}

.PageContent {
    overflow: auto;
    width: 100%;
}

.SearchPage {
    background-color: #FFF;
    border: -1pt solid #CCC;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------------------------*/
/* WEBUI TREE GRID CONTROL */
.Grid {
    cursor: default;
    width: 100%;
}

.HeadingCell {
    background-color: #eeeeee;
    padding: 3px;
}

.HeadingCellHover {
    background-color: #eeeeee;
    padding: 3px;
}

.HeadingCellActive {
    padding: 3px;
}

.HeadingCellText {
    cursor: default;
    color: #000;
    text-decoration: underline;
    font-size: .85em;
    padding: 3px;
}

.GRow {
    background-color: #FFF;
}

    .GRow td.DataCell, .GRowAlternate td.DataCell {
        padding: 3px 2px 3px 3px;
        cursor: default;
    }

.HoverRow {
    color: #0f4876;
    text-decoration: underline;
}

    .HoverRow td.DataCell {
        padding: 3px 2px 3px 3px;
    }

.SortedDataCell {
    background-color: #fff;
}

.SelectedRow td.DataCell {
    cursor: default;
    padding: 3px 2px 3px 3px;
    background-color: #0f4876;
    color: #FFF;
}

.ScrollBar {
    background-image: url(../images/scroller/scroller_bg.svg);
    background-size: 16px 17px;
}

.ScrollGrip {
    background-image: url(../images/scroller/scroll_gripBg.svg);
    background-size: 16px 17px;
}

.ScrollPopup {
    background-color: #FFF;
    border: 1px solid #666;
    border-right-width: 2px;
    border-bottom-width: 2px;
    height: 23px;
    color: #0f4876;
}

.VerticalAlignMiddle {
    vertical-align: middle;
}

.VerticalAlignBottom {
    vertical-align: bottom;
}

.VerticalAlignTop {
    vertical-align: top;
}

/* ---------------------------------------------------------------------------------------*/
/* WEBUI RESULTS GRID CONTROL */
.SliderPopup {
    background-color: #FFF;
    border: 1px solid #4B4B6F;
    border-top-color: #9495A2;
    border-left-color: #9495A2;
    width: 200px;
    height: 30px;
    font-weight: bold;
}

.RGrid {
    cursor: default;
    border: 1px solid #d0d0d0;
}

.RGridHidden {
    display: none;
}

.SoftBorder {
    cursor: default;
    border: 1px solid #d0d0d0;
}

.DivRGrid {
    border: 1px solid #d0d0d0;
    overflow: hidden;
    clear: both;
    float: none;
    width: 100%;
    height: 100%;
}

.RGridNoBorder {
    cursor: default;
}

.RHeadingRow {
    background-color: #fff;
}

.RHeadingCell {
    background-color: #fff;
    border-bottom: 2px solid #0f4876;
    border-left: 1px solid #eee;
    padding-bottom: 3px;
}

.RHeadingCellHover {
    background-color: #eee;
    border-left: 1px solid #ffffff;
}

.RHeadingCellActive {
    background-color: #eee;
    border-left: 1px solid #ffffff;
}

.RHeadingCellText {
    cursor: default;
    padding: 2px;
    color: #0f4876;
    text-decoration: underline;
}

.RHeadingCellTextNoUnderline {
    cursor: default;
    padding: 2px;
    color: #0f4876;
    text-decoration: none;
}

.RGridFooter {
    cursor: default;
    padding: 5px;
    vertical-align: bottom;
    display: inline-block;
}

.RGridFooterText {
    color: #555;
    font-size: 1em;
    padding-left: 10px;
}

.RRow {
    background-color: #FFF;
    padding: 2px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    line-height: normal;
}

.RRowAlternate {
    background-color: #f9f9f9;
    padding: 2px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    line-height: normal;
}

    .RRow a, .RRowAlternate a {
        color: #676767;
        text-decoration: underline;
    }

        .RRow a:hover, .RRow a:focus, .RRowAlternate a:hover, .RRowAlternate a:focus {
            color: #676767;
            text-decoration: underline;
        }

.DataCellUnderline a {
    text-decoration: underline;
}

.DataCellNoUnderline a {
    text-decoration: none !important;
}

.RRowDeleted {
    background-color: #FFF;
    padding: 2px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

    .RRowDeleted input {
        visibility: hidden;
    }

.RRow td.DataCell, .RRowAlternate td.DataCell, RSortedDataCell {
    cursor: default;
    padding: 2px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    line-height: normal;
}

.RRowDeleted td.DataCell {
    cursor: default;
    padding: 2px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    color: #888
}

.RRowCheckBoxCell input[type="checkbox"] {
    margin: 0;
    height: 22px;
    background: transparent;
}

.RHoverRow {
    color: #0f4876;
    text-decoration: underline;
}

    .RHoverRow td.DataCell {
        padding: 2px;
    }

.RRow td.LastDataCell {
    background-color: #C69;
}

.RSelectedRow {
    padding: 2px;
    vertical-align: top;
}

    .RSelectedRow a {
        color: #676767;
        text-decoration: underline;
    }

    .RSelectedRow td.DataCell {
        cursor: default;
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;
        background-color: #C4DEEA;
        color: #555;
        padding: 2px;
        vertical-align: top;
        line-height: normal;
    }

.RScrollBar {
    background-image: url(../images/scroller/scroller_bg.svg);
    background-size: 16px 17px;
}

.RScrollGrip {
    background-image: url(../images/scroller/scroll_gripBg.svg);
    background-size: 16px 17px;
}

.RScrollPopup {
    background-color: #FFF;
    border: 1px solid #666;
    border-right-width: 2px;
    border-bottom-width: 2px;
    height: 23px;
    color: #0f4876;
}

/* Fix for blank id column visible false not working*/
.undefined > div {
    width: 0 !important;
}

/* ---------------------------------------------------------------------------------------*/
/* From CustomRegListManager */

/*.StepTable {
    background-color: #FFF;
    border-width: 0;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}*/

.DivIndexGrid {
    border: 1px solid #D3D3D3;
    padding: 0;
    overflow: auto;
}

.IndexGridRow {
    background-color: #ffffff;
}

.IndexGridHeadingCell {
    padding-right: 10px;
}

.IndexGridDataCell {
    cursor: default;
    padding: 2px;
    border-bottom: 1px solid #FFF;
}

.IndexSelectedRow {
    color: #0f4876;
    background-color: #eeeeee;
}

    .IndexSelectedRow td.DataCell {
        cursor: default;
        padding: 2px 2px 3px 3px;
    }

.IndexEditDataCell {
    padding: 0;
}

.IndexEditDataField {
    padding: 0;
}

/*.DialogMSDSDocsButton {
    color: #0f4876;
    background-color: #eeeeee;
    width: 75px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.DialogMSDSDocsContent {
    background-color: #FFFAF0;
    width: 100%;
}

    .DialogMSDSDocsContent a {
        text-decoration: underline;
    }

.DialogMSDSDocs {
    border: 1px solid #57566F;
    clear: both;
    display: block;
    float: none;
    position: absolute;
}

.DialogMSDSDocsHeader {
    background-color: #3f3f3f;
    padding: 5px;
}

.DialogMsdsDocsHeaderText {
    color: #FFF;
    cursor: move;
    padding-left: 4px;
    width: 100%;
    font-size: 1em;
}*/

.SnapOnTop {
    position: fixed !important;
    width: 98vw !important;
    z-index: 9999 !important;
    top: 10vw !important;
    left: 1vw !important;
}

@media (min-width: 768px) {
    .SnapOnTop {
        width: 65vw !important;
        left: 10vw !important;
        top: 10vw !important;
    }
}

@media (min-width: 992px) {
    .SnapOnTop {
        width: 55vw !important;
        left: 10vw !important;
        top: 10vw !important;
    }
}


.Dialog {
    border: 1px solid #0F4876;
    clear: both;
    display: block;
    float: none;
}

.DialogNoBorder {
    clear: both;
    display: block;
    float: none;
}

.DialogHeader {
    background-color: #0F4876;
    padding: 5px;
}

.DialogHeaderIcon {
    cursor: move;
}

.DialogHeaderText {
    color: #FFF;
    cursor: move;
    padding-left: 4px;
    width: 100%;
    font-size: 1em;
    font-weight: bold;
}

.DialogHeaderMinimize {
    cursor: pointer;
    padding: 2px 2px 0;
}

.DialogContent {
    background-color: #FFFAF0;
    width: 100%;
    padding: 5px;
    line-height: 1.75em;
}

.DialogButtonPanel {
    display: block;
    float: right;
    vertical-align: bottom;
    width: 100%;
    padding: 10px 0 2px 0;
    background-color: #D0D0D0;
}

.DialogButton {
    float: right;
    color: #0f4876;
    background-color: #eee;
    margin-right: 10px;
    padding: 0 10px;
}

.DialogFooter {
    background-color: #D0D0D0;
    padding: 5px;
}

input.DialogCloseButton {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.DialogGridDiv {
    border: 1px solid #d0d0d0;
    overflow: hidden;
    clear: both;
    float: none;
    width: 100%;
    height: 100%;
    background-color: #FFF;
}

.DialogGrid {
}

.DialogGridRow {
    background-color: #FFF;
    padding: 1px 1px 1px 3px;
    cursor: default;
}

.DialogGridHoverRow {
    color: #0f4876;
}

.DialogGridHeadingCell {
    border: 0;
    padding-right: 10px;
    height: 1px;
}

.DialogGridDataCell {
    border-bottom: 1px solid #EAE9E1;
    cursor: default;
    padding: 1px;
    font-size: .85em;
}

.DialogGridFooter {
    clear: both;
    padding-right: 10px;
    vertical-align: bottom;
}

.DialogGridFooterText {
    color: #555;
    float: right;
    font-size: .7em;
}

.DialogGridLoading {
    font-size: 1em;
    color: #0f4876;
    background-color: #fcf8e3;
    padding: 15px;
    border: 1px solid #D2D2D2;
    border-radius: 4px;
    font-weight: bold;
    position: relative;
    display: block;
    float: none;
}

.DialogGridSliderPopup {
    background-color: #fcf8e3;
    border: 1px solid #4B4B6F;
    border-top-color: #9495A2;
    border-left-color: #9495A2;
    width: 150px;
    height: 25px;
    font-size: .85em;
}

.DialogTreeBorder {
    border: 1px solid #d0d0d0;
}

.DialogTreeContent {
    border: 1px solid #d0d0d0;
    background: #FFF;
    height: 100%;
    line-height: 16px;
}

.DialogTree {
    background-color: #FFF;
    cursor: default;
    padding: 4px 0 0 1px;
}

.DialogTreeView input[type='checkbox'] {
    height: 16px;
}

.DialogTreeNode {
    padding: 2px;
    cursor: default;
    font-size: .85em;
}

.DialogTreeNodeBold {
    padding: 2px;
    cursor: default;
    font-weight: bold;
    font-size: .85em;
}

.DialogTreeNodeHover {
    padding: 2px;
    color: #0f4876;
    cursor: default;
    font-size: .85em;
}

.DialogTreeNodeSelected {
    padding: 2px;
    cursor: default;
    font-size: .85em;
}

.DialogHoverTreeNodeRow {
    color: #0f4876;
    cursor: default;
    font-size: .85em;
}

.DialogPrompt {
    color: #555;
    padding: 0 0 5px 0;
}

.DialogTextArea {
    background-color: #FFF;
    border: 1px solid #d0d0d0;
    overflow: auto;
    width: 100%;
    padding: 5px;
}

.DialogTextLine {
    background-color: #FFF;
    border: 1px solid #d0d0d0;
    overflow: hidden;
    width: 100%;
    margin: 10px 0 5px 0;
}

.DialogGridPageInfoText {
    color: #999;
}

/* ---------------------------------------------------------------------------------------*/
/* From DateRangePicker */

.DateRangePickerLabel {
    cursor: default;
    vertical-align: middle;
}

.DateRangePicker {
    height: 30px;
    padding: 2px 6px;
    font-size: 1em;
    line-height: 1.428571429;
    color: #333;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.DateRangeCalendarButton {
    border: none;
    cursor: pointer;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

.DateRangeCalendar {
    background-color: #FFF;
    cursor: default;
    border-collapse: collapse;
    border-left: 1px solid #D7D7E5;
    border-right: 1px solid #D7D7E5;
    border-top: 1px solid #D7D7E5;
    border-bottom: 1px solid #D7D7E5;
}

    .DateRangeCalendar td {
    }

.DateRangeTitle {
    background-color: #d07a20;
    font-weight: bold;
    color: #333333;
}

.DateRangeDay {
    width: 25px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #f6f6f6;
}

.DateRangeDayHover {
    width: 25px;
    cursor: pointer;
    text-align: center;
    text-decoration: underline;
    border: 1px solid #f6f6f6;
}

.DateRangeDayHeader {
    width: 25px;
    text-align: center;
    background-color: #FFF;
    border: 1px solid #fff;
    font-weight: bold;
}

.DateRangeOtherMonthDay {
    color: #999;
}

.DateRangeOutOfRangeDay {
    visibility: hidden;
}

.DateRangeSelectedDay {
    width: 25px;
    background-color: #7f9db9;
    color: #fff;
    font-weight: bold;
    border: 1px solid #0f4876;
}

.DateRangeMonth {
    background-color: #F6F6F6;
    margin: 0 5px 5px 5px;
}

.DateRangeNextPrev {
    cursor: pointer;
    height: 25px;
    vertical-align: middle;
    padding: 0 5px;
}

.DateRangeSelector {
    width: 14px;
    cursor: pointer;
    text-align: left;
    vertical-align: middle;
    background-color: #FFF;
}

/* ---------------------------------------------------------------------------------------*/
/* From GridResult */
.DivGridResult {
    border: 1px solid #D3D3D3;
    padding: 0;
    overflow: auto;
}

.GridResult {
}

.GridResultHeader {
}

.GridResultHeaderText {
}

.GridResultFooter {
    clear: both;
    padding: 5px;
    vertical-align: bottom;
}

.GridResultFooterText {
    color: #000;
}

.GridResultHeadingRow {
    background: transparent url(../images/heading_bg.gif) no-repeat;
}

    .GridResultHeadingRow td.GridResultHeadingCell {
        padding: 1px 0 1px 0;
    }

    .GridResultHeadingRow td.GridResultHeadingCellHover {
        background: transparent url(../images/heading_hoverBg.gif) no-repeat;
    }

    .GridResultHeadingRow td.GridResultHeadingCellActive {
        background: transparent url(../images/heading_activeBg.gif) no-repeat;
    }

.GridResultGridHeadingRow td.GridResultHeadingCellFirst {
    background: transparent url(../images/heading_rowBg.gif) no-repeat;
}

.GridResultGridHeadingRow td.GridResultHeadingCellNonClickable {
    background: transparent url(../images/heading_bg.gif) no-repeat;
}

.GridResultHeadingCellText {
    color: #333;
    text-align: left;
    cursor: default;
    padding: 3px 0 5px 3px;
    font-weight: bold;
}

.GridResultHeadingCellTextNonClickable {
    color: #333;
    text-align: left;
    cursor: default;
    font-weight: bold;
    padding: 3px 0 5px 3px;
}

.GridResultRow {
    padding: 2px 2px 2px 3px;
    background-color: #FFF;
    cursor: default;
}

    .GridResultRow td.GridResultDataCell {
        border: 1px solid #e6e6e6;
    }

    .GridResultRow td.GridResultDataCellFirst {
        border-bottom: 1px solid #E6E6E6;
    }

.GridResultAlterRow {
    padding: 2px 2px 2px 3px;
    background-color: #F6F6F8;
    cursor: default;
}

    .GridResultAlterRow td.GridResultDataCell {
        border-left: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
    }

    .GridResultAlterRow td.GridResultDataCellFirst {
        border-bottom: 1px solid #E6E6E6;
    }

.GridResultHoverRow {
    color: #0f4876;
    padding: 2px 2px 2px 3px;
    background-color: #FFF;
    cursor: default;
}

    .GridResultHoverRow td.GridResultDataCell {
        border-left: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
    }

    .GridResultHoverRow td.GridResultDataCellFirst {
        border-bottom: 1px solid #E6E6E6;
    }

.GridResultAlterHoverRow {
    color: #0f4876;
    padding: 2px 2px 2px 3px;
    background-color: #F6F6F8;
    cursor: default;
}

    .GridResultAlterHoverRow td.GridResultDataCell {
        border-left: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
    }

    .GridResultAlterHoverRow td.GridResultDataCellFirst {
        border-bottom: 1px solid #E6E6E6;
    }

.GridResultSliderPopup {
    background-color: #fcf8e3;
    border: 1px solid #4B4B6F;
    border-top-color: #9495A2;
    border-left-color: #9495A2;
    width: 150px;
    height: 25px;
}

.GridResultTopHeader {
    color: #696969;
}

.GridResultPageInfoText {
    color: #808080;
}

.GridResultPageSizeText {
    color: #212529;
}

.GridResultPageSizeValue {
    color: #555555;
}

.GridResultPageSizeMenuTopGroup {
    background-color: #FFF;
    font-weight: bold;
}

.GridResultPageSizeMenuTopGroupHover {
    color: #0f4876;
    cursor: default;
    font-weight: bold;
}

.GridResultPageSizeMenuGroup {
    background-color: #FFF;
    border: solid 1px #D3D3D3;
}

.GridResultPageSizeMenuItem {
    color: #676767;
    cursor: default;
}

.GridResultPageSizeMenuItemSelected {
    color: #fff;
    background-color: #3399ff;
    cursor: default;
}

.GridResultPageSizeMenuItemHover {
    color: #fff;
    background-color: #3399ff;
    cursor: default;
}

.GridResultPageSizeMenuDisabledItem {
    color: #808080;
    background-color: #FFF;
    cursor: default;
}

.GridResultPageSizeMenuDisabledItemHover {
    color: #808080;
    background-color: #C0C0C0;
    cursor: default;
}

.GridResultPageSizeMenuBreak {
    padding: 0;
}

.GridResultDataValueOnList {
    color: #0f4876;
    font-weight: normal;
    vertical-align: middle;
    cursor: default;
}

.GridResultDataValueNameOnList {
    color: #000;
    font-weight: normal;
    cursor: pointer;
    text-decoration: underline;
}

.GridResultDataValueNameNotOnList {
    color: #808080;
    font-weight: normal;
    cursor: default;
}

.GridResultDataValueChanged {
    color: #0f4876;
    font-weight: normal;
    cursor: pointer;
    text-decoration: underline;
}

.GridResultDataValueNameChanged {
    color: #000;
    font-weight: normal;
    cursor: pointer;
    text-decoration: underline;
}

.GridResultDataValueNameNotChanged {
    color: #808080;
    font-weight: normal;
    cursor: default;
}

.GridResultToolTipRegulationAnalysis {
    background: #ffffe0;
    border: 1px solid #676767;
    padding: 4px;
}

.GridResultToolTipRegulationImpactAnalysis {
    background: #ffffe0;
    border: 1px solid #676767;
    padding: 4px;
}

/* ---------------------------------------------------------------------------------------*/
/* From MonthRangePicker */

table.MonthSelector {
    white-space: nowrap;
    border-style: none;
    border: 1px solid #666;
    background-color: #eee;
}

    table.MonthSelector table.year {
        white-space: nowrap;
        font-weight: bold;
    }

        table.MonthSelector table.year #year {
            width: 100%;
            text-align: center;
            cursor: default;
            vertical-align: middle;
            color: #0f4876;
            font-weight: bold;
        }

        table.MonthSelector table.year td a {
            color: #0f4876;
            padding: 1px;
            text-decoration: none;
            font-weight: bold;
        }

            table.MonthSelector table.year td a:hover {
                color: #0f4876;
                background-color: #eee;
                text-decoration: underline;
            }

    table.MonthSelector table.month {
        text-align: center;
        border-collapse: collapse;
        border: 1px solid #FFF;
        background-color: #F5F5F5;
        font-size: 85%;
    }

        table.MonthSelector table.month td a {
            padding: 4px;
            display: block;
            text-decoration: none;
        }

            table.MonthSelector table.month td a:link, table.MonthSelector table.month td a:visited, table.MonthSelector table.month td a:active {
                color: #666;
                background-color: #eee;
            }

            table.MonthSelector table.month td a:hover {
                color: #FFF;
                background-color: #0f4876;
            }

/*  =====================
    old table styles
    ===================== */

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.no-wrap {
    white-space: nowrap;
}

.v-top {
    vertical-align: top;
}

.v-middle {
    vertical-align: middle;
}

.v-bottom {
    vertical-align: bottom;
}

/*  =====================
    bootstrap overrides
    ===================== */

.table-responsive {
    overflow-y: hidden;
}

/*  =====================
    miscellaneous
    ===================== */

/* ---------------------------------------------------------------------------------------*/
/* NAVBAR */

.navbarTitle {
    background-color: #E4E4E5;
    background-position: right center;
    background-image: url(../images/ArrowButtonDown.gif);
    background-repeat: no-repeat;
    padding: 5px;
    font-size: 75%;
    border: 1px solid #999;
}

.navbarTitleSelected {
    background-color: #E4E4E5;
    background-position: right center;
    background-image: url(../images/ArrowButtonUp.gif);
    background-repeat: no-repeat;
    padding: 5px;
    font-size: 75%;
    border: 1px solid #999;
}

A.navBarTitle:link, A.navBarTitle:visited, A.navBarTitle:hover, A.navBarTitle:active {
    text-decoration: none;
}

A.navBarTitleSelected:link, A.navBarTitleSelected:visited, A.navBarTitleSelected:hover, A.navBarTitleSelected:active {
    text-decoration: none;
}

.navbarSpacer {
    font-size: 6px;
}

.navbarContent {
    background-color: #f4f4f4;
    padding: 10px;
}

/* ---------------------------------------------------------------------------------------*/
/* List Bullets */
.level1 {
    padding: 5px;
    font-size: 1em;
}

.level2 {
    padding: 5px;
    font-size: 1em;
}

.bullet {
    padding: 5px;
    background-image: url(../images/highlight_selected.svg);
    background-size: 17px 17px;
    background-repeat: no-repeat;
}



/* ------- .ac_* jquery.autocomplete --------------- */
.preapprovals {
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ac_watermark {
    background: white url('../images/3eSuggestWatermark.gif') no-repeat left center;
}

.ac_input {
    background-color: white;
}

.ac_results {
    padding: 0;
    border: 1px solid #7f9db9;
    background-color: white;
    overflow: hidden;
    z-index: 99999;
}

    .ac_results ul {
        width: 100%;
        list-style-position: outside;
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: auto;
        height: 200px;
    }

    .ac_results li {
        margin: 0;
        padding: 2px 5px;
        cursor: default;
        display: block;
        line-height: 16px;
        overflow: hidden;
        color: #666
    }

.ac_loading {
    background: white url('../images/spinner.gif') right center no-repeat;
}

.ac_odd {
    background-color: #eee;
}

.ac_over {
    background-color: #FFF4D7;
}


/*Authoring Wizard Styles*/

.nav-pills.nav-wizard .nav-link {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-pills.nav-wizard > li {
    position: relative;
    overflow: visible;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    list-style: none;
}

    .nav-pills.nav-wizard > li + li {
        margin-left: 0;
    }

    .nav-pills.nav-wizard > li:first-child {
        border-left: 0;
    }

        .nav-pills.nav-wizard > li:first-child a {
            border-radius: 5px 0 0 5px;
        }

    .nav-pills.nav-wizard > li:last-child {
        border-right: 0;
    }

        .nav-pills.nav-wizard > li:last-child a {
            border-radius: 0 5px 5px 0;
        }

    .nav-pills.nav-wizard > li a {
        border-radius: 0;
        background-color: #eee;
        text-decoration: none;
    }

    .nav-pills.nav-wizard > li:not(:last-child) a:after {
        position: absolute;
        content: "";
        top: 0;
        right: -15px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 0 15px 15px;
        border-color: transparent transparent transparent #eee;
        z-index: 150;
    }

    .nav-pills.nav-wizard > li:not(:first-child) a:before {
        position: absolute;
        content: "";
        top: 0;
        left: -15px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 0 15px 15px;
        border-color: #eee #eee #eee transparent;
        z-index: 150;
    }

    .nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
        border-color: transparent transparent transparent #0078ae;
    }

    .nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
        border-color: #0078ae #0078ae #0078ae transparent;
    }

    .nav-pills.nav-wizard > li:hover a {
        background-color: #0078ae;
        color: #fff;
    }

    .nav-pills.nav-wizard > li:not(:last-child) a.active:after {
        border-color: transparent transparent transparent #0f4876;
    }

    .nav-pills.nav-wizard > li:not(:first-child) a.active:before {
        border-color: #0f4876 #0f4876 #0f4876 transparent;
    }

    .nav-pills.nav-wizard > li a.active {
        background-color: #0f4876;
    }

.nav-link {
    padding: 0.5rem !important;
}

/* Add GHS Pictograms Legend. TEOA-5318 */
body.ghs-annex3-popup-body {
    margin: 8px;
}

.ghs-annex3-popup-body .ghs-pictogram-column {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.ghs-annex3-popup-body #pnlGhsPictograms {
    width: 960px;
}

    .ghs-annex3-popup-body #pnlGhsPictograms fieldset {
        border: none;
        margin: 0;
    }

        .ghs-annex3-popup-body #pnlGhsPictograms fieldset legend {
            text-align: center;
            color: #000;
        }

    .ghs-annex3-popup-body #pnlGhsPictograms .pictogram-label {
        font-weight: bold;
    }