body { background-color: #F1F0ED; }

.dxnbLite_HATheme a { color: #335CB2; }

.dxsplControl_HATheme, .dxsplVSeparator_HATheme, .dxsplHSeparator_HATheme, .dxsplPane_HATheme, .dxsplPaneCollapsed_HATheme, .dxsplVSeparator_HATheme, .dxsplHSeparator_HATheme, .dxsplVSeparatorCollapsed_HATheme, .dxsplHSeparatorCollapsed_HATheme { border: 0px solid white; }

.headerPane {
    background-color: #F1F0ED;
    border: 0px solid white;
}

th #ASPxSplitter1_Content_ContentSplitter_MainContent_tlReportSite1_DX-DnD-H-2.dxtlHeader_HATheme.dxtl__B3.dxtl {
    background-color: red;
    border: solid rgba(0, 0, 0, .1);
    border-width: 0 0 1px;
    box-sizing: border-box;
    color: #fff;
}

td #ASPxSplitter1_Content_ContentSplitter_1_S.dxsplVSeparator_HATheme.dx-ac.dxsplVSeparatorHover_HATheme {
    background-color: #88ACEC;
    border: solid #fff;
    border-width: 0 1px 1px;
    box-sizing: border-box;
    cursor: w-resize;
    font-size: 0;
    padding: 0;
    text-align: center;
    width: 12px;
}

td #ASPxSplitter1_Content_ContentSplitter_1_S_CB.dxsplVSeparatorButton_HATheme.dxsplVSeparatorButtonHover_HATheme { background-color: #335CB2; }

td #ASPxSplitter1_Content_ContentSplitter_1_S_CF.dxsplVSeparatorButton_HATheme.dxsplVSeparatorButtonHover_HATheme { background-color: #335CB2; }







div #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_GHE0.dxnb-header.dxnb-header {
    background-color: #CFCEC4;
    color: #fff;
    font-weight: 500;
}

div #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_GHE1.dxnb-header.dxnb-header {
    background-color: #CFCEC4;
    color: #fff;
    font-weight: 500;
}

div #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_GHE2.dxnb-header.dxnb-header {
    background-color: #CFCEC4;
    color: #fff;
    font-weight: 500;
}

div #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_GHE3.dxnb-header.dxnb-header {
    background-color: #CFCEC4;
    color: #fff;
    font-weight: 500;
}

div #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_GHE4.dxnb-header.dxnb-header {
    background-color: #CFCEC4;
    color: #fff;
    font-weight: 500;
}

div #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_GHE5.dxnb-header.dxnb-header {
    background-color: #CFCEC4;
    color: #fff;
    font-weight: 500;
}





li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I0i0_.dxnb-item.dxnb-itemSelected.dxnb-link { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I0i1_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I0i2_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I0i3_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I1i0_.dxnb-item.dxnb-itemSelected.dxnb-link { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I1i1_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I1i2_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I1i3_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I2i0_.dxnb-item.dxnb-itemSelected.dxnb-link { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I2i1_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I2i2_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I2i3_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I3i0_.dxnb-item.dxnb-itemSelected.dxnb-link { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I3i1_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I3i2_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

li #ASPxSplitter1_Content_ContentSplitter_ASPxNavBar1_I3i3_.dxnb-item.dxnb-itemSelected.dxnb-link.dxnb-last { background-color: #F1F0ED; }

td #ASPxSplitter1_Content_ContentSplitter_MainContent_cbProfitCenter_B-1.dxeButton.dxeButtonEditButton_HATheme.dxeButtonEditButtonHover_HATheme { background-color: #335CB2; }

td #ASPxSplitter1_Content_ContentSplitter_MainContent_cbDate_B-1.dxeButton.dxeButtonEditButton_HATheme.dxeButtonEditButtonHover_HATheme { background-color: #335CB2; }

td #ASPxSplitter1_Content_ContentSplitter_MainContent_ddPCs_B-1.dxeButton.dxeButtonEditButton_HATheme.dxeButtonEditButtonHover_HATheme { background-color: #335CB2; }

td #ASPxSplitter1_Content_ContentSplitter_MainContent_cbFrom_B-1.dxeButton.dxeButtonEditButton_HATheme.dxeButtonEditButtonHover_HATheme { background-color: #335CB2; }

td #ASPxSplitter1_Content_ContentSplitter_MainContent_cbTo_B-1.dxeButton.dxeButtonEditButton_HATheme.dxeButtonEditButtonHover_HATheme { background-color: #335CB2; }

div #ASPxSplitter1_Content_MainContent_btnLogin_CD.dxb {
    border: 0px solid #2C4390;
    background-color: #335CB2 !important;
    border-radius: 3px;
}

div #ASPxSplitter1_Content_MainContent_btnLogin.dxbButton_HATheme.dxbButtonSys.dxbTSys.dxbButtonHover_HATheme {
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    background-color: #2C4390;
    border-collapse: separate;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    display: inline-table;
    font-family: "Segoe UI", Helvetica, "Droid Sans", Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: normal;
    padding: 1px;
    text-align: center;
    transition-duration: .3s;
    transition-property: box-shadow, background-color;
    transition-timing-function: ease-out;
    vertical-align: middle;
    white-space: nowrap;
    width: 96px;
    border-radius: 3px;
}

div #ASPxSplitter1_Content_MainContent_btnLogin.dxbButton_HATheme.dxbButtonSys.dxbTSys.dxbButton_HATheme {
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    background-color: #2C4390;
    border-collapse: separate;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    display: inline-table;
    font-family: "Segoe UI", Helvetica, "Droid Sans", Tahoma, Geneva, sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: normal;
    padding: 1px;
    text-align: center;
    transition-duration: .3s;
    transition-property: box-shadow, background-color;
    transition-timing-function: ease-out;
    vertical-align: middle;
    white-space: nowrap;
    width: 96px;
    border-radius: 3px;
}

/* CC changes*/

.dxnb-item a:hover {
    color: #FFFFFF !important;
    text-decoration: none;
}

a:hover { color: #88acec !important; }

.content-lightmaster { padding: 20px 20px; }

#ASPxSplitter1_Content_MainContent_tbUserName_I,
#ASPxSplitter1_Content_MainContent_tbPassword_I,
#ASPxSplitter1_Content_MainContent_btnLogin.dxbButton_HATheme.dxbButtonSys.dxbTSys.dxbButton_HATheme,
#ASPxSplitter1_Content_MainContent_tbPassword,
#ASPxSplitter1_Content_MainContent_tbPassword_ET,
#ASPxSplitter1_Content_MainContent_tbUserName,
#ASPxSplitter1_Content_MainContent_tbUserName_ET,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbOldPassword_I,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbOldPassword,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbOldPassword_ET,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbNewPassword_I,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbNewPassword,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbNewPassword_ET,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbNewPasswordCheck_I,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbNewPasswordCheck,
#ASPxSplitter1_Content_ContentSplitter_MainContent_tbNewPasswordCheck_ET { width: 100% !important; }

.dxeCaptionCell_HATheme.dxeCLTSys, .dxeCaptionCell_HATheme.dxeCLBSys { padding: 0 0; }

#ASPxSplitter1_Content_ContentSplitter_MainContent_ddPCs_DDD_tlProfitCenter_0_H > thead,
#ASPxSplitter1_Content_ContentSplitter_MainContent_ddPCs_DDD_tlProfitCenter_0_H > tbody > tr > td:first-child { display: none; }

.dxgvGroupPanel_HATheme .dxgvHeader_HATheme { color: #0A0A0A; }

.ksplogo_container {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.ksplogo_container_image { width: 150px; }

.dxgvHEC { background-color: #FFFFFF !important; }

.dxgvDataRowAlt_Aqua .dxgvHEC { background-color: #F7FAFF !important; }

#Grid_DXHeadersRow0 > .dxgvHEC {
    background-color: #DEEDFF !important;
    border-bottom: 1px Solid #A3C0E8 !important;
}

.dxcPlanEditTextBox input { text-align: right; }

#SumCalculationGreyOverlay {
    position: absolute;
    display: block;
    background-color: rgba(235, 235, 235, 0.9);
    width: 200px;
    height: 200px;
    top: 0;
    /*visibility: collapse;*/
}

#SumCalculationGreyOverlay .RefreshButton {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -67px;
    width: 143px;
    height: 30px;
    border: none;
    background-color: #88ACEC;
    color: #FFF;
    font: 11px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-weight: 500;
    cursor: pointer;
    -webkit-transition-property: box-shadow, background-color;
    -moz-transition-property: box-shadow, background-color;
    -o-transition-property: box-shadow, background-color;
    transition-property: box-shadow, background-color;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-tap-highlight-color: transparent;
}

#SumCalculationGreyOverlay .RefreshButton:hover { background-color: #7AA1E5; }

#SumCalculationGreyOverlay .RefreshButton2 {
    position: absolute;
    top: 50%;
    left: 20%;
    margin-top: -11px;
    margin-left: -67px;
    width: 143px;
    height: 30px;
}

.planValueFieldEnabled {
    width: 80px;
    height: 21px;
    background-color: #FFF;
    border-color: #a9a9a9;
    border-width: 1px;
    border-style: solid;
    padding: 1px 0px;
    overflow: hidden;
}

.palnValueField {
    text-align: right;
    width: 80px;
}

.hidden { display: none; }

#ASPxSplitter1_Content_ContentSplitter_MainContent_PlanContentSplitter_1i1_S { height: 0px !important; }

#ASPxSplitter1_Content_ContentSplitter_MainContent_PlanContentSplitter_gvComments_DXMainTable > tbody > tr > td {
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
}

.ksp-successbox {
    margin: 0 0 15px 0;
    display: block;
    border: 1px solid #00b300;
    background: #009900;
    color: white;
    font-weight: bold;
    padding: 10px 20px 10px 20px;
    width: 620px;
}

.ksp-errorbox {
    margin: 0 0 15px 0;
    display: block;
    border: 1px solid #ff1a1a;
    background: #ff4d4d;
    color: #fff;
    font-weight: bold;
    padding: 10px 20px 10px 20px;
    width: 620px;
}

.transparentStyle { background-color: transparent; }

/* Tile Styles */

.tile-table {
    min-width: 100%;
    min-height: 95%;
    width: 100%;
    height: 95%;
    border: none;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tile-row {
}
body {
    background-color: transparent;
}
.tile-row td {
    width: 11%;
    padding: 5px;
    text-align: left;
}

    .tile-row > td:nth-child(1) {
        width: 150px;
        overflow: hidden;
        text-align: left !important;
    }

.tile {
    width: 100%;
    height: 100%;
    border-radius: 0.5vw;
    overflow: hidden;
    border: 1px solid;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    transition: transform .2s;
    z-index: 90;
    min-width: 150px;
    min-height: 78px;
}

    .tile:hover {
        z-index: 1000;
        transform: scale(1.3);
    }

.tile-empty {
    width: 100%;
    height: 100%;
    border-radius: 0.5vw;
    overflow: hidden;
    background-color: #eaeae8;
    padding: 5px;
    min-width: 150px;
    min-height: 78px;
}

.tile-title {
    min-width: 100px;
    overflow: hidden;
}

.tile-title .tile-title-tab {
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.tile-title .tile-title-caption {
    vertical-align: middle;
    text-align: left;
    font-size: 1.0vw;
    color: #000;
    font-weight: bold;
}

@media (min-width: 100em) {
    .tile-title .tile-title-caption {
        font-size: 16px;
    }
}

.tile tr td span {
    vertical-align: middle;
    text-align: center;
    font-size: 0.58vw;
    font-weight: bold;
    color: #000;
}

.tile tr td {
    width: 50%;
    overflow: hidden;
    text-align: center;
}

.tile tr  {
    height: 50%;
}

@media (max-width: 80em) {
    .tile-title .tile-title-caption {
        font-size: 13px;
    }
}

@media (max-width: 130em) {
    .tile tr td span {
        vertical-align: middle;
        text-align: center;
        font-size: 13px;
        color: #000;
    }
}

.tile-dblue {
    background-color: #80a1d4;
    border-color: #678ecb;
}

    .tile-dblue tr:first-child td, .tile-dblue tr:first-child td {
        border-color: #678ecb !important;
        border-bottom: 1px solid;
    }

.tile-lblue {
    background-color: #edf5ff;
    border-color: #cbe2ff;
}

    .tile-lblue tr:first-child td, .tile-lblue tr:first-child td {
        border-color: #cbe2ff !important;
        border-bottom: 1px solid;
    }

    .tile-lred {
        background-color: #ffc9b2;
        border-color: #e9aa8f;
    }

        .tile-lred tr:first-child td, .tile-lred tr:first-child td {
            border-color: #e9aa8f !important;
            border-bottom: 1px solid;
        }

    .tile-dred {
        background-color: #ffa680;
        border-color: #e68c65;
    }

        .tile-dred tr:first-child td, .tile-dred tr:first-child td {
            border-color: #e68c65 !important;
            border-bottom: 1px solid;
        }

    .notactive {
        background-color: #b6b6b6;
        border-color: #8c8c8c;
        color: grey;
    }

        .notactive tr:first-child td, .notactive tr:first-child td {
            border-color: #8c8c8c !important;
            border-bottom: 1px solid;
        }
            .notactive tr td span, .notactive tr td span {
                color: grey !important;
            }


/* ARROW */
    tile .arrow {
    position: relative;
}
    .arrow {
    vertical-align: middle;
    display: block;
    height: 25px;
    width: 25px;
        margin: auto auto;
}

        .arrow div {
            position: relative;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

    .arrow-black {
        height: 0px;
        width: 0px;
        border: 12px solid;
        border-color: black black transparent transparent;
    }

        .arrow-black:before {
            content: '';
            position: absolute;
            top: 0px;
            right: 0px;
            display: block;
            height: 12px;
            width: 16px;
            background-color: black;
            transform: rotate(-45deg) translate(2px, 1px);
        }

.arrow-grey {
    height: 0px;
    width: 0px;
    border: 12px solid;
    border-color: grey grey transparent transparent;
}

        .arrow-grey:before {
            content: '';
            position: absolute;
            top: 0px;
            right: 0px;
            display: block;
            height: 12px;
            width: 16px;
            background-color: grey;
            transform: rotate(-45deg) translate(2px, 1px);
        }

    .arrow .top {
        transform: rotate(0deg);
    }

    .arrow .mid {
        transform: rotate(45deg);
    }

    .arrow .down {
        transform: rotate(90deg);
    }

    .overview-popup-table tr td {
        padding: 5px 5px;
    }