/* standard colors */
:root {
    --yellow: #fc0;
    --SCC-blue: #1d2a5e;
    --SCC-teal: #399;
}

/* main alert body */
.alert-container .alert-main {
    display: flex;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.4);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem
}

/* alert icon (!) */
.alert-container .alert-main .alert-icon {
    background-color: var(--yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5%
}
.alert-container.global .alert-main .alert-icon {
    background-color: var(--yellow);
}
.alert-container.division .alert-main .alert-icon {
    background-color: var(--SCC-blue);
}
.alert-container.system .alert-main .alert-icon {
    background-color: var(--SCC-teal);
}

/* alert message */
.alert-container .alert-main .alert-text {
    background-color: #fff;
    margin: 0;
    word-break: break-word;
    padding: 1rem;
    width: 95%;
    color: #1d2a5e
}

/* Links */
.alert-text > a {
    color: var(--SCC-blue);
    text-decoration: underline;
}
.alert-text > a:hover {
    color: var(--SCC-teal);
}

/* Responsiveness to screen size */
@media(max-width:991px) {
    .alert-container .alert-main .alert-text {
        width: 80%
    }
    .alert-container .alert-main .alert-icon {
        width: 20%
    }
}


green { color: forestgreen; }
red { color: red; }
black { color: black; }
teal { color: var(--SCC-teal); }
yellow { color: var(--yellow); }