#root-loader {
    position: absolute;
    display: flex;
    justify-content: center;
    cursor: default;
    background-color: white;

    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

#root-loader .wrapper {
    position: fixed;
    padding-top: calc(100vh * 0.217);

    display: flex;
    flex-direction: column;
    align-items: center;
}

#root-loader .init_loader {
    margin-top: 40px;
    max-height: 56px;

    display: inline-block;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    fill: transparent;
}

#root-loader .init_loader-base {
    stroke: #e1e1e1;
    stroke-width: 1

}

#root-loader .init_loader-color {
    stroke: #1386a4;
}

#root-loader .init_loader--spin {
    animation-name: ringSpinner;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#root-loader.root-loader--hide {
    animation-name: logoHide;
    animation-duration: 300ms;
    animation-timing-function: ease;
}

@keyframes ringSpinner {
    from {
        transform: rotate(-90deg);
    }
    to {
        transform: rotate(270deg);
    }
}

@keyframes logoHide {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}