/* OVERRIDE SECTION */
.k-grid, .k-grid-header {
    width: 100%;
}

.telerik-blazor {
    font-size: 12px;
}

.k-datepicker {
    height: 28px;
}

.k-window-title.k-dialog-title {
}

.k-dialog-titlebar.k-header.k-window-titlebar {
    background-color: teal;
    color: white;
}

.k-window-wrapper {
    border-radius: 5px;
}

.k-grid .k-grid-content .k-master-row.k-selected {
    background-color: lightpink;
}

.k-grid-table {
    font-size: 12px;
}
/* OVERRIDE SECTION */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* CSS rules for mobile devices in landscape mode */
}

@media only screen and (min-width: 1024px) {
    /* CSS rules for tablets and small desktop screens */
}

@media only screen and (max-width: 1024px) {
    /* CSS rules for tablets and small desktop screens */
}

@media only screen and (max-width: 1600px) {
    /* CSS rules for standard desktop and laptop screens */
}

@media only screen and (max-width: 1325px) {
    nav {
        background-color: teal;
        padding: 5px 10px;
        color: white;
        font-weight: bolder;
        border-radius: 5px 5px 0 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: thin; /* For Firefox */
        scrollbar-color: rgba(255, 255, 255, 0.5) transparent; /* For Firefox */
    }

        nav a {
            color: white;
            text-decoration: none;
            flex: 0 0 150px;
            margin: 5px;
            padding: 10px;
            display: block;
            text-align: center;
            box-sizing: border-box;
            white-space: nowrap;
        }

        /* Custom scrollbar for Webkit browsers */
        nav::-webkit-scrollbar {
            height: 8px;
        }

        nav::-webkit-scrollbar-track {
            background: transparent;
        }

        nav::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            border: 2px solid transparent;
        }
}

@media only screen and (max-width: 767px) {
    nav {
        display: none;
    }

    .burger-menu {
        display: block;
    }

    .nav-menu {
        display: none;
    }

        .nav-menu.active {
            display: block;
            position: fixed;
            top: 50%;
            left: 36%;
            transform: translate(-50%, -65%);
            width: max-content;
            background-color: teal;
            color: white;
            font-weight: bolder;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            z-index: 1001;
            border-radius: 0 0 5px 5px;
            padding: 5px 10px;
            flex-direction: column;
        }

            .nav-menu.active a {
                padding: 15px;
                margin: 5px auto;
                text-decoration: none;
                color: white;
                display: block;
                border-radius: 5px;
                transition: background-color 0.3s;
            }

                .nav-menu.active a:hover {
                    background-color: hotpink;
                }

    subnav {
        width: 95% !important; /* Adjust based on needs */
    }
}

@media only screen and (max-height: 800px) {
    html, body {
        font-size: 10px;
    }

    /* reduce default 14px font-size */
    .k-button,
    .k-input,
    .k-input .k-input-inner,
    .k-picker,
    .k-picker .k-input-inner {
        font-size: 10px;
    }

        /* reduce default 4px/8px paddings */
        .k-button,
        .k-picker .k-input-inner,
        .k-input .k-input-inner,
        .k-button.k-input-button {
            padding: 2px 4px;
        }

            /* remove default 20px min-height */
            .k-button.k-input-button .k-button-icon {
                min-height: initial;
            }

    /* styles for the dropdown items */
    .k-animation-container .k-list .k-list-item {
        font-size: 10px;
        padding: 2px 4px;
    }

    .k-grid, .k-grid-header {
        font-size: 10px;
        padding: 2px 4px;
    }

    .special-grid-paddings th.k-header {
        font-size: 10px;
        padding: 2px;
    }

    .special-grid-paddings .k-master-row td {
        padding: 2px;
    }
}

@media only screen and (max-width: 550px) {

    .k-tabstrip-items {
        flex-direction: column;
    }

    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-width: 0;
        width: 100%;
    }

    .flk-tab-strip-header-selected {
        padding: 20px;
        color: white;
        background-color: hotpink;
        border-radius: 5px;
        width: 100%;
    }

    .k-tabstrip-items .k-link {
        padding-block: 6px;
        padding-inline: 12px;
        color: inherit;
        cursor: pointer;
        display: inline-flex;
        vertical-align: middle;
        flex: 1 1 auto;
        flex-direction: row;
        align-content: center;
        align-items: center;
        width: 100%;
    }

    .flk-tab-strip-header {
        padding: 20px;
        color: white;
        background-color: teal;
        border-radius: 5px;
        width: 100%;
    }
}