@font-face {
    font-family: 'Rassd';
    src: url('./fonts/GhroobArabicitf-Bold.eot');
    src: url('./fonts/GhroobArabicitf-Bold.eot?#iefix') format('embedded-opentype'),
    url('./fonts/GhroobArabicitf-Bold.woff2') format('woff2'),
    url('./fonts/GhroobArabicitf-Bold.woff') format('woff'),
    url('./fonts/GhroobArabicitf-Bold.ttf') format('truetype'),
    url('./fonts/GhroobArabicitf-Bold.svg#GhroobArabicitf-Bold') format('svg');
    src: url('./fonts/GhroobArabicitf-Bold.otf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rassd';
    src: url('./fonts/GhroobArabicitf-Regular.eot');
    src: url('./fonts/GhroobArabicitf-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/GhroobArabicitf-Regular.woff2') format('woff2'),
    url('./fonts/GhroobArabicitf-Regular.woff') format('woff'),
    url('./fonts/GhroobArabicitf-Regular.ttf') format('truetype'),
    url('./fonts/GhroobArabicitf-Regular.svg#GhroobArabicitf-Regular') format('svg');
    src: url('./fonts/GhroobArabicitf-Light.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Rassd", Sans-serif !important;
    background-color: var(--background-dark);
    color: var(--text-dark);
    transition: all .3s ease-in-out;

}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}

.logo a {
    background: url("../images/rassd logo white.svg") no-repeat center center / contain;
    height: 30px;
    width: 95px;
    display: block;
}

a {
    text-decoration: none;
    transition: all .3s ease;
}

:root {
    --background-light: #ffffff;
    --text-light: #000000;
    --background-dark: #121212;
    --text-dark: #ffffff;
}

.theme-switcher {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 1000;
    overflow: hidden;
    margin-left: 5px;
    background: #303031;
    border-radius: 100%;
}

.theme-switcher .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.theme-switcher .light-icon {
    transform: translateY(0);
    opacity: 1;
    color: #fff;
}

.theme-switcher .dark-icon {
    transform: translateY(100%);
    opacity: 0;
}

.dark-mode .theme-switcher .light-icon {
    transform: translateY(-100%);
    opacity: 0;
}

.dark-mode .theme-switcher .dark-icon {
    transform: translateY(0);
    opacity: 1;
}

.search {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 1000;
    overflow: hidden;
    margin-left: 5px;
    background: #303031;
    border-radius: 100%;
    text-align: center;
    line-height: 32px;
}

.btn-dark {
    background: #000;
    border: 1px solid #000;
}

.social-login a i {
    margin-left: 7px;
}

.social-login a {
    width: 110px;
    margin: 0 0 0 5px;
    padding: 10px;
    line-height: 0;
    font-size: 13px;
}

.social-login a svg {
    width: 16px;
    height: 18px;
    margin-left: 2px;
}

.social-login a svg path {
    fill: #fff;
}

.like-button span {
    /* background: #e04747; */
    /* width: 100px; */
    /* height: 100px; */
    /* border-radius: 5px; */
    /* padding: 5px 10px; */
    font-size: 18px;
    /* font-family: arial; */
    margin-right: 7px;
    color: #fff;
    /* direction: rtl; */
    /* font-weight: 900;*/
}

.profile {
    background: #0a0a0c;
    border-radius: 100%;
    padding: 5px;
}

.top-bar-container {
    transition: all 0.3s ease-in-out;
    padding-bottom: 55px;
}

.top-bar {
    background: #242526;
    display: flex;
    align-items: center;
    position: fixed;
    /*overflow: hidden;*/
    justify-content: center;
    height: 55px;
    width: 100%;
    left: 0;
    right: 0;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
    -webkit-animation-name: example;
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 1s;
    animation-fill-mode: both;
}

/*@-webkit-keyframes example {*/
/*    from {position: relative; top: -55px;}*/
/*    to {position: fixed; top: 0}*/
/*}*/

/*@keyframes example {*/
/*    from {position: relative; top: -55px;}*/
/*    to {position: fixed; top: 0}*/
/*}*/

/*@keyframes reverse {*/
/*    from {position: fixed; top: 0;}*/
/*    to {position: relative;}*/
/*}*/

span.badge.badge-light {
    margin-right: auto;
    color: #737272;
    font-weight: 100;
}

hr.hr {
    border: 1px solid #242526;
}

.category-icon i {
    font-size: 12px;
    color: #fff;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 0 none;
}

.card-body {
    padding: 0;
    overflow: hidden;
}

.card-footer {
    border: 0 none;
    padding-top: 15px;
}

.share-block > div {
    margin: 0 8px 0 0;
}

p.copyright, p.designed {
    font-size: 14px;
    margin-bottom: 0;
}

.cat-icons {
    display: flex
}

.cat-icons a {
    padding: 5px;
}

/*.cat-icons a:last-child {*/
/*    margin-left: 0;*/
/*}*/
.category-icon {
    width: 25px;
    height: 25px;
    background: #c0272c;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 0 0 0 4px;
}

.category-icon.star {
    background: #c89600;
}

.category-icon.pin {
    background: #017ffa;
}

.card {
    background: #242526;
    margin-bottom: 1.6rem;
    border: 0 solid transparent;
    border-radius: 10px;
}

.card-text, .card-text-full {
    color: #999;
    display: initial;
}

h5.card-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 2.2rem;
    color: #d1d3d7;
}

.time {
    color: #777;
    display: block;
    font-size: 10px;
    font-weight: 100;
    margin-top: 10px;
}

/*.card-header ul li:last-child:before {*/
/*    content: "•";*/
/*    line-height: 1.1rem;*/
/*    margin: 0.5rem;*/
/*    color: #49494c;*/
/*}*/
.card-header ul {
    line-height: 0;
}

.vertical-menu li a img, .shortcuts-menu li a img {
    width: 38px;
    height: 38px;
    border-radius: 100%;
    margin-left: 12px;
    vertical-align: middle;
}

.left-column {
    padding-right: 5px;
    width: 30%;
}

.card-header ul li:first-child a, .card-header ul li:last-child a {
    color: #999;
    font-size: 16px;
    font-weight: 100;
    display: flex;
    align-items: center
}

.card-header ul li:last-child a {
    color: #fff
}

span.title svg path {
    fill: #777;
}

span.title svg {
    margin-top: 0;
    margin-right: 7px;
    width: 14px;
}

.category-img {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 10px;
    border-radius: 100%;
    vertical-align: middle;
}


/*.menu {*/
/*    position: relative;*/
/*    height: 55px;*/
/*    margin-right: 10%;*/
/*}*/
/*.menu ul:after {*/
/*    content: "";*/
/*    background: #656565;*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    display: block;*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    left: 0;*/
/*    top: auto;*/
/*    z-index: 1;*/
/*}*/
/*.menu .shortcuts li {*/
/*    position: relative;*/
/*    color: #ccc;*/
/*    cursor: pointer;*/
/*    transition: all 0.3s ease;*/
/*    padding: 15px 25px 17px 25px;*/
/*    z-index: 3;*/
/*}*/

/*.menu ul li a {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/
/*.menu-item:hover {*/
/*    !*transform: translateY(-5px);*!*/
/*    !*transform: translateY(-10px);*!*/
/*    !*color: #0080f8;*!*/
/*}*/
/*!*.shortcuts .active svg path {fill:#0080f8}*!*/

/*.menu .shortcuts li::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    height: 2px;*/
/*    background-color: #0080f8;*/
/*    border-radius: 5px;*/
/*    width: 0;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.menu .shortcuts li:hover::after,*/
/*.menu .shortcuts li.active a::after {*/
/*    left: 0;*/
/*    right: 0;*/
/*    width: 100%;*/
/*}*/
/*.icon {*/
/*    font-size: 20px;*/
/*}*/
.list-inline-item:not(:last-child) {
    margin-left: 0
}

/*.menu-item a {*/
/*    color: inherit;*/
/*    text-decoration: none;*/
/*    padding: 24px;*/
/*    position: relative;*/
/*}*/
/*.menu-item a svg path {*/
/*    transition: all .3s ease;*/
/*}*/
.sidebar {
    transform: translateY(10px);
    transition: transform 0.6s ease-in-out;
}

.sidebar.fixed {
    transform: translateY(40px);
    transition: transform 0.6s ease-in-out;
}

/*#sidebar {*/
/*    height: 100vh;*/
/*    position: fixed;*/
/*    overflow-y: auto;*/
/*    scrollbar-width: thin; !* For Firefox *!*/
/*}*/
/*#sidebar {*/
/*    overflow-y: hidden;*/
/*    width:236px;*/
/*}*/

/*#sidebar:hover {*/
/*    overflow-y: auto;*/
/*    scrollbar-width: thin;*/
/*    -webkit-scrollbar: initial;*/
/*}*/
/*#sidebar::-webkit-scrollbar {*/
/*    width: 4px;*/
/*}*/

/*#sidebar::-webkit-scrollbar-thumb {*/
/*    background-color: #444;*/
/*    border-radius: 10px;*/
/*}*/
.showmore-wrapper {
    background: #242526;
    border-radius: 100%;
    width: 38px;
    height: 38px;
    text-align: center;
    margin-left: 12px;
    transition: background-color 0.3s ease;
}

a.showMore:hover .showmore-wrapper {
    background: #121212;
}

.showmore-wrapper svg {
    vertical-align: bottom;
    width: 10px;
}

#sidebar a {
    color: #ccc;
    text-decoration: none;
    display: flex;
    transition: background-color 0.3s ease;
    /*border: .1rem solid rgba(0, 0, 0, 0);*/
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 5px;
    font-size: 16px;
}

#sidebar a:hover, #sidebar a.active {
    background-color: #242526;
    border-color: #303031;
}

#sidebar a span {
    line-height: 1.4em;
}

.date-picker-container {
    text-align: center;
}

.date-picker-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: right !important;
    background-color: #242526;
    border: solid 1px #282a2c;
    color: #d7d7d7;
    height: 38px;
    width: 145px;
    position: relative;
}

.date-picker-btn[aria-expanded="true"] .arrow {
    transform: rotate(225deg);
    transform-origin: center;
}

.date-picker-btn:hover {
    background-color: #242526;
    border: 1px solid #444444;
}

.datepicker table tr td.day.focused, .datepicker table tr td.day:hover {
    background: #666666;
}

.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
    background: #666;
}

.arrow {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: "";
    display: block;
    height: 5px;
    margin-top: -2px;
    pointer-events: none;
    position: absolute;
    left: 12px;
    top: 50%;
    transform-origin: 66% 66%;
    transform: rotate(45deg);
    transition: all .15s ease-in-out;
    width: 5px;
}

#datePicker {
    margin-top: 10px;
    display: flex;
}

.datepicker table tr td.today {
    background-color: #0080f8 !important;
    color: #ffffff;
    background-image: none;
}

.date-picker {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, height 0.3s ease;
    position: absolute;
    z-index: 1;
}

#datePicker input {
    width: 157px;
}

.date-picker.open {
    visibility: visible;
    height: auto;
    opacity: 1;
}

#datePicker.collapse:not(.show) {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, height 0.3s ease;
}

#datePicker.collapse.show {
    visibility: visible;
    height: auto;
    opacity: 1;
}

/* Datepicker widget styling */
.datepicker {
    background-color: #2a2a40;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 8px;
}

.datepicker .datepicker-days thead,
.datepicker .datepicker-days tbody {
    color: #ffffff;
}

.datepicker .day:hover,
.datepicker .month:hover,
.datepicker .year:hover {
    background-color: #3c3c56;
    color: #ffffff;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background-color: #0080f8;
    color: #ffffff;
}

.datepicker table tr td.today {
    background-color: #444;
    color: #ffffff;
}

/* Arrow styling */
.datepicker .prev,
.datepicker .next {
    color: #ffffff;
}

.datepicker .prev:hover,
.datepicker .next:hover {
    color: #0080f8;
}

a.showMore {
    display: flex; /* Use flexbox to align items */
    align-items: center; /* Center align vertically */
    font-size: 10px;
    /*font-weight: 700;*/
    text-transform: uppercase;
    margin-top: 10px;
    color: #0077C8;
    text-decoration: none;
}

a.showMore.showLess .show-more-icon {
    /* Style for the show less icon if needed */
}

.stories.carousel {
    overflow: hidden;
    margin: 30px 0
}

.stories.snapssenger.carousel .story > .item-link > .item-preview {
    height: 100vh;
}

.stories.carousel .story > .item-link > .item-preview {
    max-height: 198px;
}

.stories.snapssenger.carousel .story > .item-link {
    max-height: 198px;
}

.stories.snapssenger.carousel .story {
    max-height: 198px;
    max-width: 117px;
}

.stories.snapssenger.carousel .story > .item-link {
    text-align: right;
    max-height: 198px;
}

.stories.carousel .story > .item-link > .item-preview {
    max-height: 198px;
}

#zuck-modal-content .story-viewer .head .right {
    float: left;
    margin-left: 30px;
}

#zuck-modal-content .story-viewer .head .left {
    display: none;
}

.stories.snapssenger.carousel .story > .item-link > .info {
    z-index: 1
}

/* Style for the story container */
.story {
    position: relative;
}

/* Ensure video container has proper positioning */
.story video {
    position: relative;
    z-index: 1;
}

/* Styling the container and the arrows */
.storiesWrapper {
    width: 100%;
    overflow-x: hidden; /* Hide overflow when not swiping */
}

.zuck-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.zuck-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #eee;
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    z-index: 9;
    line-height: 0.7em;
    transition: all .3s ease-in-out;
}

.zuck-arrow:hover {
    background-color: #4b4949;
}

.zuck-arrow:hover svg path {
    fill: #fff
}

.zuck-arrow.left {
    left: -20px;
}

.zuck-arrow.right {
    right: -20px;
}

.zuck-arrow {
    fill: white;
    width: 40px;
    height: 40px;
    padding: 11px;
    text-align: center;
}

.stories.carousel .story:first-child {
    margin-right: 0;
    margin-left: 6px;
}

.stories.carousel .story:last-child {
    margin-left: 0;
    margin-right: 6px;
}


.stories.snapssenger.carousel .story > .item-link {
    max-height: 198px;
}

.stories.snapssenger.carousel .story {
    max-height: 228px;
    max-width: 138px;
    position: relative;
}

.stories.snapssenger.carousel .story > .item-link {
    text-align: right;
    max-height: 228px;
    border: 1px solid #242526;
    border-radius: 5px;
    overflow: hidden;
}

.stories.carousel .story > .item-link > .item-preview {
    max-height: 228px;
}

#zuck-modal-content .story-viewer .head .right {
    float: right;
    margin-right: 30px;
}

.g1-socials-items-tpl-grid li {
    margin-left: 10px;
}

.item-link:after {
    content: '';
    /* display: block; */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(255, 255, 255, 0);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, 0.9) 100%);
}

.stories.snapssenger.carousel .story > .item-link > .info {
    z-index: 1;
    display: none;
}

/* Style for the story container */
.story {
    position: relative;
}

.logo img {
    height: 30px;
}

.swiper-pagination, .swiper-button-next, .swiper-button-prev, .story-swiper-button-next, .story-swiper-button-prev {
    z-index: 9;
}

/* Mute and play/pause buttons */
/*.mute-icon, .play-pause-icon {*/
/*    position: absolute;*/
/*    bottom: 10px;*/
/*    right: 0;*/
/*    color: white;*/
/*    padding: 10px;*/
/*    border-radius: 50%;*/
/*    cursor: pointer;*/
/*    font-size: 16px;*/
/*    z-index: 9;*/
/*}*/
.slides .controls-wrapper .mute-icon, .slides .controls-wrapper .play-pause-icon {
    position: absolute;
    bottom: 10px;
    right: auto;
    color: white;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    z-index: 9;
    width: 30px;
    height: 30px;
    text-align: center;
}

.play-pause-icon {
    left: 0; /* Adjust to position next to the mute icon */
}

/* Ensure video container has proper positioning */
.story video {
    position: relative;
    z-index: 1;
}

/*.g1-canvas {*/
/*right:200px*/
/*}*/
.g1-row-inner {
    margin: 0;
    max-width: 100%;
}

.entry-tpl-stream {
    max-width: 100%
}

@media only screen and (min-width: 801px) {
    .archive-body-stream > .g1-row-inner > .g1-column-2of3 {
        max-width: 100%;
    }
}

.sidebar2 {
    width: 20vw; /* Set width to 20vw */
    height: 100vh;
    position: fixed;
    top: 56px;
    right: 0;
    background: #17191a;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 99999;
    visibility: hidden;
}

.sidebar2.visible {
    opacity: 1; /* Show sidebar when visible */
    visibility: visible;
}

.story-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #d1d3d7;
    font-size: 16px;
    font-family: "Rassd", sans-serif;
    line-height: 1.8em;
}

.story-item .logo-div {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}

.story-item img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    vertical-align: middle;
}

#zuck-modal.with-effects {
    transform-origin: top right;
}

#zuck-modal #zuck-modal-content .slider .story-viewer .slides .item .media {
    height: 100%;
    padding-bottom: 4.6rem;
    padding-top: 1.6rem;
}

.story-item.active {
    background-color: #252525;
}

.story-item.seen {
    color: #49494c;
    cursor: context-menu;
}

/*#zuck-modal .slider > *, #zuck-modal-content, #zuck-modal-content .story-viewer, #zuck-modal-content .story-viewer > .slides, #zuck-modal-content .story-viewer > .slides > * {*/
/*    width: 80vw;*/
/*}*/

#zuck-modal-content .story-viewer .slides-pointers {
    border-collapse: separate;
    border-spacing: 6px;
    display: table;
    left: 0;
    position: absolute;
    right: 0;
    table-layout: fixed;
    top: 0;
    width: 20vw;
    margin: 6px auto;
    text-align: center;
}

.user-avatar {
    width: 24px;
    height: 24px;
    line-height: 1.1em;
}

#sidebar .add-source a {
    margin-bottom: 0;
    padding: 0;
    margin-left: 5px;
}

.add-source a svg path {
    fill: #a3a3a3;
}

.add-source.shortcut-icon a svg {
    width: 20px;
    height: 20px;
}

.copylink svg {
    width: 18px;
}

.controls-wrapper {
    position: absolute;
    left: 40%;
    height: 80px;
}

.category-logo {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 999;
}

.category-logo img {
    width: 38px;
    height: 38px;
    border-radius: 100%;
    background: radial-gradient(ellipse at 70% 70%, #ffffff 8%, #ffffff 42%, #2f8de5 82%) !important;
    padding: 1px;
}

.zuck-arrow svg path {
    transition: all .3s ease-in-out;
    fill: #121212;
}

.zuck-arrow.right svg {
    display: block;
    margin: 0 2px;
}

.zuck-arrow.left svg {
    display: block;
    margin: 0 5px 0 0;
}

.post-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    border-top: 1px solid #3a3b3d;
    margin-top: 10px;
}

.card.card-break-news .post-options {
    border: 0 none;
    margin: 0;
}

.option-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
}

.option-button i {
    margin-right: 5px;
}

.option-button:hover {
    color: #4267B2; /* لون يشبه زر فيسبوك عند التمرير */
}

.like-count {
    font-size: 16px;
    margin-left: 5px;
    color: #4267B2;
}

.like-container {
    position: relative;
    display: inline-block;
}

.like-button {
    font-size: 24px;
    cursor: pointer;
    color: #4267B2;
}

.reactions {
    display: flex;
    position: absolute;
    top: -48px;
    left: 0;
    background: #000;
    border-radius: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 5px;
    display: none;
    z-index: 10;
    transform: translate(-50%, 30px);
    transition: all 0.3s ease;
    opacity: 0;
}

.reactions:hover {
    transform: translate(-50%, 0px);
    opacity: 1;
    background: #333333;
}

.like-button:hover + .reactions,
.reactions:hover {
    display: flex;
}

.reaction {
    font-size: 24px;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.reaction:hover {
    transform: scale(1.5);
}

.like-counts {
    margin-top: 10px;
    font-size: 16px;
}

#like-container {
    cursor: pointer;
}

#like-icon {
    transition: transform 0.3s ease, fill 0.3s ease;
    fill: #999; /* Default color */
}

#like-icon.active {
    fill: #1877f2; /* Facebook-like blue */
    transform: scale(1.2);
    animation: bounce 0.3s ease;
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1.2);
    }
}

.scroll-to-top {
    position: fixed;
    bottom: -100px; /* يبدأ أسفل الصفحة */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: bottom 0.5s ease-in-out;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    left: 20px;
    background-color: #2f3031;
    color: #ffffff;
    width: 35px;
    height: 35px;
    border-radius: 5px;
}

.scroll-to-top.show {
    bottom: 20px; /* يظهر بحركة لأعلى */
}

.scroll-to-top i {
    font-size: 15px;
}

.video-container {
    position: relative;
    width: 100%; /* Set the width of the container */
    height: 400px; /* Set the desired height */
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.vimeo-video, .youtube-video {
    width: 100%;
}

.widget-sidebar {
    position: relative;
    transition: transform 0.3s ease-out; /* Smooth animation for the Y translation */
}

#widgets-sidebar.sticky {
    position: fixed;
    top: 40px; /* Adjust this value for your sticky position */
    transform: translateY(-20px); /* Translate the sidebar 20px up */
}

#widgets-sidebar.stop {
    position: absolute;
    bottom: 0;
    transform: none; /* Reset the translation when the sidebar is not sticky */
}

.youtube-video {
    position: relative;
    width: 560px; /* Adjust based on your layout */
    height: 315px;
    background-color: #000;
    cursor: pointer;
    overflow: hidden;
}

.youtube-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 15px 30px;
    font-size: 24px;
    cursor: pointer;
}

.card.widget.widget-side {
    background: transparent;
    border: 0 none;
    text-align: center;
    box-shadow: none;
}

.card.widget.widget-side .hot-links li a {
    color: #7d7d7d;
    font-size: 13px;
}

.card.widget.widget-side .hot-links li a:hover {
    color: #d1d3d7;
}

.card.widget.widget-side .hot-links li a:after {
    content: "•";
    margin: 5px;
    color: #646464;
    vertical-align: middle;
}

.card.widget.widget-side .hot-links li:last-child a:after {
    display: none;
}

.user-image {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

/* Swiper container to ensure it's responsive */
.swiper-container {
    width: 100%;
    height: 550px;
    position: relative;
    overflow: hidden;
    visibility: hidden;
}

.swiper-gallery {
    position: relative;
}

/* Loading spinner styles */
#loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid #f3f3f3;
    border-top: 5px solid #0080f8;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    animation: spin-gallery 1s linear infinite;
    z-index: 9;
}

@keyframes spin-gallery {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Ensure that images take up the full width */
/*.swiper-slide {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: 100%;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*}*/

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.slide-bg {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

.swiper-button-next,
.swiper-button-prev,
.story-swiper-button-next, .story-swiper-button-prev {
    background: rgba(0, 0, 0, .6);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    transition: all .3s ease-in-out;
}

.swiper-button-next:hover, .swiper-button-prev:hover, .story-swiper-button-next:hover, .story-swiper-button-prev:hover {
    background: #000;
}

.swiper-button-next svg,
.swiper-button-prev svg, .story-swiper-button-next svg,
.story-swiper-button-prev svg {
    width: 14px;
    height: 14px;
    fill: #fff; /* Set arrow color */
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #000; /* Darken arrows on hover */
}

.story-swiper-button-next, .story-swiper-button-prev {
    position: absolute;
    top: 50%;
    background: #f33031;
}

.story-swiper-button-next {
    right: 0;
    left: auto;
}

.story-swiper-button-prev {
    left: 0;
    right: auto;
}

.story-swiper-button-prev svg {
    margin-right: 9px;
    margin-top: 2px;
}

.story-swiper-button-next svg {
    margin-right: 6px;
    margin-top: 2px;
}

#spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0; /* Space around the spinner */
}

.spinner-border {
    width: 2rem;
    height: 2rem;
    border-width: 0.25em;
}


/* Grid layout for the images */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
}

.image-grid img, .more-images {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Making first row span across two columns */
.image-grid img:nth-child(1),
.image-grid img:nth-child(2) {
    grid-column: span 1;
}

/* Second row will contain 3 images */
.image-grid img:nth-child(3),
.image-grid img:nth-child(4),
.more-images {
    grid-column: span 1;
}

/* The "+6" block style */
.more-images {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}

/* Swiper gallery popup styling */
.gallery-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.5s;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.more-images {
    position: relative; /* Position relative for absolute positioning of overlay */
    width: 100%; /* Adjust based on your design */
    height: 100%; /* Adjust based on your design */
    overflow: hidden; /* Ensure child elements do not overflow */
}

.more-images-image {
    width: 100%; /* Image takes full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove bottom space caused by inline-block */
}

.more-overlay {
    position: absolute; /* Position overlay absolutely within the more-images div */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: white; /* Text color */
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-size: 2em; /* Font size for the overlay text */
    opacity: 1; /* Start hidden */
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
}

.more-images:hover .overlay {
    opacity: 1; /* Show overlay on hover */
}

/*.post {*/
/*    opacity: 0; !* Start hidden *!*/
/*    transition: opacity 0.5s ease; !* Smooth fade-in effect *!*/
/*    margin: 10px 0; !* Space between posts *!*/
/*}*/

/*!* Optional: Add styles for the post *!*/
/*.post {*/
/*    padding: 10px;*/
/*    background-color: #f8f9fa; !* Light background for posts *!*/
/*    border: 1px solid #dee2e6; !* Light border for posts *!*/
/*    border-radius: 5px; !* Rounded corners *!*/
/*}*/


/* Button Style */
/*#loginBtn {*/
/*    padding: 4px;*/
/*    line-height: 1.5em;*/
/*    cursor: pointer;*/
/*    color: #d1d3d7;*/
/*    border: none;*/
/*    transition: background-color 0.3s;*/
/*    background: #303031;*/
/*    border-radius: 100%;*/
/*    width: 30px;*/
/*    height: 30px;*/
/*}*/
.input-group-text {
    background-color: #49494c;
    border: 0 none;
}

span.input-group-text svg, span.input-group-text path {
    fill: #919191;
}

.form-control {
    width: 100%;
    padding: 10px;
    text-align: right;
    font-size: 15px;
    border-radius: 5px;
    background: #242526;
    color: #b3b2b2;
    /*height: 48px;*/
    border: 1px solid #484848;
}

.form-control:focus {
    background: #202122;
    color: #c5c5c5;
    border: 1px solid #444343;
}

.nav-link {
    color: #c1c1c1;
}

.nav-tabs .nav-link {
    border: 0 none;
    /*font-weight: 600;*/
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    color: #ababab;
    border: 0 none;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #b9b4b4;
    background: #353738;
    border-color: #49494c;
}

.nav.nav-tabs {
    border-color: #484848;
}

.card.widget.widget-side p {
    color: #7d7d7d;
}

/* Popup Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s;
    z-index: 9999;
}


/* Popup Content */
.popup-header h3 {
    font-size: 17px;
    font-weight: 500;
    margin-top: 5px;
}

.popup-header {
    color: #999;
    text-align: center;
    padding-bottom: 25px;
}

p.footer-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* height: 200px; */
    padding: 0;
    margin-bottom: 0;
    font-size: 12px;
    color: #adadad;
    position: absolute;
    bottom: 25px;
    right: 40px;
    left: 20px;
    text-align: right !important;
}

.popup-content {
    background-color: #242526;
    padding: 25px 40px;
    border-radius: 0 5px 5px 5px;
    border: .1rem solid #303031;
    max-width: 600px;
    max-height: 500px;
    min-width: 600px;
    min-height: 600px;
    color: #a8aab0;
    /*display: flex;*/
    /*gap: 20px;*/
    animation: slideUp 0.5s ease;
    position: relative;
}

/*form#loginForm {*/
/*    padding-left: 20px;*/
/*    width:50%*/
/*}*/
.popup-header img {
    width: 132px;
}

.login-heading p {
    margin: 0 5px 0 0;
}

.login-heading h3 {
    margin-left: 5px;
}

.login-heading {
    display: flex;
    align-items: center;
    justify-content: right;
    padding-bottom: 20px;
}

.login-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-media-login h3 {
    font-size: 17px;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: -1px;
    left: -76px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    background: #242526;
    border: 1px solid #303031;
    width: 75px;
    height: 75px;
    text-align: center;
    border-radius: 5px 0 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    transform: rotate(0deg);
}

.close-btn:hover {
    color: #0080f8;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.close-btn:hover svg path {
    fill: #0080f8;

}

/* Social Media Login */
.social-media-login {
    flex: 1;
    border-right: 1px solid #303031;
    padding-right: 20px;
}

.forget-password {
    color: #878787;
    font-size: 13px;
}

.light-mode .nav-link {
    color: #6e6e6e;
    font-weight: 100;
}

.light-mode .forget-password {
    color: #333;
}

.light-mode .popup-header h3 {
    color: #333
}

.forget-password:hover {
    color: #ababab;
}

.light-mode .forget-password:hover {
    color: #000;
}

.submit-btn:hover {
    background: #138bfb;
}

.social-btn {
    background-color: #555;
    color: #fff;
    padding: 10px;
    margin: 5px 0;
    border: none;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.social-btn:hover {
    background-color: #777;
}

/* Login and Register Forms */
.login-form, .register-form {
    flex: 1;
    /*padding-left: 20px;*/
}

.login-form input, .register-form input {
    width: 100%;
    padding: 10px;
    text-align: right;
    font-size: 13px;
    margin: 5px 0;
    border-radius: 5px;
    background: #242526;
    color: #b3b2b2;
    height: 42px;
    border: 1px solid #484848;
    /*-webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .16), 0 -1px 1px #242526, 0 1px 0 #242526;*/
    /*box-shadow: inset 0 2px 2px rgba(0, 0, 0, .16), 0 -1px 1px #242526, 0 1px 0 #242526;*/
}

.login-form h3, .register-form h3 {
    font-size: 16px;
    color: #aeaeae;
    margin: 0;
    font-weight: 600;
}

.filter-wrap {
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
    align-items: center;
}

.alert {
    padding: 8px 14px;
    background: transparent;
    color: #55585a;
    border: 1px solid #282a2c;
    font-size: 13px;
}

.close-btn svg path {
    stroke: #ddd;
}

.submit-btn {
    background-color: #3F3F3F;
    color: #fff;
    border: none;
    padding: 3px 20px 7px 20px;
    /* width: auto; */
    /* display: block; */
    /* line-height: 1.2em; */
    /* height: 30px; */
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #636363;
}

.login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.register-link, .login-link {
    color: #0080f8;
    cursor: pointer;
    margin-top: 10px;
    display: inline-block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
    }
    to {
        transform: translateY(0);
    }
}

#lockButton {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

.lock,
.unlock {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s;
}

.unlock {
    opacity: 0;
}

#lockButton:hover .lock {
    opacity: 0;
}

#lockButton:hover .unlock {
    opacity: 1;
}

.social-media {
    margin: 0;
}

.social-media li a {
    background: #333;
    padding: 0 10px;
    border-radius: 2px;
    width: 35px;
    height: 30px;
    display: inline-flex;
    align-items: center;
}

.social-media li:not(:last-child) {
    margin-left: 3px;
}

.social-media li a svg {
    width: 16px;
    height: 16px;
}

.social-media li a svg, .social-media li a path {
    fill: #fff;
}

.social-media li.facebook a {
    background: #2d5f9a;
}

.social-media li.twitter a {
    background: #000;
}

/*.dropdown-menu {*/
/*    display: none;*/
/*    opacity: 0;*/
/*    transform: translateY(10px);*/
/*    transition: opacity 0.4s, transform 0.4s;*/
/*}*/

/*.dropdown:hover .dropdown-menu {*/
/*    display: block;*/
/*    opacity: 1;*/
/*    transform: translateY(0);*/
/*}*/
#social-dropdown {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}


.category-info {
    border-bottom: 1px solid #303031;
    padding-bottom: 15px;
    padding-top: 15px;
}

.category-name img, .category-name-main img {
    height: 50px;
    border-radius: 100%;
}

.category-name .badge {
    vertical-align: top;
    margin-right: 20px;
    margin-top: 5px;
    background: #303031 !important
}

.profile-image img {
    border-radius: 100%
}

.nice-select .list .option {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    line-height: 24px;
}

.nice-select .list .option svg {
    width: 20px;
    height: 20px;
    fill: #919191;
}

.nice-select .list .option:hover svg {
    fill: #ffffff;
}

.nice-select .option {
    padding-right: 18px;
}

.effect {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #919191;
    font-size: 16px;
    padding: 7px 0 13px;
    width: 125px;
    border-radius: 10px;
    overflow: hidden;
    background: #303030;
}

.effect.effect-2 {
    transition: all 0.2s linear 0s;
    border: 0 none;
}

.effect.effect-2:before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7%2010.0288C7.47142%2010%208.05259%2010%208.8%2010H15.2C15.9474%2010%2016.5286%2010%2017%2010.0288M7%2010.0288C6.41168%2010.0647%205.99429%2010.1455%205.63803%2010.327C5.07354%2010.6146%204.6146%2011.0735%204.32698%2011.638C4%2012.2798%204%2013.1198%204%2014.8V16.2C4%2017.8802%204%2018.7202%204.32698%2019.362C4.6146%2019.9265%205.07354%2020.3854%205.63803%2020.673C6.27976%2021%207.11984%2021%208.8%2021H15.2C16.8802%2021%2017.7202%2021%2018.362%2020.673C18.9265%2020.3854%2019.3854%2019.9265%2019.673%2019.362C20%2018.7202%2020%2017.8802%2020%2016.2V14.8C20%2013.1198%2020%2012.2798%2019.673%2011.638C19.3854%2011.0735%2018.9265%2010.6146%2018.362%2010.327C18.0057%2010.1455%2017.5883%2010.0647%2017%2010.0288M7%2010.0288V8C7%205.23858%209.23858%203%2012%203C14.7614%203%2017%205.23858%2017%208V10.0288%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: -40px;
    width: 40px;
    height: 100%;
    /*background-color: rgba(255, 255, 255, 0.3);*/
    background-color: #49494c;
    border-radius: 0 10px 10px 0;
    transition: all 0.2s linear 0s;
    text-align: center;
}

.effect.effect-2:hover {
    text-indent: 28px;
}

.effect.effect-2:hover:before {
    right: 0;
    text-indent: 0;
}

.news-writer {
    display: inline-flex;
    align-items: center;
    line-height: 3em;
}

.news-writer-container .text-muted time {
    color: #777;
}

.news-writer-container {
    padding: 15px 0;
}

.category {
    color: #999;
    margin-right: 7px;
}

.news-detail-cover-image-caption {
    color: #797979;
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 2.2rem;
    position: relative;
}

.news-detail-cover-image-caption .media-caption {
    margin-right: 3.8rem;
    position: relative;
}

.article-content p {
    color: #d1d3d7;
    line-height: 1.8em;
    font-size: 18px;
}

.article-tags li a {
    background-color: #303031;
    border: .1rem solid transparent;
    border-radius: 2rem;
    color: #a1a0a0;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 10px 7px;
}

/*.article-tags li {*/
/*    margin-left: 10px !important;*/
/*}*/
h1.display-4 {
    font-weight: 600;
    line-height: 1.3em;
    font-size: 54px;
}

.sep {
    border: 1px solid #262626;
    margin: 20px 0;
}

.article-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-maintain li a {
    background: #2f2f2f;
    padding: 5px 10px 7px;
    display: block;
    text-align: center;
    color: #b5b5b5;
    border-radius: 2rem;
}

.article-maintain li svg, .article-maintain li path {
    width: 20px;
    height: 20px;
    fill: #b5b5b5;
    vertical-align: bottom;
}

.article-options ul li a:hover {
    background: #0080f8;
    color: #fff;
}

.article-options ul li a:hover svg, .article-options ul li a:hover svg path {
    fill: #fff;
}

.related-articles .card-img-top {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 160px;
}

.related-articles h5 {
    color: #d1d3d7;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    text-align: right;
}

.related-articles .card-body {
    padding: 5px;
}

.related-articles {
    display: block;
    margin-bottom: 1.6rem;
    position: relative;
    text-align: center;
}

.related-articles h4 {
    background-color: #303031;
    color: #b0b0b0;
    display: inline-block;
    font-size: 20px;
    line-height: 1.4rem;
    padding: 0 15px 5px;
    text-align: center;
    margin: 0 0 20px;
}

.related-articles h4:before {
    background: #303031;
    content: "";
    height: .1rem;
    left: .8rem;
    position: absolute;
    right: .8rem;
    top: .8rem;
    width: calc(100% - 1.6rem);
    z-index: -1;
}


#picassoFooter {
    background: #242526;
    color: #a6a4a4;
    position: relative;
    overflow: hidden;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 40px 0;
}

.footer-section {
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.footer-section h3 {
    color: #f0f0f0;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, #0080F8, #AFEEEE);
    transition: width 0.3s ease;
}

.footer-section h3:hover::after {
    width: 100%;
}

.footer-navigation ul {
    list-style: none;
    padding: 0;
}

.footer-navigation ul li {
    margin-bottom: 10px;
}

.hover-effect {
    font-size: 12px;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.hover-effect::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -8px;
    left: 0;
    background-color: #0080F8;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

.hover-effect:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

.hover-effect:hover {
    color: #0080F8;
}


.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-logo .logo {
    width: 100px;
    height: 100px;
}

.footer-logo p {
    margin-top: 5px;
    font-style: italic;
    opacity: 0.8;
}

.footer-contact p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.footer-contact i {
    margin-right: 10px;
    color: #AFEEEE;
}

.footer-art {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    z-index: 1;
}

.footer-bottom {
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

#replaced-category {
    display: flex;
    align-items: center;
    justify-content: center;
}

#replaced-category img {
    height: 50px;
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 50px;
    /* margin: 5px; */
}

.my-badge {
    display: inline-flex;
    /* align-items: center; */
    vertical-align: top;
}

.category-name-main {
    display: inline-flex;
    height: 50px;
    width: 50px;
}


#share-toolbar {
    position: fixed;
    top: 150px;
    right: 160px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

#share-toolbar.visible {
    opacity: 1;
    visibility: visible;
}

.share-toolbar a.like-post svg {
    width: 25px;
    fill: #fff;
}

.share-toolbar a.comment svg, .share-toolbar a.comment svg g {
    width: 23px;
    fill: #fff;
}

.share-toolbar a.favourite svg, .share-toolbar a.favourite svg path {
    width: 25px;
    stroke: #fff;
}

.share-toolbar a.share-post svg, .share-toolbar a.share-post svg path {
    width: 30px;
    stroke: #fff;
}

ol.breadcrumb {
    margin-bottom: 0;
}

ol.breadcrumb li a {
    color: #b5b5b5;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgb(108 117 125);
}

.fb-comments {
    font-family: "Rassd", sans-serif !important;
}

.facebook-comment h3 {
    color: #bebebe;
    font-size: 18px;
}

body.plugin.chrome.webkit.win.x1.Locale_ar_AR {
    color: #909090;
}

.article-maintain, .article-tags {
    margin: 0;
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1040; /* Just below Bootstrap dropdown (1050) */
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.dropdown-backdrop.show {
    display: block;
    opacity: 0.5;
}

.dropdown, .dropdown-center, .dropend, .dropstart, .dropup, .dropup-center {
    /*position: relative;*/
    /*z-index: 99;*/
}

.share.dropdown + .dropdown-backdrop.show {
    z-index: 9;
}

.share.dropdown a.dropdown-toggle.show {
    z-index: 99;
    position: relative;
}

.dropdown-toggle::after {
    display: none
}

.share-block svg {
    margin: 0 7px;

}

.share-block svg:hover path {
    transition: all .3s ease-in-out;
}

.share-block svg:hover path {
    fill: #ffffff;
}

.share-block .share svg {
    margin-left: 0;
}

.share-block .heart svg {
    fill: #fff;
}

.share-block .comment svg path {
    fill: #fff;
}

.share-block .comment svg {
    width: 22px;
}

.share-block .comment svg path {
    /* width: 19px; */
    fill: #fff;
}

.share-block .comment svg {
    width: 24px;
}

.share-block .share .dropdown-menu li a {
    color: #999;
    padding: 5px;
}

.share-block .dropdown-menu {
    background-color: #242526;
    padding: 0;
}

.share-block .share .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #353535;
}

.share-block .share .dropdown-menu li:hover a {
    background: #303031;
}

.share-toolbar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.social-menu ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

.social-menu ul li {
    list-style: none;
}

.social-menu ul li a svg {
    font-size: 30px;
    line-height: 60px;
    transition: .3s;
    color: #000;
}

.social-menu ul li a:hover svg {
    color: #fff;
}

.social-menu ul li a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #303031;
    text-align: center;
    padding: 6px !important;
    transition: all 0.3s ease !important;

}

.social-menu ul li a:hover {
    transform: translate(0, -10%);
}

.social-menu ul li:nth-child(1) a:hover {
    background-color: rgba(0, 0, 0, 0.829);
}

.social-menu ul li:nth-child(2) a:hover {
    background-color: #E4405F;
}

.social-menu ul li:nth-child(3) a:hover {
    background-color: #0077b5;
}

.social-menu ul li:nth-child(4) a:hover {
    background-color: #000;
}


.form-control:focus {
    box-shadow: none;
}

.form-control.bg-none {
    background: transparent;
}

.search-form .form-control {
    color: #bbbbbb
}

.form-control::placeholder {
    font-size: 12px;
    color: #878484 !important
}

.search-form button {
    /* line-height: 2em; */
    padding: 6px;
}

.search-form .input-group-append svg path {
    stroke: #818181;
}

button, input, optgroup, select, textarea {
    font-family: "Rassd";
}

.search-form .input-group.rounded-pill {
    border-radius: 10px !important;
    border: 1px solid #3f3f3f !important;
    height: 45px;
}

.search-form .input-group.rounded-pill input {
    padding: 5px 15px 10px 0;
}

#heart-icon {
    cursor: pointer;
    transition: transform 0.3s ease, fill 0.3s ease;
    stroke: #fff;
    height: 35px;
}

#heart-icon.active {
    fill: #e0245e; /* Change to desired color for liked state */
    transform: scale(1.1);
    animation: bounce 0.3s ease;
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1.2);
    }
}

.like-badge {
    position: absolute;
    top: -10px;
    right: -5px;
    background-color: #ff0000;
    color: #fff;
    border-radius: 100%;
    padding: 3px 10px 5px;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: bold;
}

#widgets-sidebar.fixed {
    position: fixed;
    top: 20px;
    width: 300px; /* Adjust this width to match your sidebar */
}

.card-img, .card-img-top {
    border-radius: 0;
}

.card-body img {
    height: 550px;
    width: auto;
    margin: 0 auto;
    display: block;
}

.text-container {
    position: relative;
    display: inline-block;
}

.read-more {
    display: none;
    color: #ffffff;
    cursor: pointer;
    margin-left: 2px;
}

.read-more svg {
    width: 17px;
    height: 15px;
}

.read-more svg path {
    fill: #ffffff
}

.text-container.expanded .read-more {
    display: none;
}

.resources {
    padding-bottom: 10px;
}

.favorite-sources {
    font-size: 16px;
    margin-bottom: 0;
    color: #a3a3a3;
}

.card.widget.widget-side img {
    border-radius: 10px;
    filter: brightness(80%) contrast(0);
    transition: all .3s ease-in-out;
}

.card.widget.widget-side .designed:hover img {
    filter: brightness(100%) contrast(100%);
}

.video-container {
    position: relative;
    width: 100%;
    /*max-width: 600px;*/
    background-color: black;
    margin-bottom: 0;
}

.video {
    width: 100%;
    height: auto;
}

.controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

button.playPause.control-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 0;
}

/* Video duration in top right corner */
.duration {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 14px;
    z-index: 9999;
    /*background: rgba(0, 0, 0, 0.6);*/
    /*padding: 5px;*/
    border-radius: 5px;
}

.control-button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

/* Adjust seek bar */
.seek-bar {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: black;
    cursor: pointer;
    margin-left: 10px;
}

.seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #0081f8;
}

/*.progress-container {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 5px;*/
/*    background: black;*/
/*    border-radius: 5px;*/
/*    overflow: hidden;*/
/*    margin-left: 10px;*/
/*}*/
/*.progress-bar {*/
/*    height: 100%;*/
/*    background-color: #0081f8;*/
/*    width: 0%; !* This will be dynamically updated *!*/
/*    transition: all 0.5s ease-in-out;*/
/*}*/
.row.no-story {
    padding-top: 20px;
}
.fullscreen-icon.infographic-icon {
    top: 20px;
    left: 15px;
    right: auto;
}
.progress-container {
    position: relative;
    height: 5px;
    background: #0081f8;
    cursor: pointer;
    flex: 1;
    margin: 0;
    border-radius: 2px;
    transition: height 0.2s;
}

.progress-container:hover {
    height: 5px;
    cursor: pointer;
}

.progress-bar-video {
    height: 100%;
    background: #000;
    border-radius: 2px;
    transition: width 0.1s linear;
    /* للمواقع العربية: البروجرس يبدأ من اليمين */
    margin-inline-start: auto;
}

.time-tooltip {
    position: absolute;
    bottom: 15px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    pointer-events: none;
    display: none;
    white-space: nowrap;
}

#zuck-modal.with-effects.animated {
    margin-top: 55px !important;
    transition: all .3s ease-in-out;
}

/*#zuck-modal #zuck-modal-content .slider .story-viewer .slides-pointers {*/
/*    left: 50%;*/
/*    top: 0;*/
/*    -webkit-transform: translateX(-50%);*/
/*    -ms-transform: translateX(-50%);*/
/*    transform: translateX(-50%);*/
/*    width: 25vw !important;*/
/*}*/
#zuck-modal-content .story-viewer .slides-pagination .previous {
    right: 25%;
    left: auto !important;
}

#zuck-modal-content .story-viewer .slides-pagination .next {
    left: 25%;
    right: auto !important;
}

/*#zuck-modal-content .story-viewer .tip {*/
/*    width:150px;*/
/*    height:45px*/
/*}*/
/*#zuck-modal-content .story-viewer .slides-pagination span {*/
/*    background: #fff;*/
/*}*/
/* Customize next and previous button size and position */
.prev-button, .next-button {
    width: 48px;
    height: 48px;
    cursor: pointer;
}

/* Positioning */
.story-viewer .next {
    right: 10px; /* Position for the next button */
}

.story-viewer .previous {
    left: 10px; /* Position for the previous button */
}

.item-link .info .name {
    line-height: 1.6em;
    vertical-align: top;
    white-space: nowrap;
    direction: rtl;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    /*width: 290px;*/
}

#sortable-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#sortable-list li {
    cursor: move;
}

.ui-sortable-helper {
    background-color: #e8e8e8;
}

.ui-state-highlight {
    height: 40px;
    background-color: #ffebcc;
    border: 1px dashed #0081f8;
}

.custom-container {
    width: 80%;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 0 15px;
}

/* Sidebar with scrollbar only showing the bar handle */
.sidebar {
    scrollbar-width: thin; /* Firefox: thin scrollbar */
    padding: 65px 0 20px 0;
    height: 100vh; /* إرتفاع كامل */
    width: 260px; /* عرض الشريط الجانبي */
    overflow-y: auto; /* السماح بالتمرير العمودي */
    position: fixed; /* تثبيت الشريط الجانبي */
    top: auto;
    right: auto;
    bottom: 0;
    scroll-behavior: smooth; /* Enable smooth scrolling */
}

/* Hide scrollbar for Chrome, Safari and other WebKit browsers */
.sidebar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Internet Explorer and Edge */
.sidebar {
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    scrollbar-width: none; /* إخفاء التمرير في Firefox */
}

.post-card {
    position: relative;
    transition: background-color 0.3s, border 0.3s;
}

.pinned {
    position: relative;
}

.pin-icon {
    position: absolute;
    top: 14px;
    left: 50px;
}

.like-container {
    position: relative;
    display: flex;
    align-items: center;
}

.heart {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.3s;
}

.emoji-container {
    display: none;
    position: absolute;
    top: 30px; /* Adjust as needed */
    left: -10px; /* Adjust as needed */
    z-index: 1;
}

.emoji {
    font-size: 24px;
    margin: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.emoji:hover {
    transform: scale(1.2);
}

.notification {
    margin-left: 10px;
    font-weight: bold;
}

/*.menu .icon {*/
/*    position: absolute; !* Ensure both icons are in the same position *!*/
/*    top: 0;*/
/*    left: 0;*/
/*    transition: opacity 0.3s ease, transform 0.3s ease; !* Smooth transition for opacity and transform *!*/
/*}*/

/*.default-icon {*/
/*    opacity: 1;*/
/*    transform: translateY(0); !* Initially visible *!*/
/*}*/

/*.hover-icon {*/
/*    opacity: 0;*/
/*    transform: translateY(100%); !* Initially hidden below *!*/
/*}*/

/*.menu {*/
/*    position: relative;*/
/*    width: 23px; !* Icon width *!*/
/*    height: 23px; !* Icon height *!*/
/*    overflow: hidden; !* To prevent overflow of icons when moving *!*/
/*}*/

/*!* Hover effect *!*/
/*.menu li:hover .default-icon,*/
/*.menu li.active .default-icon {*/
/*    opacity: 0;*/
/*    transform: translateY(-100%);*/
/*}*/

/*.menu:hover .hover-icon,*/
/*.menu li.active .hover-icon {*/
/*    opacity: 1;*/
/*    transform: translateY(0);*/
/*}*/
/*.menu li.active:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    height: 2px;*/
/*    background-color: #0080f8;*/
/*    border-radius: 5px;*/
/*    width: 100%;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.menu li.active {*/
/*    position: relative;*/
/*}*/

.vote-container {
    display: flex;
    align-items: center;
    position: relative; /* For the bubble animation */
}

.vote-btn {
    background-color: #333;
    border: 1px solid #444;
    padding: 8px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.vote-btn:hover {
    background-color: #555;
}

.vote-btn.upvote.active,
.vote-btn.downvote.active {
    background-color: #f39c12; /* Active vote color */
}

.vote-btn.upvote.active {
    transform: translateY(-2px); /* Slightly raise on active */
}

.vote-btn.downvote.active {
    transform: translateY(2px); /* Slightly lower on active */
}

.vote-count {
    margin-right: 10px;
    font-size: 14px;
    color: white;
    font-weight: 600;
}

/*.vote-bubble {*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    bottom: 100%;*/
/*    background-color: #f39c12;*/
/*    color: white;*/
/*    padding: 5px 10px;*/
/*    border-radius: 10px;*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    transition: opacity 0.5s, transform 0.5s;*/
/*}*/

.vote-bubble.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px); /* Bubble animation upwards */
}

.vote-btn {
    width: 36px;
    height: 32px;
    border: 0 none;
    padding: 4px
}

.vote-bubble {
    position: absolute;
    bottom: 45px; /* Adjust the bottom position to bring it above the buttons */
    left: 50%;
    transform: translateX(-50%);
    background-color: #f39c12;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s, transform 0.5s;
    font-size: 12px; /* Adjust font size for better fit */
}


/*.search-container {*/
/*    position: relative;*/
/*}*/

/*.search-box {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    width: 0;*/
/*    opacity: 0;*/
/*    transition: width 0.3s ease, opacity 0.3s ease;*/
/*    overflow: hidden;*/
/*}*/

/*.search-box input {*/
/*    width: 200px;*/
/*    padding: 8px;*/
/*    border: none;*/
/*    background-color: #333;*/
/*    color: white;*/
/*    border-radius: 5px;*/
/*}*/

/*.search:hover .search-box,*/
/*.search-box.active {*/
/*    width: 200px;*/
/*    opacity: 1;*/
/*}*/
/*.result-box {*/
/*    position: absolute;*/
/*    top: 50px;*/
/*    width: 200px;*/
/*    background-color: #333;*/
/*    border-radius: 5px;*/
/*    overflow: hidden;*/
/*    z-index: 1000;*/
/*}*/

/*.result-box li {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    padding: 10px;*/
/*    border-bottom: 1px solid #444;*/
/*    cursor: pointer;*/
/*    color: white;*/
/*}*/

/*.result-box li img {*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    border-radius: 5px;*/
/*    margin-left: 10px;*/
/*}*/


/*.search-container {*/
/*    position: relative;*/
/*    display: inline-block;*/
/*}*/

.search-box {
    position: absolute;
    top: 40px;
    width: 66vw;
    background-color: #000000;
}

.search-box input {
    width: 100%;
    padding: 8px 20px;
    border: none;
    background-color: #444;
    color: white;
    border-radius: 50px;
    height: 50px;
}

.result-box {
    /*margin-top: 10px;*/
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
    background-color: #333;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.result-box li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #444;
}

.result-box li img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.result-box li span {
    margin-left: 10px;
    color: white;
}

.result-box li:hover {
    background-color: #555;
}

/*!* Add smooth scrolling *!*/
/*.result-box {*/
/*    scroll-behavior: smooth; !* Smooth scrolling behavior *!*/
/*}*/

/*!* Optional: Custom scrollbar *!*/
/*.result-box::-webkit-scrollbar {*/
/*    width: 8px;*/
/*}*/

/*.result-box::-webkit-scrollbar-thumb {*/
/*    background-color: #555; !* Scroll thumb color *!*/
/*    border-radius: 4px;*/
/*}*/

/*.result-box::-webkit-scrollbar-track {*/
/*    background-color: #222; !* Scroll track color *!*/
/*}*/
input:focus-visible {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove any box shadow */
}

#post-container {
    transition: all 0.5s ease;
    width: 68%;
    margin-left: 2%;
}

.spinner-border {
    display: block;
    margin: 20px auto;
}

/*.card {*/
/*    opacity: 0;*/
/*    transform: translateY(20px);*/
/*    transition: opacity 0.5s, transform 0.5s;*/
/*}*/

/*.card.show {*/
/*    opacity: 1;*/
/*    transform: translateY(0);*/
/*}*/

.shortcut-popup {
    display: none; /* Hidden by default */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    /*background-color: white;*/
    border-radius: 8px;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/
    padding: 20px;
    z-index: 1000;
    animation: fadeIn 0.3s;
}

.shortcut-popup .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.addition {
    margin-top: 10px;
    text-align: center;
}

.addition-img {
    width: 100px; /* Adjust size as needed */
    height: auto;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.menu {
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    display: flex; /* Align menu items horizontally */
}

.menu-item {
    position: relative;
    margin: 0 10px;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s ease;
    padding: 11px 20px;
    display: flex;
}

ul.menu li:first-child {
    margin-right: 0;
}

.icon-container {
    display: inline-block; /* Allows icons to be inline */
    position: relative; /* Positioning for absolute children */
    height: 23px; /* Set height for the container */
    width: 23px; /* Set width for the container */
}

.icon-default,
.icon-hover {
    position: absolute; /* Position both icons on top of each other */
    top: 0; /* Align at the top */
    left: 0; /* Align to the left */
    width: 100%; /* Match the width of the container */
    height: 100%; /* Match the height of the container */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Initially, the hover icon is hidden */
.icon-hover {
    opacity: 0; /* Start with hover icon hidden */
}

/* When hovered, the default icon fades out and hover icon fades in */
.menu-item:hover .icon-default {
    opacity: 0; /* Hide default icon */
    transform: translateY(-10%); /* Optional: move up slightly */
}

.menu-item:hover .icon-hover {
    opacity: 1; /* Show hover icon */
    transform: translateY(0); /* Reset position */
}

/* Active state styles */
.menu-item.active .icon-default {
    opacity: 0; /* Hide default icon when active */
    transform: translateY(-10%); /* Optional: move up slightly */
}

.menu-item.active .icon-hover {
    opacity: 1; /* Show hover icon when active */
    transform: translateY(0); /* Reset position */
}

/* Line under menu item */
.menu-item::after {
    content: ''; /* Create a pseudo-element */
    display: block; /* Make it a block element */
    height: 2px; /* Line thickness */
    background: #0080f8; /* Line color */
    width: 0; /* Start with no width */
    transition: width 0.3s ease; /* Smooth transition for width */
    position: absolute; /* Position under the item */
    left: 50%; /* Center horizontally */
    bottom: -5px; /* Adjust vertical position */
    transform: translateX(-50%); /* Center the line */
}

.menu-item:hover::after,
.menu-item.active::after {
    width: 100%; /* Expand line to full width on hover or when active */
}

.search-popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 55px;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 1); /* Semi-transparent background */
    z-index: 9999999; /* Ensure it sits on top */
    justify-content: center;
    align-items: flex-start;
    padding-top: 55px;
    animation: fadeIn 0.5s;
}

.popup-search-content {
    width: 100%;
    max-width: 100%; /* Maximum width of search box */
    background-color: #F44336;
    padding: 20px;
    border-radius: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    height: 100vh;
}

.popup-search-content input {
    width: 50%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 auto 10px;
    display: block;
}

.search-box h2 {
    font-size: 20px;
    padding-bottom: 15px;
    color: #b7b7b7;
    font-weight: 600;
    text-align: center;
}

.popup-result-box {
    list-style: none;
    padding: 0;
}

.popup-result-box li {
    padding: 10px;
    border-bottom: 1px solid #444;
}

/* Show the popup when active */
.search-popup.active {
    display: flex;
}

a#close-popup-icon {
    position: absolute;
    left: 200px;
    top: 35px;
    z-index: 999999;
    color: #efefef;
}

.popup-result-box li a {
    color: #cdcdcd;
    font-size: 18px;
}

.popup-result-box li:hover a {
    color: #ffffff;
}

.gallery-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.image-grid {
    display: flex;
    width: 100%;
    height: 100%;
}

.left-images {
    width: 30%; /* 30% width for left images */
    display: flex;
    flex-direction: column; /* Align images vertically */
    justify-content: space-between; /* Distribute them evenly */
}

.left-images .swiper-slide {
    height: 32%; /* Each image takes about 1/3rd of the available height */
    margin-bottom: 5px; /* Optional spacing */
}

.right-image {
    width: 70%; /* 70% width for the large image */
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-gallery {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 24px;
    color: white;
    cursor: pointer;
    z-index: 9999;
}

/* Swiper navigation buttons */
.story-swiper-button-next, .story-swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
}

.story-swiper-button-next {
    right: 25%;
}

.story-swiper-button-prev {
    left: 25%;
}

.story-swiper-button-next path, .story-swiper-button-prev path {
    fill: #000;
}

.zuck-modal {
    display: flex;
    flex-direction: row;
}

.stories-list {
    width: 300px;
    background-color: #f5f5f5; /* Customize as needed */
    overflow-y: auto;
    height: 100vh;
    padding: 10px;
}

.story-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

.story-item:hover {
    background-color: #ddd;
}

.story-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.story-name {
    font-size: 16px;
    font-weight: bold;
}

.story-viewer .tip.muted {
    display: flex !important;
    z-index: 9999;
}

.stories.snapgram.list .story .item-link .info .name {
    color: #d1d3d7;
    display: block;
    font-size: 16px;
    width: 240px
}

#modal-stories {
    background: #17191A;
    height: 96vh;
    right: 0;
    margin-top: 0;
    overflow: auto !important;
    padding: 25px;
    position: fixed;
    top: 0;
    white-space: nowrap;
    width: 25vw;
    z-index: 9999;
}

#modal-stories .story.active {
    background: #424242;
}

/*#zuck-modal{*/
/*    left:auto;*/
/*    right:0*/
/*}*/

/*#zuck-modal .slider {*/
/*    right: -100vw;*/
/*    left: auto;*/
/*}*/
.stories.carousel .story {
    max-width: 100%
}

.zuck-modal-slider .item-link::after {
    background: transparent;
}

.stories.list .story > .item-link {
    display: block;
    text-align: right;
}

.stories.carousel .story > .item-link > .info {
    width: auto;
    margin-top: 0;
    vertical-align: middle;
}

.stories.snapgram .story.seen {
    opacity: .75;
}

.stories.snapgram.list .story .item-link .info .name {
    color: #d1d3d7;
}

.stories.snapgram.list .story.seen .item-link .info .name {
    color: #848484;
    width: 240px;
    display: block;
}

.stories.snapgram.list .story .item-link .info .time {
    color: #bbbbbb;
    font-size: 15px;
    margin-top: 5px;
}

.stories.list .story > .item-link > .item-preview {
    height: 48px;
    margin-left: 12px;
    margin-right: auto;
    max-width: 48px;
    width: 48px;
}

.carousel.stories.list.snapgram .story:first-child {
    margin-right: 6px;
    margin-left: 0;
}

#zuck-modal-content .story-viewer .slides .item:before {
    left: auto;
}

.stories.list .story {
    border-radius: 5px;
    display: block;
    margin-left: 0;
    max-width: 100%;
    padding: 10px;
    overflow: hidden;
}

.stories.snapgram .story.seen > a {
    color: #999 !important;
}

.stories.snapgram.list .story.seen .item-link .item-preview {
    background: #49494c;
}

#zuck-modal-content .story-viewer .head {
    left: 0;
    right: auto
}


.zuck-modal .story-viewer {
    width: 75vw;
    float: left;
}

.zuck-modal .stories {
    width: 25vw;
    float: left;
    overflow-y: auto; /* Ensure the stories list scrolls if needed */
    height: 100vh; /* Full height of the viewport */
}

.banner {
    height: 155px;
    margin: 30px 0 0 0;
    width: 100%;
    border-radius: 5px;
}

.card.card-break-news .card-body {
    padding: 0;
}

.card.card-opposite .card-text, .card.card-opposite .card-text-full {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.btn.btn-secondary.tag {
    background: #242526;
    border-color: transparent;
    /*border-color: #3d3e40;*/
    border-radius: 50px;
    padding: 0 0 0 10px;
    /*padding: 4px 5px 5px 10px;*/
    font-size: 14px;
}

.btn.btn-secondary.tag:hover {
    background: #3f3f3f;
    border-color: #3f3f3f;
}

.swiper-container-tags {
    width: 100%;
    height: 65px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.swiper-container-tags .swiper-slide {
    width: auto; /* Make slides width dynamic */
    height: 50px; /* Adjust height as needed */
    border-radius: 50px;
}

.swiper-slide .btn.btn-secondary.tag.active {
    background: #3f3f3f;
    border-color: #3f3f3f;
    color: #fff
}

.swiper-container-tags .swiper-slide img {
    width: 35px;
    /*width: 30px;*/
    /*height: 30px;*/
    height: 35px;
    border-radius: 100%;
    margin-left: 8px;
    vertical-align: middle;
}


.swiper-container-tags .swiper-scrollbar {
    background: rgba(0, 0, 0, 0.2); /* Optional: customize scrollbar background */
    border-radius: 10px; /* Optional: smooth rounding of scrollbar */
    height: 6px; /* Adjust scrollbar height */
}

.swiper-container-tags .swiper-scrollbar-drag {
    background-color: #333; /* Customize scrollbar handle color */
}

.swiper-container-tags .swiper-wrapper {
    transition: all 0.3s ease; /* Smooth transition */
}


/* Modal wrapper to hold both modal view and list view */
#zuck-modal {
    display: flex;
    flex-direction: row; /* Keep the modal on the left, and the list view on the right */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100vh; /* Full screen height */
    direction: rtl; /* RTL layout */
}

/* Modal view (left side) */
/*#zuck-modal-content {*/
/*    width: 65%; !* Set modal view width *!*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center; !* Center vertically *!*/
/*    !*margin-right: 2%; !* Space between the modal and list *!*!*/
/*    height: 100vh; !* Ensure modal takes up full height *!*/
/*    background-color: black; !* Set background color for the left side *!*/
/*}*/

/* List view (right side) */
/*#modal-stories {*/
/*    width: 30%; !* Set list view width *!*/
/*    overflow-y: auto; !* Enable scrolling for the list *!*/
/*    height: 100vh; !* Full screen height *!*/
/*    padding-left: 1rem;*/
/*    background-color: #f9f9f9; !* Background color for separation *!*/
/*}*/
/*#modal-stories .story .info {*/
/*    text-align: center;*/
/*    margin-top: 0.5rem;*/
/*}*/
#zuck-modal .slider > * {
    width: 75vw
}

#zuck-modal-content, #zuck-modal-content .story-viewer, #zuck-modal-content .story-viewer > .slides, #zuck-modal-content .story-viewer > .slides > * {
    width: 75vw;
    right: auto;
    left: 0;
}

.slides-pagination {
    direction: ltr;
}

.card.card-news .card-body img {
    height: auto;
    width: 100%;
}

.card-body.audio-post, .card-body.link-post {
    padding: 15px 12px;
}

.no-scroll {
    overflow: hidden;
}

.storiesWrapper {
    height: 230px; /* Set this to the desired height */
    position: relative;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top: 5px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*#zuck-modal-content .story-viewer.loading .head .loading, #zuck-modal-content .story-viewer.muted .tip.muted*/
/*{*/
/*    display: block;*/
/*}*/
#zuck-modal-content .story-viewer .tip.muted {
    bottom: 105px;
}

#zuck-modal-content .story-viewer .tip.link {
    bottom: 55px;
}

/*#zuck-modal-content .story-viewer .tip {*/
/*    display:block*/
/*}*/
#zuck-modal-content .story-viewer .slides-pagination .previous, #zuck-modal-content .story-viewer .slides-pagination .next {
    background: #424242;
    border-radius: 100%;
    cursor: pointer;
}

#zuck-modal-content .story-viewer .slides-pagination span {
    font-size: 5px;
    margin: 0;
}

.fullscreen {
    position: absolute;
    top: auto;
    right: 60px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: white;
    bottom:30px
}

.fullscreen-icon {
    cursor: pointer;
    transition: transform 0.3s ease, fill 0.3s ease;
    position: absolute;
    right: 10px;
    top: auto;
    z-index:9999;
}

.fullscreen-icon:hover {
    transform: scale(1.1);
    fill: #ccc; /* Change this color as needed */
}

.muteUnmute {
    position: absolute;
    right: 10px;
    bottom: 10px;
    line-height: 0;
}

.zuck-modal-slider.carousel.stories.list.snapgram .category-logo {
    display: none;
}


.popup-overlay-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
    z-index: 1000;
}

.popup-content-image {
    position: relative;
    max-width: 90%;
    max-height: 80%;
    animation: zoomIn 0.3s ease;
}

.popup-content-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.close-btn-image {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    text-align: center;
    height: 30px;
}

.close-btn-image svg {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

.zoom-image {
    position: relative;
    overflow: hidden;
}

.zoom-icon {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: #000;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    padding: 5px;
}

.zoom-image:hover .zoom-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.zoom-image:hover .zoom-icon path {
    stroke: #fff;
}

.hamburger {
    display: none;
}

.sidebar {
    display: block;
    transform: none;
}

.lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.lazy-loaded {
    opacity: 1;
}

.card.card-break-news .card-footer {
    padding-top: 0;
}

.bookmark {
    /*position: relative;*/
    cursor: pointer;
}

.bookmark svg {
    fill: #808080;
    transition: fill 0.3s ease;
}

.bookmark.saved svg {
    fill: #ffffff; /* Change to white when saved */
    transition: fill 0.3s ease;
}

/* Bounce text styling */
.bubble-message {
    position: absolute;
    top: -30px;
    width: 150px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: bubbleMessage 0.4s ease forwards, fadeOutMessage 1.6s ease forwards;
}

@keyframes bubbleMessage {
    0% {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -20px);
    }
}

@keyframes fadeOutMessage {
    0%, 80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.share-btn {
    position: relative;
    cursor: pointer;
}

.share-btn svg {
    fill: #808080;
    transition: fill 0.3s;
}

.share-btn:hover svg {
    fill: #333;
}

.social-icons {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    background: #c8c8c8;
    border-radius: 20px;
    padding: 5px;
    transition: all .3s ease-in-out;
}

.share-btn:hover .social-icons {
    opacity: 1;
    pointer-events: auto;
}

.social-icons a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #808080;
    color: white;
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Sequential animation */
.share-btn:hover .social-icons a:nth-child(1) {
    transition-delay: 0.1s;
    transform: translateX(0);
    opacity: 1;
}

.share-btn:hover .social-icons a:nth-child(2) {
    transition-delay: 0.2s;
    transform: translateX(0);
    opacity: 1;
}

.share-btn:hover .social-icons a:nth-child(3) {
    transition-delay: 0.3s;
    transform: translateX(0);
    opacity: 1;
}

.share-btn:hover .social-icons a:nth-child(4) {
    transition-delay: 0.4s;
    transform: translateX(0);
    opacity: 1;
}

.share-btn:hover .social-icons a:nth-child(5) {
    transition-delay: 0.5s;
    transform: translateX(0);
    opacity: 1;
}

.white-logo {
    display: block;
}

.blue-logo {
    display: none;
}

/***********************************Light Mode***************************************/
.light-mode .shortcut-popup .my-head {
    border-bottom: 1px solid #e9e6e6;
}

.light-mode .tab-pane .nice-select {
    border: 1px solid #ececec;
}

.light-mode .favourite-sources span {
    color: #262626;
}

.light-mode .blue-logo {
    display: block;
    margin: auto;
}

.light-mode .white-logo {
    display: none;
}

.light-mode .logo a {
    background: url("../images/rassd_logo.png") no-repeat center center / contain;
}

.light-mode .like-button span {
    color: #000
}

.light-mode .top-bar {
    background: #fff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, .12);
}

.light-mode #sidebar a {
    color: #000;
    /*border: 1px solid transparent;*/
}

.light-mode #sidebar a:hover, .light-mode #sidebar a.active {
    background-color: #ffffff;
    /*border: 1px solid #e9e9e9;*/
}

.light-mode .card {
    border: 1px solid #e6e7ea;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
    background: #fff;
}

.light-mode .share-block .dropdown-menu {
    background-color: #dedede;
}

.light-mode .share-block .share .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #aeabab
}

.light-mode .share-block .share .dropdown-menu li a {
    color: #000000;
}

.light-mode .card.card-opposite .card-text, .light-mode .card.card-opposite .card-text-full {
    color: #222;
}

.light-mode .share-block .share .dropdown-menu li:hover a {
    background: #c2c2c2;
}

.light-mode .card-header ul li:last-child a {
    color: #000;
}

.light-mode h5.card-title {
    color: #000
}

.light-mode .card-text, .light-mode .card-text-full {
    color: #000;
}

.light-mode .theme-switcher {
    background: #f8f8f8;
    border: 1px solid #ededed;
}

.light-mode .theme-switcher .light-icon path {
    fill: #333;
}

.light-mode .search {
    background: #f8f8f8;
    border: 1px solid #ededed;
}

.light-mode .search path {
    fill: #333;
}

.light-mode .profile {
    background: #f8f8f8;
    border: 1px solid #ededed;
}

.light-mode .profile path {
    fill: #333;
}

.light-mode .icon-default path {
    fill: #000000;
}

.light-mode .favorite-sources {
    color: #000
}

.light-mode .tooltip-inner {
    color: #000;
    background-color: #c1c1c1;
}

.light-mode .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .light-mode .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #c1c1c1;
}

.light-mode .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .light-mode .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #c1c1c1;
}

.light-mode .post-options {
    border-top: 1px solid #c8c8c8;
}

.light-mode hr.hr {
    border: 1px solid #c8c8c8;
}

.light-mode .stories.snapssenger.carousel .story > .item-link {
    border: 1px solid #c8c8c8;
}

.light-mode .showmore-wrapper {
    background: #fff;
}

.light-mode .showmore-wrapper svg path {
    fill: #000;
}

.light-mode .showmore-wrapper:hover svg path {
    fill: #fff;
}

.light-mode a.showMore:hover .showmore-wrapper {
    background: #777;
}

.light-mode a.showMore:hover .showmore-wrapper svg path {
    fill: #fff;
}

.light-mode .share-block svg:hover path {
    fill: #777;
}

.light-mode .showmore-wrapper svg path
.light-mode .scroll-to-top {
    background-color: #0080f8;
}

.light-mode .like-button svg path {
    stroke: #858585;
}

.light-mode .card.widget.widget-side .hot-links li a:hover {
    color: #000000;
}

.light-mode span.badge.badge-light {
    color: #b6b6b6;
}

.light-mode .read-more {
    color: #0080f8;
}

.light-mode .read-more svg path {
    fill: #0080f8;
}

.light-mode .search-popup, .light-mode .search-box {
    background-color: rgb(255 255 255);
}

.light-mode .search-box h2 {
    color: #333;
}

.light-mode a#close-popup-icon {
    color: #333
}

.light-mode .search-box input {
    background-color: #f4f4f4;
    border: 1px solid #e9e9e9;
}

.light-mode .loading-spinner {
    border: 5px solid rgb(0 0 0 / 20%);
    border-top: 5px solid #000000;
}

.light-mode .add-source a svg path {
    fill: #777;
}

.light-mode .add-source:hover a svg path {
    fill: #000000;
}

.light-mode .card-footer, .light-mode .card-header {
    background: transparent;
}

.mobile-copyright {
    display: none
}

.light-mode .social-icons {
    background: #f0f2f5;
}

.save-content-btn.bookmarked svg {
    /*fill: #FFD700; !* لون ذهبي عند الإضافة إلى المفضلة *!*/
}

.back-to-login {
    color: #a3a398;
}

/* التأكد من ظهور التوستر في المقدمة */
.toast-container {
    z-index: 9999999999999;
    left: 50%;
    transform: translateX(-50%);
}

.toast {
    opacity: 0;
    transform: translateY(20px); /* البدء من الأسفل */
    transition: opacity 0.3s ease, transform 0.3s ease; /* انتقال سلس */
}

.toast.show {
    opacity: 1;
    transform: translateY(0); /* الظهور في الموضع الطبيعي */
}

.toast.hiding {
    opacity: 0;
    transform: translateY(20px); /* الاختفاء للأسفل */
}

/* ألوان التوستر */
.toast.bg-success {
    color: white;
}

.toast.bg-danger {
    color: white;
}

.toast.bg-primary {
    color: white;
}

.toast.bg-warning {
    color: white;
}

/* تنسيق أيقونة المفضلة */
/*.save-content-btn .icon-saved path { fill: #ccc; } !* لون رمادي للحالة غير المفضلة *!*/
/*.save-content-btn.bookmarked .icon-saved path { fill: #ff0000; } !* لون أحمر للحالة المفضلة *!*/
.save-content-btn {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}


.light-mode .card.widget.widget-side .designed:hover img {
    filter: brightness(0%) contrast(100%);
}

.light-mode .bookmark .icon-saved path {
    fill: #0080f8
}

.light-mode .popup-content {
    background-color: #ffffff;
    border: 1px solid #ededed;
    color: #4d4d4d
}

.light-mode .nav-tabs .nav-item.show .nav-link, .light-mode .nav-tabs .nav-link.active {
    color: #646464;
    background: #e7e7e7;
}

.light-mode .nav-tabs .nav-link:focus, .light-mode .nav-tabs .nav-link:hover {
    color: #646464;
    border: 0 none;
}

.light-mode .btn.btn-dark-gray.follow {
    background: transparent;
    border: 1px solid #787878;
    color: #333;
}

.light-mode .btn.btn-dark-gray.follow:hover {
    background: #777;
    border: 1px solid #787878;
    color: #fff;
}

.light-mode .btn.btn-dark-gray.follow.active {
    background: #787878;
    color: #fff
}

.light-mode .nav.nav-tabs {
    border-color: #e9e6e6;
}

.light-mode .input-group-text {
    background-color: #ededed;
}

.light-mode .form-control {
    background: #fff;
    transition: all .3s ease-in-out;
    color: #333;
    border: 1px solid #ededed;
}

.light-mode .input-group .form-control {
    color: #333;
}

.nav.nav-tabs li {
    margin-left: 1px;
}

.light-mode .effect {
    background: #0080f8;
    color: #fff
}

.light-mode .effect.effect-2:before {
    background-color: #0076e4;
}

.light-mode .nav-tabs .nav-link:focus, .light-mode .nav-tabs .nav-link:hover {
    color: #8d8d8d;
    border: 0 none;
}

.light-mode p.footer-form {
    color: #333
}

.light-mode #modal-stories {
    background: #ffffff;
}

.light-mode .stories.snapgram.list .story .item-link .info .name {
    color: #000000;
}

.light-mode .stories.snapgram.list .story .item-link .info .time {
    color: #707070;
}

.light-mode #modal-stories .story.active {
    background: #cacaca;
}

.light-mode .close-btn svg path {
    stroke: #333;
}

.light-mode .close-btn:hover svg path {
    stroke: #0076e4
}

.light-mode .close-btn {
    background: #fff;
    border: 1px solid #ededed;
}

.logo.desktop {
    display: block;
}

.logo.mobile, .show-mobile {
    display: none !important;
}

.search-container {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.search {
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #333;
    color: white;
    transition: width 0.3s ease;
    overflow: hidden;
}

.search.expanded {
    width: 100%;
    min-width: 200px;
    border-radius: 30px;
    font-size: 13px;
    padding: 12px;
}

#search-input {
    border: none;
    outline: none;
    background: transparent;
    color: white;
    flex: 1;
    padding-left: 5px;
    display: none;
}

.search.expanded #search-input {
    display: block;
}

.filter-wrap {
    width: 68%;
    margin-left: 2%;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #333333 inset !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: #e0e0d9 !important;
}

.nice-select .nice-select-dropdown {
    right: 0;
    left: auto;
}

a#search-icon {
    display: block;
    text-align: center;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .logo.desktop {
        display: none;
    }

    .logo.mobile, .show-mobile {
        display: flex !important;
        margin: 0 auto;
    }

    .search-container {
        display: none;
    }

    #sidebar .card.widget.widget-side p.designed a {
        display: inline-block;
    }

    .banner {
        height: auto;
        margin: 15px 0 0 0;
    }

    .light-mode .icon-default path {
        fill: #fff;
    }

    .mobile-copyright {
        display: block;
        margin-top: 30px;
    }

    .light-mode .sidebar {
        background: #ededed;
    }

    #modal-stories {
        display: none
    }

    #zuck-modal-content, #zuck-modal-content .story-viewer, #zuck-modal-content .story-viewer > .slides, #zuck-modal-content .story-viewer > .slides > * {
        width: 100vw;
    }

    #zuck-modal-content .story-viewer .head .left {
        display: inline-block;
    }

    .container {
        max-width: 100%;
    }

    #menuContainer {
        visibility: hidden; /* Initially hidden */
        opacity: 0;
    }

    #menuContainer.menu-responsive {
        visibility: visible; /* Shown only when JavaScript adds the class */
        opacity: 1;
    }

    .zuck-arrow.left {
        left: 0;
    }

    .zuck-arrow.right {
        right: 0;
    }

    #post-container {
        width: 60%;
        margin: 0 auto;
        padding-bottom: 55px;
    }

    #menuContainer ul.menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .menu-responsive {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        background: #000;
        padding: 15px;
        left: 0;
    }

    .left-column {
        display: none
    }

    .sidebar {
        visibility: hidden; /* Hide the sidebar */
        position: fixed;
        width: 250px;
        height: 100vh;
        background: #000;
        top: 55px;
        right: -250px;
        z-index: 9999;
        padding: 20px;
        transition: all 0.3s ease-in-out;
        transform: translateX(0);
    }

    /* Hamburger button styling */
    .hamburger {
        cursor: pointer;
        display: inline-block;
        z-index: 1100;
        margin-left: 10px;
    }

    .hamburger .line {
        width: 30px;
        height: 2px;
        background-color: #fff;
        margin: 6px 0;
        transition: all 0.3s ease; /* Line animation */
    }

    .light-mode .hamburger .line {
        width: 30px;
        height: 2px;
        background-color: #000000;
    }

    /* Opened Sidebar Style */
    .sidebar.active {
        visibility: visible;
        right: 0;
    }

    /* Hamburger Icon Close Animation */
    .hamburger.open .line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.open .line:nth-child(2) {
        opacity: 0; /* Hide middle line */
    }

    .hamburger.open .line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

@media (max-width: 768px) {

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        text-align: center;
        margin: 10px 0;
    }

    .footer-section h3::after {
        left: 25%;
        width: 50%;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-art {
        position: relative;
        width: 100%;
        height: 150px;
        margin-top: 20px;
    }

    #picassoCanvas {
        width: 100%;
        height: 100%;
    }

    .card-body img {
        width: 100%;
        height: auto;
    }

    #post-container {
        width: 100%;
        padding: 0;
    }

    .card {
        border-radius: 0;
    }

    .light-mode .card {
        border-top: 1px solid #e6e7ea;
        border-bottom: 1px solid #e6e7ea;
        border-right: 0 none;
        border-left: 0 none;
    }

}

@media (max-width: 620px) {
    .popup-content {
        max-width: 400px;
        max-height: 400px;
        min-width: 400px;
        min-height: 500px;
    }
}

@media (max-width: 480px) {
    .popup-content {
        max-width: 320px;
        max-height: 470px;
        min-width: 320px;
        min-height: 470px;
    }

    .nav-link {
        font-size: 14px;
    }

    .effect {
        width: 100px;
        padding: 4px 0 10px;
    }

    .swiper-container {
        height: 457px
    }

    .slide-bg {
        background-size: cover;
    }

    .video-container {
        height: 280px;
    }

    .vimeo-video, .youtube-video {
        height: 280px;
    }

    .storiesWrapper {
        height: 180px;
    }

    .stories.snapssenger.carousel .story > .item-link {
        max-height: 190px
    }

    .stories.snapssenger.carousel .story {
        max-height: 190px
    }

    .menu-item {
        margin: 0;
        padding: 10px;
    }
}

@media all and (device-width: 820px) and (device-height: 1180px) and (orientation: portrait) {
    /*body { background: red !important; } !* your css rules for ipad portrait *!*/
    .sidebar {
        padding: 65px 0 20px 35px;
    }

    .banner {
        height: auto
    }
}

@media all and (device-width: 820px) and (device-height: 1180px) and (orientation: landscape) {
    /*body { background: blue!important; } !* your css rules for ipad landscape *!*/
    .sidebar {
        padding: 65px 0 20px 35px;
    }
}

.reactions {
    display: none;
    position: absolute;
    top: -40px;
    left: 0;
    flex-direction: row;
    gap: 10px;
}

.bubble {
    position: absolute;
    font-size: 24px;
    animation: bubbleUp 1s ease-out forwards;
    pointer-events: none;
}

@keyframes bubbleUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.animate-count {
    animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

.animate-count {
    animation: countGrow 0.3s ease-in-out;
}

@keyframes countGrow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/*admin*/
.user-profile {
    padding: 15px 10px;
    border-radius: 10px;
}

.user-profile h2 {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.light-mode .user-profile {
    background: #fff;
}

.input-group .btn-edit {
    border: none;
    background: none;
    cursor: pointer;
    color: #6c757d;
}

.input-group .btn-edit:hover {
    color: #0d6efd;
}

.input-group input[readonly] {
    background-color: #ededed;
    cursor: not-allowed;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

section.admin-section:first-child {
    margin-top: 0;
}

section.admin-section {
    background: #fff;
    margin-top: 20px;
    border-radius: 10px;
    padding: 25px;
}

.admin-section h2 {
    font-size: 1.2rem;
}

.profile-picture {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #6c757d;
}

.light-mode .stats-box {
    background-color: #f0f2f5;
}

.stats-box {
    background-color: #f0f2f5;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

.stats-box:hover {
    /*transform: translateY(-10px);*/
    background-color: #0080f8;
    color: #ffffff;
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);*/
}

.btn.btn-primary {
    background-color: #0080f8;
}

.stats-box h3 {
    font-size: 36px;
    margin: 0;
    font-weight: bold;
    color: #3e3c3c;
}

.stats-box:hover h3 {
    color: #fff
}

.stats-box p {
    font-size: 16px;
    margin: 0;
    color: #777;
}

.stats-box:hover p {
    color: #fff
}

.stats-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    fill: #9fa0a1;
    transition: fill 0.3s ease;
}

.stats-box:hover .stats-icon {
    fill: #ffffff;
}

.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.stats-container .stats-box {
    flex: 1 1 calc(30% - 20px);
}

.total-count {
    font-weight: 600;
    font-size: 11px;
}

.delete-controls {
    display: flex;
    gap: 10px;
}

.select-card {
    margin-right: 10px;
}

.favourite-sources li {
    margin: 0 0 10px;
    padding: 5px 10px;
    /*border-radius: 5px;*/
}

.favourite-sources img {
    width: 38px;
    height: 38px;
    border-radius: 100%;
    margin-left: 12px;
    vertical-align: middle;
}

.pr-0 {
    padding-right: 0;
}

/* Base styles for the checkbox label */
.modern-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    vertical-align: middle;
    font-size: 16px;
    color: #333;
    user-select: none;
    margin: 10px 0;
}

/* Hide the original checkbox */
.modern-checkbox input {
    display: none;
}

/* Create the custom checkmark */
.modern-checkbox .checkmark {
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: all 0.3s ease;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

/* Add hover effect */
.modern-checkbox:hover .checkmark {
    background-color: #e6f7ff;
    border-color: #0080f8;
}

/* Add checkmark when checkbox is checked */
.modern-checkbox input:checked + .checkmark {
    background-color: #0080f8;
    border-color: #0080f8;
}

/* Add a tick icon (checkmark) */
.modern-checkbox .checkmark::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    display: none;
}

/* Display the checkmark when checked */
.modern-checkbox input:checked + .checkmark::after {
    display: block;
}

/* Smooth scaling effect when checked */
.modern-checkbox input:checked + .checkmark {
    transform: scale(1.1);
}

.profile-container {
    position: relative;
    display: inline-block;
    margin-right: 5px;
}

/* User profile image */
.user-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.user-image:hover {
    transform: scale(1.1);
}

/* Dropdown menu styles */
.profile-dropdown {
    position: absolute;
    top: auto; /* Adjust to align below the profile image */
    margin-top: 5px;
    left: 0;
    right: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
    z-index: 10;
}

/* Dropdown item styles */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f4f4f4;
}

/* Icon styles */
.dropdown-item .icon {
    width: 20px;
    height: 20px;
    color: #333;
    margin-left: 10px;
    flex-shrink: 0;
}

/* Text styles */
.dropdown-item span {
    font-size: 14px;
    color: #333;
}

/* Show the dropdown on hover */
.profile-container:hover .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.option-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
}

.card, .favourite-sources {
    transition: all .3s ease-in-out;
}

.favourite-sources span {
    color: #a8aab0;
}

.user-profile .title {
    padding: 10px;
    border-bottom: 1px solid #f2eaea;
    margin-bottom: 10px;
}

.card.selected, .favourite-sources .selected {
    background-color: #f8e6e6;
    transition: all .3s ease-in-out;
}

.btn.btn-dark-gray {
    background: #353738;
    border-radius: 50px;
    padding: 5px 15px;
    transition: all .3s ease-in-out;
    color: #fff;
    height: 40px;
    width: auto;
    margin-left: 5px;
    border: 1px solid transparent;
}

.tab-pane .nice-select {
    background: transparent;
    border: 1px solid #484848;
    height: 45px;
}

.btn.btn-dark-gray:hover {
    background: transparent;
    border: 1px solid #787878;
    color: #a4a8b0;
}

.btn.btn-dark-gray:last-child {
    margin-left: 0;
}

.btn.btn-dark-gray span {
    margin-right: 5px;
}

.no-results {
    background: #fff;
    padding: 100px;
    font-size: 27px;
    color: #2c2c2c;
    border-radius: 10px;
    border: 1px solid #e6e7ea
}

.no-results p {
    margin: 10px 0 0 0;
}

.favourite-sources .nice-select {
    line-height: 32px;
    padding-left: 14px;
    padding-right: 25px;
    margin-top: 1px;
}

.input-group .nice-select {
    width: 92%;
    color: #4d4d4d;
    text-align: right !important;
}

.shortcut-new {
    border-bottom: 1px solid #484848;
}

.shortcut-new ul {
    border-bottom: 0 none;
}

.light-mode .shortcut-new {
    border-bottom: 1px solid #e1e1e1;
}

.light-mode input#popup-search-input {
    /*background: #e7e7e7;*/
    background: transparent;
    color: #8f8d8d;
    /*border: 1px solid #f1f1f1;*/
    border: 0 none;
}

.light-mode .btn.btn-dark-gray {
    background: #a7a7a7;
}

.light-mode .btn.btn-dark-gray:hover {
    color: #fff
}

.light-mode .btn.btn-dark-gray:hover {
    border: 1px solid #a7a7a7;
}

.input-group .nice-select .nice-select-dropdown {
    left: 0
}

input#popup-search-input {
    border-radius: 25px;
    height: 35px;
    padding: 0 15px;
    text-align: right;
    font-size: 15px;
    background: #242526;
    color: #b3b2b2;
    border: 0 none;
    /*border: 1px solid #484848;*/
}

.eye {
    animation: blink 3s infinite;
    transform-origin: center;
    fill: #0080f8
}

@keyframes blink {
    0%, 90%, 100% {
        transform: scaleY(1);
        opacity: 1;
    }
    95% {
        transform: scaleY(0.1);
        opacity: 0.5;
    }
}

/* Sad Mouth Animation */
.mouth {
    animation: sad 3s infinite;
}

@keyframes sad {
    0%, 90%, 100% {
        d: path("M14 21 Q16 19 18 21"); /* Neutral line */
    }
    50% {
        d: path("M14 21 Q16 23 18 21"); /* Sad frown */
    }
}


.option-wrapper.sticky {
    position: fixed;
    top: 65px;
    z-index: 999;
}

.btn.btn-outline-info:hover {
    color: #fff;
    background: #0b85f8;
}

.btn.btn-outline-info {
    border-color: #0b85f8;
    color: #0b85f8;
}

.notfound-page {
    margin: 100px 0
}

a.button.btn-solid.large.scaleup.bg_primary {
    background: #0080f8;
    display: inline-block;
    color: #fff;
    padding: 8px 25px;
    text-align: center;
    height: 46px;
    border-radius: 10px;
    transition: all .3s ease-in-out;
}

a.button.btn-solid.large.scaleup.bg_primary:hover {
    background: #0575df;
}


.youtube-container {
    position: relative;
}

.youtube-player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.youtube-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/*New Story*/
.stories-container {
    padding: 20px 0;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.stories-container .swiper-button-next {
    right: -20px;
}

.stories-container .swiper-button-prev {
    left: -20px;
}

.stories-container .swiper-button-next:hover, .stories-container .swiper-button-prev:hover {
    background-color: #4b4949;
}

.stories-container .swiper-button-next:hover svg path, .stories-container .swiper-button-prev:hover svg path {
    fill: #fff;
}

.stories-container .swiper-button-next, .stories-container .swiper-button-prev {
    width: 40px;
    height: 40px;
    transition: all .3s ease-in-out;
    background: #eeeeee;
}

.stories-container .swiper-button-next svg path, .stories-container .swiper-button-prev svg path {
    transition: all .3s ease-in-out;
    fill: #121212;
}

#stories-swiper .swiper-slide {
    width: 138px !important;
    flex-shrink: 0;
    transition: transform 0.2s ease-out; /* ✅ حركة ناعمة */
    cursor: pointer;
}

#stories-swiper .swiper-slide:active {
    transform: scale(0.95); /* ✅ يصغر 5% */
}

#stories-swiper .story-card {
    width: 138px;
    height: 225px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    cursor: pointer;
}

#stories-swiper .story-card:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* للقصص المقروءة - تأثير مختلف شوية */
#stories-swiper .story-card.seen:active {
    transform: scale(0.93);
    opacity: 0.9;
}

/* Story card */


div#stories-splide-track {
    padding: 0 !important;
}

.splide__arrows--rtl .splide__arrow--prev {
    left: auto;
    right: -1.2em;
}

.splide__arrows--rtl .splide__arrow--next {
    left: -1.2em;
    right: auto;
}

.story-card .story-overlay {
    display: none;
}

.splide__slide {
    opacity: 0.6;
    transition: all 0.3s;
    cursor: pointer;
    order: 0;
}

.splide__slide.is-active {
    opacity: 1;
}

.splide__slide.seen-slide {
    order: 1;
}

.story-card {
    position: relative;
    height: 228px;
    width: 138px;
    border-radius: 5px;
    overflow: hidden;
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    /*border: 3px solid transparent;*/
    transition: border-color 0.3s;
}

#stories-swiper .swiper-slide:first-child {
    margin-right: 0 !important;
}

/* آخر slide بدون margin */
#stories-swiper .swiper-slide:last-child {
    margin-left: 0 !important;
}

.story-card.seen {
    opacity: 0.5;
    /*border-color: #444;*/
    /*filter: grayscale(0.5);*/
}

.story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

.story-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.story-meta {
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.story-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 38px;
    height: 38px;
    /*background: #fff;*/
    background: radial-gradient(ellipse at 70% 70%, #ffffff 8%, #ffffff 42%, #2f8de5 82%);
    border-radius: 50%;
    overflow: hidden;
    padding: 2px
    /* border: 3px solid #0083f8;*/
}

.splide__arrow {
    height: 40px;
    width: 40px;
    background: #eee;
    cursor: pointer !important;
    transition: all .3s ease-in-out;
}

.story-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.modal-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 1000;
    transition: right 0.4s ease;
    display: flex;
    margin-top: 25px;
}

.modal-sidebar.open {
    right: 0;
}

.modal-sidebar-stories {
    width: 380px;
    background: #17191A;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 55px 20px 20px;;
}

.modal-sidebar-stories::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.modal-sidebar-story-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    /*background: #2a2a2a;*/
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
    border: 2px solid transparent;
}

.modal-sidebar-story-item:hover {
    background: #3a3a3a;
}

.modal-sidebar-story-item.active {
    background: #424242;
}

.modal-sidebar-story-item.seen {
    opacity: 1;
    /*border-color: #444;*/
    /*filter: grayscale(0.5);*/
}

.modal-sidebar-story-item.seen .modal-sidebar-story-icon, .modal-sidebar-story-item.seen .modal-sidebar-story-info {
    opacity: .5;
}

.modal-sidebar-story-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 2px;
    background: radial-gradient(ellipse at 70% 70%, #ffffff 8%, #ffffff 42%, #2f8de5 82%) !important;
}

.modal-sidebar-story-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.modal-sidebar-story-info {
    flex: 1;
    overflow: hidden;
}

.modal-sidebar-story-title {
    font-size: 16px;
    margin-bottom: 8px;
    color: #d1d3d7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.modal-sidebar-story-meta {
    font-size: 12px;
    opacity: 0.9;
    display: flex;
    /*flex-direction: column;*/
    /*gap: 3px;*/
    flex-direction: row;
    gap: 60px;
    color: #d1d3d7
}
.modal-sidebar-story-meta .meta-row:first-child {
    letter-spacing: 1.2px;
}
.splide__arrow:hover:not(:disabled) {
    opacity: .9;
    background: #4b4949;
}

.splide__arrow:hover svg {
    fill: #fff;
    transition: all .3s ease-in-out;
}

.meta-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.modal-sidebar-story-meta .meta-row:nth-of-type(2) span {
    background: #424242;
    border-radius: 5px;
    padding: 2px 7px 6px;
    display: block;
}

.story-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #000;
    padding: 20px;
}

.close-btn {
    position: absolute;
    top: 55px;
    left: 40px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.close-btn:hover {
    /*background: rgba(255, 255, 255, 0.3);*/
}

.story-bottom-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 15;
    width: 90%;
    max-width: 500px;
}

.story-bottom-controls.visible {
    display: flex;
}

.sound-toggle-btn {
    padding: 12px 30px;
    background: rgba(0, 0, 0, .5);
    border: 0 none;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    /*backdrop-filter: blur(10px);*/
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);*/
}

.sound-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
    /*border-color: rgba(255, 255, 255, 0.5);*/
}

#sound-text svg {
    margin-top: 2px;
}

#sound-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.story-link-btn {
    padding: 12px 35px;
    background: rgba(0, 0, 0, .5);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    /*box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);*/
    display: flex;
    align-items: center;
    gap: 8px;
}

.story-link-btn:hover {
    transform: translateY(-2px);
    /*box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);*/
}

.story-content {
    max-width: 500px;
    width: 100%;
    height: calc(100vh - 110px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.story-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    display: none;
}

.story-media.active {
    display: block;
}

#media-container {
    width: 100%;
    flex: 1;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
    min-height: 0;
}

.story-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    pointer-events: none;
    z-index: 12;
}

.nav-btn {
    width: 50px;
    height: 50px;
    background: #424242;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

button#prev-item-btn {
    margin-right: -100px;
}

button#next-item-btn {
    margin-left: -100px
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.progress-bars {
    display: flex;
    gap: 5px;
    padding: 0 5px;
    z-index: 15;
    height: 1px;
    flex-shrink: 0;
}

.progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #fff;
    width: 0%;
    transition: width 0.1s linear;
}

.progress-fill.completed {
    width: 100%;
}

/* Loading Container */
.stories-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    /*padding: 40px 0;*/
    width: 100%;
    min-height: 200px;
}

.stories-loading.hidden {
    display: none;
}

.loading-skeleton {
    display: flex;
    gap: 6px;
    padding: 0 20px;
    overflow: hidden;
}


.light-mode .modal-sidebar .modal-sidebar-stories {
    background: #fff;
}
.light-mode .modal-sidebar-story-item.seen .modal-sidebar-story-icon,
.light-mode .modal-sidebar-story-item.seen .modal-sidebar-story-info {
    opacity: 0.7;
}
.light-mode .story-viewer {
    background: #F8F9FA;
}
.light-mode button#close-modal-btn {
    background: transparent;
    border: 0 none;
}

.light-mode .modal-sidebar- {
}

.light-mode .modal-sidebar-story-item.active {
    background: #CACACA;
}

.light-mode .modal-sidebar-story-title {
    color: #333;
}

.light-mode .modal-sidebar-story-meta {
    color: #000000;
}

.light-mode .modal-sidebar-story-meta .meta-row:nth-of-type(2) span {
    background: #a7a7a7;
}

.light-mode .modal-sidebar-story-item:hover {
    background: #cacaca;
}

.light-mode .skeleton-card {
    background: linear-gradient(
            90deg,
            #f0f0f0 0%,
            #e0e0e0 20%,
            #f0f0f0 40%,
            #f0f0f0 100%
    );
}

.light-mode .nav-btn {
    background: #b8b8b8;
}

.light-mode .nav-btn:hover {
    background: #0095F6;
}

.light-mode .scroll-to-top {
    background-color: #0080f8;
}

.light-mode .progress-bar {
    flex: 1;
    height: 3px;
    /*background: rgb(139 139 139 / 30%);*/
    background: #DBDBDB
}
.light-mode .progress-fill {
    background: rgba(107, 101, 101, 0.61);
}
.light-mode #media-container {
    background: #e1e1e1;
}
.skeleton-card {
    width: 138px;
    height: 225px;
    border-radius: 12px;

    background: linear-gradient(
            90deg,
            #1a1a1a 0%,
            #2d2d2d 20%,
            #1a1a1a 40%,
            #1a1a1a 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    flex-shrink: 0;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.loading-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.loading-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0184F9 0%, #1276cf 100%);
    animation: bounce 1.4s infinite ease-in-out;
}

.loading-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0.8) translateY(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2) translateY(-20px);
        opacity: 1;
    }
}

/* منع التفاعل مع السهم المعطل */
.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* التأكد من السهم العادي يشتغل */
.swiper-button-next:not(.swiper-button-disabled),
.swiper-button-prev:not(.swiper-button-disabled) {
    /*pointer-events: auto;*/
    cursor: pointer;
}

/* تأثير إضافي للسهم المعطل */
.swiper-button-disabled {
    opacity: 0.2;
    filter: grayscale(100%);
    transform: scale(0.9);
    transition: all 0.3s ease;
}

/* السهم النشط */
.swiper-button-next,
.swiper-button-prev {
    pointer-events: auto; /* ✅ التأكد إنه يشتغل */
    z-index: 20; /* ✅ فوق كل حاجة */
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .modal-sidebar-stories {
        width: 100%;
    }

    .story-viewer {
        display: none;
        padding: 10px;
    }

    .modal-sidebar.open .story-viewer {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1001;
    }

    .story-content {
        height: calc(100vh - 20px);
    }
}