:root {
    --cropper-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAB3RJTUUH6AkSEAYnLrV/twAAAAlwSFlzAAALEwAACxMBAJqcGAAAAARnQU1BAACxjwv8YQUAAAAdSURBVHjaY7DAAWxxAIZRDTTRgEsCl0GjGmiiAQDOxK+B6/EUPAAAAABJRU5ErkJggg==');

    --typo3-component-active-bg: var(--typo3-state-notice-bg);
    --typo3-state-primary-border-color: light-dark(var(--token-color-neutral-85), var(--token-color-neutral-35));
    --typo3-input-focus-border-color: light-dark(var(--token-color-neutral-85), var(--token-color-neutral-35));
    --typo3-outline-width: .05rem;
}

hr {
    color: light-dark(var(--token-color-neutral-35), var(--token-color-neutral-15));
}

.max-height-50 {
    max-height: 50px !important;
}

.max-height-100 {
    max-height: 100px !important;
}

.max-height-150 {
    max-height: 150px !important;
}

.max-height-200 {
    max-height: 200px !important;
}

.max-height-250 {
    max-height: 250px !important;
}

.max-height-300 {
    max-height: 300px !important;
}

.max-height-350 {
    max-height: 350px !important;
}

.max-height-400 {
    max-height: 400px !important;
}

.max-height-450 {
    max-height: 450px !important;
}

.max-height-500 {
    max-height: 500px !important;
}

.max-height-550 {
    max-height: 550px !important;
}

.max-height-600 {
    max-height: 600px !important;
}

.max-height-650 {
    max-height: 650px !important;
}

.max-height-700 {
    max-height: 700px !important;
}

.max-height-750 {
    max-height: 750px !important;
}

.max-height-800 {
    max-height: 800px !important;
}

.max-height-850 {
    max-height: 850px !important;
}

.max-height-900 {
    max-height: 900px !important;
}

.max-height-950 {
    max-height: 950px !important;
}

.max-height-1000 {
    max-height: 1000px !important;
}

.max-rows-1 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.max-rows-2 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.max-rows-3 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.max-rows-4 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.max-rows-5 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.max-rows-6 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.max-rows-7 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.max-rows-8 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
}

.max-rows-9 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
}

.max-rows-10 {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
}

.badge {
    --typo3-badge-font-size: .75em;
    font-weight: normal;
}

.callout {
    .callout-content {
        .callout-title:empty {
            margin-bottom: 0;
        }
    }
}

.media-gallery__list .media-gallery__item .media-object {
    background-image: var(--cropper-image);
    display: inline-block;
}

.bg-cropper {
    background-image: var(--cropper-image);
}

.ck-inspector-wrapper,
.ck-word-count {
    display: none !important;
}

.card-container {
    .card-body {
        margin: var(--typo3-card-padding);
        padding: 0;
    }

    .card-header {
        .card-subtitle {
            color: inherit;
        }

        &:has(.card-icon) {
            align-items: center;
            display: flex;
        }
    }
}

.styles-color-picker {
    color: transparent;
    cursor: pointer;
    display: inline-block;
    height: 1.75rem;
    margin-right: .5rem;
    width: 1.75rem;
}

[data-color-scheme="light"] {
    .card-container {
        .card-default {
            --typo3-surface-container-default: rgba(255, 255, 255, 0.85);
        }
    }
}