:root {
    --td-font-size-link-small: 14px !important;
    --td-font-size-link-medium: 16px !important;
    --td-font-size-link-large: 18px !important;
    --td-font-size-mark-small: 14px !important;
    --td-font-size-mark-medium: 16px !important;
    --td-font-size-body-small: 14px !important;
    --td-font-size-body-medium: 16px !important;
    --td-font-size-body-large: 18px !important;
    --td-font-size-title-small: 16px !important;
    --td-font-size-title-medium: 18px !important;
    --td-font-size-title-large: 22px !important;
    --td-font-size-headline-small: 26px !important;
    --td-font-size-headline-medium: 30px !important;
    --td-font-size-headline-large: 38px !important;
    --td-font-size-display-medium: 50px !important;
    --td-font-size-display-large: 66px !important;
    --td-line-height-link-small: 22px !important;
    --td-line-height-link-medium: 24px !important;
    --td-line-height-link-large: 26px !important;
    --td-line-height-mark-small: 22px !important;
    --td-line-height-mark-medium: 24px !important;
    --td-line-height-body-small: 22px !important;
    --td-line-height-body-medium: 24px !important;
    --td-line-height-body-large: 26px !important;
    --td-line-height-title-small: 24px !important;
    --td-line-height-title-medium: 26px !important;
    --td-line-height-title-large: 30px !important;
    --td-line-height-headline-small: 34px !important;
    --td-line-height-headline-medium: 38px !important;
    --td-line-height-headline-large: 46px !important;
    --td-line-height-display-medium: 58px !important;
    --td-line-height-display-large: 74px !important;
    --td-size-1: 6px !important;
    --td-size-2: 8px !important;
    --td-size-3: 10px !important;
    --td-size-4: 12px !important;
    --td-size-5: 16px !important;
    --td-size-6: 20px !important;
    --td-size-7: 24px !important;
    --td-size-8: 28px !important;
    --td-size-9: 32px !important;
    --td-size-10: 36px !important;
    --td-size-11: 40px !important;
    --td-size-12: 44px !important;
    --td-size-13: 52px !important;
    --td-size-14: 60px !important;
    --td-size-15: 68px !important;
    --td-size-16: 76px !important;
}


:root,
:root[theme-mode="light"] {
    --td-brand-color-1: #f2f6fe !important;
    --td-brand-color-2: #dce2fd !important;
    --td-brand-color-3: #c5cffd !important;
    --td-brand-color-4: #adbcfc !important;
    --td-brand-color-5: #92a9fa !important;
    --td-brand-color-6: #7597f9 !important;
    --td-brand-color-7: #4f86f7 !important;
    --td-brand-color-8: #005ec8 !important;
    --td-brand-color-9: #003a9c !important;
    --td-brand-color-10: #001a71 !important;
    --td-brand-color: var(--td-brand-color-7) !important;
    --td-brand-color-hover: var(--td-brand-color-6) !important;
    --td-brand-color-active: var(--td-brand-color-8) !important;
    --td-success-color-1: #ecfae5 !important;
    --td-success-color-2: #dcf6cd !important;
    --td-success-color-3: #ccf2b5 !important;
    --td-success-color-4: #bbee9d !important;
    --td-success-color-5: #a9e985 !important;
    --td-success-color-6: #96e56c !important;
    --td-success-color-7: #81e052 !important;
    --td-success-color-8: #51b223 !important;
    --td-success-color-9: #188700 !important;
    --td-success-color-10: #005d00 !important;
    --td-success-color: var(--td-success-color-7) !important;
    --td-success-color-hover: var(--td-success-color-6) !important;
    --td-success-color-active: var(--td-success-color-8) !important;
    --td-warning-color-1: #fef5e4 !important;
    --td-warning-color-2: #ffebcc !important;
    --td-warning-color-3: #ffe2b3 !important;
    --td-warning-color-4: #ffd99b !important;
    --td-warning-color-5: #ffcf83 !important;
    --td-warning-color-6: #fec66a !important;
    --td-warning-color-7: #fbbd50 !important;
    --td-warning-color-8: #ca9223 !important;
    --td-warning-color-9: #9a6900 !important;
    --td-warning-color-10: #6c4200 !important;
    --td-warning-color: var(--td-warning-color-7) !important;
    --td-warning-color-hover: var(--td-warning-color-6) !important;
    --td-warning-color-active: var(--td-warning-color-8) !important;
    --td-error-color-1: #fef4f4 !important;
    --td-error-color-2: #ffd7d0 !important;
    --td-error-color-3: #ffb9ad !important;
    --td-error-color-4: #ff9b8b !important;
    --td-error-color-5: #fe7c6a !important;
    --td-error-color-6: #f7594a !important;
    --td-error-color-7: #ee2b2b !important;
    --td-error-color-8: #b90006 !important;
    --td-error-color-9: #860000 !important;
    --td-error-color-10: #590000 !important;
    --td-error-color: var(--td-error-color-7) !important;
    --td-error-color-hover: var(--td-error-color-6) !important;
    --td-error-color-active: var(--td-error-color-8) !important;

}

:root[theme-mode="dark"] {
    --td-brand-color-1: #001a71 !important;
    --td-brand-color-2: #003a9c !important;
    --td-brand-color-3: #005ec8 !important;
    --td-brand-color-4: #4f86f7 !important;
    --td-brand-color-5: #7597f9 !important;
    --td-brand-color-6: #92a9fa !important;
    --td-brand-color-7: #adbcfc !important;
    --td-brand-color-8: #c5cffd !important;
    --td-brand-color-9: #dce2fd !important;
    --td-brand-color-10: #f2f6fe !important;
    --td-brand-color: var(--td-brand-color-4) !important;
    --td-brand-color-hover: var(--td-brand-color-3) !important;
    --td-brand-color-active: var(--td-brand-color-5) !important;
    --td-success-color-1: #005d00 !important;
    --td-success-color-2: #188700 !important;
    --td-success-color-3: #51b223 !important;
    --td-success-color-4: #81e052 !important;
    --td-success-color-5: #96e56c !important;
    --td-success-color-6: #a9e985 !important;
    --td-success-color-7: #bbee9d !important;
    --td-success-color-8: #ccf2b5 !important;
    --td-success-color-9: #dcf6cd !important;
    --td-success-color-10: #ecfae5 !important;
    --td-success-color: var(--td-success-color-4) !important;
    --td-success-color-hover: var(--td-success-color-3) !important;
    --td-success-color-active: var(--td-success-color-5) !important;
    --td-warning-color-1: #6c4200 !important;
    --td-warning-color-2: #9a6900 !important;
    --td-warning-color-3: #ca9223 !important;
    --td-warning-color-4: #fbbd50 !important;
    --td-warning-color-5: #fec66a !important;
    --td-warning-color-6: #ffcf83 !important;
    --td-warning-color-7: #ffd99b !important;
    --td-warning-color-8: #ffe2b3 !important;
    --td-warning-color-9: #ffebcc !important;
    --td-warning-color-10: #fef5e4 !important;
    --td-warning-color: var(--td-warning-color-4) !important;
    --td-warning-color-hover: var(--td-warning-color-3) !important;
    --td-warning-color-active: var(--td-warning-color-5) !important;
    --td-error-color-1: #590000 !important;
    --td-error-color-2: #860000 !important;
    --td-error-color-3: #b90006 !important;
    --td-error-color-4: #ee2b2b !important;
    --td-error-color-5: #f7594a !important;
    --td-error-color-6: #fe7c6a !important;
    --td-error-color-7: #ff9b8b !important;
    --td-error-color-8: #ffb9ad !important;
    --td-error-color-9: #ffd7d0 !important;
    --td-error-color-10: #fef4f4 !important;
    --td-error-color: var(--td-error-color-4) !important;
    --td-error-color-hover: var(--td-error-color-3) !important;
    --td-error-color-active: var(--td-error-color-5) !important;
}


.ldesign-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--td-comp-margin-m, 12px);
    z-index: 100;
    transition: 0.3s;
    background: var(--td-bg-color-container, #fff);
}

.ldesign-loading p {
    margin: 6px 0 0 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}

.ldesign-loading__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 64px;
    height: 64px;
}

.ldesign-loading__spinner {
    color: var(--td-brand-color, #0052d9);
    transition: 0.2s;
}

.ldesign-loading.hide {
    opacity: 0;
    z-index: -1;
}

.ldesign-loading__spinner {
    display: inline-block;
    animation: rotate 1.5s linear infinite;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -32px 0 0 -32px;
    width: 64px;
    height: 64px;
    will-change: transform;
}

.ldesign-loading__spinner .path {
    stroke: currentColor;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
    will-change: stroke-dasharray, stroke-dashoffset;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}