.contenedor {
    display: block !important;
    padding: 1rem 1rem;
    overflow-x: auto;
}

@media (min-width: 1681px) {
    .contenido > i {
        font-size: 1.1rem !important;
    }

    .contenido > span {
        font-size: 12px !important;
    }

    .ubicacion {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px; !important;
    }
}

@media (min-width: 768px) {
}

#grilla {
    width: max-content;
    height: max-content;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

    #grilla.loading .ubicacion {
        pointer-events: none;
        cursor: wait;
    }

.referencia {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

    .referencia > .item {
        align-items: center;
        padding: 1rem;
    }

        .referencia > .item > .descripcion {
            margin-left: 1rem;
            height: min-content;
        }

        #grilla > .fila,
        .referencia,
        .referencia > .item,
        .referencia > .item > .descripcion {
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
        }

.ubicacion {
    width: 25px;
    height: 25px;
    margin: 2px;
    border-radius: 8px;
    display: inline-block;
    box-shadow: none;
    user-select: none;
}

    .ubicacion.disponible,
    .ubicacion.ocupado,
    .ubicacion.ejemplo,
    .ubicacion.reserva {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    }

    .ubicacion.disponible,
    .ubicacion.ejemplo {
        background-color: #fff;
    }

    .ubicacion.disponible {
        cursor: pointer;
    }

    .ubicacion.ejemplo {
        cursor: default;
    }

    .ubicacion.reserva {
        pointer-events: none;
    }

    .ubicacion.ocupado {
        background-color: #b2b2b2;
        pointer-events: none;
    }

    .ubicacion.disponible:hover {
        border: 1px solid var(--main-color);
    }

    .ubicacion.disponible:active,
    .ubicacion.seleccionado,
    .ubicacion.seleccionado:hover {
        border: 0.4rem solid var(--main-color);
    }

    .ubicacion > .contenido {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

.contenido > i {
    font-size: 1.1rem;
    color: #2d3d46;
}

.contenido > span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    padding-bottom: 0px;
}


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

    .ubicacion {
        width: 45px;
        height: 45px;
        margin: 5px;
    }

    .contenido > i {
        font-size: 1.8rem;
        color: #2d3d46;
    }

    .contenido > span {
        font-size: 1.8rem;
    }
}