#event-modal-whole-screen {
    z-index: 2147483646;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, .25)
}

#loading-whole-screen {
    z-index: 2147483646;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, .25);
    cursor: wait;
}

#loading-whole-screen div {
    font-size: 64px;
    margin-top: calc(50vh - 32px);
}

@media (pointer: coarse) {
    #loading-whole-screen div {
        display: block;
    }
}

@media (hover: hover) and (pointer: fine) {
    #loading-whole-screen div {
        display: none;
    }
}

#event-modal-container {
    background-color: rgba(255, 255, 255, 1);
    z-index: 2147483647;
    border-radius: 16px;
    min-width: 300px;
    height: min-content;
    margin: 16px;
}

#event-modal {
    margin: 0;
    padding: 16px;
    height: 100%;
    border-radius: 16px;
    text-align: center;
}

.event-value-container {
    font-weight: normal;
}

.k-selected.k-list-optionlabel {
    background-color: rgb(128, 128, 128) !important;
}

.k-list-item.k-selected {
    background-color: rgb(128, 128, 128) !important;
}

    .k-list-item.k-selected span {
        background-color: rgb(128, 128, 128) !important;
    }

@media only screen and (max-width: 767px) {
    #schedule-grid-view .k-grid-header th {
        font-size: 12px; /* Set font size for header */
    }

    #schedule-grid-view .k-grid-content td {
        font-size: 12px; /* Set font size for grid content */
    }
}

@media only screen and (min-width: 768px) {
    #schedule-grid-view .k-grid-header th {
        font-size: 14px; /* Set font size for header */
    }

    #schedule-grid-view .k-grid-content td {
        font-size: 14px; /* Set font size for grid content */
    }
}