html {
  --color-orange: rgb(254, 169, 27);
  --btn-cancel-color: #ff9254;
  --btn-cancel-color-dark: hsl(22, 80%, 61%);
  --colot: rgb(255, 220, 62);
  --btn-dark-yellow: #fddd28;
  --btn-dark-yellow-dark: #ffd900;
  --btn-light-green: #00d475;
  --btn-light-green-dark: #00c26b;
  --btn-sarti-color: #fbc910;
  --btn-sarti-color-dark: #d7a909;
}

textarea {
  resize: none;
}

.content {
  min-height: 100dvh;
}

.main-body {
  flex: 1 1;
}

.footer {
  padding: 8px 0;
  height: 59px;
  background-color: rgb(233, 236, 239);
}

.btn-counter-op {
  width: 38px;
  height: 38px;
}

.text-orange {
  color: var(--color-orange);
}

.bgc-orange {
  background-color: var(--color-orange);
}

#info-icon:hover {
  cursor: pointer;
}

.img-modal {
  flex: 0;
  height: 10px;
}

.hide {
  display: none;
}

.custom-tooltip {
  position: relative;
}

.custom-tooltip::before,
.custom-tooltip::after {
  font-size: 14px;
  --scale: 0;
  --tooltip-color: #333;
  --arrow-size: 7px;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% var(--translate-y, 0);
  transform: scale(var(--scale));
  transform-origin: bottom center;
  transition: 75ms transform;
}

.custom-tooltip::before {
  --translate-y: calc(-100% - var(--arrow-size));
  content: attr(data-tooltip-text);
  color: white;
  padding: 2px 10px;
  width: max-content;
  background: var(--tooltip-color);
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.custom-tooltip::after {
  --translate-y: calc(-1 * var(--arrow-size) - 1px);
  content: "";
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);
  transform-origin: top center;
}

.custom-tooltip:hover::before,
.custom-tooltip:hover::after {
  --scale: 1;
  transition-delay: 300ms;
}

#help:hover {
  cursor: pointer;
}

.btn-cancel {
  --bs-btn-color: white;
  --bs-btn-bg: var(--btn-cancel-color);
  --bs-btn-border-color: var(--btn-cancel-color);
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: var(--btn-cancel-color-dark);
  --bs-btn-hover-border-color: var(--btn-cancel-color-dark);
  --bs-btn-focus-shadow-rgb: 255, 174, 82;
  --bs-btn-active-color: white;
  --bs-btn-active-bg: var(--btn-cancel-color-dark);
  --bs-btn-active-border-color: var(--btn-cancel-color-dark);
  --bs-btn-active-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.15);
  --bs-btn-disabled-color: white;
  --bs-btn-disabled-bg: var(--btn-cancel-color-dark);
  --bs-btn-disabled-border-color: var(--btn-cancel-color-dark);
}

.btn-sarti {
  --bs-btn-color: black;
  --bs-btn-bg: var(--btn-sarti-color);
  --bs-btn-border-color: var(--btn-sarti-color);
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: var(--btn-sarti-color-dark);
  --bs-btn-hover-border-color: var(--btn-sarti-color-dark);
  --bs-btn-focus-shadow-rgb: 255, 220, 62;
  --bs-btn-active-color: black;
  --bs-btn-active-bg: var(--btn-sarti-color-dark);
  --bs-btn-active-border-color: var(--btn-sarti-color-dark);
  --bs-btn-active-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.15);
  --bs-btn-disabled-color: black;
  --bs-btn-disabled-bg: var(--btn-sarti-color-dark);
  --bs-btn-disabled-border-color: var(--btn-sarti-color-dark);
}

.btn-batch {
  --bs-btn-color: black;
  --bs-btn-bg: var(--btn-dark-yellow);
  --bs-btn-border-color: var(--btn-dark-yellow);
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: var(--btn-dark-yellow-dark);
  --bs-btn-hover-border-color: var(--btn-dark-yellow-dark);
  --bs-btn-focus-shadow-rgb: 255, 220, 62;
  --bs-btn-active-color: black;
  --bs-btn-active-bg: var(--btn-dark-yellow-dark);
  --bs-btn-active-border-color: var(--btn-dark-yellow-dark);
  --bs-btn-active-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.15);
  --bs-btn-disabled-color: black;
  --bs-btn-disabled-bg: var(--btn-dark-yellow-dark);
  --bs-btn-disabled-border-color: var(--btn-dark-yellow-dark);
}

.btn-finish-rework {
  --bs-btn-color: black;
  --bs-btn-bg: var(--btn-light-green);
  --bs-btn-border-color: var(--btn-light-green);
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: var(--btn-light-green-dark);
  --bs-btn-hover-border-color: var(--btn-light-green-dark);
  --bs-btn-focus-shadow-rgb: 0, 212, 117;
  --bs-btn-active-color: black;
  --bs-btn-active-bg: var(--btn-light-green-dark);
  --bs-btn-active-border-color: var(--btn-light-green-dark);
  --bs-btn-active-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.15);
  --bs-btn-disabled-color: black;
  --bs-btn-disabled-bg: var(--btn-light-green-dark);
  --bs-btn-disabled-border-color: var(--btn-light-green-dark);
}

.bg-body-success {
  background-color: #d1e7dd;
}

.carrossel {
  position: relative;
}

.index-carousel {
  position: absolute;
  left: 16px;
}

.carrossel-ativo {
  display: block;
}

.carrossel-inativo {
  display: none;
}

.carrossel > button {
  position: absolute;
  background: none;
  border: none;
  font-size: 3rem;
  z-index: 4;
  height: 100%;
  padding: 0 30px;
  color: rgba(0, 0, 0, 0.4);
}

.carrossel > button:hover,
.carrossel > button:focus {
  color: rgba(0, 0, 0, 0.6);
}

.carrossel > button:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.3);
}

.carrossel > button.prev {
  left: 0;
}

.carrossel > button.prev:hover {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
}

.carrossel > button.next {
  right: 0;
}

.carrossel > button.next:hover {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
}

.icon-button {
  background: transparent;
  border: none;
  margin-left: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
}

.icon-button:hover {
  background: #f0f0f0;
  cursor: pointer;
}

.icon-button:active {
  background: #e0e0e0;
}

.icon-button-sm {
  width: 20px;
  height: 20px;
}

#editReworkConfig:not([disabled]):hover > svg {
  fill: #0d6efd;
}

.prod-button {
  width: 175px;
}

.tooltip-font-small {
  font-size: 0.75rem;
}

.inspection-button {
  width: 140px;
}

.audit-button {
  width: 150px;
}

.addSubErrorButton {
  right: 5px;
  top: -50%;
  translate: 0 -50%;
}

/* Progress bar color classes */
.progress-red {
  background-color: #ff1500;
}
.progress-orange {
  background-color: #fa9600;
}
.progress-yellow {
  background-color: #faf200;
}
.progress-yellow-green {
  background-color: #bad600;
}
.progress-green {
  background-color: #5fb300;
}
.progress-blue {
  background-color: #00c6ff;
}

@media screen and (orientation: portrait) {
  .footer-text {
    font-size: 13px;
  }
}

@media screen and (min-width: 768px) {
  .prod-button {
    width: 200px;
  }

  .addSubErrorButton {
    right: 0;
    top: 50%;
    translate: 125% -50%;
  }
}