.notification-wrapper {
    position: fixed;
    height: 350px; /* this is actually defined in the js*/
    width: 320px;
    right: 30px;
    z-index: 1029;
    background-color: #d9edf7;
}

.notification-wrapper .title-wrapper {
    height: 42px;
    background-color: #d9edf7;
    color: #31708f;
    text-align: center;
    transition: background-color 0.5s ease;
    border-bottom: solid 1px #31708f;
    cursor: pointer;
    width: 100%;
    border-radius: 0;
    padding: 0;
}

.notification-wrapper .title-wrapper:hover,
.notification-wrapper .title-wrapper:focus {
    background-color: #8dd8e7;
}

.notification-wrapper .notification-body {
    padding: 0.5em;
}

.notification-wrapper .notification-label {
    width: 10em;
    margin-bottom: 0;
    margin-top: 0.5em;
}

.notification-wrapper input {
    width: 80%;
    margin-bottom: 0.5em;
}

.notification-wrapper .email-terms {
    font-size: 0.9em;
}

.notification-wrapper .email-terms a {
    color: #2e6c9e;
}

.email-terms {
    padding-top: 0.5em;
}

@media screen and (max-width: 768px){
    .notification-wrapper{
        left: 0;
        right: 0;
        width: 100%;
    }
}