@font-face {
    font-family: "CommateFont";
    src: url('Fonts/Rubik-Regular.ttf');
    /*src: url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all');*/
}

iframe {
    border: 0 none;
}

/*@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;
}

/*This is the Title of the page, default was h1, we made it h2*/
.ViewCaption h2 {
    margin: 0;
}

/*Center using FLEX*/
.divForm {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: auto;
}

.divThankyou {
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: auto;
}

.divCenter {
    text-align: center;
}

.center {
    text-align: center;
    padding: 70px 0;
}

.formLayout {
    max-width: 1300px;
    /*min-width: 800px;*/
    margin: auto;
}

#mypresciption td {
    width: 36px;
    align-content: center;
    text-align: center;
}

#mypresciption:hover {
    border-color: white;
    color: white;
}

/*: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: #1d9114; /*#3e97ff;*/
    --COLOR_PRIMARY: #1d9114; /*#3e97ff;*/
    --COLOR_SECONDARY: #202b46;
    --COLOR_BUTTON: #0076f6; /*#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: #1d9114; /*#3e97ff;*/
    --COLOR_SCROLL_BACKGROUND: #a4acb4;
    --COLOR_LINK_HOVER: #1d9114; /*#3e97ff;*/
    --COLOR_GRID_HEADER: whitesmoke;
    --COLOR_GRID_PAGER: #202b46; /*#3e97ff;*/
    --COLOR_MENU_HOVER: #0076f6; /*#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*/
}

.StandardButton {
    background-color: var(--COLOR_BUTTON);
}

    .StandardButton:hover {
        background-color: var(--COLOR_BUTTON);
        border-color: transparent;
    }

/*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*/

/*Action Button Notch*/
.dxm-hovered .dxWeb_mHorizontalPopOut_Metropolis {
    background-color: var(--COLOR_PRIMARY);
    width: 5px;
    height: 5px;
}

.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 {
    background-color: red;
    z-index: 8;
    transition: margin 0.5s;
    text-align: center;
    background-color: var(--COLOR_NAV_BACKGROUND);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}

    .cmLogo img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }

/*.cmLogo2025 {
    padding-left: 8px;
    padding-top: 10px;
    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: 90%;
    background-color: var(--COLOR_NAV_BACKGROUND);
    width: 240px;
    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:hover {
        overflow-y: scroll;
    }

.cmHeader {
    margin-top: 0px;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    height: 60px;
    /*background-color: var(--COLOR_NAV_BACKGROUND); */ /*2023-09-27*/
    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 {
    /*background-color: #ddf;*/
    /*flex: 0.3;*/
    padding-top: 13px;
    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: var(--COLOR_BUTTON_HOVER);
    }

    .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: none !important;
    }
/*
#Vertical_SAC_Menu_DXI0_, #Vertical_SAC_Menu_DXI1_ {
    color: black !important;
    background-color: white !important;
    height: 20px;
}
*/

.cmStorePanel {
    margin-top: 15px;
    margin-right: 20px;
    flex: auto;
    text-align: right;
    font-size: 1.25em;
    font-weight: bold;
    color: dimgray;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 20px;
    border-right: 1px solid #AECAF0;
    align-content: center;
    height: 20px;
}


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

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

    .cSecurityPanel .menuLinks_Metropolis .dxm-hovered a.dx > span {
        color: var(--COLOR_NAV_SELECTED_TEXT) !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: #1d9114; /*#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;
}

.cmFooter {
    width: auto;
    color: var(--COLOR_NAV_TEXT);
    font-size: 9pt !important;
    padding: 10px;
    /*background-color: var(--COLOR_NAV_BACKGROUND);*/
    background-color: #eeeeee;
    /*background: rgb(32,43,70);
    background: linear-gradient(90deg, rgba(32,43,70,1) 9%, rgba(0,57,113,1) 100%);*/
    background-repeat: no-repeat;
    background-size: contain;
}

/*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 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 Group Row*/
.dxgvGroupRow_Metropolis td.dxgv,
.dxgvFocusedGroupRow_Metropolis td.dxgv,
.dxgvBatchEditChangesPreviewGroupRow_Metropolis td.dxgv {
    background-color: #dfdfdf;
}

/*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 Group Row*/
.dxgvGroupRow_Metropolis td.dxgv, .dxgvFocusedGroupRow_Metropolis td.dxgv, .dxgvBatchEditChangesPreviewGroupRow_Metropolis td.dxgv {
    font-weight: bold;
}

/*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: 0px;
    border-radius: 5px !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/loading.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-top: 0px solid var(--COLOR_HIGHLIGHT) !important;
        border-bottom: 0px solid var(--COLOR_HIGHLIGHT) !important;
        border-right: 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*/
.dxeTextBox_Metropolis, .dxeButtonEdit_Metropolis {
    /*border: 1px solid #c0c0c0;
    border-radius: 5px;
    padding: 3px;*/

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

.dxeMemoEditArea_Metropolis {
    border-radius: 5px !important;
    border: 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;*/
        /*border-top: 1px solid var(--COLOR_HIGHLIGHT) !important;*/
        /*border-right: 5px solid var(--COLOR_HIGHLIGHT) !important;*/

        border-left: 4px solid var(--COLOR_HIGHLIGHT) !important;
        /*border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
*/
        border-radius: 0px;
        /*border-bottom: 2px solid var(--COLOR_HIGHLIGHT) !important;*/
        transition: 0.1s;
    }


/*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*/

/*2023-09-27*/
.cmToolbar {
    margin-left: 17px !important;
    margin-right: 17px !important;
}

/*Main Toolbar*/
.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;
    /*border-bottom: 3px solid #3a6dc1 !important;*/
}

/*Only the Top Menu Bar*/
.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;*/
}

/*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: 10.5pt;
}

    .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;
        border-top: solid 1px;
        border-color: #2b3959;
        /*border-radius: 5px;
        margin-top: 3px;
        margin-bottom: 3px;
        */
        color: #eeeeee;
        font-size: 11pt;
        font-weight: normal;
    }

        .dxnbLite_Metropolis .dxnb-headerCollapsed:hover {
            /*border-left: 8px solid var(--COLOR_HIGHLIGHT);*/
            transition: 0.2s;
            background-color: #0a162e;
        }

    .dxnbLite_Metropolis .dxnb-headerHover {
        background-color: #0a162e;
    }

    .dxnbLite_Metropolis .dxnb-header:active {
    }


    .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: 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 Hover Level 1*/
    .dxnbLite_Metropolis .dxnb-itemHover, .dxnbLite_Metropolis .dxnb-bulletHover {
        transition: padding 0.2s;
        background-color: #0a162e;
        padding: 0 0 0 2px !important;
        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;
        font-weight: bold;
    }


    /*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: 10.5pt;
}

    .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 Hover Level 2*/
.dxtvControl_Metropolis .dxtv-ndHov {
    transition: padding 0.2s ease;
    background-color: #0a162e;
    padding-left: 10px !important;
    padding-right: 20px !important;
    border-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;
}
*/

/*This is to set the width of the error message only in the Logo screen sepecially for the OTP*/
.LogonContentCell .ErrorMessage {
    max-width: 600px;
}


.ErrorMessage {
    border: 0px;
    border-radius: 5px;
    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: 12pt; /*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: #0076f6;
    }

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


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


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

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

    .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: 4px 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;
}

/*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 {
    font-size: var(--SIZE_FONT);
    border-radius: 10px !important;
    padding: 2px 0px 2px 0px;
}
/*Removed the padding from the DetailView*/
.Layout {
    padding-left: 0px;
}

/*Button Edit notches*/
.dxeButtonEditButton_Metropolis {
    /*padding: 1px 2px 1px 2px;*/
    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.cmLogonButton {
        background-color: var(--COLOR_PRIMARY) !important;
    }

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


.menuButtons_Metropolis .cmRestorePasswordButton {
    background-color: transparent !important;
    border: 1px solid #a4acb4 !important;
}

    .menuButtons_Metropolis .cmRestorePasswordButton a.dx {
        color: #4d4d4d;
    }

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

.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;
    }


.dxmLite_Metropolis .dxm-item .cmButtonSpacing {
    padding-left: 10px;
    padding-right: 10px;
}

/*
.menuButtons_Metropolis .dxm-item.cmCopyData a.dx {
    color: black !important;
}

    .menuButtons_Metropolis .dxm-item.cmCopyData a.dx:hover {
        color: white !important;
    }

.menuButtons_Metropolis .dxm-item.cmCopyData {
    background-color: transparent !important;
    border: 1px solid #a4acb4;
}

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

.menuButtons_Metropolis .dxm-item.dxm-hovered {
    color: white !important;
}
*/

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

/*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;
}

.dxeCalendarDay_Metropolis.dxeCalendarToday_Metropolis {
    background-color: var(--COLOR_PRIMARY);
    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);*/
}

/*.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;
}

/*Scheduler Opacity*/
.dxscApt .dxsc-apt-bg {
    opacity: 1;
}

/*Scheduler Selected Item*/
.dxscApt.dxsc-selected .dxsc-apt-content-layer span {
    color: blue;
}


/*Scheduler - Font Color for Days that have appointments */
.dxe-day-has-appointments {
    background: #acf099;
    border-radius: 15px;
}

/*Scheduler Date Header*/
.dxscAlternateTimelineDateHeader_Metropolis, .dxscAlternateDateHeader_Metropolis {
    background: #cfcfcf;
    font-weight: bold;
}

.dxscControl_Metropolis .dxscTodayDateCell_Metropolis, .dxscControl_Metropolis .dxscTodayDateRow_Metropolis {
    background: #ffffff;
}

/*Schedulre Agenda View Font Color for the selected item was white so we force to be black*/
.dxsc-agenda-apt .dxsc-apt-time-cell .dxsc-apt-time-container span {
    color: black !important;
}

/*Schedulre Agenda View AppointmentType vertical bar thickness*/
.dxsc-agenda-apt .dxsc-apt-status-cell {
    width: 10px
}

/*Scheduler Selected Item in Agenda View*/
.dxsc-agenda-apt.dxsc-selected .dxsc-apt-icon-cell, .dxsc-agenda-apt.dxsc-selected .dxsc-apt-main-content-cell, .dxsc-agenda-apt.dxsc-selected .dxsc-apt-resource-cell {
    background-color: #faff9d;
}


/*Group Layout Format*/
.GroupHeader {
    margin: 10px 10px 0px 5px;
    /*border-bottom: 1px solid #a4acb4;*/
    height: 20px;
}

    .GroupHeader:first-child {
        margin: 10px 10px 0px 5px;
        /*border-bottom: 1px solid #1d9114;*/
    }

    .GroupHeader .Label {
        padding-left: 0px;
        font-weight: bold;
        font-size: 10pt;
        color: var(--COLOR_TEXT);
    }

/*Remove the Blue Background from the SearchTextBox in the Popup Window, this Search is shown if a listview is displayed in the popup, for example, WorkOrder->Get Examinations.*/
#Dialog_SAC_Menu.menuButtons_Metropolis .dxm-item.dxm-tmpl {
    background-color: transparent !important;
}

.cmToken {
    background-color: green;
    color: white;
    border-radius: 3px;
    margin-right: 3px;
}

.cmTopButton {
    box-shadow: inset 0 0 0px !important;
    color: red !important;
}

    .cmLogoffButton:hover,
    .cmTopButton:hover {
        background-color: #dcdcdc !important;
        box-shadow: inset 0 0 0px !important;
        font-weight: bold;
    }

    .cmTopButton.dxm-hovered .dxWeb_mHorizontalPopOut_Metropolis {
        background-color: transparent;
        font-weight: bold;
    }


/* Revert CSS style of target element and its children */
.reset-style, .reset-style * {
    all: revert;
}


.chat-row {
    /* align-content: center;
    align-items: center;*/
    /*background-color: #f9fa9a;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 50px !important;*/
}

.chat-message {
    background-color: #d1f7d1; /* Light green */
    border-radius: 0 10px 10px 10px; /* Rounded on 3 sides */
    padding: 10px;
    max-width: 400px;
    position: relative;
    margin-bottom: 20px;
}

    /* Pointed corner on top-left */
    .chat-message::before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #d1f7d1;
    }

    /* Pointed corner on top-right */
    .chat-message::before {
        content: '';
        position: absolute;
        top: 0;
        right: -10px; /* Move to the right side */
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #d1f7d1; /* Arrow points to the left */
    }

    .chat-message .title {
        font-size: 11pt;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .chat-message .message {
        font-size: 10pt;
        margin-bottom: 5px;
    }

    .chat-message .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 8pt;
        color: #555;
    }

        .chat-message .footer .icons {
            display: flex;
            align-items: center;
        }

            .chat-message .footer .icons img {
                width: 12px;
                height: 12px;
                margin-right: 5px;
            }

        .chat-message .footer .timestamp {
            margin-left: auto;
        }

.cmLabel {
    padding: 8px;
    color: black;
    font-weight: normal;
    border-radius: 6px;
    margin-left: -10px;
    min-height: 16px;
}

/*Custom Buttons on DetailView to have different look*/
.menuButtons_Metropolis .cmActionButton {
    background-color: transparent !important;
    border: 1px solid #a4acb4 !important;
}

    .menuButtons_Metropolis .cmActionButton a.dx {
        color: #4d4d4d;
    }

.dxsc-agenda-apt .dxsc-apt-subject-container span {
    font-size: 14px;
    word-wrap: break-word;
    line-height: 20px;
}

/*********************************************/
/*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;
}
*/

/*
.dxm-hovered {
    background-color: red;
}*/

.cmCard {
    background-color: #f5f5f5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dxeBase_Metropolis .dxichTextCellSys {
    text-wrap-mode: nowrap;
}


/* Style for readonly mode */
.readonly-radio-list .dxrb {
    opacity: 0.7;
    cursor: default;
}

.dxeRadioButtonList_Metropolis td.dxe, .dxeCheckBoxList_Metropolis td.dxe {
    padding: 0px;
}

/* Consistent spacing */
.dxrbList_Metropolis {
    margin: 50px 0;
    border: 0px;
}

/* Selected item emphasis */
.dxrbList .dxrbSelected {
    font-weight: bold;
}

.cmTokenMedicine {
    color: black;
    background-color: transparent !important;
    display: block;
    width: 100% !important;
}

    .cmTokenMedicine .cmTokenRemove {
        border-radius: 5px;
        background-color: lightgray;
        float: right;
    }


.dxWeb_edtCheckBoxChecked_Metropolis {
    background-position: 0px 0px;
    background-size: cover;
    width: 16px;
    height: 16px;
    background-image: url(../images/Optopro_Sprite.svg);
}

.dxEditors_edtRadioButtonChecked_Metropolis {
    background-position: -16px, 0px;
    background-size: cover;
    width: 16px;
    height: 16px;
    background-image: url(../images/Optopro_Sprite.svg);
}

.rxcopy-main-panel {
    display: flex;
    justify-content: flex-end;
    gap: 12px; /* Adjust gap between child panels */
    padding: 10px;
    gap: 8px;
}

.rxcopy-child-panel {
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 48px;
}
    .rxcopy-child-panel:hover {
        background: #909090;
        color: white;
    }

.rxcopy-text {
    width: 16px;
    height: 16px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rxcopy-image-arrow {
    margin-left: 2px;
    width: 10px;
    height: 16px;
    background-image: url('../images/Optopro_Sprite.svg');
    background-position: -32px 6px;
    background-size: cover;
    background-repeat: no-repeat;
}
.rxcopy-image-equal {
    margin-left: 2px;
    width: 10px;
    height: 16px;
    background-image: url('../images/Optopro_Sprite.svg');
    background-position: -42px 5px;
    background-size: cover;
    background-repeat: no-repeat;
}

.cmAcutityEditor {   
    display: flex;
    gap: 10px;
    align-items: center; /* Align children to the bottom */
}