.tpg-filter-bar {
  --tpg-filter-bg: #fff;
  --tpg-filter-border: #dfe6f2;
  --tpg-filter-text: #183569;
  --tpg-filter-muted: #5f6d89;
  --tpg-filter-icon: #1d347f;
  --tpg-filter-focus: #1d347f;
  --tpg-filter-button: #182f86;
  --tpg-filter-shadow: 0 4px 14px rgba(12, 31, 70, 0.07);
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) minmax(260px, 2.2fr);
  gap: 16px;
  width: 100%;
  margin: 8px 0 16px;
}

.tpg-filter-field {
  position: relative;
  min-width: 0;
}

.tpg-filter-field .form-item {
  margin: 0;
}

.tpg-filter-field--select {
  isolation: isolate;
}

.tpg-filter-control {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--tpg-filter-border);
  border-radius: 8px;
  background-color: var(--tpg-filter-bg);
  color: var(--tpg-filter-text);
  box-shadow: var(--tpg-filter-shadow);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.body-page .tpg-filter-bar .tpg-filter-control,
.tpg-filter-bar .tpg-filter-control {
  background-color: var(--tpg-filter-bg) !important;
  background-image: none !important;
  color: var(--tpg-filter-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.tpg-filter-control:focus {
  border-color: var(--tpg-filter-focus);
  box-shadow: 0 0 0 3px rgba(29, 52, 127, 0.13), var(--tpg-filter-shadow);
}

.tpg-filter-control::placeholder {
  color: var(--tpg-filter-muted);
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  opacity: 1;
  text-transform: none !important;
}

.tpg-filter-select {
  padding: 0 44px 0 50px !important;
  cursor: pointer;
  text-indent: 0;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.body-page .tpg-filter-bar select.tpg-filter-select,
.tpg-filter-bar select.tpg-filter-select,
.tpg-filter-bar select.form-select.tpg-filter-select {
  height: 48px !important;
  min-height: 48px !important;
  padding-left: 50px !important;
  padding-right: 44px !important;
  border-radius: 8px !important;
  color: var(--tpg-filter-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 48px !important;
  text-transform: none !important;
}

.tpg-filter-bar select.tpg-filter-select option {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}

.tpg-filter-field--select::before,
.tpg-filter-field--select::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 2;
  pointer-events: none;
  transform: translateY(-50%);
}

.tpg-filter-field--select::before {
  left: 18px;
  width: 18px;
  height: 18px;
  background: var(--tpg-filter-icon);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.tpg-filter-field--select::after {
  right: 18px;
  width: 10px;
  height: 10px;
  border-color: var(--tpg-filter-icon);
  border-style: solid;
  border-width: 0 2px 2px 0;
  transform: translateY(-62%) rotate(45deg);
}

.tpg-filter-field--park::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 10.1A3.1 3.1 0 1 1 12 5.9a3.1 3.1 0 0 1 0 6.2Zm0-4.4a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 10.1A3.1 3.1 0 1 1 12 5.9a3.1 3.1 0 0 1 0 6.2Zm0-4.4a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z'/%3E%3C/svg%3E");
}

.tpg-filter-field--year::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3V2Zm13 8H4v10h16V10ZM4 8h16V7H4v1Zm3 5h3v3H7v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3V2Zm13 8H4v10h16V10ZM4 8h16V7H4v1Zm3 5h3v3H7v-3Zm5 0h3v3h-3v-3Z'/%3E%3C/svg%3E");
}

.tpg-filter-field--hashtag::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.2 3h2l-.8 5h4.5l.8-5h2l-.8 5H21v2h-4.4l-.7 4H20v2h-4.4l-.8 5h-2l.8-5H9.1l-.8 5h-2l.8-5H3v-2h4.4l.7-4H4V8h4.4l.8-5Zm.2 11h4.5l.7-4h-4.5l-.7 4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.2 3h2l-.8 5h4.5l.8-5h2l-.8 5H21v2h-4.4l-.7 4H20v2h-4.4l-.8 5h-2l.8-5H9.1l-.8 5h-2l.8-5H3v-2h4.4l.7-4H4V8h4.4l.8-5Zm.2 11h4.5l.7-4h-4.5l-.7 4Z'/%3E%3C/svg%3E");
}

.tpg-filter-search-field {
  display: flex;
}

.tpg-filter-search-field .tpg-filter-control {
  padding: 0 58px 0 22px !important;
}

.tpg-filter-search-button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--tpg-filter-button);
  color: #fff;
  cursor: pointer;
}

.tpg-filter-search-button::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' d='m20 20-4.6-4.6M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' d='m20 20-4.6-4.6M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tpg-filter-search-button:hover,
.tpg-filter-search-button:focus {
  background: #11246d;
}

html.dark-mode .tpg-filter-bar,
body.dark-mode .tpg-filter-bar,
html[data-theme="dark"] .tpg-filter-bar,
body[data-theme="dark"] .tpg-filter-bar {
  --tpg-filter-bg: #101a2e;
  --tpg-filter-border: #26334a;
  --tpg-filter-text: #e8eefc;
  --tpg-filter-muted: #a8b5cf;
  --tpg-filter-icon: #e8eefc;
  --tpg-filter-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}

.tpg-news-empty-state {
  margin: 18px 0 28px;
  padding: 24px;
  border: 1px solid #dfe6f2;
  border-radius: 8px;
  background: #fff;
  color: #183569;
  box-shadow: 0 4px 14px rgba(12, 31, 70, 0.07);
}

.tpg-news-empty-state h2 {
  margin: 0 0 8px;
  color: #183569;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.tpg-news-empty-state p {
  margin: 0;
  color: #4b5875;
  font-size: 15px;
  line-height: 1.55;
}

html.dark-mode .tpg-news-empty-state,
body.dark-mode .tpg-news-empty-state,
html[data-theme="dark"] .tpg-news-empty-state,
body[data-theme="dark"] .tpg-news-empty-state {
  background: #101a2e;
  border-color: #26334a;
  color: #e8eefc;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}

html.dark-mode .tpg-news-empty-state h2,
body.dark-mode .tpg-news-empty-state h2,
html[data-theme="dark"] .tpg-news-empty-state h2,
body[data-theme="dark"] .tpg-news-empty-state h2 {
  color: #e8eefc;
}

html.dark-mode .tpg-news-empty-state p,
body.dark-mode .tpg-news-empty-state p,
html[data-theme="dark"] .tpg-news-empty-state p,
body[data-theme="dark"] .tpg-news-empty-state p {
  color: #a8b5cf;
}

@media (max-width: 1100px) {
  .tpg-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .tpg-filter-bar {
    grid-template-columns: 1fr;
  }
}