.dx-datagrid-cell-updated-animation {
    -webkit-animation: dx-datagrid-highlight-change 2s;
    animation: dx-datagrid-highlight-change 2s;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.dx-treeview-item-with-checkbox .dx-treeview-item {
    padding-left: 38px !important;
}

.dx-toolbar .dx-toolbar-items-container {
    height: 38px !important;
}

.breadcrumb {
    display: block;
}

.breadcrumb-item {
    display:inline-block;
}

.separator {
    display: inline;
}

.login-header  {
    margin-left:40px;
}

.swal2-container {
    z-index: 10000 !important;
}

@-webkit-keyframes dx-datagrid-highlight-change {
    from {
        background-color: #337ab7bf;
    }

    100% {
        background-color: #FFFFFF;
    }
}

@keyframes dx-datagrid-highlight-change {
    from {
        background-color: #337ab7bf;
    }

    100% {
        background-color: #FFFFFF;
    }
}

/*---UI---*/
.layout-body .content-block {
    margin-top: 0px;
}

div[id*="grid"] {
    height: inherit !important;
}

.dx-invalid-message.dx-overlay-wrapper {
    visibility: visible;
}  


/*Light/Day Switch*/

:root {
    /** sunny side **/
    --blue-background: #C2E9F6;
    --blue-border: #72cce3;
    --blue-color: #96dcee;
    --yellow-background: #fffaa8;
    --yellow-border: #f5eb71;
    /** dark side **/
    --indigo-background: #808fc7;
    --indigo-border: #5d6baa;
    --indigo-color: #6b7abb;
    --gray-border: #e8e8ea;
    --gray-dots: #e8e8ea;
    /** general **/
    --white: #fff;
}

.toggle--checkbox {
    display: none;
}

    .toggle--checkbox:checked {
        /** This will all flip from sun to moon **/
        /** Change the label color **/
    }

        .toggle--checkbox:checked ~ .background {
            background: var(--indigo-background);
        }

        .toggle--checkbox:checked + .toggle--label {
            background: var(--indigo-color);
            border-color: var(--indigo-border);
            /** Change the cloud to stars **/
            /** Change the sun into the moon **/
            /** Show the dimples on the moon **/
        }

            .toggle--checkbox:checked + .toggle--label .toggle--label-background {
                left: 60px;
                width: 5px;
            }

                .toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
                    width: 5px;
                    height: 5px;
                    top: -25px;
                }

                .toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
                    width: 5px;
                    height: 5px;
                    left: -30px;
                    top: 20px;
                }

            .toggle--checkbox:checked + .toggle--label:before {
                background: var(--white);
                border-color: var(--gray-border);
                animation-name: switch;
                animation-duration: 350ms;
                animation-fill-mode: forwards;
            }

            .toggle--checkbox:checked + .toggle--label:after {
                transition-delay: 350ms;
                opacity: 1;
            }

.toggle--label {
    /** Placeholder element, starting at blue **/
    width: 200px;
    height: 100px;
    background: var(--blue-color);
    border-radius: 100px;
    border: 5px solid var(--blue-border);
    display: flex;
    position: relative;
    transition: all 350ms ease-in;
    /** The sun cloud and moon stars **/
    /** Sun/Moon element **/
    /** Gray dots on the moon **/
}

.toggle--label-background {
    width: 10px;
    height: 5px;
    border-radius: 5px;
    position: relative;
    background: var(--white);
    left: 135px;
    top: 45px;
    transition: all 150ms ease-in;
}

    .toggle--label-background:before {
        content: "";
        position: absolute;
        top: -5px;
        width: 40px;
        height: 5px;
        border-radius: 5px;
        background: var(--white);
        left: -20px;
        transition: all 150ms ease-in;
    }

    .toggle--label-background:after {
        content: "";
        position: absolute;
        top: 5px;
        width: 40px;
        height: 5px;
        border-radius: 5px;
        background: var(--white);
        left: -10px;
        transition: all 150ms ease-in;
    }

.toggle--label:before {
    animation-name: reverse;
    animation-duration: 350ms;
    animation-fill-mode: forwards;
    transition: all 350ms ease-in;
    content: "";
    width: 82px;
    height: 82px;
    border: 5px solid var(--yellow-border);
    top: 4px;
    left: 4px;
    position: absolute;
    border-radius: 82px;
    background: var(--yellow-background);
}

.toggle--label:after {
    transition-delay: 0ms;
    transition: all 250ms ease-in;
    position: absolute;
    content: "";
    box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
    left: 143px;
    top: 23px;
    width: 10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    opacity: 0;
}

@keyframes switch {
    0% {
        left: 4px;
    }

    60% {
        left: 4px;
        width: 112px;
    }

    100% {
        left: 104px;
        width: 82px;
    }
}

@keyframes reverse {
    0% {
        left: 104px;
        width: 82px;
    }

    60% {
        left: 72px;
        width: 112px;
    }

    100% {
        left: 4px;
    }
}