body {
    width: 100%;
    margin: 0 auto;
    font-family: Tahoma, sans-serif;
    /* تغییر به فونت Tahoma */
}

table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    table-layout: fixed;
}

td,
th {
    padding: 5px;
    vertical-align: middle;
    border: 1px solid #ddd;
}

th:first-child,
td:first-child {
    text-align: right;
    direction: rtl;
}

th:not(:first-child),
td:not(:first-child) {
    text-align: left;

}

input[type="number"] {
    direction: rtl;
    text-align: right;
    width: 90px;
    margin-bottom: 5px;
}

label {
    text-align: right;
    display: block;
}

h3 {
    text-align: right;
    direction: rtl;
}

.input-table,
.output-table {
    width: 100%;
}

/* افزایش عرض ستون اول در تمام جداول */
table th:first-child,
table td:first-child {
    width: 50%;
    /* می‌توانید درصد را به دلخواه تغییر دهید */
}

/* اصلاح عرض ستون دوم */
td:nth-child(2),
th:nth-child(2) {
    width: 18%;
}

table td,
th:nth-child(3) {
    width: 20%;
    /* تنظیم عرض ستون سوم به صورت درصد */
}

table td,
th:nth-child(4) {
    width: 12%;
    /* تنظیم عرض ستون سوم به صورت درصد */

}

/* تنظیم ارتفاع سطرهای همه جداول */

td,
th {
    height: 18px;
    /* ارتفاع ثابت برای همه سطرها */
}

/* تنظیم عرض  برای دسکتاپ */

.container1 {
    width: 100%; /* عرض صفحه را پر کند */
    height: 100%; /* ارتفاع صفحه را پر کند */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    width: 95%; /* عرض کادر */
    height: 250px; /* ارتفاع کادر */
    border: 1px solid rgb(255, 255, 255); /* فقط برای نمایش کادر */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* برای جلوگیری از بیرون زدن تصویر */
}

.image-container img {
    max-width: 100%; /* حداکثر عرض تصویر برابر با عرض کادر */
    max-height: 100%; /* حداکثر ارتفاع تصویر برابر با ارتفاع کادر */
    object-fit: contain; /* حفظ نسبت ابعاد بدون کشیده شدن */
}


.imgA {
    width: auto;
    /* عرض پیش‌فرض */
    height: 300px !important;
    /* ارتفاع متناسب */
    display: block;
    /* اطمینان از نمایش صحیح */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.imgB {
    width: auto;
    height: 300px !important;
    /* ارتفاع متناسب */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}


.imgC {
    width: auto;
    height: auto;
    max-width: 95% !important;
    height: 380px !important;
    /* ارتفاع متناسب */

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}


@media (max-width: 768px) {
    body {
        font-size: 14px;
        /* کاهش اندازه فونت برای موبایل */
    }

    table {
        width: 100%;
        /* اطمینان از پر شدن صفحه */
    }

    input[type="number"] {
        width: 100%;
        /* بزرگ‌تر کردن فیلدهای ورودی */
    }


    /*  Start تنظیمات شکل با قرار دادن آن داخل کادر */
    .container1 {
        width: 100%; /* عرض صفحه را پر کند */
        height: 100%; /* ارتفاع صفحه را پر کند */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .image-container {
        width: 95%; /* عرض کادر */
        height: 250px; /* ارتفاع کادر */
        border: 1px solid rgb(255, 255, 255); /* فقط برای نمایش کادر */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* برای جلوگیری از بیرون زدن تصویر */
    }
    
    .image-container img {
        max-width: 100%; /* حداکثر عرض تصویر برابر با عرض کادر */
        max-height: 100%; /* حداکثر ارتفاع تصویر برابر با ارتفاع کادر */
        object-fit: contain; /* حفظ نسبت ابعاد بدون کشیده شدن */
    }
    /*  End تنظیمات شکل با قرار دادن آن داخل کادر */



    .imgA {    /* تنظیم عرض  برای موبایل */
    width: auto;
    /* عرض پیش‌فرض */
    height: 300px !important;

        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;       
    }

    .imgB {  /* تنظیم عرض  برای موبایل */
    width: auto;
    /* عرض پیش‌فرض */
    height: 300px !important;

        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;        
    }

    .imgC {   /* تنظیم عرض  برای موبایل */
    max-width: 95% !important;
    height: auto;
    max-height: 260px; 


        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;       
    }
}

table input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    /* اطمینان از درنظر گرفتن پدینگ و مرزها */
}

body {
    width: 60%;
    /* عرض ۶۰٪ پیش‌فرض برای دسکتاپ */
    margin: 0 auto;
    /* قرارگیری در مرکز صفحه */
}

@media (max-width: 768px) {
    body {
        width: 95%;
        /* عرض ۱۰۰٪ برای موبایل */
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-indent: 0.1cm;
    /* تنظیم تورفتگی به 0.5 سانتی‌متر */
}

table th:nth-child(2),
table th:nth-child(3) {
    text-align: center;
    /* وسط‌چین کردن متن */
}


.math {
    font-size: 0.8em;
    /* اندازه فونت را کاهش دهید */
    word-wrap: break-word;
    /* جلوگیری از بیرون زدن محتوا */
    text-align: left;
    direction: ltr;
    margin-left: 0;
}

mjx-container {
    text-align: left !important;
    display: block !important;
}

h1,
h3 {
    background-color: #ccc;
    /* خاکستری تیره */

    padding: 10px;
    /* کمی فاصله داخلی برای زیباتر شدن */
    border-radius: 5px;
    /* لبه‌های کمی گرد */
}

table tr:first-child {
    background-color: #f0f0f0;
    /* خاکستری کم‌رنگ */
}

mjx-container {
    font-size: 80%;
    /* تغییر درصد به اندازه دلخواه - تغییر اندازه فونت کلیه فرمولها */
}


h1 {
    font-size: 20px;
    /* تغییر سایز عنوان */
    text-align: center;
}

h3 {
    font-size: 18px;
    /* تغییر سایز عنوان */
}

.footer-text {
    text-align: center; /* متن را وسط چین می‌کند */
    width: 90%; /* می‌توانید عرض را مشخص کنید (اختیاری) */
    margin: 0 auto; /* این باعث می‌شود که <div> در صفحه وسط چین شود */
    }