html {
    font-family: sans-serif;
}

.loading-app-container {
    height: 100%;
    width: 100%;
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    background: #f8f8ff;
}

.ant-result {
    /* padding: 48px 32px; */
}

.ant-result-icon {
    margin-bottom: 24px;
    text-align: center;
}

.ant-result-title {
    color: #000000d9;
    font-size: 20px;
    line-height: 1.8;
    text-align: center;
}

.ant-result-extra {
    margin: 24px 0 0;
    text-align: center;
}


.anticon-spin,.anticon-spin:before {
    animation: loadingCircle 1s linear infinite;
    display: inline-block
}

@keyframes loadingCircle {
    to {
        transform: rotate(1turn)
    }
}

.spinner {
--clr: #611232;
--gap: 6px;
/* gap between each circle */
width: 100px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap);
margin: auto;
}

.spinner span {
width: 20px;
height: 16px;
border-radius: 100%;
background-color: var(--clr);
opacity: 0;
}

.spinner span:nth-child(1) {
animation: fade 2s ease-in-out infinite;
}

.spinner span:nth-child(2) {
animation: fade 2s ease-in-out 0.33s infinite;
}

.spinner span:nth-child(3) {
animation: fade 2s ease-in-out 0.66s infinite;
}

.spinner span:nth-child(4) {
animation: fade 2s ease-in-out 0.99s infinite;
}

.spinner span:nth-child(5) {
animation: fade 2s ease-in-out 1.32s infinite;
}

@keyframes fade {
0%, 100% {
opacity: 1;
}

60% {
opacity: 0;
}
}