@font-face {
    font-family: "CommateFont";
    src: url('Fonts/Rubik-Regular.ttf');
}

/*@font-face {
    font-family: "CommateFont";
    src: url('Fonts/Rubik-Medium.ttf');
    font-weight: 500;
}*/

* {
    /*font-family: Verdana, Geneva, Tahoma, sans-serif !important;*/
    font-family: CommateFont, Verdana, Tahoma, Arial, Helvetica, sans-serif !important;
}

h1 {
    color: var(--COLOR_TEXT);
    font-weight: 900;
}

/*:root {
    --COLOR_HIGHLIGHT: #3a6dc1;
    --COLOR_PRIMARY: #3a6dc1;
    --COLOR_SECONDARY: #08192b;
    --COLOR_BUTTON: #3a6dc1;
    --COLOR_BUTTON_HOVER: #08192b;
    --COLOR_NAV_TEXT: #a4acb4;
    --COLOR_NAV_BACKGROUND: #08192b;
    --COLOR_NAV_SELECTED: white;
    --COLOR_NAV_SELECTED_TEXT: #08192b;
    --COLOR_NAV_HOVER: white;
    --COLOR_COMPLEMENT: #350069;
    --COLOR_SCROLL_HOVER: #3a6dc1;
    --COLOR_SCROLL_BACKGROUND: #a4acb4;
    --COLOR_LINK_HOVER: #3a6dc1;
    --COLOR_GRID_HEADER: whitesmoke;*/ /*#dedede;*/
/*--COLOR_GRID_PAGER: #3a6dc1;
    --COLOR_MENU_HOVER: #3a6dc1;
    --COLOR_TEXT: #08192b;
    --SIZE_FONT: 10pt;
}*/
.x {
    color: #202b46;
}

:root {
    /*#3a6dc1*/
    --COLOR_HIGHLIGHT: #3e97ff;
    --COLOR_PRIMARY: #3e97ff;
    --COLOR_SECONDARY: #202b46;
    --COLOR_BUTTON: #3e97ff;
    --COLOR_BUTTON_HOVER: #202b46;
    --COLOR_NAV_TEXT: #a4acb4;
    --COLOR_NAV_BACKGROUND: #202b46;
    --COLOR_NAV_SELECTED: white;
    --COLOR_NAV_SELECTED_TEXT: #202b46;
    --COLOR_NAV_HOVER: white;
    --COLOR_COMPLEMENT: #350069;
    --COLOR_SCROLL_HOVER: #3e97ff;
    --COLOR_SCROLL_BACKGROUND: #a4acb4;
    --COLOR_LINK_HOVER: #3e97ff;
    --COLOR_GRID_HEADER: whitesmoke; /*#dedede;*/
    --COLOR_GRID_PAGER: #3e97ff;
    --COLOR_MENU_HOVER: #3e97ff;
    --COLOR_TEXT: #202b46;
    --SIZE_FONT: 10pt;
}


/*Not used anywhere but kept for reference.*/
.cmDashboardColors {
    background-color: #01a362; /*Green*/
    background-color: #ffb026; /*Orange*/
    background-color: #0074ff; /*Blue*/
    background-color: #ed5158; /*bark red*/
    background-color: #39669a; /*Blue Dark*/
    background-color: #6b275a; /*Voilet*/
    background-color: #8bcb30; /*Light Green*/
    background-color: #ba3d5d; /*Light Voilet*/
    background-color: #6457e7; /*Mid Voilet*/
}

/*Popup*/
.dxpcLite_Metropolis .dxpc-mainDiv, .dxpcLite_Metropolis.dxpc-mainDiv, .dxdpLite_Metropolis .dxpc-mainDiv, .dxdpLite_Metropolis.dxpc-mainDiv {
    border: 0px;
    border-radius: 5px;
}

.dxpcLite_Metropolis .dxpc-header, .dxdpLite_Metropolis .dxpc-header {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.dxpcLite_Metropolis .dxpc-footerContent, .dxdpLite_Metropolis .dxpc-footerContent {
    background-color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.dxpcLite_Metropolis .dxpc-footer, .dxdpLite_Metropolis .dxpc-footer {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
/*Popup*/

.dxbButtonSys.dxbTSys {
    padding: 5px;
    border-radius: 5px;
}

.dxgvFooter_Metropolis td.dxgv {
    background: #f7f7f7;
}


.cmLeftNavPanel {
    position: fixed !important;
    background-color: var(--COLOR_NAV_BACKGROUND);
    height: 110%;
    width: 240px;
    top: 0;
    left: 0;
    margin-top: 0;
    overflow-y: hidden;
    z-index: 8;
    transition: margin 0.5s;
}

.cmLogo {
    padding-left: 4px;
    padding-top: 5px;
    height: calc(60px - 5px);
    width: calc(240px - 4px);
    top: 0;
    background-color: var(--COLOR_NAV_BACKGROUND);
    /*  overflow-x: clip;
    overflow-y: clip;*/
    z-index: 8;
    margin-top: 0px;
    transition: margin 0.5s;
}

.cmNav {
    height: 100%;
    background-color: var(--COLOR_NAV_BACKGROUND);
    width: 240px;
    height: 90%;
    overflow-y: hidden;
    z-index: 10;
    transition: margin 0.5s;
    background-image: url(../Images/NavBg.svg);
    background-repeat: no-repeat;
    background-position: right 0px bottom 20px;
}

.cmNav_Original {
    float: left;
    background-color: var(--COLOR_NAV_BACKGROUND);
    /*background-image: radial-gradient( circle 610px at 5.2% 51.6%, rgba(5,8,114,1) 0%, rgba(7,3,53,1) 97.5% );*/
    /*background: rgb(46,60,74);
    background: linear-gradient(14deg, rgba(46,60,74,1) 0%, rgba(38,40,50,1) 100%);*/
    width: 240px;
    margin-top: 60px;
    position: fixed;
    overflow-y: hidden;
    height: 100vh;
    z-index: 10;
    transition: margin 0.5s;
}

.cmNav:hover {
    overflow-y: scroll;
}

.cmHeader {
    margin-top: 0px;
    width: auto;
    padding-left: 0px;
    padding-right: 15px;
    height: 40px;
    display: flex;
    /*background-color: var(--COLOR_NAV_BACKGROUND) !important;*/
    /*background: rgb(32,43,70);
    background: linear-gradient(90deg, rgba(32,43,70,1) 9%, rgba(0,57,113,1) 100%);*/
    /*background: rgb(13,17,29);
    background: linear-gradient(270deg, rgba(13,17,29,1) 0%, rgba(62,56,123,1) 100%);*/
}

.cmSpacer {
    margin-left: 20px;
}

/*Search TextBox width control*/
#Vertical_SHC_Menu_ITCNT1_xaf_a0_Ed {
    width: 250px !important;
}

.cmSearchPanel {
    padding-left: 0px;
    padding-top: 4px;
    width: 100%;
}

    .cmSearchPanel .menuLinks_Metropolis .dxm-item a.dx > span {
        color: dimgray;
        text-decoration: none !important;
    }

    .cmSearchPanel .dxeButtonEdit_Metropolis td.dxic, .dxeButtonEdit_Metropolis[cellspacing="0"] td.dxic {
        padding: 4px;
        /*font-size: 11pt;*/ /*TBC*/
    }

    .cmSearchPanel .dxeButtonEdit_Metropolis .dxeButtonEditButton_Metropolis {
        padding: 4px;
        /*font-size: 11pt;*/ /*TBC*/
        color: white;
        border-radius: 5px;
        background-color: darkorange;
    }

    .cmSearchPanel .dxeButtonEdit_Metropolis .dxeButtonEditButtonHover_Metropolis {
        /*color: var(--COLOR_LINK_HOVER);*/
        color: white;
        background-color: var(--COLOR_PRIMARY);
    }

    .cmSearchPanel .dxeButtonEdit_Metropolis:focus-within {
        /*border-bottom: 4px solid darkorange !important;*/
    }

    .cmSearchPanel .menuLinks_Metropolis .dxm-hovered a.dx > span {
        /*color: var(--COLOR_LINK_HOVER) !important;*/
        color: var(--COLOR_NAV_SELECTED_TEXT) !important;
        text-decoration: underline !important;
    }
/*
#Vertical_SAC_Menu_DXI0_, #Vertical_SAC_Menu_DXI1_ {
    color: black !important;
    background-color: white !important;
    height: 20px;
}
*/


.cSecurityPanel {
    padding-top: 6px;
    float: right;
    /*height: 20px !important;*/
}

    .cSecurityPanel .menuLinks_Metropolis .dxm-item a.dx > span {
        color: black;
        text-decoration: none !important;
    }

    .cSecurityPanel .menuLinks_Metropolis .dxm-hovered a.dx > span {
        /*color: var(--COLOR_LINK_HOVER) !important;*/
        color: var(--COLOR_NAV_BACKGROUND) !important;
        text-decoration: none !important;
    }

.cmBody {
    display: table;
    width: calc(100% - 240px);
    margin-left: 240px;
}

.cmBody_Original {
    display: table;
    width: calc(100% - 240px);
    margin-left: 240px;
    min-width: 750px; /*This will make sure that the security menu doesnt come below the quick create menu when resized*/
}

.cmBody .cmNavNotch {
    position: fixed;
    bottom: 20px;
    background-color: #f29d25;
    width: 20px;
    height: 80px;
    line-height: 80px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transform: scale(-1, 1);
    color: white;
    transition: margin-left 0.5s;
    z-index: 10;
}

    .cmBody .cmNavNotch:hover {
        background-color: #ff9600;
    }

    .cmBody .cmNavNotch .cmNavOpen {
        padding-left: 2px;
        line-height: 80px;
        cursor: pointer;
        transform: scale(-1, 1);
    }

    .cmBody .cmNavNotch .cmNavClose {
        padding-left: 2px;
        line-height: 80px;
        cursor: pointer;
    }

.cmContent {
    min-height: 100vh;
    font-size: var(--SIZE_FONT); /*Newly added 2023-07-14*/
}

.cmFooter {
    margin-top: 3em;
    width: auto;
    font-size: 9pt !important;
    padding: 10px;
    background-color: #f5f5f5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /*color: var(--COLOR_NAV_TEXT);
    background-color: var(--COLOR_NAV_BACKGROUND);
    background-image: url(../Images/FooterBg.svg);
    background-repeat: no-repeat;
    background-position: right 0px bottom 0px;*/
    /*background: rgb(32,43,70);
    background: linear-gradient(90deg, rgba(32,43,70,1) 9%, rgba(0,57,113,1) 100%);*/
}



/*ScrollBar*/
/* width */
::-webkit-scrollbar {
    width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px white;
    border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--COLOR_SCROLL_BACKGROUND);
    border-radius: 10px;
}
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--COLOR_SCROLL_HOVER);
    }

.Spacer {
    height: 30px;
}

/*Wordrap captions*/
.Layout .Caption {
    white-space: inherit;
}

td.Caption {
    font-size: var(--SIZE_FONT); /*TBC*/
}

/*Grid*/
/*Font size for the whole grid*/
.dxgvControl_Metropolis, .dxgvDisabled_Metropolis {
    font-size: var(--SIZE_FONT);
}

/*Grid Column Chooser Style*/
.dxpcLite_Metropolis .dxpc-content {
    border-left: 1px solid #a4acb4;
    border-right: 1px solid #a4acb4;
    border-bottom: 1px solid #a4acb4;
}

/*Grid Column Chooser Style*/
/*
.dxpcLite_Metropolis .dxpc-content, .dxdpLite_Metropolis .dxpc-content {
    border-left: 1px solid var(--COLOR_TEXT);
    border-right: 1px solid var(--COLOR_TEXT);
    border-bottom: 1px solid var(--COLOR_TEXT);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
*/

/*Grid Header*/
.dxgvHeader_Metropolis {
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 6px 5px;
    border: 1px Solid #c0c0c0;
    background-color: var(--COLOR_GRID_HEADER) !important;
    overflow: hidden;
    text-align: left;
    color: var(--COLOR_SECONDARY);
    font-size: 10pt;
    font-weight: 600;
    /*TBC*/ /*font-size: 11pt;*/
}

.dxgvGroupPanel_Metropolis {
    background-color: lightgrey;
}

/*Grid Filter Notch*/
.dxGridView_gvHeaderFilterActive_Metropolis {
    background-image: url('/Images/filteractive.png');
    background-position: 0, 0;
    background-color: transparent;
    /*background-color: var(--COLOR_SECONDARY) !important;*/
    /*border: 1px solid blue !important;
    border-radius: 50%;*/
}

/*Grid filter dropdown footer*/
.dxpc-footerContent {
    background-color: var(--COLOR_NAV_BACKGROUND);
}

/*Grid Pager*/
.dxpLite_Metropolis .dxp-current {
    background-color: var(--COLOR_GRID_PAGER);
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 10px;
}

/*Grid : BatchEdit Save & Cancel Buttons*/
.dxbButton_Metropolis.dxb-outline {
    /*background-color: var(--COLOR_BUTTON);*/
    /*border-color: transparent;*/
    border-color: #393939;
    border-radius: 5px;
    padding: 5px;
}

    .dxbButton_Metropolis.dxb-outline.dxbDisabled_Metropolis {
        border-radius: 5px;
    }

.dxlpLoadingPanel_Metropolis, .dxgvLoadingPanel_Metropolis, .dxlpLoadingPanelWithContent_Metropolis {
    color: white;
    background-color: var(--COLOR_NAV_BACKGROUND);
    /*background-image: url(/Images/LoadingBg.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;*/
    font-weight: normal;
    width: 225px;
    height: 70px;
    border: 0;
    border-radius: 10px !important;
    opacity: 0.7;
    margin-left: 0;
}

    /*LoadingPanel Image*/
    .dxlpLoadingPanel_Metropolis .dxlp-loadingImage,
    .dxgvLoadingPanel_Metropolis .dxlp-loadingImage,
    .dxlpLoadingPanelWithContent_Metropolis .dxlp-loadingImage {
        background-image: url(/Images/loading4.gif);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        height: 32px;
        width: 32px;
        animation: none;
        border: none;
        border-radius: 0;
    }

/*Grid Batch Edit remove the focused black box that comes around the cell in BatchEdit mode*/
.dxgvFocusedCell_Metropolis {
    /*box-shadow: inset 2px 2px var(--COLOR_HIGHLIGHT), inset -2px -2px var(--COLOR_HIGHLIGHT);
    -webkit-box-shadow: inset 2px 2px var(--COLOR_HIGHLIGHT), inset -2px -2px var(--COLOR_HIGHLIGHT);*/

    box-shadow: inset 0px 0px var(--COLOR_HIGHLIGHT), inset 0px 0px var(--COLOR_HIGHLIGHT);
    -webkit-box-shadow: inset 0px 0px var(--COLOR_HIGHLIGHT), inset 0px 0px var(--COLOR_HIGHLIGHT);
}

    /*We have to remove the style of individual editor in case it is shown in Grid BatchEdit mode*/
    .dxgvFocusedCell_Metropolis .dxeTextBox_Metropolis:focus-within, .dxgvFocusedCell_Metropolis .dxeButtonEdit_Metropolis:focus-within, .dxgvFocusedCell_Metropolis .dxeMemoEditArea_Metropolis:focus-within {
        /*border-bottom: 3px solid var(--COLOR_HIGHLIGHT) !important;*/
        border-radius: 0px !important;
        border-top: 0px solid var(--COLOR_HIGHLIGHT) !important;
        border-bottom: 1px solid var(--COLOR_HIGHLIGHT) !important;
        border-right: 0px solid var(--COLOR_HIGHLIGHT) !important;
        border-left: 0px solid var(--COLOR_HIGHLIGHT) !important;
    }

/*This is used to change the color of Disabled Editor Font Color from Grey to Blue*/
.dxeEditArea_Metropolis .dxeDisabled_Metropolis {
    color: #202b46;
}

/*This is used to change the color of Enabled or Disabled Editor Font Color from Grey to Blue*/
input[type="text"].dxeEditArea_Metropolis {
    color: #202b46;
}

/*Editor Rounded*/
.dxeTextBox_Metropolis, .dxeButtonEdit_Metropolis, .dxeMemoEditArea_Metropolis {
    /*background-color: white;*/
    /*border: 1px solid #c0c0c0;
    border-radius: 5px;
    padding: 3px;*/

    border: 0px;
    border-bottom: 1px solid #c0c0c0;
    padding: 3px;
}

    .dxeTextBox_Metropolis:focus-within, .dxeButtonEdit_Metropolis:focus-within, .dxeMemoEditArea_Metropolis:focus-within {
        border-bottom: 3px solid var(--COLOR_HIGHLIGHT) !important;
    }


/*input:focus {
    margin-top: -2px;
    border-bottom: 1px dashed blue !important;    
}*/

.dxeMemo_Metropolis {
    border: 0px;
}

/*Title*/
/*span, label, a, .GroupHeader, .StaticText, .TextCell, .Layout .Caption {
    font-size: 12px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
}*/
label, a, .GroupHeader, .StaticText, .TextCell, .Layout .Caption {
    /*font-size: 12px;*/
}

div.WebEditorCell {
    /*font-size: 12px !important;*/
}



/*menu bar*/
/*.dxmLite_Metropolis .dxm-main {
    background-color: transparent;   
}*/

/*
.EditModeActions {
    margin-right: 10px;
}
*/

/*Main Menu Buttons */
/*All Menu Bars*/
.cmToolbar {
    margin-left: 14px !important;
    margin-right: 14px !important;
}

.dxmLite_Metropolis .dxm-main.dxmtb {
    padding-left: 10px;
    padding-right: 10px;
    border-top-left-radius: 5px; /*2023-09-27*/
    border-top-right-radius: 5px; /*2023-09-27*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*Only the Top Menu Bar - Menu Items*/
.dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-l .dxm-content, .dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-r .dxm-content, .dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-l .dxm-subMenu .dxm-content, .dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-r .dxm-subMenu .dxm-content, .dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-t .dxm-content, .dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-b .dxm-content, .dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-t .dxm-subMenu .dxm-content, .dxmLite_Metropolis .dxm-horizontal.dxmtb .dxm-image-b .dxm-subMenu .dxm-content {
    /*border: 1px solid thin !important;*/
    /*margin-right: 8px;*/
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    /*border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;*/
}

/*Main Menu button style on Hover*/
.dxmLite_Metropolis .dxm-main .dxm-hovered {
    border-radius: 5px;
    background-color: var(--COLOR_NAV_BACKGROUND);
    /*box-shadow: var(--COLOR_HIGHLIGHT) 0 -3px inset;   Menu Bottom Border Highlight*/ 
}

/*Popup title Color*/
.dxpcLite_Metropolis .dxpc-header, .dxdpLite_Metropolis .dxpc-header {
    font-size: 1.2em;
    padding: 7px 2px 7px 12px;
    white-space: nowrap;
    background-color: var(--COLOR_NAV_BACKGROUND);
    color: white;
}

.DialogContent .ContentCell {
    vertical-align: top;
    padding: 10px 10px 10px 10px;
    font-size: var(--SIZE_FONT);
}

/*This is the container for the Popup Buttons*/
.DockBottom {
    border-collapse: separate;
    margin-top: -45px;
    padding-right: 20px;
}

.dxsplPane_Metropolis, .dxsplPaneCollapsed_Metropolis {
    background-color: transparent;
}

/*NavBar style*/
/*NavBar background*/
.dxnbLite_Metropolis {
    background-color: transparent;
    font-size: 10pt;
}

    .dxnbLite_Metropolis a {
        color: var(--COLOR_NAV_TEXT);
        text-decoration: none;
    }

    /*Nav fonts*/
    .dxnbLite_Metropolis .dxnb-item .dxnb-link {
        /*font-size: 11pt !important;*/ /*TBC*/
    }

    /*NavBar style*/
    .dxnbLite_Metropolis .dxnb-header, .dxnbLite_Metropolis .dxnb-headerCollapsed {
        background-color: transparent;
        padding: 10px 10px 8px 6px;
        white-space: nowrap;
        margin-top: 3px;
        margin-bottom: 3px;
        border-top: 1px solid #434d65;
        border-radius: 0px;
        /*color: var(--COLOR_NAV_TEXT);*/
        color: #eeeeee;
        font-size: 10.5pt;
        font-weight: normal;
    }

        .dxnbLite_Metropolis .dxnb-headerCollapsed:hover {
            border-left: 8px solid var(--COLOR_HIGHLIGHT);
            transition: 0.2s;
        }

        .dxnbLite_Metropolis .dxnb-header:active {
            /*border-left: 4px solid red;
            transition: 0.2s;*/
        }


    .dxnbLite_Metropolis .dxnb-content.dxnb-left {
        transition: display 0.2s;
    }

    /*NavBar spacing of Text*/
    .dxnbLite_Metropolis .dxnb-img {
        margin: 0 10px 0 0;
    }

    /*NavBar hide expand arrow*/
    .dxnbLite_Metropolis .dxnb-btn {
        display: none;
    }

    .dxnbLite_Metropolis .dxnb-item {
        transition: padding 0.2s;
        margin-left: 10px;
    }

    /*Nav Item Hover Level 1*/
    .dxnbLite_Metropolis .dxnb-itemHover, .dxnbLite_Metropolis .dxnb-bulletHover {
        transition: padding 0.2s;
        background-color: transparent;
        /*padding: 10px 10px 10px 10px !important;*/
        padding: 0 0 0 10px !important;
        border-bottom: 1px solid var(--COLOR_HIGHLIGHT);
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        color: white !important;
        font-weight: normal;
    }

    /*Nav Item Selected level 1*/
    .dxnbLite_Metropolis .dxnb-itemSelected, .dxnbLite_Metropolis .dxnb-bulletSelected {
        text-align: left;
        background-color: var(--COLOR_NAV_SELECTED);
        color: var(--COLOR_NAV_SELECTED_TEXT) !important;
        border-left: 8px solid var(--COLOR_HIGHLIGHT);
        padding: 10px 10px 10px 10px !important;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        margin-left: 10px;
    }


    /*Nav Menu contents on expanded*/
    .dxnbLite_Metropolis .dxnb-content {
        /*background-color: #28375a;*/
        /*background-color: #343f5a;*/
        /*border-top: 3px solid whitesmoke;    */
        /*border-left: 5px solid var(--COLOR_HIGHLIGHT);
        border-radius: 10px;*/
    }

/*Nav TreeView*/

/*.dxtv-ndTxt {
    color: var(--COLOR_NAV_TEXT);
}*/

/*START - ActivityLog Screen*/
.dxfmControl_Metropolis .dxsplLCC .dxtvControl_Metropolis {
    color: var(--COLOR_TEXT);
}

    .dxfmControl_Metropolis .dxsplLCC .dxtvControl_Metropolis .dxtv-ndHov {
        color: var(--COLOR_TEXT) !important;
    }
/*END - ActivityLog Screen*/


.dxtvControl_Metropolis {
    color: #FFFFFE;
    font-size: 10pt;
}

    .dxtvControl_Metropolis .dxtv-nd {
        transition: padding 0.2s;
    }

    .dxtvControl_Metropolis.TreeViewNavControl a {
        transition: padding 0.2s;
        color: var(--COLOR_NAV_TEXT);
    }

/*This was causing issue in other areas where TreeView contorl (like Criteria Builder, AuditLog, etc...), the fonts were getting White in white background.*/
/*This is specifically used for Criteria Editor*/
.dxpc-content .dxtvControl_Metropolis .dxtv-ndHov {
    color: var(--COLOR_TEXT) !important;
}

/*Nav Item Hover Level 2*/
.dxtvControl_Metropolis .dxtv-ndHov {
    transition: padding 0.2s ease;
    background-color: transparent;
    padding-left: 10px !important;
    /*padding: 10px 10px 10px 10px !important;*/
    border-bottom: 1px solid var(--COLOR_HIGHLIGHT);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: white !important;
    font-weight: normal;
}

/*Nav Item Selected level 2*/
.dxtvControl_Metropolis .dxtv-ndSel {
    background-color: var(--COLOR_NAV_SELECTED);
    color: var(--COLOR_NAV_SELECTED_TEXT) !important;
    padding: 10px 0px 10px 10px !important;
    border-left: 8px solid var(--COLOR_HIGHLIGHT);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    width: 240px;
}

/*.dxnbLite_Metropolis .dxnb-item.dxnb-link, .dxnbLite_Metropolis .dxnb-item .dxnb-link {
    padding: 13px 14px 14px;
    white-space: nowrap;
}*/
/*Save & New menu bar*/
/*
.menuLinks_Metropolis .dxm-item a.dx > span {
    color: white;
    text-decoration: underline !important;
    font-weight: normal;
}
    */
/*
.menuLinks_Metropolis .dxm-hovered a.dx > span {
    color: var(--PRIMARY_COLOR) !important;
    text-decoration: none !important;
    font-weight: normal;
}
*/

.ErrorMessage {
    border: 0px;
    border-radius: 10px;
    font-size: medium;
    background-color: #ff8080;
    line-height: 1.5;
}

    .ErrorMessage .ErrorImage {
        display: none;
        /*content: url('/Images/Icon_Commate.png');
        padding-left: 20px;
        width: 48px !important;
        height: 48px;*/
    }

    .ErrorMessage .ErrorLabel {
        padding-left: 20px;
    }

#Vertical_ErrorInfo_Header td {
    padding-top: 5px !important;
    padding-left: 20px !important;
    width: auto;
}

#Vertical_ErrorInfo_Header {
    padding: 20px 10px 20px 10px;
}
/*The main menu was distoring on resizing the width of the browser, this fixed it.*/
#Vertical_TB_Menu {
    font-size: 11pt; /*TBC*/
    font-weight: 500;
}
/*Page Level */
.ACPanel {
    border-collapse: separate;
    padding: 2px 20px 1px 5px;
    height: 25px;
    background-color: var(--COLOR_SECONDARY);
}

/*Navigation Breadcrum*/
.NavigationHistoryLinks {
    font-size: small;
}

    .NavigationHistoryLinks a {
        color: var(--COLOR_PRIMARY);
    }

        .NavigationHistoryLinks a:current {
            color: var(--COLOR_BUTTON_HOVER);
        }


/*Tabs*/
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-tab {
    background-color: transparent !important; /*We removed the background*/
    /*font-size: 1.1em;*/
}

/*Active Tab*/
.dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-activeTab {
    padding-top: 5px !important;
    vertical-align: middle !important;
    background-color: transparent;
    border-bottom: 6px solid var(--COLOR_PRIMARY) !important;
}

    .dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-activeTab a {
        color: var(--COLOR_TEXT);
        font-weight: bold;
        background-color: transparent !important;
    }

/*Tab border line*/
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-activeTab,
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-tab,
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent,
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-spacer,
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent,
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-sbWrapper,
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-sbIndent,
.dxtcLite_Metropolis.dxtc-top > .dxtc-stripContainer .dxtc-sbSpacer {
    border-bottom: 6px solid #c4c4c4;
}

/*Tab Links*/
.dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-link {
    text-decoration: none;
    white-space: nowrap;
    /*background-color: #e1e1e1;*/
    background-color: transparent;
    border-radius: 5px;
    padding-top: 0px;
    font-size: 1.1em;
}

.dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-tab a {
    padding-top: 5px;
    color: #666666;
    border-radius: 8px;
}

.dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-tabHover a {
    color: black !important;
    font-weight: bold;
}

/*Tabs Padding*/
.LayoutTabbedGroupContainer {
    padding: 0px 5px 5px 5px;
}

/*ALl Lables when shown in ViewMode will have round corners, this
    will be shown only for DocumentNo and Overdues where there is background color.
    */
.Layout .WebEditorCell {
    border-radius: 10px !important;
    padding: 2px 0px 2px 10px;
}
/*Removed the padding from the DetailView*/
.Layout {
    padding-left: 0px;
}
/*Button Edit notches*/
.dxeButtonEditButton_Metropolis {
    padding: 3px 3px 3px 3px;
    border-radius: 3px;
    background-color: transparent;
}

    .dxeButtonEditButton_Metropolis:hover {
        background-color: var(--COLOR_HIGHLIGHT);
    }
/*Popup Save Buttons & StateMachine Buttons*/
/*
.menuButtons_Metropolis .dxm-item {
    background: var(--COLOR_BUTTON) !important;    
    border: solid 0px #fff !important;
    padding: 8px;
    border-radius: 5px;
    font-weight: normal;
    font-size: 12pt;
}

    .menuButtons_Metropolis .dxm-item.dxm-hovered {
        background: var(--COLOR_BUTTON_HOVER) !important;
    }

    .menuButtons_Metropolis .dxm-item a.dx {
        color: #FFFFFF;
    }
    */
/*ALL Buttons General*/
.menuButtons_Metropolis .dxm-item {
    background: var(--COLOR_BUTTON) !important;
    border: solid 0px #fff !important;
    padding: 8px;
    border-radius: 5px;
    font-weight: normal;
    /*font-size: 12pt;*/
    font-size: 1.1em;
}

    .menuButtons_Metropolis .dxm-item.dxm-hovered {
        background: var(--COLOR_BUTTON_HOVER) !important;
    }

    .menuButtons_Metropolis .dxm-item a.dx {
        color: #FFFFFF;
    }

    .menuButtons_Metropolis .dxm-item.cmSave {
        background-color: #1d9114 !important;
    }

        .menuButtons_Metropolis .dxm-item.cmSave:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

    /*We will hide the SaveAndClose Button as it is giving tomany options to the user*/
    .menuButtons_Metropolis .dxm-item.cmSaveAndClose {
        /*display: none;*/
        background-color: #11621a !important;
    }

        .menuButtons_Metropolis .dxm-item.cmSaveAndClose:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

    .menuButtons_Metropolis .dxm-item.cmSaveAndNew {
        background-color: #11621a !important;
    }

        .menuButtons_Metropolis .dxm-item.cmSaveAndNew:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

    .menuButtons_Metropolis .dxm-item.cmOk {
        background-color: #1d9114 !important;
    }

        .menuButtons_Metropolis .dxm-item.cmOk:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

    .menuButtons_Metropolis .dxm-item.cmCancel {
        background-color: #f3a031 !important;
    }

        .menuButtons_Metropolis .dxm-item.cmCancel:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

    .menuButtons_Metropolis .dxm-item.cmClose {
        background-color: var(--COLOR_BUTTON_HOVER) !important;
    }

        .menuButtons_Metropolis .dxm-item.cmClose:hover {
            background-color: black !important;
        }

    .menuButtons_Metropolis .dxm-item.cmRestorePasswordX {
        background-color: #f3a031 !important;
    }

        .menuButtons_Metropolis .dxm-item.cmRestorePasswordX:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

    .menuButtons_Metropolis .dxm-item.cmApprove {
        background-color: #11621a !important;
    }

        .menuButtons_Metropolis .dxm-item.cmApprove:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

    .menuButtons_Metropolis .dxm-item.cmReject {
        background-color: #cc0e14 !important;
    }

        .menuButtons_Metropolis .dxm-item.cmReject:hover {
            background-color: var(--COLOR_BUTTON_HOVER) !important;
        }

/*Remove focus decoration from the popup action buttons, it was showing black border when the button was in focus.*/
/*a:-webkit-any-link:focus-visible {
    outline-offset: 0px;
}
*/
:focus-visible {
    outline: none;
}

/*Toast Message*/
.dx-toast-message {
    font-weight: normal;
}

.dxeCalendarDay_Metropolis.dxeCalendarToday_Metropolis {
    background-color: red;
    color: white;
    border-radius: 5px;
}

/*Grid Filter Hover Style*/
.dxeListBoxItemHover_Metropolis {
    background-color: var(--COLOR_HIGHLIGHT);
    color: #fff;
}
/*Lookup Editor Hover Style*/
.dxgvDataRowHover_Metropolis {
    background-color: var(--COLOR_HIGHLIGHT);
    color: #fff;
}

/*Dashboard*/
.dx-menu .dx-menu-horizontal .dx-menu-item-popout {
    font: 18px/18px DXIcons !important;
}

.dx-checkbox-checked .dx-checkbox-icon {
    font: 16px/1em DXIcons !important;
}

.dx-pivotgrid .dx-pivotgrid-collapsed .dx-expand {
    font: 18px/18px DXIcons !important;
}

.dx-pivotgrid .dx-pivotgrid-expanded .dx-expand {
    font: 18px/18px DXIcons !important;
}

.dx-icon-clear {
    font: 14px/1 DXIcons !important;
}

.dx-icon-close {
    font-family: 'DXIcons' !important;
}

.dx-searchbox .dx-icon-search::before {
    font-family: 'DXIcons' !important;
}

.dx-icon-chevronleft::before {
    font-family: 'DXICONS' !important;
}

.dx-icon-chevronright::before {
    font-family: 'DXICONS' !important;
}
/*Report*/
.dx-designer * {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 9pt !important;
}

.dx-dropdowneditor-icon {
    font: 18px/18px DXIcons !important;
}

.dx-numberbox-spin-up-icon {
    font: 14px/1 DXIcons !important;
}

.dx-numberbox-spin-down-icon {
    font: 14px/1 DXIcons !important;
}

.dx-designer-viewport .dxd-back-primary {
    /*background-color: #333333;*/
}

.dx-designer-viewport .dxd-back-primary2 {
    /*background-color: var(--COLOR_NAV_BACKGROUND);*/
}

.dx-editors .dx-fieldset .dx-field .dx-field-label {
    /*color: white;*/
}

/*Criteria Window text Color*/
.dxtvControl_Metropolis .dxtv-ln {
    color: var(--COLOR_TEXT);
}

/*Terabit - Was causing issue of font color mixing with the background in the NavBar specially in Administration tab.*/
.dxtvControl_Metropolis .dxtv-nd {
    /*color: var(--COLOR_TEXT);*/
}

/*.dxfmControl_Metropolis .dxsplLCC .dxtvControl_Metropolis {
    color: red;
}
    .dxtvControl_Metropolis .dxtv-nd {
*/
/*.dx-scrollview-content {
    background-color: #393939;
}
*/
/*
.dxsplControl_Metropolis {
    font-family: "Segoe UI", Helvetica, "Droid Sans", Tahoma, Geneva, sans-serif !important;
}
*/
/*
.dx-designer-viewport {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif !important;
}
.dx-designer-viewport .dxd-back-primary {
    background-color: #08192b;
}

.dx-designer-viewport .dxd-back-primary2 {
    background-color: #cc0e14;
}*/
/*.dx-dropdowneditor-icon{*/
/*background-color: red;*/
/*background-image: url('/images/filteractive.png');*/
.EditModeActions {
    border-bottom: 0px;
}


/*********************************************/
/*Main Document Save Buttons*/
/*Button-Save*/
/*WORKING*/
/*
#Vertical_EditModeActions2_Menu_DXI0_ {
    background-color: #1d9114 !important;
}

    #Vertical_EditModeActions2_Menu_DXI0_:hover {
        background-color: var(--COLOR_BUTTON_HOVER) !important;
    }
*/
/*Button-SaveAndClose*/
/*WORKING*/
/*#Vertical_EditModeActions2_Menu_DXI1_ {
    background-color: #1d9114 !important;
}

    #Vertical_EditModeActions2_Menu_DXI1_:hover {
        background-color: var(--COLOR_BUTTON_HOVER) !important;
    }
    */
/*Popup Diaglog - Button-Ok*/
/*#Dialog_PAC_Menu_DXI0_ {
    background-color: #1d9114 !important;
}

    #Dialog_PAC_Menu_DXI0_:hover {
        background-color: var(--COLOR_BUTTON_HOVER) !important;
    }
*/
/*#Dialog_PAC_Menu_DXI0_ [title="Ok"] {
    background-color: #1d9114 !important;
}

#Dialog_PAC_Menu_DXI1_ [title="Save And New"] {
    background-color: yellow !important;
}

#Dialog_PAC_Menu_DXI1_ [title="Cancel"] {
    background-color: deeppink !important;
}*/
/*
#Dialog_PAC_Menu_DXI2_:focus-within [title="Cancel"] {
    background-color: red !important;
}*/
/*Button-Save*/
/*WORKING*/
/*#Vertical_EditModeActions2_Menu_DXI0_ {
    background-color: blue ;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}*/
/*Button-SaveAndClose*/
/*WORKING*/
/*#Vertical_EditModeActions2_Menu_DXI1_ {
    background-color: #1d9114 !important;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}*/
/*Button-SaveAndNew*/
/*WORKING*/
/*#Vertical_EditModeActions2_Menu_DXI2_ {
    background-color: #1d9114 !important;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}
*/
/*Button-Cancel*/
/*#Vertical_EditModeActions2_Menu_DXI3_ {
    background-color: #293042 !important;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}
*/
/*.menuButtons_Metropolis .dxm-item.dxm-hovered > [title="Cancel"]  {
    background: var(--COLOR_BUTTON_HOVER) !important;
}*/
/*Button-SaveAndNew*/
/*WORKING*/
/*#Vertical_EditModeActions2_Menu_DXI2_ {
    background-color: #1d9114 !important;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}
*/
/*Button-Cancel*/
/*#Vertical_EditModeActions2_Menu_DXI3_ {
    background-color: #293042 !important;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}
*/