.floatingMessage {
    position: fixed; /* عنصر را در موقعیت ثابت قرار می‌دهد */
    top: 50%;
    left: 50%;
    background-color: hsl(var(--primary-btn)); /* رنگ سبز ملایم */
    border-radius: 10px; /* گوشه‌های گرد را با شعاع 10 پیکسل ایجاد کنید */
    transform: translate(-50%, -50%); /* عنصر را به اندازه نصف عرض و ارتفاعش به سمت چپ و بالا جابجا می‌کند */
    z-index: 9999;
    padding: 5px; /* اطمینان حاصل کنید که div روی همه عناصر دیگر قرار می‌گیرد */
}
.success-message {
    margin-right: 10px;
    color: black;
    background-color: rgb(207, 252, 209); /* رنگ سبز ملایم */
    border-radius: 10px;
    padding: 5px;
    display: flex;
    justify-content: center; /* مرکز کردن عناصر داخلی به صورت افقی */
    align-items: center;
}
.success-message-span {
 margin-right:5px;
 margin-left:5px;
}
    .category-link.active {
    color: hsl(var(--primary-btn)); /* یا هر رنگ دلخواه دیگری */
    font-weight: bold; /* یا هر استایل دیگری که می‌خواهید */
}
.permissioncontainer {
    position: relative;
    text-align: center;
    border: 2px solid #cdcfd0; /* اضافه کردن خط دور */
    border-radius: 10px; /* انتخابی: گرد کردن گوشه‌ها */
    padding: 10px; /* اضافه کردن فاصله برای عنوان */
    display: flex;
    justify-content: space-around; /* توزیع مساوی المان‌ها */
    align-items: center; /* وسط‌چینی عمودی المان‌ها */
}

.permissiontitle {
    position: absolute;
    top: -16px; /* جابجایی به بالا برای قرار گرفتن روی خط دور */
    left: 50%;
    border-radius:2px;
    transform: translateX(-50%);
    padding: 5px 10px; /* اضافه کردن پدینگ برای پس‌زمینه سفید */
    background-color:rgb(255, 255, 255); /* پس‌زمینه سفید */
    font-size: 15px;
    z-index: 1; /* اطمینان از قرارگیری در بالای خط دور */
}
.dark .permissiontitle {
    background-color: rgb(0, 0, 0, 0.8); /* پس‌زمینه تیره در حالت دارک مود */
    color: white; /* تغییر رنگ متن به سفید برای وضوح بیشتر در حالت دارک مود */
}
.dark .permissioncontainer {
    border-color: rgba(0, 0, 0, 0.5); /* رنگ بوردر تیره‌تر در حالت دارک مود */
}

.permissioncontainer a,
.permissioncontainer img {
    margin: 10px; /* فاصله بین المان‌ها */
}

    .child-comment {
        margin: 10px;
    }

    .comment-main {
        padding: 5px;
    }

    .category-link:hover {
        cursor: pointer; /* یا هر مقدار cursor دیگری که شما می‌خواهید مانند 'pointer', 'grab', 'move' و غیره */
    }

    .filter-button:hover {
        cursor: pointer;
    }


    .pagination-container {
        display: flex;
        flex-wrap: wrap;
    }

    .pages-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px; /* تنظیم فاصله بین صفحات */
    }

    .progress {
        height: 5px;
        background-color: #e2e1e1;
        border-radius: 5px;
        overflow: hidden;
    }
    .dark .progress {
        height: 5px;
        background-color: dimgray;
        border-radius: 5px;
        overflow: hidden;
    }
    .progress-bar {
        height: 100%;
        background-color: hsl(var(--primary-btn));
        text-align: center;
        color: white;
        line-height: 5px; /* Match the height of the progress bar */
        transition: width 0.2s;
    }

    .daek .progress-bar {
        height: 100%;
        background-color: hsl(var(--primary-btn));
        text-align: center;
        color: dimgray;
        line-height: 5px; /* Match the height of the progress bar */
        transition: width 0.2s;
    }

    .no-margin-top {
        margin-top: 0;
    }
    /* Media query برای اندازه های کوچکتر */
    @media (max-width: 640px) {
        .pagination-container {
            justify-content: center; /* مرکز چین کردن عناصر در موبایل */
        }

        .pages-container {
            justify-content: center; /* مرکز چین کردن صفحات در موبایل */
        }
    }

    .footer-text {
        padding: 10px;
        text-align: center;
    }

    .phone-number {
        display: inline-block;
        cursor: pointer;
        color: blue;
        text-decoration: underline;
        font-size: 18px;
    }

    #pdelivery {
        display: none;
    }

    .btn-return-product {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 10px 20px; /* این برای پدینگ دلخواه */
        background-color: #f06292; /* تغییر رنگ دلخواه */
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }

    .parent-div {
        position: relative;
        width: 100%; /* یا عرض دلخواه */
        height: 80px; /* یا ارتفاع دلخواه */
    }

    .product-Id {
        font-size: 15px;
    }

    .DiscountPercent {
        font-size: 12px;
    }

    .sended-price {
        margin-top: 10px;
    }

    .payment-border {
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .name-lastname {
        margin-top: 25px;
    }

    .product-detail-setting {
        font-size: 12px;
    }

    .rounded-detail-setting {
        background-color: rgb(238, 255, 239);
        border-radius: .5rem;
        border-color: rgb(217, 248, 217);
    }
    .dark .rounded-detail-setting {
        background-color: rgb(207, 252, 209);
        border-radius: .5rem;
        border-color: rgb(133, 254, 139);
        color: black;
    }
    .rounded-detail-setting1 {
        border-radius: .5rem;
        border-color: rgb(162, 234, 148);
    }

    .rounded-detail-setting2 {
        border-radius: .5rem;
        border-color: hsl(var(--primary));
    }

    .product-images-orders {
        margin: 5px;
        padding: 2px;
    }

    .title-detail-order {
        margin-bottom: 10px;
    }
    .tehranlight-logo{
        margin-top:25px;
    }
    .tehranlight-div {
      width: 170px;
      height: 80px;
    }
    .tehranlight-logo-mob {
        margin-top: 22px;
    }
    
    .tehranlight-div-mob {
        width: 100px;
        height: 80px;
    }
    .tehranlight-div-menu {
        padding-top:20px;
        width: 110px;
        height: 60px;
    }
    .margintop-10 {
        margin-top: 10px;
    }
    .margintop-5 {
        margin-top: 5px;
    }
    .questionpageimage{
        width:70px;
        height:70px;
    }
    .margin{
        margin:30px;
    }
.desktop-modal {
    margin-right: 25%;
    margin-left: 20%;
    margin-top: 15%;
    width: 48%;
    height: 48%;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}
.phenomenal-padding {
  padding-right: 10px;
  padding-top:2px;
  padding-bottom:2px;
  padding-left:15px;
}
.from-red-01 {
    --tw-gradient-from: #f00 var(--tw-gradient-from-position);
    --tw-gradient-to: #f43f5e00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
}

.to-red-01 {
    --tw-gradient-to: #ffe300 var(--tw-gradient-to-position);
}

.from-phenomenals-01 {
    --tw-gradient-from: #40c599 var(--tw-gradient-from-position);
    --tw-gradient-to: #f43f5e00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
}

.to-phenomenals-01 {
    --tw-gradient-to: #ffd300 var(--tw-gradient-to-position);
}
.limit-text-size{
    font-size:14px;
}
.leaflet-control-attribution {
    font-size: 12px; /* تنظیم اندازه متن */
    color: black; /* رنگ متن */
}

    /* حذف یا تغییر تصویر پرچم */
    .leaflet-control-attribution img {
        display: none; /* مخفی کردن تصویر */
    }
.address-text-size {
    text-align:center;
    margin-top:15px;
    font-size: 13px;
}
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex !important; /* اگر flexbox استفاده می‌کنید */
    }
}