.login-button .loading-icon {
    display: flex;
    height: 32px;
    overflow: hidden;
    position: relative;
    width: 32px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.2s, opacity 0.4s ease 0.2s;
}

.login-button[data-loading="true"] {
    pointer-events: none;
    background-color: #e2eff3;
    color: #4c6a70;
}

.login-button[data-loading="true"] .loading-icon {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.4s ease 0.2s;
}

.login-button[data-loading="false"] .loading-icon {
    display: none;
    opacity: 0;
}

.login-button[data-loading="true"] .icon {
    display: none;
    opacity: 0;
}

@keyframes bounce {
    0%,
    80%,
    100% {
        transform: scale(0.7) translate(0px, 0px);
    }
    40% {
        transform: scale(0.4) translate(-18px, 18px);
    }
}

@keyframes bouncebr {
    0%,
    80%,
    100% {
        transform: scale(0.7) translate(0px, 0px);
    }
    40% {
        transform: scale(0.4) translate(18px, 18px);
    }
}

@keyframes bouncetr {
    0%,
    80%,
    100% {
        transform: scale(0.7) translate(0px, 0px);
    }
    40% {
        transform: scale(0.4) translate(18px, -18px);
    }
}

@keyframes bouncetl {
    0%,
    80%,
    100% {
        transform: scale(0.7) translate(0px, 0px);
    }
    40% {
        transform: scale(0.4) translate(-18px, -18px);
    }
}

.busy-bottomleft {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation: bounce 2.2s infinite ease-in-out both;
}

.busy-bottomright {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation: bouncebr 2.4s infinite ease-in-out both;
}

.busy-topright {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation: bouncetr 2.6s infinite ease-in-out both;
}

.busy-topleft {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    animation: bouncetl 2.8s infinite ease-in-out both;
}