.notification-ribbon {
    color: #fff;
    max-width: 1440px;
    margin: auto;
    position: relative;
}

.notification-ribbon span {
    display: block;
    text-align: center;
    padding: 16px 0;
    width: 100%;
}
.notification-ribbon p {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-family: 'Effra-Regular';
    padding: 0 30px 16px;
    margin: 0;
}

.notification-ribbon p a {
    color: #fff;
    text-decoration: underline;
}

/* hover & focus styles */
.notification-ribbon p a:hover {
    color: #303030;
}

.notification-ribbon p a:focus {
    outline: 1px solid !important;
    padding: 1px 2px;
}

.course-header {
    color: #fff;
    margin-top: 0 !important;
}

.notification-ribbon.green-notification {
    background-color: #6F7D14;
}

.notification-ribbon.green-notification p a:hover {
    color: #000;
}

.notification-ribbon.gray-notification {
    background-color: #303030;
}

.notification-ribbon.gray-notification p a:hover {
    color: #CECECE;
}

.notification-ribbon.gray-notification p a:focus {
    background-color: #fff;
    color: #303030;
}

.notification-ribbon .notification-tick::before {
    content: "\f058";
    font-family: "Font Awesome\ 5 Free";
    font-size: 18px;
    position: absolute;
    left: 50%;
    top: 24px;
}

.notification-ribbon .notification-exclamation::before {
    content: "\f05a";
    font-family: "fontawesome";
    font-size: 18px;
    position: absolute;
    left: 50%;
    top: 16px;
}