.ui-autocomplete-input,
select:not(.ui-datepicker-month):not(.ui-datepicker-year) {
  padding-right: 2.8rem !important;
}

.form-floating > label {
  z-index: 1 !important;
}

.btn:focus {
  background-color: #47699b;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

input:read-only,
input:read-only:focus {
  background-color: #f1f1f1;
  cursor: default;
}

input:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border: 1px solid rgb(219, 39, 119);
  color: rgb(219, 39, 119);
}

input.is-invalid ~ label.invalid-feedback,
textarea.is-invalid ~ label.invalid-feedback,
select.is-invalid ~ label.invalid-feedback {
  display: block !important;
}

select.form-control {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
}

.exim-table tr:nth-child(odd) > th,
.exim-table tr:nth-child(odd) > td {
  background-color: #f3f4f6;
}

.exim-table tr:nth-child(even) > th,
.exim-table tr:nth-child(even) > td {
  background-color: rgb(255, 253, 253);
}

.exim-table tr:hover > th,
.exim-table tr:hover > td {
  background-color: rgb(235, 235, 235);
}

.burger-wrapper {
  width: max-content;
  height: max-content;
  height: 25px;
}

.burger-wrapper .hamburger {
  background: #1c2434;
  width: 25px;
  height: 2px;
  position: relative;
  transition: background 10ms 300ms ease;
  display: block;
  border-radius: 2px;
}

.burger-wrapper .hamburger:before,
.burger-wrapper .hamburger:after {
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  position: absolute;
  background: #1c2434;
  width: 25px;
  height: 2px;
  content: "";
  left: 0;
  border-radius: 2px;
}

.burger-wrapper .hamburger:before {
  top: -8px;
}

.burger-wrapper .hamburger:after {
  top: 8px;
}

.burger-wrapper.active .hamburger {
  background: transparent;
}

.burger-wrapper.active .hamburger:after,
.burger-wrapper.active .hamburger:before {
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  top: 0;
}

.burger-wrapper.active .hamburger:before {
  transform: rotate(45deg);
}

.burger-wrapper.active .hamburger:after {
  transform: rotate(-45deg);
}

#sidebar.active {
  transition: left 300ms ease;
  left: 0 !important;
}

.custom-scroll-hover > div::-webkit-scrollbar {
  height: 0.5rem;
}

.custom-scroll-hover > div::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll-hover > div::-webkit-scrollbar-thumb {
  background: transparent;
}

.custom-scroll-hover > div::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

.custom-scroll > div::-webkit-scrollbar,
.custom-scroll-ui-menu::-webkit-scrollbar {
  width: 0.5rem;
}

.custom-scroll > div::-webkit-scrollbar-track,
.custom-scroll-hover:hover > div::-webkit-scrollbar-track,
.custom-scroll-ui-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scroll > div::-webkit-scrollbar-thumb,
.custom-scroll-hover:hover > div::-webkit-scrollbar-thumb,
.custom-scroll-ui-menu::-webkit-scrollbar-thumb {
  background: #888;
}

.custom-scroll > div::-webkit-scrollbar-thumb:hover,
.custom-scroll-hover:hover > div::-webkit-scrollbar-thumb:hover,
.custom-scroll-ui-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.my-modal.active {
  display: grid !important;
  transition: opacity 300ms ease;
  opacity: 1;
}

.ui-front {
  z-index: 1000;
}

input.ui-autocomplete-input.is-invalid ~ i.fa {
  display: none;
}

.ui-autocomplete-input ~ i.fa {
  position: absolute;
  right: 0.8rem;
  transition: transform 300ms ease-out;
}

.position-relative > label ~ .ui-autocomplete-input ~ i.fa {
  top: 45px;
}

.position-relative > .ui-autocomplete-input ~ i.fa {
  bottom: 10px;
}

.ui-autocomplete-input:focus ~ i.fa {
  transform: rotate(180deg);
}

.ui-autocomplete-input ~ button.reset-input {
  position: absolute;
  right: 1.8rem;
  display: flex;
  color: rgb(156 163 175);
}

.ui-autocomplete-input ~ button.reset-input:hover {
  color: rgb(239 68 68);
}

.position-relative > label ~ .ui-autocomplete-input ~ button.reset-input {
  top: 45px;
}

.position-relative > .ui-autocomplete-input ~ button.reset-input {
  bottom: 10px;
}

.percentage {
  position: relative;
}

.percentage::after {
  content: "%";
  position: absolute;
  right: 0.8rem;
  top: 0.5rem;
}

.percentage:has(label)::after {
  top: 2.5rem;
}

.percentage input {
  padding-right: 1.8rem !important;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@media screen and (max-width: 1024px) {
  .fixed-background {
    background-size: cover;
  }
}

@media screen and (max-height: 470px) {
  #sidebar {
    overflow: hidden;
  }

  #sidebar > div {
    height: 300px;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 6rem;
  }
}

#notification.active,
#header-search.active {
  display: block !important;
}

.load-notif button {
  padding: 4px 18px;
  border-top-width: 1px;
  border-color: rgb(226 232 240);
  font-size: 0.875rem/* 14px */;
  line-height: 1.25rem/* 20px */;
  color: rgb(96 165 250);
  display: block;
  width: 100%;
}

.load-notif button:hover {
  color: rgb(59 130 246);
}

#main-tabs li.active {
  color: rgb(96 165 250);
}

#main-tabs li.active span {
  background: rgb(219 234 254);
}

#main-tabs li.completed {
  color: rgb(34 197 94);
}

#main-tabs li.completed span {
  background: rgb(187 247 208);
}

#main-tabs li.active.completed {
  color: rgb(22 163 74);
}

#main-tabs li.active.completed span {
  background: rgb(134 239 172);
}

#steps li:has(a.active) a {
  background: rgb(219 234 254);
  color: rgb(96 165 250);
}

#steps li:has(a.completed):after {
  border-color: rgb(187 247 208);
}

#steps li:has(a.completed) a {
  background: rgb(187 247 208);
  color: rgb(34 197 94);
}

#steps li:has(a.active.completed):after {
  border-color: rgb(134 239 172);
}

#steps li:has(a.active.completed) a {
  background: rgb(134 239 172);
  color: rgb(22 163 74);
}

.dokumen.dokumen-completed #form-steps form input:read-only,
.dokumen.dokumen-completed #form-steps form select:read-only,
.dokumen.dokumen-completed #form-steps form textarea:read-only {
  background-color: #fff;
  cursor: default;
  padding: 0;
  font-weight: 500;
  border-color: transparent;
  outline: none !important;
  height: max-content;
  box-shadow: none !important;
  user-select: text;
}

.dokumen.dokumen-completed #form-steps form input:read-only ~ .reset-input,
.dokumen.dokumen-completed #form-steps form input:read-only ~ .fa {
  display: none;
}

.dokumen.dokumen-completed
  #form-steps
  form
  div.mb-3:has(input[type="file"])
  input[type="file"] {
  display: none;
}

.dokumen.dokumen-completed #form-steps form h6 {
  font-size: 14px;
}

#form-steps form {
  position: absolute;
  left: 110%;
  top: 0;
  padding: 1px;
  background: #fff;
  opacity: 0;
  width: 100%;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#form-steps form.active {
  position: relative;
  left: 0%;
  opacity: 1;
}

.flip {
  transform: scale(-1, 1);
}