.user-role-wrapper {
    display: flex;
    flex-direction: column; /* تنظیم چیدمان به صورت عمودی */
    gap: 8px; /* فاصله بین دکمه‌ها */
    max-width: 200px; /* حداکثر عرض کانتینر (اختیاری) */
    margin: 0 auto; /* وسط‌چین کردن کانتینر */
}

.user-role-button {
    background-color: #4CAF50; /* رنگ پس‌زمینه */
    border: none; /* حذف حاشیه */
    color: white; /* رنگ متن */
    padding: 8px 12px; /* فاصله داخلی */
    text-align: center; /* ترازبندی متن */
    text-decoration: none; /* حذف زیرخط */
    font-size: 12px; /* تنظیم اندازه فونت */
    border-radius: 8px; /* گوشه‌های گرد */
    transition: 0.3s; /* انیمیشن تغییر رنگ */
    cursor: pointer; /* تغییر نشانگر موس */
}

.user-role-button:hover {
    background-color: #ffffff; /* رنگ پس‌زمینه هنگام هاور */
    color: #4CAF50; /* رنگ متن هنگام هاور */
    border: 2px solid #4CAF50; /* نمایش حاشیه هنگام هاور */
}