:root {
    --blue: #1a73e8;
    --gray: #73818f;
    --bg-sidebar: rgba(236, 236, 236, 0.3);
    --bg-black-opacity: rgba(236, 236, 236, 0.3);
    --bg-hover: rgba(236, 236, 236, 0.2);
    --white: #ffffff;
    --border: #f4f3f3;
    --color-border: rgb(210, 215, 211);
    --color-Pearl-Bush: rgb(237, 231, 225);
    --color-Athens-Gray: rgb(239, 239, 240);
    --color-White-Smoke: rgb(236, 236, 236);
    --color-Lynch: rgb(108, 122, 137);
    --color-Pumice: rgb(210, 215, 211);
    --color-Gallery: rgb(238, 238, 238);
    --color-Silver-Sand: rgb(189, 195, 199);
    --color-Porcelain: rgb(236, 240, 241);
    --color-Cascade: rgb(149, 165, 166);
    --color-Iron: rgb(218, 223, 225);
    --color-Edward: rgb(171, 183, 183);
    --color-Cararra: rgb(242, 241, 239);
    --color-Silver: rgb(191, 191, 191);
    --color-Solitude: rgb(228, 233, 237);
    --color-Pampas: rgb(243, 241, 239);
    --color-Mystic: rgb(232, 236, 241);
    --color-Mercury: rgb(232, 232, 232);
    --bg-hover-radius: max(0px, min(8px, calc((100vw - 4px - 100%)* 9999))) / 8px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.filter-box {
    background-color: var(--bg-black-opacity);
    /*    background: rgb(0 0 0 / 2%) !important;*/
    border: 0px solid #ebebeb;
    /*    border-radius: 5px;*/
    margin-bottom: 5px;
    /*    min-height: 50px;*/
    padding: 5px;
    border-radius: max(0px, min(8px, calc((100vw - 4px - 100%)* 9999))) / 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

    .filter-box div[class^='col-'], .filter-box div[class*=' col-'] {
        padding-left: 5px;
        padding-right: 5px;
    }

    .filter-box .dx-checkbox-container .dx-checkbox-text {
        font-size: 12px;
    }

.content-box {
/*    margin-bottom: 3px;*/
    padding-left: 0px;
    padding-right:0px;
/*    min-height: 50px;*/
}

.label-info {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0.25rem;
    font-size: .875em;
    color: #337ab6
}

/*dash board general 6-12-2021*/ 
.bg-new {
    background: #f7a26a 
}
.bg-processing {
    background: #fed145
}
.bg-approved {
    background: #0494d0
}
.bg-complated {
    background: #78d03c
}
.bg-timeout {
    background: #fe4343
}
.bg-cancelled {
    background: #6d6d6d
}

/*Master data popup 15-12-2021*/
.popup-container {
    width: 100%;
}

.button_nav_record {
    text-align: right;
    padding-right: 0px;
}

/*add white space for toast*/
.dx-toast-message {
    white-space: pre-line;
}

/*add required field after 29-8-2022*/
.required:after {
    content: " (*)";
    color: red;
}

button:focus {
    outline: 0px solid rgb(0 0 0 / 10%);
}

hr {
    border-top: 1px solid rgb(255 255 255 / 10%);
    margin: 0px;
}

#sidebar-wrapper {
    height: 100vh;
    /* Add height */
    overflow-y: auto;
    /* Add overflow-y */
    overflow-x: hidden;
    /* Add overflow-x */
    /* min-height: 100vh; */
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

    #sidebar-wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }

    #sidebar-wrapper .list-group {
        width: 15rem;
    }

#page-content-wrapper {
    min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
}

.dx-button {
    border-radius: 5px !important;
}

.dx-button-mode-contained {
    border-color: #639ee0 !important;
    color: #4b89cf !important;
    margin-left: 5px;
}

    .dx-button-mode-contained .dx-icon {
        color: #4b89cf !important;
    }


/*.dx-datagrid-headers {
    background-color: red !important;
}
*/

.grid-button {
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 5px;
}

.grid-button .dx-button-mode-contained {
    border: 0px !important;
    background-color: transparent;
}

    .grid-button .dx-checkbox-container .dx-checkbox-text {
        font-size: 12px;
    }

/*
.filter-box .dx-button-mode-contained {
    border: 0px !important;
    background-color: transparent;
}
*/

.dx-datagrid .dx-link {
    color: #738191 !important;
}

hr.gradient-line-style {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
    margin: 10px 0px;
}

hr.gradient-style {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
    margin: 10px 0px;
}

hr.dotted-style {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
    margin: 10px 0px;
}

hr.solid {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
    margin: 10px 0px;
}

.photo-cv {
    width: 100%;
    object-fit: contain;
    padding: 5px;
    max-height: 250px;
}