.office-nav {
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.office-nav__btn {
  background-color: transparent;
  border-color: transparent;
  white-space: nowrap;
  background-color: var(--bg-basic);
  font-size: 16px;
  height: 46px;
  border-radius: 8px;
  display: flex;
  gap: 6px;
  padding: 0 16px;
  align-items: center;
}

.office-nav__btn.active {
  color: var(--text-inverse);
  background-color: var(--bg-brand);
}

.office-nav__btn svg {
  stroke: var(--icon-basic-1);
}

.office-nav__btn.active svg {
  stroke: var(--icon-inverse);
}

.office-ads {
  border-radius: 12px;
  padding: 20px;
  background-color: var(--bg-basic);
}

.office-table-container {
  /* overflow-x: auto; */
  /* overflow-y:unset; */
}

.office-table {
  width: 100%;
  border-collapse: collapse;
}

.office-table__th,
.office-table__td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--border-secondary);
}

.office-table__td-with_clock{
    display: flex;
    align-items: center;
    gap: 4px;
}

.office-table__th {
  padding: 0;
  position: relative;
}
.office-table__th-btn {
  display: flex;
  padding: 16px 12px;
  width: 100%;
  height: 100%;
  font-weight: 500;
  color: var(--text-secondary);
  background-color: transparent;
  border-color: transparent;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.office-table__th-btn + .dropdown {
  width: max-content;
}

.office-table__tbody .office-table__tr {
  cursor: pointer;
}

.office-table__tbody .office-table__tr:hover {
  background-color: var(--bg-basic-1);
}

.office-table__th-btn:hover,
.office-table__th-btn.active {
  background-color: var(--bg-basic-1);
  cursor: pointer;
  color: var(--text-basic);
}

.office-table__th-btn .office-table__th-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%238B8C94' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.office-table__th-btn:hover .office-table__th-icon,
.office-table__th-btn.active .office-table__th-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000000' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.office-table__th-btn.sort,
.office-table__th-btn.filter {
  color: var(--text-basic);
}

.office-table__th-btn.sort .office-table__th-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.66602 4H8.66602M2.66602 8H7.33268M2.66602 12H7.33268M9.99935 10L11.9993 12M11.9993 12L13.9993 10M11.9993 12V4' stroke='%23FF5F00' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.office-table__th-btn.filter .office-table__th-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.66699 2.66602H13.3337V4.11402C13.3336 4.46761 13.1931 4.80669 12.943 5.05668L10.0003 7.99935V12.666L6.00033 13.9993V8.33268L3.01366 5.04735C2.79062 4.80197 2.66703 4.48228 2.66699 4.15068V2.66602Z' stroke='%23FF5F00' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.office-table__th-btn.active + .dropdown {
  display: block;
  max-height: 400px;
}

.office-ads .dropdown__list {
  gap: 4px;
}

.office-ads .dropdown__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
}

.office-ads .dropdown__btn:hover,
.office-ads .dropdown__btn.active {
  background-color: var(--bg-basic-1);
}

.office-ads__dropdown-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-secondary);
}

.ch-status {
  position: relative;
}

.ch-status__list {
  position: absolute;
  display: none;
  flex-direction: column;
  transform: translateY(-100%);
  top: -8px;
  background: var(--bg-basic);
  box-shadow: 0px 0px 29px 0px #5a596645;
  border-radius: 12px;
  gap: 5px;
  padding: 12px;
  list-style: none;
  min-width: 218px;
}

.ch-status__btn {
  width: 100%;
  border-radius: 6px;
  padding: 8px;
  border: transparent;
  background-color: transparent;
  text-align: left;
}

.ch-status__btn:hover {
  background-color: var(--bg-basic-1);
}

.ch-status__button.active + .ch-status__list {
  display: flex;
}

.ch-status__button.active .tag__text::after {
  transform: rotate(180deg);
}

.ads-details__list {
  padding: 0;
  margin: 18px 0 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ads-details__item {
  border-bottom: 1px solid var(--border-secondary);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px;
  padding-bottom: 4px;
}

.ads-details__bttns {
  margin-top: 16px;
  display: flex;
  gap: 16px;
}

.ads-details__bttns .bttn {
  min-width: 118px;
}

.ads-photo__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.ads-photo-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 195px;
  border-radius: 8px;
  background-color: var(--bg-basic-1);
  justify-content: center;
  overflow: hidden;
}

.ads-photo-card__img {
  display: block;
  height: 100%;
}

.ads-photo-card__block {
  position: absolute;
  padding: 7px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #eae9ecb2;
  display: none;
  justify-content: space-between;
}

.ads-photo-card:hover .ads-photo-card__block {
  display: flex;
}

.ads-photo-card__btn {
  display: block;
  width: 34px;
  height: 34px;
  background-color: transparent;
  border-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}

.ads-photo-card__btn-mark {
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9998 17.75L5.82784 20.995L7.00684 14.122L2.00684 9.25495L8.90684 8.25495L11.9928 2.00195L15.0788 8.25495L21.9788 9.25495L16.9788 14.122L18.1578 20.995L11.9998 17.75Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.ads-photo-card__btn-delete {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7H20M10 11V17M14 11V17M5 7L6 19C6 19.5304 6.21071 20.0391 6.58579 20.4142C6.96086 20.7893 7.46957 21 8 21H16C16.5304 21 17.0391 20.7893 17.4142 20.4142C17.7893 20.0391 18 19.5304 18 19L19 7M9 7V4C9 3.73478 9.10536 3.48043 9.29289 3.29289C9.48043 3.10536 9.73478 3 10 3H14C14.2652 3 14.5196 3.10536 14.7071 3.29289C14.8946 3.48043 15 3.73478 15 4V7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.ads-photo-card__btn-mark.active {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9932 1.50195C12.0865 1.50195 12.1785 1.52784 12.2578 1.57715C12.337 1.62645 12.4002 1.6976 12.4414 1.78125L15.2939 7.56152L15.4102 7.79688L15.6709 7.83496L22.0508 8.76074C22.1382 8.77343 22.2209 8.80934 22.29 8.86426C22.359 8.9191 22.4122 8.99119 22.4443 9.07324C22.4765 9.15556 22.4863 9.24568 22.4727 9.33301C22.4593 9.41795 22.4233 9.49704 22.3701 9.56445L22.3213 9.61816L17.7041 14.1123L17.5156 14.2959L17.5605 14.5557L18.6514 20.9102V20.9111C18.6663 20.9984 18.658 21.088 18.627 21.1709C18.5958 21.254 18.5434 21.3278 18.4746 21.3838C18.4058 21.4398 18.323 21.4757 18.2354 21.4893C18.1497 21.5025 18.0624 21.4927 17.9814 21.4619L17.918 21.4336L12.2324 18.4375L12 18.3145L11.7666 18.4375L6.06055 21.4375C5.98219 21.4787 5.89413 21.498 5.80566 21.4941C5.71714 21.4902 5.63112 21.4631 5.55664 21.415C5.48232 21.3671 5.42193 21.3005 5.38184 21.2217C5.34327 21.1457 5.32482 21.0606 5.32812 20.9756L5.33887 20.8848L6.4248 14.5557L6.46973 14.2959L6.28125 14.1123L1.65918 9.61328H1.6582C1.59478 9.55166 1.54917 9.47385 1.52539 9.38867C1.50164 9.3035 1.50108 9.21348 1.52344 9.12793C1.54582 9.0424 1.58995 8.96401 1.65234 8.90137C1.71319 8.84029 1.78913 8.79667 1.87207 8.77344L1.9502 8.75684L8.31543 7.83496L8.5752 7.79688L8.69141 7.56152L11.5449 1.78125C11.5862 1.69752 11.6502 1.62645 11.7295 1.57715C11.8086 1.528 11.9 1.50197 11.9932 1.50195Z' fill='%23FF5F00' stroke='%23FF5F00'/%3E%3C/svg%3E%0A");
}

.ads-history {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}

.ads-history-card {
  display: flex;
  gap: 8px;
  min-height: 54px;
}

.ads-history-card__marker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.ads-history-card__marker-icon {
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='8' fill='%23EAE9EC'/%3E%3Cpath d='M17.2497 11.4163L20.583 14.7496M9.33301 22.6663H12.6663L21.4163 13.9163C21.6352 13.6974 21.8088 13.4376 21.9273 13.1516C22.0457 12.8656 22.1067 12.5591 22.1067 12.2496C22.1067 11.9401 22.0457 11.6336 21.9273 11.3476C21.8088 11.0616 21.6352 10.8018 21.4163 10.5829C21.1975 10.3641 20.9376 10.1904 20.6517 10.072C20.3657 9.95354 20.0592 9.89258 19.7497 9.89258C19.4401 9.89258 19.1336 9.95354 18.8477 10.072C18.5617 10.1904 18.3019 10.3641 18.083 10.5829L9.33301 19.3329V22.6663Z' stroke='%238B8C94' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.ads-history-card__marker-line {
  background-color: var(--border-basic);
  flex-grow: 1;
  width: 2px;
  border-radius: 5px;
}

.ads-history .ads-history__item:last-child .ads-history-card__marker-line {
  display: none;
}

.ads-history-card__block {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-grow: 1;
  min-height: 32px;
  height: fit-content;
  align-items: center;
}

.ads-history-card__info {
  display: flex;
  gap: 6px;
  align-items: center;
  height: fit-content;
}

.ads-history-card__info-name {
  color: var(--text-info);
}

.ads-history-card__time {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 14px;
  height: fit-content;
}

.order-track-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.appeal-text {
  margin: 18px 0 24px;
}

.appeal__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  margin-top: 8px;
}

.appeal__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-radius: 12px;
  padding: 12px 12px 12px 36px;
  background-color: var(--bg-basic-1);
}

.appeal__item::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.6641 2.5V5.83333C11.6641 6.05435 11.7519 6.26631 11.9081 6.42259C12.0644 6.57887 12.2764 6.66667 12.4974 6.66667H15.8307" stroke="%238B8C94" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.1641 17.5H5.83073C5.3887 17.5 4.96478 17.3244 4.65222 17.0118C4.33966 16.6993 4.16406 16.2754 4.16406 15.8333V4.16667C4.16406 3.72464 4.33966 3.30072 4.65222 2.98816C4.96478 2.67559 5.3887 2.5 5.83073 2.5H11.6641L15.8307 6.66667V15.8333C15.8307 16.2754 15.6551 16.6993 15.3426 17.0118C15.03 17.3244 14.6061 17.5 14.1641 17.5Z" stroke="%238B8C94" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.appeal__item-text {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.appeal__item-link {
  display: block;
  width: 48px;
  height: 34px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 17V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H18C18.5304 21 19.0391 20.7893 19.4142 20.4142C19.7893 20.0391 20 19.5304 20 19V17M7 11L12 16M12 16L17 11M12 16V4" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}