.application-status {
  padding: 15px;
  margin: 10px 0;
  border-radius: 4px;
  font-weight: bold;
}

.status-label {
  margin-right: 10px;
  font-weight: normal;
}

.status-default {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
}

.status-approved {
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  color: #3c763d;
}

.status-rejected {
  background-color: #f2dede;
  border: 1px solid #ebccd1;
  color: #a94442;
}

.status-pending {
  background-color: #fcf8e3;
  border: 1px solid #faebcc;
  color: #8a6d3b;
}

#resend-otp-button {
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}

#resend-otp-button.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}

div[role="alert"] ul.messages__list li:nth-child(2) {
  display: none;
}

/* Style for the comment textarea  border*/
.form-item-app-review-comment textarea[name="app_review_comment"] {
  border: none;
  background: transparent;
}

/* Style for the Comment label underline */
.form-item-app-review-comment label {
  text-decoration: underline;
}

/* Style for status container with inline History View */
.status-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 10px 24px; /* Left padding for LTR */
}

/* RTL support for status container */
[dir="rtl"] .status-container {
  padding: 10px 24px 10px 0; /* Right padding for RTL */
}

.history-link {
  color: var(--link-primary);
  margin-left: 10px;
  flex-shrink: 0; /* Prevent shrinking */
}

[dir="rtl"] .history-link {
  margin-left: 0;
  margin-right: 10px;
}

.history-link:hover {
 color: var(--link-hover);   
}

.fa-history {
  font-size: 16px;
}

.status-value {
  font-weight: 700;
  display: inline-block;
}

.action-history-header {
  text-align: center;
  margin: 0;
  padding: 0 10px; /* Match container padding */
}

[dir="rtl"] .action-history-header {
  direction: rtl;
  text-align: center;
}

.action-history-header h6,
.action-history-header h5 {
  margin-bottom: 4px;
  display: inline-block;
}

.action-history-header hr {
  margin-top: 4px;
  margin-bottom: 8px;
  border: 0;
  border-top: 1.5px solid #ccc;
  width: 100%;
}

div[data-drupal-selector="edit-webform-action-log-table"] {
    /* Your CSS properties go here */
    /* Example: */
    width: fit-content;
    margin: 0 ;
    padding: 10px 0 10px 10px; /* Match status container padding */
}

[dir="rtl"] div[data-drupal-selector="edit-webform-action-log-table"] {
  direction: rtl;
  padding: 10px 10px 10px 0; /* Match RTL status container padding */
}

[dir="rtl"] div[data-drupal-selector="edit-webform-action-log-table"] table {
  direction: rtl;
}

[dir="rtl"] div[data-drupal-selector="edit-webform-action-log-table"] th,
[dir="rtl"] div[data-drupal-selector="edit-webform-action-log-table"] td {
  text-align: right;
}

.contact-note-container {
  margin: 15px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #007bff;
  margin-left: 10px; /* Align with other content */
}

/* RTL support */
[dir="rtl"] .contact-note-container {
  border-left: none;
  border-right: 4px solid #007bff;
  margin-left: 0;
  margin-right: 10px; /* Align with RTL content */
}

.contact-note-text {
  margin: 0;
  padding-top: 10px;
  line-height: 1.4;
}

[dir="rtl"] .contact-note-text {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .contact-note-text strong {
  direction: rtl;
}

.contact-email-link {
  color: #007bff;
  text-decoration: none;
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

.contact-email-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.contact-email-link:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Consistent padding and alignment for status and history sections */
.status-container,
.history-table-wrapper {
  margin: 15px 0;
}

/* History table wrapper with matching padding */
.history-table-wrapper {
  padding: 10px 0 10px 10px; /* Left padding for LTR */
}

[dir="rtl"] .history-table-wrapper {
  padding: 10px 10px 10px 0; /* Right padding for RTL */
}

/* Ensure consistent form item styling */
.status-container.form-item,
.history-table-wrapper.form-item {
  margin-bottom: 1rem;
}

/* Status info wrapper for consistent spacing */
.status-info-wrapper {
  margin-bottom: 10px;
  padding: 0;
  /*flex: 1;  Take available space */
}

/* Form elements consistent spacing */
.webform-submission-form .form-item {
  margin-bottom: 1rem;
}

/* RTL support for form items */
[dir="rtl"] .webform-submission-form .form-item {
  text-align: right;
}

/* Flex container RTL adjustments */
[dir="rtl"] .status-container .status-info-wrapper {
  text-align: right;
}

/* Icon positioning for RTL */
[dir="rtl"] .fa-history {
  margin-left: 5px;
  margin-right: 0;
}

/* Button and link RTL support */
[dir="rtl"] .history-link i {
  margin-left: 5px;
  margin-right: 0;
}

/* Table responsive RTL */
[dir="rtl"] .table-responsive {
  direction: rtl;
}

[dir="rtl"] .table-responsive table {
  direction: rtl;
}

/* Ensure proper text alignment for Arabic */
[dir="rtl"] .status-value {
  direction: rtl;
  text-align: right;
}