.input-monitor-widget {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: white;
    display: grid;
    gap: 0.5rem;
    grid-template-rows: auto /* header */
    auto /* indicator */
    auto; /* status */
    overflow-y: auto;
}

/* --- Header --- */

.input-monitor-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.input-monitor-name {
    flex: 1;
    font-size: clamp(8px, 3vh, 36px);
    font-weight: 500;
    word-break: break-word;
}

/* --- Indicator zone --- */

.input-monitor-indicator-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-monitor-indicator {
    width: clamp(50px, 25%, 100px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(180,180,180,.8) 0%, rgba(120,120,120,.6) 60%, rgba(80,80,80,.4) 100% );
    box-shadow: 0 0 12px rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.2);
    --indicator-color: rgba(0, 229, 226, 0.95);
    --indicator-color-mid: rgba(0, 229, 226, 0.85);
    --indicator-color-dark: rgba(0, 229, 226, 0.6);
    --indicator-glow: rgba(0, 229, 226, 0.7);
}

.input-monitor-indicator.active {
    background: radial-gradient( circle, var(--indicator-color) 0%, var(--indicator-color-mid) 60%, var(--indicator-color-dark) 100% );
    box-shadow: 0 0 20px var(--indicator-glow);
}

.input-monitor-indicator.unavailable {
    opacity: 0.4;
    box-shadow: none;
}

/* --- Status --- */

.input-monitor-status-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(8px, 2vh, 24px);
    text-transform: uppercase;
}

.template-panel .widget-template.input-monitor {
    aspect-ratio: var(--template-aspect);
    padding: clamp(0.55rem, 1.6vw, 0.95rem);
}

    .template-panel .widget-template.input-monitor .template-content {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: stretch;
        overflow: hidden;
    }

        .template-panel .widget-template.input-monitor .template-content > * {
            width: 100%;
            height: 100%;
        }

    .template-panel .widget-template.input-monitor .input-monitor-indicator {
        /*        width: min(40%, 50%);*/
        width: clamp(50px, 25%, 100px);
    }

    .template-panel .widget-template.input-monitor .input-monitor-widget {
        padding: clamp(0.65rem, 1.8vw, 1rem);
        gap: clamp(0.45rem, 1.5vw, 0.8rem);
        overflow: hidden;
    }

        .template-panel .widget-template.input-monitor.existing-template .input-monitor-widget{
            overflow-y: auto;
        }

            .template-panel .widget-template.input-monitor.existing-template .input-monitor-widget .input-monitor-indicator {
                width: clamp(50px, 25%, 100px);
            }

        .template-panel .widget-template.input-monitor .input-monitor-name,
        .template-panel .widget-template.input-monitor .input-monitor-status-text {
            font-size: 1.25rem;
        }


@media (max-width: 699px) {
    .template-panel .widget-template.input-monitor .input-monitor-name,
    .template-panel .widget-template.input-monitor .input-monitor-status-text {
        font-size: 0.95rem;
    }
}

@media (min-width: 881px) and (max-width: 1150px) {
    .template-panel .widget-template.input-monitor .input-monitor-name,
    .template-panel .widget-template.input-monitor .input-monitor-status-text {
        font-size: 0.95rem;
    }
}

@media (min-width: 1151px) and (max-width: 1600px) {
    .template-panel .widget-template.input-monitor .input-monitor-name,
    .template-panel .widget-template.input-monitor .input-monitor-status-text {
        font-size: 0.95rem;
    }
}

@media (min-width: 2880px) {
    .template-panel .widget-template.input-monitor .input-monitor-name,
    .template-panel .widget-template.input-monitor .input-monitor-status-text {
        font-size: 2rem;
    }
}

@media (min-width: 1000px) and (max-height: 650px) {
    .input-monitor-indicator-wrapper {
        max-height: 42%;
    }
}

@media (width: 1024px) and (height: 600px) {
    .input-monitor-indicator-wrapper {
        max-height: 42%;
    }
}