#alerts {
    --alert-success: #ecf3ec;  /* aka "all-clear" */
    --alert-success-border: #00a91c;
    --alert-warning: #faf3d1;   /* aka "critical" */
    --alert-warning-border: #ffbe2e;
    --alert-information: #e7f6f8;
    --alert-information-border: #00BDE3;
    --alert-error: #f4e3db; /* aka "system-down" */
    --alert-error-border: #d54309;
    --alert-emergency: #9C3D10;
    margin: 0 auto;
    max-width: 1440px;
}
#alerts h1, #alerts h2, #alerts h3, #alerts h4, #alerts h5 {
    font-family: Arial;
    color: #3c3c3c;
    /*font-size: 1.4rem;*/
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    /*line-height: 1;*/
    margin: 0;
}
#alerts .alert-type-emergency h2 {
    color: white;
}

#alerts .alert-type-emergency p {
    font-family: Arial;
    color: white;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}
    #alerts p, #alerts p a {
        margin: 0;
        font-family: Arial;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }
.alert {
    padding: 8px;
    position: relative;
}
.alert-container {
    padding-left: 3rem;
    position: relative;
}
.alert-container::before {
    font-family: "Font Awesome 6 Pro";
    font-size: 36px;
    font-weight: 900;
    left: 0;
    min-height: 36px;
    position: absolute;
}
.alert-type-all-clear {
    background-color: var(--alert-success);
    border-left: 8px solid var(--alert-success-border);
}
.alert-type-all-clear .alert-container::before {
    content: "\f058";
/*    color: var(--alert-all-clear);*/
}

.alert-type-critical {
    background-color: var(--alert-warning);
    border-left: 8px solid var(--alert-warning-border);
}
.alert-type-critical .alert-container::before {
    content: "\f071";
/*    color:  var(--alert-critical);*/
}
.alert-type-information {
    background-color: var(--alert-information);
    border-left: 8px solid var(--alert-information-border);
}
.alert-type-information .alert-container::before {
    content: "\f05a";
/*    color: var(--alert-information);*/
}
.alert-type-system-down {
    background-color: var(--alert-error);
    border-left: 8px solid var(--alert-error-border);
}
.alert-type-system-down .alert-container::before {
    content: "\f06a";
/*    color: var(--alert-system-down);*/
}
.alert-type-emergency {
    background-color: var(--alert-emergency);
    border-left: 8px solid var(--alert-emergency);
    color: white;
}
    .alert-type-emergency .alert-container::before {
        content: "\f06a";
    }
.alert-controls {
    position: absolute;
    right: 0;
    top: 0;
}
.alert-controls i {
    cursor: pointer;
    margin-left: 0.5rem;
}
.alert-container.collapsed  {
    height: 40px;
    overflow: hidden;
}
.alert-container.expanded {
    height: auto;
    overflow: visible;
}