﻿/* Reset */

body, form, div, li, h1, h2, h3, h4, h5, h6, pre, fieldset, p, blockquote {
    margin: 0;
    padding: 0;
}

fieldset, img {
    border: 0;
}

/*Menu items*/
ol, ul {
    list-style: none;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

/* Common */
html, body {
    font-family: Calibri, Arial;
    font-size: small;
    background-color: #FFFFFF;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #edf4f4;
}

a {
    color: #f17f21;
}

.popupControl {
    background-color: #ededed !important;
    font-size: medium !important;
    height: 20px !important;
}

.popupWindow {
    -moz-box-shadow: 3px 3px 5px #535353 !important;
    -webkit-box-shadow: 3px 3px 5px #535353 !important;
    box-shadow: 3px 3px 5px #535353 !important;
}

.Formtitle {
    font-family: Calibri !important;
    font-size: 24px !important;
    color: #381f75;
}

.DescriptionTitle {
    font-size: 18px;
    color: #381f75;
}

.divIsTestServer {
    float: left;
    margin-left: 10px;
    text-align: center;
}

.lblIsTestServer {
    color: white;
    font-size: larger;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #ee4023;
    padding: 5px 25px 5px 25px;
}

.BorderIsTestServer {
    border: 1px solid red;
}

.BorderLeftIsTestServer {
    border-left: 1px solid red;
    border-bottom: 1px solid red;
}

.BorderRightIsTestServer {
    border-right: 1px solid red;
    border-bottom: 1px solid red;
}

.DivTitleReport {
    width: 100%;
}

.DivTableReport {
    min-height: 500px;
    padding-bottom: 15px;
}

.DivTableReportReport {
    width: 1000px;
    min-height: 500px;
    padding-bottom: 30px;
    padding-top: 20px;
}

#wrap {
    background-position: center center;
    min-height: 100%;
    display: block;
    height: 100%;
    width: 100%;
    /*background-image: url('../../images/wait.gif');*/
    background-repeat: no-repeat;
}

/*MasterPageDefault1 (Login/ChangePassword/LogOff) */

/*LoginScreen*/


.DivRow {
    display: inline-block;
    width: 100%;
}

.DivHeight {
    border: 0px;
    color: #58595b;
    min-height: 23px;
    width: 360px;
    /*background-color: #e8e8e8;*/
}

.DivTitle {
    display: inline-block;
    color: #58595b;
    text-align: left;
    width: 130px;
    padding-bottom: 4px;
    font-weight: 500;
    line-height: 95%;
    /*background-color: lightpink;*/
}

.DivContent {
    display: inline-block;
    padding-bottom: 6px;
    vertical-align: top;
    /*background-color: lightyellow;*/
    width: 170px;
}

.DivCenter {
    width: 33%;
    padding-top: 160px;
    text-align: center;
    margin: auto;
}

.DivCenterFrame {
    width: 33%;
    padding-top: 40px;
    text-align: center;
    margin: auto;
}

.DivCenterShadow {
    -webkit-box-shadow: 7px 7px 32px -2px rgba(130,149,173,0.61);
    -moz-box-shadow: 7px 7px 32px -2px rgba(130,149,173,0.61);
    box-shadow: 7px 7px 32px -2px rgba(130,149,173,0.61);
}

.DivLoginDetails {
    float: left;
    width: 350px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
}

.Footer {
    background-color: #381f75;
    color: white;
    text-align: left;
    vertical-align: central;
    font-size: 10px;
    font-family: Calibri;
    opacity: 1;
    height: 45px;
    padding-top: 5px;
}

.DivLogo {
    text-align: right;
    padding-right: 10px;
}

.DivTitleMainLogin {
    padding-top: 35px;
    padding-bottom: 2px;
}

.Formtext {
    font-family: Calibri;
    font-size: 14px;
}

.Errortext {
    font-family: Calibri;
    font-size: 12px;
    color: red;
    font-weight: bold;
}

.style1 {
    height: 26px;
}

.DivLogin {
    background-color: rgba(255, 255, 255, 0.8);
    min-height: 320px;
    width: 550px;
    padding-top: 20px;
}

.LoginPanel {
    Width: 550px;
    Height: 380px;
}

.DivIcon {
    float: left;
    width: 60px;
    text-align: center;
    padding-bottom: 20px;
    padding-left: 35px;
    padding-top: 36px;
}

.FooterRowTop {
    float: left;
    padding: 5px;
}

.collapsePanel {
    width: 640px;
    height: 0px;
    background-color: white;
    overflow: hidden;
}

.collapsePanelHeader {
    width: 640px;
    height: 20px;
    color: Yellow;
    background-color: Black;
    font-weight: bold;
    float: none;
    padding: 5px;
    cursor: pointer;
    vertical-align: middle;
}

.invisible {
    width: 0px;
    display: none;
}

.normalrow {
    background-color: white;
}

.highlightrow {
    background-color: #cccccc;
}

.dxgvControl, .dxgvDisabled {
    border: 1px Solid #9F9F9F;
    font: 10pt Calibri, Tahoma, Geneva, sans-serif;
    background-color: #e8e8e8;
    color: #58595b;
    cursor: default;
}

.TableColumn {
    font-family: Calibri, Tahoma;
    font-size: 12px;
    color: Black;
    font-weight: bold;
}

.TableColumnbig {
    font-family: Calibri, Tahoma;
    font-size: 15px;
    color: Black;
    font-weight: bold;
}

.TableColumn a {
    font-family: Calibri, Tahoma;
    font-size: 12px;
    color: Black;
}

.dxgvHeader, .dxgvHeader table {
    color: #58595b;
    padding: 4px 6px 5px;
    background-color: #e8e8e8;
    font-weight: bold;
    height: 20px;
}

/* Media Queries (* 1920 × 1080 (and larger) */
@media only screen and (min-width : 1920px) {
    .divTableCellBlockShiftReport {
        padding: 12px;
        float: left;
        max-width: 860px;
    }
}

@media only screen and (max-width : 1919px) {
    .divTableCellBlockShiftReport {
        padding-top: 12px;
        padding-bottom: 12px;
        float: left;
        width: 100%;
    }
}

/* Media Queries (* 1025 × 768 (and larger) */
@media only screen and (min-width : 1041px) {
    #DivLogoClientMaxWidth1024 {
        display: none;
    }

    #DivLogoClientMinWidth1024 {
        float: right;
        padding-right: 30px;
        padding-top: 5px;
    }

    .MyPlantFloorLogo {
        height: 55px;
    }

    #DivTop {
        height: 55px;
        line-height: 55px;
        width: 100%;
        position: relative;
        background-color: #5a4f7a;
        min-width: 600px;
    }

    .TextOperatorHeader {
        float: left;
        text-align: right;
        padding-top: 3px;
        height: 30px;
        line-height: 20px;
    }

    .lblTextCellGroupAndSite {
        font-size: 18px;
        color: white;
    }

    .lblTextOperatorName {
        font-size: 16px;
        color: white;
    }

    #DivMasterHeader {
        height: 62px;
        line-height: 62px;
        overflow: visible;
        padding: 0px 10px 7px 10px;
        background-color: transparent;
    }

    #DivSubHeader {
        padding-left: 20px;
    }

    #DivIcons {
        position: relative;
        float: right;
        vertical-align: top;
        line-height: 55px;
        padding-top: 12px;
    }

    .Icon {
        position: relative;
        float: left;
        padding-right: 25px;
    }

    .WarningIcon {
        padding-top: 10px;
    }

    .IconOperatorDisplay {
        position: relative;
        float: left;
        padding-top: 2px;
        padding-left: 3px;
        padding-right: 2px;
    }

    .IconReport {
        position: relative;
        float: left;
        vertical-align: top;
    }

    .SiteName {
        font-size: X-Large;
        color: white;
        float: left;
        padding-right: 8px;
    }

    .TextReport {
        position: relative;
        float: left;
        vertical-align: top;
        padding-right: 8px;
        text-align: right;
        font-size: 20px;
        color: white;
        line-height: 55px;
    }

    .FooterGridShiftReport {
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 20px;
        visibility: inherit;
    }

    .PopupControlEnlargePopup800 {
        width: 800px;
    }

    .PopupControlEnlargePopup850 {
        width: 850px;
    }
}

/* Media Queries (* 1024 × 768 (and smaller) */
@media only screen and (max-width : 1041px) {
    #DivLogoClientMaxWidth1024 {
        float: right;
        padding-right: 30px;
        padding-top: 5px;
    }

    #DivLogoClientMinWidth1024 {
        display: none;
    }

    .MyPlantFloorLogo {
        height: 42px;
    }

    .IconMaxWidth1024 .dxm-content .dxm-image {
        height: 48px;
        width: 48px;
    }

    #DivTop {
        height: 42px;
        line-height: 42px;
        width: 100%;
        position: relative;
        background-color: #5a4f7a;
        min-width: 600px;
    }

    .TextOperatorHeader {
        width: 115px;
        float: left;
        text-align: right;
        padding-top: 3px;
        height: 30px;
        line-height: 20px;
    }

    .lblTextCellGroupAndSite {
        font-size: 12px;
        color: white;
        line-height: 80%;
    }

    .lblTextOperatorName {
        font-size: 10px;
        color: white;
        line-height: 80%;
    }

    #DivMasterHeader {
        height: 52px;
        line-height: 52px;
        overflow: visible;
        padding: 0px 10px 7px 10px;
        background-color: transparent;
    }


    #DivSubHeader {
        padding-left: 10px;
    }

    #DivIcons {
        position: relative;
        float: right;
        vertical-align: top;
        line-height: 55px;
        padding-top: 6px;
    }

    .Icon {
        position: relative;
        float: left;
        padding-right: 15px;
    }

    .lblIsTestServer {
        font-size: small;
        padding: 5px 2px 5px 2px;
    }

    .WarningIcon {
        padding-top: 4px;
    }

    .IconOperatorDisplay {
        position: relative;
        float: left;
        margin-top: -4px;
        /*padding-left: 2px;
        padding-right: 1px;*/
    }

    .IconReport {
        position: relative;
        float: left;
        vertical-align: top;
        margin-top: -4px;
    }

    .SiteName {
        font-size: Large;
        color: white;
        float: left;
        padding-right: 8px;
    }

    .TextReport {
        position: relative;
        float: left;
        vertical-align: top;
        padding-right: 8px;
        text-align: right;
        font-size: 16px;
        color: white;
        line-height: 42px;
    }

    .FooterGridShiftReport {
        /*padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 20px;*/
        visibility: hidden;
    }

    .PopupControlEnlargePopup800 {
        width: 780px;
    }

    .PopupControlEnlargePopup850 {
        width: 830px;
    }
}

/* Use a media query to add a break point at 1024px: */
@media screen and (max-width:1024px) {

    .main {
        width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
        padding: 2px;
    }

    .DivCenter {
        width: 50%;
    }

    .DivCenterFrame {
        width: 65%;
    }
}

    /* Media Queries (* 949 × 599 (and larger) */
    @media only screen and (min-width : 949px) {

        .gridViewEnlargePopup {
            padding: 6px !important;
            /*color: red;*/
        }
    }

    /* Media Queries (* 947 × 599 (and smaller) */
    @media only screen and (max-width : 947px) {

        .gridViewEnlargePopup {
            padding: 8px !important;
            /*color: green;*/
        }
    }

    /* Use a media query to add a break point at 800px: */
    @media screen and (max-width:800px) {
        .DivCenter {
            width: 70%;
        }

        .DivCenterFrame {
            width: 75%;
        }

        body {
            background-color: white;
        }

        .LargerOnSmallDevice {
            font-size: larger;
        }
    }

    /* Media Queries (* 776 × 599 (and larger) */
    @media only screen and (min-width : 776px) {

        .treeListEnlargePopup {
            padding: 3px 6px 4px !important;
        }

        .textBoxEnlargePopup {
            height: 25px;
            width: 45px;
        }
    }

    /* Media Queries (* 774 × 599 (and smaller) */
    @media only screen and (max-width : 774px) {

        .treeListEnlargePopup {
            font-size: medium !important;
            padding: 8px !important;
        }

        .textBoxEnlargePopup {
            height: 30px;
            width: 70px;
            font-size: medium !important;
        }

        .labelEnlargePopup {
            font-size: medium !important;
        }

        .ComboBoxEnlargePopup {
            font-size: medium !important;
            padding: 8px !important;
        }
    }

    /* Media Queries (* 767 (and larger) */
    @media only screen and (min-width : 767px) {
        #DivLoginDetails {
            position: relative;
            float: right;
            vertical-align: top;
            padding-right: 40px;
            text-align: right;
            color: #bbb9d6;
        }
    }

    /* Media Queries (* 666 (and smaller) */
    @media only screen and (max-width : 765px) {
        #DivLoginDetails {
            display: none;
        }
    }

/* Use a media query to add a break point at 668px: */
@media screen and (max-width:668px) {
    .DivCenter {
        width: 100%;
        padding-top: 0px;
    }

    .DivCenterFrame {
        width: 100%;
        padding-top: 0px;
    }

    .DivLogin {
        height: 100vh;
        width: 100%;
    }

    .DivLogin {
        height: 100vh;
        width: 100%;
    }

    .LoginPanel {
        Width: 100%;
    }

    .HideOnSmallDevice {
        display: none;
    }
}

/* Use a media query to add a break point at 520px: */
@media screen and (max-width:520px) {
    .DivIcon {
        display: none;
    }

    .DivLoginDetails {
        width: 100%;
    }

    #ButtonHome {
        display: none;
    }
}

/* Use a media query to add a break point at 380px: */
@media screen and (max-width:380px) {
    .DivHeight {
        width: 300px;
    }

    .DivTitle {
        width: 100%;
    }

    .DivContent {
        width: 100%;
    }
}

    #DivMasterHeaderReport {
        height: 60px;
        padding: 0px 10px 7px 3px;
        background-color: #edf4f4;
    }

    #DivShowSite {
        position: relative;
        float: right;
        vertical-align: top;
        padding-right: 20px;
        text-align: right;
        color: #bbb9d6 !important;
    }

    #DivShowSiteChanged {
        position: relative;
        float: right;
        vertical-align: top;
        padding-right: 200px;
        padding-top: 17px;
        text-align: right;
    }

    #DivSubHeaderReportDetails {
        position: relative;
        float: left;
    }

    #DivMenu {
        width: 95%;
        position: absolute;
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        background-color: transparent;
    }

    .IconOperatorBackground {
        background-color: lightgray;
        float: left;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 15px;
    }

        .IconOperatorBackground.disa {
            background-color: #9a98bd;
            float: left;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: 15px;
        }

        .IconOperatorBackground:hover {
            background-color: gray;
        }

        .IconOperatorBackground.disa:hover {
            background-color: #381f75;
        }

    .IconOperatorBackgroundRed {
        background-color: Red;
        float: left;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 15px;
    }

    .IconOperatorBackgroundGreen {
        background-color: Green;
        float: left;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 15px;
    }

    .OperatorTextMenu {
        padding-top: 16px;
        min-width: 200px;
    }

        .OperatorTextMenu:hover {
            color: #2e2e2e;
        }

    .ImageInBox {
        padding: 5px;
        width: 350px !important;
        font-size: x-large !important;
    }

    .ImageInBoxSmall {
        padding: 5px;
        width: 170px !important;
        font-size: x-large !important;
    }

    .OverruleSkinWidth {
        width: 75px !important;
    }

    .OverruleSkinWidth110 {
        width: 110px !important;
    }

    #DivIconsReport {
        position: relative;
        float: right;
        vertical-align: top;
        line-height: 55px;
    }

    #DivWarning {
        position: relative;
        float: left;
    }

    .MajorScreenTitleFixed {
        color: #381f75;
        font-size: 20px;
        line-height: 30px;
    }

    .RoundPanelHeader {
        color: #381f75;
        font-size: 20px;
    }

    .RoundPanelContent {
        width: 100%;
    }

    .RoundPanelContentLeft {
        position: relative;
        float: left;
        padding-right: 22px;
        /*width: 48.2%;*/
    }

    .RoundPanelContentRight {
        position: relative;
        float: left;
        /*width: 48.2%;*/
    }

    .divButtonOperatorInstruction {
        display: table-cell;
        padding: 3px;
        width: 35px;
    }

    .OperatorInstruction {
        padding-left: 10px;
        font-size: 14px;
    }

    #DivSubHeaderReportButtons {
        position: relative;
        float: right;
        padding-bottom: 10px;
    }

    .ButtonReport {
        position: relative;
        float: left;
        vertical-align: top;
        padding-right: 10px;
        padding-top: 10px;
    }

    .ButtonReportImg {
        padding: -10px;
    }

    .LogoReport {
        position: relative;
        float: right;
        vertical-align: top;
        padding-right: 10px;
        padding-top: 5px;
    }

    .IconImage {
        position: relative;
        float: left;
        padding-right: 43px;
        padding-top: 3px;
        line-height: 26px;
    }

    #DivSearch {
        position: relative;
        float: right;
        padding-right: 25px;
        padding-top: 20px;
        text-align: right;
    }

    #DivMasterCenter {
        height: auto;
        min-height: 774px;
        padding: 0px 20px 0px 20px;
        margin: 0px 20px 0px 0px;
        background-color: transparent;
    }

    #DivMasterCenterReport {
        height: auto;
        min-height: 774px;
        padding: 0px 20px 0px 20px;
        background-color: transparent;
        margin-bottom: -10px;
    }

    .PanelWithPadding {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-top: 10px;
        Width: 99%;
        border: solid 1px #e0e0e0;
        background-color: white;
        min-height: 772px;
    }

    #DivMasterFooter {
        position: static;
        float: none;
        margin: 0px; /* negative value of footer height */
        clear: both; /* no floating elements allowed on the left or the right side of a specified element */
        vertical-align: bottom;
        font-family: Tahoma;
        font-size: 10px;
        font-weight: lighter;
        color: #333333;
        padding-top: 5px;
        text-align: center;
    }

    #ContentContainer {
        padding: 10px;
        background-image: none;
        z-index: -1;
    }

    #content {
        background-color: Blue;
    }

    #LogoHome {
        position: relative;
        float: left;
    }

    #DivFooterGrid {
        width: 100%;
        background-color: #e8e8e8;
        height: 40px;
        border: 0px;
        color: #58595b;
        float: left;
    }

    .DivFooterGridLeft {
        float: left;
        width: 20px;
    }

    .DivFooterGridMiddle {
        float: left;
        width: 64px;
    }

    .DivFooterGridMiddleSmall {
        float: left;
        width: 46px;
    }

    .DivFooterGridRight {
        float: right;
        width: 70px;
        text-align: center;
    }

    .FooterButton {
        background-color: transparent !important;
    }

        .FooterButton:hover {
            background-color: #5a4f7a !important;
        }

    .DivFooterGridRightPaddingTop {
        float: right;
        padding-left: 10px;
        padding-top: 14px;
        padding-right: 20px;
    }

    .DivFooterGridRightPaddingTop2 {
        float: right;
        padding-top: 6px;
        width: 50px;
        text-align: left;
    }

    #DivFooterGridLeftFrame {
        float: left;
        width: 24%;
    }

    #DivFooterGridMiddleFrame {
        float: left;
        width: 65%;
    }

    #DivFooterGridRightFrame {
        float: right;
        width: 5%;
    }

    .DivFooterGridMiddlePaddingTop {
        float: left;
        padding-left: 10px;
        padding-right: 5px;
        padding-top: 10px;
    }

    .DivFooterGridMiddlePaddingTopRight {
        float: right;
        padding-top: 10px;
    }

    .DivFooterGridMiddleRight {
        float: right;
    }

    .cpHeader {
        font-family: Calibri;
    }

    .HeaderPopUp {
        font-family: Calibri;
        font-size: 14px;
        font-weight: bold;
    }

    .ContentPopUp {
        font-family: Calibri;
        font-size: 14px;
    }

    /*MenuButtons*/
    #DivSubMenuContent {
        -webkit-box-shadow: 2px 9px 26px 3px rgba(212,212,212,0.48);
        -moz-box-shadow: 2px 9px 26px 3px rgba(212,212,212,0.48);
        box-shadow: 2px 9px 26px 3px rgba(212,212,212,0.48);
    }

    #DivGroup {
        width: auto;
        display: inline-block;
        Vertical-align: Top;
    }

    #FirstLevel {
        Vertical-align: Top;
        color: #381F75;
        font-size: 24px;
        /*padding-top: 15px;*/
        padding-left: 20px;
        padding-bottom: 20px;
        padding-right: 15px;
        Width: auto;
        Min-width: 260px;
    }

    #SecondLevel {
        Vertical-align: Top;
        color: #381F75;
        font-size: 24px;
        /*padding-top: 15px;*/
        padding-left: 20px;
        padding-bottom: 20px;
        padding-right: 15px;
        Width: auto;
        Min-width: 260px;
    }

    #ThirdLevel {
        display: inline-grid;
        font-size: 16px;
        padding-bottom: 25px;
        color: #666666;
        vertical-align: top;
        padding-top: 15px;
        padding-left: 15px;
    }


    #ThirdLevel {
        Width: auto;
    }


    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        #ThirdLevel {
            font-size: 16px;
            padding-bottom: 25px;
            color: #666666;
            vertical-align: top;
            padding-top: 15px;
            padding-left: 65px;
        }
    }

    @supports (-ms-ime-align:auto) {
        #ThirdLevel {
            font-size: 16px;
            padding-bottom: 25px;
            color: #666666;
            vertical-align: top;
            padding-top: 15px;
            padding-left: 15px;
        }
    }

    #FirstLevel a {
        color: #666666;
        text-decoration: none;
    }

    #ThirdLevel a {
        color: #666666;
        text-decoration: none;
    }

    #ThirdLevelNodeImage {
        background-color: #ee4023;
        width: 50px;
        height: 50px;
        float: left;
    }

    #FirstLevelNodeImage {
        background-color: #ee4023;
        width: 50px;
        height: 50px;
        float: left;
    }

    #ThirdLevelDiv {
        Vertical-align: Top;
        color: #381F75;
        font-size: 13px;
    }

    #FourthLevel {
        font-size: 13px;
        color: #9a9a9a;
        vertical-align: top;
        padding-top: 7px;
        padding-left: 15px;
    }

        #FourthLevel a {
            color: #9a9a9a;
            text-decoration: none;
        }

    #FourthLevelNodeImage {
        width: 9px;
        height: 9px;
        float: left;
        padding-top: 10px;
    }

    #FifthLevel {
        font-size: 13px;
        color: #a4a5a7;
        vertical-align: top;
        padding-top: 8px;
        padding-left: 15px;
    }

        #FifthLevel a {
            color: #a4a5a7;
            text-decoration: none;
        }


    #FifthLevelNodeImage {
        width: 9px;
        height: 9px;
        float: left;
    }

    .FooterRowTop {
        float: left;
        padding: 5px;
    }

    .collapsePanel {
        width: 640px;
        height: 0px;
        background-color: white;
        overflow: hidden;
    }

    .collapsePanelHeader {
        width: 640px;
        height: 20px;
        color: Yellow;
        background-color: Black;
        font-weight: bold;
        float: none;
        padding: 5px;
        cursor: pointer;
        vertical-align: middle;
    }

    .invisible {
        width: 0px;
        display: none;
    }

    .normalrow {
        background-color: white;
    }

    .highlightrow {
        background-color: #cccccc;
    }

    .dxgvControl, .dxgvDisabled {
        border: 1px Solid #9F9F9F;
        font: 10pt Calibri, Tahoma, Geneva, sans-serif;
        background-color: #e8e8e8;
        color: #58595b;
        cursor: default;
    }


    .TableColumn {
        font-family: Calibri, Tahoma;
        font-size: 12px;
        color: Black;
        font-weight: bold;
    }

    .TableColumnbig {
        font-family: Calibri, Tahoma;
        font-size: 15px;
        color: Black;
        font-weight: bold;
    }

    .TableColumn a {
        font-family: Calibri, Tahoma;
        font-size: 12px;
        color: Black;
    }

    .dxgvHeader, .dxgvHeader table {
        color: #58595b;
        padding: 4px 6px 5px;
        background-color: #e8e8e8;
        font-weight: bold;
        height: 20px;
    }

    /*MenuButtonsOperatorDisplay*/
    #DivSubMenuContentOD {
        -webkit-box-shadow: 2px 9px 26px 3px rgba(212,212,212,0.48);
        -moz-box-shadow: 2px 9px 26px 3px rgba(212,212,212,0.48);
        box-shadow: 2px 9px 26px 3px rgba(212,212,212,0.48);
    }

    /* Media Queries (* 1400 × 1050 (and smaller) */
    @media only screen and (min-width : 1401px) {
        .DivSubMenuContentODFrame {
            margin-right: 20px;
            width: auto;
            min-width: 900px;
        }
    }

    /* Media Queries (* 1400 × 1050 (and smaller) */
    @media only screen and (max-width : 1400px) {
        .DivSubMenuContentODFrame {
            margin-top: 55px;
            margin-left: 20px;
            margin-right: 20px;
            position: fixed;
        }
    }

    #DivGroupOD {
        width: auto;
        display: inline-block;
        Vertical-align: Top;
    }

    #FirstLevelOD {
        Vertical-align: Top;
        color: #381F75;
        font-size: 24px;
        /*padding-top: 15px;*/
        padding-left: 20px;
        padding-bottom: 20px;
        padding-right: 15px;
        Width: auto;
        Min-width: 260px;
    }

    #SecondLevelOD {
        Vertical-align: Top;
        color: #381F75;
        font-size: 24px;
        /*padding-top: 15px;*/
        padding-left: 20px;
        padding-bottom: 20px;
        padding-right: 15px;
        Width: auto;
        Min-width: 400px;
        border-bottom: 1px solid White;
    }

    #ThirdLevelOD {
        display: inline-grid;
        font-size: 16px;
        padding-bottom: 25px;
        color: #666666;
        vertical-align: top;
        padding-top: 15px;
        padding-left: 15px;
    }


    #ThirdLevelOD {
        Width: auto;
    }


    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        #ThirdLevelOD {
            font-size: 16px;
            padding-bottom: 25px;
            color: #666666;
            vertical-align: top;
            padding-top: 15px;
            padding-left: 65px;
        }
    }

    @supports (-ms-ime-align:auto) {
        #ThirdLevelOD {
            font-size: 16px;
            padding-bottom: 25px;
            color: #666666;
            vertical-align: top;
            padding-top: 15px;
            padding-left: 15px;
        }
    }

    #FirstLevelOD a {
        color: #666666;
        text-decoration: none;
    }

    #ThirdLevelOD a {
        color: #666666;
        text-decoration: none;
    }

    #ThirdLevelNodeImageOD {
        background-color: #9a98bd;
        width: 50px;
        height: 50px;
        float: left;
    }

        #ThirdLevelNodeImageOD:hover {
            background-color: #381f75;
        }

    #FirstLevelNodeImageOD {
        background-color: #ee4023;
        width: 50px;
        height: 50px;
        float: left;
    }

    #ThirdLevelDivOD {
        Vertical-align: Top;
        color: #381F75;
        font-size: 13px;
    }

    #FourthLevelOD {
        font-size: 16px;
        color: #666666;
        vertical-align: top;
        padding-top: 7px;
        padding-left: 15px;
    }

        #FourthLevelOD a {
            color: #666666;
            text-decoration: none;
        }

            #FourthLevelOD a:hover {
                color: #333333;
            }

    #FourthLevelNodeImageOD {
        width: 9px;
        height: 9px;
        float: left;
        padding-top: 10px;
    }

    #FifthLevelOD {
        font-size: 14px;
        color: #666666;
        vertical-align: top;
        padding-top: 8px;
        padding-left: 15px;
    }

        #FifthLevelOD a {
            color: #666666;
            text-decoration: none;
        }


            #FifthLevelOD a:hover {
                color: #333333;
            }

    #FifthLevelNodeImageOD {
        width: 9px;
        height: 9px;
        float: left;
    }

    /*DivRowDetail*/
    #wrapperShiftReport {
        margin-right: 360px;
    }

    #contentShiftReport {
        float: left;
        width: 100%;
    }

    #sidebarShiftReport {
        float: right;
        width: 360px;
        margin-right: -360px;
        background-color: #edf4f4;
        padding-bottom: 30px;
        position: relative;
    }

    #clearedShiftReport {
        clear: both;
    }

    .divTable {
        display: table;
        width: 100%;
    }

    .divTableRow {
        display: table-row;
    }

    .divTableCell {
        display: table-cell;
        padding: 3px;
    }

    .divTableCellSplit {
        float: left;
        padding: 5px;
        width: 48%;
        /*background-color: lightcoral;*/
    }

    .divTableCellDetailLeft {
        float: left;
    }

    .divTableCellDetailRight {
        float: right;
    }

    .divButtonTitleBeneath {
        float: left;
        padding-right: 15px;
    }

    .divTableCellWithBorder {
        display: table-cell;
        padding: 5px;
        vertical-align: top;
        border: 1px solid silver;
    }

    .divTableCellWithBorderHeader {
        display: table-cell;
        padding: 5px;
        vertical-align: top;
        border: 1px solid silver;
        color: #381f75;
        font-size: 18px;
    }

    .divTableCellBlock {
        padding: 10px;
        float: left;
        width: 600px;
    }

    .divTableCellBlockLarge {
        padding: 10px;
        float: left;
        width: 700px;
    }

    .divTableCellBlockSplit {
        float: left;
        width: 300px;
    }

    .divTableCellBlockSplitLarge {
        float: left;
        width: 350px;
    }

    .divTableCellBlockTitle {
        padding-bottom: 10px;
        font-weight: bold;
    }

    .dxccControl_MPFMetropolisTemplatePopUp {
        font: 20pt 'Calibri', 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
        text-decoration: none;
        color: #5A4F7A;
        background-color: #FFFFFF;
    }

    .divTableCellBlockFloat {
        float: left;
        padding: 10px;
        width: 290px;
    }

    .divTableCellBlockFloatWidth {
        float: left;
        padding: 10px;
        width: 325px;
    }

    .divTableCellTitle {
        float: left;
        width: 85px;
        line-height: 90%;
        padding-top: 5px;
    }

    .divTableCellTitleSmall {
        float: left;
        width: 70px;
        line-height: 90%;
        padding-top: 5px;
    }

    .divTableCellTitleXSmall {
        float: left;
        width: 25px;
        line-height: 90%;
        padding-top: 5px;
    }

    .divTableCellTitleWidth {
        float: left;
        width: 110px;
        line-height: 90%;
        padding-top: 5px;
    }

    .divTableCellTitleLarge {
        float: left;
        width: 145px;
        line-height: 90%;
        padding-top: 5px;
    }

    .divTableCellCheckBox {
        float: left;
        width: 20px;
        height: 16px;
    }

    .divTableCellContent {
        float: left;
        padding-left: 10px;
        width: 180px;
        min-height: 30px;
    }

    .divTableCellContentSmall {
        float: left;
        padding-left: 10px;
        width: 165px;
        min-height: 30px;
    }

    .divTableCellContentXSmall {
        float: left;
        padding-left: 10px;
        width: 58px;
        min-height: 30px;
    }

    .divTableCellContent62XSmall {
        float: left;
        padding-left: 10px;
        width: 62px;
        min-height: 25px;
    }

    .divTableCellContentLarge {
        float: left;
        padding-left: 10px;
        width: 190px;
        min-height: 30px;
    }

    .divTableCellCheckBoxContent {
        float: left;
        padding-left: 10px;
        width: 260px;
        min-height: 30px;
    }

    .divTableCellBlockFloat {
        float: left;
        padding: 10px;
        width: 290px;
    }

    .divTableCellBlockFloatWidth {
        float: left;
        padding: 10px;
        width: 325px;
    }

    .divTableBody {
        display: table-row-group;
    }

    .DivRowDetail {
        width: 100%;
        float: left;
    }

    .DivRowDetailRow {
        width: auto;
        padding: 20px;
        float: left;
    }

    .DivRowDetailRowTitlesSmall {
        padding-right: 10px;
        float: left;
        text-align: right;
        min-width: 100px;
    }

    .DivRowDetailRowTitlesMedium {
        padding-right: 10px;
        float: left;
        text-align: right;
        min-width: 158px;
    }

    .DivRowDetailRowTitlesNormal {
        padding-right: 10px;
        float: left;
        text-align: right;
        min-width: 170px;
    }

    .DivRowDetailRowTitlesLarge {
        padding-right: 10px;
        float: left;
        text-align: right;
        min-width: 200px;
    }

    .DivRowDetailRowContent {
        padding-left: 10px;
        float: left;
    }

    .DivRowHeight {
        height: 35px;
    }

    .DivRowHeightMemo {
        height: 50px;
    }

    .DivRowHeightCheckbox {
        height: 35px;
        margin-left: -5px;
    }

    .DivRowHeightNoFloat {
        height: 46px;
    }

    .DivRowDetailRowTitlesNormalNoFloat {
        padding-bottom: 3px;
        min-width: 170px;
    }

    .DivRowDetailRowContentNoFloat {
        padding-left: 0px;
    }


    /*Legenda*/

    .divTableLegenda {
        display: table;
        width: 100%;
        max-width: 1270px;
    }

    .divTableLegendaBody {
        display: table-row-group;
    }

    .divTableLegendaRow {
        display: table-row;
    }

    .divTableLegendaCell {
        display: table-cell;
        padding: 3px;
    }

    .divTableLegendaCellBlock {
        padding: 2px;
        float: left;
        width: 250px;
    }

    .divTableLegendaCellColor {
        float: left;
        width: 20px;
        padding-right: 5px;
    }

    .divTableLegendaCellColorField {
        border: 1px solid #afafaf;
        height: 13px;
    }

    .divTableLegendaCellBlockSplit {
        float: left;
        max-width: 270px;
    }

    /*DivColumnDetail*/

    /*Resize*/
    .Resize textarea {
        resize: horizontal;
    }
    /*Resize*/

    .divColumnTitle {
        padding-top: 8.5px;
    }

    .divColumnContent {
        padding-top: 2px;
        color: #381f75;
        font-weight: bold;
    }

    /*Dashboards*/

    #DivBodyDashboard {
        color: transparent;
        font-size: xx-small;
    }

    .DivLeftReport {
        background-color: white;
        float: left;
        /* position: fixed; */
        z-index: 1000;
        padding-right: 20px;
        padding-bottom: 20px;
        width: 400px;
    }

    .LeftButton {
        padding-top: 10px;
        width: 190px;
        float: left;
    }

    #DivGridFrame {
        text-align: left;
        /*margin-left: 435px;*/
        min-height: 700px;
    }

    #DivGridRowCenter {
        min-height: 600px;
        height: 100%;
    }

    /*TransparantPopUpButtons*/

    .DivButtonsForm {
        width: 0.1%;
        /*padding-top: 20px;
    margin-left: -5px;
    margin-right: -5px;*/
        display: table-cell;
        font-size: 1px;
    }

    .DivButtonFormFloatRight {
        background-color: White;
        opacity: 0.3;
        text-align: right;
        width: 36px;
        height: 36px;
        border-radius: 4px;
        padding: 5px;
        position: absolute;
        float: right;
        margin-left: -70px;
        margin-top: 48px;
    }

    .DivButtonsPopupForm {
        padding-left: 20px;
        padding-bottom: 10px;
    }

    .DivButtonFormFloatRight:hover {
        opacity: 0.9;
        cursor: pointer;
    }

    .DivRowDetailRowContentFormFloatRight {
        float: right;
        margin-top: -8px;
    }

    /*Charts*/

    .ChartHeaderTitle {
        text-align: left;
        width: 940px;
        padding-top: 10px;
        padding-bottom: 15px;
        padding-left: 20px;
    }

    .ChartFormTitle {
        font-size: 22px !important;
        color: #381f75;
    }

    .ChartContentHeader {
        width: auto;
        min-height: 160px;
        height: auto;
    }

    .ChartContentComment {
        width: auto;
        min-height: 157px;
        height: auto;
        text-align: left;
        padding-left: 10px;
        padding-bottom: 20px;
    }

    .ChartContentCenter {
        width: auto;
        min-height: 335px;
        height: auto;
    }

    .ChartContentLeft {
        float: left;
        width: 50%;
    }

    .ChartContentRight {
        float: right;
        width: 50%;
    }

    .ChartContentLarge {
        min-height: 330px;
    }

    .ChartContentSmall {
        min-height: 175px;
    }

    .ChartContentSmaller {
        min-height: 165px;
    }

    .ChartContentCommentTitle {
        padding-bottom: 5px;
    }

    .SiteDetailButton {
        background-color: #555555;
    }

    .CommentPanelCenter {
        min-height: 80px;
        width: 690px;
        resize: none;
    }

    .CommentPanelButtons {
        padding-top: 20px;
    }

    .CommentPanelButtonsLeft {
        width: 30px;
        float: left;
    }

    .CommentPanelButtonsRight {
        width: 30px;
        float: right;
        padding-right: 50px;
    }

    .CommentPanelButtonsMiddle {
        float: left;
        padding-right: 30px;
    }

    /*.dxmLite_MPFMetropolis, .dxmLite_MPFMetropolis .dxm-item a.dx{
    background-color:transparent;
}*/

    .dxpLite {
        color: #58595b;
        font: 10pt Calibri, Tahoma, Geneva, sans-serif;
    }

    .test:hover {
        border-width: 1;
        border-color: Black;
    }

    .AutoExtender {
        font-family: Calibri, Tahoma;
        font-size: 11px;
        font-weight: normal;
        border: solid 1px #006699;
        line-height: 20px;
        padding: 2px;
        background-color: White;
    }

    .AutoExtenderList {
        border-bottom: dotted 1px #006699;
        cursor: pointer;
        color: black;
    }

    .AutoExtenderHighlight {
        color: White;
        background-color: #006699;
        cursor: pointer;
    }

    .modalBackground {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }

    .modalPopup {
        background-color: #ffffff;
        border-width: 3px;
        border-style: solid;
        border-color: Gray;
        padding: 3px;
        width: 250px;
    }

    /************************************************************************/
    /* ColumnLabel is used for column headings in data tables - tends       */
    /* to be used with the "Tight" family of styles that control the table  */
    /************************************************************************/
    .ColumnLabel {
        color: #000000;
        font-family: Calibri, Tahoma, Helvetica, sans-serif;
        font-size: 10pt;
        font-weight: normal;
    }

    .ColumnLabelHilight {
        color: black;
        font-family: Calibri, Tahoma;
        font-size: 10pt;
        font-weight: bold;
        background-color: #f0f0f0;
    }

    .Formlabel {
        background-color: #e8e8e8;
    }


    /************************************************************************/
    /* From module mail                                                     */
    /************************************************************************/
    .MailPreviewPanel,
    .FeedItemPreviewPanel {
        overflow: auto;
    }

        .MailPreviewPanel .MailPreview,
        .FeedItemPreviewPanel .FeedPreview {
            padding: 22px;
        }

            .MailPreviewPanel .MailPreview .SubjectCss,
            .FeedItemPreviewPanel .FeedPreview .SubjectCss {
                font-size: 15px;
                font-weight: bold;
                padding-bottom: 15px;
            }

            .MailPreviewPanel .MailPreview .FromCss,
            .FeedItemPreviewPanel .FeedPreview .FromCss {
                color: #6593CF;
                padding-right: 55px;
                display: flexbox;
            }

            .MailPreviewPanel .MailPreview .ToCss,
            .FeedItemPreviewPanel .FeedPreview .ToCss {
                color: #6593CF;
                padding-right: 70px;
                display: flexbox;
            }

            .MailPreviewPanel .MailPreview .DateCss,
            .FeedItemPreviewPanel .FeedPreview .DateCss {
                color: #6593CF;
                padding-right: 60px;
                display: flexbox;
            }

            .MailPreviewPanel .MailPreview .AttachmentCss,
            .FeedItemPreviewPanel .FeedPreview .AttachmentCss {
                color: #6593CF;
                padding-right: 10px;
                display: flexbox;
            }

            .MailPreviewPanel .MailPreview .Info,
            .FeedItemPreviewPanel .FeedPreview .Info {
                color: #8C8C8C;
                padding-bottom: 22px;
            }

                .FeedItemPreviewPanel .FeedPreview .Info a {
                    margin-left: 13px;
                }

            .MailPreviewPanel .MailPreview .Separator, .FeedItemPreviewPanel .FeedPreview .Separator {
                background: #6593CF;
                height: 1px;
            }

            .MailPreviewPanel .MailPreview .Body,
            .FeedItemPreviewPanel .FeedPreview .Body {
                padding-top: 10px;
            }

    /* Sprite */
    .LayoutLeft .Inner .Navigation .DemoTree .dxtv-subnd .dxWeb_tvExpBtn,
    .Search .Pic,
    .LayoutLeft .Inner .Navigation .DemoTree .dxWeb_tvExpBtn,
    .LayoutLeft .Inner .Navigation .DemoTree .dxWeb_tvColBtn,
    .LayoutLeft .Inner .Navigation .DemoTree .dxtv-subnd .dxWeb_tvExpBtn,
    .LayoutLeft .Inner .Navigation .DemoTree .dxtv-subnd .dxWeb_tvColBtn,
    .LogoImage,
    .LayoutRight .Inner .Header .DownloadButton .Icon,
    .LayoutRight .Inner .Header .BuyButton .Icon,
    .LayoutRight .Inner .ThemeButton .Icon,
    .LayoutRight .Inner .ThemeButton .Glyph,
    .LayoutRight .Inner .DemoPageControl .dxtc-sb .dxWeb_tcScrollLeft,
    .LayoutRight .Inner .DemoPageControl .dxtc-sb .dxWeb_tcScrollRight,
    .LayoutLeft .Inner .Navigation .DemoTree .IntroNodeIco,
    .LayoutLeft .Inner .Navigation .DemoTree .UpdatedIco,
    .LayoutLeft .Inner .Navigation .DemoTree .NewIco,
    .LayoutLeft .Inner .Navigation .DemoTree .PreviewIco,
    .LayoutLeft .Inner .Navigation .IntroPageLink .Ico {
        background-image: url(sprite.png);
        background-repeat: no-repeat;
    }

    /* Common Sizes */
    .LayoutContainer {
        margin: 0 auto;
        min-height: 100%;
        text-align: left;
        width: 1210px;
        position: relative;
    }

    .LayoutFooterSpacing {
        clear: both;
        height: 240px; /* footer height + spacing */
    }

    .LayoutFooter {
        margin: -180px auto 0;
        height: 180px;
        width: 1210px;
        position: relative;
    }

    /* Search box */
    .Search {
        margin-top: 0px;
        margin-bottom: 0px;
        border: 1px solid #e0e0e0;
    }

        .Search .SearchBox {
            float: left;
            border: 0;
        }

            /*forecolor and text style of searchbox*/
            .Search .SearchBox .dxeEditAreaSys {
                font: 13px 'Calibri', 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
                color: #3c3c3c;
            }

        .Search .Pic {
            float: left;
            width: 13px;
            height: 13px;
            background-position: -40px -37px;
            margin: 5px 6px;
        }

    /* Search box 2 */
    .Search2 {
        margin-top: 0px;
        margin-bottom: 0px;
        border: 1px solid #FF0000;
    }

        .Search2 .SearchBox {
            float: left;
            border: 0;
        }

            /*forecolor and text style of searchbox*/
            .Search2 .SearchBox .dxeEditAreaSys {
                font: 13px 'Calibri', 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
                color: #3c3c3c;
            }

        .Search2 .Pic {
            float: left;
            width: 13px;
            height: 13px;
            background-position: -40px -37px;
            margin: 5px 6px;
        }

    /* Search Popup */
    .SearchPopup .dxpc-mainDiv,
    td.SearchPopup {
        background-color: white;
        border: 1px solid #c6c6c6 !important;
    }

    .SearchPopup .dxpc-content {
        min-height: 50px;
        padding: 0 !important;
    }

    .SearchPopup .ResultsPanel {
        padding: 5px 1px;
        max-height: 400px;
        overflow: auto;
        margin-bottom: 3px;
    }

        .SearchPopup .ResultsPanel .ResultsNavBar {
            margin: 1px 0 0 0;
            padding: 0;
            font: 13px 'Calibri', 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
            color: #3c3c3c;
        }

            .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-gr {
                padding-bottom: 16px;
                margin-bottom: 0;
            }

                .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-gr.dxnb-last {
                    padding-bottom: 5px;
                }

            .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-content {
                background: none;
                border: 0;
                margin: 0;
                padding: 0;
                text-align: left;
            }

            .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-header {
                background: none;
                border: 0;
                padding: 4px 11px;
            }

                .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-header,
                .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-header a {
                    color: #999999;
                    text-decoration: none;
                    font-weight: normal;
                }

            .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-item {
                padding: 0px 12px 1px 12px;
                margin: 1px 0;
                font-size: 12px;
            }

                .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-item.dxnb-itemHover,
                .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-item.dxnb-itemSelected {
                    background-color: #ff8400;
                    border-color: transparent;
                }

                    .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-item.dxnb-itemHover a,
                    .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-item.dxnb-itemSelected a {
                        color: white;
                    }

                .SearchPopup .ResultsPanel .ResultsNavBar .dxnb-item a {
                    color: #323232;
                    text-decoration: none;
                }


        .SearchPopup .ResultsPanel .dxm-item.dxm-hovered {
            background-color: #ff8400;
        }

            .SearchPopup .ResultsPanel .dxm-item.dxm-hovered a {
                color: white;
            }

    .SearchPopup .NoResultsPanel {
        padding: 10px;
    }

    .SearchLoadingPanel {
        background: White;
        width: 120px;
        height: 40px;
        border: #c6c6c6 solid 1px;
    }

        .SearchLoadingPanel .dx {
            padding: 5px 5px 3px 5px;
        }

    /* Loading DIV */
    .LoadingDiv {
        background-color: white;
        opacity: 0.9 !important;
    }

    /* Aux */

    .Clear {
        display: block;
        clear: both;
        overflow: hidden;
        width: 1px;
        height: 0;
    }

    .LeftPadding {
        padding-left: 50px;
    }

    .TopPadding {
        padding-top: 6px;
    }

    .BottomPadding {
        padding-bottom: 12px;
    }

    .AlignCenter {
        margin: 0 auto;
    }

    .TopMargin {
        margin-top: 6px;
    }

    .BottomMargin {
        margin-bottom: 6px;
    }

    .TopLargeMargin {
        margin-top: 16px;
    }

    .BottomLargeMargin {
        margin-bottom: 16px;
    }

    .Note {
        margin: 10px 0;
    }

    div.Spacer {
        overflow: hidden;
        width: 1px;
        height: 1px;
    }

    .NoWrap {
        white-space: nowrap;
    }

    .NoBorder {
        border-style: none !important;
    }

    .OptionsTable > tbody > tr > td {
        padding: 2px 8px 2px 0;
    }

        .OptionsTable > tbody > tr > td.edit {
            padding-right: 18px;
        }

    .helplink {
        font-weight: bold;
    }

    /*ToggleCheckbox */

    .ToggleCheckbox {
        -ms-transform: scale(4); /* IE */
        -moz-transform: scale(4); /* FF */
        -webkit-transform: scale(4); /* Safari and Chrome */
        -o-transform: scale(4); /* Opera */
        transform: scale(4);
        padding: 10px;
    }

    span.dxToggle {
        border-radius: 1px;
    }

    .dxToggle .dxSwitcher {
        border-radius: 10%;
        height: 7px;
        width: 7px;
        transform: translate3d(3px,3px,0)
    }

    .dxToggle[class*='Checked'] .dxSwitcher {
        transform: translate3d(15px,3px,0);
    }