/* Package (pricing) React section
   ------------------------------------------------------------------ */

#package-root .pricing-price-note {
    font-size: 13px;
    opacity: 0.7;
    margin: 0 0 4px;
}

#package-root .pricing-error {
    text-align: center;
    color: #fff;
    background: #37405c;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 24px;
    margin: 0 auto;
    max-width: 520px;
}

/* Loading skeleton
   ------------------------------------------------------------------ */

#package-root .pricing-card.is-loading {
    pointer-events: none;
}

#package-root .skeleton {
    display: block;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.08) 25%,
            rgba(255, 255, 255, 0.18) 37%,
            rgba(255, 255, 255, 0.08) 63%);
    background-size: 400% 100%;
    animation: package-skeleton 1.4s ease infinite;
    border-radius: 6px;
}

#package-root .skeleton-text {
    height: 14px;
    margin: 10px 0;
}

#package-root .skeleton-text.skeleton-sm {
    width: 40%;
    height: 12px;
}

#package-root .skeleton-text.skeleton-lg {
    width: 70%;
    height: 28px;
}

@keyframes package-skeleton {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.tenant-section .step-icon {
    color: #fff;
}