html {
    font-size: 14px;
}

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

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

body {
    overflow: hidden;
}

.is-dark .nk-sidebar-head {
    background-color: #ffffff;
}

.trainerBadgesTopMargin {
    margin-top: -30px !important;
}

@media (max-width: 768px) {
    .trainerBadgesTopMargin {
        margin-top: 5px !important;
    }
}

.topRightMargin {
    margin-top: -40px !important;
}

.spaceBeforeConfirmedTraining {
    margin-top: 10px !important;
}

.spaceBeforePeriodicTraining {
    margin-top: 10px !important;
}

.trainerBadge {
    font-size: 13px !important;
    cursor: pointer;
    opacity: 0.8;
    min-width: 135px;
    max-width: 135px;
}

    .trainerBadge:hover {
        opacity: 1.0;
    }

.targetHours {
    margin-left: auto;
    left: 5px;
}

.targetHoursAbsence {
    border: 3px solid red !important;
    margin-left: auto;
    left: 5px;
}

.trainerFilterActive {
    border: 3px solid red !important;
}

.trainerAllTrainer {
    background-color: black !important;
    color: white !important;
}

#activePlayers > li {
    font-size: 14px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 1px !important;
    padding-top: 3px !important;
}

.iconDelete {
    float: right;
    margin-top: 3px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.inputPlayerAbsentActivePlayers {
    float: right;
    margin-top: 2px;
    margin-right: 5px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.inputPlayerConfirmedActivePlayers {
    float: right;
    margin-top: 2px;
    margin-right: 5px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.inputPlayerPrePaidActivePlayers {
    float: right;
    margin-top: 2px;
    margin-right: 5px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.iconAddAttachmentTraining {
    margin-right: 10px;
    cursor: pointer;
    width: 25px;
    height: 25px;
}

    .iconAddAttachmentTraining:hover {
        transform: scale(1.1);
    }

.iconAttachmentSmall {
    margin-top: -10px;
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: transform 0.2s ease;
    cursor: pointer;
    float: right;
}

    .iconAttachmentSmall:hover {
        transform: scale(1.1);
    }


.iconAddAttachmentActivePlayers {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.iconAddAttachmentTrainingTrainer {
    float: right;
    margin-right: 10px;
    cursor: pointer;
    width: 25px;
    height: 25px;
}

.iconAddAttachmentTupTrainer {
    float: right;
    margin-right: 10px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.iconInfoPlayerAccounted {
    float: right;
    margin-top: 5px;
    cursor: pointer;
}

.labelPlayerConfirmedActivePlayers {
    float: right;
    margin-right: 10px;
    color: red;
}

.labelPlayerPrePaidActivePlayers {
    float: right;
    margin-right: 10px;
}

.labelPlayerAbsentActivePlayers {
    float: right;
    margin-right: 10px;
}

.tam-calendar-day {
    width: 100%;
}

.tam-calendar-week {
    width: 5000px !important;
}

#specificDaysList {
    margin-top: 10px;
}

.fc .fc-event {
    margin: 0px -4px 0px -2px !important;
}

.fc-timegrid-event {
    margin: 0px !important;
}

.fc-event-main {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.crossed {
    background-image: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%), linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%) !important;
}

.eventPlayerSpan {
    line-height: 15px;
    white-space: pre-wrap;
}

.eventFontSizeCalendarViewDay {
    font-size: 10px;
    font-weight: 700;
}

.eventFontSizeCalendarViewWeek {
    font-size: 8.8px;
    font-weight: 700;
}

.eventFontSizeCalendarViewDayImportant {
    font-size: 10px!important;
    font-weight: 700!important;
}

.eventFontSizeCalendarViewWeekImportant {
    font-size: 8.8px!important;
    font-weight: 700!important;
}

.eventNoteFontSizeCalendarDay {
    font-size: 10px;
    font-weight: 400;
}

.eventNoteFontSizeCalendarWeek {
    font-size: 8.8px;
    font-weight: 400;
}

.minLineHeight {
    line-height: 9px !important;
}

.minDurationMaxPlayer {
    line-height: 8px;
    font-size: 8px;
}

.minDurationMaxPlayer strong {
    font-size: 8px;
    font-weight: 600;
}

.eventTimeFontSizeCalendar {
    color: black;
    font-size: 10px;
}

.eventToolTip {
    z-index: 1200;
    max-width: 300px;
    font-size: 0.7rem;
}

.noteToolTip {
    z-index: 1200;
    max-width: 300px;
    font-size: 0.7rem;
}

.commentInNoteToolTip {
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5px;
}

.userInNoteToolTip {
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5px;
}

.playerInEventToolTip {
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5px;
}

.trainerInEventToolTip {
    color: black;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid black;
}

.trainerEventToolTip {
    padding: 5px;
    border-radius: 10px;
    color: black;
}

.fc-prev-button:hover {
    background-color: #1a252f !important;
}

.fc-next-button:hover {
    background-color: #1a252f !important;
}

.editIcon, .copyIcon {
    float: left;
    position: relative;
    opacity: 0.6;
    font-size: 1.2em;
    right: 3px;
    top: 2px;
}

.tBody tr:hover .button {
    color: blue;
    opacity: 1;    
}

.tBody tr:hover .editIcon, .tBody tr:hover .copyIcon {
    color: blue;
    opacity: 1;
    margin-bottom: -5px;
}

.userRowMarginTop {
    margin-top: 10px !important;
}

.priceRowMarginTop {
    margin-top: 20px !important;
}

.productRowMarginTop {
    margin-top: 20px !important;
}

.absentRowMarginTop {
    margin-top: 20px !important;
}

.noteRowMarginTop {
    margin-top: 20px !important;
}

#btnAddUser {
    margin: 0px 0px 20px 20px;
}

.btnFlatRateUser {
    margin-top: 20px;
}

#btnAddProduct {
    margin: 0px 0px 20px 20px;
}

#btnAddLocation {
    margin: 0px 0px 20px 20px;
}

#btnAddSeason {
    margin: 0px 0px 20px 20px;
}

#btnAddCourt {
    margin: 0px 0px 20px 20px;
}

#btnAddPrice {
    margin: 0px 0px 20px 20px;
}

#btnAddEmialTemplate {
    margin: 0px 0px 20px 20px;
}

#btnAddPaymentMethod {
    margin: 0px 0px 20px 20px;
}

.userActivPosition {
    margin-top: 35px;
}

#multiSelectInfo {
    font-size: 0.7em;
    color: gray;
}

.absentDialogOpen {
    cursor: pointer;
    color: blue;
    font-size: 1em;
}

.navigationContainer {
    margin-top: 15px !important;
    margin-bottom: -5px !important;
}

.customNavBar {
    border-radius: 10px !important;
}

.navbarColor {
    background-color: #e3f2fd;
}

.navFilterItem {
    margin-left: 10px;
    margin-right: 10px;
}

.filterOptionsInvoiceArchiveText {
    padding-top: 25px;
    font-size: 1.2em;
}

#calendarDateLabel {
    font-size: 22px;
    font-weight: 900;
    margin-left: 10px;
    width: 240px;
    max-width: 260px;
    min-width: 260px;
    display: flex;
}

#calendarDateEventsForTrainerLabel {
    font-size: 15px;
    font-weight: 700;
    margin-left: 10px;
    display: flex;
}

#buttonExport {
    margin-right: 10px !important;
}

.calendarNavButtons {
    margin-right: 10px;
}

.eventsForUserButtons {
    margin-left: 10px;
}

.calendarContainer {
    margin-top: 10px;
    overflow-x: auto;
}

#eventsForUserContainer {
    margin: auto;
}

.trainingCardPlayerMobileDate {
    padding: 5px!important;
    margin: auto!important;
    width: 90%!important;
    color: white!important;
    border: 1px solid black!important;
    background-color: #028af0!important;
    border-radius: 10px!important;
}

.trainingCardMobile {
    padding: 5px!important;
    margin: auto!important;
    width: 90%!important;
    border: 1px solid black!important;
    background-color: #e3f2fd!important;
    border-radius: 10px!important;
}

.noteCardMobile {
    padding: 5px!important;
    margin: auto!important;
    width: 90%!important;
    border: 1px solid black!important;
    background-color: #e0eeee!important;
    border-radius: 10px!important;
}

    .noteCardMobile > .card-body > ul > li {
        padding: 1px;
    }

.trainingCardMobile > .card-body > ul > li {
    padding: 1px;
}

.card {
    margin-top: 15px !important;
}

.card-title {
    margin-bottom: 5px !important;
}

.trainerInMobileView {
    padding: 5px;
    border-radius: 10px;
}

#goToDateEventsForTrainer {
    width: 80px;
}

.nk-content {
    padding-bottom: 0px !important;
    height: calc(100vh - 70px);
    overflow: auto;
}

.tooltip-info {
    position: absolute;
    top: 0px;
    right: 0px;
}

.fc-timegrid-event-harness:hover .tooltip-info-css {
    display: block;
}

.tooltip-info-css {
    display: none;
    position: absolute;
    height: 18px;
    width: 18px;
    font-size: 12px;
    font-weight: 700;
    background-color: #028af0;
    border-radius: 2px;
    text-align: center;
    top: 0px;
    right: 0px;
    z-index: 10000;
}

.fc-timegrid-event-harness:hover .notification-info-css {
    display: block;
}

.notification-info-css {
    display: none;
    position: absolute;
    height: 18px;
    width: 18px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    background-color: green;
    border-radius: 2px;
    text-align: center;
    top: 0px;
    left: 0px;
    z-index: 10000;
}

.dotted-white-css {
    position: absolute;
    height: 10px;
    width: 10px;
    bottom: 0px;
    right: 0px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid black;
    z-index: 3;
}

.dotted-yellow-css {
    position: absolute;
    height: 10px;
    width: 10px;
    bottom: 0px;
    right: 12px;
    background-color: yellow;
    border-radius: 50%;
    border: 1px solid black;
    z-index: 3;
}

.dotted-red-css {
    position: absolute;
    height: 10px;
    width: 10px;
    bottom: 0px;
    right: 24px;
    background-color: red;
    border-radius: 50%;
    border: 1px solid black;
    z-index: 3;
}

.dotted-green-css {
    position: absolute;
    height: 10px;
    width: 10px;
    bottom: 0px;
    right: 36px;
    background-color: green;
    border-radius: 50%;
    border: 1px solid black;
    z-index: 3;
}

.dotted-blue-css {
    position: absolute;
    height: 10px;
    width: 10px;
    bottom: 0px;
    left: 0px;
    background-color: blue;
    border-radius: 50%;
    border: 1px solid black;
    z-index: 3;
}

.check-hours-fail {
    color: #fff;
    background-color: #9b59b6; /* purple highlight */
    padding: 0 2px;
    border-radius: 3px;
}

#context-menu {
    position: fixed;
    z-index: 10000;
    width: 150px;
    background-color: #6576FF;
    border-radius: 10px;
    transform: scale(0);
    transform-origin: top left;
}

    #context-menu.visible {
        transform: scale(1);
        transition: transform 200ms ease-in-out;
    }

    #context-menu .item {
        padding: 8px 10px;
        font-size: 15px;
        color: #fff;
        cursor: pointer;
        border-radius: inherit;
    }

        #context-menu .item:hover {
            background: #5664D9;
        }

.backToAdminButton {
    position: absolute;
    right: 20px;
    top: 20px;
}

.fullcalendar {
    display: inline-block;
    height: 100%;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 100;
}

.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
    top: 34px;
}

table td {
    border: 1px solid #ddd;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

table th {
    border: 1px solid black !important;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#fakeScrollContainer {
    position: absolute;
    left: 43px; /* 50px is correct */
    width: 52px;
    background-color: #ffffff;
    z-index: 1000;
    overflow: hidden;
}

#ourFakeTimeLine {
    width: 52px !important;
    position: relative;
}

.trainingdayDeleteTopMargin {
    margin-top: 30px !important;
}

.trainerBadgesReloadButton {
    margin-left: -10px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .trainerBadgesReloadButton {
        margin: 45px 0px 0px 0px;
    }
}

.tafMobileContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tafLogoMobile img {
    max-width: 50%
}

.tafLogoMobile {
    flex-basis: 40%;
}

.tafHeadlineMobile {
    font-size: 20px;
    padding-left: 5px;
}

.trainingAccountingTableMargin {
    margin-top: 20px !important;
}

.createInvoiceTableMargin {
    margin-top: 20px !important;
}

.loadTrainingAccountingsButton {
    margin-top: 15px;
}

.locationNoteDataEditorContainer {
    margin-top: 40px;
}

#ourFakeTimeLine > tbody > tr > td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink {
    height: 1.5em;
    text-align: center;
}

#ourFakeTimeLine > tbody > tr {
    height: 32.4px;
}

    #ourFakeTimeLine > tbody > tr > td {
        padding: 0.25rem;
        width: 55px;
    }

        #ourFakeTimeLine > tbody > tr > td:first-child {
            border-top: 1px solid black;
        }

.cardBorder {
    border: 1px solid gray !important;
    border-radius: 4px !important;
}

#emailTemplateDataEditor {
    height: 300px;
}

.chkboxInvoiceMailFormat {
    text-align: center;
}

.chkboxInvoiceBillFormat {
    text-align: center;
}

#openTrainingsForBlock {
    margin-top: 5px;
}

#sumAmountOpenForBlock {
    margin-top: 5px;
}

#tblFlatRateUserContainer {
    margin-top: 20px;
}

.eventInfo {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    font-size: 20px;
    border: 1px solid gray;
    border-radius: 2px;
    color: black;
}

    .eventInfo:before {
        content: "\2139";
        position: absolute;
        height: 100%;
        width: 20px;
        top: 0px;
        right: 0px;
        background-size: 20px 20px;
        background-position: top center, bottom center;
        background-repeat: no-repeat;
    }

.headlineflatRateTable {
    margin-top: 15px;
    margin-bottom: 5px;
}

#productLocationContainer {
    height: 200px;
}

#productLocationTable td {
    text-align: center;
    vertical-align: middle;
}

.btnEditUser {
    float: left;
    border: solid 0.5px;
    margin-right: 0.5em;
}

.switchUsrPortalAccess {
    float: left;
    margin-top: -2px;
}

    .switchUsrPortalAccess label {
        margin-left: -5px;
    }

.switchUsrActive {
    float: left;
    margin-top: -2px;
    padding-right: 0.5em;
    margin-left: 0.5em;
}

.switchUsrActive label {
    margin-left: -5px;
}

#trainerAbsenceCalendar {
    max-width: 1100px;
    margin: 40px auto;
}

.fc-next-button:hover,
.fc-next-button:hover span {
    background-color: gray!important;
}

.fc-prev-button:hover,
.fc-prev-button:hover span {
    background-color: gray!important;
}

.eventAbsenceTight {
    font-size: 10px; 
    letter-spacing: -0.08em;
}

.accordion-body {
    padding: 1rem 1.25rem!important;
}

.accordion-item {
    border: 1px solid rgba(0, 0, 0, .125)!important;
}

.dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

    .dashboard h2 {
        text-align: left;
        color: #028af0 !important;
    }

.card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 45%;
    transition: transform 0.3s ease;
}

    .card label {
        font-size: 1rem;
    }

.card-header {
    background-color: #00BFFF !important;
    color: white;
    padding: 20px;
    border-radius: 15px 15px 0 0;
    font-size: 18px;
}

    .card-header em {
        margin-left: 50px;
        margin-right: 20px;
        color: white !important;
    }

    .card-header h4 {
        color: white !important;
        font-size: 1.5rem;
    }

.card-body {
    padding: 20px;
    font-size: 16px;
    text-align: left;
    background-color: azure !important;
    color: darkblue !important;
}

    .card-body p {
        font-weight: bold;
        margin: 0;
    }

@media (max-width: 768px) {
    .dashboard {
        flex-direction: column;
        padding: 10px;
    }

    .card {
        width: 100%;
    }

    .card-header {
        padding: 15px;
        font-size: 16px;
    }

        .card-header h4 {
            font-size: 1.2rem;
        }

    .card-body {
        padding: 15px;
        font-size: 14px;
    }

        .card-body p {
            font-size: 14px;
        }

    .card-header em {
        margin-left: 20px;
        margin-right: 10px;
    }

    .nk-menu-icon {
        margin-right: 5px !important;
    }

    .dashboard h2 {
        font-size: 1.5rem;
    }

    .nk-menu-text {
        white-space: normal;
        word-break: break-word;
    }
}



/* grid stack for registration forms */
#trash {
    background-color: rgba(255, 0, 0, 0.4);
}

.grid-stack {
    background: azure; /* Light gray background for the grid */
    height: 400px; /* Set a height so the grid is visible */
    border: 2px solid black;
    border-radius: 10px;
    margin: 10px;
}

.grid-stack-item-content {
    background-color: lightgreen;
    color: white;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    border-radius: 5px;
    border: 1px solid #333;
    padding: 5px;
}

.grid-stack-item-removing {
    opacity: 0.8;
    filter: blur(5px);
}

#trash {
    background-color: rgba(255, 0, 0, 0.4);
}

.delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: red;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
}

    .delete-btn:hover {
        background: darkred;
    }

.sidepanel-item {
    background-color: #18bc9c;
    text-align: center;
    padding: 5px;
}

#gridContainer {
    width: 100%; /* Adjust as needed */
    max-width: 1200px; /* Optional: Limit max width */
    margin: auto;
}

#formContent {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Fixed 12 columns */
    grid-auto-rows: minmax(50px, auto); /* Auto-height rows */
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.grid-item {
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    background: #f9f9f9; /* Optional: better visibility */
    text-align: left;
}

.posHour-calendar {
    display: block; /* Fill line, not inline-block */
    width: 100%; /* Use full parent width */
    max-width: 100%;
    border: 2px solid #333;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

/* Header and each row share the same grid:
   64px for Zeit + N equal columns for days */
.posHour-header,
.posHour-row {
    display: grid;
    grid-template-columns: 64px repeat(var(--days), minmax(0, 1fr));
}

/* HEADER */
.posHour-header {
    background-color: cornflowerblue;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid #333;
}

.posHour-head {
    font-weight: 600;
    text-align: center;
    font-size: 14px;
    padding: 2px 4px;
    border-right: 2px solid #333;
    box-sizing: border-box;
}

.posHour-day {
    font-size: 14px;
    height: 20px;
    text-align: center;
    padding: 2px 4px;
    border-right: 2px solid #333;
    box-sizing: border-box;
    min-width: 0; /* allow shrink */
    overflow: hidden; /* prevent spill */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* BODY */
.posHour-body {
    display: block; /* no width:max-content */
}

.posHour-row {
    border-bottom: 1px solid #333;
}

.posHour-time-label {
    font-weight: bold;
    background-color: cornflowerblue;
    color: white;
    min-height: 20px;
    height: 20px;
    font-size: 14px;
    text-align: center;
    border-right: 2px solid #333;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Day slots */
.posHour-time-slot {
    min-height: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #333;
    border-bottom: 1px solid #333;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    min-width: 0; /* critical for equal shrink */
}

    /* Hover + selected */
    .posHour-time-slot:hover {
        background: lightblue !important;
    }

    .posHour-time-slot.posHour-marked {
        background-color: blue !important;
        color: white;
        font-weight: bold;
    }

/* No extra right border on last column */
.posHour-header > *:last-child,
.posHour-row > *:last-child {
    border-right: none;
}




#textonlyText {
    width: 100%;
    height: 300px;
    font-size: 18px;
    line-height: 1.5;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

/* Default styles for desktop */
#formContainer {
    margin: auto;
    padding-top: 20px;
    text-align: center;
    width: 90%;
    overflow-y: auto;
    max-height: 90vh;
}

#gridContainer {
    padding: 10px;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    #formContainer {
        width: 95%;
        max-height: 80vh;
    }

    #gridContainer {
        padding: 5px;
    }
}

/* Common notification styles for desktop */
#common-notification-panel {
    position: fixed;
    top: 150px;
    right: 80px;
    width: 640px;
    max-width: 90%; /* Ensures it doesn't overflow smaller screens */
    z-index: 1000;
}

/* Tablet and smaller screens (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    #common-notification-panel {
        top: 100px; /* Adjust top positioning */
        right: 40px; /* Less space from the right */
        width: 480px; /* Reduce width for tablets */
    }
}

/* Mobile-specific adjustments (max-width: 768px) */
@media screen and (max-width: 768px) {
    #common-notification-panel {
        top: 80px; /* Reduce top margin for smaller screens */
        right: 20px; /* Bring it closer to the edge */
        width: 90%; /* Full-width with padding */
        max-width: 360px; /* Prevent too much stretching */
    }
}

/* Ultra small devices (phones in portrait mode, max-width: 480px) */
@media screen and (max-width: 480px) {
    #common-notification-panel {
        top: 60px; /* Adjust top for small screens */
        right: 10px;
        left: 10px; /* Center it more */
        width: calc(100% - 20px); /* Make it take almost full width */
        max-width: 320px; /* Keep it manageable */
    }
}


/* Tablet and smaller screens (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    #common-notification-panel {
        top: 100px; /* Adjust top positioning */
        right: 40px; /* Less space from the right */
        width: 480px; /* Reduce width for tablets */
    }
}

/* Mobile-specific adjustments (max-width: 768px) */
@media screen and (max-width: 768px) {
    #common-notification-panel {
        top: 80px; /* Reduce top margin for smaller screens */
        right: 20px; /* Bring it closer to the edge */
        width: 90%; /* Full-width with padding */
        max-width: 360px; /* Prevent too much stretching */
    }
}

/* Ultra small devices (phones in portrait mode, max-width: 480px) */
@media screen and (max-width: 480px) {
    #common-notification-panel {
        top: 60px; /* Adjust top for small screens */
        right: 10px;
        left: 10px; /* Center it more */
        width: calc(100% - 20px); /* Make it take almost full width */
        max-width: 320px; /* Keep it manageable */
    }
}

/* Unconfirmed notifications - Bright Blue */
.common-notification-item {
    background: blue;
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    transform: translateY(-10px);
    transition: background 0.5s ease-in-out, transform 0.3s ease-in-out;
    border-left: 5px solid darkblue;
}

/* Confirmed notifications - Slightly lighter Blue */
.common-notification-item-confirmed {
    background: green;
    color: #d1ecff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    transform: translateY(-10px);
    transition: background 0.5s ease-in-out, transform 0.3s ease-in-out;
    border-left: 5px solid darkgreen;
}

/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
    .common-notification-item,
    .common-notification-item-confirmed {
        padding: 10px; /* Even more compact for smaller screens */
        font-size: 13px; /* Reduce text size slightly */
        margin-bottom: 10px;
        transform: none; /* Remove translateY for a more stable look */
        border-left: 3px solid; /* Thinner border */
    }
}

/* Ultra small devices (phones in portrait mode) */
@media screen and (max-width: 480px) {
    .common-notification-item,
    .common-notification-item-confirmed {
        padding: 8px;
        font-size: 12px;
        margin-bottom: 8px;
        border-radius: 5px;
    }
}

/* Smooth transition when confirming */
.common-notification-confirming {
    background: #00c851 !important; /* Green highlight effect */
    border-left: 5px solid #007e33 !important;
    transform: scale(1.05);
    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* "Confirmed" badge styling */
.common-notification-confirmed {
    font-weight: bold;
    color: #ffffff;
    background: darkgreen;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    margin-left: 10px;
    margin-right: 10px;
}

/* Confirm button */
.common-notification-confirm-btn {
    background: green;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background 0.3s;
}

    .common-notification-confirm-btn:hover {
        background: darkgreen;
    }


.common-notification-fade-in {
    opacity: 1;
    transform: translateY(0);
}

.common-notification-fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.common-notification-title {
    font-weight: bold;
    font-size: 1rem;
}

.common-notification-message {
    margin: 5px 0;
    font-size: 0.9rem;
}

.common-notification-time {
    font-size: 0.8rem;
    opacity: 0.7;
}

.common-notification-confirmed {
    font-size: 1rem;
    font-weight: bold;
    display: block;
    margin-top: 10px;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.common-notification-link {
    cursor: pointer;
    text-decoration: underline;
    color: white;
}

.common-notification-link:hover {
    color: burlywood;
}

/* cross out player event on mobile device, set or unset absence of player by player*/
.cross-out {
    text-decoration: line-through;
}

.dropzone-area.bg-light {
    background-color: #f8f9fa;
}

/* user group add remove button centered vertically */
.dual-button-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* group-management.css */

.styled-multiselect {
    width: 100%;
    background-color: #fff;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    height: 50vh;
    overflow-y: auto;
}

    .styled-multiselect option {
        background-color: #fff;
        color: #212529;
    }

    .styled-multiselect:focus option:checked {
        background-color: #0d6efd;
        color: #fff;
    }


.selected-row-migrate-filled-forms {
    background-color: #d1e7dd; /* Bootstrap-like success green */
}

/* Container für den gesamten Kalender */
.mph-calendar {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* Kopfzeile (Wochentage) */
.mph-header,
.mph-row {
    display: grid;
    grid-template-columns: 80px repeat(auto-fit, minmax(80px, 1fr));
    border-bottom: 1px solid #ddd;
}

/* Wochentage oben */
.mph-day,
.mph-time-label {
    background: #f8f9fa;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    border-right: 1px solid #ddd;
}

/* Stundenlabels links */
.mph-time-label {
    background: #f1f1f1;
    font-weight: normal;
}

/* Zeit-Slots Standard */
.mph-slot {
    border-right: 1px solid #eee;
    height: 35px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    /* Hover-Effekt */
    .mph-slot:hover {
        background-color: #d4edda !important; /* helles Grün beim Hover */
    }

    /* Markierte Slots (höhere Spezifität + !important) */
    .mph-slot.mph-marked {
        background-color: #28a745 !important; /* kräftiges Grün */
        color: #fff !important;
        font-weight: bold;
    }


/* Letzte Spalte ohne Border */
.mph-row .mph-slot:last-child,
.mph-header .mph-day:last-child {
    border-right: none;
}

.posHour-time-slot.editable {
    cursor: pointer;
    outline: none;
}

.posHour-time-slot.selected {
    background-color: #4CAF50;
    color: #fff;
    border-radius: 4px;
}

/* keep the cell tiny; avoid wrapping */
<style >
.pph-cell {
    white-space: nowrap;
    font-size: .5rem;
}

#filledFormTable td {
    vertical-align: middle;
}

/* Overview modal table */
.pph-ov-table {
    width: 100%;
    border-collapse: collapse;
}

    .pph-ov-table th, .pph-ov-table td {
        border: 1px solid #ddd;
        padding: 3px;
    }

.pph-heatmap {
    width: 140px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

/* Print-friendly */
@media print {
    .modal, .bootbox, .btn, .no-print {
        display: none !important;
    }

    .print-root {
        display: block !important;
    }

    @page {
        size: A4 landscape;
        margin: 12mm;
    }
}


#filledFormsOverview {
    float: right;
}