#notification-modal .notification {
    position: relative;
}

#notification-modal .modal-body {
    height: unset;
    overflow: hidden !important;
}

#notification-list {
    width: 40%;
    display: inline-block;
    height: 75vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #dedede;
    position: relative;
}

    #notification-list .notification-date {
        width: 100%;
        padding: 7px 12px;
        background-color: #dedede;
        font-weight: 700;
        font-size: 12px;
    }

    #notification-list .notification-group {
        width: 100%;
        padding: 7px 12px;
        border-bottom: 1px solid #dedede;
        transition: 0.25s ease-in-out;
        cursor: pointer;
        position: relative;
        display: inline-block;
        border-left: 0px solid var(--primary);
    }

        #notification-list .notification-group.unread {
            border-left: 5px solid var(--primary);
        }

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

        #notification-list .notification-group .left-icon {
            position: absolute;
            left: 18px;
            top: 0;
        }

        #notification-list .notification-group .content {
            padding-left: 64px;
        }

    #notification-list .pagination {
        display: none;
    }

    #notification-list .view-more-resp {
        display: block;
        margin: 15px auto;
    }

    #notification-list .noti-not-found {
        margin-top: 50px;
    }

#notification-detail {
    padding: 7px 12px;
    width: 59%;
    position: relative;
    display: inline-block;
    background-color: #fff;
    height: 75vh;
    overflow: auto;
    border: 1px solid #dedede;
    border-radius: 5px;
}

    #notification-detail .header {
        border-bottom: 1px solid #dedede;
        margin-bottom: 25px;
        position: relative;
    }

        #notification-detail .header h3 {
            margin-top: 12.5px;
        }

        #notification-detail .header p {
            font-size: 12px;
            font-weight: 600;
            font-style: italic;
        }

    #notification-detail .content {
        word-break: break-all;
    }

    #notification-detail #back-to-list-noti {
        display: none;
        background-color: transparent;
        box-shadow: none;
    }

#reload-noti-btn {
    background-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 49px;
    padding: 5px 15px;
    border: 1px solid #dedede;
    margin: 3px 38px;
    font-size: 14px;
    position: relative;
}

    #reload-noti-btn:hover {
        background-color: #dedede4f;
    }

    #reload-noti-btn.btn .mdi:before {
        margin: 0;
    }


@media (max-width: 767px) {
    #notification-list {
        width: 100%;
        display: block;
    }

    #notification-detail {
        width: 100%;
        display: none;
        opacity: 0;
    }

        #notification-detail.show-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 1;
        }

            #notification-detail.show-content #back-to-list-noti {
                display: inline-block;
            }
}