.notification-ui a:after {
    display: none;
}

.notification-ui_icon {
    position: relative;
}

.notification-ui_icon .unread-notification {
    display: inline-block;
    height: 7px;
    width: 7px;
    border-radius: 7px;
    background-color: #66bb6a;
    position: absolute;
    top: 7px;
    left: 20px;
}

@media (min-width: 900px) {
    .notification-ui_icon .unread-notification {
        left: 20px;
    }
}

.notification-ui_dd {
    padding: 0;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
    box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
    border: 0;
    max-width: 400px;
}

@media (min-width: 900px) {
    .notification-ui_dd {
        min-width: 400px;
        position: absolute;
        left: -192px;
        top: 70px;
    }
}

@media (max-width: 899px) {
    .notification-ui_dd {
        min-width: 350px;
        position: absolute;
        left: -165px;
        top: 70px;
    }
}

.notification-ui_dd:after {
    content: "";
    position: absolute;
    top: -30px;
    left: calc(50%);
    border-top: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    border-left: 15px solid transparent;
}

.notification-ui_dd .notification-ui_dd-header {
    border-bottom: 1px solid #ddd;
    padding: 15px;
}

.notification-ui_dd .notification-ui_dd-header h3 {
    margin-bottom: 0;
}

.notification-ui_dd .notification-ui_dd-content {
    max-height: 500px;
    overflow: auto;
}

.notification-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: start;
    padding: 1.25rem 0.5rem;
    border-bottom: 1px solid #ddd;
}

.notification-list:hover {
    background-color: #edeff1;
}

.notification-list--unread {
    background-color: #edeff1;
}

.notification-list .notification-list_img img {
    height: 40px;
    width: 40px;
    border-radius: 50px;
    margin-right: 1.2rem;
}

.notification-list .notification-list_detail p {
    margin-bottom: 5px;
    line-height: 1.2;
}

.notification-list .notification-list_feature-img img {
    height: 48px;
    width: 48px;
    border-radius: 5px;
    margin-left: 20px;
}

.notification-btn {
    background-color: #fff;
    color: #555;
    text-decoration: none;
    padding: 5px;
    position: relative;
    display: inline-block;
    border-radius: 25px;
    font-size: larger;
    width: 45px;
    height: 35px;
    text-align: center;
    margin-right: 15px;
}

.notification-btn:hover {
    background: #f4f6f8;
}

.notification-btn .badge {
    position: absolute;
    top: -10px;
    right: -5px;
    padding: 3px 8px;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.middle-navbar .nav-link {
    color: #28323d;
}

.middle-navbar .nav-link:hover,
.middle-navbar .nav-link:active {
    color: var(--primary-color, #ea3223);
}

@media (min-width: 1920px) {
    .c-container {
        max-width: 1920px;
    }
}

.c-bdr-rds-50 {
    border-radius: 50px;
}

@keyframes skew-y-shakeing {
    0% {
        transform: skewY(-15deg);
    }
    5% {
        transform: skewY(15deg);
    }
    10% {
        transform: skewY(-15deg);
    }
    15% {
        transform: skewY(15deg);
    }
    20% {
        transform: skewY(0deg);
    }
    100% {
        transform: skewY(0deg);
    }
}
.notification-ui_icon-unread {
    animation: skew-y-shakeing 1s infinite;
}

.dropdown-avatar::after {
    content: unset;
}