body,html{
    /* overflow-x: hidden; */
    overflow-x: clip;
}

/* Site-wide responsive-image safety net: only ever shrinks an image
 * whose intrinsic size exceeds its container (never grows or distorts a
 * correctly-sized one), so any more specific existing rule — fixed-size
 * icons/avatars, .service-image img { width/height:100%; object-fit } on
 * the events/services cards, etc. — still wins on specificity and is
 * unaffected. A single global rule here instead of auditing/patching
 * every <img> individually across the codebase. */
img {
    max-width: 100%;
    height: auto;
}
a.story-entry video {
    height: 196px;
    width: -webkit-fill-available;
    background-color: #000;
}

.story-entry-details {
    background-color: white;
    padding: 5px 10px !important;
}

.story-entry-details.active,
.story-entry-details:hover {
    background-color: aliceblue;
    padding: 5px 10px !important;
}

.d-hidden {
    display: none;
}

.input-prev-text.bg-5a2ff9 {
    background-color: #5a2ff9;
    color: #fff;
}

.input-prev-text.bg-ff7856 {
    background-color: #ff7856;
    color: #fff;
}

.input-prev-text.bg-f92fd7 {
    background-color: #f92fd7;
    color: #fff;
}

.input-prev-text.bg-2f94f9 {
    background-color: #2f94f9;
    color: #fff;
}

.input-prev-text.bg-000000 {
    background-color: #000000;
    color: #fff;
}

.input-prev-text.bg-f00 {
    background-color: #f00;
    color: #fff;
}

.stories-view {
    height: 196px;
    padding-top: 20px;
    text-align: center;
    border-radius: 5px;
}

.carousel-inner .stories-view{
    height: 300px;
}

.owl-stage-outer .owl-item {
    width: 100%;
}

.hidden-file-input {
    position: absolute;
    z-index: -10;
    width: 0px;
    height: 0px;
}

.avatar-info {
    min-width: 90px;
}


#timeline-posts .like-color {
    color: #5a2ff9;
    font-weight: 800;
    fill: #5a2ff9;
}

.sad-color {
    min-width: 100px;
    color: #ffd05d;
    font-weight: 800;
}

.love-color {
    min-width: 100px;
    color: #e02a47;
    font-weight: 800;
}

.angry-color {
    min-width: 100px;
    color: #ef6421;
    font-weight: 800;
}

.fun-color {
    min-width: 100px;
    color: #ffd05d;
    font-weight: 800;
}

.visibility-hidden {
    visibility: hidden;
}

.cursor-pointer {
    cursor: pointer;
}



/*Start loading bar*/
.progress {
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: #fff;
    border-radius: 2px;
    background-clip: padding-box;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden;
}

.progress .indeterminate {
    background-color: #d7d7d7;
}

.progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.progress .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.05s;
    animation-delay: 1.05s;
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

/*End loading bar*/

.tag-peoples {
    height: 250px;
    overflow-y: auto;
}

.text-black {
    color: #000 !important;
}

.max-height-200 {
    max-height: 200px;
    overflow-y: auto;
}



/*Custom Modal*/
/*Scroll bar design*/
/* width */
.custom-modal::-webkit-scrollbar {
    width: 0px;
}

/* Track */
.custom-modal::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.custom-modal::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

/* Handle on hover */
.custom-modal::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*Scroll bar design*/
.custom-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    z-index: 10000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    overflow-x: hidden;
    border-radius: 5px;
    background-color: #fff;
}

.custom-modal-sm {
    max-width: 450px;
}

.custom-modal-md {
    max-width: 600px;
}

.custom-modal-lg {
    max-width: 700px;
}

.custom-modal-xl {
    max-width: 1200px;
}

.custom-modal-xxl {
    max-width: 1500px;
    height: 100%;
}

.alert-modal {
    max-width: 400px !important;
}

.custom-modal .custom-modal-title {
    padding: 5px 10px;
    background-color: #fff;
    margin: 0px;
    color: #000;
    font-family: 'segoe-ui-bold';
    padding: 25px 24px;
}

.custom-modal-show {
    visibility: visible;
}

.custom-modal-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    background: #00000078;
    -webkit-transition: all 0s;
    transition: all 0s;
}

.custom-modal-show~.custom-modal-overlay {
    opacity: 1;
    visibility: visible;
}

/* Content styles */
.custom-modal-content {
    color: #333;
    background: #fff;
    padding: 0px 5px;
    height: auto;
}

.custom-modal-content .custom-modal-closed {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #00233300 !important;
    color: #000;
    border: 0;
    font-size: 30px;
    padding: 0px;
    margin: 0px;
    z-index: 11000;
    height: 34px;
    width: 34px;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
}

.custom-modal-body-loader {
    text-align: center;
    padding: 100px 50px;
}

.custom-modal-body {
    min-height: 300px;
}

/* Effect 1: Fade in and scale up */
.custom-modal-effect-1 .custom-modal-content {
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0s;
    transition: all 0s;
}

.custom-modal-show.custom-modal-effect-1 .custom-modal-content {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    .custom-modal {
        max-height: 100% !important;
        overflow-y: auto;
        height: 100%;
    }

    .custom-modal-content .custom-modal-closed {
        color: #585858;
    }

    .custom-modal-content div div div {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

@media only screen and (min-width: 768px) {
    .custom-modal {
        max-height: 100% !important;
        overflow-y: auto;
    }
}

/*End custom modal*/



.location-post {
    display: block;
    max-width: 420px;
    background-color: #f1f1f1;
    border-radius: 8px;
    padding: 15px 15px 10px 15px;
}

.location-post img {
    margin-top: -8px;
}

.location-post hr {
    background-color: #c2c2c2;
    margin: 5px 2px;
}

.live-image {
    max-width: 350px;
}

.live-icon {
    position: absolute;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    border-radius: 5px;
    background-color: #FFFFFF;
	font-size: 16px;
	padding: 0;
	height: 36px;
	width: 82px;
	line-height: 36px;
	border: 1px solid #F2326F45;
	color: #EE447A;
	margin-top: 36px;
}

.live-icon .spinner-grow {
    max-width: 15px;
    height: 15px;
}

.live-watch-now {
    border-radius: 8px;
    padding: 10px 40px;
    background-color: transparent;
    border: 1px solid #5431EF;
    color: #0B071E !important;
    font-weight: 500;
    transition: .5s;
    display: inline-block;
}

.live-watch-now i {
    color: #5431EF;
    transition: .5s;
}
.live-watch-now:hover {
	background-color: #5431EF;
	color: #fff !important;
}
.live-watch-now:hover i{
    color: #fff;
}
.custom-progress-bar {
    position: fixed;
    background-color: #ded5fe;
    z-index: 999999;
    width: 100%;
    height: 3px;
    display: none;
}
.main .entry-meta {
	padding-top: 14px !important;
	padding-bottom: 0 !important;
	border: none !important;
}
.mt-20{
    margin-top: 20px;
}

.post-controls ul{
	padding: 5px 0;
}
.post-controls ul li {
	margin: 0 5px;
}
.post-controls ul li a{
	border-radius: 5px;
	font-size: 12px !important;
	padding: 5px 15px !important;
}

.dropdown-menu .dropdown-item i, .dropdown-menu .dropdown-item img {
	height: 12px;
	width: 12px;
}
.meta-time {
	font-size: 12px;
}
.single-entry .entry-inner .entry-header .h3 a, .single-entry .entry-inner .entry-header h3 a {
	font-size: 14px !important;
}

.custom-progress-bar .custom-progress {
    width: 0%;
    height: 100%;
    background-color: #5a2ff9;
    border-radius: 50px;
    box-shadow: 0px 0px 2px 0px #000;
}

input[type="radio"] {
    width: auto !important;
}

.text-danger {
    color: #ff0063 !important;
}

.form-validation-error-label {
    color: #ff0063 !important;
}

#findbox {
    background: #eee;
    border-radius: .125em;
    border: 2px solid #1978cf;
    box-shadow: 0 0 8px #999;
    margin-bottom: 10px;
    padding: 2px 0;
    width: 600px;
    max-width: calc(100vw - 40px);
    height: 26px;
}

.search-tooltip {
    width: 200px;
}

.leaflet-control-search .search-cancel {
    position: static;
    float: left;
    margin-left: -22px;
}

.text-8px {
    font-size: 8px !important;
}

.z-index-2000 {
    z-index: 2000;
}

.height-40px {
    height: 40px !important;
}

.top-30px {
    top: 30px !important;
}

.btn-success {
    color: white;
}

.video-shorts .plyr__controls {
    display: none;
}

.shorts-fixed-hight {
    height: 678px !important;
}

.shorts-height {
    height: 650px;
    background: black;
}

.shorts-height>div {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    max-height: 100%;
}

.shorts-icon-size {
    font-size: 25px;
}

/* .video-share > .entry-react > i{
    font-size: 20px;
} */




.img-radisu {
    border-radius: 5px;
}

.user-round {
    border-radius: 50%;
}

.displaynone {
    display: none;
}

.displayblockcss {
    display: block !important;
}

.invite-wrap {
    height: 350px !important;
}

.tags-selected-custom {
    background-color: #5a2ff9;
    color: #fff;
    border: 2px solid #5a2ff9;
}

select.form-control {
    -webkit-appearance: menulist;
}

.scrolly_comment {
    overflow-y: auto;
    height: 200px;
}

.custom-shorts-heading {
    position: absolute;
    bottom: 5px;
    left: 10px;
}

.shotrs-heading {
    padding-bottom: 10px;
    color: white !important;
}

.custom-text-shadow {
    text-shadow: 2px 3px 10px #3132344d !important;
}

.remove-icon-message {
    margin-right: 20px;
    margin-top: auto;
}

.bg-my-black {
    background: #eff7f4;
}


.image-uploader_custom_css {
    margin-right: 65px;
    margin-left: 5px;
    margin-top: 10px;
}
.p-10px{
    padding: 10px !important;
}
.only_for_share_page {
    padding: 15px 15px;
}

.only_for_share_page>i {
    font-size: 20px !important;
}


.invite_button_css {
    /* position: absolute; */
    right: 18px;
}


.active-own-button {
    background: #e2f1ff !important;
}

.custom_unfrind_button {
    float: left !important;
    width: 100% !important;
}

.video_details_height {
    height: 350px;
}

.video_details_height2 {
    height: 100px;
}

.single_video_details_height {
    height: 260px;
}

.shorts_custom_height {
    height: 635px;
}

.saved_video_custom_height {
    height: 225px;
}

.save_video_p_min_height {
    min-height: 50px;
}

.user_info_custom_height {
    height: 100%;
}

.user_image_proifle_height {
    height: 40px;
}

.height-20-css {
    height: 20px;
}

.height-70-css {
    height: 70px;
}

.custome-height-50 {
    height: 50px;
}



.text-quote iframe .entry-content .pt-5{
	padding-top: 0 !important;
}

.text-quote iframe .entry-content .pt-5 .mt-3{
	margin-top: 0 !important;
}






.custom_iframe_height {
    height: 300px;
    pointer-events: none;
}

.height-200-css {
    height: 200px;
}

.height-15-css {
    height: 15px;
}

.height-100-css {
    height: 100px;
}

.react_custome_css {
    height: 20px;
    width: 20px;
}

.quote_image_box_image {
    max-height: 300px;
}


.logo_height_width {
    width: 100%;
    max-width: 155px;
    margin-top: 4px;
}

@media only screen and (max-width: 450px) {
    /* Real root cause: an unrelated fundraiser-addon stylesheet
     * (fundraiser/css/custom_responsive.css, loaded after own.css in
     * frontend/index.blade.php's <head>) has its own unscoped
     * `.logo_height_width{display:none}` at <=450px — meant for that
     * addon's own markup, but it collides with this same class name on
     * the main site logo and wins the cascade, dropping the brand mark
     * from the header entirely on every page below 450px. The extra
     * `.logo-branding .navbar-brand` ancestor chain here raises specificity
     * enough to win over that plain single-class rule (for display) *and*
     * over `.header .navbar-brand img{max-width:115px}` (style.css, also
     * <=767px) for width — that one is a 2-class+1-element selector
     * ((0,2,1) specificity), so a bare 2-class override here would still
     * lose on the element tier; three classes ((0,3,0)) beats it outright,
     * no !important needed. width:auto (not 100%) avoids a separate
     * collapse-to-0 issue this image hits inside its shrink-to-fit,
     * position:absolute ancestor when a percentage width is used. */
    .logo-branding .navbar-brand .logo_height_width{
        display: inline-block;
        width: auto;
        max-width: 80px;
    }
}


.user_image_show_on_modal {
    height: 42px !important;
    width: 42px !important;
    min-width: 42px;
}

.header-controls .notify-control .notification-button {
    background: #4620d5;
    border: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #dfd9f6;
    border-radius: 50%;
    text-align: center;
    padding: 9px 12.4px;
}

.header-controls .group-control .notification-button {
    background: #4620d5;
    border: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #dfd9f6;
    border-radius: 50%;
    text-align: center;
    padding: 9px 10px;
}

.header-controls .inbox-control .message_custom_button {
    background: #4620d5;
    border: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #dfd9f6;
    border-radius: 50%;
    text-align: center;
    padding: 9px 10.5px;
}

/* Language selector toggle: same navbar-control color/height family as the
   buttons above (.notification-button / .message_custom_button), but sized
   for a text label ("English" / "العربية") instead of one icon, so it
   can't use their fixed 40x40 circle — that's the "unstyled" look this
   replaces (the generic ".header-controls button" rule was forcing this
   button into that same 40x40 circle, clipping/squeezing its label).
   Symmetric horizontal padding keeps this correct in both LTR and RTL
   without needing a companion rule in rtl-overrides.css. */
.header-controls .language-switcher .language-switcher-toggle {
    width: auto;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4620d5;
    border: none;
    border-radius: 20px;
    color: #dfd9f6;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.header-controls .language-switcher .language-switcher-toggle:hover,
.header-controls .language-switcher .language-switcher-toggle:focus {
    background: #5a2ff9;
    color: #fff;
}

/* Undo ".header-controls .dropdown-toggle:after{right:10px;position:relative}"
   (style.css) here: that nudge exists for the circular icon-only buttons
   (e.g. the profile dropdown) where the caret has no text to sit after.
   This button has a text label, so Bootstrap's own caret placement
   (immediately after the label) is already correct — the inherited
   offset would push it too far right instead. */
.header-controls .language-switcher .language-switcher-toggle::after {
    position: static;
    right: auto;
}

/* Match the same breakpoint where sibling nav-control buttons shrink
   (.header-controls button, style.css, max-width:767px) so the language
   selector's height keeps tracking theirs on mobile. */
@media only screen and (max-width: 767px) {
    .header-controls .language-switcher .language-switcher-toggle {
        height: 35px;
    }
}

/* Language switcher dropdown: style.css only supplies stock Bootstrap
   dropdown-menu chrome here (a visible 1px border, no shadow, 4px-tall
   items) plus one global rule that hits every dropdown's .active item
   site-wide — ".dropdown-item.active,.dropdown-item:active
   {background-color:#5a2ff9}" — a full solid navbar-purple block. That's
   the "large solid color block" this replaces. Scoped to
   .language-switcher only, so no other dropdown (profile, notifications)
   is affected. */
.header-controls .language-switcher .dropdown-menu {
    min-width: 150px;
    padding: 6px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(17, 12, 46, 0.15);
}

.header-controls .language-switcher .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
}

/* Reserved space for the active checkmark, kept on every item (not just
   the active one) so both labels start at the same position — matches
   the target layout where "English" and "العربية" line up. */
.header-controls .language-switcher .dropdown-menu .dropdown-item::before {
    content: "";
    width: 12px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
}

.header-controls .language-switcher .dropdown-menu .dropdown-item:hover,
.header-controls .language-switcher .dropdown-menu .dropdown-item:focus {
    background-color: #f2effc;
    color: #4620d5;
}

/* Overrides the global purple-block .active rule (style.css) with a
   subtle tint + checkmark instead, scoped to this dropdown only. */
.header-controls .language-switcher .dropdown-menu .dropdown-item.active,
.header-controls .language-switcher .dropdown-menu .dropdown-item:active {
    background-color: #f2effc;
    color: #4620d5;
    font-weight: 600;
}

.header-controls .language-switcher .dropdown-menu .dropdown-item.active::before {
    content: "\2713";
}

/* ---------------------------------------------------------------------
   Auth navbar (login/register) language switcher.
   resources/views/components/language_switcher.blade.php is shared by
   two different navbars, each with a DIFFERENT ancestor wrapper:
     - frontend/header.blade.php (authenticated social app) -> .header-controls
     - auth/layout/header.blade.php (login/register, this page)-> .login-btns
   The rules above are scoped to ".header-controls" and never match here,
   which is why they had no visible effect on /login and /register. This
   block is the ".login-btns" equivalent, kept separate (not merged into
   one shared selector) so each navbar's styling stays independently
   editable without risk to the other.

   ".login-btns a{background:#5b2ff9 !important}" and
   ".login-btns a.active,a:hover,a:focus{background:#ff7856 !important}"
   (earlier in this file) were written for the Login/Sign up <a> buttons,
   but match every <a> in .login-btns — including the dropdown-item
   language links, since Bootstrap's dropdown menu is a plain DOM sibling
   of the toggle, not portaled elsewhere. That's the purple/orange block
   on every option. The rules below out-specificity + !important those,
   scoped strictly to this dropdown so the Login/Sign up buttons
   themselves are untouched. ---------------------------------------- */

/* Gap between the language switcher and the Login button. .login-btns
   only ever gave the LAST child (Sign Up) margin-left:10px (style.css)
   to space it from Login — nothing spaced the switcher itself from
   Login, so they sat flush. margin-inline-end resolves to the correct
   physical side from the element's own computed direction (right in
   LTR, left in RTL), so this one declaration covers both directions
   without a separate [dir="rtl"] rule. */
.login-btns .language-switcher {
    margin-inline-end: 12px;
}

.login-btns .language-switcher .language-switcher-toggle {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e3defa;
    border-radius: 20px;
    color: #4620d5;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.login-btns .language-switcher .language-switcher-toggle:hover,
.login-btns .language-switcher .language-switcher-toggle:focus {
    background: #f2effc;
    border-color: #4620d5;
    color: #4620d5;
}

.login-btns .language-switcher .dropdown-menu {
    min-width: 150px;
    padding: 6px;
    margin-top: 8px;
    border: 1px solid #eee7fb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(17, 12, 46, 0.15);
}

.login-btns .language-switcher .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: #fff !important;
    color: #333 !important;
    border: none !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 8px;
}

.login-btns .language-switcher .dropdown-menu .dropdown-item::before {
    content: "";
    width: 12px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
}

.login-btns .language-switcher .dropdown-menu .dropdown-item:hover,
.login-btns .language-switcher .dropdown-menu .dropdown-item:focus {
    background: #f2effc !important;
    color: #4620d5 !important;
}

.login-btns .language-switcher .dropdown-menu .dropdown-item.active,
.login-btns .language-switcher .dropdown-menu .dropdown-item:active {
    background: #f2effc !important;
    color: #4620d5 !important;
    font-weight: 600;
}

.login-btns .language-switcher .dropdown-menu .dropdown-item.active::before {
    content: "\2713";
}

@media only screen and (max-width: 767px) {
    .login-btns .language-switcher .language-switcher-toggle {
        padding: 6px 12px;
        font-size: 14px;
    }
}

.sponsor_post_image_size {
    height: auto !important;
    width: 100px;
}

.product-form .nice-select span.current,
.product-form input span.current {
    color: #5e5e5e !important;
}

.notificatio_counter_bg {
    background-color: red !important;
}

.group_event_user_img_w {
    width: 50px !important;
}

.group_event_thumbnail_w {
    width: 190px !important;
}

.note-dropdown-menu.dropdown-style {
    min-width: 220px !important;
}

.note-dropdown-menu {
    min-width: 347px !important;
}

.note-dropdown-item h1,
.note-dropdown-item h2,
.note-dropdown-item h3,
.note-dropdown-item h4,
.note-dropdown-item h5,
.note-dropdown-item h6 {
    font-size: 20px;
}




.more_image_overlap{
    position: absolute;
    width: 100%;
    height: 99.5%;
    top: 0;
    text-align: center;
    font-size: 30px;
    color: #f1f1f1;
    background-color: #000000a1;
    transition: color .3s, font-size .3s;
    z-index: 20;
    font-weight: 600;

    display: -webkit-box!important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.picture:hover .more_image_overlap{
    color: #fff;
    font-weight: 600;
    transition: color .2s, font-size .2s;
}
.more_image_overlap span{
    display: block;
    position: absolute;
    top: 45%;
    text-align: center;
    width: 100%;
}

.w-45px{
    width: 45px !important;
}
.bg-dark{
    background-color: #000;
}
.opacity-7{
    opacity: .7;
}


/*thumbnail image*/
.thumbnail-110-auto{
    height: 110px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.thumbnail-80-100{
    min-width: 80px;
    width: 80px;
    height: 100px !important;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.thumbnail-110-106{
    height: 110px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.thumbnail-103-103{
    height: 103px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.thumbnail-196-196{
    height: 196px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}
.thumbnail-80-80{
    height: 80px !important;
    width: 80px !important;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}
.thumbnail-90-90{
    height: 190px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}


.rounded-10px{
    border-radius: 10px !important;
}

.post-image-wrap .piv-gallery .piv-item img{
    max-height: 500px !important;
    width: auto !important;
}


/*Comment layout*/
.comment-wrap{
    max-width: 100%;
}
.comment-wrap .comment-item{
    border: 1px solid #f3f3f3;
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}
.comment-details .comment-content{
    border-radius: 20px;
    width: 100% !important;
    border:none;
}
.comment-wrap .comment-content{
    width: fit-content;
    padding: 6px 18px;
    max-width: 100%;
}
.comment-wrap .comment-content a{
    position: absolute;
    bottom: -15px;
    right: 0;
    text-align: right;
    background-color: #ffffff00;
    border-radius: 13px;
    height: 27px;
    width: max-content;
    top: auto;
}
.comment-wrap .comment-content a > span{
    display: block;
    background-color: #fff;
    padding: 0px 5px;
    border-radius: 13px;
    border: 1px solid #e7e7e7;
}
.comment-wrap .comment-content a img{
    margin-top: -1px;
    width: 20px;
}
.comment-details .comment-content .nav-linka a{
    padding: 10px 8px;
}


.login-btns a{
    background: #5b2ff9 !important;
    padding: 10px 32px;
    color: #fff !important;
    border: 1px solid #ffffff !important;
    font-size: 18px;
}
.login-btns a.active, .login-btns a:hover, .login-btns a:focus{
    background: #ff7856 !important;
    padding: 10px 32px;
    color: #fff !important;
    border: 1px solid #ff7856 !important;
    font-size: 18px;
}


.thumbnail-210-200{
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

.min-hight-125px{
    min-height: 125px;
}
.border2px-c4c4c4{
    border: 2px solid #c4c4c4;
}
.visibility-hidden{
    visibility: hidden;
}
.text-black{
    color: #000 !important;
}
.single-image-ration{
    max-height: 650px;
    width: fit-content !important;
    max-width: 100%;
}
.logo-branding{
    width: auto;
}



.ellipsis-line-1{
    display: -webkit-box!important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}
.ellipsis-line-2{
    display: -webkit-box!important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}
.ellipsis-line-3{
    display: -webkit-box!important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}
.ellipsis-line-4{
    display: -webkit-box!important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}
.ellipsis-line-5{
    display: -webkit-box!important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}


.create-story-img{
    height: 196px;
}


/* 404 Area Start 
********************************************/
.error-box{
    font-family: 'Segoe UI';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100vh;
}
.error-content{
    width: 613px;
    max-width: calc(100% - 32px);
    margin: auto;
    text-align: center;
}
.error-content img{
    width: 262px;
    height: 228px;
    -o-object-fit: cover;
       object-fit: cover;
}
.error-content h1{
    margin-top: 70px;
    margin-bottom: 20px;
    font-size: 42px;
    font-weight: 700;
    color: #101010;
}
.error-content p{
    font-size: 21px;
    font-weight: 400;
    color: #636363;
    margin-bottom: 40px;
}
.error-content .error-btn{
    display: inline-block;
    background-color: #5A2FF9;
    color: #fff;
    padding: 15px 24px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
}
/* 404 Area Start End
********************************************/

/* Responsive Css
******************************************/
@media all and (max-width:576px){
    .error-content h1 {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 35px;
    }
    .error-content .error-btn {
        padding: 12px 24px;
        font-size: 15px;
    }
}
.min-w-80px{
    min-width: 80px;
}

@media all and (max-width:991px){
    .login-btns a{
        background: #ff7856;
        padding: 8px 15px !important;
        color: #fff;
        border: 1px solid #ff7856;
        font-size: 18px;
        margin-left: 12px;
    }
}
.max-width-250px{
    max-width: 250px !important;
}
.login-txt{
    max-width: 100%;
}

@media all and (max-width:390px){
    .d-xs-hidden{
        display: none;
    }
    .d-xs-show{
        display: block;
    }
}

.stg-wrap > .story-gallery{
    min-height: 450px;
    padding-top: 30px;
}
.stg-wrap > .story-gallery img, .stg-wrap > .story-gallery video{
    border-radius: 10px;
}
.st-item .stc-bg:before{
    background: #00000000;
}

.sidebarToggle{
    transition: all 0s ease-in-out;
    transform: rotateX(0deg);
    transform-origin: top;
    transition-delay: .1s;
    max-height: 100%;
    transition-timing-function: cubic-bezier(1, 0.08, 0, 1.13);
}
.transform-0{
    transition: all 0s ease-in-out;
    transform: rotateX(90deg);
    transform-origin: top;
    transition-delay: .1s;
    max-height: 0px;
}
.sponsors .sponsor{
    min-height: 130px;
}
.rounded-8px{
    border-radius: 8px;
}
.bg-drark{
    background-color: #000 !important;
}
.group-widget .widget-img{
    width: 90px;
}
.group-widget .widget-info{
    width: -webkit-fill-available;
}
.group-event-dotted .dropdown{
    position: absolute;
    right: 22px;
    top: -5px;
}
.roup-event-dotted .nav-link.dropdown-toggle{
    height: 30px;
    margin-top: 20px;
}
.line-height16px{
    line-height: 16px;
}
.album-card .dropdown-toggle:after, .single-photo .dropdown-toggle:after{
    color: #000;
    background: #ffffff;
}

.single-photo .photo-delete-btn{
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 14px !important;
    display: none;
    width: 30px !important;
    height: 25px !important;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 25px;
}
.single-photo:hover .photo-delete-btn, .single-photo:focus .photo-delete-btn{
    display: block;
}

.single-photo:not(.jg-entry){
    padding: 0px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    background-color: #000;
}
@media only screen and (max-width: 1199px) and (min-width: 993px) {
    .flex-wrap:not(.photogallery) .single-photo, .g-video:not(.photogallery) .single-photo{
        width: 40%;
    }
}
.flex-wrap:not(.photogallery) .single-photo .post-controls.dropdown.dotted,
 .g-video:not(.photogallery) .single-photo .post-controls.dropdown.dotted{
    position: absolute;
    right: 5px;
    top: -4px;
}
.photoGallery img{
    border: 1px solid #dee2e6 !important;
    border-radius: 5px !important;
}
.card.album-create-card a.create-album{
    display: table !important;
}
.all-notify-control.header-controls{
    max-width: 100% !important;
}

/* Was max-width:80%!important — capped the icon row to ~169px on the
   narrowest phones (80% of the column's ~211px content width), well
   short of what 6 normalized 36px icons + gaps need (~226px) and the
   direct cause of icons visually escaping their own container at
   320-410px. The own.css max-width:100% rule elsewhere (no !important,
   scoped to <=767.98px) can't reach this because this one has
   !important and a narrower, separately-matching condition — fixing it
   here directly rather than layering another override on top. */
@media only screen and (max-width: 410px){
    .header-controls{
        max-width: 100%!important;
    }
}
ul.react-list img{
    width: 25px;
}
.post-react > .react-icons img{
    width: 20px;
}
.event-text .ellipsis-line-2{
    min-height: 40px;
}

.tags a.active{
    background-color: #5a2ff9;
    color: #fff;
    border: 2px solid #5a2ff9;
}
.max-width-200{
    max-width: 200px;
}
.product-filter.mt-3 .form-group{
    position: unset;
}
.offcanvas-backdrop{
    z-index: 1000 !important;
}
.chat-box .modal-inner .text-quote .quote-react, .message-box .modal-inner .text-quote .quote-react .post-react{
    position: absolute;
    right: 22px;
    bottom: -7px;
    background-color: #fff;
    border-radius: 50px;
    padding: 0;
}
.chat-box .modal-inner .text-quote .quote-react, .message-box .modal-inner .text-quote .quote-react img.react-icon{
    width: 25px;
}
.filter-gray-1{
    filter: grayscale(1);
}

@media only screen and (max-width: 700px){
    .blog-header{
        background: #e5e2f6 !important;
    }
}
.react-list{
    top: -40px !important;
}


.bg-secondary::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000 !important;
  opacity: .8 !important; /* Firefox */
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000 !important;
  opacity: .6 !important; /* Firefox */
}
.white-placeholder::placeholder{
    color: #fff !important;
    opacity: .8 !important; /* Firefox */
}
.form-group input{
    color: #444444;
}
body.login{
    background-color: #ffffff !important;
}
body.login .form-group input{
    border: 1px solid #cfc2fb;
    background: #fafeff;
}
.hidden-on-shared-view{
    display: none !important;
}



/*Shourav's css*/
/****** New Css Start 
****************************************/
.story-control{
    position: relative;
}
.story-big-img img{
    height: 160px;
    border-radius: 5px;
}
.plus-icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #fff;
    background-color: #5A2FF9;
    font-size: 12px;
    margin-right: 6px;
}
.create-text {
    font-weight: 500;
    font-size: 12px !important;
}
.story-small-img img{
    position: absolute;
    height: 30px;
    width: 30px !important;
    border-radius: 50%;
    border: 2px solid #5A2FF9;
    object-fit: cover;
    top: 10px;
    left: 8px;
}
.story-text {
    position: absolute;
    bottom: 5px;
    left: 8px;
    color: #fff;
}
.story-text .text-nav {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    line-height: 16px !important;
    margin-bottom: 0;
}
.story-text .text-des {
    font-size: 10px;
    text-transform: capitalize;
    margin-bottom: 0;
}
.story-shadow{
    position: relative;
    z-index: 1;
}
.story-shadow:before{
    position: absolute;
    content: "";
    background: url(../images/Overlay.png) no-repeat scroll center center /cover;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    border-radius: 5px;
    z-index: -1;
}
.post-options {
    position: inherit !important;
    display: flex;
    flex-wrap: wrap;
    margin-left: 50px;
}
.post-options .btn{
    margin-right: 30px;
}
.post-options button {
    width: inherit !important;
    height: inherit !important;
    font-size: 12px;
    padding: 9px 18px;
}
.create-entry{
    display: flex;
    margin-bottom: 15px;
}
.create-entry .btn-trans {
    border: 1px solid #DEDEDE;
    padding: 9px 14px !important;
    border-radius: 25px;
    margin-left: 15px;
}
.newsfeed-form .entry-inner{
    padding-bottom: 10px !important;
}
.single-entry.newsfeed-form .btn-trans {
    font-size: 14px !important;
}
.widget .sponsors .sponsor{
    margin-bottom: 0;
}
.avatar,.sponsor-txt{
    display: table;
}
/****** New Css End 
****************************************/
@media all and (max-width:767px){
    .post-options {
        margin-left: 0 !important;
    }
    .post-options .btn {
        margin-right: 6px;
    }
}

a.story-entry .ct-story {
    position: absolute;
    bottom: 0px;
    align-items: center;
    left: 20px;
    width: 115px;
    transform: translateY(-50%);
    z-index: 20;
}
.author-thumb.d-flex.align-items-center .rounded-circle{
    height: 40px !important;
}
.header.header-default{
    padding: 11px 8px !important;
}
.sc-search input{
    height: 40px !important;
}
.sc-home{
    width: 40px;
    height: 40px;
    line-height: 40px;
}
.owl-nav button{
    margin-top: -15px;
    height: 30px;
    width: 30px;
}
.owl-nav button span{
    color: #9f9f9f;
}
.story-entry.creat-story .stories-view{
    max-width: 200px;
}
/*Ended Shaurav's css*/

.story-create-item{
    height: 196px;
    border-radius: 4%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

.border-n-h-70{
    border: none;
    height: 70px;
}

.status-type-btn{
    display: inline-block;
    margin: 5px;
    text-transform: capitalize;
    padding: 11px 19px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
}
.status-type-btn img{
    margin-right: 5px;
}
.rounded-5px{
    border-radius: 5px !important;
}
.post-edit-img-del{
    position: absolute;
    color: #505050;
    right: 5px;
    font-size: 12px;
    z-index: 20;
    top: -3px;
}
.post-edit-img-del:hover{
    color: #eab304;
}
.custom-modal.alert-modal{
    box-shadow: 0px 0px 40px #6d6d6d85;
}
.editing-items:before{
    content: "";
    position: absolute;
    background: #44444447;
    width: -webkit-fill-available;
    height: 60px;
    border-radius: 5px;
    right: 0px;
    left: 0px;
}

.profile-header{
    padding: 180px 0 0 !important;
}
.avatar-xl{
    width: 90px !important;
    height: 90px !important;
}

.w-15px{
    width: 15px !important;
}
.w-16px{
    width: 16px !important;
}
.w-17px{
    width: 17px !important;
}
.w-18px{
    width: 18px !important;
}
.w-19px{
    width: 19px !important;
}
.w-20px{
    width: 20px !important;
}
.w-21px{
    width: 21px !important;
}
.w-22px{
    width: 22px !important;
}
.w-23px{
    width: 23px !important;
}
.w-24px{
    width: 24px !important;
}
.w-25px{
    width: 25px !important;
}
.h-15px{
    height: 15px !important;
}
.h-16px{
    height: 16px !important;
}
.h-17px{
    height: 17px !important;
}
.h-18px{
    height: 18px !important;
}
.h-19px{
    height: 19px !important;
}
.h-20px{
    height: 20px !important;
}
.h-21px{
    height: 21px !important;
}
.h-22px{
    height: 22px !important;
}
.h-23px{
    height: 23px !important;
}
.h-24px{
    height: 24px !important;
}
.h-25px{
    height: 25px !important;
}
.mt--4px{
    margin-top: -4px;
}

.mt--5px{
    margin-top: -5px;
}
.mt--6px{
    margin-top: -6px;
}
.user-comments > .comment-form > form > input{
    border-radius: 100px;
    padding-top: 7px !important;
    padding-bottom: 10px !important;
}
.user-comments > .comment-form > form > input::placeholder{
    color: #9A98A3;
}



/* Sponsor Widget */
.widget .sponsors {
	margin-top: 14px;
}
.sponser_widget .sponsors .sponsor-txt {
	margin-top: 3px;
}
.sponser_widget .sponsors a{
	padding-bottom: 10px;
	border-bottom: 1px solid #eeee;
	display: inline-block;
	margin-bottom: 10px;
    width: 100%;
}
.sponser_widget .sponsors a img{
	height: 76px !important;
    width: 81px;
    object-fit: cover;
}
.sponser_widget .sponsors .sponsor-txt h6 {
	font-size: 12px;
	font-weight: 600;
	color: #0D091D;
	margin-bottom: 8px;
}
.sponser_widget .sponsors .sponsor-txt p {
	font-size: 12px;
	line-height: 20px;
	color: #9A98A3 !important;
	margin-bottom: 0;
}
.sponser_widget .sponsors .sponsor {
	min-height: auto;
}
.sponser_widget .sponsors a:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.story-small-img {
    top: 11px !important;
    left: 5px !important;
}
.timeline-carousel .story-entry{
    position: relative !important;
}
/* Mobile Number field icon on the register form, matching the existing
   .form-group.form-{name,email,pass}:before icon convention in style.css
   (each sets only `content`; position/font/left/top come from the shared
   .form-group:before base rule there). \f3cd is fa-mobile-screen-button. */
.form-group.form-phone:before {
    content: "\f3cd";
}

a.story-entry .ct-story {
    bottom: -32px !important;
    left: 7px !important;
}

/* ==========================================================================
   Mobile-responsive pass — user website (header, offcanvas nav, right
   sidebar, guest/auth header). Desktop rules above (>767.98px) are
   untouched; everything here is scoped to a mobile/tablet media query so
   the existing desktop appearance is preserved.
   ========================================================================== */

/* Search is `d-none d-lg-block` below 992px, so `.header-controls` no
   longer has to share the row with it there — the 50% cap (style.css) was
   tuned for that wider search+icons split and is too tight for the icon
   cluster on its own, especially once .header-controls button (35px,
   style.css) is restored below instead of staying pinned to the 40px
   .notification-button/.message_custom_button overrides above. */
/* Below Bootstrap's own sm breakpoint (576px), neither the logo column
   (col-lg-2 col-sm-4) nor the controls column (col-lg-4 col-sm-8) has an
   active Bootstrap width class — Bootstrap 5's `.row > *{width:100%}`
   universal reset is all that applies, so both columns default to
   full-width, stacking as separate flex-wrap rows. That's harmless for the
   logo column on its own (its content is position:absolute, so the empty
   100%-wide box contributes ~0 height) — but it means .logo-branding's
   absolute positioning has no defined-width column to anchor its static
   (pre-absolute) position against, so it lands wherever the browser's
   fallback calculation puts it: dead center of the controls row, on top
   of the icons. At >=576px the col-sm-* classes give both columns real
   percentage widths and this doesn't happen — this is scoped to exactly
   the range where it does. */
@media only screen and (max-width: 575.98px) {
    .header .navigation .row {
        flex-wrap: nowrap;
    }
    .header .navigation .row > .col-lg-2.col-sm-4 {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
    }
    .header .navigation .row > .col-lg-4.col-sm-8 {
        width: auto;
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }
    /* Was position:absolute (see the big comment above this block) — its
       two children (the offcanvas-toggle button, the logo link) are
       already inline-level, so restoring normal flow is enough for them
       to sit side by side without adding a new flex layout of its own. */
    .logo-branding-main {
        position: static;
        white-space: nowrap;
    }
}

/* Main navbar menu trigger — was a bare unstyled <button> with no
   explicit size/shape of its own, unlike the rest of the navbar's icon
   buttons (all normalized to 36px circles). Matches that same family
   (color, background, radius) so it reads as one consistent set, not an
   odd one out — this is the ONE menu trigger every user-facing page
   shares (opens #offcanvasRight, the real site navigation); the
   right-sidebar's own, unrelated toggler (right_sidebar.blade.php) is
   excluded from events.dashboard/contacts specifically because it was
   reading as a confusing second "menu" button there.

   Scoped with `.header-default` (the header's own root class): the
   button also sits inside `.logo-branding`, and both style.css and
   paid-content/css/style.css define `.logo-branding button{width:40px}`
   with a `@media(max-width:767px){width:35px}` override. That selector
   is class+element (specificity 0,1,1), which beats a bare
   `.main-menu-trigger` (0,1,0) regardless of stylesheet load order —
   it was winning below 768px and shrinking the button to 35x35,
   1px off the other 36x36 icon buttons. `.header-default
   .main-menu-trigger` (0,2,0) outranks it without touching the addon
   files or reaching for !important. */
.header-default .main-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #4620d5;
    /* White (not the #dfd9f6 lavender tint the other icon buttons use) —
       the menu trigger is the one navigation-critical control here and
       needs to read clearly as "3 lines", which the lower-contrast tint
       muddies slightly against the purple background. */
    color: #fff;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}
.header-default .main-menu-trigger:hover,
.header-default .main-menu-trigger:focus {
    background: #5a2ff9;
    color: #fff;
}

/* Profile dropdown: style.css's `.header-controls .profile-control
   .dropdown-menu{right:0!important}` IS correctly RTL (anchors the
   menu's right edge to the button's right edge, extending toward the
   page/left) — the bug isn't the direction, it's that .profile-control
   itself sits near the LEFT edge of the header (header-controls'
   `justify-content:end` pushes the whole RTL icon row to that side, and
   profile is last in DOM = final/leftmost item in that row), so a
   160px-wide menu extending further left runs off-screen. Flipping the
   anchor to the button's LEFT edge — extending the menu rightward, into
   the header where the room actually is — keeps it fully on-screen
   without changing where the button itself lives. text-align was also
   plainly left (style.css's un-RTL-aware .dropdown-menu base rule).
   Scoped to mobile only, matching this pass's "desktop unchanged" scope
   — the identical issue exists at desktop widths too (not introduced by
   anything here) but is left alone per that boundary. */
@media only screen and (max-width: 767.98px) {
    .header-controls .profile-control .dropdown-menu {
        right: auto !important;
        left: 0 !important;
        text-align: right;
        max-width: calc(100vw - 16px);
    }
    .header-controls .profile-control .dropdown-menu .dropdown-item {
        text-align: right;
    }
}

@media only screen and (max-width: 767.98px) {
    .header-controls {
        max-width: 100%;
    }
    .header-controls .align-items-center.d-flex.justify-content-end {
        gap: 6px;
        flex-wrap: nowrap;
    }
    /* Root cause of the size mismatch between these icons: a fundraiser-
       addon stylesheet (fundraiser/css/custom_new.css, loaded after
       own.css) has `.header-controls .group-control .notification-button
       {display:inline-block;width/height:36px}` — but only for
       .group-control (search/AI/dark-mode/friends), never for
       .notify-control or .inbox-control. Neither Bootstrap nor this
       file's own earlier rules set `display` on any of these <a> tags,
       so absent that addon rule they stay `display:inline` (the browser
       default for <a>) — and width/height are simply not applied to
       non-replaced inline elements per the CSS spec, regardless of what
       value is declared. That's why bell/chat rendered at their bare
       icon-glyph size (~11-15px) while the others matched the addon's
       36px. Declaring `display:inline-flex` explicitly here, instead of
       depending on that addon rule, makes every one of these buttons
       (plus .profile-control, which had no such dependency issue but is
       included for one shared source of truth) render at the exact same
       size regardless of which selector an unrelated stylesheet happens
       to also target.

       .header-default prefix (the shared <header>'s own unique root
       class, from header.blade.php's `<header class="header
       header-default py-3">`) on every selector below: this is now the
        fourth unrelated addon stylesheet found reusing one of
       .header-controls/.group-control/.notify-control/.inbox-control/
       .profile-control for its own components (paid-content/css/
       style.css's `.header-controls .profile-control button{width:60px}`
       is a fresh example, matching this exact selector text at equal
       specificity) — anchoring every rule to the header's own root class
       adds a class to the specificity count without an !important, so it
       keeps winning regardless of which generic class name the next
       addon collision happens to reuse, and regardless of that file's
       load order relative to this one. */
    .header-default .header-controls .notify-control .notification-button,
    .header-default .header-controls .group-control .notification-button,
    .header-default .header-controls .inbox-control .message_custom_button,
    .header-default .header-controls .profile-control button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        line-height: 36px;
        padding: 0;
        font-size: 13px;
        border-radius: 50%;
        vertical-align: middle;
    }
    /* Same .header-default scoping as above, plus resetting
       position/left/top explicitly: both style.css
       (`left:-7px;top:-2px`) and paid-content/css/style.css
       (`left:-15px;top:-2px`) nudge this avatar image with manual
       relative-position offsets — leftover compensation for the button
       not being flex-centered, which it now is (see .main-menu-trigger's
       sibling rule above). With centering handled by the button's own
       flex layout, either leftover offset just knocks the avatar visibly
       off-center inside its circle, and which one "wins" depends on load
       order, so avatar position looked different across pages. */
    .header-default .header-controls .profile-control button img {
        width: 36px;
        height: 36px;
        object-fit: cover;
        position: static;
        left: auto;
        top: auto;
    }
    /* Root cause of the overflow: a fundraiser-addon stylesheet
       (fundraiser/css/custom_new.css, loaded after own.css) has
       `.notification_panel{position:absolute;min-width:400px;
       right:-72px;top:52px}` — meant for a much wider context. min-width
       always wins over max-width when they conflict, so the earlier
       max-width-only version of this rule never actually constrained
       anything; right:-72px then anchors that oversized panel well past
       the button, landing mostly off-screen to the left regardless of
       where the bell sits in the icon row. position:fixed with
       viewport-relative left/right (not anchored to .notify-control at
       all) sidesteps needing to know exactly where the button lands in
       the row — it can't overflow the viewport at any width, and still
       opens from the header/button area near the top of the screen. */
    .header-controls .notify-control .notification_panel {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow-x: hidden;
    }
}

/* Tablet gap (768-991.98px): the hamburger (.main-menu-trigger, further
   above) is `d-lg-none`, so it — and the offcanvas drawer it opens —
   stay in mobile mode through 991px, not just below 768px like the
   icon-sizing block above. But that block's own 767.98px cutoff meant
   the other icon buttons (bell/chat/friends/profile) fell back to
   their un-normalized desktop sizes (37x38, 60x40) in that band while
   the hamburger stayed pinned at 36x36 — the same buttons were
   inconsistent with each other specifically at 768-991px. Repeating
   just the size-critical rules (not the whole 767.98px block, which
   also touches unrelated container/notification-panel layout not
   found broken here) at this tier keeps every icon button at the
   same 36x36 as below 768px, for as long as the hamburger nav is
   actually in mobile mode. */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .header-default .header-controls .notify-control .notification-button,
    .header-default .header-controls .group-control .notification-button,
    .header-default .header-controls .inbox-control .message_custom_button,
    .header-default .header-controls .profile-control button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        line-height: 36px;
        padding: 0;
        font-size: 13px;
        border-radius: 50%;
        vertical-align: middle;
    }
    .header-default .header-controls .profile-control button img {
        width: 36px;
        height: 36px;
        object-fit: cover;
        position: static;
        left: auto;
        top: auto;
    }
}

/* Consolidates two overlapping/contradictory offcanvas width rules in
   style.css (`max-width:767px{width:255px}` vs
   `480px-767px{width:355px}`) into one scale, and adds the tablet tier
   (768-991px) that neither rule covers — without it the drawer falls back
   to Bootstrap's default 400px there, ~52% of a 768px screen. */
@media only screen and (max-width: 767.98px) {
    .offcanvas-start {
        width: min(85vw, 300px);
    }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .offcanvas-start {
        width: min(60vw, 340px);
    }
}

/* Root cause of the drawer sliding in from the LEFT on this RTL site:
   style.css carries its own unconditional, non-RTL-aware
   `.offcanvas-start{left:0;transform:translateX(-100%)}` — an exact copy
   of Bootstrap's LTR base rule — loaded AFTER bootstrap.rtl.min.css's
   correct `right:0;transform:translateX(100%)`, so it wins on `transform`
   outright (same property, later file). The *resting* (open) position
   still lands correctly (CSS resolves the left+right+width
   over-constraint in direction:rtl's favor, ignoring `left`), which is
   why this was easy to miss testing only the settled state — the bug is
   in the hidden-state transform the .3s slide animates FROM, which sits
   the drawer off-screen on the wrong side, so it visibly travels in from
   the left. #offcanvasRight is the only .offcanvas-start on this site
   (left_navigation.blade.php), so scoping to its id is exact, not just
   narrow. */
/* max-width:991.98px here is required, not just tidy scoping: at
   >=992px the drawer converts to a static sidebar via
   `.offcanvas{position:relative;transform:translate(0)}` (own desktop
   rule, style.css) — and critically that rule has NO !important on
   transform. On initial page load .show hasn't been added yet (it's only
   toggled by a click), so an unscoped :not(.show) transform rule here
   would match on EVERY viewport including desktop and, being
   id-specific, permanently beat that unguarded desktop transform:
   translate(0), pushing the "static" sidebar off-screen. Confirmed by
   testing — first version of this fix did exactly that. */
@media only screen and (max-width: 991.98px) {
    #offcanvasRight.offcanvas-start {
        left: auto;
        right: 0;
    }
    /* :not(.show) keeps this scoped to the hidden state only — Bootstrap's
       own .offcanvas.show{transform:none} (bootstrap.rtl.min.css) needs to
       keep winning once the drawer opens, which an unconditional transform
       override here would defeat outright: an id-scoped selector beats a
       2-class one on specificity regardless of .show being present. */
    #offcanvasRight.offcanvas-start:not(.show) {
        transform: translateX(100%);
    }
}

/* Drawer header (left_navigation.blade.php's .offcanvas-header): the close
   button is pinned with position:absolute (not the margin:auto approach
   this used previously) so it's unambiguously anchored to the exact left
   edge regardless of the logo's own size/content — margin:auto in a flex
   row only pushes an item as far as its sibling allows, whereas this
   requirement is for a fixed, guaranteed position independent of that.
   position:relative on the header establishes the containing block. */
/* justify-content:flex-start (not center): the only in-flow child left
   in this row is .drawer-logo (the close button is taken out of flow by
   position:absolute below) — flex-start puts it at the RTL "start" edge
   (physically the right, opposite the X), so it sits on the header row
   itself rather than centered across the row's full width. */
.offcanvas-header.res_logo {
    position: relative;
    justify-content: flex-start;
    align-items: center;
}
/* .offcanvas-header.res_logo (both classes: matches the fundraiser-addon
   collision's own 2-class specificity, (0,2,0), and beats it) — a bare
   `.offcanvas-header .drawer-close-btn` ties that specificity and loses
   on load order (custom_new.css loads after own.css), landing the
   button back near the right per the same left+right+width RTL
   over-constraint resolution seen elsewhere in this file. Confirmed via
   direct rule inspection: fundraiser/css/custom_new.css has
   `.res_logo .btn-close{right:9px;...}`, meant for that addon's own
   close buttons but colliding here since .res_logo is also this drawer
   header's own marker class. */
.offcanvas-header.res_logo .drawer-close-btn {
    position: absolute;
    left: 16px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
/* Sits as a normal in-flow item on the header row (at the RTL start —
   physically the right, per justify-content:flex-start above) instead
   of a full-width wrapper that centered it across the whole row. */
.offcanvas-header .drawer-logo {
    width: auto;
    display: flex;
    align-items: center;
}
.drawer-mawajib-logo {
    width: auto;
    height: auto;
    max-width: 140px;
    max-height: 40px;
}

/* Right sidebar toggle button (see rightSideBarToggler() in
   common_scripts.blade.php) — touch-target sizing only, the
   show/hide (.transform-0) mechanism itself is unchanged. */
.rightSideBarToggler .btn {
    min-width: 44px;
    min-height: 44px;
}

/* The active/hover nav-item indicator bar (style.css .menu-wrap ul li
   a:before/:after) is a decorative slide-in bar sized at 250-300% of its
   own link's width with a large negative offset — by design (it's meant
   to bleed past the link visually) but .menu-wrap ul li never clips it.
   Harmless for page-level scrollWidth (it lives inside the offcanvas,
   itself position:fixed, so it can't inflate document/body scrollWidth —
   see login-v2.css for that mechanism), but without a clipping container
   it can visually poke out past the drawer's own rounded edge for
   whichever nav item is .active. */
.menu-wrap ul li {
    overflow: hidden;
    border-radius: 5px;
}

/* Guest/auth header (auth/layout/header.blade.php, shared by /login,
   /loginv2 and /register): the "إنشاء حساب" / "تسجيل الدخول" pair wraps
   to two lines and crowds the logo at ~320-480px. Bootstrap's ms-5 utility
   is itself !important, so it needs !important to override here. */
/* .logo-branding gets `position:absolute` at <=767px in style.css — a fit
   that works for the main frontend header (header.blade.php, which has a
   hamburger button sharing that column) but overlaps the guest/auth
   header's login/register buttons, which don't share that layout. Scoped
   to .logo-branding-auth only, so the frontend header's positioning is
   untouched. */
@media only screen and (max-width: 767.98px) {
    .logo-branding-auth {
        position: static;
    }
}

@media all and (max-width: 480px) {
    .login-btns.ms-5 {
        margin-inline-start: .5rem !important;
    }
    .login-btns {
        gap: 6px;
    }
    .login-btns a {
        padding: 6px 10px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
}

/* Mobile search panel (header.blade.php) — the desktop `.header-search`
   stays `d-none d-lg-block` untouched; this is a separate, mobile-only
   entry point opened by the #mobile-search-toggle icon, reusing the same
   `route('search')` GET the desktop form submits to. Hidden by default so
   slideToggle() has a defined closed state to animate from. */
#mobile-search-panel {
    display: none;
    width: 100%;
    background: transparent;
    padding: 0 0 12px;
}
#mobile-search-panel form {
    position: relative;
    display: flex;
    align-items: center;
}
#mobile-search-panel input[type="search"] {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 21px;
    padding: 0 44px 0 16px;
    font-size: 14px;
}
#mobile-search-panel i {
    position: absolute;
    inset-inline-end: 16px;
    color: #52627a;
    pointer-events: none;
}

/* 320-340px: six 36px icons (profile/notifications/messages/friends/
   search/dark-mode) at the standard 6px gap need ~6px more than the
   available column width provides right at 320px — comfortable
   everywhere above this. Placed at the end of the file (not simply
   nested tighter than the max-width:767.98px block that sets 6px) on
   purpose: an earlier version of this same rule sat before that 6px
   rule with equal selector specificity, so despite matching a narrower
   condition it lost the cascade on source order alone and never
   actually applied — confirmed by measuring the real gap at 320px
   viewport. A smaller gap only in this narrowest sliver keeps icon size
   (touch target) untouched. */
@media only screen and (max-width: 340px) {
    .header-controls .align-items-center.d-flex.justify-content-end {
        gap: 2px;
    }
}