.notification {
    display: block;
    padding: 9.6px 12px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #eeeeee;
    background-color: #fff;
    color: #333333;
    text-decoration: none;
}

.media, .media-body {
    zoom: 1;
    overflow: hidden;
	margin top: 15px;
}

.media:first-child {
    margin-top: 0;
}

.media-left, .media-right, .media-body {
    display: table-cell;
    vertical-align: middle;
}

.media-right,.media>.pull-right {
    padding-left: 10px
}

.media-left, .media>.pull-left {
    padding-right: 10px;
}

.notification .media-body {
    padding-top: 5.6px;
}

.media-body {
    width: 10000px;
}

.media, .media-body {
    zoom: 1;
    overflow: hidden;
}

.notification-title {
    font-size: 15px;
    margin-bottom: 0;
}

b, strong {
    font-family: "Gibson-SemiBold","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
}

.notification-desc {
    margin-bottom: 0;
    font-size:0.8em;
}

.notification-meta {
    color: #777777;
}

small, .small {
    font-size: 85%;
}

.addressed {
    background-color: #eee;
}



* {
  --circDim: 15px;
  --circFont: 12px Arial, sans-serif;
  --circPadding: 15px;
  --circFloat: left;
}

* {
  --circDim-md: 40px;
  --circFont-md: 16px Arial, sans-serif;
}


.numberCircleDanger {
    border-radius: 50%;
    width: var(--circDim);
    height: var(--circDim);
    padding: var(--cirPadding);
    vertical-align: top;

    float: var(--circFloat);

    /*background: #fff;*/
    border: 2px solid #a94442;
    background-color: #a94442;
    color: #fff;
    text-align: center;

    font: var(--circFont);
}

.numberCircleSuccess {
    border-radius: 50%;
    width: var(--circDim);
    height: var(--circDim);
    padding: var(--cirPadding);
    vertical-align: top;

    float: var(--circFloat);

    /*background: #fff;*/
    border: 2px solid #3c763d;
    background-color: #3c763d;
    color: #fff;
    text-align: center;

    font: var(--circFont);
}

.numberCircleInfo {
    border-radius: 50%;
    width: var(--circDim);
    height: var(--circDim);
    padding: var(--cirPadding);
    vertical-align: top;

    float: var(--circFloat);

    /*background: #fff;*/
    border: 2px solid #245269;
    background-color: #245269;
    color: #fff;
    text-align: center;

    font: var(--circFont);
}

.numberCircleWarn {
    border-radius: 50%;
    width: var(--circDim);
    height: var(--circDim);
    padding: var(--cirPadding);

    float: var(--circFloat);
    vertical-align: top;

    /*background: #fff;*/
    border: 2px solid #8a6d3b;
    background-color: #8a6d3b;
    color: #fff;
    text-align: center;

    font: var(--circFont);
}


.numberCircleDanger-md {
    border-radius: 50%;
    width: var(--circDim-md);
    height: var(--circDim-md);
    padding: var(--cirPadding);
    vertical-align: top;

    float: var(--circFloat);

    /*background: #fff;*/
    border: 2px solid #a94442;
    background-color: #a94442;
    color: #fff;
    text-align: center;

    font: var(--circFont-md);
}

.numberCircleSuccess-md {
    border-radius: 50%;
    width: var(--circDim-md);
    height: var(--circDim-md);
    padding: var(--cirPadding);
    vertical-align: top;

    float: var(--circFloat);

    /*background: #fff;*/
    border: 2px solid #3c763d;
    background-color: #3c763d;
    color: #fff;
    text-align: center;

    font: var(--circFont-md);
}

.numberCircleInfo-md {
    border-radius: 50%;
    width: var(--circDim-md);
    height: var(--circDim-md);
    padding: var(--cirPadding);
    vertical-align: top;

    float: var(--circFloat);

    /*background: #fff;*/
    border: 2px solid #245269;
    background-color: #245269;
    color: #fff;
    text-align: center;

    font: var(--circFont-md);
}

.numberCircleWarn-md {
    border-radius: 50%;
    width: var(--circDim-md);
    height: var(--circDim-md);
    padding: var(--cirPadding);

    float: var(--circFloat);
    vertical-align: top;

    /*background: #fff;*/
    border: 2px solid #8a6d3b;
    background-color: #8a6d3b;
    color: #fff;
    text-align: center;

    font: var(--circFont-md);
}

.numberCircleRead-md {
    border-radius: 50%;
    width: var(--circDim-md);
    height: var(--circDim-md);
    padding: var(--cirPadding);

    float: var(--circFloat);
    vertical-align: top;

    background: #fff;
    border: 2px solid #000000;
    background-color: #eee;
    color: #000000;
    text-align: center;

    font: --circFont: 12px Arial, sans-serif;
}

.numberCircleWarn-md, .numberCircleDanger-md, .numberCircleSuccess-md, .numberCircleInfo-md , .numberCircleRead-md{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    cursor: pointer;
    margin:2px;
}



.numberCircleWarn, .numberCircleDanger, .numberCircleSuccess, .numberCircleInfo , .numberCircleRead{
    cursor: pointer;
    margin:0.5px;
}

.numberCircleDanger, .numberCircleDanger-md {
    background-color: #dc3545;
    border: 2px solid #dc3545;
}
.numberCircleWarn, .numberCircleWarn-md {
    background-color: #ffc107;
    border: 2px solid #ffc107;
}
.numberCircleInfo, .numberCircleInfo-md {
    background-color: #17a2b8;
    border: 1px solid #17a2b8;
}
.numberCircleSuccess, .numberCircleSuccess-md {
    background-color: #28a745;
    border: 2px solid #28a745;
}

.icon-danger{
    color: #dc3545;

}
.icon-warn{
    color: #ffc107;

}
.icon-info{
    border: 2px solid #17a2b8;
     border-radius: 50%;
}
.icon-success{
    color: #28a745;

}

.icon-info-subtle{
    color:#D3D3D3;
}



.notificationButton {

    background-image: url(/static/img/connection_base.png);
    background-position: center;
    margin:0px;
    padding:0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    display:inline-block;
    z-index:300;
    position:absolute;
    width:60px


}

.notificationButton_mod {

    /*background-image: url(/static/img/connection_base.png);*/
    background-position: center;
    margin:0px;
    padding:0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    display:inline-block;
    z-index:300;
    position:absolute;
    width:60px;
    transform: translateY(-40%);


}

.unlisted {
    text-decoration: line-through;
    color:grey;
    border: 2px solid grey;
}

.notification-filters {
    position:fixed;
    z-index:200;
    width:100%;
    padding:0px;
    margin:0px;
    width:350px;
}

.notification-filters_mod {
    position:fixed;
    z-index:200;
    width:100%;
    padding:0px;
    margin:0px;
    width:498px;
}

.no_padding {
    padding:0!important;
}

.notification-list {
    max-height:80vh;
    width:100%;
    overflow-y:scroll;
    position:absolute;
    top:60px
}

.mark-read:before {
  content: "Mark as Read";
}

.mark-unread:before {
  content: "Mark as Unread";
}

.statusBarStatus_mod
{
  height: 25px;
  position: relative;

}

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}