.notif-popup{position: fixed;width: 400px;max-width: 100%;top: 0;left: 50%;transform: translateX(-50%);z-index: 9999999;background: #fff;border-radius: 0 0 5px 5px;padding: 20px 10px;box-shadow: 0 -2px 10px 0px #dcdcdc;display: none;align-items: center;flex-direction: column;}
.notif-popup .cont{display: flex;align-items: center;margin-bottom:30px;}
.notif-popup .cont .bell-notify{font-size: 30px;color: var(--secondary-color-active);}
.notif-popup .cont .text{flex-grow: 1;margin-left: 20px;}
.notif-popup .cont .text p{font-size: 1.3em;}
.notif-popup .action{width: 100%;display: flex;justify-content: space-evenly;}

#notif.notif-column{position: fixed;right:0;top: -100vh;width: 40%;min-width: 400px;max-width: 100%;height:100vh;z-index: 1000;background: #fff;box-shadow: #999 5px -20px 20px 0px;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.5s linear;transition: all 0.2s linear;}
#notif .btn-icon{background: transparent;border: none;cursor:pointer;min-width: 32px;min-height: 32px;max-width: 32px;max-height: 32px;text-align: center;color:#999999;}
#notif .btn-icon:hover,
#notif .btn-icon:not(:disabled):not(.disabled):active{border-radius: 5px;color:var(--primary-color-active);-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.5s linear;transition: all 0.1s linear;}
#notif .btn-icon i{line-height:32px;}
#notif .notif-header{padding: 10px 20px;display: flex;align-items: center;background: var(--secondary-color-active);height:52px;max-height:52px;}
#notif .notif-header .notif-title{flex-grow:1;font-size: 1.125rem;font-weight: 700;color: #fff;margin: 0;line-height: 30px;height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#notif .notif-header .btn-icon{color:#fff;font-size: 23px;-webkit-text-stroke: 1px var(--secondary-color-active);}
#notif .notif-drop{width:400px;max-width:100vw;}
#notif .notif-btn{font-size:1.5rem;position: relative;}
#notif .notif-btn .badge{font-size: 11px;right: 5px;position: absolute;top: 20px;height: fit-content;}
#notif .notif-filter{height:50px;display: flex;flex-direction: column;justify-content: center;padding:0 10px;}
#notif .notif-filter .notif-filter-header{display: flex;flex-direction: row;}
#notif .notif-filter .notif-filter-header .btn-notif-sort{margin-right: 10px;border: 1px solid #ebebeb;}
#notif .notif-filter .notif-filter-header .btn-group{flex-grow: 1;padding-left: 10px;border-left: 1px solid #ebebeb;}
#notif .notif-filter .btn{border-radius:0 !important;width: 25%;padding: 3px 0;}
#notif .notif-items-cont{height: calc(100% - 102px);max-height:100vh;overflow:auto;}
#notif .notif-item{cursor:pointer;margin: 0 0 1px;padding: 0 20px;}
#notif .notif-item.active{background: #ebebeb;}
#notif .notif-item:hover{background: var(--primary-color-bg);}
#notif .notif-item .notif-item-content{display: flex;padding: 10px 0;border-bottom:1px solid #ebebeb;}
#notif .notif-item .image{width: 40px;max-width: 40px;min-width: 40px;margin-right: 10px;display: flex;align-items: center;}
#notif .notif-item .image img{max-width:100%;max-height:100%;border-radius: 50%;width: 40px;height: 40px;}
#notif .notif-item p{margin-bottom:0;}
#notif .notif-item .notif-info{flex-grow:1;margin-bottom:3px;font-size: .9rem;color:#333333;}
#notif .notif-item .notif-info .notif-head .user{font-weight:700;}
#notif .notif-item .notif-info .notif-head .date{font-size: .9rem;}
#notif .notif-item .notif-info .notif-msg .project{font-size: .9rem;font-weight:700;}
#notif .notif-item .notif-info .notif-footer{margin-top: 5px;color: #707070;line-height: 16px;font-size: .9rem;}
#notif .notif-item .notif-info .msg .type{color:var(--secondary-color-active);}
#notif .notif-item .notif-action{width: 100px;margin-left: 10px;display: flex;flex-direction: row;align-items: center;justify-content: right;}
#notif .notif-item .notif-action .btn-icon{min-width: 25px;min-height: 25px;max-width: 25px;max-height: 5px;padding: 5px;margin: 0 1px;}
#notif .notif-item .notif-action .urgent{margin: 0 1px;color:#dc3545 !important;font-size:18px;}
#notif .notif-item.active .notif-action .notif-readed{color:var(--secondary-color-active);}
#notif .notif-item.important .notif-action .notif-important{color:#f5b225;}
#notif .notif-item .notif-action .btn-icon i{line-height: 16px;}
#notif .notif-empty{display: flex;flex-direction: column;align-items: center;height: 100%;justify-content: center;}
#notif .notif-empty i{font-size: 50px;margin-bottom: 10px;color:#999999;}
#notif .notif-empty span{font-size: 1.3rem;color:#999999;}
#notif .notif-loading{display:none;justify-content: center;padding: 20px 0;}
#notif .notif-loading span{text-align: center;font-size: 30px;color: var(--secondary-color-active);}

.notif-li .btn-icon{background: transparent;border: none;cursor:pointer;min-width: 32px;min-height: 32px;max-width: 32px;max-height: 32px;text-align: center;color:#999999;}
.notif-li .btn-icon:hover,
.notif-li .btn-icon:not(:disabled):not(.disabled):active{border-radius: 5px;color:var(--primary-color-active);-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;-o-transition: all 0.5s linear;transition: all 0.1s linear;}
.notif-li .btn-icon i{line-height:32px;}
.notif-li .notif-btn{cursor:pointer;font-size:1.5rem;position: relative;}
.notif-li .notif-btn .badge{font-size: 11px;right: 5px;position: absolute;top: 20px;height: fit-content;background-color: #ec536c;}
.notifurg-li .notif-btn i{color:#ec536c !important;animation-duration: 1200ms;animation-name: urgblink;animation-iteration-count: infinite;animation-direction: alternate;-webkit-animation:urgblink 1200ms infinite;}
@keyframes urgblink {0%,100% {transform: rotate(0deg);}20%,60% {transform: rotate(6deg);}40%,80% {transform: rotate(-6deg);}}
@-webkit-keyframes urgblink {0%,100% {transform: rotate(0deg);}20%,60% {transform: rotate(6deg);}40%,80% {transform: rotate(-6deg);}}
.notifurg-li .notif-btn .badge{background-color:#6c757d;}

@media only screen and (max-width: 768px) {
	#notif.notif-column{width:100%;box-shadow: none;}
}