@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Vazir;
  src: url('../fonts/Vazirmatn-UI-FD-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* استایل کلی بدنه */
body {
    /*direction: rtl;  راست‌چین */
    font-family: Vazir; /* تعیین فونت */
    background-color: #f7f7f7; /* رنگ پس‌زمینه روشن */
    margin: 0;
    /*padding: 20px;*/
    align-content: center; /* وسط‌چین کردن محتوا */
    vertical-align: middle; /* وسط‌چین کردن عمودی محتوا */
    text-align: right; /* تنظیم تراز متن به راست */
    height: 100%; /* تنظیم ارتفاع به 100% */
    width: 100% !important; /* تنظیم عرض به 100% با اولویت بالا */
    box-sizing: border-box; /* تنظیم مدل جعبه به border-box */
}

/* استایل عنوان‌ها */
h2 {
    font-size: 1.25rem; /* اندازه فونت */
    padding: 10px; /* فاصله داخلی */
}

h3 {
    max-width: 95%; /* حداکثر عرض */
    width: 100%; /* عرض کامل */
    margin: 0 auto; /* مرکز چین */
    color: #ffffff; /* رنگ متن */
    background: #198754; /* رنگ پس‌زمینه */
    border-radius: 5px; /* گوشه‌های گرد */
    height: 50px; /* ارتفاع */
    vertical-align: middle; /* وسط‌چین کردن عمودی */
    align-content: center; /* وسط‌چین کردن محتوا */
}

/* استایل فرم */
#msform {
    width: 100%;
    max-width: 95%; /* حداکثر عرض برای فرم */
    margin: 0 auto; /* مرکز چین */
    background: white; /* پس‌زمینه فرم */
    border-radius: 8px; /* گوشه‌های گرد */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* سایه */
}

/* استایل نوار پیشرفت */
#progressbar {
    direction: rtl;
    display: flex; /* استفاده از flexbox */
    justify-content: space-between; /* توزیع یکنواخت بین لیست‌ها */
    padding: 0; /* حذف padding */
    list-style-type: none; /* حذف نقاط لیست */
    max-width: 95%; /* حداکثر عرض */
    margin: 10px auto; /* مرکز چین */
}

#progressbar li {
    flex: 1; /* هر عنصر به یک اندازه گسترش می‌یابد */
    text-align: center; /* مرکز چین */
    background-color: #e0e0e0; /* رنگ پس‌زمینه */
    height: 10px; /* ارتفاع نوار */
    margin: 0; /* حذف فاصله */
}

#progressbar li:before {
    content: '';
    position: absolute;
    width: 100%;
    background: #ccc; /* رنگ پیش‌فرض */
    top: 110px; /* فاصله از متن */
    left: 0;
    z-index: -1; /* قرارگیری در پس‌زمینه */
    border-radius: 5px; /* گوشه‌های گرد */
}

#progressbar li.active:before {
    background: #007bff; /* رنگ برای مراحل فعال */
}

#progressbar li.active {
    background-color: #007bff; /* رنگ نوار فعال */
}

/* استایل فیلدها */
fieldset {
    display: none; /* پنهان کردن فیلدها */
    border: none; /* حذف حاشیه */
}

fieldset.active {
    display: block; /* نمایش فیلد فعال */
}

/* استایل گزینه‌های پاسخ */
.answer-option {
    border-radius: 5px; /* گوشه‌های گرد */
    transition: background 0.3s ease; /* انیمیشن تغییر رنگ */
}

.answer-option:hover {
    background: #e0e0e0; /* تغییر رنگ در هاور */
}

/* استایل دکمه‌ها */
.center-buttons {
    display: flex; /* استفاده از flexbox */
    margin-top: 20px; /* فاصله بالایی */
    justify-content: space-evenly; /* توزیع یکنواخت */
}

input[type="button"], input[type="submit"] {
    font-family: 'Vazir'; /* تعیین فونت */
    background-color: #ff0000; /* رنگ دکمه */
    color: white; /* رنگ متن دکمه */
    border: none; /* حذف حاشیه */
    padding: 10px 20px; /* padding دکمه */
    border-radius: 5px; /* گوشه‌های گرد */
    cursor: pointer; /* نشانگر ماوس */
    transition: background 0.3s ease; /* انیمیشن تغییر رنگ */
}

input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #007fbb; /* رنگ دکمه در هاور */
}

/* استایل گزینه‌های درون‌خطی */
.inline-options {
    font-size: 1rem; /* اندازه فونت */
    padding: 10px; /* فاصله داخلی */
    direction: rtl;
}

.inline-options label {
    margin-left: 20px; /* فاصله بین گزینه‌ها */
}

/* استایل لینک‌ها */
a {
    text-decoration: none;
    color: #dc3545;
}

/* استایل کانتینر */
.container {
    margin-top: 50px; /* ایجاد فاصله بالایی برای کانتینر */ 
}

/* استایل پس‌زمینه سمت راست و چپ */
.backRight, .backLeft {
    position: absolute; /* موقعیت مطلق */
    width: 50%; /* عرض 50% */
    height: 100%; /* ارتفاع 100% */
}

.backRight {
    right: 0; /* قرارگیری در سمت راست */
    background: #577BC1; /* رنگ پس‌زمینه */
}

.backLeft {
    left: 0; /* قرارگیری در سمت چپ */
    background: #A294F9; /* رنگ پس‌زمینه */
}

/* استایل پس‌زمینه */
#back {
    width: 100%; /* عرض 100% */
    height: 100%; /* ارتفاع 100% */
    position: absolute; /* موقعیت مطلق */
    z-index: -999; /* قرارگیری در پشت سایر عناصر */
}

.canvas-back {
    position: absolute; /* موقعیت مطلق */
    top: 0; /* قرارگیری در بالای صفحه */
    left: 0; /* قرارگیری در سمت چپ */
    width: 100%; /* عرض 100% */
    height: 100%; /* ارتفاع 100% */
    z-index: 10; /* قرارگیری در بالای سایر عناصر */
}

/* استایل جعبه اسلاید */
#slideBox {
    width: 50%; /* عرض 50% */
    max-height: 100%; /* حداکثر ارتفاع 100% */
    height: 100%; /* ارتفاع 100% */
    overflow: hidden; /* جلوگیری از نمایش نوار اسکرول */
    margin-left: 50%; /* حاشیه سمت چپ 50% */
    position: absolute; /* موقعیت مطلق */
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); /* سایه برای جعبه */
}

.topLayer {
    width: 200%; /* عرض 200% */
    height: 100%; /* ارتفاع 100% */
    position: relative; /* موقعیت نسبی */
    left: -100%; /* جابجایی به سمت چپ */
}

/* استایل برچسب‌ها */
label {
    font-size: 0.8em; /* اندازه فونت برچسب */
    text-transform: uppercase; /* تبدیل متن به حروف بزرگ */
}

/* استایل ورودی‌ها */
input {
    /* background-color: #e3e3e3;*/ /* پس‌زمینه شفاف */
    /* background:#000957;*/
    border: 0; /* بدون حاشیه */
    outline: 0; /* بدون حاشیه خارجی */
    font-size: 1em; /* اندازه فونت ورودی */
    padding: 8px 1px; /* padding برای ورودی */
    margin-top: 0.1em; /* حاشیه بالایی */
}

/* استایل سمت چپ */
.left {
    width: 50%; /* عرض 50% */
    height: 100%; /* ارتفاع 100% */
    background: #e3e3e3; /* رنگ پس‌زمینه */
    left: 0; /* قرارگیری در سمت چپ */
    position: absolute; /* موقعیت مطلق */
}

.left label {
    /*color:#577bc1;*/
    /*color: #e3e3e3;  رنگ برچسب */
}

.left input {
    border-bottom: 1px solid #111111; /* حاشیه پایینی ورودی */
   /* color: #e3e3e3;*/ /* رنگ ورودی */
   color:#111111;
}

.left input:focus, .left input:active {
    border-color: #03A9F4; /* رنگ حاشیه ورودی در حالت فوکوس */
    color:#111111;
}

.left input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #e8f0fe inset;
    /* سایه برای حالت پر شده خودکار */
    -webkit-text-fill-color: #111111; /* رنگ متن در حالت پر شده خودکار */
}

.left a {
    color: #03A9F4; /* رنگ لینک‌ها */
}

/* استایل سمت راست */
.right {
    width: 50%; /* عرض 50% */
    height: 100%; /* ارتفاع 100% */
    overflow: scroll; /* نمایش نوار اسکرول */
    background: #f9f9f9; /* رنگ پس‌زمینه */
    right: 0; /* قرارگیری در سمت راست */
    position: absolute; /* موقعیت مطلق */
}

.right label {
    color: #212121; /* رنگ برچسب */
}

.right input {
    border-bottom: 1px solid #212121; /* حاشیه پایینی ورودی */
}

.right input:focus, .right input:active {
    border-color: #673AB7; /* رنگ حاشیه ورودی در حالت فوکوس */
}

.right input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #f9f9f9 inset; /* سایه برای حالت پر شده خودکار */
    -webkit-text-fill-color: #212121; /* رنگ متن در حالت پر شده خودکار */
}

/* استایل محتوا */
.content {
    display: flex; /* نمایش به صورت فلکس */
    flex-direction: column; /* ترتیب عمودی */
    justify-content: center; /* تراز عمودی به مرکز */
    min-height: 100%; /* حداقل ارتفاع 100% */
    width: 80%; /* عرض 80% */
    margin: 0 auto; /* مرکز کردن */
    position: relative; /* موقعیت نسبی */
}

.content h2 {
    font-weight: 300; /* وزن فونت */
    font-size: 2.6em; /* اندازه فونت */
    margin: 0.2em 0 0.1em; /* حاشیه */
}

.left .content h2 {
     color: #577bc1; 
     /* رنگ عنوان در سمت چپ */
      /*color:#ffc107;*/
}

.right .content h2 {
    color: #673AB7; /* رنگ عنوان در سمت راست */
}

/* استایل عناصر فرم */
.form-element {
    margin: 1.6em 0; /* حاشیه */
}

.form-element.form-submit {
    direction: rtl; /* تنظیم جهت متن به راست به چپ */
    margin: 1.6em 0 0; /* حاشیه */
}

.form-stack {
    display: flex; /* نمایش به صورت فلکس */
    flex-direction: column; /* ترتیب عمودی */
}

/* استایل چک باکس */
.checkbox {
    -webkit-appearance: none; /* غیرفعال کردن ظاهر پیش‌فرض */
    outline: none; /* بدون حاشیه خارجی */
    background-color: #ffffff; /* رنگ پس‌زمینه */
    border: 1px solid #111111; /* حاشیه */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); /* سایه */
    padding: 12px; /* padding */
    border-radius: 4px; /* گوشه‌های گرد */
    display: inline-block; /* نمایش به صورت بلوک درون‌خطی */
    position: relative; /* موقعیت نسبی */
}

.checkbox:focus, .checkbox:checked:focus,
.checkbox:active, .checkbox:checked:active {
    border-color:#111111;/* #03A9F4; *//* رنگ حاشیه در حالت فوکوس */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 
    inset 0px 1px 3px rgba(0, 0, 0, 0.1); /* سایه در حالت فوکوس */
}

.checkbox:checked {
    outline: none; /* بدون حاشیه خارجی */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 
    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); /* سایه در حالت انتخاب شده */
}

.checkbox:checked:after {
    outline: none; /* بدون حاشیه خارجی */
    content: "✓"; /* علامت تیک */
    /*color: #03A9F4; */
    color:#dc3545;/* رنگ علامت تیک */
    font-size: 2em; /* اندازه فونت علامت تیک */
    font-weight: 900; /* وزن فونت علامت تیک */
    position: absolute; /* موقعیت مطلق */
    top: -10px; /* فاصله از بالا */
    left: 2px; /* فاصله از چپ */
}

.form-checkbox {
    display: flex; /* نمایش به صورت فلکس */
    align-items: center; /* تراز عمودی عناصر */
}

.form-checkbox label {
    margin: 0 6px 0; /* حاشیه */
    font-size: 0.72em; /* اندازه فونت */
}

/* استایل دکمه‌ها */
button {
    padding: 0.8em 1.2em; /* padding */
    margin: 0 10px 0 0; /* حاشیه */
    width: auto; /* عرض خودکار */
    font-weight: 600; /* وزن فونت */
    text-transform: uppercase; /* تبدیل متن به حروف بزرگ */
    font-size: 1em; /* اندازه فونت */
    background-color: #125dde; /* رنگ پس‌زمینه */
    color: #fff; /* رنگ متن */
    line-height: 1em; /* ارتفاع خط */
    letter-spacing: 0.6px; /* فاصله بین حروف */
    border-radius: 3px; /* گوشه‌های گرد */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); /* سایه */
    border: 0; /* بدون حاشیه */
    outline: 0; /* بدون حاشیه خارجی */
    transition: all 0.25s; /* انیمیشن برای تغییرات */
}

button.signup {
    background: #577BC1; /* رنگ دکمه ثبت‌نام */
}

button.login {
    background: #673AB7; /* رنگ دکمه ورود */
}

button.off {
    background: none; /* بدون رنگ پس‌زمینه */
    box-shadow: none; /* بدون سایه */
    margin: 0; /* بدون حاشیه */
}

button.off.signup {
    /*color: #03A9F4;*/
    color :#dc3545;/* رنگ دکمه ثبت‌نام غیرفعال */
}

button.off.login {
    color: #673AB7; /* رنگ دکمه ورود غیرفعال */
}

button:focus, button:active, button:hover {
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); /* سایه در حالت فوکوس یا هاور */
}

button:focus.signup, button:active.signup, button:hover.signup {
    background: #0288D1; /* رنگ دکمه ثبت‌نام در حالت فوکوس یا هاور */
}

button:focus.login, button:active.login, button:hover.login {
    background: #512DA8; /* رنگ دکمه ورود در حالت فوکوس یا هاور */
}

button:focus.off, button:active.off, button:hover.off {
    box-shadow: none; /* بدون سایه در حالت فوکوس یا هاور */
}

button:focus.off.signup, button:active.off.signup, button:hover.off.signup {
    color: #03A9F4; /* رنگ دکمه ثبت‌نام غیرفعال در حالت فوکوس یا هاور */
    background: #212121; /* رنگ پس‌زمینه دکمه ثبت‌نام غیرفعال در حالت فوکوس یا هاور */
}

button:focus.off.login, button:active.off.login, button:hover.off.login {
    color: #512DA8; /* رنگ دکمه ورود غیرفعال در حالت فوکوس یا هاور */
    background: #e3e3e3; /* رنگ پس‌زمینه دکمه ورود غیرفعال در حالت فوکوس یا هاور */
}

    .custom-progress {
        width: 100%;
        background-color: #e9ecef;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        height: 30px; /* ارتفاع نوار پیشرفت */
    }
    .custom-progress-bar {
        height: 100%;
        background-color: #007bff;
        text-align: left; /* متن در سمت چپ */
        line-height: 30px; /* هم‌تراز با ارتفاع نوار */
        color: white;
        padding-left: 10px; /* فاصله متن از لبه چپ */
        position: relative;
    }
    .custom-progress-bar-text {
        font-size: 14px;
        white-space: nowrap; /* جلوگیری از شکستن خط */
    }

/* تنظیمات ارتفاع نوار پیشرفت */
.custom1-progress {
    height: 40px;
    background-color: #dee2e6;
    width: 95%;
    max-width: 100%;
    margin: 0 auto;
    direction:rtl;
}

/* استایل دایره درون نوار پیشرفت */
.custom1-progress-bar {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #0d6efd;
    height: 40px;
    border-radius: 5px;
}

/* استایل متن داخل دایره */
.custom1-progress-bar-text {
    position: absolute;
    font-weight: bold;
    border-radius: 50%;
    background-color: #ffff00;
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #111111;
    text-align: center;
}

/* استایل برای صفحه‌های کوچک */
@media only screen and (max-width: 768px) {
    #slideBox {
        width: 80%; /* عرض جعبه اسلاید در حالت موبایل */
        margin-left: 20%; /* حاشیه سمت چپ */
    }

    .signup-info, .login-info {
        display: none; /* مخفی کردن اطلاعات ثبت‌نام و ورود */
    }
}