/* support for (big)   */
    /* ReSharper disable CssBrowserCompatibility */
.dx-bg-checkbox-container {
    height: 30px;
}

.dx-bg-checkbox-lg-container {
    height: 30px;
}

.dx-bg-checkbox {
    width: 30px;
    height: 30px;
    border: 1px solid #d4d8de; /* --dx-50-medium-gray */
    border-radius: 4px;
}

.dx-bg-checkbox-lg {
    width: 30px;
    height: 30px;
}

.dx-bg-checkbox-legend {
    float: left;
    width: 100px;
    height: inherit;
    margin-left: 20px;
    margin-top: 4px;
}

.dx-bg-checkbox-legend-checked {
    animation: dx-bg-check-legend .1s ease-in-out .1s forwards;
}

.dx-bg-checkbox-legend-unchecked {
    animation: uncheck-legend .1s ease-in-out .1s forwards;
}

.dx-bg-checkbox-lg-legend {
    float: left;
    height: inherit;
}

.dx-bg-checkbox-checked {
    animation: dx-bg-check 0.01s ease-in-out .1s forwards, dx-bg-scale .3s ease-in-out .1s both;
}

.dx-bg-checkbox-unchecked {
    animation: uncheck .01s ease-in-out .1s forwards, dx-bg-scale .3s ease-in-out .1s both;
}

.dx-bg-checkmark {
    stroke-width: 3;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
}

.dx-bg-checkmark__check {
    transform-origin: 50% 50%;
    animation: dx-bg-stroke 0 cubic-bezier(0.650, 0.000, 0.450, 1.000) .2s forwards;
}

@keyframes dx-bg-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dx-bg-scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes dx-bg-check {
    100% {
        background-color: #b5dc39; /* --dx-light-green */
    }
}

@keyframes uncheck {
    100% {
        background-color: #d4d8de; /* --dx-50-medium-gray */
    }
}

@keyframes dx-bg-check-legend {
    100% {
        color: #b5dc39; /* --dx-light-green */
    }
}

@keyframes uncheck-legend {
    100% {
        color: black;
    }
}
    /* ReSharper restore CssBrowserCompatibility */