/* Ensure the body and html take full height */
 html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
/* Main container should take the remaining space */
.mainContent {
    flex: 1;
}

/*LOADING SVG*/
.loading-svg {
    width: 100px;
    height: 100px;
    margin: 0 auto
}

.ball {
    fill: #2fc463;
    animation: 1.5s infinite bounce
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-60px)
    }
}

.ball:nth-child(2) {
    animation-delay: .3s
}

.ball:nth-child(3) {
    animation-delay: .6s
}

@keyframes pulse-custom {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

.custom-pulse {
    position: relative;
    animation: 1.5s ease-in-out infinite pulse-custom
}

.pulsing-object::after,
.pulsing-object::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: red;
    opacity: .4;
    border-radius: 50%;
    animation: 1.5s ease-in-out infinite pulse
}

.pulsing-object::before {
    animation-delay: .25s
}

.pulsing-object::after {
    animation-delay: .5s
}