/* Common, default styles for the notification box */
#notificationTest {
   position: fixed;
   	top: 60px;
	right: 30px;
    z-index: 20000;
}


.ns-box {
	position: relative;
    margin-top: 10px;
	background: rgba(42,45,50,0.85);
	padding: 22px;
	line-height: 1.4;
	pointer-events: none;
	color: rgba(250,251,255,0.95);
    text-shadow: 0.1px 0.1px 10px #000000;
    box-shadow: 5px 5px 15px #adadad;
    width:400px;
    max-width:400px;
}


.titleAlert {
    display:inline;
    font-weight:600;
    font-size:16px;
    padding: 0 0 5px 5px;
}

.contentAlert {
    font-weight:400;
    font-size:14px;
    padding: 5px 0 0 0;
}

.ns-box.ns-show {
	pointer-events: auto;
}

.ns-box a {
	color: inherit;
	opacity: 0.7;
	font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
	opacity: 1;
}

.ns-box.ns-show,
.ns-box.ns-visible {
	pointer-events: auto;
}

.ns-close {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ns-close:hover, 
.ns-close:focus {
	outline: none;
}

.ns-close::before,
.ns-close::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 60%;
	top: 50%;
	left: 50%;
	background: #fff;
}

.ns-close:hover::before,
.ns-close:hover::after {
	background: #6e6e6e;
}

.ns-close::before {
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}

.ns-close::after {
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}

/*Syles TYPES Notifications*/

.ns-type-success {
    background-color: #73d583;

}

.ns-type-info {
    background-color: #88d3f1;
}

.ns-type-error {
    background-color: #ec7882;
}

.ns-type-warning {
    background-color: #fcd965;
}

/*OLD STYLE*/
.alert-success {
    background-color: #DBF6D3;
    border-color: #AED4A5;
    color: #569745;
}
.alert-info {
    background-color: #D9EDF7;
    border-color: #98cce6;
    color: #3A87AD;
}
.alert-warning {
    background-color: #FCF8E3;
    border-color: #F1DAAB;
    color: #C09853;
}
.alert-danger {
    background-color: #F2DEDE;
    border-color: #e0b1b8;
    color: #B94A48;
}



/*NOTIFICACIONES*/
#notifications-menu.dropdown-menu {
    padding: 0px 0;
    overflow-y: auto;
    max-height:90vh;
}

.notificationBox > .dropdown-menu > li > a:hover, .notificationBox > .dropdown-menu > li > a:focus, .notificationBox > .dropdown-submenu:hover > a, .notificationBox > .dropdown-menu li > a:hover {
    background-color: #f7f4f4 !important;
}

        .notificationBox > a:hover,
        .notificationBox > a:focus,
        .notificationBox:hover {
            background-color: #ccc !important;
            background-image: none;
            color: #FFF;
        }


.notificationBox .imgNotification {
    border: none;
    float: left;
    margin-right: 15px;
    background-color: bisque;
    border-radius: 100px;
    padding: 10px;
}

.notificationBox img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}



        .notificationBox a {
            width: 150px;
            height: 50px;
        }

            .notificationBox a .Title {
                font-size: 16px;
                color: rgba(212, 19, 13, 1);
                font-weight: 500;
                min-width: 250px;
                max-width: 250px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .notificationBox a .Body {
                font-size: 13px;
                color: #000000;
                font-weight: normal;
                min-width: 250px;
                max-width: 250px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                white-space: normal;
            }

        .notificationBox a .Foot {
            font-size: 10px;
            color: #808080;
        }

        .contBtn {
            text-align: -webkit-center;
            overflow: hidden;
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10%;
            background-color: #EA4E2F;
            color: #fff;
            margin-left: auto;
            margin-right: auto;
        }

        /*NOTIFICACIONES*/

        .notification-container > .notification-container {
            position: relative;
            width: 16px;
            height: 16px;
            top: 15px;
            left: 15px;
        }

        .notification-container > i {
            color: #fff;
        }

        .notification-container > .notification-counter {
            position: absolute;
            top: 5px;
            right: 11px;
            background-color: rgba(212, 19, 13, 1);
            color: #fff;
            border-radius: 3px;
            padding: 1px 3px;
            font-size: 12px;
        }

        .notification-container > .fa-rcont {
            position: absolute;
            top: 5px;
            right: 11px;
            color: #fff;
            border-radius: 3px;
            padding: 1px 3px;
            font-size: 12px;
        }


        /*// For demo purposes only*/
        .notification-container > ul {
            background: #000;
            width: 100%;
            height: 50px;
        }

        .notification-container > ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
        }


        /* CSS used here will be applied after bootstrap.css */

        .notification-item {
            /*margin: 5px;
            border-radius: 4px;*/
             min-height: 70px;

        }

.notification-not-reading {
    background-color: #dedede;
}