/* AutrixWeb — responsive.css: Responsive móvil, estilos inline refactorizados, deportes y modales intermedios.
 * Rango contiguo 3106-5908 del antiguo styles.css: el orden relativo
 * se conserva para no alterar la cascada. */
/* Mobile responsive */
@media (max-width: 768px){

    .status-container,
    .section-container {
        max-width: 100%;
        padding: 15px;
        margin: 0 auto;
    }

    /* Ensure sections are centered on mobile */
    .section {
        display: flex;
        justify-content: center;
    }

    .section .section-container {
        max-width: calc(100vw - 20px);
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    .sidebar-canvas-container {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

    .power-buttons {
        justify-content: flex-start;
        gap: 10px;
    }

    .control-container,
    .power-toggle-container,
    .sound-toggle-container,
    .sleep-control,
    .reboot-button-container {
        padding: 4px 10px;
    }

    .power-toggle-container {
        padding: 4px 10px;
    }

    .power-toggle-text {
        font-size: 13px;
    }

    .power-toggle {
        width: 55px;
        height: 28px;
    }

    .power-toggle-slider::before {
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
    }

    .power-toggle input:checked+.power-toggle-slider::before {
        transform: translateX(27px);
    }

    .sound-toggle-container {
        padding: 4px 10px;
    }

    .sound-toggle {
        width: 55px;
        height: 30px;
    }

    .sound-toggle-slider::before {
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        font-size: 11px;
    }

    .sound-toggle input:checked+.sound-toggle-slider::before {
        transform: translateX(25px);
    }

    .sleep-control {
        padding: 4px 10px;
    }

    .sleep-control input {
        width: 45px;
        padding: 5px 6px;
        font-size: 11px;
    }

    .sleep-control button {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .reboot-button-container {
        padding: 4px 10px;
    }

    .reboot-button-container button {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    /* Refactored Inline Styles */

    /* Device IP Input Container - MOVIDO AL FINAL DEL ARCHIVO */

    /* Status Header */
    /* Canvas Indicator LEDs */
    .canvas-indicator-led-red {
        background: #FF0000;
    }

    .canvas-indicator-led-green {
        background: #00FF00;
    }

    .canvas-indicator-led-blue {
        background: #0000FF;
    }

    /* Loop Controls */
    /* Custom JSON Preview */
    /* Gradient Controls */
    /* Custom Rainbow */
    /* Control Groups */
    /* Section Headers */
    /* Checkbox Groups */
    /* Labels */
    /* Color Sections */
    /* Text Fragments */
    /* Batch Apps */
    /* Sound Section */
    .sound-description {
        font-size: 12px;
        color: #666;
        margin: 0 0 10px 0;
    }

    /* Melody Section */
    .melody-description {
        font-size: 12px;
        color: #666;
        margin: 0 0 10px 0;
    }

    .melody-select-margin {
        margin-bottom: 10px;
    }

    /* Drawing Section */
    /* .canvas-with-tools - ESTILOS MOVIDOS AL FINAL DEL ARCHIVO */

    /* .draw-main-area - ESTILOS MOVIDOS AL FINAL DEL ARCHIVO */

    /* Canvas de Drawing - DEBE verse idéntico al de Status */
    .draw-canvas,
    canvas#draw_canvas {
        background: #181c21 !important;
        image-rendering: pixelated !important;
        cursor: crosshair;
        border-radius: 7px !important;
        border: 12px solid #181c21 !important;
        box-shadow:
            0 4px 32px rgba(0, 0, 0, 0.7),
            inset 0 0 0 2px #0a0c0e,
            inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
        max-width: 578px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        flex-shrink: 0;
    }

    /* .draw-color-controls - YA NO SE USA, reemplazado por .draw-tools-panel */

    .draw-color-input-hidden {
        display: none;
    }

    .draw-color-preview {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        background: #FFFFFF;
        cursor: pointer;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .draw-size-indicator {
        font-size: 10px;
    }

    .draw-text-controls {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
        max-width: 600px;
    }

    .draw-text-input {
        flex: 1;
        margin: 0;
    }

    .draw-commands-counter {
        font-weight: bold;
        font-size: 14px;
        color: #666;
    }

    .draw-commands-placeholder {
        color: #888;
        margin: 0;
    }

    /* Editor de dibujo: en móvil las dos columnas se apilan */
    #widget_drawing_modal .draw-options-grid {
        grid-template-columns: 1fr !important;
    }

    /* Settings Preview */
    .settings-preview-color {
        background: #FF00FF;
    }

    .power-toggle-container {
        padding: 6px;
    }

    .power-toggle-text {
        font-size: 13px;
    }

    .power-toggle {
        width: 55px;
        height: 28px;
    }

    .power-toggle-slider:before {
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
    }

    .power-toggle input:checked+.power-toggle-slider:before {
        transform: translateX(27px);
    }

    .sound-toggle-container {
        gap: 6px;
    }

    .sound-toggle-label {
        padding: 6px;
    }

    .sound-toggle {
        width: 55px;
        height: 30px;
    }

    .sound-toggle-slider::before {
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        font-size: 13px;
    }

    .sound-toggle input:checked+.sound-toggle-slider::before {
        transform: translateX(25px);
    }

    .sidebar-nav {
        display: flex;
        overflow-x: auto;
        padding: 0 10px;
    }


    .sidebar-nav li {
        border-bottom: none;
        border-right: 1px solid #34495e;
        flex-shrink: 0;
    }

    .sidebar-nav a {
        white-space: nowrap;
        padding: 12px 15px;
    }

    /* Drawing canvas responsive */
    #draw_canvas {
        width: 100%;
        height: auto;
    }

    .undo-button {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* Canvas indicators responsive */
    .canvas-with-indicators {
        flex-direction: column;
        gap: 15px;
    }

    .canvas-indicators {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        height: auto;
    }

    .canvas-indicator {
        flex-direction: column;
        gap: 6px;
        padding: 6px;
        align-items: center;
    }

    .canvas-indicator:hover {
        transform: translateY(-3px);
    }

    .canvas-indicator input[type="color"] {
        width: 24px;
        height: 24px;
    }

    /* Mood Lighting responsive */
    .moodlight-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .moodlight-header h4 {
        text-align: center;
    }

    .moodlight-toggle-btn {
        width: 100%;
        justify-content: center;
    }

    .moodlight-color-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .kelvin-markers {
        gap: 2px;
    }

    .kelvin-markers span {
        font-size: 16px;
        min-width: 32px;
        height: 32px;
        padding: 4px;
    }

    /* Appearance mode responsive */
    /* Brightness controls responsive */
    .brightness-header {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .brightness-header h4 {
        text-align: center;
    }

    .auto-brightness-btn {
        width: 100%;
        justify-content: center;
    }

    .brightness-presets {
        gap: 4px;
    }

    .brightness-preset-btn {
        font-size: 16px;
        padding: 8px;
    }
}

/* ============================================
   FIX: Device IP Input Container
   Estos estilos DEBEN estar al final para
   sobrescribir los selectores generales
   ============================================ */

.device-ip-input-container button.connect-button {
    margin: 0 !important;
    margin-top: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    padding: 0 !important;
}

/* ============================================
   FIX: Draw Tools Panel - Matriz 3x3
   Estos estilos DEBEN estar al final para
   sobrescribir los selectores generales
   ============================================ */

.canvas-with-tools {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    margin: 20px auto !important;
    max-width: 100% !important;
}

.draw-tools-panel {
    display: grid !important;
    grid-template-columns: repeat(3, 50px) !important;
    grid-template-rows: repeat(3, 50px) !important;
    gap: 3px !important;
    padding: 10px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-radius: 12px !important;
    border: 2px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    align-items: center !important;
    justify-items: start !important;
    height: 170px !important;
    box-sizing: border-box !important;
}

.draw-tools-panel>* {
    margin: 0 !important;
    margin-top: 0 !important;
}

.draw-tools-panel button.tool-button-icon {
    margin: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 18px !important;
}

/* Icono del pixel tool - círculo muy pequeño */
.draw-tools-panel button#tool_pixel i.draw-size-indicator {
    font-size: 8px !important;
}

/* ============================================
   FIX: Draw Text Controls debajo de todo
   Alineado con el panel de herramientas
   Sin etiqueta, solo input
   ============================================ */

.section-container-drawing>.draw-text-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    width: 170px !important;
}

.section-container-drawing>.draw-text-controls .draw-text-input {
    width: 170px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 6px !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
    color: #333 !important;
    box-sizing: border-box !important;
}

.section-container-drawing>.draw-text-controls .draw-text-input:disabled,
.section-container-drawing>.draw-text-controls .draw-text-input[readonly] {
    background: #f5f6fa !important;
    color: #95a5a6 !important;
    cursor: pointer !important;
    border-color: #e9ecef !important;
}

.section-container-drawing>.draw-text-controls .draw-text-input:enabled {
    background: #fff !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
}

.section-container-drawing>.draw-text-controls .draw-text-input:focus {
    outline: none !important;
    border-color: #2980b9 !important;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.25) !important;
}

/* ============================================
    Drawing Options - 2 columnas (publicación | comandos)
   ============================================ */

.draw-options-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* Agrupa etiqueta + control para que el espaciado sea uniforme */
.draw-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}


.draw-option-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px !important;
    margin: 0 !important;
    background: #f8f9fa !important;
    border-radius: 10px !important;
    border: 2px solid #e9ecef !important;
    transition: all 0.3s ease !important;
}

.draw-option-column:hover {
    border-color: #dee2e6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Columna 1 - Publicación (azul suave) */
.draw-option-column:nth-child(1) {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%) !important;
    border-color: #d0e1ff !important;
}

.draw-option-column:nth-child(1):hover {
    border-color: #b8d4ff !important;
    box-shadow: 0 4px 12px rgba(44, 90, 160, 0.1) !important;
}

/* Columna 2 - Comandos de dibujo (verde suave) */
.draw-option-column:nth-child(2) {
    background: linear-gradient(135deg, #f0fdf4 0%, #e8fef0 100%) !important;
    border-color: #d0f5e0 !important;
}

.draw-option-column:nth-child(2):hover {
    border-color: #b8f0d0 !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1) !important;
}

.draw-option-label {
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #495057 !important;
}

.draw-option-input {
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    background: white !important;
    color: #333 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.draw-option-input::placeholder {
    color: #95a5a6 !important;
}

.draw-option-input option {
    background: white;
    color: #333;
}

/* Tema oscuro: estos campos son tarjetas claras, el texto sigue oscuro */
body.authed .draw-option-input {
    background: white !important;
    color: #333 !important;
    border: 2px solid #dee2e6 !important;
}

body.authed .draw-option-input::placeholder {
    color: #95a5a6 !important;
}

body.authed .draw-option-input option {
    background: white;
    color: #333;
}

/* Campo de texto del editor: readonly (no disabled) para que el clic/foco
   siga llegando y pueda conmutar a la herramienta de texto */
#widget_drawing_modal .draw-text-input[readonly] {
    cursor: pointer;
}

.draw-option-input:focus {
    outline: none !important;
    border-color: #2c5aa0 !important;
    box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.15) !important;
}

/* Input en columna de Custom App (azul) */
.draw-option-column:nth-child(1) .draw-option-input:focus {
    border-color: #2c5aa0 !important;
    box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.15) !important;
}

/* Input en columna de Comandos (verde) */
.draw-option-column:nth-child(2) .draw-option-input:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

/* Lista de comandos en su propia columna (verde) */
.draw-option-column:nth-child(2) .draw-commands-scroll {
    background: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.draw-option-button {
    margin: 0 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.draw-option-button-primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3) !important;
}

.draw-option-button-primary:hover {
    background: linear-gradient(135deg, #2980b9 0%, #21618c 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4) !important;
}

.draw-option-hint {
    font-size: 12px !important;
    color: #6c757d !important;
    margin-top: 8px !important;
}

.draw-commands-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
}

.draw-commands-counter {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #95a5a6 !important;
    background: #ecf0f1 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
}

.draw-commands-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px !important;
    background: white !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 6px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    font-size: 12px !important;
    color: #495057 !important;
    line-height: 1.6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.draw-commands-scroll::-webkit-scrollbar {
    width: 8px !important;
}

.draw-commands-scroll::-webkit-scrollbar-track {
    background: #ecf0f1 !important;
    border-radius: 4px !important;
}

.draw-commands-scroll::-webkit-scrollbar-thumb {
    background: #bdc3c7 !important;
    border-radius: 4px !important;
}

.draw-commands-scroll::-webkit-scrollbar-thumb:hover {
    background: #95a5a6 !important;
}

.draw-commands-placeholder {
    margin: 0 !important;
    color: #95a5a6 !important;
    font-style: italic !important;
    text-align: center !important;
}

/* Selector de color en la última posición, ocupa 2 celdas */
.draw-tools-panel label.color-picker-button-draw {
    display: flex !important;
    margin: 0 !important;
    margin-top: 0 !important;
    grid-column: 2 / 4 !important;
    grid-row: 3 !important;
    width: 100% !important;
    height: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 3px solid #2c5aa0 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    padding: 4px 8px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(44, 90, 160, 0.3) !important;
}

.draw-tools-panel label.color-picker-button-draw:hover {
    border-color: #3498db !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.5) !important;
}

.draw-tools-panel .draw-color-preview {
    flex: 1 !important;
    height: 100% !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    background: #FFFFFF;
    cursor: pointer !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
}

.draw-tools-panel .draw-color-icon {
    font-size: 18px !important;
    color: #2c5aa0 !important;
    flex-shrink: 0 !important;
}

.draw-tools-panel .draw-color-hex {
    font-size: 11px !important;
    font-family: monospace !important;
    color: #555 !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

.draw-tools-panel .draw-color-input-hidden {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Panel de acciones al lateral derecho del canvas, en vertical */
.draw-actions-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 170px !important;
    box-sizing: border-box !important;
}

.draw-actions-panel>* {
    margin: 0 !important;
}

.draw-actions-panel button.undo-button {
    margin: 0 !important;
    display: flex !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
    align-self: flex-start !important;
}

.draw-actions-panel button.clear-button {
    margin: 0 !important;
    display: flex !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
    align-self: flex-end !important;
}

.draw-main-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* ============================================
   FIX: Draw Canvas - Idéntico a Status Canvas
   ============================================ */

canvas#draw_canvas {
    background: #181c21 !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.7) !important;
    image-rendering: pixelated !important;
    border-radius: 7px !important;
    border: 12px solid #181c21 !important;
    box-shadow:
        0 4px 32px rgba(0, 0, 0, 0.7),
        inset 0 0 0 2px #0a0c0e,
        inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
    max-width: 578px !important;
    width: 100% !important;
    height: auto !important;
    cursor: crosshair !important;
    display: block !important;
}

/* ============================================
   Movement Toggles - Beautiful Switches
   ============================================ */

/* Responsive adjustment for movement toggles */
@media (max-width: 768px){
    }

/* ============================================
   Notification Options - Beautiful Toggles
   ============================================ */

/* Responsive adjustment for notification toggles */
@media (max-width: 768px){
    }

/* ============================================
   Lifetime Options - Custom App Settings
   ============================================ */

/* Responsive adjustment for lifetime options */
@media (max-width: 768px){
    }

/* ============================================
   Save Flash Option - Beautiful Toggle
   ============================================ */

/* Responsive adjustment for save flash toggle */
@media (max-width: 768px){
    }

/* ============================================
   Use Fragments Toggle - Beautiful Switch
   ============================================ */

/* Responsive adjustment for use fragments toggle */
@media (max-width: 768px){
    }

/* Custom Apps Send Card - Diseño de dos columnas como Drawing */
/* Columna 1 - Custom App (azul suave) */
/* Columna 2 - Notificación (verde suave) */
/* Input en columna de Custom App (azul) */
/* Input en columna de Notificación (verde) */
@media (max-width: 768px){
    }

/* Responsive */
@media (max-width: 768px){
    .timer-input-group input {
        font-size: 20px;
        padding: 10px 6px;
    }
}

/* ============================================
   SPORTS SECTION STYLES
   ============================================ */

/* Sports main container (for standalone section) */
/* Sports selector */
.sport-btn.active {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
    border-color: #27ae60;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

/* Search section */
/* Search results */
/* Live matches section */
/* Match card */
.match-card.live {
    border-left-color: #e74c3c;
    background: linear-gradient(135deg, #fff 0%, #fee 100%);
}

.match-card.selected {
    border-left-color: #2ecc71;
    background: linear-gradient(135deg, #fff 0%, #e8f8f0 100%);
    box-shadow: 0 4px 16px rgba(46, 204, 113, 0.25);
}

.match-status.live {
    background: #e74c3c;
    animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live{

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Selected match section */
/* Badges genéricos usados en el modal ESPN */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-danger {
    background: #e74c3c;
    color: #fff;
    animation: pulse-live 2s ease-in-out infinite;
}

.badge-warning {
    background: #f39c12;
    color: #fff;
}

.badge-secondary {
    background: #95a5a6;
    color: #fff;
}

.badge-primary {
    background: #2c5aa0;
    color: #fff;
}

/* Resaltado para partidos en vivo en el acceso rápido ESPN */
.espn-live-highlight {
    border-color: #e74c3c !important;
    background: #fff5f5 !important;
}

/* Sports actions */
/* Auto update section */
/* Custom Header */
/* Advanced Configuration Modal */
@keyframes pulse-status{

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Info box */
/* Loading and error messages */
/* Responsive */
@media (max-width: 768px){
    }