/*Style.css*/

body {
    margin: 0px 0px;
    behavior: url("css/csshover3.htc");
    /*text-align: center; why would we want to do this?!?! */
}

.cssValidator {
    background-color: LightPink;
    /*background-color: green;*/
}

div#page_wrapper {
    background: none repeat scroll 0 0 transparent;
    border: 15px solid transparent;
    margin-left: 0;
    margin-right: auto;
    min-width: 1100px;
    text-align: left;
}

h2 {
    font-family: verdana, arial, sans-serif;
    font-weight: bold;
    font-size: 14pt;
}

h3 {
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

A:link {
    /*color: #0000FF; does not play nicely with Themes*/
    text-decoration: none !important;
}

A:visited {
    /*color: #0000FF; does not play nicely with Themes*/
    text-decoration: none !important;
}

A:active {
    /*color: #0000FF; does not play nicely with Themes*/
    text-decoration: none !important;
}

A:hover {
    /*color: #FF0000; does not play nicely with Themes*/
    text-decoration: underline !important;
}

#wrapper {
    overflow: hidden;
    background: #FFFFFF;
}

#header_wrapper {
    width: 100%;
    text-align: left;
}

#header {
    height: 60px;
    padding: 15px;
    background: url('../img/header_bg.gif') top right no-repeat;
    margin: 0px;
    text-align: left;
}

    #header h1 {
        margin: 0px;
        font-family: verdana, arial, sans-serif;
        font-size: 28px;
        color: #ffffff;
        letter-spacing: -1px;
    }

    #header h2 {
        margin: 0px;
        font-family: verdana, arial, sans-serif;
        font-size: 14px;
        color: #B1C6EB;
        letter-spacing: 1px;
    }

.tdLeftSide {
    background: none repeat scroll 0 0 transparent;
    vertical-align: top;
    width: 160px;
}

#left_side {
    padding: 1px;
}

td.right_side {
    width: 13%;
    vertical-align: top;
}

.content {
    padding-left: 10px;
    padding-top: 1px; /*trust me - needed to lign up with LHS menu rounded panel*/
    text-align: left;
    vertical-align: top;
    background: #FFFFFF;
}

#content_twopanels {
    margin-top: 20px;
    margin-bottom: 0px;
    margin-left: 180px;
    margin-right: 180px;
}

#left-side, .content, #right-side {
    min-height: 400px;
    height: 500px !important;
}

#footer {
    width: 100%;
    height: 50px;
    text-align: center;
    padding-top: 12px;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 18px;
}


    #footer A:link {
        text-decoration: none;
    }

    #footer A:visited {
        text-decoration: none;
    }

    #footer A:active {
        text-decoration: none;
    }

    #footer A:hover {
        text-decoration: underline;
    }

#left_side p, #right_side p {
    margin: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 16px;
    text-align: left;
}

#left_side h3, #right_side h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 4px;
    font-family: verdana, arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    color: #FFFFFF;
    border: 1px solid #0F3974;
    background-color: #2153AA;
}

#left_side h4, #right_side h4 {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    color: #2153AA;
}

.content p, td {
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

/* MAP STYLE TESTING
.content h3, .contentiframe h3, #content h3
{
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: verdana, arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    color: #2153AA;
}

.content h4, .contentiframe h4, #content h4
{
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: verdana, arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 12px;
    color: #2153AA;
}
*/


#content_twopanels p, .tableLogin > tbody > tr > td {
    margin-top: 15px;
    margin-bottom: 15px;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #333333;
}

#content_twopanels h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: verdana, arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    color: #2153AA;
}

#content_twopanels h4 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: verdana, arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 12px;
    color: #2153AA;
}

.featurebox_center {
    background-color: #fffff6;
    margin: 5px 0px 5px 0px;
    padding: 10px;
    border: 1px solid #DFE8F7;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 18px;
    color: #333333;
}

    .featurebox_center ul {
        margin: 0px 10px 0px 10px;
        padding: 0px 10px 0px 10px;
    }

.featurebox_side {
    background-color: #fffff6;
    margin: 5px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #DFE8F7;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    line-height: 18px;
    color: #333333;
}

.featurebox_side_ASPxRoundPanel {
    margin-bottom: 5px;
}



td {
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
    /*color: #333333; messes with Themes (in particular Blackglass) */
}

.TenderHeadings {
    width: 140px;
}

.TenderDetail {
    width: 420px;
}


/*ARUN*/

.tinytext {
    width: 50px;
}

.shorttext {
    width: 200px;
}

.longertext {
    width: 280px;
}

.longtext {
    width: 360px;
}

.extralongtext {
    width: 500px;
}

/* with a bit of help from DX... https://www.devexpress.com/support/center/Question/Details/T366810 */
.dxMemo {
    width: 500px;
    height: 5.1em; /* about 4 lines but varies by theme*/
}

    .dxMemo textarea {
        padding: 0px !important;
        margin: 0px !important;
        height: 100%;
        resize: vertical;
    }

    .dxMemo td {
        padding: 0px !important;
    }


.dxCheckBoxFlushLeft {
    padding-left: 0px !important;
}

    .dxCheckBoxFlushLeft > span {
        margin-left: 0px;
    }


table:focus {
    /* Remove blue focus border in Chrome
       https://www.devexpress.com/support/center/Question/Details/T427348
       https://www.devexpress.com/support/center/Question/Details/T298560 */
    outline: none;
}

div.topButtonPanel {
    float: right;
    /* so it slots in nicely next to things like the Banners (BannerPivot, BannerGrid, etc)*/
    vertical-align: middle;
    padding-left: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
}

div.topButtonPanelLeft {
    float: left;
    /* so it slots in nicely next to things like the Banners (BannerPivot, BannerGrid, etc)*/
    vertical-align: middle;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.middle {
    vertical-align: middle;
}

table.dxButton {
    display: inline-table;
}

table.editTable {
    width: 100%;
    /*border-collapse: separate;*/
    border-spacing: 0px 3px;
}
    /* must specify path due to DX using tables to render controls */
    table.editTable > tbody > tr > td.TenderHeading {
        width: 180px;
    }

    table.editTable > tbody > tr > td {
        text-align: left;
        vertical-align: top;
        /*background-color: yellowgreen;*/
    }

    table.editTable td > div { /* we dont want div's taking on inherited border-spacing! */
        border-collapse: collapse;
    }

    /* this *WILL* format DX controls because they use tables to render controls */
    table.editTable table td {
        vertical-align: middle;
    }


span.error {
    color: Red;
    font-size: 11px;
}

table.mainTable {
    width: 100%;
    margin-top: 10px;
}

    table.mainTable tr {
        margin: 0px;
        padding: 0px;
    }

input[type="button"] {
    padding: 2px;
}

.contentiframe {
    padding-left: 0px;
    padding-top: 0px;
    text-align: left;
    vertical-align: top;
    background: transparent;
}

.maintableiframe {
    width: 100%;
}

#ui-datepicker-div {
    display: none;
}

.HeadingWithButton {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.HeadingWithButtonRight {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.FlexLayoutCoreLeft, .FlexLayoutCoreRight {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px; /* read 7 lines below! */
}

    .FlexLayoutCoreLeft > :first-child {
        flex-grow: 1;
        /*background-color: yellow;*/
        margin-right: 10px;
        margin-bottom: 0px !important; /* this strips the margin off PageHeader.ascx first div, and margin re-applied to flex-div, see above */
    }

    .FlexLayoutCoreRight > :last-child {
        flex-grow: 1;
        /*background-color: red;*/
        margin-left: 10px;
        margin-bottom: 0px !important; /* this strips the margin off PageHeader.ascx first div, and margin re-applied to flex-div, see above */
    }

/* the alternate left-pads the second child, rather then right-padding the first child. Good for when the second child might not exist and we want to 
     span the entire width
 */
.FlexLayoutCoreLeftAlternate {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px; /* read 7 lines below! */
}

    .FlexLayoutCoreLeftAlternate > :first-child {
        flex-grow: 1;
        /*background-color: yellow;*/
        margin-bottom: 0px !important; /* this strips the margin off PageHeader.ascx first div, and margin re-applied to flex-div, see above */
    }

    .FlexLayoutCoreLeftAlternate > :nth-child(2) {
        /*background-color: red;*/
        padding-left: 10px;
        margin-bottom: 0px !important; /* this strips the margin off whatever it finds (div, button etc), and margin re-applied to flex-div, see above */
    }


.flexible { /* define this on the container only! See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    /*border: solid purple;*/
    display: flex;
    flex-direction: row; /* the default */
    align-items: center;
}

    .flexible > :first-child { /* strip left margin so we act more like padding */
        margin-left: 0px;
    }

    .flexible > :last-child { /* strip right margin so we act more like padding */
        margin-right: 0px;
    }

.flex-expander { /*define this on the item you want to take up the remaining room, or on all items if you want equal spacing*/
    flex-grow: 1;
    /*background-color: seagreen;*/
}

/*:root {
    --tinyGap: 150px; IE doesn't understand CSS variables :(
}*/

.flex-left { /*within flexible class, aligns left*/
    /*border: solid blue;*/
    align-self: center;
    text-align: left;
    margin: 0 2px;
}

.flex-centered { /*within flexible class, aligns horizontally centered*/
    /*border: solid green;*/
    align-self: center;
    text-align: center;
    margin: 0 2px;
}

.flex-right { /*within flexible class, aligns right*/
    /*border: solid red;*/
    align-self: center;
    text-align: right;
    margin: 0 2px;
}


.clearfix {
    clear: both;
}

td.popupField, td.popupValue {
    height: 30px;
    padding: 3px;
}


/******************************************************/
/******************* New Menu Item ********************/
/******************************************************/

.inlineHome td a {
    text-decoration: none;
    color: White;
    font-weight: normal !important;
    font-size: 19px;
    font-family: 'Segoe UI';
    height: 100%;
    width: 100%;
    display: table;
    border-collapse: collapse; /* this is critical so we don't take on border defs below of 60px*/
    /*background-color: yellow;*/
}

    .inlineHome td a span {
        /*width: 100%;*/
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        /*background-color: red;*/
    }

    .inlineHome td a:hover {
        text-decoration: none !important;
        /*background-color: red;*/
    }

.inlineHome table {
    border-collapse: separate;
    border-spacing: 60px 0px;
    margin-left: -60px; /*because border spacing is applied to all sides, including LHS*/
}

.inlineHome td:hover a {
    color: black; /*ensures we have correct font color when mouse over cell (the highlight colour in this case) */
}

.inlineHome td {
    padding: 0px;
}

    /* --------------- GREEN --------------- */
    .inlineHome td.green {
        border-radius: 10px;
        background-color: #73A00C;
    }

        .inlineHome td.green:hover {
            background-color: #AFC874;
            background-color: #92B543;
        }


    /* --------------- ORANGE --------------- */
    .inlineHome td.orange {
        border-radius: 10px;
        background-color: #F99A36;
    }

        .inlineHome td.orange:hover {
            background-color: #F9AE5F;
        }


    /* ---------------- BLUE ---------------- */
    .inlineHome td.blue {
        border-radius: 10px;
        background-color: #529EEF;
    }

        .inlineHome td.blue:hover {
            background-color: #74B0F1;
        }


    /* -------------- DARK BLUE -------------- */
    .inlineHome td.darkblue {
        border-radius: 10px;
        background-color: #1F497D;
    }

        .inlineHome td.darkblue:hover {
            background-color: #4A74A8;
        }


    /* --------------- PURPLE --------------- */
    .inlineHome td.purple {
        border-radius: 10px;
        background-color: #9033BE;
    }

        .inlineHome td.purple:hover {
            background-color: #9f5fbe;
        }

    .inlineHome td.green,
    .inlineHome td.orange,
    .inlineHome td.blue,
    .inlineHome td.purple,
    .inlineHome td.darkblue {
        background-repeat: no-repeat;
        width: 182px;
        height: 100px;
    }

    .inlineHome td.header {
        height: 34px;
        padding-left: 10px;
        padding-bottom: 6px;
        font-weight: normal !important;
        /*font-weight: bold;*/
        font-size: 20px;
        font-family: 'Segoe UI';
        vertical-align: bottom;
    }



.pivot_aqua {
    background-color: #FFFFFF;
    border-collapse: separate !important;
    border-width: 0;
    color: #4F4F4F;
}

    .pivot_aqua tr td.header {
        background: url('/TenderManagement/DXR.axd?r=0_95-ktQp4') repeat-x scroll center top #E2F0FF;
        border: 1px solid #A3C0E8;
        cursor: pointer;
        font-weight: normal;
        overflow: hidden;
        padding: 5px;
        text-align: left;
        white-space: nowrap;
    }

    .pivot_aqua tr td.body {
        border: 1px solid #BED6F6;
        overflow: hidden;
        padding: 4px 5px 5px;
        vertical-align: top;
    }

    .pivot_aqua tr td.readonly {
        background-color: #EEE;
    }

.ratingGauge {
    white-space: nowrap;
    font-size: 0pt;
    width: 62px;
    height: 12px;
    padding: 1px 0 1px 1px;
    margin: 1em;
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    background-image: url(../img/rating/ratingGauge.png);
}

    .ratingGauge .ratingItem {
        font-size: 0pt;
        width: 12px;
        height: 8px;
        margin: 0;
        padding: 0;
        display: block;
        background-repeat: repeat-x;
        cursor: pointer;
    }

    .ratingGauge .Filled {
        background-color: #F1DF42;
    }

    .ratingGauge .Empty {
        background-color: #fff;
    }

    .ratingGauge .Saved {
        /*background-color: #ABD935;*/
    }

.PurchasingFormheader {
    height: 70px;
    background-color: #DBE5f1;
    color: #4f81BD;
    font: lighter 16px Verdana,sans-serif;
}

.PurchasingFormtd1 {
    background-color: #DBE5f1;
    color: #538ED5;
    height: 100px;
    font: bold 12px Verdana,sans-serif;
    display: table-cell;
    width: 235px;
}

.PurchasingFormtd2 {
    background-color: #B8CCE4;
    color: #538ED5;
    height: 100px;
    font: bold 12px Verdana,sans-serif;
    width: 235px;
}

.PurchasingFormtd1content {
    background-color: #DBE5f1;
    color: #538ED5;
    height: 130px;
    font: bold 12px Verdana,sans-serif;
}

.PurchasingFormtd2content {
    background-color: #B8CCE4;
    color: #538ED5;
    height: 130px;
    font: bold 12px Verdana,sans-serif;
}

.PurchasingFormtd1content a {
    color: #538ED5;
    text-decoration: none;
    cursor: pointer;
}

.PurchasingFormtd2content a {
    color: #538ED5;
    text-decoration: none;
    cursor: pointer;
}

.PurchasingFormtd1 a {
    color: #538ED5;
    text-decoration: none;
    cursor: pointer;
}

.PurchasingFormtd2 a {
    color: #538ED5;
    text-decoration: none;
    cursor: pointer;
}

.PurchasingFormimg {
    margin-top: -35px;
    position: relative;
}

/* NEVER REFERENCED, TIME TO GO...
.HrefButton {
    font: normal 12px Tahoma, Geneva, sans-serif;
    border-collapse: separate;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    background-color: #E2F0FF;
    height: 30px;
    color: #2C4D79;
    padding: 2px 10px 3px;
    border-top: 1px solid #A3C0E8;
    border-right: 1px solid #A3C0E8;
    border-bottom: 1px solid #A3C0E8;
    border-left: 1px solid #A3C0E8;
}

    .HrefButton:hover {
        color: #2C4D79;
        text-decoration: none;
        background-color: #FEDC75;
        cursor: pointer;
    }

    .HrefButton:active {
        color: #2C4D79;
        text-decoration: none;
        cursor: pointer;
    }

    .HrefButton:link {
        color: #2C4D79;
        text-decoration: none;
        cursor: pointer;
    }

    .HrefButton:visited {
        color: #2C4D79;
        text-decoration: none;
        cursor: pointer;
    }

    .HrefButton a {
        color: #2C4D79;
        text-decoration: none;
        cursor: pointer;
    }

        .HrefButton a:active {
            color: #2C4D79;
            text-decoration: none;
            cursor: pointer;
        }

        .HrefButton a:link {
            color: #2C4D79;
            text-decoration: none;
            cursor: pointer;
        }

        .HrefButton a:visited {
            color: #2C4D79;
            text-decoration: none;
            cursor: pointer;
        }

        .HrefButton a:hover {
            color: #2C4D79;
            text-decoration: none;
            background-color: #FEDC75;
            cursor: pointer;
        }
*/


.dxInline {
    display: inline-table;
    vertical-align: middle;
}

.divInline {
    display: inline-block;
    vertical-align: middle;
}

.spacerLeft { /* tiny gap to the left */
    margin-left: 4px;
}

.spacerRight { /* tiny gap to the right */
    margin-right: 4px;
}

.gapLeft { /* bigger gap to the left */
    margin-left: 10px;
}

.gapRight { /* bigger gap to the right */
    margin-right: 10px;
}

.Inline {
    display: inline;
}

.reset-this {
    animation: none;
    animation-delay: 0;
    animation-direction: normal;
    animation-duration: 0;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-name: none;
    animation-play-state: running;
    animation-timing-function: ease;
    backface-visibility: visible;
    background: 0;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: repeat;
    background-size: auto auto;
    border: 0;
    border-style: none;
    border-width: medium;
    border-color: inherit;
    border-bottom: 0;
    border-bottom-color: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-collapse: separate;
    border-image: none;
    border-left: 0;
    border-left-color: inherit;
    border-left-style: none;
    border-left-width: medium;
    border-radius: 0;
    border-right: 0;
    border-right-color: inherit;
    border-right-style: none;
    border-right-width: medium;
    border-spacing: 0;
    border-top: 0;
    border-top-color: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-style: none;
    border-top-width: medium;
    bottom: auto;
    box-shadow: none;
    box-sizing: content-box;
    caption-side: top;
    clear: none;
    clip: auto;
    color: inherit;
    columns: auto;
    column-count: auto;
    column-fill: balance;
    column-gap: normal;
    column-rule: medium none currentColor;
    column-rule-color: currentColor;
    column-rule-style: none;
    column-rule-width: initial;
    column-span: initial;
    column-width: auto;
    content: normal;
    counter-increment: none;
    counter-reset: none;
    cursor: auto;
    direction: ltr;
    display: inline;
    empty-cells: show;
    float: none;
    font: normal;
    font-family: inherit;
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    hyphens: none;
    left: auto;
    letter-spacing: normal;
    line-height: normal;
    list-style: none;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: disc;
    margin: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    orphans: 0;
    outline: 0;
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: auto;
    perspective: none;
    perspective-origin: 50% 50%;
    position: static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes: '\201C' '\201D' '\2018' '\2019';
    right: auto;
    tab-size: 8;
    table-layout: auto;
    text-align: inherit;
    text-align-last: auto;
    text-decoration: none;
    text-decoration-color: inherit;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    top: auto;
    transform: none;
    transform-style: flat;
    transition: none;
    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: none;
    transition-timing-function: ease;
    unicode-bidi: normal;
    vertical-align: baseline;
    visibility: visible;
    white-space: normal;
    width: auto;
    word-spacing: normal;
    z-index: auto;
}

div.center-outer {
    text-align: center;
}

div.center-inner {
    display: inline-block;
}

div.center-fixed200 {
    /*must know width so not so good*/
    width: 200px;
    margin: 0px auto;
}

.rightAlignText {
    text-align: right;
    /*border: solid;
    border-width: 1px;
    border-color: blue;*/
}





/* Special Highlighting (used mostly with ASPxButtons) */
.special,
.specialHottracked,
.specialPressed {
    background: url(../img/specialButton.png) !important;
    color: White !important;
    border: 0 !important;
    padding: 0 !important;
    width: 90px;
    height: 30px;
}

.specialHottracked {
    background-position: -92px 0px !important;
    color: #FAD9E0 !important;
}

.specialPressed {
    background-position: -184px 0px !important;
    color: #DCB7C8 !important;
}

.autoUpdateField {
    background-color: #66CC91;
    /*#E2EFE0;*/
}

.HideMe {
    display: none;
}

/*Thank you http://jsfiddle.net/Eric/fRaU7/14/  */
.Bullet-item {
    margin-left: 30px;
}

    .Bullet-item img {
        display: inline-block;
        vertical-align: middle;
        margin-left: -30px;
        margin-right: 4px;
    }

    .Bullet-item span {
        display: inline-block;
        vertical-align: middle;
    }

.MultiRoundPanelTable > tbody > tr > td, .MultiRoundPanelTable > li {
    padding-bottom: 5px;
}

ul.MultiRoundPanelTable {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.MultiRoundPanelTable li {
    margin: 3px;
}

.dmaxImageButtonRealign {
    vertical-align: super;
}

.FinePrint {
    font-size: x-small;
    vertical-align: sub;
}

/* The rendering for the EmptyDataRow looks like this:
  <table>
     <tr id="MainContent_grdSiteFunction_dxdt0_grdExcludeCompanyToSiteFunction_0_DXEmptyRow" class="dxgvEmptyDataRow_BlackGlass myTestClass">
        <td class="dxgv" colspan="3" style="border-bottom-width: 0px;">
           <img title="New Record" src="img/new_grey_16.png" alt="New" style="cursor: pointer;" />
           <div>
              No Data to display
           </div>
        </td>
     </tr>
  </table>
I use the style below to adjust it. This is applied globally via dmaxGridView.cs
*/
.grdEmptyDataLeftAlign td {
    padding: 30px 30px !important;
    /*background-color: blanchedalmond;*/
    text-align: left !important;
    font-size: 125%;
}

.grdEmptyDataLeftAlign img {
    padding: 2px;
    vertical-align: middle;
}

.grdEmptyDataLeftAlign div {
    padding: 2px;
    display: inline-block;
    vertical-align: middle;
}

hr.SubTotal {
    text-align: left; /*for IE & Opera */
    margin-left: -15px; /*for Firefox, Chrome, and Safari */
    color: #8c8b8b; /* do color and background-color */
    background-color: #8c8b8b; /* for cross-browser support */
}

hr.SubTotalHidden {
    text-align: left; /*for IE & Opera */
    margin-left: -15px; /*for Firefox, Chrome, and Safari */
    opacity: 0;
    /*color: transparent;  do color and background-color */
    /*background-color: transparent;  for cross-browser support */
}

td.SubTotal {
    border-bottom: 1px solid #8c8b8b;
}

hr.Total {
    text-align: left; /*for IE & Opera */
    margin-left: -20px; /*for Firefox, Chrome, and Safari */
    border-top: 4px double #8c8b8b;
    border-left: none;
    border-right: none;
}

hr.TotalHidden {
    text-align: left; /*for IE & Opera */
    margin-left: -20px; /*for Firefox, Chrome, and Safari */
    border-top: 4px double transparent;
    border-left: none;
    border-right: none;
    opacity: 0;
}

td.Total {
    border-bottom: 4px double #8c8b8b;
}

.dxTransparentRoundPanel {
    border: none;
    /*border: none !important;*/
    /*border-bottom: 2px solid gray;*/
    padding: 0px;
    background-color: transparent;
    width: 100%;
}

    .dxTransparentRoundPanel .dxrp-headerClickable {
        display: none; /* equivalent to HeaderStyle CssClass */
    }

    .dxTransparentRoundPanel .dxrpcontent {
        border: 0px solid red !important; /* equivalent to Border-BorderStyle="None" */
        background-image: none !important; /* on some themes such as Glass */
        background-color: transparent !important; /* on some themes such as Glass */
    }

    .dxTransparentRoundPanel .dxrpCW {
        padding: 0px !important; /* equivalent to ContentPaddings-Padding="0px" */
    }

.dxPackedDownButton div { /* handy next to dx controls if you want a button on the OUTSIDE (rather then internal to dx control) */
    padding: 0px 2px !important;
    border-top-style: none !important;
    border-top-color: inherit !important;
    border-top-width: medium;
    border-bottom-style: none !important;
    border-bottom-color: inherit !important;
    border-bottom-width: medium;
}

.dxgvFocusedRow_RedWine a, .dxgvFocusedRow_RedWine span { /* see https://www.devexpress.com/support/center/Question/Details/T487874 This *should* be removable after upgrade issue still exists under ForumPosts.ascx */
    color: white;
}

.dxgvSelectedRow_RedWine .dxgvBatchEditModifiedCell_RedWine, .dxgvFocusedRow_RedWine .dxgvBatchEditModifiedCell_RedWine { /* see https://www.devexpress.com/support/center/Question/Details/T493172 */
    color: black;
}

/* Clear Filter fix-up. Should be fixed by DX after upgrade https://www.devexpress.com/support/center/Question/Details/T488147 */
.dxgvFilterRow .dxgvCommandColumnItem, /* Default theme */
.dxgvFilterRow_iOS .dxgvCommandColumnItem_iOS,
.dxgvFilterRow_Aqua .dxgvCommandColumnItem_Aqua,
.dxgvFilterRow_Glass .dxgvCommandColumnItem_Glass,
.dxgvFilterRow_DevEx .dxgvCommandColumnItem_DevEx,
.dxgvFilterRow_RedWine .dxgvCommandColumnItem_RedWine,
.dxgvFilterRow_Moderno .dxgvCommandColumnItem_Moderno,
.dxgvFilterRow_Material .dxgvCommandColumnItem_Material,
.dxgvFilterRow_Mulberry .dxgvCommandColumnItem_Mulberry,
.dxgvFilterRow_Youthful .dxgvCommandColumnItem_Youthful,
.dxgvFilterRow_SoftOrange .dxgvCommandColumnItem_SoftOrange,
.dxgvFilterRow_BlackGlass .dxgvCommandColumnItem_BlackGlass,
.dxgvFilterRow_Metropolis .dxgvCommandColumnItem_Metropolis,
.dxgvFilterRow_PlasticBlue .dxgvCommandColumnItem_PlasticBlue,
.dxgvFilterRow_MetropolisBlue .dxgvCommandColumnItem_MetropolisBlue,
.dxgvFilterRow_Office2003Blue .dxgvCommandColumnItem_Office2003Blue,
.dxgvFilterRow_Office2003Olive .dxgvCommandColumnItem_Office2003Olive,
.dxgvFilterRow_Office2003Silver .dxgvCommandColumnItem_Office2003Silver,
.dxgvFilterRow_Office2010Black .dxgvCommandColumnItem_Office2010Black,
.dxgvFilterRow_Office2010Blue .dxgvCommandColumnItem_Office2010Blue,
.dxgvFilterRow_Office2010Silver .dxgvCommandColumnItem_Office2010Silver {
    display: block;
}

/* This is an IE fix. Input elements of type image within a grid do not show the pointer cursor. This chunk fixes that across all themes. I could probably be less cautious and just apply this
   without all the theme references, but better to be safe them break something. Note that we do it for both the focus rows and data rows (2 items on each line).
*/
.dxgvTable .dxgvDataRow input[type="image"], .dxgvTable .dxgvFocusedRow input[type="image"],
.dxgvTable_iOS .dxgvDataRow_iOS input[type="image"], .dxgvTable_iOS .dxgvFocusedRow_iOS input[type="image"],
.dxgvTable_Aqua .dxgvDataRow_Aqua input[type="image"], .dxgvTable_Aqua .dxgvFocusedRow_Aqua input[type="image"],
.dxgvTable_DevEx .dxgvDataRow_DevEx input[type="image"], .dxgvTable_DevEx .dxgvFocusedRow_DevEx input[type="image"],
.dxgvTable_Glass .dxgvDataRow_Glass input[type="image"], .dxgvTable_Glass .dxgvFocusedRow_Glass input[type="image"],
.dxgvTable_RedWine .dxgvDataRow_RedWine input[type="image"], .dxgvTable_RedWine .dxgvFocusedRow_RedWine input[type="image"],
.dxgvTable_Moderno .dxgvDataRow_Moderno input[type="image"], .dxgvTable_Moderno .dxgvFocusedRow_Moderno input[type="image"],
.dxgvTable_Material .dxgvDataRow_Material input[type="image"], .dxgvTable_Material .dxgvFocusedRow_Material input[type="image"],
.dxgvTable_Mulberry .dxgvDataRow_Mulberry input[type="image"], .dxgvTable_Mulberry .dxgvFocusedRow_Mulberry input[type="image"],
.dxgvTable_Youthful .dxgvDataRow_Youthful input[type="image"], .dxgvTable_Youthful .dxgvFocusedRow_Youthful input[type="image"],
.dxgvTable_SoftOrange .dxgvDataRow_SoftOrange input[type="image"], .dxgvTable_SoftOrange .dxgvFocusedRow_SoftOrange input[type="image"],
.dxgvTable_BlackGlass .dxgvDataRow_BlackGlass input[type="image"], .dxgvTable_BlackGlass .dxgvFocusedRow_BlackGlass input[type="image"],
.dxgvTable_Metropolis .dxgvDataRow_Metropolis input[type="image"], .dxgvTable_Metropolis .dxgvFocusedRow_Metropolis input[type="image"],
.dxgvTable_PlasticBlue .dxgvDataRow_PlasticBlue input[type="image"], .dxgvTable_PlasticBlue .dxgvFocusedRow_PlasticBlue input[type="image"],
.dxgvTable_MetropolisBlue .dxgvDataRow_MetropolisBlue input[type="image"], .dxgvTable_MetropolisBlue .dxgvFocusedRow_MetropolisBlue input[type="image"],
.dxgvTable_Office2003Blue .dxgvDataRow_Office2003Blue input[type="image"], .dxgvTable_Office2003Blue .dxgvFocusedRow_Office2003Blue input[type="image"],
.dxgvTable_Office2003Olive .dxgvDataRow_Office2003Olive input[type="image"], .dxgvTable_Office2003Olive .dxgvFocusedRow_Office2003Olive input[type="image"],
.dxgvTable_Office2003Silver .dxgvDataRow_Office2003Silver input[type="image"], .dxgvTable_Office2003Silver .dxgvFocusedRow_Office2003Silver input[type="image"],
.dxgvTable_Office2010Black .dxgvDataRow_Office2010Black input[type="image"], .dxgvTable_Office2010Black .dxgvFocusedRow_Office2010Black input[type="image"],
.dxgvTable_Office2010Blue .dxgvDataRow_Office2010Blue input[type="image"], .dxgvTable_Office2010Blue .dxgvFocusedRow_Office2010Blue input[type="image"],
.dxgvTable_Office2010Silver .dxgvDataRow_Office2010Silver input[type="image"], .dxgvTable_Office2010Silver .dxgvFocusedRow_Office2010Silver input[type="image"] {
    cursor: pointer;
    /*cursor: crosshair;*/
}