﻿.white-curved-container {
    margin-top: calc(2 * var(--pill-gap));
    background-color: var(--white-bg);
    display: flex;
    flex-direction: column;
    gap: var(--pill-gap);
    padding: calc(2 * var(--pill-gap));
    border-radius: calc(var(--pill-h)/2 + var(--pill-gap));
}

.flex-container {
    margin-top: calc(2 * var(--pill-gap));
    display: flex;
    flex-direction: column;
    gap: var(--pill-gap);
}

.page-header {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:end;
}

.page-header-back {
    margin-bottom: var(--pill-gap);
}

.btns-right {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pill-gap);
    justify-content: end;
}

.btns-left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pill-gap);
    justify-content: start;
}

.mk-hr-divider {
    padding-top: var(--large-gap);
    padding-bottom: var(--large-gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Gaps */
.pill-gap {
    height: var(--pill-gap);
}

.medium-gap {
    height: var(--medium-gap);
}

.large-gap {
    height: var(--large-gap);
}

/* Loader */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--small-gap);
    min-height: calc(4rem + 2 * var(--pill-gap));
    padding: var(--pill-gap);
}

    .loading-container > .bar {
        position: relative;
        height: 0.8rem;
        width: 0.8rem;
        border-radius: 0.4rem;
        background-color: var(--dark-gray-bg);
        overflow: hidden;
        animation: barHeightAnimation 1.5s ease-in-out infinite;
    }

        .loading-container > .bar::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(35deg, var(--primary-color-2) 30%, var(--primary-color-3) 120%);
            opacity: 0;
            animation: barFadeAnimation 1.5s ease-in-out infinite;
            animation-delay: inherit;
        }

.bar:nth-child(1) {
    animation-delay: 0.0s;
}

.bar:nth-child(2) {
    animation-delay: 0.15s;
}

.bar:nth-child(3) {
    animation-delay: 0.3s;
}

.bar:nth-child(4) {
    animation-delay: 0.45s;
}

.bar:nth-child(5) {
    animation-delay: 0.6s;
}

@keyframes barHeightAnimation {
    0%, 60%, 100% { height: 0.8rem; }
    30% { height: 4rem; }
}

@keyframes barFadeAnimation {
    0%, 50%, 100% {  opacity: 0; }
    25% { opacity: 1; }
}

/* Statistics */
.row-statistic-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: stretch;
    gap: var(--pill-gap);
}

.statistic-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--pill-gap);
    background-color: var(--white-bg);
    padding: var(--pill-gap) calc(2*var(--pill-gap));
    border-radius: calc(var(--pill-h)/2);
    flex: 1 0 23%;
    min-width: min(45%, 20rem);
}

.statistic-item > * {
    text-align:center;
}


@media (max-width: 850px) {
    .white-curved-container {
        padding: var(--pill-gap);
    }
}
