html,
body,
.app-root,
.app-preloader-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.app-root-fade {
    opacity: 0 !important;
}
.app-root {
    opacity: 1;
    transition: opacity 750ms;
}

.app-preloader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    background: #d8dce5;
    opacity: 1;
    transition: opacity 750ms;
    z-index: 9000;
}
.app-preloader {
    --loading-icon-size: 20px;
    --loading-gap: 10px;
    --loading-color: #51DA4C;

    position: relative;
    width: max-content;
    height: max-content;
    margin: auto;
}
.app-preloader-hidden {
    width: 0;
    height: 0;
    display: none;
}
.app-preloader-logo {
    margin-bottom: 15px;
}
.app-preloader-animation {
    position: relative;
    width: calc((var(--loading-icon-size) * 3) + (var(--loading-gap) * 2));
    height: var(--loading-icon-size);
    margin: auto;
    overflow: hidden;
}
.app-preloader-icon,
.app-preloader-icon:before,
.app-preloader-icon:after {
    border-radius: 50%;
    width: var(--loading-icon-size);
    height: var(--loading-icon-size);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: ellipsing 1.8s infinite ease-in-out;
    animation: ellipsing 1.8s infinite ease-in-out;
}
.app-preloader-icon {
    position: relative;
    margin-top: calc(-1 * var(--loading-icon-size));
    margin-left: calc((var(--loading-icon-size) + var(--loading-gap)));
    color: var(--loading-color);
    -webkit-animation-delay: -0.15s;
    animation-delay: -0.15s;
}
.app-preloader-icon:before,
.app-preloader-icon:after {
    position: absolute;
    top: 0;
    content: '';
}
.app-preloader-icon:before {
    left: calc(-1 * (var(--loading-icon-size) + var(--loading-gap)));
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.app-preloader-icon:after {
    left: calc(var(--loading-icon-size) + var(--loading-gap));
}

@keyframes ellipsing {
    0%,
    80%,
    100% {
        box-shadow: 0 var(--loading-icon-size) 0 calc(-0.5 * var(--loading-icon-size));
    }
    40% {
        box-shadow: 0 var(--loading-icon-size) 0 0;
    }
}