/* .nav .navbar-light .navbar-nav .nav-link {
    padding: 22px 10px;
} */
.pagination {
    gap: 5px;
}
.margin-20 {
    margin-left: -20px;
}
.whitespace-nowrap {
    white-space: nowrap !important;
}

.dashboard .side-nav {
    height: auto !important;
}

.user-Qualification > ul > li::before {
    background: #fffff7 !important;
}

/* video-modal */
.video-modal .modal-dialog {
    max-width: 800px;
    margin: auto;
}

.video-modal .modal-content {
    border-radius: 1rem;
}

.video-modal .modal-body {
    padding: 0;
}

.video-modal .embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}

.video-modal .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section-bg-default-color {
    background-color: #F5F7F9;
}

/* end video-modal */
.box-style i {
    /* width: 20px; */
    display: inline-block;
}
.tx-pr i {
    transition: transform 0.3s ease;
}
.tx-pr:hover i {
    transform: translateX(3px);
}


/* Notification Wrapper */
.notification-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #222;
}

/* Bell Container */
.notification-bell {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bell Icon (SVG Masking) */
.bell-icon {
    width: 32px;
    height: 32px;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9zm-6 13a2.99 2.99 0 002.815-2H9.185A3 3 0 0012 21z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9zm-6 13a2.99 2.99 0 002.815-2H9.185A3 3 0 0012 21z"/></svg>') no-repeat center;
}

/* Unread Red Dot */
.unread-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 9px;
    height: 9px;
    background: #ff3b3b;
    border-radius: 50%;
    display: none;
}

/* Show red dot if active */
.unread-dot.active {
    display: block;
}