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

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

.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: 0;
    padding: 0.5em;
    color: black;

    // 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;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sub-header{
        margin-bottom: 0.6em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .notification-action{
        color: $ascribe-dark-blue;
    }
}

.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;
}

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