.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,url(index.html)
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.width-300 {
  width: 350px;
}
.justificativa-item {
  padding: 1rem;
  color: rgb(71 85 105);
}
#fast-table .selected.justificativa-item {
  border: 2px solid #3498db;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 4px 1px #95d1fa;
  position: relative;
  z-index: 1;
}
#fast-table.justificativa-table tr.selected.justificativa-item {
  background-color: #fff;
}
.selected .empty-spacer{
  display: none;
}
.time-box {
  display: none;
}
.time-box-added {
  display: flex;
}
.time-box-added > .icon-add {
  display: block;
}
.time-box-added > .icon-remove {
  display: none;
}
.time-box-removed > .icon-add {
  display: none;
}
.time-box-removed > .icon-remove {
  display: block;
}
.selected .time-box {
  display: flex;
  background-color: rgb(243 243 243);
  padding: 8px;
  border-radius: 8px;
  margin-top: 12px;
}
.selected .time-box-added {
  background-color: rgb(219 250 190);
  color: #106b1f;
  font-weight: 500;
}
.selected .time-box-removed {
  background-color: rgb(250 190 190);
  color: #6b1010;
  font-weight: 500;
}
.flip {
  transform: rotateY(180deg);
}
.hours {
  display: none;
}
.selected .hours {
  display: block;
}
.fast-justificativa-buttons {
  display: none;
}
.selected.pending .fast-justificativa-buttons {
  display: flex;
}
.button-aproved {
  display: none;
}
.button-deny {
  display: none;
}
.pending .button-aproved {
  display:  inline-block;
}
.pending .button-deny {
  display:  inline-block;
}
.recusa-form {
  display: none;
}
.selected.recusa-mode .recusa-form {
  display: flex;
} 
.selected.recusa-mode .fast-justificativa-buttons {
  display: none;
}
.recusa-form {
  display: none;
}
.recusa-mode .recusa-form {
  display: flex;
} 
.complete-justificativa-buttons {
  text-align: right;
}
.recusa-mode .complete-justificativa-buttons {
  display: none;
}
.recusa-form input {
  width: 100%;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
}
.edit-lock-block {
  display: none;
}
.edit-lock.selected .edit-lock-block {
  display: inline;
}
.edit-lock.selected .fast-justificativa-buttons {
  display: none;
}
.ml-sidebar {
  margin-left: 130px;
}
nav a {
  flex-direction: column;
  gap: 5px;
  font-size: 0.8em;
}
.justificativa-table tr{
  background-color: #F9F9F9;
}
.justificativa-table th {
  background-color: white;
  padding: 8px 12px;
}
.justificativa-table th.text-center {
  text-align: center;
}
.justificativa-table tr:nth-child(even) {
    background-color: #EEEEEE;
}
.justificativa-table tr:hover {
    background-color: #D5EFFC;
}
/* Fix "Ações" column */
.sticky-col {
  position: sticky;
  right: 0;
  background-color: inherit;
  z-index: 1;
}
.sticky-status {  
  right: 190px;
}
/* Optional: Make sure the table rows' height is consistent */
#complete-table td, 
#complete-table th {
  white-space: nowrap;
}
/* Optional: Make sure the table rows' height is consistent */
#complete-table td.normal-wrap, 
#complete-table th.normal-wrap {
  white-space: normal;
  max-width: 500px;
  min-width: 500px;
}
.scroll-wrapper {
  position: relative;
}

.scroll-gradient-left,
.scroll-gradient-right {
  position: absolute;
  top: 10;
  bottom: 0;
  width: 60px; /* Adjust as needed */
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.scroll-gradient-left {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
}

.scroll-gradient-right {
  right: 293;
  background: linear-gradient(to left, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
}

/* Initially hide the gradients when at the start */
.scroll-gradient-left.hidden,
.scroll-gradient-right.hidden {
  opacity: 0;
}

.overflow-x-auto {
  overflow-x: auto;
  position: relative;
  z-index: 1; /* Ensure the content is above the gradients */
}

.scrollable-table::-webkit-scrollbar-thumb {
  background-color: #3498db; /* Customize color */
  border-radius: 10px; /* Make the scrollbar thumb rounded */
}

.scrollable-table::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* Background of the scrollbar */
}
.scrollable-table::-webkit-scrollbar {
  height: 8px; /* Adjust the height of the scrollbar */
  position: absolute;
  top: 0;
}

.scrollable-table {
  scrollbar-width: thin; /* Firefox scrollbar size */
  scrollbar-color: #949697 #f0f0f0; /* Scrollbar thumb and track color */
}

/* Hide default bottom scrollbar */
.scrollable-table {
  overflow-x: hidden;
}
.scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}

.scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 20px;
  border: 3px solid transparent;
}
#fileModal img {
  max-height: 75vh;
}

/* Add these custom classes to your Tailwind configuration or custom CSS */
.tooltip-parent {
  position: relative;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%; /* Position above the button */
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background-color: #333;
  color: white;
  text-align: center;
  border-radius: 4px;
  white-space: nowrap;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

.tooltip-parent:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
} 
.child {
  transform: rotateX(180deg);
}