$break-small: 764px;
$break-medium: 991px;
$break-medium: 1200px;

.notification-header,.notification-wrapper {
    width: 350px;
}

.notification-header {
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    padding: 0.3em 1em;
    background-color: #eeeeee;
}

.notification-wrapper {
    height:8.4em;
    border-bottom: 1px solid #eeeeee;
    margin: -3px 0;
    padding: 0.5em;
    color: black;

    &:hover{
        background-color: rgba(2, 182, 163, .05);
    }
    // ToDo: Include media queries for thumbnail
    .thumbnail-wrapper {
        width: 7.4em;
        height: 7.4em;
        padding:0;
        cursor: pointer;
        text-align: center;
        img {
            max-width: 100%;
            max-height: 100%;
        }
        &::before {
                content: ' ';
                display: inline-block;
                vertical-align: middle; /* vertical alignment of the inline element */
                height: 100%;
            }
    }
    h1 {
        margin-top: 0.3em;
        margin-bottom: 0.15em;
        font-size: 1.8em;
    }
    .sub-header{
        margin-bottom: 1em;
    }
    .notification-action{
        color: $ascribe-color-green;
    }
}

.notification-menu {
    .dropdown-menu {
        padding: 0 !important;
        li a {
            padding-top: 0;
        }
        border-top: 0;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 70vh;
    }
}

.notification-amount {
    padding: 0.3em;
    font-size: 1.2em;

}

.ascribe-global-action {
    text-align: center;
    padding: 1em;
    color: black;
    border: 1px solid #cccccc;
    background-color: white;
    margin-top: 1px;
}