#step-tabs .is-completed {
  color: rgb(74, 222, 128) !important;
}

#step-tabs .is-draft {
  color: rgb(252 165 165) !important;
}

.ui-autocomplete-input,
select {
  padding-right: 2.8rem !important;
}

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

.btn-primary {
  background-color: #0d6efd !important;
}

.btn-primary:hover {
  background-color: #0b5ed7 !important;
}

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

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;
}

.navbar {
  background: linear-gradient(-45deg, #c6487e, #0b3659, #940643, #7e22cea6);
  background-size: 400% 400%;
  animation: bg-animation 15s ease infinite;
}

.fixed-background {
  background: url(../img/isometric_factory.png) no-repeat center 15vh fixed;
  background-size: contain;
  width: 100%;
  height: 100%;
  background-attachment: scroll;
}

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

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

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

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

.burger-wrapper .hamburger {
  background: #fff;
  width: 30px;
  height: 2px;
  position: relative;
  transition: background 10ms 300ms ease;
  display: block;
}

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

.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;
}

#sidebar a:hover, #sidebar button:hover {
  color: rgb(96 165 250) !important;
}

#sidebar a:hover svg {
  fill: rgb(96 165 250);
}

.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-hover > div {
  overflow: hidden !important;
}

.custom-scroll-hover:hover > div {
  overflow: auto !important;
}

.custom-scroll-hover > div,
.custom-scroll > div,
.custom-scroll-ui-menu,
.sidebar {
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

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

.custom-scroll > div::-webkit-scrollbar-track,
.custom-scroll-hover:hover > div::-webkit-scrollbar-track,
.custom-scroll-ui-menu::-webkit-scrollbar-track,
.sidebar::-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,
.sidebar::-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,
.sidebar::-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: 43px;
}

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

.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: 43px;
}

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

.loading-container .loading, .position-relative .loading {
  position: absolute;
  right: 0.75rem;
  width: 1rem;
  height: 1rem;
  top: 60px;
  border-width: 2px;
}

.position-relative .loading {
  position: absolute;
  right: 1.75rem;
  width: 1rem;
  height: 1rem;
  top: 44px;
  border-width: 2px;
}

.percentage {
  position: relative;
}

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

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

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: contents;
  font-size: 12px;
}

.slide-up-anim > div {
  position: relative;
  top: 25px;
}

.slide-up-anim > div.active {
  animation: slide-up ease 0.4s forwards;
  top: 0;
  position: absolute;
}

#slide-content > div.active {
  position: relative;
  left: 0%;
  opacity: 1;
}

#slide-content > div {
  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);
}

#status-history ul {
  border-color: rgb(60 12 112/1);
  border-left-width: 2px;
  padding: 1rem 1rem 1rem 1.75rem;
}

#status-history ul {
  margin-left: 8rem;
  position: relative;
}

.loading-postarif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-postarif::before {
  content: attr(data-text);
  background: #fff;
  border-radius: 6px;
  padding: 10% 7% 5% 7%;
  font-size: 1.5rem;
}

.loading-postarif::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  left: 50%;
  top: 42%;
  margin-left: -25px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes slide-up {
  0% {
    top: 25px;
  }
  100% {
    top: 0;
  }
}

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

@keyframes bg-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@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: 3rem;
  }
}