/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Style for clickable steps */
/* .clickable-step {
    color: #007bff; /* Change color to indicate it's clickable */
    text-decoration: underline; /* Underline to indicate it's a link */
    cursor: pointer; /* Change cursor to pointer */
} */

/* Optional: Add hover effect for clickable steps */
/* .clickable-step:hover {
    color: #0056b3; /* Darker shade on hover */
    text-decoration: none; /* Remove underline on hover */
} */

[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -5px;
    right: 105%;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 1000;
}

/* app/assets/stylesheets/application.css */
.field-with-errors {
  border-color: #e3342f; /* Red border color */
}

.error-message {
  color: #e3342f; /* Red text color */
  font-size: 0.875rem; /* Small text size */
  margin-top: 0.25rem; /* Small top margin */
}

.remove-ss4-document-btn {
  background-color: #dc3545; /* Red background */
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 5px;
}

.remove-ss4-document-btn:hover {
  background-color: #c82333; /* Darker red on hover */
}