.default-block-card {
    padding: 24px;
    border-radius: var(--shape-xxl);
    background-color: var(--fnd-surface-2);
    display: flex;
    flex-direction: column;
}

.in-modal-card {
    padding: 16px;
    border-radius: var(--shape-l);
    background-color: var(--fnd-background-2);
}

.onboarding-card {
    border-radius: var(--shape-xl);
    background-color: var(--fnd-surface-2);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    box-shadow: var(--fnd-box-shadow);
}

.default-message-with-icon {
    border-radius: var(--shape-xl);
    background-color: var(--fnd-surface-1);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 24px;
    justify-content: start;
    box-shadow: none;
}

@media (max-width: 768px) {
    .default-block-card {
        padding: 24px 20px;
    }

    .default-message-with-icon {
        border-radius: var(--shape-l);
    }

    .onboarding-card {
        flex-direction: column;
        align-items: stretch;
    }

    .onboarding-card p {
        text-align: center;
    }
}

.grid-4-to-2 {
    display: grid;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

.grid-4-to-2-header {
    grid-column-start: 1;
    grid-column-end: 5;
    display: grid;
}

@media (max-width: 768px) {
    .grid-4-to-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4-to-2-header {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

.circle-icon {
    border-radius: 50%;
    width: 32px;
    aspect-ratio: 1;
    align-content: center;
    text-align: center;
    font-size: 1rem !important;
    line-height: 1rem !important;
    color: var(--btn-fg-color) !important;
    background-color: var(--btn-bg-color) !important;
}

.fade-text-single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;

    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

/* region loader */
.loader {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}
.loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid var(--btn-fg-color);
    animation: prixClipFix 2s linear infinite ;
}
@keyframes rotate {
    100%   {transform: rotate(360deg)}
}
@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
/* endregion */