ul.habura-notifications {
    display: grid;
    padding: unset;
}
li.notification-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 10px;
    border-bottom: 1px solid #ccc;
}
li.notification-item a {
    display: flex;
    align-items: center;
    gap: 10px;
}
li.notification-item:last-child a {
    border: unset;
}
.related-user-img img, .related-user-img picture {
    width: 45px;
    border-radius: 100%;
    display: block;
    height: 45px;
    object-fit: cover;
}
li.notification-item a:first-child {
    text-decoration: none;
    font-size: 16px;
    width: 100%;
}
/* li.notification-item.is-read {
    opacity: .5;
} */
a.delete-notification, a.mark-as-read {
    display: none !important;
}
li.notification-item.unread {
    background-color: #f0f1ff;
}
.notification-text {
    font-weight: normal;
}
li.notification-item.my_post_running {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 10px;
    border-bottom: 1px solid #ccc;
}
li.notification-item.new_post_running a:first-child:before {
    content: "";
    background-image: url(../imgs/like.svg);
    width: 40px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.my_post_running:before {
    content: "";
    background-image: url(../imgs/send-post.svg);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.follow a:first-child:before {
    content: "";
    background-image: url(../imgs/follow.svg);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.running_post a:first-child:before {
    content: "";
    background-image: url(../imgs/send-post.svg);
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.publish_post a:first-child:before{
    content: "";
    background-image: url(../imgs/pub-post.svg);
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.new_post a:first-child:before{
    content: "";
    background-image: url(../imgs/follow-content.svg);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.draft_post a:first-child:before{
    content: "";
    background-image: url(../imgs/pub-post.svg);
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.draft_post a:first-child:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    background-color: #e30511;
    rotate: -40deg;
    top: 25px;
    right: 0px;
}
li.notification-item.comment_on_post a:first-child:before{
    content: "";
    background-image: url(../imgs/comment.svg);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.comment_on_comment a:first-child:before{
    content: "";
    background-image: url(../imgs/comment-comment.svg);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
li.notification-item.new_user_reg a:first-child:before{
    content: "";
    background-image: url(../imgs/habura.png);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
span.n-date {
    font-size: 12px;
    display: block;
    line-height: 1;
    font-weight: normal;
}
/* li.notification-item button.habura-follow-button.unfollow-button {
    display: none;
} */
div#notifications-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 25px;
}
div#notifications-tabs div {
    cursor: pointer;
    position: relative;
    padding: 10px;
    font-size: 16px;
    padding-inline: 25px;
    opacity: .4;
    font-weight: 600;
    color: #9b9b9b;
}
div#notifications-tabs div#n-tab {
    opacity: 0.9;
}
div#notifications-tabs .nt-active {
    -webkit-box-shadow: 0px 3px 0px #29326e;
    -moz-box-shadow: 0px 3px 0px #29326e;
    box-shadow: 0px 3px 0px #29326e;
    color: #29326e;
    opacity: 1;
    pointer-events: none;
}
div#notifications-tabs div#ns-tab {
    background-image: url(../imgs/gear.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 38px;
    font-size: 0;
    background-size: 25px;
    background-position: center;
}
.notifications-settings-tab, .notifications-tab {
    display: none;
}
.notifications-settings-tab.ntab-active, .notifications-tab.ntab-active {
    display: block;
}
span.n-follow {
    margin-right: auto;
}
/* li.publish_post .notification-text, li.new_post_running .notification-text, li.draft_post .notification-text  { */
.nt-post-title {
    max-width: 19.8ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    display: inline-block;
    position: relative;
    top: 7px;
}
ul.habura-notifications-settings {
    position: relative;
}
.nt-acf-response {
    position: absolute;
}
ul.habura-notifications-settings .acf-form-fields {
    display: grid;
    gap: 10px;
}
ul.habura-notifications-settings div.acf-field {
    display: grid;
    gap: 20px;
    align-items: center;
    grid-template-columns: 100px 1fr;
}
ul.habura-notifications-settings .acf-field .acf-label, ul.habura-notifications-settings .acf-field .acf-label label {
    margin: unset;
}
/* ul.habura-notifications-settings span.acf-switch-on, ul.habura-notifications-settings .acf-switch span {
    font-size: 0;
} */

.page-id-145157 a.popup-div {
    display: none;
}
a.account-notifications span#new-notif {
    top: -3px;
    right: 4px;
    box-shadow: unset;
    width: 7px;
    height: 7px;
    background-color: #28306e;
}

/* Show only 1 running post Start */
li.notification-item.new_post_running:first-child {
    display: flex;
}
li.notification-item.new_post_running {
    display: none;
}
/* Show only 1 running post End */

.follow-btn-wrapper {
    position: relative;
    display: inline-block;
}

.modal-content button.notification-button {
    display: none;
}
button.notification-button {
    display: flex;
    border: unset;
    position: absolute;
    top: 3px;
    padding: 5px;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    left: -10px;
    background-color: rgb(255 255 255 / 60%);
    border-radius: 100%;
}
button.notification-button:hover {
    background-color: #fff;
}
button.notification-button:focus {
    outline: unset;
    background-color: #fff;
}
.follow-btn-wrapper.follow-button button.notification-button {
    display: none;
}
.single-post button.notification-button {
    top: -10px;
    left: -10px;
}

.tw-mb-6.post-meta .follow-btn-wrapper.unfollow-button {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tw-mb-6.post-meta button.notification-button.signed {
    position: relative;
    top: 0;
    left: 0;
    width: 35px;
}
.tw-mb-6.post-meta button.habura-follow-button.unfollow-button {
    order: 2;
}
.tw-mb-6.post-meta button.notification-button.signed svg {
    height: 25px;
    width: 25px;
}

.habura-notifications-settings > a {
    margin-top: 25px;
    display: block;
}

@media screen and (max-width: 768px) {
    li.notification-item a {
        align-items: start;
        gap: 5px;
    }
    div#habura-notifications-c {
        margin-inline: -10px;
    }
    li.notification-item a:before, .related-user-img img {
        width: 30px !important;
        height: 30px !important;
    }
    li.notification-item.new_post_running a:before {
        width: 35px !important;
        height: 32px !important;
    }
    li.notification-item.draft_post:after {
        top: unset;
        width: 55px;
    }
    div#notifications-tabs {
        padding-inline: 15px;
    }
    .notification-text {
        line-height: 1.2;
        padding-right: 5px;
    }

    a.account-notifications-mobile span#new-notif {
        top: 6px;
        right: 20px;
        color: #fff;
        box-shadow: unset;
        width: 7px;
        height: 7px;
        background-color: #28306e;
    }

    li.notification-item .notification-text {
        width: 90%;
    }
    li.notification-item.follow .notification-text {
        width: 70%;
    }
    .nt-post-title {
        top: 5px;
    }

    ul.habura-notifications-settings {
        padding-inline: 30px;
    }
    ul.habura-notifications-settings div.acf-field {
        grid-template-columns: 1fr 1fr;
        justify-content: flex-start;
    }
    ul.habura-notifications-settings .acf-field .acf-input {
        margin-right: auto;
    }
    ul.habura-notifications li {
        margin-inline: -15px;
    }

    .related-user-img {
        width: 30px;
    }
    .related-user-img img, .related-user-img picture {
        width: 30px;
        height: 30px;
    }
    img.avatar.avatar-96.photo.avatar-default.avatar {
        object-fit: contain;
        max-width: unset;
    }
}