.dashboard-order-tab-content {
  padding: 1.5vw;
  width: 100%;
  min-height: 10vw;
  border-radius: 0.9vw;
  border: 0.12vw solid #f1f5f9;
  gap: 1vw;
  justify-content: start !important;
  align-items: start !important;
  position: relative;
}

.dashboard-order-tab-content .dash-box-header {
  padding-top: 0.25vw;
  padding-bottom: 1.5vw;
  width: 100%;
  justify-content: space-between;
  position: relative;
}

.dashboard-order-tab-content .dash-box-header h2.title {
  font-size: 0.95vw;
  font-weight: bold;
}

.dash-orders-divider {
  width: 100%;
  position: relative;
}

.dash-orders-divider ul {
  width: 100%;
  position: relative;
  justify-content: start !important;
  border-bottom: 0.12vw solid #f1f5f9;
}

.dash-orders-divider ul li a {
  padding: 1vw 1.5vw;
  font-size: 0.9vw;
  font-weight: 600;
  color: #b7bfc5;
  position: relative;
  gap: 0.4vw;
}

.dash-orders-divider ul li.active a {
  color: var(--red);
}

.dash-orders-divider ul li:not(li:last-child) a:after {
  content: "";
  width: 0.125vw;
  height: 56%;
  background-color: #f1f5f9;
  position: absolute;
  left: 0;
}

.dash-orders-divider ul li a::before {
  content: "";
  width: 0;
  height: 0.2vw;
  background-color: var(--red);
  position: absolute;
  top: 99.5%;
  border-radius: 0 0 0.2vw 0.2vw;
  transition: all 0.25s ease-in-out;
}

.dash-orders-divider ul li.active a::before {
  animation: animate-tab-order1 0.25s ease-in-out forwards;
}

@keyframes animate-tab-order1 {
  0% {
    width: 0;
  }
  100% {
    width: 75%;
  }
}

.dash-orders-divider ul li a span {
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  background-color: #dfe5ee;
  color: var(--light-bg);
  font-weight: 500;
  font-size: 0.85vw;
  transition: all 0.25s ease-in-out;
}

.dash-orders-divider ul li.active a span {
  animation: animate-tab-order2 0.25s ease-in-out forwards;
}

@keyframes animate-tab-order2 {
  0% {
    background-color: #dfe5ee;
  }
  100% {
    background-color: var(--red);
  }
}

.dashboard-order-search-bar {
  width: 100%;
  position: relative;
}

.dashboard-order-search-bar i {
  position: absolute;
  right: 1.5vw;
  font-size: 1.25vw;
  color: #94a3b8;
}

.dashboard-order-search-bar input {
  margin: 0.5vw 0;
  width: 100%;
  padding: 1vw 3.75vw;
  border-radius: 0.9vw;
  caret-color: var(--red);
  font-size: 0.95vw;
  font-weight: 500;
  background-color: #f8fafc;
  color: #94a3b8;
  outline: none !important;
  border: none;
  transition: all 0.2s ease-in-out;
}

.dashboard-order-search-bar input:focus {
  background-color: #f0f3f6;
  color: #2d2d2d;
}

.dashboard-order-search-bar input::placeholder {
  color: #94a3b8;
  font-size: 0.95vw;
  font-weight: normal;
}

.dashboard-orders-cards-cont {
  width: 100%;
  position: relative;
  justify-content: start !important;
  gap: 1vw;
}

.dash-order-card {
  padding: 1.5vw;
  width: 100%;
  min-height: 10vw;
  border-radius: 0.9vw;
  border: 0.12vw solid #f1f5f9;
  gap: 1vw;
}

.dash-order-card a.order-details.btn {
  padding: 0.8vw 1vw;
  border-radius: 0.75vw;
  background-color: var(--green);
  gap: 0.5vw;
  font-weight: 500;
  color: var(--light-bg);
  font-size: 0.9vw;
  position: absolute;
  top: 1.5vw;
  left: 1.5vw;
  transition: all 0.25s ease-in-out;
}

.dash-order-card a.order-details.btn:hover {
  filter: brightness(1.25);
  color: var(--light-green2);
}

.dash-order-card a.order-details.btn svg {
  width: 1.4vw;
}

.dash-order-card a.order-details.btn svg path {
  transition: all 0.25s ease-in-out;
}

.dash-order-card a.order-details.btn:hover svg path {
  fill: var(--light-green2) !important;
}

.dash-order-card-text-details {
  width: 100%;
  padding-bottom: 2vw;
  border-bottom: 0.12vw solid #f1f5f9;
  justify-content: start !important;
  gap: 1vw;
}

.dash-order-card-text-details .order-status-icon {
  padding: 1vw;
  width: 5.5vw;
  height: 5.5vw;
  border-radius: 1vw;
  border: 0.12vw solid #f1f5f9;
  position: relative;
}

.dash-order-card-text-details .order-status-icon svg {
  width: 100%;
}

.dash-order-card-text-details .dash-order-card-text-sub-details {
  justify-content: start !important;
  align-items: start !important;
  gap: 0.4vw;
}

.dash-order-card-text-details .dash-order-card-text-sub-details h3 {
  font-weight: bold !important;
  font-size: 1vw;
  margin-bottom: 0.5vw;
}

.dash-order-card-text-details .dash-order-card-text-sub-details h3.in-progress {
  color: var(--gold);
}

.dash-order-card-text-details .dash-order-card-text-sub-details h3.cancelled {
  color: var(--red);
}

.dash-order-card-text-details .dash-order-card-text-sub-details h3.success {
  color: #22c55e;
}

.dash-order-card-text-details
  .dash-order-card-text-sub-details
  h3.ready-to-send {
  color: #936dff;
}

.dash-order-card-text-details .dash-order-card-text-sub-details > div {
  color: #b7bfc5;
  font-weight: 500;
  font-size: 0.88vw;
  gap: 2vw;
}

.dash-order-card-text-details .dash-order-card-text-sub-details > div > div {
  gap: 0.35vw;
}

.dash-order-card-text-details
  .dash-order-card-text-sub-details
  > div
  > div
  div.sub-divider {
  color: var(--dark-box-bg);
  font-weight: 600;
}

.dash-order-card-text-details
  .dash-order-card-text-sub-details
  > div
  > div
  div.sub-divider
  svg.toman {
  width: 1.1vw;
  margin-right: 0.4vw;
}

.dash-order-card-photos-items {
  width: 100%;
  min-height: 5vw;
  position: relative;
  gap: 1.6vw;
  justify-content: start !important;
}

.dash-order-card-photos-items img {
  width: 8vw;
  height: 8.7vw;
}

@media (max-width: 450px) {
  .dashboard-order-tab-content .dash-box-header h2.title {
    font-size: 2.85vw;
    font-weight: bold;
    margin-bottom: 1.2vw;
  }
  .dash-orders-divider ul li a {
    padding: 1vw 1.5vw;
    font-size: 2.6vw;
    font-weight: 600;
    white-space: nowrap;
    color: #b7bfc5;
    position: relative;
    gap: 0.4vw;
  }
  .dash-orders-divider ul li a span {
    width: 4.5vw;
    height: 4.5vw;
    border-radius: 50%;
    background-color: #dfe5ee;
    color: var(--light-bg);
    font-weight: 500;
    font-size: 2.85vw;
    transition: all 0.25s ease-in-out;
  }
  .dash-orders-divider ul {
    justify-content: space-between !important;
    gap: 0.41vw;
  }
  .dashboard-order-search-bar input {
    height: 9vw !important;
    border-radius: 2vw;
    font-size: 2.96vw;
    padding-right: 6vw;
  }
  .dashboard-order-search-bar input::placeholder {
    font-size: 2.88vw;
    font-weight: 600;
  }
  .dashboard-order-tab-content {
    border-radius: 2vw;
    gap: 1.7vw;
  }
  .dashboard-order-search-bar i {
    position: absolute;
    right: 1.5vw;
    font-size: 3.25vw;
    color: #94a3b8;
  }
  .dash-order-card-text-details .order-status-icon {
    padding: 0.8vw;
    width: 8.5vw;
    height: 8.5vw;
    border-radius: 2vw;
    border: 0.12vw solid #f1f5f9;
    position: relative;
  }
  .dash-order-card-text-details .dash-order-card-text-sub-details h3 {
    font-weight: bolder !important;
    font-size: 2.99vw;
    margin-bottom: 0.5vw;
  }
  .dash-order-card {
    padding: 1.5vw;
    width: 100%;
    min-height: 10vw;
    border-radius: 2vw;
    border: 0.4vw solid #f1f5f9;
    gap: 1vw;
  }
  .dash-order-card-text-details .dash-order-card-text-sub-details > div > div {
    gap: 0.75vw;
    font-size: 2.8vw;
  }
  .dash-order-card-text-details .dash-order-card-text-sub-details {
    justify-content: start !important;
    align-items: start !important;
    gap: 2.6vw;
  }
  .dash-order-card a.order-details.btn {
    padding: 2vw 1.8vw;
    border-radius: 1.88vw;
    background-color: var(--green);
    gap: 0.5vw;
    font-weight: 500;
    color: var(--light-bg);
    font-size: 2.7vw;
    position: absolute;
    top: 1.5vw;
    left: 1.5vw;
    transition: all 0.25s ease-in-out;
  }
  .dash-order-card a.order-details.btn svg {
    width: 4vw;
  }
  .dash-order-card-photos-items img {
    width: 14vw;
    height: 14.7vw;
    font-size: 2vw;
  }
  .dash-order-card-photos-items {
    width: 100%;
    min-height: 5vw;
    position: relative;
    gap: 1.6vw;
    justify-content: start !important;
    font-size: 2vw;
  }
  .dash-order-card-text-details
    .dash-order-card-text-sub-details
    > div
    > div
    div.sub-divider
    svg.toman {
    width: 3.9vw;
    margin-right: 0.4vw;
  }
  .dashboard-order-tab-content {
    border: 0.52vw solid #f1f5f9;
  }
  .dash-orders-divider ul {
    border-bottom: 0.52vw solid #f1f5f9;
  }
  .dash-order-card-text-details {
    border-bottom: 0.4vw solid #f1f5f9;
  }
}