/* Minification failed. Returning unminified contents.
(2519,25): run-time error CSS1039: Token not allowed after unary operator: '-rem'
(2547,25): run-time error CSS1039: Token not allowed after unary operator: '-rem'
 */
html, body {
    margin: 0;
    padding: 0;
}

.dxmLite_MaterialCompact {
    font: 14px "Roboto";
}

.dxgvControl_MaterialCompact a, .dxeHyperlink_MaterialCompact, .dxgvControl_MaterialCompact .dxgvTable_MaterialCompact .dxgvFocusedRow_MaterialCompact a {
    color: #0078D4;
}

/* Header */
.dxpnl-edge.t.headerPane {
    border: none;
    background-color: #111;
    background-position: left top;
    background-repeat: no-repeat;
    border-radius: 0;
}

    .dxpnl-edge.t.headerPane.bar .dxpnl-np {
        width: 100%;
    }

    .dxpnl-edge.t.headerPane.panel {
        padding: 0;
    }

.headerMenu {
    border-width: 0 !important;
    border-top-width: 1px !important;
}

.expandedPanel {
    padding: 2px !important;
}

    .expandedPanel .headerMenu {
        border-top-width: 0 !important;
    }

.templateTitle {
    float: left;
    margin: 7px;
}

.expandedPanel .templateTitle {
    display: none;
}

.dxpnl-edge.t.headerPane.bar .templateTitle {
    margin: 0;
    margin-top: 7px;
}

.templateTitle a {
    text-decoration: none;
    font-size: 18px;
    color: #fff;
}

.loginControl {
    float: right;
    margin: 24px 25px 12px;
    font-size: 12px;
}

.expandedPanel .loginControl {
    float: none;
    margin-left: 12px;
    margin-bottom: 24px;
}

.loginControl a {
    color: black;
    text-decoration: none;
    border-bottom: dashed 1px black;
    display: inline-block;
}


/* Footer */
.dxpnl-edge.b.footerPane {
    background-color: #fff;
    border: none;
    border-top: solid 1px #c3c3c3;
}

    .dxpnl-edge.b.footerPane.panel {
        padding: 0;
        margin-bottom: 0;
    }

.footerMenu {
    float: right;
    padding-top: 7px;
}

.copyright {
    float: left;
    margin: 15px 15px 11px;
}

.content {
    padding: 5px;
}

/* Left Panel */
.leftPane.panel {
    background-color: #222;
    padding: 1px;
    width: 240px;
    overflow-x: hidden;
    border-radius: 0;
    margin-bottom: 0;
}

/* Right Panel */
.rightPane.panel {
    padding: 0;
    width: 250px;
}

/* Account */
.accountHeader h2 {
    margin: 10px 0 7px 0;
    font-size: 16px;
}

.accountHeader p {
    margin: 0;
    padding: 0;
}

.accountHeader {
    margin-bottom: 20px;
}


/* iOS */
.dxpnlControl_iOS.leftPane,
.dxpnlControl_iOS.rightPane,
.dxpnlControl_iOS.contentPane {
    border-width: 1px !important;
}

    .dxpnlControl_iOS.leftPane.panel {
        width: 300px;
    }

        /* Fix: Ensure iOS collapsed width wins over iOS theme width */
        .dxpnlControl_iOS.leftPane.collapsed,
        .dxpnlControl_iOS.leftPane.panel.collapsed {
            width: 55px !important;
            max-width: 55px !important;
            min-width: 55px !important;
        }

.dxpnlControl_iOS.rightPane {
    width: 450px;
}

.dxpnlControl_iOS .templateTitle {
    margin: 17px 25px;
}

    .dxpnlControl_iOS .templateTitle a {
        color: #303030;
        font-size: 26px;
        line-height: 1em;
        font-weight: bold;
    }

.dxpnlControl_iOS .loginControl a {
    color: #0160E7;
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
}

.dxpnlControl_iOS.mainContentPane {
    border-width: 0px !important;
    box-shadow: initial;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
}

.dxpnlControl_iOS.dxpnl-edge.b.footerPane {
    border-width: 1px !important;
}

.dxpnlControl_iOS .accountHeader p {
    color: #303030;
}

.dxpnlControl_iOS .accountHeader h2 {
    color: #303030;
    font-size: 26px;
    margin-bottom: 10px;
}


/* Aqua */
.dxpnlControl_Aqua.dxpnl-edge.t.headerPane,
.dxpnlControl_Aqua.dxpnl-edge.b.footerPane,
.dxpnlControl_Aqua .footerMenu li {
    background-color: #BFDBFF;
}

.dxpnlControl_Aqua.dxpnl-edge.t.headerPane {
    background-image: url(/Content/images/AquaHeader.jpg);
}

.dxpnlControl_Aqua .accountHeader h2 {
    color: #5689C5;
}

.dxpnlControl_Aqua .loginControl a,
.dxpnlControl_Aqua .templateTitle a {
    color: White;
    border-color: White;
}


/* DevEx */
.dxpnlControl_DevEx.dxpnl-edge.t.headerPane,
.dxpnlControl_DevEx.dxpnl-edge.b.footerPane,
.dxpnlControl_DevEx .footerMenu li {
    background-color: #F2F3F4;
}

.dxpnlControl_DevEx .templateTitle a,
.dxpnlControl_DevEx .loginControl,
.dxpnlControl_DevEx .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_DevEx .loginControl a {
        border-bottom-color: #4B4B57;
    }


/* BlackGlass */
.dxpnlControl_BlackGlass.dxpnl-edge.t.headerPane,
.dxpnlControl_BlackGlass.dxpnl-edge.b.footerPane,
.dxpnlControl_BlackGlass .footerMenu li {
    background-color: #2A2A2A;
    color: white;
}

.dxpnlControl_BlackGlass.dxpnl-edge.t.headerPane {
    background-image: url(/Content/images/BlackGlassHeader.jpg);
}

.dxpnlControl_BlackGlass .leftPanel li[class$="dxnb-last"] ul {
    border-bottom: 1px solid black;
}

.dxpnlControl_BlackGlass .accountHeader p {
    color: #585858;
}

.dxpnlControl_BlackGlass .loginControl a,
.dxpnlControl_BlackGlass .templateTitle a {
    color: White;
    border-color: White;
}


/* Glass */
.dxpnlControl_Glass.dxpnl-edge.t.headerPane,
.dxpnlControl_Glass.dxpnl-edge.b.footerPane,
.dxpnlControl_Glass .footerMenu li {
    background-color: #CFE0E7;
}

.dxpnlControl_Glass.dxpnl-edge.t.headerPane {
    background-image: url(/Content/images/GlassHeader.jpg);
}

.dxpnlControl_Glass .footerMenu * {
    background-image: none !important;
}

.dxpnlControl_Glass .templateTitle a,
.dxpnlControl_Glass .loginControl,
.dxpnlControl_Glass .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Glass .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Glass .accountHeader h2 {
    color: #387FA4;
}

.dxpnlControl_Glass .accountHeader p {
    color: #575757;
}



/* Office2003Blue */
.dxpnlControl_Office2003Blue.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Blue.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Blue .footerMenu li {
    background-color: #BCD4F6;
}

.dxpnlControl_Office2003Blue .footerMenu div {
    background: transparent none;
}

.dxpnlControl_Office2003Blue .leftPanel > ul {
    background: transparent none;
}

.dxpnlControl_Office2003Blue .templateTitle a,
.dxpnlControl_Office2003Blue .loginControl,
.dxpnlControl_Office2003Blue .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Office2003Blue .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Office2003Blue .accountHeader p {
    color: #424242;
}


/* Office2003Olive */
.dxpnlControl_Office2003Olive.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Olive.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Olive .footerMenu li {
    background-color: #D6DCBB;
}

.dxpnlControl_Office2003Olive .footerMenu div {
    background: transparent none;
}

.dxpnlControl_Office2003Olive .leftPanel > ul {
    background: transparent none;
}

.dxpnlControl_Office2003Olive .templateTitle a,
.dxpnlControl_Office2003Olive .loginControl,
.dxpnlControl_Office2003Olive .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Office2003Olive .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Office2003Olive .accountHeader p {
    color: #424242;
}

/* Office2003Silver */
.dxpnlControl_Office2003Silver.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2003Silver.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2003Silver .footerMenu li {
    background-color: #D0D0DE;
}

.dxpnlControl_Office2003Silver .footerMenu div {
    background: transparent none;
}

.dxpnlControl_Office2003Silver .leftPanel > ul {
    background: transparent none;
}

.dxpnlControl_Office2003Silver .templateTitle a,
.dxpnlControl_Office2003Silver .loginControl,
.dxpnlControl_Office2003Silver .loginControl a {
    color: #4B4B57;
}

    .dxpnlControl_Office2003Silver .loginControl a {
        border-bottom-color: #4B4B57;
    }

.dxpnlControl_Office2003Silver .accountHeader p {
    color: #424242;
}

/* Office2010Black */
.dxpnlControl_Office2010Black.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Black.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Black .footerMenu li {
    background-color: #393939;
    color: white;
}

.dxpnlControl_Office2010Black .footerMenu a {
    color: white !important;
}

.dxpnlControl_Office2010Black .accountHeader h2 {
    color: #3C3C3C;
}

.dxpnlControl_Office2010Black .loginControl a,
.dxpnlControl_Office2010Black .templateTitle a {
    color: White;
    border-color: White;
}


/* Office2010Blue */
.dxpnlControl_Office2010Blue.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Blue.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Blue .footerMenu li {
    background-color: #D3E4F6;
}

.dxpnlControl_Office2010Blue .templateTitle a,
.dxpnlControl_Office2010Blue .loginControl,
.dxpnlControl_Office2010Blue .loginControl a {
    color: Black;
}

    .dxpnlControl_Office2010Blue .loginControl a {
        border-bottom-color: Black;
    }

.dxpnlControl_Office2010Blue .accountHeader h2 {
    color: #498BC2;
}


/* Office2010Silver */
.dxpnlControl_Office2010Silver.dxpnl-edge.t.headerPane,
.dxpnlControl_Office2010Silver.dxpnl-edge.b.footerPane,
.dxpnlControl_Office2010Silver .footerMenu li {
    background-color: #A9ACB4;
    color: white;
}

.dxpnlControl_Office2010Silver .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Office2010Silver .loginControl a,
.dxpnlControl_Office2010Silver .templateTitle a {
    color: White;
    border-color: White;
}



/* PlasticBlue */
.dxpnlControl_PlasticBlue.dxpnl-edge.t.headerPane,
.dxpnlControl_PlasticBlue.dxpnl-edge.b.footerPane,
.dxpnlControl_PlasticBlue .footerMenu li {
    background-color: #3C4F8F;
    color: white;
}

.dxpnlControl_PlasticBlue.dxpnl-edge.t.headerPane {
    background-image: url(/Content/images/PlasticBlueHeader.jpg);
}

.dxpnlControl_PlasticBlue .accountHeader h2 {
    color: #5A83D0;
}

.dxpnlControl_PlasticBlue .accountHeader p {
    color: #575757;
}

.dxpnlControl_PlasticBlue .loginControl a,
.dxpnlControl_PlasticBlue .templateTitle a {
    color: White;
    border-color: White;
}


/* RedWine */
.dxpnlControl_RedWine.dxpnl-edge.t.headerPane,
.dxpnlControl_RedWine.dxpnl-edge.b.footerPane,
.dxpnlControl_RedWine .footerMenu li {
    background-color: #78002B;
    color: white;
}

.dxpnlControl_RedWine.dxpnl-edge.t.headerPane {
    background-image: url(/Content/images/RedWineHeader.jpg);
    background-position: top right;
}

.dxpnlControl_RedWine .footerMenu div {
    background: transparent none;
}

.dxpnlControl_RedWine .accountHeader h2 {
    color: #8A0A37;
}

.dxpnlControl_RedWine .loginControl a,
.dxpnlControl_RedWine .templateTitle a {
    color: White;
    border-color: White;
}


/* SoftOrange */
.dxpnlControl_SoftOrange.dxpnl-edge.t.headerPane,
.dxpnlControl_SoftOrange.dxpnl-edge.b.footerPane,
.dxpnlControl_SoftOrange .footerMenu li {
    background-color: #F9F9F9 !important;
    background-image: none !important;
}

.dxpnlControl_SoftOrange .templateTitle a,
.dxpnlControl_SoftOrange .loginControl,
.dxpnlControl_SoftOrange .loginControl a {
    color: Black;
}

    .dxpnlControl_SoftOrange .loginControl a {
        border-bottom-color: Black;
    }

.dxpnlControl_SoftOrange .accountHeader h2 {
    color: Black;
}

.dxpnlControl_SoftOrange .accountHeader p {
    color: #707070;
}


/* Youthful */
.dxpnlControl_Youthful.dxpnl-edge.t.headerPane,
.dxpnlControl_Youthful.dxpnl-edge.b.footerPane,
.dxpnlControl_Youthful .footerMenu li {
    background-color: #8AA150;
    color: white !important;
}

.dxpnlControl_Youthful .accountHeader h2 {
    color: #80A70E;
}

.dxpnlControl_Youthful .loginControl a,
.dxpnlControl_Youthful .templateTitle a {
    color: White;
    border-color: White;
}

/* Metropolis */
.dxpnlControl_Metropolis.dxpnl-edge.t.headerPane,
.dxpnlControl_Metropolis .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_Metropolis.rightPane {
    width: 400px;
}

.dxpnlControl_Metropolis .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Metropolis .loginControl a,
.dxpnlControl_Metropolis .templateTitle a {
    color: Black;
    border-color: Black;
}

.dxpnlControl_Metropolis .templateTitle a {
    font-size: 28px;
}

/* MetropolisBlue */
.dxpnlControl_MetropolisBlue.dxpnl-edge.t.headerPane,
.dxpnlControl_MetropolisBlue .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_MetropolisBlue.rightPane {
    width: 400px;
}

.dxpnlControl_MetropolisBlue .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_MetropolisBlue .loginControl a,
.dxpnlControl_MetropolisBlue .templateTitle a {
    color: Black;
    border-color: Black;
}

.dxpnlControl_MetropolisBlue .templateTitle a {
    font-size: 28px;
}

/* Moderno */
.dxpnlControl_Moderno.dxpnl-edge.t.headerPane,
.dxpnlControl_Moderno .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_Moderno.headerPane .headerMenu .dxm-main {
    border-color: #d1d1d1;
    border-style: solid;
}

.dxpnlControl_Moderno.leftPane {
    padding: 0px;
}

    .dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-header,
    .dxpnlControl_Moderno.leftPane .dxnbLite_Moderno .dxnb-gr:first-child .dxnb-headerCollapsed {
        border-top: 0px;
    }

.dxpnlControl_Moderno.rightPane {
    width: 350px;
}

.dxpnlControl_Moderno .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Moderno .loginControl a,
.dxpnlControl_Moderno .templateTitle a {
    font-size: 14px;
    color: #0072c6;
    border-color: #0072c6;
}

.dxpnlControl_Moderno .templateTitle a {
    font-size: 28px;
}

.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvTable_Moderno {
    border: 0 !important;
}

.dxpnlControl_Moderno .contentPane .dxgvControl_Moderno .dxgvHeader_Moderno {
    border-top: 0 !important;
}

.dxpnlControl_Moderno.dxpnl-edge.b.footerPane {
    background: #EDEDED;
}

/* Mulberry */
.dxpnlControl_Mulberry .footerMenu li {
    background-color: White;
    color: Black;
}

.dxpnlControl_Mulberry .accountHeader h2 {
    color: #3B3B3B;
}

.dxpnlControl_Mulberry .loginControl a,
.dxpnlControl_Mulberry .templateTitle a {
    color: #BF4E6A;
    border-color: #BF4E6A;
    font-size: 14px;
}

.dxpnlControl_Mulberry .templateTitle a {
    font-size: 28px;
}

.dxpnlControl_Mulberry.dxpnl-edge.t.headerPane,
.dxpnlControl_Mulberry.dxpnl-edge.b.footerPane {
    background: #F1F2F5;
}

.dxpnlControl_Mulberry .contentPane .dxgvControl_Mulberry .dxgvTable_Mulberry {
    border: 0 !important;
}

.dxpnlControl_Mulberry .contentPane .dxgvControl_Mulberry .dxgvHeader_Mulberry {
    border-top: 0 !important;
}

.dxmLite_MaterialCompact.dxm-ltr .dxctToolbar_MaterialCompact.dxmtb .dxm-item.dxct-igl.st-grid-title.dxm-disabled,
.dxmLite_MaterialCompact.dxm-ltr .dxctToolbar_MaterialCompact.dxmtb .dxm-item.dxct-il.st-grid-title {
    /*min-width: 80px;*/
    border: none;
    font-size: 18px;
    border-radius: 0;
    padding: 0 0 0 10px;
}

    .dxmLite_MaterialCompact.dxm-ltr .dxctToolbar_MaterialCompact.dxmtb .dxm-item.dxct-igl.st-grid-title.dxm-disabled .dxm-content.dxm-hasText,
    .dxmLite_MaterialCompact.dxm-ltr .dxctToolbar_MaterialCompact.dxmtb .dxm-item.dxct-il.st-grid-title .dxm-content.dxm-hasText {
        padding: 0;
        color: #222;
        padding: 0 0 5px 0;
        border-bottom: solid 3px #fc0;
    }

.dxgvControl_MaterialCompact, .dxgvDisabled_MaterialCompact {
    font: 13px 'Roboto', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    background-color: White;
    color: #484848;
    cursor: default;
    font-weight: 400;
    border-color:transparent;
}

.dxgvEditFormDisplayRow_MaterialCompact td.dxgv, .dxgvDetailCell_MaterialCompact td.dxgv, .dxgvDataRow_MaterialCompact td.dxgv, .dxgvDetailRow_MaterialCompact.dxgvADR td.dxgvAIC {
    overflow: hidden;
    border-bottom: 1px solid #DFDFDF !important;
    border-right-width: 0px;
    border-top-width: 0;
    border-left-width: 0;
    padding: 6px 6px;
    font-size: 13px;
    color: #212121; /*bug 18322*/
}

    .dxgvDataRow_MaterialCompact td.dxgv.dx-ac {
        padding: 0px 6px;
    }

.dxgvDataRow_MaterialCompact td.dxgv .dxeImage_MaterialCompact {
    margin-bottom: 2.5px;
}

.dxGridView_gvHeaderFilter_MaterialCompact {
    background-position: -73px -27px;
}

.dxGridView_gvFilterRowButton_MaterialCompact {
    background-position: -120px -330px;
}

/*Header Filter Dropdown Box*/
.dxeListBoxFilter_MaterialCompact, .dxeListBox_MaterialCompact .dxeListBoxFilter_MaterialCompact .dxeButtonEditSys {
    background-color: #fff;
}

/* --------------------------------------- Design System Code --------------------------------------- */

/* Left Pane Css*/
.lp-outer-container { /*Outer container*/
    position: relative;
    width: 258px;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
}

.lp-inner-container { /*Inner container*/
    width: 240px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.flex-commandbar li .command-icon {
    color: #ededed;
    margin: 0px 12px 0 0;
    width: 30px;
}

.flex-commandbar {
    margin-top: 0;
    padding: 0px;
    padding-bottom: 190px;
}

    .flex-commandbar li {
        font-family: Roboto;
        height: 40px;
        cursor: pointer;
        align-items: center;
        align-self: stretch;
        display: flex;
        flex-shrink: 0;
        outline: none;
        position: relative;
        padding: 0 0;
        cursor: pointer;
        border-left: 4px solid transparent;
    }

        .flex-commandbar li .command-label {
            color: #d2d2d2;
            font-family: "Roboto Regular", Helvetica, "Droid Sans", Tahoma, Geneva, sans-serif;
            width:98%;
        }

        .flex-commandbar li.active {
            font-weight: 500;
            border-left: 4px solid #fc0;
            background-color: #444;
        }

            .flex-commandbar li.active .command-label {
                color: #fff !important;
            }



        .flex-commandbar li:hover {
            background-color: #444;
        }

            .flex-commandbar li:hover a {
                color: #fff;
            }

        .flex-commandbar li a {
            color: #d2d2d2;
            text-decoration: none !important;
            align-items: center;
            align-self: stretch;
            display: flex;
            flex-direction: row;
            margin: 0;
            margin-left: -4px;
            padding: 0 14px;
            position: relative;
            flex-grow: 1;
            font-family: Roboto;
        }

.internal-submenu {
    display: none;
    background-color: #2d2d2d;
    padding: 0;
}

.internal-submenu-trigger {
    padding: 0 10px !important;
}

hr.side-nav-separator {
    margin: 0;
    border-color: #3e3e3e;
}

.st-fa-icon {
    color: #ededed;
    font-size: 20px;
    margin: 0 10px 0px 2px;
    width: 30px;
}

/* Plan2Schedule icon styling in the menu pane */
.nav-icon-p2s {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    margin-left: 1px;
}

.internal-submenu li a {
    padding: 0 0 0 62px !important;
}

.internal-submenu li img {
    width: 25px;
    margin-right: 10px;
}

.internal-submenu li i {
    font-size: 20px;
    margin-right: 10px;
}

/* Main Content Pane */
/*.contentPane {
    height: calc(100vh - 79px);
    overflow-y: hidden;
    position: relative;
    padding-left: 0px; /* remove later or find solution - stevie
}*/

/* GridView > Header */
.dxgvHeader_MaterialCompact {
    padding: 5px 6px 5px 6px;
    font-family: 'Roboto', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-weight: 500;
}

/* */
.collapser {
    bottom: 40px;
    position: fixed;
    background-color: #272727;
    width: 238px;
    transition: width 200ms cubic-bezier(.4,0,.2,1);
    user-select: none;
    cursor: pointer;
}

.st-hide-side {
    float: right;
    border: none;
    padding: 10px 0 0 0;
    color: white;
    background-color: transparent;
    width: 60px;
    user-select: none;
}

.collapsed .collapser .st-hide-side i {
    transform: rotate(180deg);
    transition: all 0.1s ease;
}

.collapser .st-hide-side i{
    transform: rotate(0deg);
}

/*Datagrid - width settings*/
.gridWrapper {
    width: 100%;
    overflow-x: auto;
    height: calc(100vh - 117px);
    overflow-y: hidden;
}

    /*.gridWrapper .dxgvCSD, .gridWrapper .dxgvHSDC div, .gridWrapper .dxgvControl_MaterialCompact.dxgv {
        width: calc(100% - 2px) !important;
    }*/

    .gridWrapper .dxgvHSDC {
        margin-top: 54px;
    }

    .gridWrapper .dxgvCSD {
        height: calc(100vh - 250px) !important;
    }

    .gridWrapper .dxmLite_MaterialCompact, .gridWrapper .dxgvFilterBar_MaterialCompact {
        position: absolute;
    }

    .gridWrapper td[class^='dxgvFilterBuilderMainArea'] .dxm-popup {
        overflow-x: hidden;
        overflow-y: auto !important;
        height: auto !important;
        max-height: calc(100vh - 330px) !important;
    }

.dxmLite_MaterialCompact .dxm-popup .dxm-item.dxm-hovered span.dx-vam {
    color: #212121;
}

/* Datagrid  > Edit Row */
.dxgvFilterRow_MaterialCompact td.dxgv {
    padding: 3px 6px 3px 6px;
}

.dxmLite_MaterialCompact .dxctToolbar_MaterialCompact.dxm-main.dxmtb {
    background-color: transparent;
    padding-top: 10px;padding-bottom: 10px;
    border-width: 0;
}

.dxbButton_MaterialCompact.dxbTSys {
    min-width:44px !important;
}

[id ^='btnAdd'].dxbButton_MaterialCompact.dxbTSys {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dfdfdf;
    box-shadow: none;
    color: #484848;
    font-size: 14px;
    height: 34px;
    margin-right: 0px;
    margin-left: 0px;
}

    [id ^='btnAdd'].dxbButton_MaterialCompact.dxbTSys.dxbButtonHover_MaterialCompact, #btShowModal.dxbButton_MaterialCompact.dxbTSys.dxbButtonHover_MaterialCompact,
    .trigger-bh.dxbButton_MaterialCompact.dxbTSys.dxbButtonHover_MaterialCompact, .dxbButton_MaterialCompact.dxbTSys.dxbButtonHover_MaterialCompact {
        background-color: #eee;
    }

#btnExport.dxbButton_MaterialCompact div.dxb, [id ^='btnAdd'].dxbButton_MaterialCompact div.dxb {
    padding: 6px 14px 3px 14px;
}

.gridWrapper .dxmLite_MaterialCompact .dxctToolbar_MaterialCompact.dxm-horizontal.dxmtb .dxm-image-l .dxm-content, .dxmLite_MaterialCompact .dxctToolbar_MaterialCompact.dxm-horizontal.dxmtb .dxm-image-r .dxm-content, .dxmLite_MaterialCompact .dxctToolbar_MaterialCompact.dxm-horizontal.dxmtb .dxm-image-l .dxm-subMenu .dxm-content, .dxmLite_MaterialCompact .dxctToolbar_MaterialCompact.dxm-horizontal.dxmtb .dxm-image-r .dxm-subMenu .dxm-content {
    padding-top: 7px;
}

.gridWrapper .dxmLite_MaterialCompact.dxm-ltr .dxctToolbar_MaterialCompact.dxmtb li.dxm-item.dxm-noSubMenu.dxct-igl[title *= 'Column'] + li.dxm-separator {
    display: none;
}

    .gridWrapper .dxmLite_MaterialCompact.dxm-ltr .dxctToolbar_MaterialCompact.dxmtb li.dxm-item.dxm-noSubMenu.dxct-igl[title *= 'Column'] + li.dxm-separator + li {
        min-width: 0px;
    }

.dxgvFilterRow_MaterialCompact input[type="text"].dxeEditArea_MaterialCompact {
    padding-left:0px !important;
    padding-right:0px !important;
}

.dxgvFilterRow_MaterialCompact .dxeButtonEditButton_MaterialCompact.dxeButtonEditClearButton_MaterialCompact,
.dxgvFilterRow_MaterialCompact .dxeSpinDecButton_MaterialCompact,
.dxgvFilterRow_MaterialCompact .dxeSpinIncButton_MaterialCompact {
    padding: 1px 5px !important;
}

/* GridView > Details Row */
.dxgvDetailRow_MaterialCompact {
    background-color: #f1f1f1;
}

.dxeTextBox_MaterialCompact td.dxic {
    padding: 4px 0px;
}

    .dxeTextBox_MaterialCompact td.dxic input {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

/* LeftFlexGrid Collapser */
#left-flex-grid.collapsed .copyright {
    display: none;
}

/*Inner grid*/
.innerGridWrapper .dxgvRBB .dxgvEmptyDataRow_MaterialCompact.dxgvLVR > td.dxgv, .innerGridWrapper .dxgvRBB .dxgvDataRow_MaterialCompact.dxgvLVR > td.dxgv, .dxgvRBB .dxgvDataRow_MaterialCompact.dxgvLVR > td.dxgv, .innerGridWrapper .dxgvRBB .dxgvGroupRow_MaterialCompact.dxgvLVR > td.dxgv {
    border-bottom-width: 0px !important;
}

/*#left-flex-grid {
    position: relative;
    background-color: #1c1c1c;
    width: 260px;
    
    flex-shrink: 0;
    overflow-y: hidden;
    overflow-x: hidden;
}*/
html {
    transition: width 200ms cubic-bezier(.4,0,.2,1);
}

.leftPane {
    transition: width 200ms cubic-bezier(.4,0,.2,1);
    overflow: hidden; /* So that the menu is hidden when its collapsed */
}

    .leftPane.collapsed {
        width: 55px;
        /*Added to limit the size till 55px*/
        max-width: 55px;
        min-width: 55px;
    }

        .leftPane.collapsed .collapser {
            width: 53px;
        }

    .leftPane .command-label {
        transition: width 200ms cubic-bezier(.4,0,.2,1);
        font-size: 13px;
        user-select: none;
    }

    .leftPane.collapsed .command-label {
        display: none;
        visibility: hidden;
    }

.dxeHyperlink_MaterialCompact {
    font-size: 13px; /*bug 18322*/
}


/* Mobile Menu */
#mobile-menu-icon {
    color: #ffffff;
    float: left;
    display: none;
}

/* Datagrid Icons - this is a test */
.red-icon {
    color: red;
}

/* Datagrid > Header Icons */
.bh-icon-forced {
}

    .bh-icon-forced .dx-vam::before {
        content: "check";
    }


.forced-header-button {
    background-color: #fff;
    box-shadow: none;
    border: 1px solid #dedede;
    border-radius: 3px;
}

/* App Icon */
.app-icon-fb {
    float: left;
    padding: 2px 0 0 10px;
}

#HeaderPane_EBB {
    display: none;
}

.st-mobile-menu-items {
    display: none;
    width: 230px;
    background-color: #222;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 9999999999;
    border: none;
    overflow: hidden;
    display: none;
}

.drawer-overlay {
    border: none;
    background-color: black;
    width: 100%;
    height: 100%;
    /* display: inline-block; */
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    opacity: 0.6;
    display: none;
    z-index: 999999999;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.user-menu-item-mobile {
    color: #fff;
}

/***** Footer *****/
.st-footer {
    font-size: 12px;
    background-color: #fff;
    box-shadow: 0px -1px 1px 1px rgba(117, 117, 117, 0.3);
    width: 100%;
    height: 40px;
    padding: 3px 20px 0 20px;
    bottom: 0;
    overflow: hidden;
    position: fixed;
    z-index: 700;
}

    .st-footer .st-foot-copyright {
        float: left;
    }

    .st-footer .st-foot-ipg {
        float: right;
        margin: 10px 0;
    }

    .st-footer .st-foot-copyright .options {
        margin: 0;
        display: inline-block;
        vertical-align: top;
        margin: 8px;
        padding: 2px 0 0 0;
    }

        .st-footer .st-foot-copyright .options li {
            margin: 0;
            display: inline-block;
            vertical-align: top;
        }

            .st-footer .st-foot-copyright .options li a {
                color: #000;
                padding: 20px;
                margin: 10px 0 0 0;
            }


    .st-footer .footer-logo {
        width: 100px;
        float: left;
    }

/* Mobile P2S app pages (window.P2SMode = 'mobile') render this info in the
   header's Settings (gear icon) > About section instead (see GlobalFilters.cshtml). */
html.p2s-mobile-app .st-footer,
html.p2s-mobile-app .dxpnl-edge.b.footerPane {
    display: none !important;
}

.cat-ipg {
    padding: 6px;
    background-color: #ff9900;
    color: #fff;
    border-radius: 50px;
}

/* Business Hierarchy */
.mainContentPane {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    /* Suppress pull-to-refresh / scroll chaining without vetoing pan gestures for
       descendants — touch-action:none here would disable Bryntum's touch scrolling. */
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    height: 100% !important;
}

.contentPane, .schedulerWrapper {
    flex: 1 1 auto;
    /* resizable */
    width: 100%;
}

.st-business-hierarchy, .st-appointment-details {
    background-color: #fff;
    padding: 0 5px 0 0;
    padding: 0 5px 0 0;
    height: calc(100vh - 79px);
    border-right: 1px solid #ececec;
    padding: 6px;
    font-size: 14px;
    transition: width 200ms cubic-bezier(.4,0,.2,1);
    user-select: none;
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 300px;
    width: 300px;
    max-width: 500px;
}

    .st-business-hierarchy.collapsed, .st-appointment-details.collapsed {
        width: 0px !important;
        padding: 0px !important;
        display: none;
    }

    .st-business-hierarchy .Children.Collapsed {
        display: none;
    }

    .st-business-hierarchy .Node {
        margin-left: 18px;
    }

        .st-business-hierarchy .Node.Root.Parent {
            margin-left: 0;
        }

    .st-business-hierarchy #businessHierarchy {
        width: auto !important;
        height: calc(100vh - 82px) !important;
        overflow-y: auto;
    }

.ui-resizable-handle.ui-resizable-e {
    right: 0px;
}

/*-------------Solar Desktops-------------------*/
@media screen and (min-device-width: 1600px) and (max-device-width: 1920px) and (-webkit-min-device-pixel-ratio: 1) {
    .dxm-ltr .dxm-horizontal ul.dx.pinnedForm {
        margin-right: calc(100% - 87%) !important;
    }
}

.st-business-hierarchy .node-ball-icon {
    display: inline-block;
    /*background-color: #1279D2;
    color: #fff;
    padding: 0;
    border-radius: 17px;
    width: 21px;
    height: 21px;*/
}

.st-business-hierarchy .st-stat-ball {
    background-color: #999999;
    padding: 0;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    position: relative;
    top: -2px;
    margin: 0 8px 0 0;
}

.st-business-hierarchy .st-node-cont {
    padding: 6px;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
    min-width: 350px;
}

    .st-business-hierarchy .st-node-cont:hover {
        background-color: #cde6f7;
    }

.st-business-hierarchy .st-bu-icon {
    color: #1279D2;
}

.bh-darkblue-image {
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

.st-business-hierarchy .material-icons.st-bu-icon {
    margin: 0 8px 0 0;
    position: relative;
    font-size: 21px;
    top: 5px;
}

.st-business-hierarchy .fas.st-bu-icon {
    margin: 0 8px 0 0;
    position: relative;
    display: inline;
    font-size: 16px;
}

.st-business-hierarchy .root-node {
    background-color: #cde6f7;
}

.st-bh-arrows {
    font-size: 9px;
    color: #333;
    /*margin: 0 6px 0 0;*/
    padding: 3px 6px;
    position: relative;
    top: -1px;
    transform: rotate(90deg);
    transition: all 200ms cubic-bezier(.4,0,.2,1);
}

.Collapsed .st-bh-arrows {
    transform: rotate(0);
    
}

/**------------Common Media Query-------------*/
@media screen and (max-device-width: 1024px) {
    #pinBusinessHierarchy {
        display: none;
    }

    #businessHierarchy {
        max-width: 220px;
        overflow: auto;
    }
}

@media only screen and (max-width : 767px) {
    .mobile-only {
        display: inline-block;
    }

    #mobile-menu-icon {
        padding: 5px 0 0 0;
        display: inline-block;
        margin-left: 10px;
    }
}

@media only screen and (max-width : 500px) {
    #mobile-menu-icon {
        padding: 3px 0 0 0;
    }

    .app-icon-fb {
        margin-top:0px;
    }

    .templateTitle a {
        margin-left:7px;
    }
}

/* Tablet touch devices should use the same slide drawer behavior as mobile */
html.tablet-drawer-mode .mobile-only {
    display: inline-block !important;
}

html.tablet-drawer-mode #mobile-menu-icon {
    display: inline-block !important;
    padding: 5px 0 0 0;
    margin-left: 10px;
}

html.tablet-drawer-mode {
    padding-left: 0 !important;
}

    html.tablet-drawer-mode .leftPane.panel,
    html.tablet-drawer-mode .collapser {
        display: none !important;
    }

    html.tablet-drawer-mode .contentPane > form,
    html.tablet-drawer-mode .contentPane > .gridWrapper {
        margin-left: 0 !important;
    }

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    html {
        padding-left: 0px !important;
    }

    .hide-on-mobile {
        display: none;
    }

    .mobile-only {
        display: inline-block;
    }

    #mobile-menu-icon {
        padding: 5px 0 0 0;
        display: inline-block;
        margin-left: 0px;
    }

    .templateTitle {
        padding: 8px 0 0 10px;
    }

    .dxpnl-edge.t.headerPane.bar .templateTitle {
        margin-top: 0px;
    }

    .gridWrapper .dxgvHSDC {
        padding-right: 0px !important;
        margin-top: 0px;
    }

    .gridWrapper .dxmLite_MaterialCompact, .gridWrapper .dxgvFilterBar_MaterialCompact {
        position: relative;
    }

    .dxgvSearchPanel_MaterialCompact {
        display: none;
    }
}

/*Browser resize*/
@media screen and (max-width : 840px) {
    .dxgvSearchPanel_MaterialCompact {
        display: none;
    }
}

/*grid cloumn chooser*/
.dxpcLite_MaterialCompact .dxpc-header, .dxdpLite_MaterialCompact .dxpc-header {
    color: #212121;
}

#btShowModal, .trigger-bh.dxbButton_MaterialCompact.dxbTSys, .trigger-bh.dxbButton_MaterialCompact.dxbTSys.dxbDisabled_MaterialCompact {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dfdfdf;
    box-shadow: none;
    color: #484848;
    font-size: 14px;
    height: 34px;
    margin: 0px !important;
}

    #btShowModal .dxb img#btShowModalImg {
        width: 16px;
        height: 16px;
    }

    .trigger-bh.dxbButton_MaterialCompact.dxbTSys #BusinessHierarchyImg, .trigger-bh.dxbButton_MaterialCompact.dxbTSys #AuditInfoImg, #MAAuditInfoImg {
        width: 16px;
        height: 16px;
    }
/*column chooser popup*/

[id^="ColumnChooserPopup"] .dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact#PopupSaveButton {
    box-shadow: none;
    float: right;
    background: transparent;
    margin-top: -5px;
}


[id^="ColumnChooserPopup"] .dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact#PopupCancelButton {
    box-shadow: none;
    float: left;
    background: transparent;
    margin-top: -5px;
    margin-left: 0px;
}

[id^="ColumnChooserPopup"] .dxpc-mainDiv .dxpc-content span.columnSelectorHeader {
    width: 175px;
    border-bottom: 2px solid #fc0;
    font-size: 14px;
    font-weight: 400;
    color: #313747;
    padding: 0px 5px;
}


[id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact .dxpc-mainDiv .dxpc-header {
    display: none;
}

[id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact .dxpc-mainDiv .dxpc-content .popupHeaderWrapper {
    padding: 10px 10px 15px 10px;
    background-color: #fff;
    text-align: center;
    /* margin-bottom: 6px; */
    box-shadow: none;
    border-radius: 0px;
    /* margin-top: 6px; */
    /* border-radius: 4px; */
    background-color: #03A9F4;
    color: #FFFFFF;
    font-size: 22px;
}

[id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact .dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact {
    width: auto;
    border: none;
}

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact.dxbButtonHover_MaterialCompact {
        background-color: transparent !important;
    }

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact img {
        width: 22px;
    }

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact div.dxb {
        padding: 0px;
    }

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact#PopupSaveButton {
        float: right;
    }

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-content .dxbButton_MaterialCompact#PopupCancelButton {
        float: left;
    }

[id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact .dxpc-mainDiv .dxpc-content span.columnSelectorHeader {
    width: 175px;
    border-bottom: 2px solid #fff;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    color: #fff;
    font-family: ROBOTO medium;
    padding: 0px 5px;
}

#exportColumnsGrid .dxgvDataRow_MaterialCompact td.dxgv, #exportColumnsGrid .dxgvHeader_MaterialCompact {
    padding: 7px 10px 7px !important;
    border: none;
}

[id^="ColumnChooserPopup_"] .dxpcLite_MaterialCompact .dxpc-contentWrapper .dxbButton_MaterialCompact.dxbTSys, [id^="ColumnChooserPopup_"] #PopupSaveButton,
[id^="ColumnChooserPopup_"] #PopupCancelButton {
    padding: 0px !important;
}

[id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact .dxpc-mainDiv .dxpc-contentWrapper {
    background-color: #EFEFEF;
}

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-contentWrapper .dxpc-content {
        padding-bottom: 9px;
        padding-top: 0px;
    }

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvHSDC {
        display: none;
    }

    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvCSD .dxgvTable_MaterialCompact .dxgvDataRow_MaterialCompact,
    [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvCSD .dxgvTable_MaterialCompact .dxgvDataRow_Material.dxgvSelectedRow_MaterialCompact {
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
        min-height: 23px;
        font-size: 12px;
        height: 35px;
        margin-bottom: 6px;
        border-radius: 3px;
        border-collapse: separate;
    }

        [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvCSD .dxgvTable_MaterialCompact .dxgvDataRow_MaterialCompact td.dxgv {
            border-right: none;
        }

        [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvCSD .dxgvTable_MaterialCompact .dxgvDataRow_MaterialCompact .dxgvCommandColumn_MaterialCompact .dxWeb_edtCheckBoxChecked_MaterialCompact,
        [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact.dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvCSD .dxgvTable_MaterialCompact .dxgvDataRow_MaterialCompact .dxgvCommandColumn_MaterialCompact .dxWeb_edtCheckBoxUnchecked_MaterialCompact {
            background-position: center;
            width: 24px;
            margin: 1px 0px 0px;
            background-size: 20px;
        }

        [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact .dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvCSD .dxgvTable_MaterialCompact .dxgvDataRow_MaterialCompact .dxgvCommandColumn_MaterialCompact .dxWeb_edtCheckBoxUnchecked_MaterialCompact {
            background-image: url(/Content/~/Images/Icons/hide.png) !important;
            background-image: url(/Content/Images/Icons/hide.png) !important;
            width: 24px;
            background: transparent;
            height: 24px;
            margin: 0px;
        }

        [id^="ColumnChooserPopup_"].dxpcLite_MaterialCompact .dxpc-mainDiv .dxpc-contentWrapper #exportColumnsGrid .dxgvCSD .dxgvTable_MaterialCompact .dxgvDataRow_MaterialCompact .dxgvCommandColumn_MaterialCompact .dxWeb_edtCheckBoxChecked_MaterialCompact {
            content: url(/Content/Images/Icons/eye.png) !important;
            width: 25px;
            background: transparent;
            height: 29px;
            margin: 0px;
        }


.dxgvPagerBottomPanel_MaterialCompact {
    text-align: center;
}

.dxgvSearchPanel_MaterialCompact {
    float: right;
    height: 30px;
    margin: 0 10px 0 0;
    padding: 10px 0 16px;
    width: 250px;
    position: absolute;
    right: -2px;
}

    .dxgvSearchPanel_MaterialCompact .dxeButtonEdit_MaterialCompact {
        box-shadow: none;
        background-color: #fff;
        border-color: #ccc;
        background-color: transparent;
    }

        .dxgvSearchPanel_MaterialCompact .dxeButtonEdit_MaterialCompact td.dxic {
            padding: 8px 8px 9px 8px !important;
        }

            .dxgvSearchPanel_MaterialCompact .dxeButtonEdit_MaterialCompact td.dxic input {
                padding-left: 0px !important;
                padding-right: 0px !important;
                background-color: transparent;
            }

    .dxgvSearchPanel_MaterialCompact .dxeNullText_MaterialCompact .dxeEditArea_MaterialCompact, .dxgvSearchPanel_MaterialCompact .dxeNullText_MaterialCompact .dxeMemoEditArea_MaterialCompact,
    .dxgvSearchPanel_MaterialCompact .dxFirefox .dxeNullText_MaterialCompact .dxeMemoEditArea_MaterialCompact { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #acacac;
    }

    .dxgvSearchPanel_MaterialCompact .dxeButtonEditButton_MaterialCompact.dxeButtonEditClearButton_MaterialCompact {
        padding-left: 0px !important;
        padding-right: 8px !important;
    }

        .dxgvSearchPanel_MaterialCompact .dxeButtonEditButton_MaterialCompact.dxeButtonEditClearButton_MaterialCompact.dxHideContent img {
            content: url(/Content/Images/Icons/search.png);
            visibility: visible;
            background: none;
        }

/*column chooser*/
div.dxgvCustDialogContent_MaterialCompact {
    overflow-y: scroll;
    min-height: calc(100vh - 121px);
    height: 1px;
    padding-top: 26px;
}

.dxgvCustDialogHeader_MaterialCompact {
    background-color: #03A9F4;
    color: #FFFFFF;
    font-size: 22px;
    padding: 0px;
    padding-bottom: 0px !important;
    white-space: nowrap;
}

.dxgvCustDialog_MaterialCompact .dxpc-content.dxgvCD_ColumnChooserPage, .dxgvCustDialog_MaterialCompact .dxpc-content.dxgvCD_SortPage {
    overflow-y: hidden;
}

/*Create WO popup*/
.dialogHeader {
    color: #484848;
    font-size: 18px;
    font-family: 'Roboto';
    padding: 8px 10px 8px 3px;
}

.ui-dialog .ui-dialog-buttonpane button#btnCreateWO {
    margin-left: 0px !important;
}

    .ui-dialog .ui-dialog-buttonpane button#btnCreateWO:hover, .ui-dialog .ui-dialog-buttonpane .edit-blueButton.ui-button.ui-corner-all.ui-widget:hover {
        background-color: #0A5A9c;
        color: #fff;
    }

.ui-dialog .ui-dialog-buttonpane button#btnCancel {
    margin-left: 14px;
}

    .ui-dialog .ui-dialog-buttonpane button#btnCancel:hover {
        background-color: #eaeaea;
    }

.ui-dialog .ui-dialog-buttonpane button {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    font-family: 'Roboto';
}

#dialog-form .input-group {
    padding-left: 4px;
    width: 100%;
}

    #dialog-form .input-group table {
        width: 100%;
    }

div#dialog-form, div#dialog-formSaveCurrentView {
    overflow: unset !important;
}

.dxbButton_MaterialCompact, .ui-widget button {
    font-family: 'Roboto';
}

.ui-dialog .ui-dialog-buttonpane {
    border-top-width: 0px;
}

/*Common font-family*/
.dxpnlControl_MaterialCompact {
    font-family: "Roboto";
}

/*Grid > Data row > status ball*/
.st-status-ball {
    height: 11px;
    width: 11px;
    margin-left: 2px;
    margin-right: 6px;
    border-radius: 50%;
    display: inline-block;
    border: none;
    position: relative;
    top: 1px;
}

    .st-status-ball i.material-icons.status-ball-icon {
        border-radius: 50%;
        font-size: 11px;
        color: #fff;
        background-color: transparent;
        top: -1px;
    }
    .st-status-ball.PotentialRestricted {
        background-color: #FFA500;
    }
        .st-status-ball.PotentialRestricted i.material-icons.status-ball-icon {
            color: #FFA500;
            background-color: transparent;
            font-size: 13px;
        }
    .st-status-ball.Restricted {
        background-color: #FF0000;
    }

        .st-status-ball.Restricted i.material-icons.status-ball-icon {
            color: #FF0000;
            background-color: transparent;
            font-size: 13px;
        }

    .st-status-ball.NotScreened {
        background-color: #FFFE33;
    }

        .st-status-ball.NotScreened i.material-icons.status-ball-icon {
            color: #FFFE33;
            background-color: transparent;
            font-size: 13px;
        }


    .st-status-ball.Accepted {
        background-color: #4CAF50;
    }

    .st-status-ball.Approved {
        background-color: transparent;
    }

        .st-status-ball.Approved i.material-icons.status-ball-icon {
            color: #4CAF50;
            background-color: transparent;
            font-size: 13px;
        }

            .st-status-ball.Approved i.material-icons.status-ball-icon::after, 
            .st-status-ball.FinancialReconciliationProcessed i.material-icons.status-ball-icon::after {
                content: "check_circle";
            }

    .st-status-ball.Assigned {
        background-color: #009688;
    }
    .st-status-ball.Available {
        background-color: #0A5A9c;
    }

    .st-status-ball.Cancelled {
        background-color: transparent;
    }

        .st-status-ball.Cancelled i.material-icons.status-ball-icon {
            color: #f44336;
            font-size: 13px;
        }

            .st-status-ball.Cancelled i.material-icons.status-ball-icon::after {
                content: "remove_circle";
            }

    .st-status-ball.Closed {
        background-color: #607D8B;
    }

    .st-status-ball.Completed, .st-status-ball.Complete {
        background-color: transparent;
        border: 1px solid #4CAF50;
    }

    .st-status-ball.Costed {
        background-color: #03A9F4;
    }

    .st-status-ball.Dispatched {
        background-color: rgb(156, 106, 222);
    }

        .st-status-ball.Dispatched i.material-icons.status-ball-icon {
            font-size: 9px;
            top: 1px;
        }

            .st-status-ball.Dispatched i.material-icons.status-ball-icon::after {
                content: "trending_flat";
            }

    .st-status-ball.FinancialReconciliationProcessed i.material-icons.status-ball-icon {
        color: #3F51B5;
        background-color: transparent;
        font-size: 13px;
    }

    .st-status-ball.ReadyforFinancialReconciliation {
        background-color: #3F51B5;
    }

    .st-status-ball.Incomplete i.material-icons.status-ball-icon {
        color: #f44336;
        background-color: transparent;
        font-size: 13px;
    }

        .st-status-ball.Incomplete i.material-icons.status-ball-icon::after {
            content: "error";
        }

    .st-status-ball.New {
        background-color: #d7d7d7;
    }

    .st-status-ball.Open {
        background-color: transparent;
        border: 1px solid #4CAF50;
    }

    .st-status-ball.Planned i.material-icons.status-ball-icon {
        color: #ff9800;
        background-color: transparent;
        font-size: 13px;
    }

        .st-status-ball.Planned i.material-icons.status-ball-icon::after {
            content: "watch_later";
        }

    .st-status-ball.WIP, .st-status-ball.WorkinProgress {
        background-color: #ffcc00;
    }
    

        .st-status-ball.WIP i.material-icons.status-ball-icon, .st-status-ball.WorkinProgress i.material-icons.status-ball-icon {
            font-size: 11px;
            top: 0px;
        }

            .st-status-ball.WIP i.material-icons.status-ball-icon::after, .st-status-ball.WorkinProgress i.material-icons.status-ball-icon::after {
                content: "autorenew";
            }

    .st-status-ball.Pending {
        background-color: #ffb266;
    }

    .st-status-ball.Solar {
        background-color: #4CAF50;
    }

.dayleftcomplete {
    width: 10px;
    height: 10px;
    background: #05b52b;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 3px;
}

.dayleftorange {
    width: 10px;
    height: 10px;
    background: #ffac65;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 3px;
}

.dayleftzero {
    width: 10px;
    height: 10px;
    background: #bebfbe;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 3px;
}

.dayleftyellow {
    width: 10px;
    height: 10px;
    background: #ffcc00;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 3px;
}

.dayleftred {
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 3px;
}
/*Engineer MedicalCompliant Status*/
.RedMedicalCompliant {
    color: #f5222d;
}
.GreenMedicalCompliant {
    color: #52c41a;
}
.GreenOKMedicalCompliant {
    color: #52c41a;
}
.YellowMedicalCompliant {
    color: #fa8c16;
}
.OrangeMedicalCompliant {
    color: #fa541c;
}
.NonComplient {
    color: #f5222d;
}
.MedicalCompliant {
    color: #f5222d;
}
/*Meical Compliance status ball*/
.st-status-ball.RedCompliant {
    background-color: #ff0000;
}

.st-status-ball.GreenCompliant {
    background-color: green;
}

.st-status-ball.YellowCompliant {
    background-color: #ffe700;
}


.st-status-ball.OrangeCompliant {
    background-color: #ffac65;
}

.st-status-ball.NonCompliant {
    background-color: #ff0000;
}

.st-status-ball.Compliant {
    background-color: #ff0000;
}
.expireSoonRed {
    color: #f5222d;
}
.expireSoonOrange {
    color: #fa541c;
}
.expireSoonYellow {
    color: #fa8c16;
}

/*Global Filter*/
.templateGlobalMenu {
    width: auto;
    float: right;
    padding: 7px;
}

    .templateGlobalMenu ul {
        margin-top: 4px;
        margin-right: 6px;
        margin-bottom: 0px;
        padding-left:0px;
    }

    .templateGlobalMenu ul li{
        display:inline;
        margin-left:10px;
    }

        .templateGlobalMenu ul li i {
            color: #fff;
            font-size: 17px;
            cursor: pointer;
        }

        .templateGlobalMenu ul li span {
            color: #fff;
            margin-left: 10px;
            font-size: 12px;
            cursor: default;
        }

/*form .form-horizontal.globalFilterPage {
    height: calc(100vh - 82px);
}*/

/*form .form-horizontal .globalFilterWrapper {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .06);
    background-color: #fff;
    border: 1px solid #eee;
    max-width: 1100px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 20px;
}*/

.globalFilterTitle {
    font-size: 23px;
    font-family: 'Roboto';
    color: #333;
    font-weight: 400;
}

form .form-horizontal .globalFilterWrapper .row + hr {
    width: 100%;
    margin: 0px;
}

form .form-horizontal .globalFilterWrapper .Header span {
    font-size: 18px;
    vertical-align: top;
}

    form .form-horizontal .globalFilterWrapper .Header span.required-label {
        display: inline-block;
    }

form .form-horizontal .globalFilterWrapper .Header .collapsedInfo {
    display: inline-block;
    margin-left: 150px;
    margin-top: -10px;
}

    form .form-horizontal .globalFilterWrapper .Header .collapsedInfo.hiddenDiv {
        display: none;
    }

.globalbuttonWrapper {
    float: right;
    padding: 10px;
}

    .globalbuttonWrapper .dxbButton_MaterialCompact.dxbTSys.edit-CancelButton {
        background-color: #f4f4f4;
        color: rgb(33,33,33);
        width: auto !important;
        font-size: 14px !important;
        font-weight: 400;
        border-radius: 3px;
        height: 30px;
        /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);*/
        box-shadow: none;
        text-transform: capitalize;
        text-rendering: geometricPrecision;
        text-align: center;
        position: relative;
        line-height: 20px;
        min-width: 72px;
        border: none;
        margin: 0 10px 0 16px;
        padding: 0 8px;
    }

    .globalbuttonWrapper .dxbButton_MaterialCompact.dxbTSys.edit-blueButton {
        background-color: rgb(66, 133, 244);
        border-radius: 3px;
        color: white;
        height: 30px;
        /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);*/
        box-shadow: none;
        text-transform: capitalize;
        text-rendering: geometricPrecision;
        text-align: center;
        position: relative;
        line-height: 20px;
        min-width: 72px;
        border: none;
        margin: 0 0 0 14px !important;
        padding: 0 8px;
    }    

.globalFilterWrapper .DistrictSettigs .form-group p {
    font-weight: 700;
    font-size: 13px;
    color: #212121;
    font-style: normal;
    white-space: nowrap;
}

.globalFilterWrapper .DistrictSettigs .form-group .chkbxWrapper {
    margin-bottom: 10px;
}

    .globalFilterWrapper .DistrictSettigs .form-group .chkbxWrapper input {
        width: 14px;
        height: 13px;
        margin-top: 0px;
    }

.form-group .chkbxLabel {
    font-weight: 400;
    margin-left: 10px;
    display: inline-block;
    padding-bottom: 0px;
    vertical-align: text-top;
    margin-top: -1px;
}

form .form-horizontal .globalFilterWrapper .Header .collapsedInfo .chkbxLabel {
    display: inline;
}

    form .form-horizontal .globalFilterWrapper .Header .collapsedInfo span {
        vertical-align: baseline;
        font-size: 13px;
    }

/*Gid row filter - dataype - number*/
.dxeSpinIncButton_MaterialCompact {
    padding: 2px 12px 1px;
}

.dxeSpinDecButton_MaterialCompact {
    padding: 1px 12px 2px;
}

/*Custom filter*/
.dxgvFilterBuilderButtonArea_MaterialCompact .dxbButton_MaterialCompact.dxbTSys[id $= 'OKBTN'] .dxb .dx-vam {
    display: none !important;
}

.dxgvFilterBuilderButtonArea_MaterialCompact .dxbButton_MaterialCompact.dxbTSys[id $= 'OKBTN'] .dxb:after {
    content: "Apply";
    text-transform:capitalize;
}

.dxgvFilterBuilderButtonArea_MaterialCompact .dxbButton_MaterialCompact.dxbTSys.dxbButtonHover_MaterialCompact[id $= 'OKBTN'] {
    background-color: #0A5A9C;
}

.dxgvFilterBuilderButtonArea_MaterialCompact .dxbButton_MaterialCompact.dxbTSys[id $= 'CANCELBTN'] {
    background-color: #f4f4f4;
    float: left;
    color: #212121;
}

.dxgvFocusedRow_MaterialCompact .dxWeb_edtCheckBoxUnchecked_MaterialCompact {
    background-position: -57px -151px;
}

.dxgvFocusedRow_MaterialCompact .dxWeb_edtCheckBoxChecked_MaterialCompact {
    background-position: -0px -151px;
}

/*User Initials in markdown and titile bar*/
.userInitials {
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #475A65;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 24px;
    font-size: 11px;
    border-radius: 50%;
    cursor: default;
}

.userInfo{
    display:none;
}

.templateGlobalMenu ul li i.displayUserInfo {
    font-size: 10px;
    margin-left: 5px;
}
.jQueryModalPopUpButton{
    text-transform: none !important;
}

.MDMscreenDate {
    color: #666666 !important;
    font-size: 12px !important;
}
.LNPushStatusPending {
    color: #808080
}
.LNPushStatusProcessed {
    color: #52c41a
}
.LNPushStatusFailed {
    color: #f5222d
}
.LNPushStatusPosted {
    color: #ff8c00
}

.st-mapleftpanel.collapsed {
    width: 0px !important;
    padding: 0px !important;
    display: none;
}

#leftMapContent {
    width: auto !important;
    height: calc(100vh-120px) !important;
    overflow: scroll;
}
.dailogue-icons-color {
    color:rgb(66,133,244);
}

.errorMessageContent {
    max-height: 72px;
    overflow-y: auto;
    overflow-x: hidden;
}

.spanTitle {
    text-transform: uppercase;
    align-items: center;
    color: rgb(255, 255, 255);
    border-radius: 50%;
    width:30px;
    height:30px;
    display: inline-flex;
    font-size: 12px;
    padding: 2px;
    vertical-align: middle;
    margin: 0 10px 0 0;
}


.titletextCircle {
    width: max-content;
    font-style: normal;
    margin: 0 auto;
}

#divBlackContent span {
    color: green !important;
}
/*Buttons in Save Currrent Filter Popup*/
.enabledCancelButton {
    background-color: #f4f4f4;
    color: rgb(33,33,33);
    font-size: 14px !important;
    font-weight: 400;
    border-radius: 3px;
    height: 30px;
    box-shadow: none;
    text-transform: capitalize;
    text-rendering: geometricPrecision;
    text-align: center;
    position: relative;
    line-height: 20px;
    min-width: 65px;
    margin: 0 4px 0 4px !important;
    padding: 0 8px;
}

.btn-disabled {
    background-color: rgb(211,211,211);
    border-radius: 3px;
    color: white;
    height: 30px;
    box-shadow: none;
    text-transform: capitalize;
    text-rendering: geometricPrecision;
    text-align: center;
    position: relative;
    line-height: 20px;
    min-width: 65px;
    border: none;
    margin: 0 4px 0 4px !important;
    padding: 0 8px;
    cursor: not-allowed;
    pointer-events: none;
}

.enabledButton {
    background-color: rgb(66, 133, 244);
    border-radius: 3px;
    color: white;
    height: 30px;
    box-shadow: none;
    text-transform: capitalize;
    text-rendering: geometricPrecision;
    text-align: center;
    position: relative;
    line-height: 20px;
    min-width: 65px;
    border: none;
    margin: 0 4px 0 4px !important;
    padding: 0 8px;
}
    .enabledButton.ui-button.ui-corner-all.ui-widget:hover {
        background-color: #0A5A9c;
        color: #fff;
    }

.leftpanedisabled {
    pointer-events: none;
    /* for "disabled" effect */
    opacity: 0.5;
    
}

.errorMessageContent {
    max-height: 72px;
    overflow-y: auto;
    overflow-x: hidden;
}

.errorMessageContent {
    max-height: 72px;
    overflow-y: auto;
    overflow-x: hidden;
}

/*Buttons in Save Currrent Filter Popup*/
.enabledCancelButton {
    background-color: #f4f4f4;
    color: rgb(33,33,33);
    font-size: 14px !important;
    font-weight: 400;
    border-radius: 3px;
    height: 30px;
    box-shadow: none;
    text-transform: capitalize;
    text-rendering: geometricPrecision;
    text-align: center;
    position: relative;
    line-height: 20px;
    min-width: 65px;
    margin: 0 4px 0 4px !important;
    padding: 0 8px;
}

.btn-disabled {
    background-color: rgb(211,211,211);
    border-radius: 3px;
    color: white;
    height: 30px;
    box-shadow: none;
    text-transform: capitalize;
    text-rendering: geometricPrecision;
    text-align: center;
    position: relative;
    line-height: 20px;
    min-width: 65px;
    border: none;
    margin: 0 4px 0 4px !important;
    padding: 0 8px;
    cursor: not-allowed;
    pointer-events: none;
}

.enabledButton {
    background-color: rgb(66, 133, 244);
    border-radius: 3px;
    color: white;
    height: 30px;
    box-shadow: none;
    text-transform: capitalize;
    text-rendering: geometricPrecision;
    text-align: center;
    position: relative;
    line-height: 20px;
    min-width: 65px;
    border: none;
    margin: 0 4px 0 4px !important;
    padding: 0 8px;
}
    .enabledButton.ui-button.ui-corner-all.ui-widget:hover {
        background-color: #0A5A9c;
        color: #fff;
    }


.calculateRow {
    margin:16px auto;
    background-color: #FFE892;
    padding: 4px 16px;
    border-radius: 50px;
    color:#713F12;
    display:flex;
    align-items:center;
}
.calculateDiv{
    width:100%;
    margin:4px;
    padding:0;
    display:flex;
    align-items:center;
}
.calculateLabel{
    display:block;
    padding-right:0px !important;
    margin-bottom:0px;
    padding-bottom:2px;
    font-weight:500;
    font-size:14px;
}

.calculateDivIcon {
    width: 50%;
    margin: 4px;
    padding: 0;
    display: flex;
    align-items: center;
}


.capsuleDiv {
    display: flex;
    padding: 4px 7px 2px 4px;
    align-items: center;
    gap: 16px;
    border-radius: var(--rem, 16px);
    width: 32%;
    height: 30px;
}
.WHARatingTextSpan {
    padding-left:12px;
    font-weight:500;
}
.WHARating_High {
    background:#FECACA;
}

.WHARating_Low {
    background:#CAF8B7;
}

.WHARating_Medium {
    background:#FFE892;
}

.WHARating_Undefined {
    background:#E4E4E7;
}
.capsuleDivInnerGrid {
    display: flex;
    padding: 4px 7px 2px 4px;
    align-items: center;
    gap: 16px;
    border-radius: var(--rem, 16px);
    height: auto;
    width: 100%;
}


/* ==================== Plan2Schedule Notification Badge ==================== */

/* ==========================================
   NAVIGATION BADGE SYSTEM (Generic/Reusable)
   ========================================== */

/* Make menu links positioned for badge placement */
.side-nav-link a {
    position: relative !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
}

/* Universal notification badge dot - works for ANY menu item */
.nav-badge-dot {
    position: absolute !important;
    top: 6px !important;
    left: 33px !important;
    width: 10px !important;
    height: 10px !important;
    background: #E53935 !important;
    border: 2px solid #222 !important;
    border-radius: 50% !important;
    z-index: 99999 !important;
    display: none !important;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7) !important;
    box-sizing: content-box !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

    /* Show badge with animation */
    .nav-badge-dot.show {
        display: block !important;
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    /* Pulse animation for attention */
    .nav-badge-dot.pulse {
        animation: badge-pulse-notification 2s ease-in-out infinite !important;
    }

@keyframes badge-pulse-notification {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(229, 57, 53, 0);
    }
}

/* Hover effect */
.nav-badge-dot:hover {
    background: #C62828 !important;
    transform: scale(1.2) !important;
}

/* Hide badge when dismissed */
.nav-badge-dot.dismissed {
    opacity: 0 !important;
    transform: scale(0) !important;
    pointer-events: none !important;
}


/* Mobile responsive adjustments */
@media only screen and (max-width: 768px) {
    .nav-badge-dot {
        top: 5px !important;
        left: 33px !important;
        width: 8px !important;
        height: 8px !important;
        border-width: 1px !important;
    }
}

/* ==================== End Navigation Badge System ==================== */



/* Costing Timesheet edit form - single column, left-aligned labels */
#vwCostingTimesheetGrid_Costing_WO .dxgvEditFormTable_MaterialCompact {
    width: auto !important;
    margin: 0 auto 0 20px !important;
}

    #vwCostingTimesheetGrid_Costing_WO .dxgvEditFormTable_MaterialCompact .dxflCaptionCell_MaterialCompact {
        padding-right: 12px !important;
        padding-left: 0px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    #vwCostingTimesheetGrid_Costing_WO .dxgvEditFormTable_MaterialCompact .dxflGroupCell_MaterialCompact {
        padding-left: 0px !important;
    }

    /* Force single column layout */
    #vwCostingTimesheetGrid_Costing_WO .dxgvEditFormTable_MaterialCompact > tbody > tr > td.dxgvEditFormCell_MaterialCompact {
        display: block !important;
        width: 100% !important;
    }

#vwCostingTimesheetGrid_Costing_WO .dxgvEditFormTable_MaterialCompact.dx-success-row td {
    background-color: aquamarine !important;
        color: white !important;
        border: none !important;
}

@media screen and (min-width: 1025px) {
    .st-footer {
        height: 40px;
        padding: 3px 20px 0 20px;
        overflow: hidden;
        box-sizing: border-box;
    }

        .st-footer .footer-logo {
            float: left;
            width: 100px;
        }

        .st-footer .st-foot-copyright {
            float: left;
        }

            .st-footer .st-foot-copyright .options {
                margin: 8px 0 0 8px;
                padding: 2px 0 0 0;
                display: inline-block;
                vertical-align: top;
            }

                .st-footer .st-foot-copyright .options li {
                    display: inline-block;
                    vertical-align: top;
                    margin: 0;
                }

                    .st-footer .st-foot-copyright .options li a,
                    .st-footer .st-foot-copyright .options li span {
                        line-height: 20px;
                        white-space: nowrap;
                    }

        .st-footer .st-foot-meta {
            float: right;
            display: block;
            margin: 8px 0 0 0;
            white-space: nowrap;
        }

            .st-footer .st-foot-assembly,
            .st-footer .st-foot-meta .st-foot-ipg {
                display: inline-block;
                vertical-align: top;
                line-height: 20px;
            }

        .st-footer .st-foot-assembly {
            margin-right: 16px;
        }

        .st-footer .st-foot-meta .st-foot-ipg {
            float: none;
            margin: 0;
        }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .st-footer {
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 2px;
        height: auto;
        min-height: 56px;
        padding: 6px 16px calc(6px + env(safe-area-inset-bottom)) 16px;
        box-sizing: border-box;
        align-items: center;
        font-size: 11px;
    }

    .st-footer .footer-logo,
    .st-footer .st-foot-copyright,
    .st-footer .st-foot-meta,
    .st-footer .st-foot-assembly,
    .st-footer .st-foot-ipg {
        float: none;
        margin: 0;
    }

    .st-footer .footer-logo {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 90px;
        align-self: center;
    }

    .st-footer .st-foot-copyright {
        grid-column: 2;
        grid-row: 1 / 3;
        min-width: 0;
    }

    .st-footer .st-foot-copyright .options {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        list-style: none;
    }

    .st-footer .st-foot-copyright .options li {
        margin: 0;
        min-width: 0;
        display: block;
    }

    .st-footer .st-foot-copyright .options li:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        white-space: nowrap;
    }

    .st-footer .st-foot-copyright .options li:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        white-space: nowrap;
    }

    .st-footer .st-foot-copyright .options li:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .st-footer .st-foot-copyright .options li a,
    .st-footer .st-foot-copyright .options li span {
        display: block;
        padding: 0;
        margin: 0;
        line-height: 1.25;
        white-space: normal;
    }

    .st-footer .st-foot-meta {
        grid-column: 3;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
    }

    .st-footer .st-foot-assembly {
        text-align: right;
    }

    .st-footer .st-foot-ipg {
        text-align: right;
        white-space: nowrap;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .st-footer {
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 2px;
        height: auto;
        min-height: 48px;
        padding: 6px 16px calc(6px + env(safe-area-inset-bottom)) 16px;
        overflow: visible;
        box-sizing: border-box;
        align-items: center;
        font-size: 11px;
    }

        .st-footer .footer-logo,
        .st-footer .st-foot-copyright,
        .st-footer .st-foot-meta,
        .st-footer .st-foot-assembly,
        .st-footer .st-foot-ipg {
            float: none;
            margin: 0;
        }

        .st-footer .footer-logo {
            grid-column: 1;
            grid-row: 1 / 3;
            width: 90px;
            align-self: center;
        }

        .st-footer .st-foot-copyright {
            grid-column: 2;
            grid-row: 1 / 3;
            min-width: 0;
        }

            .st-footer .st-foot-copyright .options {
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                gap: 2px 12px;
                align-items: center;
            }

                .st-footer .st-foot-copyright .options li {
                    margin: 0;
                    min-width: 0;
                    display: block;
                }

                    .st-footer .st-foot-copyright .options li a,
                    .st-footer .st-foot-copyright .options li span {
                        display: block;
                        padding: 0;
                        margin: 0;
                        line-height: 1.2;
                        white-space: nowrap;
                    }

                .st-footer .st-foot-copyright .options .updateDate {
                    flex-basis: 100%;
                }

        .st-footer .st-foot-meta {
            grid-column: 3;
            grid-row: 1 / 3;
            display: grid;
            grid-template-rows: auto auto;
            justify-items: end;
            align-content: center;
            row-gap: 2px;
            white-space: nowrap;
        }

        .st-footer .st-foot-assembly {
            grid-row: 1;
            text-align: right;
            line-height: 1.2;
        }

        .st-footer .st-foot-ipg {
            grid-row: 2;
            text-align: right;
            line-height: 1.2;
        }
}