:root {
        --bg-color-batebola: "#fff";
        --bg-color-aula: "#fff";
        --bg-color-ranking: "#fff";
        --bg-color-locacao: "#fff";
        --cols: 0;
    }

    .calendar-container {
        padding:5px;
        width:calc(100% - 10px);
        overflow-x: auto;
        position: relative;
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: 100px repeat(var(--cols), minmax(140px, 1fr));
        // grid-auto-rows: 62px;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
    }

    .grid-header {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #007bff;
        color: white;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        padding: 10px;
        border-left: 1px solid #ccc;
    }

    .grid-item {
        text-align: center;
        color: #222;
        border-right: 1px dotted #ddd;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 11px;
        cursor: pointer;

    }

    .half-hour {
        font-size: 8px;
        border-right: 1px dotted #ddd;
        border-bottom: 1px dotted #ccc;
    }

    .time-slot {
        background: #f1f1f1;
        border-left: 1px dotted #ccc;
        font-weight: bold;
        cursor: default;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .time-label {
        font-size: 12px;
    }

    .time-label-half {
        font-size: 8px;
        color: #999;
    }

    .selected {
        font-weight: bold;
    }

    .cls_grid_cell{
        width: calc(100% - 8px);
        padding:3px;
        margin: 2px;
        font-size: 10px;
        text-shadow: none;
        white-space:nowrap !important; 
        overflow:hidden !important; 
        text-overflow: ellipsis !important; 
    }

    .cls_hr_separator{
        color:#efefef; 
        border: none; 
        border-top: 0.5px dotted #fff; 
        width:80%;
        margin:4px;
    }

    .cls_quadras_batebola:hover{
        cursor:pointer;
    }

    .cls_times_batebola:hover{
        cursor:pointer;
    }

    .cls_responsive_grid_cells {
        font-size: 12px;
    }

    /* Telas muito pequenas (iPhone SE antigo, Android pequeno) */
    @media (min-width: 340px) {
        .cls_responsive_grid_cells {
            font-size: 11px;
        }
        .grid-item {
            font-size: 9px;
        }
    }

    /* Telas pequenas a médias (a maioria Android/iPhone menores) */
    @media (min-width: 341px) and (max-width: 390px) {
        .cls_responsive_grid_cells {
            font-size: 12px;
        }
    }

    /* Telas grandes (iPhones comuns, Androids 1080p) */
    @media (min-width: 391px) and (max-width: 430px) {
        .cls_responsive_grid_cells {
            font-size: 13px;
        }
    }

    /* Telas muito largas (Pro Max, Ultra, tablets pequenos) */
    @media (min-width: 431px) {
        .cls_responsive_grid_cells {
            font-size: 14px;
        }
    }