.usercp_nav_myalerts {
    background: url(../../../images/usercp/transmit_blue.png) no-repeat left center;
}

.usercp_nav_myalerts_delete_all {
    background: url(../../../images/usercp/delete.png) no-repeat left center;
}

.usercp_nav_myalerts_delete_read {
    background: url(../../../images/usercp/bin.png) no-repeat left center;
}

.newAlerts > a {
    color: red !important;
}

ul.panel_links a.myalerts {
    background-position: 0 -180px;
}

.alert-row__no-alerts td {
    text-align: center;
}

.alert--read.alert {
    opacity: .5;
}

.alert.alert--read td.trow1 {
    background-color: #F5F5F5;
}

.alerts--new a {
	color: red !important;
	font-weight: normal;
}

/* =========================================================
   MYALERTS MODAL — FINAL RESPONSIVE POSITION / AVATAR FIX
   Loaded in alerts.css so it wins after the theme layers.
   ========================================================= */

/* Desktop: true viewport centering, same vertical position */
@media screen and (min-width:761px) {
    #myalerts_alerts_modal,
    #myalerts_alerts_modal.modal {
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        top:52px !important;
        transform:none !important;

        width:560px !important;
        max-width:calc(100vw - 40px) !important;
        max-height:78vh !important;

        margin-left:auto !important;
        margin-right:auto !important;
        margin-top:0 !important;
        margin-bottom:0 !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;
        z-index:999999 !important;
    }

    #myalerts_alerts_modal table.tborder {
        width:100% !important;
        table-layout:fixed !important;
    }

    #myalerts_alerts_modal td.alert__avatar {
        width:84px !important;
        min-width:84px !important;
        max-width:84px !important;
        padding:10px !important;
        text-align:center !important;
        vertical-align:middle !important;
        box-sizing:border-box !important;
    }

    #myalerts_alerts_modal td.alert__avatar a.avatar,
    #myalerts_alerts_modal td.alert__avatar img {
        display:block !important;
        width:64px !important;
        height:64px !important;
        min-width:64px !important;
        min-height:64px !important;
        max-width:64px !important;
        max-height:64px !important;
        margin:0 auto !important;
        object-fit:cover !important;
    }

    #myalerts_alerts_modal td.alert__time {
        width:96px !important;
        min-width:96px !important;
        max-width:96px !important;
        padding-left:8px !important;
        padding-right:8px !important;
        text-align:center !important;
        vertical-align:middle !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        box-sizing:border-box !important;
    }

    #myalerts_alerts_modal td.alert__content {
        width:auto !important;
        min-width:0 !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
    }
}

/* Mobile: keep the popup inside the viewport and preserve square avatars */
@media screen and (max-width:760px) {
    #myalerts_alerts_modal,
    #myalerts_alerts_modal.modal {
        position:fixed !important;
        left:10px !important;
        right:10px !important;
        top:65px !important;
        transform:none !important;

        width:auto !important;
        max-width:none !important;
        max-height:78vh !important;

        margin:0 !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        z-index:999999 !important;
    }

    #myalerts_alerts_modal table.tborder {
        width:100% !important;
        table-layout:fixed !important;
    }

    #myalerts_alerts_modal td.alert__avatar {
        width:64px !important;
        min-width:64px !important;
        max-width:64px !important;
        padding:8px 6px !important;
        text-align:center !important;
        vertical-align:middle !important;
        box-sizing:border-box !important;
    }

    #myalerts_alerts_modal td.alert__avatar a.avatar,
    #myalerts_alerts_modal td.alert__avatar img {
        display:block !important;
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
        min-height:48px !important;
        max-width:48px !important;
        max-height:48px !important;
        margin:0 auto !important;
        object-fit:cover !important;
    }

    #myalerts_alerts_modal td.alert__content {
        width:auto !important;
        min-width:0 !important;
        padding-left:6px !important;
        padding-right:6px !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
    }

    #myalerts_alerts_modal td.alert__time {
        width:78px !important;
        min-width:78px !important;
        max-width:78px !important;
        padding-left:4px !important;
        padding-right:4px !important;
        text-align:center !important;
        vertical-align:middle !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        box-sizing:border-box !important;
    }
}