html[data-topbar-color=dark] {
    --ct-topbar-bg: #183963;
    --ct-topbar-item-color: #8391a2;
    --ct-topbar-item-hover-color: #bccee4;
    --ct-topbar-search-bg: #464f5b;
    --ct-topbar-user-bg: #3c4655;
    --ct-topbar-user-border: #414d5d;
}

:root {
    --ct-logo-lg-height: 64px;
    --ct-logo-sm-height: 48px;
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 24,57,99;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-rgb: 24,57,99;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
}


:root, [data-bs-theme=light] {
    --ct-blue: red;
    --ct-indigo: #727cf5;
    --ct-purple: red;
    --ct-pink: #ff679b;
    --ct-red: #ff5b5b;
    --ct-orange: #fd7e14;
    --ct-yellow: #f9c851;
    --ct-green: #10c469;
    --ct-teal: #02a8b5;
    --ct-cyan: #35b8e0;
    --ct-black: #000;
    --ct-white: #fff;
    --ct-gray: #8a969c;
    --ct-gray-dark: #343a40;
    --ct-gray-100: #f6f7fb;
    --ct-gray-200: #EEF2FE;
    --ct-gray-300: #dee2e6;
    --ct-gray-400: #ced4da;
    --ct-gray-500: #a1a9b1;
    --ct-gray-600: #8a969c;
    --ct-gray-700: #6c757d;
    --ct-gray-800: #343a40;
    --ct-gray-900: #313a46;
    --ct-primary: #183963;
    --ct-secondary: #6c757d;
    --ct-success: #10c469;
    --ct-info: #35b8e0;
    --ct-warning: #f9c851;
    --ct-danger: red;
    --ct-light: #eef2f7;
    --ct-dark: #313a46;
    --ct-primary-rgb: 83, 109, 230;
    --ct-secondary-rgb: 108, 117, 125;
    --ct-success-rgb: 16, 196, 105;
    --ct-info-rgb: 53, 184, 224;
    --ct-warning-rgb: 249, 200, 81;
    --ct-danger-rgb: 255, 91, 91;
    --ct-light-rgb: 238, 242, 247;
    --ct-dark-rgb: 49, 58, 70;
    --ct-primary-text-emphasis: #212c5c;
    --ct-secondary-text-emphasis: #8a969c;
    --ct-success-text-emphasis: #064e2a;
    --ct-info-text-emphasis: #154a5a;
    --ct-warning-text-emphasis: #645020;
    --ct-danger-text-emphasis: #662424;
    --ct-light-text-emphasis: #6c757d;
    --ct-dark-text-emphasis: #6c757d;
    --ct-primary-bg-subtle: #eef0fd;
    --ct-secondary-bg-subtle: #f6f7fb;
    --ct-success-bg-subtle: #e7f9f0;
    --ct-info-bg-subtle: #ebf8fc;
    --ct-warning-bg-subtle: #fefaee;
    --ct-danger-bg-subtle: #ffefef;
    --ct-light-bg-subtle: #fbfbfd;
    --ct-dark-bg-subtle: #ced4da;
    --ct-primary-border-subtle: #bac5f5;
    --ct-secondary-border-subtle: #eef2f7;
    --ct-success-border-subtle: #9fe7c3;
    --ct-info-border-subtle: #aee3f3;
    --ct-warning-border-subtle: #fde9b9;
    --ct-danger-border-subtle: #ffbdbd;
    --ct-light-border-subtle: #eef2f7;
    --ct-dark-border-subtle: #a1a9b1;
    --ct-white-rgb: 255, 255, 255;
    --ct-black-rgb: 0, 0, 0;
    --ct-font-sans-serif: "Nunito", sans-serif;
    --ct-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --ct-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --ct-body-font-family: var(--ct-font-sans-serif);
    --ct-body-font-size: 0.9rem;
    --ct-body-font-weight: 400;
    --ct-body-line-height: 1.5;
    --ct-body-color: #6c757d;
    --ct-body-color-rgb: 108, 117, 125;
    --ct-body-bg: #fafbfe;
    --ct-body-bg-rgb: 250, 251, 254;
    --ct-emphasis-color: rgba(108, 117, 125, 0.75);
    --ct-emphasis-color-rgb: 108, 117, 125;
    --ct-secondary-color: #8a969c;
    --ct-secondary-color-rgb: 138, 150, 156;
    --ct-secondary-bg: #fff;
    --ct-secondary-bg-rgb: 255, 255, 255;
    --ct-tertiary-color: #6c757d;
    --ct-tertiary-color-rgb: 108, 117, 125;
    --ct-tertiary-bg: #f6f7fb;
    --ct-tertiary-bg-rgb: 246, 247, 251;
    --ct-heading-color: inherit;
    --ct-link-color: black;
    --ct-link-color-rgb: 0,0,0;
    --ct-link-decoration: none;
    --ct-link-hover-color: #183963;
    --ct-link-hover-color-rgb: 71, 93, 196;
    --ct-code-color: #35b8e0;
    --ct-highlight-color: #6c757d;
    --ct-highlight-bg: #fef4dc;
    --ct-border-width: 1px;
    --ct-border-style: solid;
    --ct-border-color: #dee2e6;
    --ct-border-color-translucent: #dee2e6;
    --ct-border-radius: 0.25rem;
    --ct-border-radius-sm: 0.2rem;
    --ct-border-radius-lg: 0.3rem;
    --ct-border-radius-xl: 1rem;
    --ct-border-radius-xxl: 2rem;
    --ct-border-radius-2xl: var(--ct-border-radius-xxl);
    --ct-border-radius-pill: 50rem;
    --ct-box-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15);
    --ct-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--ct-body-color-rgb), 0.15);
    --ct-box-shadow-lg: 0 0 45px 0 rgba(var(--ct-body-color-rgb), 0.2);
    --ct-box-shadow-inset: inset 0 1px 2px rgba(var(--ct-body-color-rgb), 0.075);
    --ct-focus-ring-width: 0.15rem;
    --ct-focus-ring-opacity: 0.25;
    --ct-focus-ring-color: rgba(83, 109, 230, 0.25);
    --ct-form-valid-color: #10c469;
    --ct-form-valid-border-color: #10c469;
    --ct-form-invalid-color: #ff5b5b;
    --ct-form-invalid-border-color: #ff5b5b;
}

html[data-menu-color=light] {
    --ct-menu-bg: #ffffff;
    --ct-menu-item-color: #6c757d;
    --ct-menu-item-hover-color: #183963;
    --ct-menu-item-active-color: #183963;
    --ct-help-box-bg: #536de6;
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #183963;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 24,57,99;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-rgb: 33, 37, 41;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
}

.card.activity {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color:;
    --bs-card-subtitle-color:;
    --bs-card-border-width: 2px;
    --bs-card-border-color: #183963;
    --bs-card-border-radius: 0;
    --bs-card-box-shadow:;
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color:;
    --bs-card-height:;
    --bs-card-color:;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
}

    .card.activity > .card-header {
        background-color: #183963;
        border-radius: 0;
        color:white;
        padding: 4px;
    }


.btn-outline-primary {
    --ct-btn-color: #183963 !important;
    --ct-btn-border-color: #183963 !important;
    --ct-btn-hover-color: #fff !important;
    --ct-btn-hover-bg: #183963 !important;
    --ct-btn-hover-border-color: #183963 !important;
    --ct-btn-focus-shadow-rgb: 83, 109, 230;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #183963 !important;
    --ct-btn-active-border-color: #183963 !important;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #536de6;
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: #536de6;
    --ct-gradient: none;
}

.btn-outline-primary {
    --bs-btn-color: #183963;
    --bs-btn-border-color: #183963;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #183963;
    --bs-btn-hover-border-color: #183963;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}


.btn-info {
    --ct-btn-color: #fff;
    --ct-btn-bg: #183963;
    --ct-btn-border-color: #183963;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #31aacf;
    --ct-btn-hover-border-color: #31aacf;
    --ct-btn-focus-shadow-rgb: 83, 195, 229;
    --ct-btn-active-color: #fff;
    --ct-btn-active-bg: #31aacf;
    --ct-btn-active-border-color: #31aacf;
    --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --ct-btn-disabled-color: #fff;
    --ct-btn-disabled-bg: #35b8e0;
    --ct-btn-disabled-border-color: #35b8e0;
}

.table-dark {
    --ct-table-color: #fff;
    --ct-table-bg: #183963;
    --ct-table-border-color: #464e59;
    --ct-table-striped-bg: white;
    --ct-table-striped-color: #313a46;
    --ct-table-active-bg: white;
    --ct-table-active-color: #313a46;
    --ct-table-hover-bg: white;
    --ct-table-hover-color: #313a46;
    color: var(--ct-table-color);
    border-color: var(--ct-table-border-color);
}

.pagination {
    --ct-pagination-padding-x: 0.75rem;
    --ct-pagination-padding-y: 0.375rem;
    --ct-pagination-font-size: 0.9rem;
    --ct-pagination-color: var(--ct-tertiary-color);
    --ct-pagination-bg: var(--ct-secondary-bg);
    --ct-pagination-border-width: var(--ct-border-width);
    --ct-pagination-border-color: var(--ct-border-color);
    --ct-pagination-border-radius: var(--ct-border-radius);
    --ct-pagination-hover-color: var(--ct-link-hover-color);
    --ct-pagination-hover-bg: var(--ct-tertiary-bg);
    --ct-pagination-hover-border-color: var(--ct-border-color);
    --ct-pagination-focus-color: var(--ct-link-hover-color);
    --ct-pagination-focus-bg: var(--ct-secondary-bg);
    --ct-pagination-focus-box-shadow: none;
    --ct-pagination-active-color: #fff;
    --ct-pagination-active-bg: #183963;
    --ct-pagination-active-border-color: #536de6;
    --ct-pagination-disabled-color: var(--ct-secondary-color);
    --ct-pagination-disabled-bg: var(--ct-secondary-bg);
    --ct-pagination-disabled-border-color: var(--ct-border-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family:;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1;
}


.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: whitesmoke;
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 0.5rem;
    --bs-accordion-body-padding-y: 0rem;
    --bs-accordion-active-color: white;
    --bs-accordion-active-bg: #8c95ae;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 4px;
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

    .accordion-button:focus {
        z-index: 3;
        outline: 0;
        box-shadow: none !important;
    }

.accordion-body {
    border: 2px solid #8c95ae;
    padding: 4px;
}

.accordion-button:not(.collapsed) {
    color: black;
    background-color: var(--bs-accordion-active-bg);
    box-shadow: none;
}



.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border: none;
}


/*    html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px;
    }

    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }*/
ul.d-flex {
    padding: 0px;
}


.alert {
    margin-bottom: 0px;
}


.fa-users:before {
    content: '\e533';
}

.fa-teams:before {
    content: '\e591';
}

.fa-activities:before {
    content: '\f073';
}

.fa-pin:before {
    content: '\f3c5';
}

.fa-clock:before {
    content: '\f017';
}

.fa-meeting:before {
    content: '\e593';
}

.fa-roles-Player:before {
    content: '\f007';
    color: silver;
}

.fa-roles-Coach:before {
    content: '\f6a4';
    color: darkgoldenrod;
}

.fa-enrollments-Present:before {
    content: '\f00c';
    color: green;
}

.fa-enrollments-NotPresent:before {
    content: '\e59b';
    color: red;
}

.fa-enrollments-Unknown:before {
    content: '\003f';
    color: silver;    
}

.fa-invisible:before {
    content: '\f070';
    color: silver;
}

.fa-link:before {
    content: '\f35d';
    color: silver;
}

.fa-today:before {
    content: '\f784 ';
}


.fa-eventtype-Schwimmen:before {
    content: '\e78b';
}

.fa-eventtype-Laufen:before {
    content: '\f70c';
}

.fa-eventtype-Radfahren:before {
    content: '\f84a';
}


.fa-trainer-warning:before {
    content: '\f321';
}

.fa-trainer-Present:before {
    content: '\f14a';
    color: green;
}

.fa-trainer-NotPresent:before {
    content: '\f2d3';
    color: darkred;
}

.fa-trainer-Holiday:before {
    content: '\f811';
    color: darkred;
}

.fa-trainer-Unknown:before {
    content: '\f2fd';
    color: dimgray;
}

.fa-sync-sportmember:before {
    content: '\f2f1';
    color: #f0731c;
}

.fa-today:before {
    content: '\f783';
}

.fa-calendar:before {
    content: '\f073';
}

.fa-maincoach:before {
    content: '\f521';
}

.fa-holiday:before {
    content: '\f811';
}

.fa-exchange:before {
    content: '\e6b8';
}

.fa-attendance-Present:before {
    content: '\f606';
    color: green;
}

.fa-attendance-NotPresent:before {
    content: '\f60e';
    color: red;
}

.fa-attendance-Unknown:before {
    content: '\f60b';
    color: silver;
}

.card-header {
    border-bottom: none;
}


li.team {
    border-radius: 4px;
    color: black;
    background-color: white;
    padding: 0px 4px;
    font-size: 10px;
}

div.team {
    border-radius: 4px;
    color: white;
    background-color: #183963;
    padding: 0px 4px;
    font-size: 10px;
}


span.activity-type {
    border-radius: 4px;
    color: black;
    background-color: lightgray;
    padding: 0px 4px;
}

.event-type-Schwimmen {
    border-color: dodgerblue !important;
}

.event-type-Schwimmen > .card-header {
    background-color: dodgerblue !important;
    --tk-event-photo: url("../images/eventtypes/schwimmen.jpg");
    --tk-event-tint: rgba(30, 144, 255, 0.62);
}


.event-type-Laufen  {
    border-color:  #146c43 !important;;
}

.event-type-Laufen  > .card-header {
    background-color: #146c43 !important;;
    --tk-event-photo: url("../images/eventtypes/laufen.jpg");
    --tk-event-tint: rgba(20, 108, 67, 0.56);
}

.event-type-Radfahren {
    border-color: dimgray !important;;
}

.event-type-Radfahren  > .card-header {
    background-color: dimgray !important;;
    --tk-event-photo: url("../images/eventtypes/radfahren.jpg");
    --tk-event-tint: rgba(105, 105, 105, 0.56);
}

div.holiday-line {
    text-align: center;
    color: black;
    background-image: linear-gradient(45deg, rgb(221, 133, 9) 0%, rgb(221, 133, 9) 14.286%,rgb(227, 152, 25) 14.286%, rgb(227, 152, 25) 28.572%,rgb(232, 170, 40) 28.572%, rgb(232, 170, 40) 42.858%,rgb(238, 189, 56) 42.858%, rgb(238, 189, 56) 57.144%,rgb(244, 208, 72) 57.144%, rgb(244, 208, 72) 71.43%,rgb(249, 226, 87) 71.43%, rgb(249, 226, 87) 85.716%,rgb(255, 245, 103) 85.716%, rgb(255, 245, 103) 100.002%);
}


.avatar {
    display: block; /* Ensures the image behaves as a block-level element */
    width: 32px; /* Set a fixed width */
    height: 32px; /* Set the same fixed height to create a square canvas */
    border-radius: 50%; /* Makes the square image into a circle */
    object-fit: cover; /* Fills the circle without stretching or distorting the image */
    overflow: hidden; /* Hides any parts of the image that extend beyond the circle */
}

.avatar-sm {
    display: block; /* Ensures the image behaves as a block-level element */
    width: 24px; /* Set a fixed width */
    height: 24px; /* Set the same fixed height to create a square canvas */
    border-radius: 50%; /* Makes the square image into a circle */
    object-fit: cover; /* Fills the circle without stretching or distorting the image */
    overflow: hidden; /* Hides any parts of the image that extend beyond the circle */
}

.avatar-lg {
    display: block; /* Ensures the image behaves as a block-level element */
    width: 128px; /* Set a fixed width */
    height: 128px; /* Set the same fixed height to create a square canvas */
    border-radius: 50%; /* Makes the square image into a circle */
    object-fit: cover; /* Fills the circle without stretching or distorting the image */
    overflow: hidden; /* Hides any parts of the image that extend beyond the circle */
}

/* Placeholder on the person page when SportMember has no profile picture for the athlete */
.avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dee2e6;
    color: #6c757d;
    font-size: 48px;
}

div.day-header {
    background-color: #183963;
    color: white;
    font-weight: bold;
}

    div.day-header.today {
        background-color: gold;
        color: black;
        font-weight: bold;
    }

.bg-linkedprofile {
    background-color: gold;
    color: black !important;
    line-height: 1 !important;
}

.bg-notlinkedprofile {
    margin-left: 0.25em;
}

/* Leiste mit den Personen, die mit dem angemeldeten Konto verknuepft sind */
.linked-profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.25rem 0;
    padding: 0;
    list-style: none;
}

/* Die Karten werden nicht gestaucht, sondern in die naechste Zeile umgebrochen.
   Passt eine Karte allein nicht in die Zeile, bricht stattdessen ihr Inhalt um
   (white-space hebt das nowrap von .badge auf). */
.linked-profile {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
}

    /* Verhindert, dass das Portrait im Flex-Layout schmal gequetscht wird */
    .linked-profile .avatar-sm {
        flex: 0 0 auto;
    }

.linked-profile-name {
    display: block;
    line-height: 1.2;
}

.linked-profile-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 8pt;
    font-weight: normal;
    line-height: 1.2;
}


/* Aktionen auf einer Trainingskarte laufen per fetch (site.js): waehrend der
   Anfrage ist die Karte gesperrt, danach blitzt sie kurz auf. */
.activity.event-busy {
    opacity: 0.5 !important;
    pointer-events: none;
    cursor: progress;
}

.activity.event-updated {
    animation: event-updated-flash 1s ease-out;
}

/* Der Grundschatten wird mitgefuehrt, sonst verliert die Karte ihn waehrend
   der Animation. */
@keyframes event-updated-flash {
    from {
        box-shadow: 0 0 0 3px gold, var(--tk-shadow-sm);
    }

    to {
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0), var(--tk-shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity.event-updated {
        animation: none;
    }
}


h5.timeofday {
    text-align: center;
    background-color: #183963;
    color: white;
    padding: 2px;
}

.badge-lg {
    --bs-badge-padding-x: 0.25em;
    --bs-badge-padding-y: 0.15em;
    --bs-badge-font-size: 1em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    line-height: 1;
    color: var(--bs-badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}

.green {
    background: #66FF99;
}

.grayed-out {
    background-color: silver;
    opacity: .3;
}

.red {
    background: red;
}

.blue {
    background: #3652D9;
}

.rose {
    background: #FF66CC;
}


.circle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #0000001a;
}

.pulse {
    animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}
/* Competency card thumbnails on the person page: small enough to scan a whole sport at a
   glance, click opens the full artwork in a modal. */
.competency-thumb {
    object-fit: contain;
    max-height: 110px;
    cursor: pointer;
    background-color: #f8f9fa;
    transition: transform 0.1s ease-in-out;
}

    .competency-thumb:hover,
    .competency-thumb:focus {
        transform: scale(1.03);
        outline: 2px solid #183963;
    }

/* ==========================================================================
   Etwas modernere Optik: abgerundete Ecken und dezente Schatten. Farbwelt
   (Navy #183963, Gold, Sportart-Farben) und Markup bleiben unveraendert.

   Regeln mit .tk-app greifen nur in den beiden Frontend-Layouts (_Layout,
   _LayoutWide). Der Adminbereich bindet dieselbe site.css ein, benutzt aber
   das Hyper-Theme - der soll hiervon nichts abbekommen.
   ========================================================================== */
:root {
    --tk-radius-sm: 0.375rem;
    --tk-radius: 0.625rem;
    --tk-radius-lg: 0.875rem;
    --tk-radius-pill: 999px;
    --tk-shadow-xs: 0 1px 2px rgba(24, 57, 99, 0.10);
    --tk-shadow-sm: 0 1px 2px rgba(24, 57, 99, 0.06), 0 2px 6px rgba(24, 57, 99, 0.08);
    --tk-shadow: 0 2px 4px rgba(24, 57, 99, 0.06), 0 6px 16px rgba(24, 57, 99, 0.10);
}

/* Leicht getoenter Seitenhintergrund, damit die weissen Karten abheben */
body.tk-app {
    background-color: #eef2f7;
}

.tk-app main h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* --- Navigation ------------------------------------------------------- */
/* Die Trennlinie kommt aus dem scoped CSS des Layouts, daher !important */
.tk-app .navbar {
    border-bottom: 0 !important;
    box-shadow: var(--tk-shadow-sm);
}

    .tk-app .navbar .nav-link {
        border-radius: var(--tk-radius-sm);
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        transition: background-color 0.15s ease;
    }

        .tk-app .navbar .nav-link:hover,
        .tk-app .navbar .nav-link:focus {
            background-color: rgba(255, 255, 255, 0.14);
        }

.tk-app .footer {
    border-top: 0 !important;
}

/* --- Bedienelemente --------------------------------------------------- */
.tk-app .btn {
    border-radius: var(--tk-radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tk-app .btn-group {
    border-radius: var(--tk-radius-sm);
    box-shadow: var(--tk-shadow-xs);
}

.tk-app .dropdown-menu {
    border: 1px solid rgba(24, 57, 99, 0.08);
    border-radius: var(--tk-radius);
    box-shadow: var(--tk-shadow);
    padding: 0.25rem;
}

.tk-app .dropdown-item {
    border-radius: var(--tk-radius-sm);
}

.tk-app .alert {
    border-radius: var(--tk-radius-sm);
}

/* --- Karten ----------------------------------------------------------- */
/* Gilt auch fuer die Karten auf der Personenseite, damit die Seiten
   zusammenpassen. Steht bewusst vor .card.activity, damit die spezielleren
   Regeln der Trainingskarte gewinnen. Die Rahmenfarbe bleibt unangetastet,
   sonst verlieren Trainingskarten ohne Sportart-Farbe ihr Navy. */
.tk-app .card {
    --bs-card-border-radius: var(--tk-radius);
    --bs-card-inner-border-radius: calc(var(--tk-radius) - 1px);
    box-shadow: var(--tk-shadow-sm);
}

/* --- Trainingskarten -------------------------------------------------- */
/* Kein overflow: hidden - das wuerde die Dropdowns in der Karte abschneiden,
   die Ecken der Kopfzeile werden deshalb einzeln gerundet. */
.card.activity {
    --bs-card-border-radius: var(--tk-radius);
    --bs-card-border-width: 1px;
    --bs-card-bg: #fff;
    box-shadow: var(--tk-shadow-sm);
    transition: box-shadow 0.15s ease;
}

    .card.activity:hover {
        box-shadow: var(--tk-shadow);
    }

    .card.activity > .card-header {
        border-radius: calc(var(--tk-radius) - 1px) calc(var(--tk-radius) - 1px) 0 0;
        padding: 6px 8px;
    }

        /* Hinter der Sportart-Farbe liegt ein Foto (images/eventtypes). Die Farbe
           selbst liegt als halbtransparente Schicht darueber, damit die Sportart
           auf einen Blick erkennbar bleibt und die weisse Schrift lesbar ist.
           Ohne --tk-event-photo bleibt es bei der reinen Farbflaeche. */
        .card.activity > .card-header {
            background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
                              linear-gradient(var(--tk-event-tint, transparent), var(--tk-event-tint, transparent)),
                              var(--tk-event-photo, none);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

            /* Ueber hellen Stellen des Fotos (Wasser, Himmel) reicht die Farbe
               allein nicht fuer lesbare weisse Schrift. Der Schatten kostet
               weniger Bild als eine staerkere Farbschicht. */
            .card.activity > .card-header {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
            }

                /* Die Team-Chips sind dunkle Schrift auf Weiss */
                .card.activity > .card-header li.team {
                    text-shadow: none;
                }

    .card.activity .badge {
        border-radius: var(--tk-radius-pill);
    }

    /* Der Standard-Alert ist in der schmalen Karte zu wuchtig */
    .card.activity .alert {
        padding: 0.35rem 0.6rem;
    }

.tk-app .card.activity {
    margin-bottom: 0.375rem;
}

/* --- Wiederkehrende Beschriftungen ------------------------------------ */
/* Steht als eigene Leiste ueber der Spalte, deshalb rundum gerundet */
div.day-header {
    border-radius: var(--tk-radius);
    padding: 6px 4px;
    box-shadow: var(--tk-shadow-xs);
    letter-spacing: 0.02em;
}

h5.timeofday {
    border-radius: var(--tk-radius-sm);
    padding: 6px 12px;
    box-shadow: var(--tk-shadow-xs);
    letter-spacing: 0.03em;
    font-size: 0.95rem;
}

div.holiday-line {
    border-radius: var(--tk-radius-sm);
    padding: 2px 8px;
    box-shadow: var(--tk-shadow-xs);
}

/* --- Chips ------------------------------------------------------------ */
li.team,
div.team,
span.activity-type {
    border-radius: var(--tk-radius-pill);
    padding: 1px 8px;
}

.badge-lg {
    --bs-badge-border-radius: var(--tk-radius-pill);
    border-radius: var(--tk-radius-pill);
    box-shadow: var(--tk-shadow-xs);
}

/* Die Personen-Chips koennen mehrzeilig werden, deshalb keine volle Pille */
.linked-profile {
    border-radius: var(--tk-radius-lg);
    box-shadow: var(--tk-shadow-xs);
    transition: box-shadow 0.15s ease;
}

    .linked-profile:hover {
        box-shadow: var(--tk-shadow-sm);
    }