.spacer_25 {
    padding: 25px 0 0 0;
}

.bg_l_blue {
    background-color: #dfe9ed;
}

.bg_l_gray {
    background-color: #f2f2f2;
}

.pad_25 {
    padding: 25px;
}

.text_align_center {
    text-align: center;
}

.max_width_400 {
    max-width: 400px;
    margin: 0 auto;
}

.gap_80 {
    height: 80px;
    clear: both;
}

a {
    color: #999;
    text-decoration: underline;
}

a:hover {
    color: #999;
    text-decoration: underline;
}

/* SPA Transitions */
#spa-container {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.spa-loading {
    opacity: 0;
    transform: translateY(10px);
}

.spa-entering {
    animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Micro-animations for cards */
.blue_progress_card,
.progress-card,
.goal_card_container,
.notes-container,
.friend_card_container,
.setup_card_container {
    animation: fadeInUp 0.5s ease-out both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nav Item active animation */
.bottom_nav_active .material-icons {
    animation: bounce 0.4s ease;
}

@keyframes bounce {

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

    50% {
        transform: scale(1.3);
    }
}

/* Progress bar filling animation */
.blue_progress_fill,
.progress-fill {
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}