@tailwind base;
@tailwind components;
@tailwind utilities;
.active {
  background-color: #FDF2EB !important;
  border-radius: 6px;
}

.sidebar .nav-item > button:hover {
  background-color: #FDF2EB !important;
}

.sidebar .nav-item > a:hover, .sidebar .nav-item > button:hover {
  background-color: #FDF2EB !important;
}

.sub-menu .active {
  color: #E75D01 !important;
}
.sub-menu .active::before {
  background-color: #E75D01 !important;
}
.sub-menu .active:hover {
  color: #E75D01 !important;
}
.sub-menu .active:hover::before {
  background-color: #E75D01 !important;
}
.sub-menu li a:hover {
  color: #E75D01 !important;
  background-color: #FDF2EB !important;
}
.sub-menu li a .active {
  color: #E75D01 !important;
}

.btn-custom {
  padding: 8px 24px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary-custom {
  background: linear-gradient(to right, #E65C00, #F9D423) !important;
  color: white;
  border: none;
}
.btn-primary-custom:hover {
  background: linear-gradient(to right, rgba(230, 92, 0, 0.7137254902), rgba(249, 213, 35, 0.8549019608)) !important;
}

.btn-cancel-custom {
  background: #3B3F5C;
  color: white;
  border: none;
}

.btn-outline-custom {
  background: #ffffff;
  border: 1px solid #E75D01;
  color: #E75D01;
}
.btn-outline-custom:hover {
  border: 1px solid rgba(231, 93, 1, 0.6509803922);
  color: rgba(231, 93, 1, 0.6784313725);
}

.btn-gray-custom {
  background: #ffffff;
  border: 1px solid #828282;
  color: #828282;
}
.btn-gray-custom:hover {
  border: 1px solid rgba(130, 130, 130, 0.7254901961);
  color: rgba(130, 130, 130, 0.7725490196);
}

.package-custom-btn .btn-gray-custom {
  background: #ffffff;
  border: 1px solid #888EA8;
  color: #888EA8;
}
.package-custom-btn .btn-gray-custom:hover {
  border: 1px solid rgba(136, 142, 168, 0.768627451);
  color: rgba(136, 142, 168, 0.768627451);
}

.custom-primary-background {
  background-color: #E75D01 !important;
}

[type=checkbox]:checked, [type=radio]:checked {
  background-color: #E75D01 !important;
}

.form-select {
  font-weight: 400 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 1.75rem !important;
}

.field_with_errors label.message, label.form-validation-error {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: right;
  color: #E7515A;
}
.field_with_errors label.message.daterange-validation-error, label.form-validation-error.daterange-validation-error {
  font-size: 12px;
  text-align: left;
}

.icon-sortable {
  position: relative;
  display: inline-block;
  height: 100%;
  width: -moz-max-content;
  width: max-content;
}

.icon-sortable:after, .icon-sortable:before {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border-left: 5px solid rgba(0, 0, 0, 0);
  border-right: 5px solid rgba(0, 0, 0, 0);
  opacity: 0.2;
}

.icon-sortable:after {
  border-top: 5px solid #0e1726;
  bottom: -7px;
}

.icon-sortable:before {
  border-bottom: 5px solid #0e1726;
  top: -7px;
}

.desc-0:after, .desc-2:after, .desc-1:after {
  border-top: 5px solid blue;
  bottom: -7px;
  opacity: 1;
}

.asc-0:before, .asc-1:before, .asc-2:before {
  border-bottom: 5px solid blue;
  top: -7px;
  opacity: 1;
}

table {
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

table td {
  width: 400px;
}

.last-btn-action_button {
  order: 9999;
}

@media screen and (max-width: 450px) {
  .report-header {
    flex-direction: column;
  }
  .date-filter {
    margin-top: 0.75rem;
    flex-direction: column;
    position: relative;
  }
}
.btn-primary-disable {
  background: gray !important;
  color: white;
  border: none;
}

@media screen and (max-height: 915px) {
  .package-random-input {
    flex-direction: column;
    align-items: start;
  }
  .form-button {
    width: 100%;
    align-items: start;
  }
}
.button-preview-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.5rem;
}

.button-preview-container button {
  transition: all 0.3s ease;
  min-width: 100px;
  text-align: center;
}

.custom_package_preview {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.custom-scrollbar::-webkit-scrollbar {
  height: 4px; /* For horizontal scrollbar */
  width: 4px; /* For vertical scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, 0.5058823529);
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

input::placeholder {
  color: #BABABA !important;
}

input::placeholder {
  color: #BABABA !important;
}

.custom-input-file-bg {
  background-color: #F9FAFB !important;
}

.rich-menu-phone-preview:active {
  cursor: grabbing;
}

.rich-menu-phone-preview::-webkit-scrollbar {
  height: 4px; /* For horizontal scrollbar */
  width: 4px; /* For vertical scrollbar */
}

.rich-menu-phone-preview::-webkit-scrollbar-track {
  background: rgba(241, 241, 241, 0.5058823529);
  border-radius: 2px;
}

.rich-menu-phone-preview::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 2px;
}

.rich-menu-phone-preview::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.normal-input-placeholder::placeholder {
  font-weight: normal; /* Removes bold */
  font-style: normal;
  color: #aaa; /* Optional: Change color */
}

.table-action-btn {
  padding: 8px 24px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #828282;
  color: #828282;
}
.table-action-btn:hover {
  border: 1px solid rgba(130, 130, 130, 0.7254901961);
  color: rgba(130, 130, 130, 0.7725490196);
}
@media (width < 30rem) {
  .table-action-btn {
    padding: 2px 8px;
    font-size: 10px;
  }
}
@media (width >= 30rem) and (width < 48rem) {
  .table-action-btn {
    padding: 4px 10px;
    font-size: 12px;
  }
}

@media (width < 30rem) {
  .item-count-text {
    font-size: 10px;
  }
}
@media (width >= 30rem) {
  .item-count-text {
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .chat_message {
    max-width: 100%;
  }
}
.disabled-action-button {
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 365px) {
  .operation-staff-count {
    display: flex;
    flex-direction: column;
  }
}
div[data-popper-arrow], div[data-popper-arrow]::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}
div[data-popper-arrow] {
  visibility: hidden;
}
div[data-popper-arrow]::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}
.tooltip[data-popper-placement^=top] > div[data-popper-arrow] {
  bottom: -4px;
}
.tooltip[data-popper-placement^=bottom] > div[data-popper-arrow] {
  top: -4px;
}