@charset "utf-8";
/* CSS Document */
/*///////////////// Alert Boxes ///////////////////*/
.alert {
  padding: 10px;
  color: white;
  opacity: 1;
  transition: opacity 0.6s ease-out;
  border-radius: 15px;
  position: fixed;
  top: 20px; /* 20px padding from the top on large screens */
  margin: 5px auto;
  left: 50%;
  transform: translateX(calc(-50% + 125px));
  border-left: 10px solid;
  width: min(calc(95vw - 250px), 900px);
  z-index: 3000; /* higher than header's 1100 */
}

.nomenu {
  margin-left: -125px;
  width: min(95%, 900px);
}

/* Alert Types */
.alert.danger {
  background-color: #f44336; /* Red background */
  border-left-color: #d32f2f; /* Darker red border */
}

.alert.success {
  background-color: #4CAF50; /* Green background */
  border-left-color: #388E3C; /* Darker green border */
}

.alert.info {
  background-color: #2196F3; /* Blue background */
  border-left-color: #1976D2; /* Darker blue border */
}

.alert.warning {
  background-color: #ff9800; /* Orange background */
  border-left-color: #f57c00; /* Darker orange border */
}

/* Close Button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* Hidden State */
.alert.hidden {
  opacity: 0; /* Fully transparent */
  pointer-events: none; /* Disable interactions when hidden */
}

/* Sticky alert behavior for lock banner (uses your existing .alert styles) */
.alert.sticky {
  position: sticky;
  top: 0;
  z-index: 10010; /* Above page chrome */
  margin-bottom: 10px;
}

/* Compact the lock banner a bit */
.alert.lock-compact {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Read-only/locked form look */
.form-locked {
  position: relative;
  filter: grayscale(0.2);
  opacity: 0.85;
}

/* Subtle “shield” layer to communicate read-only */
.form-locked::after {
  content: "Read-only (locked)";
  position: relative;
  inset: -2px;
  border-radius: 6px;
  pointer-events: none;
  /*display: flex;
  align-items: start;
  justify-content: end;
	*/
  font-size: 12px;
  padding: 6px 8px;
  opacity: 0.9;
}

/* Inputs disabled visual consistency */
.form-locked input:not([type="hidden"]),
.form-locked select,
.form-locked textarea,
.form-locked button:not(.viewJobBtn),
.form-locked .styled-submit {
  cursor: not-allowed !important;
}

/* Keep your existing .alert colors: .danger, .success, .info, .warning */
/* We’ll toggle those classes in JS */


/* On mobile: if the header is fixed and full-width, offset alerts below the header */
@media screen and (max-width: 944px) {
  .alert {
    top: calc(70px + 20px); /* header (70px) plus 20px padding */
	left: 50%;
	margin: 0 auto;
    transform: translateX(-50%);
	width: 90%;
  }
}
/*///////////// END ALERT BOXES //////////////////*/