body, html {
    margin: 0;
    min-height: 100%;
    height: 100%;
}

    body .layout-body {
        overflow-x: hidden;
    }

#app-side-nav-outer-toolbar {
    flex-direction: row;
    display: flex; 
    height: 100%;
    width: 100%;
}

.layout-header {
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    z-index: 1501;
    width: 50px;
    background-color: #025064;
}

.toolbar-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.toolbar-container .sidecontent {
    flex-grow: 1;
    height: 100%;
    line-height: 1.5;
    padding: 10px;
}
.dx-scrollable-wrapper .dx-scrollable-container .dx-scrollable-scroll {
    width: 12px;
}
.menu-button > .dx-button .side-button-container {
    width: 40px;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    /*    background-color: #025064;
    color: white;*/
}


.sidebutton.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
    border-radius: 0px;
}

/* .menu-button > .sidebutton.dx-button.dx-icon {
    color: white;
}

    .menu-button > .sidebutton.dx-button .dx-icon:hover {
        color: #025064;   
    }

.menu-button > .sidebutton.dx-button {
    pointer-events: auto;
    background-color: #025064;

}
    */
    .menu-button > .sidebutton.dx-button:hover {
        color: #025064;
        background-color: white;
    }

.menu-button > .sidebutton:hover {
    color: #025064;
    background-color: white;
}


.menu-button > .sidebutton .dx-icon {
    color: white;
    pointer-events: auto;
    justify-content:center;
}

.menu-button > .sidebutton .dx-icon:hover {
    color: #025064;
}

.menu-button > .sidebutton.dx-button {
    pointer-events: none;
}

.menu-button > .sidebutton {
    width: 40px;
    text-align: center;
    vertical-align: middle;
    padding: 0px;
    pointer-events: none;

    background-color: #025064;
}

.menu-button {
    /*  width: 10px;*/
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 10px;
    pointer-events: none;
    /*background-color: #025064;
    border-radius: 0px;
    color: white;*/
}

.menu-button:hover {
    background-color: white;
   
}

    .menu-button::selection {
        background-color: white;
    }

/*.menu-button > .dx-button-has-icon {
        background-color: white;
        color: #025064;
        pointer-events:auto;
        display:inline-block;
    }*/

    .menu-button > .sidebutton .dx-button-has-icon > .dx-icon {
        pointer-events: auto;
        color: #025064;
        background-color: white;
        display: inline-block;
    }


/*.dx-toolbar .dx-toolbar-item.menu-button {
    width: 50px;
    text-align: center;
    padding: 0;
    background-color: #025064;
}*/

/*.dx-toolbar .dx-toolbar-item.menu-tb-flex {
    flex-grow: 1;
    height: 100%;
    width: 50px;
    text-align: center;
    padding: 0;
    background-color: #025064;
}*/

/*.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected.dx-state-focused > .dx-treeview-item.dx-state-hover {*/
/*.dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item.dx-state-hover {
    background-color: #ffffff;
}

.dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {*/
    /*color: #ff5722;*/
    /*color: #ffffff;
}*/

.menu-accountlogout {
    text-align: center;
    padding: 0;
    /*background-color: #025064;*/
   
}

/*.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal {
    width: 15px !important
}*/
.dx-scheduler-timeline-week .dx-scheduler-cell-sizes-horizontal {
    width: 80px !important
}

.dx-scheduler-timeline-month .dx-scheduler-cell-sizes-horizontal {
    width: 80px !important;
}
.dx-scheduler-timeline-day .dx-scheduler-cell-sizes-horizontal {
    width: 15px !important
}
.dx-scheduler-timeline-month .dx-scheduler-appointment-content {
    display:block;
    padding-right: 1px;
    padding-left: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    box-sizing:border-box;
    text-align: center;
}
.dx-scheduler-timeline-week .dx-scheduler-appointment-content {
    display: block;
    padding-right: 1px;
    padding-left: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    box-sizing: border-box;
    text-align: center;
}
.dx-scheduler-agenda .dx-scheduler-appointment-content {
    background-color: cadetblue !important ;
    currentColor: white !important;
}


.dx-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 2px 3px;
}

.dx-card.wide-card {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    border-right: 0;
    border-left: 0;
}


.with-footer > div > div > .dx-scrollable-content {
    height: 100%;
}

.with-footer > div > div > .dx-scrollable-content > .dx-scrollview-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}



.layout-body {
    /*background-color: #f2f2f2;*/
    background-color: #eef2f5;
    flex: 1;
    height: 100%;
    min-height: 0;
}

.layout-body .menu-container {
    height: 100%;
    width: 250px;
}

.layout-body .content {
    flex-grow: 1;
    height: 100%;
    line-height: 1.5;
    padding: 10px;
}

.layout-body .content h2 {
    /*font-size: 30px;*/
    font-size: 34px;
    /*font-weight: 300;*/
    font-weight: 400;
    letter-spacing: -.5px;
}

.layout-body .content-block {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
}

    .layout-body .content-footer {
        display: block;
        color: rgba(0,0,0,.609);
        border-top: 1px solid rgba(0,0,0,.1);
        padding-top: 20px;
        padding-bottom: 24px;
        padding-left: 10px;
    }

.layout-body .responsive-paddings {
    padding: 20px;
}

.layout-body-hidden {
    visibility: hidden;
}

@media screen and (min-width: 600px) {
    .layout-body .content-block {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media screen and (min-width: 1280px) {
    .layout-body .responsive-paddings {
        padding: 40px;
    }
}


.menu-container .dx-treeview {
    /*white-space: nowrap;*/
    /*white-space:normal;*/
    padding: 10px;
}

    .menu-container .dx-treeview .dx-treeview-item {
        gap: 0px !important;
        padding: 6px 10px !important;
        color: #025064;
    }

.menu-container .dx-treeview .dx-treeview-item .dx-icon {
    width: 60px !important;
    margin: 0 !important;
}

/*.menu-container .dx-treeview .dx-treeview-node {
    padding: 0 10px !important;
}*/

    .menu-container .dx-treeview .dx-treeview-toggle-item-visibility {
        /*right: 10px;*/
        /*left: auto;*/
        /*padding-left: 33px;*/
    }

.menu-container .dx-treeview .dx-rtl .dx-treeview-toggle-item-visibility {
    left: 10px;
    right: auto;
}

    .menu-container .dx-treeview .dx-treeview-node[aria-level="1"] {
        /*font-weight: bold;*/
        font-weight: 400;
        /*border-bottom: 1px solid #515159;*/
    }

    .menu-container .dx-treeview .dx-treeview-node[aria-level="2"] .dx-treeview-item-content {
        /*font-weight: normal;*/
        font-weight: 400;
        /*padding: 0 60px;*/
    }

.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
    background: transparent;
}

/*.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected > .dx-treeview-item * {
    color: #025064;
}*/

.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected.dx-state-focused > .dx-treeview-item {
color: #025064;
}

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected.dx-state-focused > .dx-treeview-item.dx-state-hover {
        background-color: #F2F2F2;
        color: #FFFFFF;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
        /*background-color: #3F3F4B;*/
        background-color: #F2F2F2;
    }

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected > .dx-treeview-item.dx-state-hover {
        background-color: #F2F2F2;
        /*color: #025064;*/
    }

#simple-treeview {
    /*display: inline-block;*/
}

.treevw {
    /*display: inline-block;*/
    display:flex;
    flex-direction:column;

    height: 90vh;
}
.treevwmenu {
    overflow-y:auto;
}

.searchplaceholder .dx-placeholder {
    font-size: 14px;
    font-weight: 300;
}

.grid-container {
    display: grid;
    grid: 40px / 300px 700px auto;
    grid-gap: 20px;
    padding: 10px;
    height: 50px;
    background-color: white;
    align-items: baseline;
}

.grid-container > div {
    text-align: left;
    padding: 20px 0;
    font-size: 14px;
}

.grid-container .item2 {
    height: 40px;
}

.resource-edit-image  {
    border-radius: 50%;
    border:1px solid;
}

.buttons {
    display:flex;
    flex-wrap: wrap;
    justify-content: left;
}

.buttons-column > div {
    width:110px;
    height:50px;
    
    text-align:center;
}

.buttons-column-wider > div {
    width: 160px;
    height: 50px;
    text-align: center;
    padding-right: 5px;
}

.buttons-column-widest > div {
    width: 200px;
    height: 50px;
    text-align: center;
    padding-right: 5px;
}

.col2-container {
    display: flex;
    justify-content: left;
    align-items: baseline
}

.col2-container > div {
    padding: 20px;
    
}

.validation-check {
    border-radius: 50%;
    background-color: green;
    color: white;
}

.validation-error {
    border-radius: 50%;
    background-color: red;
    color: white;
}

.text-font-bold {
    font-weight: bold;
}

.dx-layout-manager .dx-field-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

.dx-layout-manager .dx-field-item:not(.dx-last-col) {
    padding-right: 0px;
}


.dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: 14px;
}

.dx-field-item-label-location-top {
    padding: 4px 13px 3px 0px !important;
}

.dx-item .dx-radiobutton {
    margin: 2px 4px 0 0; 
}

.dx-item .dx-radiobutton .dx-radio-value-container {
    padding-right: 8px;
}

.quote-header-container {
    padding: 12px;
}

.service-contract-information-container,
.service-contract-plan-container,
.service-contract-charge-tabpanel,
.service-contract-charge-container,
.service-contract-hours-container {
    padding: 8px;
}


.dx-datagrid .dx-row > td {
    padding: 6px 8px;
}
   
.dx-toast-success {
    background-color: #025064 !important;
}

.cust-nav-item-style .dx-button-has-icon.dx-button-has-text .dx-icon {
    width: 30px;
    height: 30px;
    font-size: 26px;
}

.layout-header .menu-button {
    padding-right: 0px !important;
}

.layout-header .dx-button-has-icon .dx-icon {
    margin-left: 0px !important;
}

.bg-color-white {
    background-color: white;
}

.height-100-p {
    height: 100%;
}

.width-250-px {
    width: 250px;
}

.padding-right-10px{
    padding-right: 10px;
}

.margin-left-18p {
    margin-left: 18%;
}

.margin-left-right-15p {
    margin-left: 15%;
    margin-right: 15%;
}

.center {
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

.title {
    color: white;
    text-align: center;
}

.align-center {
    text-align: center;
}

.login-box {
    padding: 10px;
    border-radius: 10px;
    background-color: white
}

.margin-bottom-5px {
    margin-bottom: 5px
}

.login-grid-container {
    display: grid;
    grid-template-columns: auto 486px auto;
    background: radial-gradient(ellipse at center,#53a2cc 0,#53a2cc00 64%);
    background-color: #025064
}
.break-word {
    overflow-wrap: break-word;
}

.epicor-logo-panel {
    border-bottom: solid;
    border-bottom-width: thin;
    padding: 12px;
}

.menu-user-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.menu-user-profile-account {
    border: 1px solid #ddd;
    width: 30%;
    height: fit-content;
    padding: 5px;
    margin: 10px 0px 10px 10px;
    float: left;
    background-color: #025064;
    flex-grow: 0;
    flex-shrink: 0;
}

.menu-company-user {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menu-time-zone {
    position: static;
    top: 160px;
    padding-left: 10px;
}

.menu-change-password {
    position: static;
    top: 200px;
    padding: 10px;
}

.menu-btn-login {
    position: absolute;
    bottom: 20px;
    padding-left: 20px;
}

.menu-btn-release {
    position: absolute;
    bottom: 80px;
    padding-left: 20px;
}

@media screen and (max-width: 400px) {
    .dx-datagrid-search-panel {
        width: 120px !important;
    }
}

@media (min-width: 401px) and (max-width: 767px) {
    .dx-datagrid-search-panel {
        width: 200px !important;
    }

}

@media (min-width: 768px) {
    .dx-datagrid-search-panel {
        width: 500px !important;
    }
}

.dx-accordion-item-title {
    overflow: hidden;
    color: white !important;
    /*background-color: #025064 !important;*/
    background-color: #025064d1 !important;
}

.dx-accordion-item.dx-state-focused > .dx-accordion-item-title {
    color: white !important;
    /*background-color: #025064 !important;*/
    background-color: #025064d1 !important;
}

.dx-accordion-item-title .dx-accordion-item-title-caption {
    color: white !important;
}

.dx-accordion-item-title::before {
    color: white !important;
}

.dx-accordion-item.dx-state-hover > .dx-accordion-item-title {
    /*background-color: #025064 !important;*/
    background-color: #025064d1 !important;
}

.dx-accordion-item.dx-state-active:not(.dx-accordion-item-opened) .dx-icon,
.dx-accordion-item.dx-state-focused:not(.dx-accordion-item-opened) .dx-icon {
    color: white !important;
}

tr:nth-child(even) {
    background-color: #f2f2f2 !important;
}

.dx-tab.dx-tab-selected,
.dx-tab.dx-tab-selected .dx-icon {
    color: white;
    background-color: #025064 !important;
    /*border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;*/
}

.menutabs .dx-tab.dx-tab-selected, .dx-tab.dx-tab-selected .dx-icon {
    color: #025064 !important;
    background-color: white !important;
}

.dx-tab {
    padding-top: 5px !important;
    padding-bottom: 8px !important;
}

.dx-accordion-wrapper .dx-accordion-item-closed {
    margin-bottom: 3px !important;
}

.dx-accordion {
    margin: 3px 3px 5px 0px !important;
}

.center-form {
    margin: auto;
    width: 50%;
    padding: 20px;
}

.margin-10px {
    margin: 10px 0px;
}

.import-button .dx-button {
    border-radius: 4px;
    background-color: #025064;
    color: #fff;
    width: 200px;
}

.import-button .dx-button :hover {
    background-color: #012e3a;
}

.custom-file-uploader .dx-button {
    background: none;
    border: none;
    width : 200px;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font-weight: normal;
    font-size: inherit;
}

.custom-file-uploader .dx-button :hover {
    background-color: #d3d3d3;
}

.import-buttons-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

    .import-buttons-group .dx-item-content {
        gap: 10px;
    }

    .import-buttons-group .dx-fileuploader-wrapper {
        padding: 0px;
    }

    .flex-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

.flex-column {
    display: flex;
    flex-direction: column;
}

#upload-status-fail {
    color: #f44336;
    padding-left: 10px;
}

#upload-status-success {
    color: #008000;
    padding-left: 10px;
}

#total-count-message {
    padding-left: 10px;
}

#df-import-export-menu .dx-menu-items-container {
    margin-bottom: 8px;
}

#datafabric-progress-grid .dx-datagrid .dx-row > td, .dx-datagrid .dx-row > tr > td {
    height: 50px;
}

#datafabric-progress-grid .complete .dx-progressbar-range {
    background-color: green;
}

.data-fabric-progress .dx-progressbar-container {
    height: 10px !important;
}

.complete .dx-progressbar-range {
    background-color: green;
}

.df-import-container {
    position: relative;
    height: 100%;
}
    .df-import-container .df-uploaded-progress {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

.install-cell .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link, 
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td > div > a:not(.dx-focused):not(.dx-cell-modified):not(.dx-datagrid-invalid) {
    background-color: #357383 !important;
    color: #fff !important;
}

#map-hints {
    color: rgba(0, 0, 0, .6);
}

.color-red {
    color: red;
}

.color-green {
    color: green;
}

#import-export-template {
    margin-top: 23px;
}

.rel-note-head {
    margin-bottom: 20px;
}

.rel-note-detail {
    display: flex;
    margin-bottom: 10px;
}

.rel-note-ref {
    flex: 0.2;
    padding-right: 10px;
}

.rel-note-des {
    flex: 2.8;
}

.grid-text-button-content {
    align-content: center
}

.shift-badge {
    width: 100%;
}

.shift-badge-content {
    padding: 5px;
}

.shift-disabled {
    font-size: large;
    pointer-events: none;
    display: block;
    color: rgb(0, 0, 0, 0.87);
}

.shift-disabled:hover {
    cursor: not-allowed;
}

div#service-contract-container .dx-state-disabled.dx-accordion-item {
    opacity: 0.9 !important;
}

div#service-contract-container .dx-texteditor.dx-editor-outlined.dx-state-disabled .dx-texteditor-input,
div#service-contract-container .dx-texteditor.dx-editor-outlined.dx-state-readonly .dx-texteditor-input {
    color: rgba(0, 0, 0, 0.9);
}    

div#service-contract-container .dx-state-disabled {
    opacity: 0.9 !important;
}

.dx-state-readonly,
.dx-state-readonly * {
    color: rgb(0, 0, 0, 0.70) !important;
}

.dx-state-disabled,
.dx-state-disabled * {
    color: rgb(0, 0, 0, 0.90) !important;
    opacity: 0.98 !important;
}

.rte-option-container {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 6.5px;
    padding-left: 6.5px;
}

.rte-option-dropdown {
    margin-top: 6.5px;
}

    .rte-option-dropdown .rte-option-dropdown-btn .dx-button-normal {
        height: 46px;
    }
.rte-option-button {
    margin-top: 6.5px;
    background-color: transparent;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.42) 0px 0px 0px 1px inset;
    height: 47px;
}

.image-popup-content {
    text-align: center;
}

    .image-popup-content .image-popup-image {
        height: 100%;
        max-width: 100%;
    }