:root {
    --color-online: #22c55e;
    --color-offline: #ef4444;
    --color-maintenance: #f59e0b;

    --color-info: #3b82f6;
}


.notifications-block {
    display: flex;
    flex-direction: column;
    width: 30dvw;
    min-width: 18rem;
    margin: auto;
}

.notification {
    background-color: #a99bb6a7;
    border-radius: 20px;
    padding: 0.5rem;
    border-left: solid 4px;
    margin: 0.8rem auto;
}

.notification-title {
    font-size: 1.8rem;
}

.notification-message {
    font-size: 1.4rem;
    font-weight: 200;
}

.notification-time {
    font-size: 1rem;
    font-weight: 100;
}

.notification-info {
    border-color: var(--color-info);
}

.notification-success {
    border-color: var(--color-online);
}

.notification-warning {
    border-color: var(--color-maintenance);
}

.notification-error {
    border-color: var(--color-offline);
}


/* Compoment status */

.status-info-block {
    width: 80dvw;
    margin: 2rem auto;
    font-size: 2rem;
}

.status-info-bar {
    position: relative;
    display: flex;
    width: 75dvw;
    height: 2rem;
    margin: 1.5rem auto;
    background: #D6D6D6;
    border-radius: 20px;
    overflow: hidden;
}


.status-segment {
    height: 100%;
}

.status-segment.online {
    background: var(--color-online);
}

.status-segment.offline {
    background: var(--color-offline);
}

.status-segment.maintenance {
    background: var(--color-maintenance);
}

.status-segment.degraded {
    background: var(--color-maintenance);
}