#notificationView {
    top: -20px;
    position: absolute;
    overflow: hidden;
    /*white-space: nowrap;*/
    display: flex;
    align-items: center;
    background-color: #555;
    color: white;
    /*border-radius: 10px;*/
    z-index: 1000;
    width: 100%;
}

#notificationView.closed {
    overflow: hidden;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -moz-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    /*-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);*/
    /*-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);*/
    /*-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);*/
    /*transition-timing-function: cubic-bezier(0, 1, 0.5, 1);*/
}

#notificationView.opened {
    min-height: 60px;
    border-bottom: 1px solid #777;
    padding-top: 20px;
    padding-bottom: 10px;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -moz-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    overflow: hidden;
}

#notificationView.opened:after {
    /*content: '\276D';*/
    content: '\2015';
    /*color: #555;*/
    position: absolute;
    bottom: -17px;
    left: 50%;
    font-size: 40px;
    transform: translate(-50%, 0%);
    /*transform: translate(-50%, 0%) rotate(-90deg);*/
}

#notificationView.closed > div {
    max-height: 0;
}

#notificationView .notificationImage {
    min-width: 40px;
    max-width: 40px;
    margin: 0 10px;
    float: left;

}

#notificationView.opened .notificationImage {
    height: 40px;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

#notificationView.opened .notificationContent {
    display: flex;
    flex-direction: column;
}

#notificationView.opened .notificationTitle {
    padding: 10px 10px 0;
    max-height: 20px;
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#notificationView.opened .notificationMessage {
    padding: 10px;
    max-height: 72px;
    font-size: 14px;
    overflow: hidden;
}