#alarmcenter.compact {
    width: 20%;
}

#alarmcenter.compact .colType,
#alarmcenter.compact .colEnd,
#alarmcenter.compact .colStart,
#alarmcenter.compact .colName,
#alarmcenter.compact .colLocation {
    display: none;
}

#alarmcenter_alarms {
    margin: 10px;
    text-align: left;
    font-weight: bold;
    cursor: default;
}

#alarmcenter_alarms td,
#alarmcenter_alarms th {
    padding: 5px 10px;
    vertical-align: top;
}

#alarmcenter_alarms i.filtericon {
    font-size: 12pt;
    margin-left: 5px;
    position: absolute;
    cursor: pointer;
    opacity: 0.3;
}

#alarmcenter_alarms i.filtericon.active {
    opacity: 1;
}

#alarmcenter_alarms_filter {
    display: none;
    position: absolute;
    background: white;
    padding: 10px;
    width: 400px;
    top: 100px;
    border: 1px solid #1e85b5;
    z-index: 1;
    border-radius: 3px;
    box-shadow: 2px 2px 9px 0px #9a9a9a;
}

#alarmcenter_alarms_filter input[type=text] {
    width: 100%;
    border: 1px solid #a9a9a9;
    font-size: 16px;
    padding: 4px;
    border-radius: 3px;
}

#alarmcenter_alarms_filter select {
    width: 100%;
    font-size: 16px;
    padding: 4px;
    border-radius: 3px;
    margin-top: 10px;
}

#alarmcenter_alarms_filter input[type=button] {
    float: right;
    margin-top: 10px;
}

#alarmcenter_alarms_filter #btnResetFilter {
    position: relative;
    top: 8px;
    left: 4px;
    opacity: 0.8;
    font-size: 12px;
}

/* Grund: inactive ist erstmal normal (für quittierbare Alarme wollen wir NICHT automatisch dimmen) */
#alarmcenter tr.inactive {
    opacity: 1;
    font-weight: normal;
}

/* Nicht quittierbare Alarme: klassisch -> inactive immer gedimmt */
#alarmcenter tr.inactive:not(.ackable) {
    opacity: 0.4;
}

/* Quittierbare Alarme: nur inactive + quittiert gedimmt */
#alarmcenter tr.inactive.ackable.acknowledged {
    opacity: 0.4;
}

#alarmcenter_navbar_right_tools {
    float: right;
}

/* optional – Icon/Button vertikal schön mittig halten */
#alarmcenter_alarms td.colAck .btn-acknowledge,
#alarmcenter_alarms td.colAck i {
    vertical-align: middle;
}

#alarmcenter_alarms td.colAck .ack-label {
    margin-left: 6px;
}

#alarmcenter_alarms td.colAck .ack-ts {
    display: block;
    font-size: 11px;
    opacity: 0.7;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
}

#alarmcenter_alarms td.colAck .btn-acknowledge {
    min-width: 42px;
    /* ca. ~3x breiter als nur Icon */
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

/* Alarmübersicht: Ack-Spalte sauber zentriert + Button feste Breite */
#alarmcenter_alarms td.colAck {
    text-align: center;
}

    #alarmcenter_alarms td.colAck .btn-acknowledge {
        width: 160px;
        min-width: 160px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #alarmcenter_alarms td.colAck .ack-ts {
        width: 160px;
        margin: 2px auto 0 auto;
        text-align: center;
    }

/* überschreibt globale input[type="text"]-Regel */
#qhmi_alarm_details_dialog input[type="text"],
#qhmi_alarm_details_dialog textarea {
    border: 1px solid #bdbdbd !important;
    background: #f7f7f7 !important;
    color: #222 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* auch bei Klick / Fokus / Tastatur */
#qhmi_alarm_details_dialog input[type="text"]:focus,
#qhmi_alarm_details_dialog input[type="text"]:active,
#qhmi_alarm_details_dialog textarea:focus,
#qhmi_alarm_details_dialog textarea:active {
    border: 1px solid #bdbdbd !important;
    outline: none !important;
    box-shadow: none !important;
}

/* verhindert WebKit/Chrome Sonderfärbung bei readonly */
#qhmi_alarm_details_dialog input[readonly],
#qhmi_alarm_details_dialog textarea[readonly] {
    -webkit-text-fill-color: #222 !important;
    caret-color: transparent;
}

#alarmcenter_alarms th.colDetails,
#alarmcenter_alarms td.colDetails {
    width: 70px !important;
    white-space: nowrap;
    text-align: center;
    position: sticky;
    right: 0;
    background: #ffffff;
    z-index: 3;
}

#alarmcenter_alarms thead th.colDetails {
    z-index: 4;
}

#alarmcenter_alarms {
    width: 100% !important;
    /* mehr nicht */
}

#alarmcenter_alarms td.colAck .btn-acknowledge:disabled {
    opacity: 0.4;
    cursor: default;
}

/* DataTables: keine Fixbreiten erzwingen -> Browser verteilt automatisch */
#alarmcenter_alarms_wrapper .dataTables_scrollHeadInner table,
#alarmcenter_alarms_wrapper .dataTables_scrollBody table {
    width: 100% !important;
    table-layout: auto !important;
}

/* Alle Spalten außer Message: so schmal wie möglich (Inhalt bestimmt Breite) */
#alarmcenter_alarms th:first-child,
#alarmcenter_alarms td:first-child,
#alarmcenter_alarms th.colState,
#alarmcenter_alarms td.colState,
#alarmcenter_alarms th.colAck,
#alarmcenter_alarms td.colAck,
#alarmcenter_alarms th.colName,
#alarmcenter_alarms td.colName,
#alarmcenter_alarms th.colType,
#alarmcenter_alarms td.colType,
#alarmcenter_alarms th.colStart,
#alarmcenter_alarms td.colStart,
#alarmcenter_alarms th.colEnd,
#alarmcenter_alarms td.colEnd,
#alarmcenter_alarms th.colLocation,
#alarmcenter_alarms td.colLocation {
    width: 1%;
    white-space: nowrap;
}

/* Message bekommt die Restbreite */
#alarmcenter_alarms th.colMessage,
#alarmcenter_alarms td.colMessage {
    width: 100% !important;
    white-space: normal;
    /* wenn du 1 Zeile willst: nowrap */
}

.AlarmTable tr.active_alarm {
    font-weight: bold;
}

.alarmitem {
    border-bottom: 2px solid #19688c;
    padding: 10px;
}

.alarmitem>.alarmtype {
    font-weight: bold;
}

.alarmitem>.alarmmessage {
    padding: 5px;
}

#lblAlarmCount {
    display: inline;
}

.qhmi-alarm-details {
    font-family: arial, sans-serif;
    font-size: 13px;
    color: #222;
    padding: 6px 6px;
    /* weniger innen -> weniger “Leerraum unten” */
}

.btn-alarm-details i {
    font-size: 14pt;
    color: #1e85b5;
}

.btn-alarm-details:hover i {
    color: #0a5c82;
}

#alarmcenter_alarms th.colState {
    text-align: left;
    white-space: nowrap;
    width: 1%;
}

#alarmcenter_alarms td.colState {
    text-align: center;
    white-space: nowrap;
    width: 1%;
}

.alarm-state-badge {
    display: inline-block;
    min-width: 72px;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    background: transparent;
}

@media (max-width: 900px) {
    #alarmcenter_alarms thead {
        display: none;
    }

    #alarmcenter_alarms {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    #alarmcenter_alarms tbody tr {
        display: block;
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        overflow: hidden;
    }

        #alarmcenter_alarms tbody td {
            display: flex;
            align-items: flex-start;
            padding: 10px 12px;
            white-space: normal;
            min-width: 0;
            border: 0;
            text-align: left;
            justify-content: flex-start;
            width: 100%;
        }

            #alarmcenter_alarms tbody td span {
                font-size: inherit !important;
                font-weight: inherit !important;
            }

            #alarmcenter_alarms tbody td.colState span::before,
            #alarmcenter_alarms tbody td.colAck span::before {
                content: none;
                padding: 0;
            }

            #alarmcenter_alarms tbody td::before {
                content: attr(data-label);
                flex: 0 0 110px;
                font-size: 12px;
                opacity: 0.75;
                line-height: 1.2;
                padding-top: 1px;
                text-align: left;
            }

        #alarmcenter_alarms tbody td {
            word-break: break-word;
            overflow-wrap: anywhere;
        }

            #alarmcenter_alarms tbody td:first-child {
                display: none;
            }

            #alarmcenter_alarms tbody td.colState {
                padding-top: 14px;
                padding-bottom: 6px;
                align-items: center;
            }

            #alarmcenter_alarms tbody td.colAck {
                align-items: center;
            }

                #alarmcenter_alarms tbody td.colAck .ack-ts {
                    display: inline-block;
                    width: auto;
                    margin: 0 0 0 12px;
                    text-align: left;
                    white-space: nowrap;
                }
}