@charset "UTF-8";
/*noinspection CssUnknownTarget*/
@import url("//fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,cyrillic-ext,cyrillic,latin-ext&display=swap");
:root {
  --window-inner-height: 100vh;
  /*****      COLORS      *****/
  --gray-100: #ffffff;
  --gray-200: #FAFAFA;
  --gray-300: #F4F4F4;
  --gray-400: #E6E6E9;
  --gray-500: #AFAFB3;
  --gray-600: #7A7A81;
  --gray-700: #5A5A62;
  --gray-800: #3D3D46;
  --gray-900: #131315;
  --brand-100: #eaf4ff;
  --brand-200: #daebff;
  --brand-300: #1189FC;
  --brand-400: #0078f9;
  --brand-500: #0169D9;
  --error-100: #ffe5e6;
  --error-200: #feced0;
  --error-300: #ff4c56;
  --error-400: #f83843;
  --error-500: #d52d37;
  --success-100: #E6FFEB;
  --success-200: #C6FFD3;
  --success-300: #59e97e;
  --success-400: #2FD059;
  --success-500: #18a73d;
  --delivery-100: #fdefe8;
  --delivery-200: #ffd3ad;
  --delivery-300: #ff8026;
  --delivery-400: #ff6a00;
  --delivery-500: #de5c00;
  --info-100: #fff9eb;
  --info-200: #ffecc0;
  --info-300: #ffcd58;
  --info-400: #ffc12e;
  --info-500: #db9a00;
  /*      ACCENT COLORS       */
  --accent-malachite: #16d663;
  --accent-malachite-light: #d3fae3;
  --accent-malachite-dark: #0cb851;
  --accent-electricBlue: #6effff;
  --accent-electricBlue-light: #e4ffff;
  --accent-electricBlue-dark: #04bebe;
  --accent-lime: #c2f600;
  --accent-lime-light: #f2ffc4;
  --accent-lime-dark: #8aaf02;
  --accent-tropicalIndigo: #a183ff;
  --accent-tropicalIndigo-light: #ede8ff;
  --accent-tropicalIndigo-dark: #9775ff;
  --accent-argentinaBlue: #64aeff;
  --accent-argentinaBlue-light: #e1efff;
  --accent-argentinaBlue-dark: #3e9aff;
  --accent-aerospaceOrange: #ff5104;
  --accent-aerospaceOrange-light: #ffe8dc;
  --accent-aerospaceOrange-dark: #f44b00;
  --accent-amber: #ffbd00;
  --accent-amber-light: #fff7e0;
  --accent-amber-dark: #e6ac02;
  --accent-violet: #ff82ff;
  --accent-violet-light: #fbecff;
  --accent-violet-dark: #e54bff;
  --accent-electricRaspberry: #ff4174;
  --accent-electricRaspberry-light: #ffe7ed;
  --accent-electricRaspberry-dark: #ff0548;
  --accent-mauve: #e7c5ff;
  --accent-mauve-light: #f1deff;
  --accent-mauve-dark: #cf8bff;
  --accent-rosyMist: #ffd2dd;
  --accent-rosyMist-light: #ffe6ec;
  --accent-rosyMist-dark: #ff7f9e;
  --accent-blue: #5b57ff;
  --accent-blue-light: #c0bfff;
  --accent-blue-dark: #110bff;
  --accent-error: #ffe5e6;
  --accent-secondary-header-background: #1b1b1e;
  --accent-sunsetEmber: #ff6a00;
  /*****      TAB COLORS      *****/
  --tab-bg-default: #f4f4f4;
  --tab-bg-hover: #e6e6e9;
  /*****      COLORS      *****/
  /*****      SPACINGS      *****/
  --spacing-none: 0;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-alt-xs: 6px;
  --spacing-sm: 8px;
  --spacing-alt-sm: 10px;
  --spacing-md: 12px;
  --spacing-alt-md: 14px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 28px;
  --spacing-4xl: 32px;
  --spacing-5xl: 36px;
  --spacing-6xl: 40px;
  --spacing-7xl: 44px;
  --spacing-8xl: 48px;
  --spacing-9xl: 56px;
  --spacing-10xl: 64px;
  --spacing-11xl: 72px;
  --spacing-12xl: 80px;
  /*****      SPACINGS      *****/
  /*****      RADIUSES      *****/
  --radius-xs: 4px;
  --radius-alt-xs: 6px;
  --radius-sm: 8px;
  --radius-alt-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-4xl: 50%;
  /*****      RADIUSES      *****/
  /*****      LINE HEIGHT      *****/
  --line-height-tiny: 14px;
  --line-height-alt-xs: 16px;
  --line-height-xs: 18px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 32px;
  --line-height-2xl: 36px;
  /*****      LINE HEIGHT      *****/
  /*****      FONT SIZE      *****/
  --font-size-tiny: 10px;
  --font-size-xxs: 12px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 26px;
  --font-size-3xl: 32px;
  --font-size-4xl: 36px;
  /*****      FONT SIZE      *****/
  /*****      LAYOUT     *****/
  --primary-header-height: 64px;
  --secondary-header-height: 40px;
  --header-height-with-secondary-header: calc(
      var(--primary-header-height) +
      var(--secondary-header-height)
  );
  --footer-height: 50px;
  --body-top-padding: var(--primary-header-height);
  --body-top-padding-with-secondary-header: var(--header-height-with-secondary-header);
  --body-bottom-padding: var(--footer-height);
  --body-content-height: calc(
      100vh -
      var(--body-top-padding) -
      var(--body-bottom-padding)
  );
  --body-content-height-with-secondary-header: calc(
      100vh -
      var(--body-top-padding-with-secondary-header) -
      var(--body-bottom-padding)
  );
  /*****      LAYOUT END      *****/
}

@font-face {
  font-family: "List Custom";
  src: url(static/fonts/List-Light.ttf) format("truetype");
  font-style: normal;
  font-weight: 300;
}
@font-face {
  font-family: "List Custom";
  src: url(static/fonts/List-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "List Custom";
  src: url(static/fonts/List-Medium.ttf) format("truetype");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "List Custom";
  src: url(static/fonts/List-SemiBold.ttf) format("truetype");
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: "List Custom";
  src: url(static/fonts/List-Bold.ttf) format("truetype");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "List Custom";
  src: url(static/fonts/List-ExtraBold.ttf) format("truetype");
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: "List Custom";
  src: url(static/fonts/List-Black.ttf) format("truetype");
  font-style: normal;
  font-weight: 900;
}
html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: "List Custom", "Open Sans", "lucida grande", tahoma, arial, sans-serif;
  font-size: 12px;
  color: var(--gray-900);
  line-height: 1.5;
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--body-top-padding) var(--spacing-none) var(--body-bottom-padding) var(--spacing-none);
  background-color: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:has(#secondary-header-wrapper) {
  padding-top: var(--header-height-with-secondary-header);
}

td, tr, p, ul, ol, li, input, select, span, button {
  font-family: "List Custom", "Open Sans", "lucida grande", tahoma, arial, sans-serif;
  font-size: 14px;
  margin-left: var(--spacing-none);
}

select {
  min-width: 60px;
}

/* Can be deleted after redesign */
/*select.dummy {*/
/*    color: var(--gray-500);*/
/*}*/
form {
  margin: var(--spacing-none);
}

body.noscroll {
  overflow: hidden;
}

.overflow-hidden {
  overflow: hidden;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
  position: absolute;
  z-index: 1;
}

input[type=checkbox] ~ span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid var(--gray-600);
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.2s ease-out;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

input[type=checkbox] ~ span:hover, input[type=checkbox]:checked ~ span {
  border-color: var(--brand-400);
}

label:has(input[type=checkbox]) {
  cursor: pointer;
  font-weight: 500;
  font-style: normal;
  font-size: var(--font-size-sm);
  line-height: var(--spacing-xl);
  letter-spacing: -0.28px;
}

label:has(input[type=checkbox]:disabled) {
  color: var(--gray-500);
  cursor: default;
}

#post_delivery_section input[type=checkbox]:checked ~ span,
input[type=checkbox]:checked ~ span {
  background-color: var(--brand-400);
  background-image: url(/img/redesign/icons/check.svg);
}

input[type=checkbox]:disabled {
  background-color: transparent;
}

input[type=checkbox]:disabled ~ span, input[type=checkbox]:disabled ~ span:hover {
  border-color: var(--gray-600);
  background-color: var(--gray-300);
}

input[type=checkbox]:disabled ~ label,
input[type=checkbox]:disabled ~ label div {
  color: var(--gray-500);
  cursor: default;
}

input[type=checkbox]:disabled:checked ~ span {
  background-color: var(--gray-600);
  background-image: url(/img/redesign/icons/check-disabled.svg);
}

input[type=text], input[type=tel], input[type=email], input[type=password] {
  height: 40px;
}

a, a:visited {
  color: var(--gray-900);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

a:active {
  color: var(--brand-500);
}

a:hover, .dl td a:hover, .help_idx a:hover, #crumb a:hover span, .filter .cl a:hover, a.blink:hover {
  color: var(--brand-400);
  text-decoration: none;
}

.f10 {
  font-size: 10px;
}

.f12 {
  font-size: 12px;
}

.f14 {
  font-size: 14px;
  line-height: 1.5;
}

.f16 {
  font-size: 16px;
  line-height: 1.5;
}

.p4 {
  padding: var(--spacing-xs);
}

.p20 {
  padding: var(--spacing-xl);
}

.p40 {
  padding: var(--spacing-6xl);
}

li {
  margin-bottom: var(--spacing-sm);
}

ul {
  padding-left: var(--spacing-6xl);
}

.cb {
  clear: both;
}

/*noinspection CssInvalidPseudoSelector*/
input::-webkit-contacts-auto-fill-button {
  position: absolute;
  right: 0;
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

input::placeholder, textarea::placeholder {
  color: var(--gray-600);
  transition-duration: 0.2s;
  transition-property: all;
}

input::-ms-clear {
  display: none;
}

input:focus::placeholder, textarea:focus::placeholder {
  color: var(--gray-500);
}

.InputComponent.felement_err::placeholder,
.InputComponent.felement_err::-webkit-input-placeholder,
.InputComponent.felement_err::-moz-placeholder,
.InputComponent.felement_err:-ms-input-placeholder,
.InputComponent.felement_err::-ms-input-placeholder,
input.email.felement_err::placeholder,
input.email.felement_err::-webkit-input-placeholder,
input.email.felement_err::-moz-placeholder,
input.email.felement_err:-ms-input-placeholder,
input.email.felement_err::-ms-input-placeholder,
textarea.felement_err::placeholder,
textarea.felement_err::-webkit-input-placeholder,
textarea.felement_err::-moz-placeholder,
textarea.felement_err:-ms-input-placeholder,
textarea.felement_err::-ms-input-placeholder,
.TextAreaComponent.felement_err::placeholder,
.TextAreaComponent.felement_err::-webkit-input-placeholder,
.TextAreaComponent.felement_err::-moz-placeholder,
.TextAreaComponent.felement_err:-ms-input-placeholder,
.TextAreaComponent.felement_err::-ms-input-placeholder {
  color: var(--gray-500) !important;
}

input[type=radio] {
  appearance: none;
  background-color: transparent;
  color: var(--error-400);
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gray-500);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s linear, background-color 0.3s linear;
}

input[type=radio]:disabled {
  border-color: var(--gray-400);
}

input[type=radio]:disabled ~ .r1,
input[type=radio]:disabled ~ .r2,
input[type=radio]:disabled ~ label {
  color: var(--gray-500);
}

input[type=radio]:focus-visible {
  outline: none;
}

input[type=radio]:not(:disabled):hover {
  border-color: var(--brand-400);
}

input[type=radio]:not(:disabled):checked {
  border-color: var(--brand-400);
}

input[type=radio]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

input[type=radio]:not(:disabled):checked::before {
  background: var(--brand-400);
}

input[type=radio]:disabled:checked::before {
  background: var(--gray-400);
}

#mainoverlay {
  top: 0;
  position: absolute;
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-color: var(--gray-900); /* Change from  user nickname hover*/
}

body:has(.PostsFilterComponent) #mainoverlay {
  z-index: 108;
}

body:has(.PostsFilterComponent) #ph {
  z-index: 109;
}

#main .bubble, .helpo {
  box-sizing: border-box;
  width: 1140px;
  border-radius: 8px;
  background-color: var(--gray-100);
}

.helpo {
  display: flex;
}

.pmain {
  display: flex;
  box-sizing: border-box;
  width: 1140px;
}

.bubble.nt {
  margin: 30px auto var(--spacing-none);
  max-width: 800px;
}

#main .bubble .bubble_info {
  font-size: 14px;
  padding: var(--spacing-xs) var(--spacing-none) var(--spacing-xl) var(--spacing-alt-sm);
}

#pagecol {
  display: flex;
}

.user-page-ads .dl .gl, .user-page-ads .fav-item-info-container {
  padding-left: unset !important;
  padding-right: unset !important;
}

#menul {
  width: 280px;
  margin-right: var(--spacing-2xl);
  text-align: center;
}

#menul > .btn {
  padding: var(--spacing-xl) var(--spacing-none);
  text-align: center;
}

#contentr {
  position: relative;
  flex: 1;
  border-radius: 12px;
  background-color: var(--gray-100);
}

.content-container {
  flex: 1;
  min-width: 0;
}

#menur {
  width: 300px;
  margin-left: 700px;
  text-align: center;
}

#hcontent {
  overflow: hidden;
  width: 1140px;
  margin: auto;
  padding: var(--spacing-none);
}

#pmenu {
  flex: 1;
  height: 100%;
  margin-left: var(--spacing-6xl);
}

#pcontent {
  position: relative;
  width: 740px;
  padding: var(--spacing-none);
  background-color: var(--gray-100);
}

#main {
  position: relative;
  clear: both;
  width: 1140px;
  max-width: 1200px;
  margin: auto;
  padding: var(--spacing-none);
}

body:has(#secondary-header-wrapper) #ph {
  height: var(--header-height-with-secondary-header);
}

#hmain {
  background-color: var(--gray-100);
}

#ph {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--primary-header-height);
  background-color: var(--gray-100);
  border-bottom: 1px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

#ph.with-border {
  border-bottom: 1px solid var(--gray-400);
}

#ph > .c {
  display: flex;
  align-items: center;
  width: 1140px;
  max-width: 1140px;
  height: 60px;
  margin: auto !important;
  gap: var(--spacing-2xl);
}

#ph > .c:not(:has(#HeaderSearchComponent)) {
  justify-content: space-between;
}

#ph .brg, #ph .inx {
  display: none;
}

#ph #l {
  width: 91px;
  height: 40px;
  padding: var(--spacing-none);
  border: none;
  background: url(/img/redesign/logo.svg) no-repeat;
  /* Christmas logo */
  /*background: url(/img/redesign/icons/christmas/festive_logo.png) no-repeat;*/
  background-size: 91px 40px;
}

#ph #l img {
  width: 120px;
  height: 40px;
}

#ph .bhm {
  display: none;
}

#ph > div > .b {
  font-size: 14px;
  display: flex;
  gap: var(--spacing-alt-md);
  align-items: center;
  font-weight: normal;
}

#ph .b #sa {
  font-size: 10px;
  font-weight: 400;
  color: var(--gray-700);
  line-height: 34px;
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-align: center;
  opacity: 0.9;
  background: url(/img/p.png) no-repeat -62px -58px;
  background-size: 94px 94px;
  transition-duration: 0.3s;
  transition-property: opacity;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

#ph .b #sa:hover {
  text-decoration: none;
  opacity: 1;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}

#ph #ap {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-100);
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl);
  cursor: pointer;
  text-decoration: none;
  border-radius: 20px;
  background-color: var(--brand-400);
  white-space: nowrap;
}

#ph #ap:hover, button:hover, input[type=submit]:hover, input[type=button]:hover, a.bblink:hover {
  background-color: var(--brand-300);
}

#ph #apl {
  display: none;
}

input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-400);
}

/*----------------------------*/
/*-----footer styles start----*/
#pfooter {
  font-size: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  clear: both;
  align-content: center;
  width: 100%;
  height: var(--footer-height);
  color: var(--gray-900);
  background-color: var(--gray-300);
}

#pfooter .c {
  width: 1140px;
  margin: auto;
}

#pfooter .c .r a {
  margin-left: var(--spacing-lg);
}

#pfooter .c .l {
  display: inline-block;
  vertical-align: middle;
}

#pfooter .c .r {
  float: right;
}

@media screen and (max-width: 1050px) {
  #pfooter .c {
    width: 980px;
  }
}
@media screen and (max-width: 1024px) {
  #pfooter .c {
    width: 96%;
  }
}
@media screen and (max-width: 1270px) {
  #pfooter .c {
    width: 1000px;
  }
}
/*-----footer styles end------*/
h1 {
  font-size: 16px;
  font-weight: 700;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
}

h2 {
  font-size: 14px;
  font-weight: 700;
  margin: var(--spacing-xs) var(--spacing-none);
}

/*----------------------------------------*/
/*page breadcrumb and title*/
#crumb {
  display: flex;
  align-items: center;
  height: 16px;
  padding: var(--spacing-lg) var(--spacing-none) var(--spacing-md);
}

#crumb ol {
  color: var(--gray-900);
  flex: 1;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
  display: flex;
  gap: var(--spacing-xs);
  height: 16px;
}

#crumb li, #crumb span {
  display: inline;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--gray-900);
}

#crumb li {
  opacity: 0.5;
}

#crumb li:has(a):hover {
  opacity: 1;
}

#crumb img {
  width: 16px;
  height: 16px;
}

#crumb li div {
  display: inline;
}

#pt {
  display: flex;
  align-items: flex-end;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-6xl);
}

#pt > h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: var(--gray-900);
  flex: 1;
  margin: var(--spacing-none);
}

/*----------------------------------------*/
.vpagetab {
  position: relative;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
  padding: var(--spacing-alt-sm) var(--spacing-none);
  text-align: left;
  border-radius: 8px;
  background-color: var(--gray-100);
}

.vpagetab div, .vpagetab a {
  font-size: 15px;
  color: var(--gray-900);
  line-height: 20px;
  position: relative;
  display: block;
  height: 20px;
  padding: var(--spacing-alt-sm) var(--spacing-xl) var(--spacing-alt-sm) var(--spacing-none);
}

.vpagetab a:hover {
  color: var(--brand-300); /* Change from user favourite page */
  text-decoration: none;
}

.vpagetab div {
  font-weight: bold;
}

.vpagetab div:after {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: -10px;
  bottom: 0;
  width: 0;
  height: 0;
  content: "";
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid var(--gray-100);
}

.vpagetab .fav-row,
.vpagetab div .counter,
.vpagetab a .counter {
  display: flex;
  gap: var(--spacing-sm);
}

.vpagetab a {
  display: flex;
  gap: var(--spacing-sm);
}

/* {*/
/*	display: flex;*/
/*	gap: 12px;*/
/*}*/
/*.vpagetab div span, .vpagetab a span {*/
/*	font-weight: normal;*/
/*	color: var(--gray-600);*/
/*	padding-left: 8px;*/
/*}*/
.vpagetab div span {
  font-weight: bold;
}

.vpagetab div span {
  color: var(--gray-900);
}

.pagetab {
  margin: var(--spacing-lg) var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
}

.pagetab > a {
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  color: var(--gray-900);
  display: inline-block;
  padding: var(--spacing-alt-sm) var(--spacing-md);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.pagetab > a:hover {
  color: var(--brand-400);
  text-decoration: none;
}

.pagetab .cnt {
  font-size: 10px;
  font-weight: bold;
  color: var(--gray-100);
  margin-left: 5px;
  padding: var(--spacing-xxs) 7px;
  text-align: center;
  border-radius: 20px;
  background-color: var(--brand-400);
}

.pagetab > span {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 28px;
  font-weight: 500;
  color: var(--brand-400);
  position: relative;
  display: inline-block;
  padding: var(--spacing-alt-sm) var(--spacing-md);
  border-bottom: 1px solid var(--brand-400);
  border-radius: 6px 6px 0 0;
  background-color: var(--gray-100);
  margin-bottom: -1px;
}

.pagetab > span:after {
  position: absolute;
  right: -2px;
  bottom: -4px;
  left: -2px;
  display: block;
  height: var(--spacing-sm);
  content: "";
  background-color: var(--gray-100);
}

.pagetab > span:first-child:after {
  left: 0;
}

.pagetab .fb {
  color: var(--gray-900);
  background-color: var(--gray-100);
}

.pagetab .pic {
  float: right;
  width: 26px;
  height: 26px;
  margin-top: var(--spacing-alt-xs);
}

.pagetab .pic img {
  border-radius: 2px;
}

.pagetab .l a {
  color: var(--gray-900);
}

.pagetab .l a:hover, .pagetab .l a:active {
  color: var(--brand-300);
  text-decoration: none;
}

.tabbody {
  background-color: var(--gray-100);
  border-top: 1px solid var(--gray-400);
}

.tabbody .chatTitle .r > span.order-label,
.dlmsg > a > div > div > .username .name span.order-label {
  padding: 3px var(--spacing-alt-xs);
  margin-left: var(--spacing-sm);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.02em;
  text-align: left;
  background-color: var(--delivery-400);
  color: var(--gray-100);
}

.tabbody .help {
  width: auto;
  border: none;
}

#tabmenu {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  width: 280px;
  margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-none);
  padding-top: var(--spacing-alt-sm);
}

#tabmenu .item {
  padding: var(--spacing-alt-sm);
}

#tabmenu .sel {
  color: var(--brand-400);
}

#tabcontent {
  flex: 1;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.tabbody a.hdr {
  display: block;
}

.tabbody a.hdr:before {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin: var(--spacing-alt-xs) var(--spacing-xs) var(--spacing-none) var(--spacing-none);
  content: url(/img/redesign/icons/chevron-right.svg);
  transition: border-color 0.2s;
  transform: rotate(180deg);
}

.tabbody a.hdr:hover:before {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}

.tabbody a.hdr.no-before {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.tabbody a.hdr.no-before:hover {
  color: var(--brand-400);
}

.tabbody a.hdr.no-before:hover > img {
  color: var(--brand-400);
}

.tabbody a.hdr.no-before:before {
  display: none;
}

.tabbody a.hdr.no-before > img {
  transform: rotate(180deg);
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-sm);
}

.tabbody a:hover.hdr:before {
  border-color: var(--brand-400);
}

.tabbody > .tsmenu {
  margin: var(--spacing-none) var(--spacing-alt-sm);
}

#pageButtonBar a.hdr {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  margin: var(--spacing-none);
}

#tabcontent a.hdr {
  font-size: 18px;
  font-weight: 700;
  margin: var(--spacing-alt-sm) var(--spacing-alt-xs) var(--spacing-xl);
}

#tabcontent > .tsmenu .c {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl) var(--spacing-none);
  border-bottom: 1px dashed var(--gray-300);
}

#tabcontent > .tsmenu .c:first-child {
  padding-top: var(--spacing-alt-sm);
}

#tabcontent > .tsmenu .c:last-child {
  border: none;
}

#tabcontent > .tsmenu .c .l {
  flex: 1;
  margin-right: var(--spacing-6xl);
}

#tabcontent > .tsmenu .c .l .t {
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xl);
  font-weight: 700;
  letter-spacing: -0.16px;
}

#tabcontent > .tsmenu .c .l .i {
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-900);
  font-weight: 400;
  margin-bottom: var(--spacing-xl);
}

#tabcontent > .tsmenu .c .r > a {
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-100);
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-2xl);
}

/* inline radio tabs */
.irt label {
  margin: var(--spacing-none) var(--spacing-xl) var(--spacing-none) var(--spacing-xxs);
}

/* banned info page */
.bip {
  margin: var(--spacing-xl) var(--spacing-none);
  border-radius: 8px;
  background-color: var(--gray-100);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

#dialog .bip {
  margin: var(--spacing-none);
}

.bip .help {
  width: auto;
  border: none;
}

.bip > .t {
  font-size: 16px;
  font-weight: bold;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: 8px 8px 0 0;
}

.bip > .t.b {
  color: var(--gray-100);
  background-color: var(--error-500);
}

.bip > .t.w {
  color: var(--gray-700);
  background-color: var(--info-400);
}

.bip > .i {
  font-size: 15px;
  color: var(--gray-900);
  padding: var(--spacing-alt-sm) 30px;
}

.bip > .i > div:first-child {
  font-size: 15px;
  font-weight: bold;
  color: var(--gray-700);
}

.bip > .i > div:last-child {
  padding: var(--spacing-alt-sm) var(--spacing-xl) var(--spacing-none);
  box-shadow: none;
}

.bip > .c {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 30px;
  border-top: 1px solid var(--gray-400);
}

.bip > .c > a, .bip > .c > div {
  font-size: 14px;
  display: inline-block;
  margin-right: var(--spacing-md);
  padding: var(--spacing-sm);
}

.bip > .c > div {
  color: var(--gray-700);
}

.plogin {
  min-height: var(--body-content-height);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 420px;
  max-width: 100%;
  margin: var(--spacing-none) auto;
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  justify-content: space-between;
}

body:has(#secondary-header-wrapper) .plogin {
  min-height: var(--body-content-height-with-secondary-header);
}

.plogin .t {
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-md);
  color: var(--gray-900);
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.plogin .t.ts {
  margin-bottom: 0;
  margin-top: var(--spacing-10xl);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
}

.plogin .h {
  color: var(--gray-900);
  font-weight: 700;
  margin-bottom: var(--spacing-2xl);
  margin-top: var(--spacing-2xl);
  text-align: center;
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: -0.4px;
}

.plogin .soclogin {
  margin: var(--spacing-sm) auto;
  max-width: 380px;
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xxs) var(--spacing-none);
  border-radius: var(--radius-md);
}

.plogin .soclogin a {
  transition: all 0.2s;
}

.plogin .soclogin a:hover {
  -webkit-filter: brightness(110%);
}

.plogin .soclogin a img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.plogin .country-phone-number-container .CountryPhoneNumberFormElement.c {
  height: 48px;
}

.plogin .login-form {
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

#_idyour_new_email {
  margin-top: 16px;
}

.plogin .l .box > div {
  border-radius: 8px;
}

.plogin > .l > .email > form > .box #idrphone input {
  border: none;
}

.plogin.reg .l .box > div {
  border: none;
}

.plogin input[type=submit] {
  background-color: var(--brand-400);
}

.plogin .l .box > div {
  position: relative;
}

.plogin .l .box > div > .forgot {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  display: flex;
  align-items: center;
  text-align: right;
  vertical-align: middle;
  height: 50px;
}

.plogin .box2 {
  padding-bottom: var(--spacing-lg);
}

.plogin > .l > .email > form > .box input {
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--spacing-md);
  font-size: var(--font-size-md);
  height: 46px;
  border: 1px solid var(--gray-400);
}

.plogin input[type=submit] {
  width: 100%;
  margin: var(--spacing-none);
  border-radius: var(--radius-sm);
  padding: 13px var(--spacing-none);
}

.plogin input[type=submit].sub {
  color: var(--gray-500);
}

.plogin .error {
  padding: var(--spacing-none) 30px var(--spacing-lg) 30px;
}

.plogin .l .forgot a {
  font-size: 12px;
  color: var(--gray-600);
  transition: all 0.2s;
}

.plogin .l .forgot a:hover {
  color: var(--brand-400);
}

.plogin .r,
.not-account {
  text-align: center;
  margin-bottom: var(--spacing-8xl);
  margin-top: var(--spacing-8xl);
}

.plogin .r .t,
.not-account .t {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  font-weight: 500;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  flex-basis: 100%;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
  justify-content: center;
}

.plogin .r .btn,
.not-account .btn {
  max-width: 380px;
  margin: var(--spacing-none) auto;
}

.plogin .r .btn a,
.not-account .btn a {
  color: var(--brand-400) !important;
  display: block;
  width: 100%;
  margin: auto;
  padding: var(--spacing-alt-md) var(--spacing-none);
  line-height: var(--line-height-alt-xs);
  background-color: var(--brand-100);
  border-radius: var(--radius-sm);
  transition: color 0.2s, background-color 0.2s;
}

.plogin .r .btn a:hover,
.not-account .btn a:hover {
  background-color: var(--brand-200) !important;
}

.plogin .page_info {
  padding: var(--spacing-none);
  box-shadow: none;
}

.plogin select, .plogin select:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.plogin .code {
  font-size: var(--font-size-md);
  margin-top: var(--spacing-xl);
}

.forgotpass .btns,
.plogin .code .i {
  text-align: center;
}

.forgotpass .btns a.recover-link {
  color: var(--brand-400);
}

.frow0 .e .pass-recover {
  padding: var(--spacing-md);
}

.hreflink {
  margin: var(--spacing-2xl) auto var(--spacing-none) auto;
}

.forgotpass .email-info {
  margin: var(--spacing-none);
}

.forgotpass .email-info .recover-div .e input[type=text] {
  max-width: none;
}

.wallet .l > .t, .wallet .r > .t {
  font-size: 20px;
  color: var(--gray-700);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
}

.wallet {
  display: flex;
}

.wallet .l {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding-right: var(--spacing-10xl);
  border-right: 1px solid var(--gray-400);
  width: 300px;
  padding-top: var(--spacing-md);
}

.wallet .l div > .amount {
  margin-top: var(--spacing-xl);
}

.wallet .l .i {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--gray-700) 67e;
}

.wallet .l .t, .wallet .l .number {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--gray-900);
}

.wallet .l .amount {
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  color: var(--brand-400);
}

.wallet .l .number {
  font-size: 15px;
  color: var(--gray-700);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-6xl) var(--spacing-none);
}

.wallet .r {
  padding-left: var(--spacing-6xl);
  display: flex;
  flex-direction: column-reverse;
  padding-top: var(--spacing-md);
}

.wallet .r .c {
  font-size: 15px;
  margin-bottom: var(--spacing-4xl);
}

.wallet .r .c img {
  float: right;
  width: 80px;
}

.wallet .r .pt {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.14px;
  margin-bottom: var(--spacing-lg);
}

.wallet .r ol {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding-left: var(--spacing-lg);
}

.wallet li {
  font-size: 15px;
  color: var(--gray-900);
}

.wallet .r .i {
  background-color: var(--info-100);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--gray-900);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
}

.wallet .r .funds {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.wallet .funds .rgroup {
  display: flex;
  flex-direction: column;
  background-color: var(--gray-300);
  padding-top: var(--spacing-xxs);
  padding-bottom: var(--spacing-xxs);
  border-radius: var(--radius-sm);
}

.wallet .funds .rgroup .feradio-container {
  display: flex;
  align-items: center;
  margin: var(--spacing-xxs) var(--spacing-xs);
  background-color: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  cursor: pointer;
}

.wallet .funds .rgroup .feradio-container input[name=wallet_payment_method] {
  margin-right: var(--spacing-sm);
}

.wallet .funds .rgroup .feradio-container label {
  display: flex;
  padding-left: var(--spacing-none);
  cursor: pointer;
}

.wallet .funds .rgroup .feradio-container img {
  height: 18px;
}

.wallet .feradio-container input[name=wallet_payment_method] + label span {
  display: none;
}

.wallet .r .funds .t, .wallet .l .t {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
}

.wallet .funds .rgroup .feradio-container:has(input[type=radio]:checked) {
  border: 1px solid var(--brand-400);
}

/*cc = stripe*/
/*cca = ameria*/
.wallet .cc, .wallet .cca {
  margin-bottom: var(--spacing-4xl);
}

.wallet .cc .error {
  font-size: 16px;
  color: var(--error-500);
  display: none;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

.wallet .cc form > span, .wallet .cca form > span {
  display: flex;
  align-items: center;
  padding: var(--spacing-none);
  position: relative;
}

.wallet .cc select {
  font-size: 20px;
  width: 110px;
  padding: var(--spacing-alt-xs) var(--spacing-xl) var(--spacing-alt-xs) var(--spacing-sm);
}

.wallet .cc input, .wallet .cca input {
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  width: -webkit-fill-available;
  padding: var(--spacing-md) var(--spacing-md);
}

.wallet .cc .bblink, .wallet .cca .bblink {
  margin-left: var(--spacing-lg);
}

.wallet .cc .crc, .wallet .cca .crc {
  position: absolute;
  right: 135px;
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
}

body:has(#AppLanguageSelectorComponent.ru) .wallet .cc .crc,
body:has(#AppLanguageSelectorComponent.ru) .wallet .cca .crc {
  right: 146px;
}

body:has(#AppLanguageSelectorComponent.en) .wallet .cc .crc,
body:has(#AppLanguageSelectorComponent.en) .wallet .cca .crc {
  right: 104px;
}

.ft_title .text {
  width: 500px;
  padding: var(--spacing-alt-xs) var(--spacing-none);
}

div.flabel {
  font-size: 15px;
  color: var(--gray-900);
  float: left;
  width: 170px;
  padding-top: 5px;
  text-align: right;
}

div.flabel0 {
  font-size: 15px;
  color: var(--gray-900);
  float: none;
  width: auto;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-alt-sm);
  padding-top: var(--spacing-alt-xs);
  text-align: left;
}

div.flabel.p0 {
  padding-top: 1px;
}

div.felement {
  display: block;
  margin-left: 190px;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
}

div.felement select, div.felement input {
  font-size: 15px;
}

div.felement .ph {
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-xs) var(--spacing-none) var(--spacing-none);
}

div.felement div a {
  font-size: 14px;
  color: var(--brand-400);
  margin-left: var(--spacing-md);
}

/* new fRow system replacing old flabel/felement combo */
.frow {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: var(--spacing-md) var(--spacing-none);
}

.post-ad-form .frow {
  align-items: baseline;
  padding: var(--spacing-none);
}

.post-ad-form .frow:not(:last-of-type) {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
}

.post-ad-form .frow:has(.DropdownComponent .clr) .l.asterisk p {
  bottom: 6px;
}

/* hidden form row for initial attribute render in some cases with chain listboxes */
.frow.fh {
  display: none;
}

.frow.top, .frow.top0 {
  align-items: flex-start;
}

.post-ad-form .frow.top, .post-ad-form .frow.top0 {
  align-items: baseline;
}

.frow.top0:has(.service-area-container) {
  align-items: center;
}

.frow.top > .l {
  margin-top: 5px;
}

.frow > .l {
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-900);
  width: 300px;
}

.post-ad-form .fsec,
.post-ad-form .fsec.new {
  padding: var(--spacing-none);
  margin-bottom: var(--spacing-12xl);
}

.post-ad-form .fsec > .t,
.post-edit-form .fsec > .t {
  font-size: var(--font-size-xl);
  line-height: var(--spacing-4xl);
  font-weight: 700;
  color: var(--gray-900);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
  letter-spacing: -0.4px;
}

.frow > .l.with-hint,
.frow.with-hint > .l {
  display: flex;
  align-items: center;
}

/* for rows without labels where we want left indent to be smaller */
.frow.s > .l {
  width: 90px;
}

.frow .e {
  font-size: 15px;
  flex: 1;
  margin-left: var(--spacing-xl);
}

.frow.ban-duration-row-blurred .e {
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
}

.frow .e > #CarPartsCompatSelectorFormElement {
  width: 100%;
}

.frow .e .input-with-unit,
.felement0 .input-with-unit {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.felement0 .input-with-unit input {
  flex: 1;
  width: auto !important;
}

.felement0 .input-with-unit {
  font-size: var(--font-size-md);
}

.post-ad-form .frow .e,
.post-edit-form .frow .e {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.post-ad-form .frow.top .e,
.post-edit-form .frow.top .e {
  display: block;
}

.post-ad-form .frow.top .e .i,
.post-edit-form .frow.top .e .i {
  font-size: var(--font-size-xxs);
}

.post-ad-form .frow .e .price-fields-container,
.post-edit-form .frow .e .price-fields-container,
.post-ad-form .frow .e .input-with-unit,
.post-edit-form .frow .e .input-with-unit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: var(--spacing-sm);
}

.post-ad-form .frow .e:has(.err),
.post-edit-form .frow .e:has(.err) {
  align-items: start;
  flex-direction: column;
}

/* Style for all links inside error messages */
.err a {
  color: var(--brand-400);
  text-decoration: none;
}

.e .err {
  font-size: 13px;
  display: inline-block;
  color: var(--error-500) !important;
  margin-top: var(--spacing-md);
  width: 100%;
}

.e .err a {
  color: var(--brand-400);
  text-decoration: none;
}

.code .e .err {
  text-align: left;
}

.srate + .err {
  text-align: center !important;
  margin-bottom: 12px;
}

.ComboSelectorComponent + .err {
  margin-bottom: var(--spacing-md);
  margin-top: 4px;
}

.UserBankAccountAddEditComponent .err {
  margin: 0px !important;
  color: var(--error-500) !important;
}

.UserBankAccountAddEditComponent .form-group .err {
  font-size: 13px;
  color: var(--error-500) !important;
  margin-top: var(--spacing-sm);
}

.post-ad-form .frow .e .err,
.post-edit-form .frow .e .err {
  margin: var(--spacing-none);
}

.post-ad-form .frow.auto-part .e,
.post-edit-form .frow.auto-part .e {
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: start;
}

.company-verification-container.frow .e > div,
.user-verification-container.frow .e > div {
  width: fit-content;
}

.code .e .err {
  text-align: left;
  width: 380px;
  /*margin-left: 30px;*/
}

.user-verification-container .l svg {
  width: auto;
  height: 16px;
}

.user-verification-container.imid .l svg {
  height: 11px;
}

.user-verification-container .imid-with-hint {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--spacing-sm);
}

.user-verification-container .user-verified-badge {
  display: flex;
  gap: var(--spacing-xs);
}

.user-verification-container.imid .verification-hint {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--gray-300);
  border-left: 1px solid var(--accent-malachite);
  font-size: var(--font-size-xxs);
  color: var(--gray-700);
  border-radius: var(--radius-xs);
  justify-self: start;
  font-weight: 500;
}

.user-verification-container .l {
  display: flex;
  align-items: center;
}

.frow.user-verification-container.imid {
  align-items: start;
}

.frow.attrp .e > input[type=text], .frow.attrp .e #idpfreqc {
  min-width: 220px;
}

/* inline error display */
.frow .e .err, .frow2 .e .err, .felement0 .err {
  font-size: 13px;
  display: inline-block;
  color: var(--error-500);
}

.frow .e .err a, .frow2 .e .err a, .felement0 .err a {
  color: var(--brand-400);
  text-decoration: none;
}

.login-form .err {
  font-size: var(--font-size-xs);
  display: inline-block;
  margin-top: var(--spacing-md);
  color: var(--error-500);
}

.login-form .err a {
  color: var(--brand-400);
  text-decoration: none;
}

.login-form .frow2 .e .err {
  margin-top: var(--spacing-md);
}

.felement0 .err {
  display: block;
  margin-top: var(--spacing-md);
}

.felement0 .err a {
  color: var(--brand-400);
  text-decoration: none;
}

.frow .i {
  font-size: 14px;
  color: var(--gray-700);
  max-width: 600px;
  margin: var(--spacing-xs) 1px;
}

/* no left elements row and no offset to the right */
.frow0 {
  padding: 5px var(--spacing-none);
}

/* no left elements row and slight offset to the right */
.frow1 {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none);
}

/** used to overlay forgot password field */
.frow0 .e {
  position: relative;
}

/* stacked label above element below */
.frow2 {
  display: flex;
  flex-direction: column;
  padding: 5px var(--spacing-none);
}

#upload-pic-info .ph p, .fsec.new .description > * {
  color: var(--gray-700);
}

.frow2 > .l {
  font-size: 15px;
  color: var(--gray-700);
  width: 100%;
  text-align: left;
}

.post-ad-form .frow2 {
  padding: var(--spacing-none);
}

.post-ad-form .frow2 > .l {
  margin: var(--spacing-none);
}

.frow2 .e {
  font-size: 15px;
  flex: 1;
  width: 100%;
}

.fsec.new .frow2 .e {
  margin: var(--spacing-none);
}

.frow .addr {
  display: flex;
  align-items: center;
  max-width: 640px;
  width: 100%;
}

.frow .addr > a > img {
  width: 28px;
  height: 28px;
  margin-left: var(--spacing-alt-sm);
  transition: all 0.2s;
}

.frow .addr > a:hover > img {
  transform: scale(1.12);
}

.frow .addr_approx .cbox > div:first-child > span {
  width: 14px;
  height: 14px;
}

.frow .e.addr {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--spacing-md);
}

/* simply address element */
.frow .e > .approx {
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-xxs);
}

/* complex address element */
.frow .e.addr .approx, .frow .e.addr .i {
  flex: 1;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-md);
}

.frow .e.addr .approx {
  margin: var(--spacing-none);
}

.frow .approx .cbox div {
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

.fspacer {
  height: 20px;
}

/* hide auto part number checkbox container */
.frow .e > .approx.hide-auto-part-number:has(input[type=checkbox].disabled) {
  pointer-events: none;
}

.frow .e input[readonly] {
  pointer-events: none;
}

/* document upload element block */
.fdoc {
  background-color: var(--gray-200);
  border-radius: 12px;
  flex-direction: column;
  max-width: 600px;
  margin: var(--spacing-xl) auto var(--spacing-none) 110px;
  padding: var(--spacing-lg) var(--spacing-xl);
}

.fdoc .t {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
  text-align: left;
  width: auto;
  font-weight: bold;
  font-size: 16px;
}

.fdoc .i {
  font-size: 14px;
  color: var(--gray-700);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

/* show price/discount next to number of ads when buying bundles */
#idpad, #idprenew, #idrepublish {
  color: var(--gray-600);
  display: inline-block;
  margin-left: var(--spacing-alt-sm);
  margin-bottom: var(--spacing-2xl);
}

/*action row used in business settings*/
.bdash {
  display: flex;
}

.bdash > .l {
  display: flex;
  flex-direction: column;
  width: 360px;
  padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-none) var(--spacing-none);
  border-right: 1px solid var(--gray-400);
}

.bdash > .l > .t {
  font-size: 16px;
  font-weight: bold;
  color: var(--gray-900);
}

.bdash > .l > .s {
  margin: var(--spacing-xxs) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.bdash > .l > .s > div {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.bdash > .l > .s > div > div:nth-child(2) {
  font-size: 15px;
  margin-left: var(--spacing-xl);
  padding: var(--spacing-xxs) var(--spacing-none);
}

.bdash > .l > .s > div > a, .bdash > .l > .s > div > div:last-child {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin-left: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-radius: 50%;
  transition: all 0.2s;
}

.bdash > .l > .s > div > a img {
  width: 20px;
  height: 20px;
}

.bdash > .l > .s > div > div:first-child {
  font-size: 15px;
  color: var(--gray-900);
  flex: 1;
  padding: var(--spacing-xxs) var(--spacing-none);
}

.bdash > .l > div.pblock {
  display: block;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-none);
  border-top: 1px solid var(--gray-300);
}

.bdash .pblock a.home {
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  border-radius: 8px;
  background-color: var(--gray-300);
}

/*///////////////////*/
.bdash > .l > div.pblock img {
  width: 38px;
  height: 38px;
  margin-bottom: var(--spacing-xxs);
}

.bdash > .l > div.pblock > a {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.2s;
}

.bdash > .l > div.pblock > .g {
  font-weight: normal;
  color: var(--gray-900);
  margin: var(--spacing-none);
  opacity: 0.5;
}

.bdash > .l > div.pblock > .g span {
  font-size: 12px;
  font-weight: 500;
}

.bdash > .l > div.pblock > .g .hmpgtitle {
  display: block;
}

.bdash > .l > div.pblock .nohp div.t {
  font-size: 16px;
  color: var(--gray-900);
  margin: var(--spacing-sm) var(--spacing-none);
}

.bdash > .l > div.pblock .nohp div.i {
  font-size: 14px;
  color: var(--gray-900);
}

.bdash > .l > div.pblock .nohp .blink {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-top: var(--spacing-md);
  padding: var(--spacing-none);
}

.bdash > .r {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-2xl);
}

.bdash > .r > div {
  margin-bottom: 30px;
}

.bizform {
  margin: var(--spacing-alt-sm) 30px;
}

.bizform .frow .l {
  width: 200px;
}

.bizpay {
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none) var(--spacing-lg);
}

.arow {
  display: flex;
  padding: var(--spacing-xl) var(--spacing-none);
  border-bottom: 1px solid var(--gray-400);
}

.arow:last-child {
  border: none;
}

.arow > div:first-child {
  margin-right: var(--spacing-lg);
}

.arow > div:first-child > div:first-child {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gray-900);
}

.arow > div:first-child > div:last-child {
  font-size: 14px;
  line-height: 24px;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
}

.arow > div:last-child {
  flex: 1;
  text-align: right;
}

.arow.company-verification > div:last-child {
  display: flex;
  justify-content: flex-end;
}

.arow > div:last-child > a {
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-400);
  transition: all 0.2s;
}

.arow > div:last-child > a:hover {
  color: var(--brand-300);
  -webkit-filter: brightness(120%);
}

/* ----- */
.felement_err {
  border: 1px solid var(--error-400) !important;
}

.felement_err:focus {
  border-color: var(--error-400) !important;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.08), 0 0 2px 2px #fcc !important;
}

.inforadio.felement_err, .rgroup.felement_err {
  border: none !important;
}

.inforadio + .err, .rgroup.felement_err .err {
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-none) var(--spacing-xl) !important;
  font-size: 14px !important;
  color: var(--error-400);
}

.inforadio + .err a, .rgroup.felement_err .err a {
  color: var(--brand-400);
  text-decoration: none;
}

.inforadio.felement_err label, .rgroup.felement_err label {
  color: inherit;
}

div.felement0 {
  display: block;
  margin: var(--spacing-none);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
}

div.felement0 input[type=text], div.felement0 select,
div.frow0 input[type=text], div.frow0 input[type=password], div.frow0 select,
textarea {
  padding: var(--spacing-sm);
}

.textareaWrapper {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
}

/*TODO: LIS-3558 reset existing styles when usage*/
.textareaWrapper textarea {
  padding-bottom: var(--spacing-2xl);
}

.textareaWrapper .counterVal {
  position: absolute;
  bottom: 8px;
  right: 2px;
  font-size: 12px;
  padding: var(--spacing-none) var(--spacing-sm) var(--spacing-xs) var(--spacing-none);
  color: var(--gray-500);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 3px 0 3px 0;
}

/* Error messages next to textareaWrapper */
.textareaWrapper + .err,
.e > .err,
div > .err {
  font-size: 13px;
  display: block;
  color: var(--error-500) !important;
  margin-top: var(--spacing-md);
}

div.felement0 input[type=tel] {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-2xl);
  background-position: 4px 8px;
}

div.felement input, div.felement textarea, div.felement0 input, div.felement0 textarea,
div.frow input:not(.InputComponent), div.frow textarea, div.frow0 input, div.frow0 textarea {
  line-height: 1.5;
  box-sizing: border-box;
}

.mapview {
  display: none;
  overflow: hidden;
  height: 180px;
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  border-radius: 8px;
}

.mapview img {
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.felement .fe_addr {
  width: 65%;
}

input[type=text], input[type=tel], input[type=email], input[type=password], textarea {
  -webkit-appearance: none;
}

textarea {
  resize: none;
}

.rgroup label {
  font-size: 15px;
  flex: 1;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-xs);
}

.rgroup {
  display: flex;
}

.rgroup span {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-xl);
}

.rgroup.br {
  flex-direction: column;
}

.rgroup.br span {
  margin-bottom: var(--spacing-alt-sm);
}

/* form info text*/
.forminfo,
.pcontact .infbl p {
  font-size: 15px;
  color: var(--gray-900);
  margin: var(--spacing-sm) var(--spacing-none);
}

/* form section */
.fsec:first-child {
  border-top: none;
}

.fsec {
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-none);
}

.fsec.new {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-none);
}

#tabcontent .fsec {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.fsec > .t {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-md) var(--spacing-none);
  display: flex;
  align-items: center;
}

.fsec > .st {
  font-size: 16px;
  font-weight: 700;
}

.fsec > .d {
  font-size: 14px;
  color: var(--gray-600);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
  margin-top: -8px;
  max-width: 800px;
}

.fsec.new > .d {
  margin-top: var(--spacing-none);
  margin-bottom: var(--spacing-lg);
}

.fsec.new > .d,
.frow.new .docupload > .i {
  max-width: unset;
  padding-bottom: var(--spacing-none);
}

.fsec.new .description {
  margin-bottom: var(--spacing-sm);
}

div.fsec .felement:last-child {
  padding-bottom: var(--spacing-none);
}

.fsec .blink {
  font-size: 14px;
}

.fnotif > div {
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: var(--spacing-alt-md) var(--spacing-none);
  border-bottom: 1px dashed var(--gray-400);
}

.fnotif > div:last-child {
  border: none;
}

.fnotif > div > .t {
  flex: 1;
  color: var(--gray-900);
}

.fnotif > div > .i {
  font-size: 14px;
  width: 90px;
  text-align: center;
}

.fnotif > div > .i label.cbox > div:first-child {
  width: auto;
  margin: auto;
}

.fnotif > div > .i label.cbox > div:last-child {
  display: none;
}

.fbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px var(--spacing-xl);
  text-align: center;
  border-top: 1px dashed var(--gray-400);
}

.fbtn input {
  margin: var(--spacing-none) var(--spacing-sm);
}

.finfo {
  font-size: 10px;
  font-weight: 400;
  color: var(--gray-900);
  padding: var(--spacing-xxs) var(--spacing-none);
}

.formlabelerror {
  font-size: 12px;
  color: red;
}

.postdlg {
  font-size: 15px;
  background-color: var(--gray-100);
}

.postdlg div.l:empty {
  display: none;
}

.postdlg div.l:empty + div.e {
  margin-left: var(--spacing-none);
}

.postdlg h1 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
}

/* info about limits */
.postdlg > .l {
  font-size: 15px;
  padding: var(--spacing-xl) 30px;
}

.postdlg > .c, .postdlg > form > .c {
  margin: auto;
}

.postdlg .btns {
  padding: 30px var(--spacing-xl);
  border-top: 1px solid var(--gray-300);
}

.postdlg.msg {
  max-width: 600px;
  margin: var(--spacing-6xl) auto var(--spacing-none) auto;
}

.postdlg.msg:has(.free-ad-soft-limit-section-container) {
  margin: var(--spacing-none);
}

.free-ad-soft-limit-section-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.free-ad-soft-limit-section-container .paid-ad-title {
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.52px;
}

.free-ad-soft-limit-section-container > .free-ad-soft-limit-info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.free-ad-soft-limit-section-container > .free-ad-soft-limit-info-section > .soft-limit-info,
.free-ad-soft-limit-section-container > .free-ad-soft-limit-info-section > .learn-more-link {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.34px;
  color: var(--gray-700);
}

.free-ad-soft-limit-section-container > .free-ad-soft-limit-info-section > .learn-more-link {
  color: var(--brand-400);
  width: fit-content;
}

.free-ad-soft-limit-section-container > .free-ad-soft-limit-info-section > .learn-more-link:hover {
  color: var(--brand-300);
}

.free-ad-soft-limit-section-container > .InlineTabComponent > div:nth-child(2) {
  padding-top: var(--spacing-lg);
}

.free-ad-soft-limit-section-container .bundle-section,
.free-ad-soft-limit-section-container .wallet-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.free-ad-soft-limit-section-container .bundle-section .info-section,
.free-ad-soft-limit-section-container .wallet-section .info-section {
  padding: var(--spacing-xl);
  border: 1px solid var(--gray-400);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.free-ad-soft-limit-section-container .bundle-section .info-section > .info-item,
.free-ad-soft-limit-section-container .wallet-section .info-section > .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.free-ad-soft-limit-section-container .bundle-section .info-section > .info-item > .item-title,
.free-ad-soft-limit-section-container .wallet-section .info-section > .info-item > .item-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}

.free-ad-soft-limit-section-container .bundle-section .info-section > .info-item > .item-value,
.free-ad-soft-limit-section-container .wallet-section .info-section > .info-item > .item-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.15px;
  display: flex;
  align-items: center;
}

.free-ad-soft-limit-section-container .bundle-section .info-section > .info-item > .item-value.bundle span.bundle-num-ads-empty {
  color: var(--error-400);
}

.free-ad-soft-limit-section-container .bundle-section .info-section > .info-item > .item-value.bundle span.bundle-total-num-ads-empty {
  color: var(--gray-600);
}

.free-ad-soft-limit-section-container .wallet-section .info-section > .wallet-balance-low-wrapper {
  color: var(--error-400);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.free-ad-soft-limit-section-container .AddFundsComponent .buttons .add-funds-button {
  flex: unset !important;
  width: fit-content;
}

.free-ad-soft-limit-section-container .bundle-section .info-section > .purchase-bundle-wrapper {
  border-top: 1px solid var(--gray-400);
  padding-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.free-ad-soft-limit-section-container .bundle-section .info-section > .purchase-bundle-wrapper .purchase-bundle-link {
  color: var(--brand-400);
}

.free-ad-soft-limit-section-container .bundle-section .buttons,
.free-ad-soft-limit-section-container .wallet-section .buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.free-ad-soft-limit-section-container .bundle-section .buttons > .btn-cancel,
.free-ad-soft-limit-section-container .wallet-section .buttons > .btn-cancel {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

.free-ad-soft-limit-section-container .bundle-section .buttons > .btn-cancel,
.free-ad-soft-limit-section-container .wallet-section .buttons > .btn-cancel,
.free-ad-soft-limit-section-container .bundle-section .buttons > .btn-next,
.free-ad-soft-limit-section-container .wallet-section .buttons > .btn-next {
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--spacing-md);
  font-size: 15px;
  font-weight: 500;
  line-height: var(--spacing-xl);
  letter-spacing: -0.3px;
}

.free-ad-soft-limit-section-container .bundle-section .buttons > .btn-cancel:hover,
.free-ad-soft-limit-section-container .wallet-section .buttons > .btn-cancel:hover {
  background-color: var(--gray-400);
  color: var(--gray-900);
}

.free-ad-soft-limit-section-container .bundle-section .buttons > .btn-next,
.free-ad-soft-limit-section-container .wallet-section .buttons > .btn-next {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.free-ad-soft-limit-section-container .bundle-section .buttons > .btn-next:hover,
.free-ad-soft-limit-section-container .wallet-section .buttons > .btn-next:hover {
  background-color: var(--brand-300);
  cursor: pointer;
}

.free-ad-soft-limit-section-container .bundle-section .buttons > .btn-next.disabled,
.free-ad-soft-limit-section-container .wallet-section .buttons > .btn-next.disabled {
  pointer-events: none;
  background: var(--gray-400);
  color: var(--gray-900);
}

.postdlg.msg:has(div.typesel) {
  max-width: unset;
  margin: var(--spacing-6xl) auto var(--spacing-none) auto;
}

.postdlg.msg .pay {
  margin: var(--spacing-xl) var(--spacing-none);
}

.postdlg.msg .fbtn {
  padding: var(--spacing-alt-sm) var(--spacing-none);
  border: none;
  justify-content: start;
}

.postdlg.msg .fbtn a {
  min-width: 120px;
  margin: var(--spacing-sm);
}

.postdlg.msg .fbtn a.btncancel,
.postdlg.msg .fbtn a.btn-next {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

@media screen and (max-device-width: 980px), screen and (max-device-width: 1024px) and (orientation: portrait) {
  .postdlg.msg .fbtn a.btncancel,
  .postdlg.msg .fbtn a.btn-next {
    width: 100%;
    max-width: none;
  }
}
.postdlg.msg .blink {
  padding: var(--spacing-none);
}

.postdlg .info {
  box-shadow: none;
}

.postdlg .e > textarea.bodysec {
  height: 170px;
}

/* select ad type */
.postdlg .typesel {
  padding: var(--spacing-xl) var(--spacing-none);
}

.postdlg .typesel .c {
  margin: 30px var(--spacing-none) 30px var(--spacing-none);
  display: flex;
  flex-wrap: wrap;
}

.postdlg .typesel .c .row {
  display: flex;
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-alt-xs) 3px;
  align-items: flex-start;
}

.postdlg .typesel .c .row.one-column {
  flex: 0 0 95%;
}

.postdlg .typesel .c .row.two-column {
  flex: 0 0 43%;
}

.postdlg .typesel .c .row.three-column {
  flex: 0 0 32%;
}

.postdlg .typesel .c .row input {
  margin-top: var(--spacing-sm);
  cursor: pointer;
}

.postdlg .typesel .c .row input[type=radio] {
  margin: var(--spacing-xs) 0 0 0;
}

.postdlg .typesel .c .row .r {
  cursor: pointer;
  margin-left: var(--spacing-alt-sm);
  flex: 1;
}

.postdlg .typesel .c .row .r .t {
  font-size: 18px;
  color: var(--gray-900);
}

.postdlg > form > .fbtn > input {
  padding: var(--spacing-none);
}

.fbtn .paf_primary_btns + input[type=button] {
  background-color: transparent !important;
  line-height: 24px;
}

.preview_box {
  display: flex;
}

.preview_box .promotion-combo-preview {
  width: 100%;
}

.preview_box #star {
  display: none;
}

.preview_box #uinfo {
  border: none;
  border-radius: 6px;
}

.preview_box > .l {
  width: 740px;
  padding: var(--spacing-none) var(--spacing-2xl) var(--spacing-xl) var(--spacing-none);
}

.preview_box > .r {
  flex: 1;
  height: 100%;
  margin: var(--spacing-alt-sm) var(--spacing-none);
}

.preview_box .PostPhotoViewComponent {
  border-radius: 8px 0 0 0;
}

.pay {
  font-size: 16px;
}

.pay .ic {
  display: flex;
  margin-bottom: var(--spacing-alt-sm);
}

.pay .ic ul {
  padding-left: var(--spacing-xl);
}

.pay .ic div:first-child {
  margin-right: var(--spacing-xl);
  padding-top: var(--spacing-xs);
}

.pay .ic div:first-child img {
  width: 54px;
  height: 54px;
}

.pay > div > .pi {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.pay .pi {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.pay .pi > div {
  font-size: 15px;
  display: flex;
  align-items: center;
  margin: var(--spacing-none);
  padding: var(--spacing-md) var(--spacing-none);
  text-align: left;
  border-bottom: 1px dotted var(--gray-400);
}

.pay .pi > div > div:nth-child(1) {
  flex: 1;
  margin-right: var(--spacing-sm);
  padding-left: var(--spacing-sm);
}

.pay .pi > div > div:nth-child(2) {
  font-size: 15px !important;
  font-weight: 700;
  padding-right: var(--spacing-lg);
  text-align: right;
}

.pay .pi > div > div:nth-child(2) a {
  font-size: 14px;
  font-weight: normal;
  color: var(--brand-400);
  display: block;
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-xxs) var(--spacing-none);
}

.pay .pi select {
  font-size: 14px;
  font-weight: bold;
  color: var(--gray-900);
  padding: var(--spacing-none) 25px var(--spacing-none) var(--spacing-xxs);
  cursor: pointer;
  text-align: right;
  text-align-last: right;
  vertical-align: baseline;
  border: none;
}

.pay .pi select:focus {
  outline: none;
  box-shadow: none;
}

.pay li {
  font-size: 15px;
  color: var(--gray-700);
  margin: var(--spacing-xs) var(--spacing-none);
}

.pay .ot {
  font-size: 15px;
  margin: var(--spacing-alt-sm) var(--spacing-none);
  padding: var(--spacing-alt-sm) var(--spacing-alt-sm) var(--spacing-alt-xs) var(--spacing-none);
  border-bottom: 1px solid var(--gray-300);
}

.pay .smsc {
  font-weight: 700;
  color: var(--gray-600);
  margin: var(--spacing-md) var(--spacing-xl) var(--spacing-xs);
}

.pay .smsi {
  font-size: 14px;
  margin: var(--spacing-none) var(--spacing-alt-sm);
  padding: var(--spacing-sm) var(--spacing-alt-sm);
  background-color: var(--info-100);
}

.pay .i small, .wallet .r .i small {
  display: block;
  color: var(--gray-900);
  margin-top: var(--spacing-sm);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.pay .it > div:nth-child(2) > div {
  margin: var(--spacing-none) var(--spacing-xl);
}

.pay .btn {
  padding: var(--spacing-alt-sm) var(--spacing-none);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pay .btn > input[type=submit], .pay .btn a.bblink, .pay .btn input[type=button] {
  min-width: 300px;
  width: 100%;
  box-sizing: border-box;
  flex: 1;
}

.wallet .cc .bblink, .wallet .cca .bblink {
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  padding: var(--spacing-alt-md) var(--spacing-2xl);
}

/* message to login */
.pay > .x {
  margin-top: var(--spacing-alt-sm);
  padding: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-alt-sm);
  text-align: center;
}

.pay > .x > div:first-child {
  font-size: 15px;
  color: var(--gray-700);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

/*label selection*/
.pay > .lbl {
  padding: var(--spacing-xxs) var(--spacing-none) var(--spacing-md) var(--spacing-none);
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: var(--spacing-sm);
}

.pay > .lbl > .i > label {
  transition: all 0.2s;
  opacity: 0.4;
}

.pay > .lbl > .i > input, .pay .lbl::-webkit-scrollbar {
  display: none;
}

.pay > .lbl > .i > input[type=radio]:checked + label, .pay > .lbl.ini > .i > label {
  opacity: 1;
}

.pay > .lbl > .i > input:hover, .pay > .lbl > .i > label:hover {
  cursor: pointer;
}

.pay > .lbl > .i > label > .PostLabelComponent {
  font-size: 13px;
}

.pay > .lbl > .i > label > .lbl > img {
  width: 20px;
  height: 20px;
}

.ga_cl {
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-lg) var(--spacing-alt-sm);
}

.ha {
  float: left;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm) -30px;
}

.hl {
  background-color: var(--info-200);
}

.notfound {
  font-size: 16px;
  color: var(--gray-600) !important;
  padding: var(--spacing-xl) var(--spacing-none) !important;
  display: block !important;
}

.notfound ul {
  margin: var(--spacing-none);
}

.dlgt {
  font-size: 11px;
  font-weight: 700;
  padding: var(--spacing-alt-xs);
}

/* info / prompt text at start of a dialog */
.dlgi {
  font-size: 14px;
  color: var(--gray-600);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
  text-align: left;
}

.dlg {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-alt-xs);
  border: 1px solid var(--gray-400);
  border-radius: 4px;
}

.dlg .c {
  padding: var(--spacing-none) var(--spacing-alt-sm);
}

.dlg_confirm {
  font-size: 16px;
  color: var(--gray-900);
  padding: 30px var(--spacing-alt-sm);
  text-align: center;
}

.dlg_confirm img {
  display: block;
  width: 72px;
  height: 72px;
  margin: var(--spacing-none) auto var(--spacing-xl);
}

button, input[type=submit], input[type=button] {
  font-size: 15px;
  color: var(--gray-100);
  padding: var(--spacing-alt-sm) 26px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  outline: none;
  background-color: var(--brand-400);
  transition: color 0.2s, background-color 0.2s;
  -webkit-appearance: none;
}

a.blink {
  color: var(--brand-400);
  overflow: visible;
  margin: var(--spacing-alt-sm) auto var(--spacing-none);
  padding: var(--spacing-alt-xs) var(--spacing-xl);
  transition: all 0.2s;
}

a.bblink {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gray-100) !important;
  display: inline-block;
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 8px;
  background-color: var(--brand-400);
  transition: background-color 0.2s;
}

a.bblink.disabled {
  cursor: wait;
  background-color: var(--gray-500);
}

a.fb_btn {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-100);
  display: block;
  width: 140px;
  height: 37px;
  margin: var(--spacing-none) auto;
  padding: 9px 15px 1px 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  background-color: var(--gray-600);
  transition: background-color 0.2s;
}

a.fb_btn:hover {
  background-color: var(--brand-500);
}

.felement input[type=button] {
  margin: var(--spacing-none) var(--spacing-md) var(--spacing-none) var(--spacing-none);
}

.ui-dialog-content .btns {
  clear: both;
  margin: var(--spacing-xs);
  padding: var(--spacing-xl) var(--spacing-alt-sm) var(--spacing-alt-md) var(--spacing-alt-sm);
  text-align: center;
}

.cnt {
  font-size: 9px;
  font-weight: 400;
  color: var(--gray-600);
  white-space: nowrap;
}

.glheader {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
  color: var(--gray-900);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-lg);
  white-space: nowrap;
}

tr.action {
  transition: all 0.2s;
}

tr.action:hover {
  cursor: pointer;
  background-color: var(--gray-200);
}

tr.action:hover a {
  color: var(--brand-400);
}

tr.action:hover img {
  -webkit-filter: brightness(110%);
}

.dl .gl {
  display: flex;
  flex-wrap: wrap;
  padding: var(--spacing-none) var(--spacing-sm);
  column-gap: 8px;
  row-gap: var(--spacing-md);
}

.dl .gl a {
  font-size: 12px;
  position: relative;
  display: inline-block;
  width: calc((100% - 16px) / 3);
  height: auto;
  margin: var(--spacing-none);
  vertical-align: top;
  transition: color 0.2s;
  -webkit-transition: -webkit-filter 200ms linear;
  border-radius: 12px;
  padding: var(--spacing-none);
}

div.dl > div.gl > a {
  border: none;
  padding: var(--spacing-none);
}

/* already viewed label - gallery */
.dl .gl > a > .rv,
.featured > .c > .s > .c a > .rv,
.featured > .c .h2 a > .rv,
.vr .np,
.grid a > .rv {
  position: absolute;
  top: 11px;
  left: 11px;
  font-size: 12px;
  color: var(--gray-100);
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  background-position: 4px center;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  margin: var(--spacing-none);
}

.dl .gl > a:not(.h) > .rv,
.featured > .c > .s > .c a > .rv {
  top: 4px;
  left: 4px;
}

.dl a > div .rv.np {
  top: 14px;
  right: 28px;
  left: initial;
  bottom: initial;
}

.grid a > .rv {
  background-size: 14px 14px;
  font-size: 10px;
  left: 3px;
  top: 3px;
}

/* already viewed label - list */
.dl > a > div > .rv,
.featured > .c > .h > .rv,
.featured > .c > .h a > div > .rv,
.dlrel > div > a > div > .rv {
  display: inline-block;
  position: absolute;
  top: 13px;
  left: 17px;
  font-size: 12px;
  color: var(--gray-100);
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  margin: var(--spacing-none);
}

.featured > .c > .h > .rv,
.featured > .c > .h a > div > .rv {
  margin-top: var(--spacing-md);
}

.dl .gl a > .l {
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--gray-900);
  display: -webkit-box;
  overflow: hidden;
  max-height: 64px;
  text-align: left;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.recoverpage-info a {
  background-color: var(--brand-400);
  max-width: unset;
}

.dl .gl a:hover > .l, .dlrel > div > a:hover > div > div:first-child, .featured .c .s a:hover div, .story .coll .s a:hover div {
  color: var(--brand-400);
}

.dl .gl a .l3 {
  display: -webkit-box;
  max-height: 65px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.dl .gl a > .p {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 3px;
}

.dl .gl a > .p .tlabel {
  font-size: 11px;
  float: none;
}

.dl .gl a > img {
  width: 100%;
  height: 196px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-md) var(--spacing-none);
  border-radius: 12px;
  object-fit: cover;
}

.dl .gl a.h > img {
  height: 188px;
}

.dl .gl a > .at,
.featured .c .s a > div > .at,
div.dl > a > div .at {
  font-size: 15px;
  color: var(--gray-600) !important;
  margin-top: var(--spacing-sm);
}

.dl .gl a > .at {
  margin-bottom: var(--spacing-sm);
}

div.dl > a > div .at {
  color: var(--gray-900) !important;
  margin-bottom: var(--spacing-sm);
}

div.dl > div > a > div > .at {
  font-size: 14px;
  color: var(--gray-700);
  margin: var(--spacing-alt-xs) var(--spacing-none);
}

.dlbar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--spacing-md);
}

.dlbar:has(.dlbar-action-container) {
  height: unset;
  padding-bottom: 0;
  margin-bottom: var(--spacing-3xl);
}

.dlbar.with-map {
  height: 228px;
  width: 100%;
  position: relative;
  top: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: end;
  margin-top: var(--spacing-none);
  margin-bottom: var(--spacing-3xl);
}

.dlbar.with-map > .view-options {
  position: absolute;
  top: -44px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dlbar.with-map > .view-options .sort select {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}

.dlbar.with-map > .show-on-map {
  position: absolute;
  z-index: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-alt-xs);
  background: var(--gray-100);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  color: var(--gray-900);
  right: calc(50% - 100px);
  bottom: 50%;
  font-size: var(--font-size-xxs);
  font-weight: 600;
}

.dlbar.with-map > .show-on-map:hover {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
  color: var(--brand-400);
}

.dlbar.with-map > .map-view {
  width: calc(100% - 2px);
  height: inherit;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gray-400);
}

.dlbar.with-map > .map-view #map_snap {
  position: relative;
  height: 115%;
  border-radius: 8px;
  pointer-events: none;
  margin-right: -2px;
}

.dlbar .list {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  vertical-align: middle;
  background: url(/img/redesign/icons/list-view.svg);
  background-size: 20px;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.dlbar .list.s {
  transition: all 0.3s;
  background-image: url(/img/redesign/icons/list-view-selected.svg);
}

.dlbar .grid {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: var(--spacing-none) var(--spacing-xs) var(--spacing-none) var(--spacing-none);
  vertical-align: middle;
  background: url(/img/redesign/icons/gallery-view.svg);
  background-size: 20px;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.dlbar .grid.s {
  transition: all 0.3s;
  background: url(/img/redesign/icons/gallery-view-selected.svg);
}

.dlbar .grid:hover {
  background: url(/img/redesign/icons/gallery-view-selected.svg);
  opacity: 0.5;
}

.dlbar .grid.s:hover, .dlbar .list.s:hover {
  opacity: 1;
}

.dlbar .list:hover {
  background-image: url(/img/redesign/icons/list-view-selected.svg);
  opacity: 0.5;
}

.dlbar > .map {
  font-size: 13px;
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-xl) var(--spacing-none) var(--spacing-none);
  transition-duration: 0.3s;
}

.dlbar > .map > div {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none);
  vertical-align: middle;
  opacity: 0.4;
  background: url(/img/p.png) -39px -87px;
  background-size: 120px 120px;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.dlbar > .map:hover > div {
  opacity: 0.6;
}

.dlbar .s {
  opacity: 1;
}

.dlbar .sort {
  display: inline-block;
  margin-right: var(--spacing-lg);
}

.dlbar .sort select {
  font-size: 14px;
  color: var(--gray-900);
  padding: var(--spacing-xs) var(--spacing-2xl) var(--spacing-xs) var(--spacing-lg);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-alt-xs);
  outline: none;
  background-color: var(--gray-100);
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}

.dl .actions {
  float: left;
  padding-top: var(--spacing-xs);
}

.dl .search > input[type=text] {
  width: 200px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-xs);
}

.dl .user {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.dl .user img {
  width: 48px;
  height: 48px;
  margin-right: var(--spacing-md);
  border-radius: 50%;
}

.dl .user > div {
  display: flex;
  flex-direction: column;
}

/* reviews -------------*/
.dlrev {
  display: flex;
  flex-direction: column;
  background-color: var(--gray-100);
  border-radius: 10px;
}

.dlrev > div {
  color: var(--gray-900);
  display: flex;
  padding: var(--spacing-xl) var(--spacing-none);
}

.dlrev > div > div:first-child {
  width: 280px;
  margin-right: 30px;
}

.dlrev > div > div:first-child > div, .dlrev > div > div:first-child > a {
  font-size: 14px;
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.dlrev > div > div:first-child img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.dlrev > div > div:first-child a.comp img, .dlrev > div > div:first-child div.comp img {
  border-radius: 8px;
}

.dlrev > div > div:first-child .since {
  font-size: 11px;
  color: var(--gray-600);
  margin-top: var(--spacing-xs);
}

.dlrev > div > div:last-child {
  flex: 1;
}

.dlrev > div > div:last-child > div:first-child {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

/* rejected reviews */
.dlrev > div.x {
  opacity: 0.5;
}

.dlrev > div > div:last-child > div:first-child > .i {
  color: var(--gray-700);
  margin-left: var(--spacing-xl);
}

.dlrev > div > div:last-child > .b {
  font-size: 15px;
  font-weight: normal;
  color: var(--gray-700);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.dlrev > div > div:last-child > .d {
  font-size: 12px;
  font-weight: normal;
  color: var(--gray-600);
}

.dlrev > div > div:last-child > .r {
  padding-left: 30px;
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-md) var(--spacing-none);
  border-left: 4px solid var(--gray-400);
}

.dlrev > div > div:last-child > .r > .rb {
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  font-style: italic;
}

.dlrev > div > div:last-child > .r > .d {
  font-size: 12px;
  font-weight: normal;
  color: var(--gray-500);
  font-style: italic;
}

.dlrev > div > div:last-child > .r > .u {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-alt-sm);
}

.dlrev > div > div:last-child > .r > .u > img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.dlrev > div > div:last-child > .r > .u > img.comp {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 4px 4px rgb(200 200 200/20%);
  border-radius: 6px;
}

.dlrev > div > div:last-child > .r > .u > div {
  font-size: 14px;
  margin-left: var(--spacing-sm);
  max-width: 200px;
}

.dlrev > div > div:last-child > .btn, .dlrev > div > div:last-child > .r > .btn {
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none) -6px;
  font-size: 15px;
  color: var(--brand-400);
  cursor: pointer;
  display: inline-block;
  padding: var(--spacing-alt-xs) var(--spacing-md);
  border-radius: 16px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 6px center;
}

.dlrev > div > div:last-child > .r > .btn {
  background-image: url(/img/redesign/icons/edit.svg);
  padding-left: var(--spacing-3xl);
  color: var(--gray-900);
}

.dlrev > div > div:last-child > .btn:hover {
  background-color: var(--gray-300);
}

.dlrev > div > div:last-child > .r > .btn:hover {
  color: var(--brand-400);
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}

.dlrev > div > div:last-child > .st {
  margin-top: var(--spacing-sm);
  font-size: 15px;
  color: var(--error-500);
}

.dlrev .dlf {
  display: block;
}

#rev_list > .dlrev > div {
  border-top: 1px solid var(--gray-300);
}

#rev_list > .dlrev > div:first-child {
  border: none;
  padding-top: var(--spacing-none);
}

.rev_sugg + #rev_list > .dlrev > div:first-child {
  padding-top: var(--spacing-xl);
}

/*-----*/
/*ratings summary*/
.ratsum {
  display: flex;
  flex-direction: row;
  margin: var(--spacing-md) var(--spacing-none);
  align-items: center;
}

/*left*/
.ratsum > div:first-child {
  text-align: center;
  margin: var(--spacing-none) var(--spacing-6xl) var(--spacing-none) var(--spacing-none);
}

.ratsum > div:first-child .t {
  font-size: 16px;
  margin-top: var(--spacing-alt-sm);
  color: var(--gray-700);
  font-weight: bold;
}

.ratsum > div:first-child .i {
  font-size: 14px;
  margin-top: var(--spacing-xs);
  color: var(--gray-600);
}

/*right*/
.ratsum > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/*row*/
.ratsum > div:last-child > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: var(--spacing-alt-sm);
}

/*stars container*/
.ratsum > div:last-child > div > div:first-child {
  margin-right: var(--spacing-alt-sm);
}

/*empty bar*/
.ratsum > div:last-child > div > div:nth-child(2) {
  width: 100%;
  height: 10px;
  background-color: var(--gray-400);
  border-radius: 10px;
  position: relative;
}

/*colored bar*/
.ratsum > div:last-child > div > div:nth-child(2) > div {
  position: absolute;
  background-color: var(--info-400);
  left: 0;
  top: 0;
  height: 10px;
  border-radius: 10px;
}

.ratsum > div:last-child > div > div:last-child {
  margin-left: var(--spacing-sm);
  font-size: 14px;
  color: var(--gray-700);
  min-width: 50px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*-----*/
#pagenotif {
  flex: 1;
  background-color: var(--gray-100);
  max-width: 1140px;
}

.dl.notif > div {
  padding: var(--spacing-alt-md) var(--spacing-none);
  display: flex;
}

.dl.notif > div > .new {
  width: 16px;
  min-width: 16px;
  font-size: 18px;
  color: var(--brand-400);
}

.dl.notif > div > img {
  width: 24px;
  height: 24px;
  margin: var(--spacing-xxs) var(--spacing-lg) var(--spacing-none) var(--spacing-none);
}

.dl.notif > div > div > div.subj {
  font-size: 15px;
  color: var(--gray-900);
}

.dl.notif > div > div > div.body {
  font-size: 15px;
  color: var(--gray-700);
  margin-top: var(--spacing-xs);
}

.dl.notif > div > div > div.d {
  font-size: 13px;
  color: var(--gray-500);
}

.dl.notif > div > div > div.btn {
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none) -12px;
}

.dl.notif > div > div > div.btn > a {
  font-size: 15px;
  color: var(--brand-400);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 16px;
  cursor: pointer;
}

.dl.notif > div > div > div.btn > a:hover {
  background-color: var(--gray-300);
}

/*-----*/
.dl .abar {
  display: flex;
  justify-content: flex-end;
  margin: -8px;
  text-align: right;
  white-space: nowrap;
}

.dl .abar img {
  width: 20px;
  height: 20px;
}

.dl img.n, .bdash > .l > div.pblock .nohp img {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.dl .abar > a, .dl .abar > div {
  padding: var(--spacing-sm);
  border-radius: 20px;
  transition: all 0.2s;
}

.dlf {
  clear: both;
  padding: 30px;
  text-align: center;
  border-top: 1px solid var(--gray-300);
}

.dlf a {
  font-size: 15px;
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-xs);
  padding: 5px 9px;
  text-align: center;
  border-radius: 6px;
  transition: color 0.2s, background-color 0.2s;
}

.dlf .c {
  font-size: 14px;
  font-weight: 700;
  margin: var(--spacing-none) var(--spacing-xs);
  padding: 5px 9px;
  text-align: center;
  border-radius: 4px;
  background-color: var(--gray-300);
}

.dlf a:hover {
  text-decoration: none;
  background-color: var(--gray-300);
}

.dl tr td.headerd {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
  padding: var(--spacing-lg) var(--spacing-none) var(--spacing-sm) var(--spacing-md);
  vertical-align: middle;
  white-space: nowrap;
  border-top: 1px solid var(--gray-300);
}

.dl tr:first-child td.headerd, .dl tr:first-child td.h, .dl tr:first-child td {
  border: none;
}

.tabbody .dl tr.hdr {
  background-color: var(--gray-300);
}

.tabbody .dl tr.hdr td {
  border: none;
}

.tabbody h1 {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
  font-weight: normal;
  font-size: 17px;
  color: var(--gray-600);
  background-color: var(--gray-100);
  margin: var(--spacing-none);
}

.tabbody:has(.dlrev.left) h1 {
  color: var(--gray-900);
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
}

.dl tr.hdr td {
  font-size: 12px;
  font-weight: bold;
  color: var(--gray-700);
  vertical-align: middle;
  white-space: nowrap;
  border-top: 1px solid var(--gray-400);
  border-bottom: 1px solid var(--gray-400);
}

.dl .t {
  font-size: 14px;
  line-height: 1.5;
  float: left;
  width: 360px;
}

.dl td:first-child .t {
  width: 560px;
}

.dl .tf {
  font-size: 14px;
  float: left;
  width: 320px;
}

.dl .p .p2 {
  font-size: 12px;
  color: var(--gray-600);
  display: block;
}

.dl .d {
  font-size: 11px;
  color: var(--gray-600);
  padding-top: var(--spacing-alt-xs);
}

.dl a:hover .d {
  text-decoration: none;
}

.dl .s {
  margin-top: var(--spacing-xs);
}

.dl .s span {
  font-size: 11px;
  color: var(--gray-700);
  display: inline-block;
  margin-top: var(--spacing-sm);
  margin-right: 18px;
  white-space: nowrap;
}

.dl .bnr_thumb {
  overflow: hidden;
  width: 96px;
  height: 72px;
  border: 1px solid var(--gray-400);
}

.dl .bnr_thumb img {
  height: 100px;
  margin-top: -10px;
}

#msg_list {
  position: relative;
}

.chatTitle {
  text-overflow: ellipsis;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-lg);
}

.chatTitle .r {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chatTitle .r .order-label {
  height: fit-content;
}

.chatTitle a {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--gray-900);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chatTitle a:hover {
  color: var(--brand-400);
}

.chatTitle .l img {
  width: 48px;
  height: 36px;
  border-radius: 3px;
  margin-top: -6px;
}

.chatReply {
  border-top: 1px solid var(--gray-400);
  border-radius: 0 0 8px 8px;
  background-color: var(--gray-100);
  position: absolute;
  width: 100%;
  bottom: -160px;
  padding: var(--spacing-none);
}

.tabbody > .ChatTitleComponent + .chat .chatReply {
  bottom: -128px;
}

.chatReply textarea {
  font-size: 15px;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--gray-300);
  border-radius: 8px;
}

.chatReply .textareaWrapper {
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: inline-block;
}

.chatReply .textareaWrapper {
  width: 100%;
}

.chatReply form {
  display: flex;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-2xl);
  align-items: flex-end;
}

.chatReply textarea:focus {
  box-shadow: none;
}

.chatReply input[type=button] {
  font-size: 15px;
  color: var(--gray-100);
  align-self: flex-end;
  height: 52px;
  padding: var(--spacing-none) 30px;
  border-radius: 8px;
  background-color: var(--brand-400);
  transition: background-color 0.2s;
}

.chatReply input[type=button]:hover {
  background-color: var(--brand-300);
}

.chatReply input[type=submit]:hover {
  color: var(--brand-300);
  outline: none;
}

.chatReply input[type=button][disabled] {
  text-indent: -999px;
  background: var(--gray-100) url(/img/loading.gif) no-repeat center center;
}

.dlmsg, .dlpayh, .dlbundles, .dlbp {
  display: flex;
  flex-direction: column;
}

.dlbp {
  padding: var(--spacing-none) var(--spacing-md);
}

.dlmsg > a, .dlpayh > span, .dlbundles > span, .dlbundles > div, .dlbp > a {
  color: var(--gray-900);
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-lg) var(--spacing-none);
  transition: color 0.2s;
}

.dlbundles a.bblink.disabled {
  cursor: default;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 8px;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  background-color: var(--gray-400);
  color: var(--gray-500) !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.3px;
  width: fit-content;
}

.dlbundles a.bblink.disabled > img {
  width: 14px;
  height: 14px;
}

.dlbundles .bundles-action-container {
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.dlbundles .bundles-action-container .premium-prompt-box-wrapper {
  display: none;
  position: absolute;
  left: -50%;
  top: 44px;
}

.dlbundles .bundles-action-container .premium-prompt-box-wrapper.show {
  display: flex;
}

.premium-prompt-box-wrapper {
  width: 360px;
  padding: var(--spacing-xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
  border-radius: 8px;
  background: var(--gray-100);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
}

.premium-prompt-box-wrapper .premium-prompt-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.32px;
}

.premium-prompt-box-wrapper .premium-prompt-info {
  color: var(--gray-800);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.premium-prompt-box-wrapper .bblink {
  background-color: var(--brand-400);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.dlmsg > a:last-child, .dlbp > a:last-of-type {
  border: none;
}

.dlmsg .dlf, .dlpayh .dlf {
  border-top: none;
}

.dlmsg {
  gap: var(--spacing-4xl);
}

.dlmsg > a {
  padding: var(--spacing-none);
}

.dlmsg > a div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dlmsg > a > div:nth-child(1) {
  display: flex;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-right: var(--spacing-lg);
}

.dlmsg > a > div:nth-child(1) > .av_comp {
  width: 56px;
  height: 56px;
}

.dlmsg > a > div:nth-child(2) {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--spacing-md);
}

.dlmsg > a > div > div > .username > .name,
.dlmsg > a > div > div > .username > .new {
  font-size: 14px;
}

.dlmsg > a > div > div > .username .name {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.dlmsg > a > div > div > .username .name,
.dlmsg > a > div > div > .username .new {
  max-width: 100%;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.dlmsg > a > div:nth-child(2) > div:nth-child(1) {
  font-size: 15px;
  width: 800px;
}

/*number of replies*/
.dlmsg > a > div:nth-child(2) > div:nth-child(1) .cnt {
  font-size: 12px;
  display: inline-block;
  box-sizing: border-box;
  margin-left: var(--spacing-sm);
  padding: var(--spacing-xxs) var(--spacing-sm);
  text-align: center;
  border-radius: 50%;
  background-color: var(--gray-400);
}

.dlmsg > a > div:nth-child(2) > div:nth-child(1) .new {
  /*font-size: 18px;*/
  color: var(--brand-400);
  margin-right: var(--spacing-xxs);
}

.dlmsg > a > div:nth-child(2) > div:nth-child(1) .new > .unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--brand-400);
  margin-left: var(--spacing-sm);
}

.dlmsg > a > div:nth-child(2) > div:nth-child(1) .new + span + span.cnt,
.dlmsg > a > div:nth-child(2) > div:nth-child(1) .new + span.cnt {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.dlmsg > a > div:nth-child(2) > div:nth-child(2) {
  width: 120px;
  align-self: baseline;
  text-align: left;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.dlmsg > a > div:nth-child(2) > div:nth-child(3) {
  color: var(--gray-500);
  margin-left: auto;
  text-align: right;
}

.dlmsg > a:hover {
  text-decoration: none;
  background-color: var(--gray-300);
  border-radius: 8px;
}

.dlmsg .t {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlmsg .desc {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-600);
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlmsg .att {
  font-size: 14px;
  color: var(--gray-900);
  margin: var(--spacing-none);
}

.dlmsg .att img {
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-xs);
}

.dlmsg .att img {
  width: 20px;
  height: 20px;
}

.dlmsg .username {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: var(--spacing-sm);
}

/* bundles */
/* toolbar */
.dlbundles > div {
  justify-content: flex-end;
  padding-top: var(--spacing-none);
}

/* item row */
.dlbundles > span {
  font-size: 15px;
}

.dlbundles > span > div:first-child {
  font-size: 15px;
  width: 300px;
}

.dlbundles > span > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin: var(--spacing-none) var(--spacing-xl);
}

.dlbundles > span > div:nth-child(2) > div {
  margin: var(--spacing-xxs) var(--spacing-none);
}

.dlbundles > span > div:nth-child(2) > div span {
  font-size: 15px;
}

.dlbundles > span > div:nth-child(2) > div span:first-child {
  color: var(--gray-600);
}

/* date */
.dlbundles > span > div:last-child {
  font-size: 15px;
  color: var(--gray-900);
  flex: 1;
  margin-left: var(--spacing-alt-sm);
  text-align: right;
}

.dlbundles > span > div:last-child > div:first-child {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: var(--spacing-xxs);
}

.dlbundles > span.exp, .dlbundles > span.exp div, .dlbundles > span.exp span {
  color: var(--gray-500) !important;
  text-decoration: line-through;
}

/*business pages*/
.dlbp > a > img {
  width: 120px;
  height: 120px;
  margin-right: var(--spacing-xl);
  border-radius: 16px;
  box-shadow: 0 0 4px 4px rgba(200, 200, 200, 0.2);
}

.dlbp > a > div > div:first-child {
  font-size: 16px;
  font-weight: bold;
  color: var(--gray-900);
  transition: all 0.2s;
}

.dlbp > a:hover > div > div:first-child {
  color: var(--brand-400);
}

.dlbp > a > div > div:nth-child(2) {
  font-size: 14px;
  color: var(--gray-500);
  margin-top: var(--spacing-alt-xs);
}

.dlbp > a > div > div:nth-child(3) {
  display: flex;
  margin-top: var(--spacing-alt-sm);
}

.dlbp > a > div > div:nth-child(3) > div {
  font-size: 15px;
  color: var(--gray-700);
  margin-right: var(--spacing-lg);
}

/*rating*/
.dlbp > a > div > div.r {
  margin-top: var(--spacing-alt-sm);
}

/*payment history*/
.dlpayh > span > div:first-child {
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  flex: 1;
  flex-direction: row;
}

/* payment date*/
.dlpayh > span > div:first-child > div:first-child {
  color: var(--gray-900);
  width: 250px;
}

/*payment method*/
.dlpayh > span > div:first-child > .pt {
  width: 200px;
}

.dlpayh > span > div:first-child > .pt > span:first-child {
  margin-right: var(--spacing-alt-xs);
}

/*payment service*/
.dlpayh > span > div:first-child > .st {
  flex: 1;
}

.dlpayh > span > div:first-child > .st > div:first-child {
  color: var(--gray-900);
}

.dlpayh > span > div:first-child > .st > div:last-child {
  color: var(--gray-600);
  margin-top: var(--spacing-alt-sm);
}

/*payment amount*/
.dlpayh > span > div:last-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  width: 100px;
  margin-left: var(--spacing-alt-sm);
  text-align: right;
}

#pageTabBar {
  display: flex;
  align-items: center;
  justify-content: left;
  box-sizing: border-box;
  /*border-bottom: 1px solid var(--gray-400);*/
}

#pageTabBar > div:first-child {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  box-sizing: border-box;
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-2xl) var(--spacing-none);
}

#pageTabBar > div:first-child > span, #pageTabBar > div:first-child > a {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-900);
  background-color: var(--gray-300);
  padding: var(--spacing-sm) var(--spacing-lg);
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
  border-radius: 8px;
}

#pageTabBar > div:first-child > span {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

#pageTabBar > div:first-child > span:hover {
  background-color: var(--brand-300);
}

#pageTabBar > div:first-child > a:hover {
  background-color: var(--gray-400);
}

#pageTabBar .r {
  flex: 1;
  margin-right: var(--spacing-sm);
  text-align: right;
}

#pageTabBar a:hover {
  text-decoration: none;
}

#pageTabBar .c {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  float: none;
  margin-left: var(--spacing-sm);
  padding: var(--spacing-none);
}

#pageTabBar span .c {
  color: var(--gray-100);
}

#pageButtonBar {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-xl) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

#pageButtonBar .btn {
  display: flex;
}

#pageButtonBar .btn a {
  padding: var(--spacing-sm);
  border-radius: 20px;
  transition: color 0.2s, background-color 0.2s;
}

#pageButtonBar .btn a img {
  width: 20px;
  height: 20px;
}

#bnr_info {
  font-size: 14px;
}

#bnr_info .hlp_icon div {
  display: none;
}

#bnr_info .hlp_icon span {
  font-size: 14px;
  font-weight: 500;
  margin-left: var(--spacing-none);
}

.bnr_info {
  line-height: 1.5;
  min-height: 200px;
  margin: var(--spacing-none) var(--spacing-alt-sm) var(--spacing-alt-sm) var(--spacing-none);
  padding-top: 30px;
}

.banner-ads-info .HeadingComponent {
  margin-bottom: var(--spacing-xs);
}

.bnr_info .banner-ads-info {
  width: 100%;
}

.bnr_info .l {
  font-size: 15px;
  color: var(--gray-700);
  float: left;
  width: 550px;
  padding: var(--spacing-none) var(--spacing-xl) 30px;
  border-right: 1px solid var(--gray-400);
}

.bnr_info .r {
  float: left;
  margin-left: var(--spacing-6xl);
  padding: var(--spacing-lg) var(--spacing-none) var(--spacing-none);
}

.bnr_list table .bblink {
  font-size: 13px;
  border-radius: 20px;
}

.bnr_list .hdr {
  text-align: right;
  margin: var(--spacing-2xl) var(--spacing-none);
}

.bnr_list .dest {
  overflow: hidden;
  width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bnr_type_opt {
  padding: var(--spacing-xl);
  border-top: 1px solid var(--gray-400);
}

.bnr_type_opt:first-child {
  border-top: none;
}

.bnr_type_opt .thmb {
  float: left;
  width: 200px;
}

.bnr_type_opt .thmb img {
  padding: var(--spacing-none);
  border: 1px solid var(--gray-400);
  border-radius: 4px;
}

.bnr_type_opt .i {
  float: left;
  max-width: 450px;
}

.bnr_type_opt .i .t {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
}

.bnr_type_opt .i .s {
  color: var(--gray-900);
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}

.bnr_type_opt .i table {
  width: auto;
  padding: var(--spacing-none);
  border-collapse: collapse;
}

.bnr_type_opt .i .d {
  font-size: 10px;
  color: var(--gray-900);
  margin-top: var(--spacing-sm);
}

.bnr_type_opt .b {
  float: right;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl);
}

.bnr_type_opt .b .p1 {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  text-align: center;
}

.bnr_type_opt .b .str {
  text-decoration: line-through;
}

.bnr_type_opt .b .p1s {
  font-size: 14px;
  font-weight: 700;
  color: var(--success-500);
  text-align: center;
}

.bnr_type_opt .b .p2 {
  font-size: 10px;
  font-weight: 400;
  color: var(--gray-600);
  text-align: center;
}

.bnr_type_opt .b .p3 {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.bnr_act {
  margin-right: var(--spacing-alt-sm);
}

.bnr_act .banner-ads-info {
  margin-bottom: var(--spacing-lg);
}

.bnr_act .st {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-alt-sm);
  padding-bottom: var(--spacing-alt-sm);
  border-bottom: 1px solid var(--gray-300);
}

.bnr_act .l {
  float: left;
  width: 190px;
  padding-top: var(--spacing-xxs);
}

.bnr_act .r {
  padding-left: 190px;
}

.bnr_act .btn {
  margin-top: var(--spacing-alt-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-300);
}

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

.bnr_act table td {
  padding: var(--spacing-alt-xs);
  vertical-align: middle;
}

#tp .toppost {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--gray-900);
  display: flex;
  overflow: auto;
  align-items: center;
  padding: var(--spacing-lg);
  white-space: nowrap;
}

#tp .toppost .l {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
  margin-right: var(--spacing-md);
  color: var(--gray-900);
}

#tp {
  border-radius: 8px;
  background-color: var(--info-100);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
}

#tp .dl table {
  border-bottom: 1px solid var(--gray-300);
}

.hlp_icon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-alt-xs);
}

.hlp_icon div {
  font-size: 11px;
  font-weight: bold;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--gray-300);
  transition: background-color 0.2s;
}

#tp .toppost .hlp_icon div {
  background-color: var(--accent-amber);
}

.hlp_icon span {
  font-size: 16px;
  color: var(--brand-400);
  margin-left: var(--spacing-sm);
  transition: all 0.2s;
}

.hlp_icon span:hover {
  color: var(--brand-300);
}

#bnr {
  display: flex;
  justify-content: center;
  height: 86px;
  margin: var(--spacing-md) var(--spacing-none);
  padding: var(--spacing-alt-sm) var(--spacing-none);
  transition: all 0.2s;
}

#bnr .b {
  overflow: hidden;
  width: 724px;
  height: 86px;
  border-radius: 4px;
  background-color: var(--gray-100);
}

#bnr iframe {
  position: relative;
  top: -2px;
  left: -2px;
  overflow: hidden;
  width: 728px;
  height: 90px;
  margin: var(--spacing-none) auto;
  padding: var(--spacing-none);
  border: 0;
  border-radius: 4px;
}

/*-------------------------------------*/
/*homepage category strip menu*/
#hcontent .stripc > div {
  /*margin: 2px 0;*/
}

#hcontent .stripc > div > a {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  width: auto;
}

.stripc {
  display: grid;
  margin-top: var(--spacing-lg);
  column-gap: 8px;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none;
  grid-template: auto auto auto auto auto/auto auto auto auto auto;
}

.stripc::-webkit-scrollbar {
  display: none;
}

.stripc > div {
  max-width: 300px;
  margin: var(--spacing-sm) var(--spacing-none);
}

.stripc > div > a {
  display: inline-block;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gray-900);
}

.stripc > div > a > img {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
}

.stripc > div > a:hover {
  color: var(--brand-400);
}

.stripc > div > a:hover > img {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}

/*-------------------------------------*/
/* category list page strip menu */
.catms {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl);
  background-color: var(--gray-100);
}

.catms .stripc {
  padding: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-xl);
  margin: var(--spacing-none) var(--spacing-none) 50px;
  grid-template: auto auto auto/auto auto auto;
  overflow: hidden;
  border-bottom: 1px solid var(--gray-300);
}

.catms .stripc > div {
  width: 300px;
  margin: var(--spacing-xxs) var(--spacing-none);
}

.catms .stripc > div.s {
  font-weight: bold;
}

.catms .stripc > div.s > a {
  font-weight: 700;
  display: flex;
  align-items: center;
}

.catms .stripc > div:nth-child(n+10) {
  display: none;
}

/*-------------------------------------*/
.featured {
  width: 100%;
  margin: auto;
}

.featured > .c > .s, .featured > .c > .u {
  padding: var(--spacing-xl) var(--spacing-none);
}

.featured > .c > .s .label.sel {
  margin-bottom: var(--spacing-sm);
}

.featured > .c > .s > div.t > span {
  display: none;
}

.featured > .c > .s > a, .featured > .c > .s > .t, .featured > .c > .u > a {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-alt-md);
  transition: color 0.2s, background-color 0.2s;
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.featured > .c > .s > a > span, .featured > .c > .u > a > span, .featured > .c > .s > .t > span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 24px !important;
  transition: all 0.2s;
}

.featured > .c > .s > a:hover > span, .featured > .c > .u > a:hover > span {
  margin-left: var(--spacing-xs);
  opacity: 1;
  /*filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);*/
}

.featured > .c > .s > a:hover > span, .featured > .c > .u > a:hover > span {
  background: url(/img/redesign/icons/chevron-right-bold-blue.svg) no-repeat 0 0 !important;
  transition: all 0.2s;
}

.featured > .c > .s > a:hover, .featured > .c > .u > a:hover {
  color: var(--brand-400);
}

.featured > .c > .s > .c, .featured > .c > .u > .c {
  display: flex;
  gap: var(--spacing-sm);
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: var(--spacing-xxs);
  padding-right: var(--spacing-xxs);
}

.featured > .c > .h {
  overflow: hidden;
  margin: 50px 80px;
  position: relative;
  border-radius: 6px;
  transition: all 0.2s;
}

.featured > .c > .h:empty {
  display: none;
}

.featured > .c > .h > a {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.featured > .c > .h > a > img {
  width: 280px;
  min-width: 280px;
  height: 210px;
  border-radius: 16px;
  transition: all 0.2s;
}

.featured > .c > .h:hover img {
  -webkit-filter: brightness(110%);
}

.featured > .c > .h > a > div > div:nth-child(2) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.featured > .c > .h > a > div {
  padding: var(--spacing-md) var(--spacing-6xl);
}

.featured > .c > .h > a > div > div:first-child {
  font-size: 20px;
  overflow: hidden;
  height: 28px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-md) var(--spacing-none);
  text-overflow: ellipsis;
}

.featured > .c > .h > a > div > div:nth-child(2) > .p {
  font-size: 17px;
  font-weight: bold;
  color: var(--gray-900);
  margin-right: var(--spacing-alt-md);
}

.featured > .c > .h > a > div > div:nth-child(3) {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.6;
  overflow: hidden;
  max-height: 90px;
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  text-overflow: ellipsis;
}

.featured > .c > .h2 {
  display: flex;
  justify-content: space-evenly;
  margin: 60px auto var(--spacing-6xl) auto;
}

.featured > .c > .h2 > .c {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 280px;
  border-radius: 6px;
}

.featured > .c > .h2 > .c > a > .lbl {
  font-size: 13px;
  position: absolute;
  top: 192px;
  left: 6px;
}

.featured > .c > .h2 > .c > a {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}

.featured > .c > .h2 > .c > a > img {
  width: 280px;
  min-width: 280px;
  height: 225px;
  border-radius: 16px;
  transition: all 0.2s;
  object-fit: cover;
}

.featured > .c > .h2 > .c:hover img {
  -webkit-filter: brightness(110%);
}

.featured > .c > .h2 > .c > a > div {
  padding: var(--spacing-md) var(--spacing-none);
  transition: all 0.2s;
}

.featured > .c > .h2 > .c > a > div > div:first-child {
  font-size: 17px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none);
}

.featured > .c > .h2 > .c > a > div > div:first-child .p {
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xxs);
}

.featured > .c > .h2 > .c > a > div > div:nth-child(2) {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured .c > .s > .c > a, .ydx_hp_ad {
  position: relative;
  display: inline-block;
  width: 174px;
  text-align: left;
  vertical-align: top;
  transition: color 0.2s, background-color 0.2s;
  -webkit-transition: -webkit-filter 200ms linear;
}

.featured .c .s a:hover, .featured .c .u .c a:hover {
  text-decoration: none;
  -webkit-filter: brightness(110%);
}

.featured .c .s a:hover > div > .t, .featured > .c > .u > .c > a:hover > div {
  color: var(--brand-400) !important;
}

.featured .c .s a > img {
  width: 174px;
  height: 165px;
  border-radius: 12px;
  transition: all 0.2s;
  object-fit: cover;
  border: 1px solid var(--gray-400);
}

.featured .c .s a > div {
  padding: var(--spacing-md) var(--spacing-none) var(--spacing-alt-xs);
}

.featured .c .s a > div > .t {
  font-size: 15px;
  color: var(--gray-900);
  line-height: 20px;
  display: -webkit-box;
  overflow: hidden;
  max-height: 44px;
  text-overflow: ellipsis;
  transition: all 0.2s;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.featured .c .s a > div > div.p {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-sm);
}

.featured > .c > .s > .c a > .PostLabelComponent {
  font-size: 12px;
  position: absolute;
  top: 138px;
  left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
}

/*featured users*/
.featured > .c > .u > .c > a {
  display: inline-block;
  width: 100px;
  text-align: center;
  transition: all 0.2s;
  margin-bottom: var(--spacing-alt-xs);
  border-radius: 12px;
  border: 1px solid var(--gray-400);
}

.featured > .c > .u > .c > a > img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
}

.featured > .c > .u > .c > a:hover {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}

/* rating */
.featured > .c > .u > .c > a > div.r {
  zoom: 0.9;
  margin: var(--spacing-alt-xs) var(--spacing-none);
}

/*stories*/
.featured > .c > .st {
  padding: var(--spacing-3xl) var(--spacing-none) var(--spacing-xl);
}

.featured > .c > .st > .c {
  display: flex;
  gap: var(--spacing-sm);
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-between;
}

.featured > .c > .st > .c > a {
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.2s;
  border-radius: 16px;
  width: 128px;
  height: 128px;
}

.featured > .c > .st > .c > a:hover {
  -webkit-filter: brightness(110%);
}

.featured > .c > .st > .c > a > div:last-child {
  padding: var(--spacing-none);
  width: 100%;
  height: 100%;
  align-items: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
  border-radius: 16px;
}

.featured > .c > .st > .c > a > div:last-child > div {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--spacing-alt-sm);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.featured .hp-heart {
  position: absolute;
  top: -8px;
  right: 0;
  z-index: 2;
  width: 32px;
  padding: 0;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.featured .hp-heart .heart-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*full width body*/
body.f #ph > .c, body.f #pfooter .c {
  /*width:     auto;*/
  max-width: 1900px;
  margin: auto var(--spacing-6xl);
}

#main:has(.EmptyStateComponent) {
  min-height: calc(100vh - 166px);
}

#main:has(.EmptyStateComponent):has(#pagecol),
#main:has(.EmptyStateComponent):has(.bubble) {
  display: flex;
  flex-direction: column;
}

#main:has(.EmptyStateComponent) > #pagecol {
  flex: 1;
}

#main:has(.EmptyStateComponent) > .tabbody,
#main:has(.EmptyStateComponent) > .tabbody:has(.EmptyStateComponent) > div:not(#pageTabBar, .info) {
  display: flex;
  flex-direction: column;
}

#main:has(.EmptyStateComponent) > .tabbody:has(.EmptyStateComponent) > div:not(#pageTabBar):not(.rev_sugg, .info) {
  flex: 1;
}

#main:has(.EmptyStateComponent) > .tabbody > .dle:not(:has(.EmptyStateComponent:only-child)) .EmptyStateComponent {
  margin: auto;
}

#main:has(.EmptyStateComponent) > .tabbody > div > #tabcontent > .resume.emp {
  height: calc(100% - 57px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#main:has(.EmptyStateComponent) > .tabbody > .dle:has(.EmptyStateComponent:only-child),
#main:has(.EmptyStateComponent) > .tabbody > .dl,
#main:has(.EmptyStateComponent) > .tabbody > div > .dl,
#main:has(.EmptyStateComponent) > .tabbody > #msg_list,
#main:has(.EmptyStateComponent) > .tabbody > #rev_list,
#main:has(.EmptyStateComponent) > div.EmptyStateComponent,
#main:has(.EmptyStateComponent) > .tabbody > div:has(.dlpayh),
#main:has(.EmptyStateComponent) > .tabbody > div > #tabcontent:not(:has(.resume.emp)),
#main:has(.EmptyStateComponent) > #pagecol #contentr,
#main:has(.EmptyStateComponent) > .bubble {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.dle {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

/* my ads datalist */
div.dle > .l {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

div.dle > .inf {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-600);
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.dlsearch form {
  box-sizing: border-box;
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-md);
}

.dlsearch form select {
  display: inline-block;
  width: calc(50% - 6px);
}

.dlsearch.my-posts form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.dlsearch.my-posts .select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dlsearch.my-posts .select-wrapper .select-native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  width: 100%;
  height: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-right: var(--spacing-6xl);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  background-color: var(--gray-100);
  color: var(--gray-900);
}

.dlsearch.my-posts .select-wrapper .chevron-down {
  position: absolute;
  top: 50%;
  right: var(--spacing-alt-md);
  transform: translateY(-50%);
  pointer-events: none; /* Allows click to pass through to the select */
  width: 25px;
  height: auto;
  opacity: 0.6;
}

.select-wrapper:hover .select-native {
  border-color: var(--gray-500);
}

.dlsearch form select:nth-child(2) {
  margin-right: var(--spacing-md);
}

.dlsearch form .txt {
  width: 100%;
  position: relative;
}

.dlsearch form .txt input {
  width: 100%;
}

.dlsearch form input {
  color: var(--gray-900);
  display: inline-block;
  width: 300px;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  border-radius: 6px;
  outline: none;
  background-color: var(--gray-100);
}

.dlsearch form input.InputComponent {
  background-color: var(--gray-300);
}

.dlsearch form .txt:has(.ctrl a.x) input.InputComponent {
  padding-right: var(--spacing-6xl);
}

.dlsearch form .my-ads-filters {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.dlsearch form .my-ads-filters .filter-label {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.dlsearch form .my-ads-filters label {
  padding: var(--spacing-alt-xs) var(--spacing-md);
  border: 1px solid var(--gray-400);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dlsearch form .my-ads-filters label > div:last-child {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.dlsearch form .my-ads-filters input {
  width: auto;
  padding: var(--spacing-none);
}

.dlsearch .ctrl {
  position: absolute;
  top: 0;
  right: 6px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dlsearch form input[type=submit] {
  width: 6px;
  height: 0px;
  padding: var(--spacing-none);
  border: none;
}

.dlsearch form a.x {
  display: block;
  width: 25px;
  height: 25px;
  margin-right: 1px;
  padding: var(--spacing-none);
  border: none;
  background-color: transparent;
  background-image: url("/img/redesign/icons/xicon.svg");
  background-repeat: no-repeat;
  background-size: 25px;
}

/*warning for rejected ads*/
.rule_info {
  padding: var(--spacing-lg);
  border-radius: 8px;
  background-color: var(--accent-rosyMist);
}

.rule_info > .t {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
  color: var(--gray-900);
}

.rule_info > .row {
  display: flex;
  font-size: 15px;
  color: var(--gray-900);
  margin: var(--spacing-alt-sm) var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
}

.rule_info > .row.offset {
  margin-left: var(--spacing-4xl);
}

.rule_info > .row > .l {
  min-width: 22px;
  max-width: 22px;
  width: 22px;
  font-weight: bold;
  text-align: right;
  margin-right: var(--spacing-alt-xs);
}

#main > .rule_info {
  margin: var(--spacing-none) auto var(--spacing-xl);
}

div.dl > div > .fav-item-info-container,
div.dl > .fav-item-info-container {
  display: flex;
  padding: var(--spacing-lg);
  border-top: 1px solid var(--gray-300);
  position: relative;
}

div.dl > .fav-item-info-container {
  border-top: none;
  padding: var(--spacing-alt-xs) var(--spacing-md);
}

div.dl.u > .fav-item-info-container {
  align-items: center;
}

div.dl.u > div > .fav-item-info-container > img.av_comp,
div.dl.u > div > .fav-item-info-container > img.av_user,
div.dl.u > .fav-item-info-container > img.av_comp,
div.dl.u > .fav-item-info-container > img.av_user {
  width: 100px;
  height: 100px;
}

div.dl > div > .fav-item-info-container:first-of-type {
  border: none;
  border-radius: 8px 8px 0 0;
}

div.dl > div > .fav-item-info-container:last-of-type {
  border-radius: 0 0 8px 8px;
}

.dl.s > div > .fav-item-info-container:last-of-type > div {
  padding-right: 80px;
}

div.dl > div > .fav-item-info-container > img,
div.dl > .fav-item-info-container > img,
div.dl > .favorite-ads .inactive > img {
  width: 190px;
  height: 142px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--gray-400);
}

/*avatar*/
div.dl.u > a > img {
  width: 64px;
  height: 64px;
  margin-right: var(--spacing-xl);
  border-radius: 50%;
}

div.dl.s > div > a {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

div.dl.u > a > img.av_comp {
  border-radius: 6px;
}

/*avatar*/
div.dl.s > a > img {
  width: 20px;
  height: 20px;
  margin: 3px var(--spacing-xl) var(--spacing-none) var(--spacing-none);
}

div.dl > div > a > img, div.dl > a > img, div.dl .favorite-ads a.inactive > img, div.dl .favorite-ads.del span > img {
  width: 190px;
  margin-right: var(--spacing-lg);
  border: 1px solid var(--gray-400);
}

div.dl.a .favorite-ads .fav-item-info-container:has(.inactive),
div.dl.a .favorite-ads .fav-item-info-container:has(.del) {
  opacity: 0.3;
}

div.dl > div > a > img.av_user {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

div.dl > div > a > span, div.dl > a > span {
  margin-right: var(--spacing-alt-sm);
}

div.dl > div > a > span:empty, div.dl > a > span:empty {
  display: none;
}

div.dl > div > a > img.logo, div.dl > a > img.logo {
  width: 80px;
  height: 80px;
  margin-right: var(--spacing-xl);
}

div.dl > div > a > img.person, div.dl > a > img.person {
  width: 96px;
  height: 96px;
  margin-right: var(--spacing-xl);
}

div.dl.a > a > span, div.dl.p > a > span {
  width: 0;
  height: 0;
  margin: var(--spacing-none);
}

div.dl.p:has(.EmptyStateComponent) {
  width: 100%;
  height: 100%;
}

div.dl > div > .fav-item-info-container > div:nth-child(2),
div.dl > .fav-item-info-container > div:nth-child(2) {
  flex: 1;
}

div.dl > div.favorite-ads.del > .fav-item-info-container > div:nth-child(1) {
  margin-top: var(--spacing-xs);
  flex: 1;
}

div.dl > div.gl > a > div:nth-child(2) {
  margin-top: var(--spacing-none);
}

div.dl > div {
  position: relative;
}

div.dl > div:first-child {
  border-top: none;
}

div.dl > div > div.action-btns {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: var(--spacing-md);
}

div.dl > div > div.action-btns img {
  width: 20px;
  height: 20px;
}

div.dl.s > a > div:nth-child(2) {
  font-size: 15px;
}

/* item title */
div.dl > div > .fav-item-info-container > div > div:first-child,
div.dl > .fav-item-info-container > div > div:first-child {
  font-size: 16px;
  overflow-wrap: anywhere;
}

div.dl > div > .fav-item-info-container > div > div:first-child.del,
div.dl > .fav-item-info-container > div > div:first-child.del {
  color: var(--gray-500);
  text-decoration: line-through;
}

/* info line */
div.dl > div > .fav-item-info-container > div > div:nth-child(2),
div.dl > .fav-item-info-container > div > div:nth-child(2) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
  white-space: pre-wrap;
}

/*saved searches info line*/
div.dl.s > .fav-item-info-container > div > div:nth-child(2) {
  font-size: 14px;
  color: var(--gray-700);
  display: block;
  margin-top: var(--spacing-alt-sm);
}

/*saved searches/users new ads line*/
div.dl > div > .fav-item-info-container > div > div.newposts,
div.dl > .fav-item-info-container > div > div.newposts {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-alt-sm);
}

div.dl > div > .fav-item-info-container > div > div.note,
div.dl > .fav-item-info-container > div > div.note {
  display: inline-block;
  margin-top: var(--spacing-md);
  background-color: var(--info-400);
  font-size: 14px;
  padding: var(--spacing-xs) var(--spacing-alt-sm);
  border-radius: 6px;
  max-width: 500px;
  color: var(--gray-900);
  overflow-wrap: anywhere;
}

div.dl > div > .fav-item-info-container > div > div.newposts > div:first-child,
div.dl > .fav-item-info-container > div > div.newposts > div:first-child {
  font-size: 12px;
  font-weight: bold;
  color: var(--gray-100);
  margin-right: var(--spacing-alt-xs);
  padding: var(--spacing-xxs) 7px;
  text-align: center;
  border-radius: 20px;
  background-color: var(--brand-400);
}

div.dl > div > .fav-item-info-container > div > div.newposts > div:nth-child(2),
div.dl > .fav-item-info-container > div > div.newposts > div:nth-child(2) {
  font-size: 14px;
  color: var(--gray-700);
}

/*info line form user list*/
div.dl.u > .fav-item-info-container > div > div:nth-child(2) {
  font-size: 15px;
  color: var(--gray-700);
  margin-top: var(--spacing-alt-xs);
}

div.dl.u > .fav-item-info-container > div > div:first-child {
  font-size: 16px;
}

/*price*/
div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .p,
div.dl > .fav-item-info-container > div > div:nth-child(2) > .p {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  overflow: hidden;
  margin: var(--spacing-none) var(--spacing-md) var(--spacing-none) var(--spacing-none);
  white-space: nowrap;
}

/*old price*/
div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .po,
div.dl > .fav-item-info-container > div > div:nth-child(2) > .po {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-500);
  overflow: hidden;
  margin: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-none);
  white-space: nowrap;
  text-decoration: line-through;
}

/*price change*/
div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .pc, div.dl > a > div > div:nth-child(2) > .pc {
  font-size: 14px;
  overflow: hidden;
  margin: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-none);
  white-space: nowrap;
}

div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .pc.p1, div.dl > a > div > div:nth-child(2) > .pc.p1 {
  color: var(--success-500);
}

div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .pc.p2, div.dl > a > div > div:nth-child(2) > .pc.p2 {
  color: var(--error-500);
}

/*commercial label*/
div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .c,
div.dl > .fav-item-info-container > div > div:nth-child(2) > .c {
  font-size: 12px;
  color: var(--gray-900);
  margin: var(--spacing-xs) var(--spacing-alt-sm) var(--spacing-xs) var(--spacing-none);
  padding: 5px var(--spacing-sm);
  border-radius: 6px;
  background-color: var(--gray-400);
  font-weight: 500;
}

/* ad code */
div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .k,
div.dl > .fav-item-info-container > div > div:nth-child(2) > .k {
  font-size: 12px;
  color: var(--gray-900);
  margin: var(--spacing-xs) var(--spacing-alt-sm) var(--spacing-xs) var(--spacing-none);
  padding: 3px var(--spacing-alt-sm);
  white-space: nowrap;
  border-radius: 6px;
  background-color: var(--gray-400);
}

/*post label*/
div.dl > div > .fav-item-info-container > div > div:nth-child(2) > .lbl,
div.dl > .fav-item-info-container > div > div:nth-child(2) > .lbl {
  font-size: 12px;
  margin: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-none);
  padding: 5px var(--spacing-sm);
  border-radius: 6px;
  display: flex;
  align-items: center;
}

/*category line or attributes line*/
div.dl > div > a > div > .c,
div.dl > a > div > .c {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: var(--spacing-sm);
}

/*date line*/
div.dl > div > a > div > .d,
div.dl > a > div > .d {
  font-size: 12px;
  color: var(--gray-600);
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none);
}

/*pagination*/
div.dl > .dlf {
  padding: 30px;
  text-align: center;
  border-top: 1px solid var(--gray-300);
  display: block;
}

div.dl > div.dlf {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: none;
}

div.dl > div.dlf > a:last-child {
  border-radius: 8px;
  padding: 5px 9px;
}

/*header*/
div.dl > div.hdr {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  letter-spacing: -0.16px;
  color: var(--gray-900);
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  vertical-align: middle;
  white-space: nowrap;
}

.dlhdr {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
  padding: var(--spacing-lg) var(--spacing-none) var(--spacing-sm) var(--spacing-md);
  vertical-align: middle;
  white-space: nowrap;
  border-top: 1px solid var(--gray-300);
}

div.dl .star {
  display: block;
  align-self: center;
  width: 21px;
  height: 21px;
  margin-left: var(--spacing-alt-xs);
  background: url(/img/p.png) -39px -37px;
  background-size: 60px 60px;
}

/*session list*/
.dl.usess tr {
  /*margin-top: 16px;*/
  /*margin-bottom: 16px;*/
  display: flex;
}

.dl.usess td {
  padding: var(--spacing-md) var(--spacing-sm);
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.dl.usess td:nth-child(2) {
  flex: 1;
  max-width: none;
}

/* ------------ */
.dl .r > div {
  width: 160px;
  height: 120px;
  border-radius: 3px;
}

.dl td.h {
  border-top: 1px solid var(--gray-300);
  background-color: var(--gray-100) fef;
}

.dl td {
  font-size: 14px;
  overflow: hidden;
  max-width: 400px;
  margin: var(--spacing-none);
  padding: var(--spacing-lg);
  border-spacing: 10px;
  text-align: left;
  border-top: 1px solid var(--gray-300);
}

.dl td .remark {
  font-size: 12px;
  font-style: italic;
  color: var(--gray-700);
  clear: both;
  padding-top: var(--spacing-lg);
}

.dl td.r {
  width: 160px;
  text-align: center;
}

.dl td.r img {
  width: 160px;
  height: 120px;
  padding: var(--spacing-none);
  border-radius: 4px;
  background-color: var(--gray-100);
  transition: all 0.2s;
}

.dl td.r img:hover {
  -webkit-filter: brightness(110%);
}

.dl .lblc {
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-sm);
}

.dl .gl a.h {
  width: calc((100% - 64px) / 3);
  padding: var(--spacing-sm);
}

#tp .dl .gl a.h {
  width: calc((100% - 16px) / 3);
  padding: var(--spacing-none);
}

.ad-info-line-wrapper {
  display: flex;
}

.ad-info-line-wrapper > div.p {
  flex: 1 0 100%;
}

div.dl > a > div > div:nth-child(2) > .p {
  margin-bottom: var(--spacing-xs);
}

.ad-info-line-wrapper > span {
  flex: 0 0 auto;
}

.ad-info-line-wrapper > .p + .label.sel {
  margin-top: var(--spacing-xs);
}

/* commercial/etc label */
.lblc {
  color: var(--gray-900);
  background-color: var(--gray-400);
}

.dlrel {
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-lg) var(--spacing-none);
  border-radius: 0 0 8px 8px;
  background-color: var(--gray-100);
}

.dlrel > div {
  display: flex;
  flex-direction: column;
}

.dlrel > div > a {
  display: flex;
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-xxs);
  font-size: 14px;
  position: relative;
}

.dlrel > div > a > div {
  flex: 1;
  overflow-wrap: anywhere;
}

.dlrel > div > a .lbl {
  margin-top: var(--spacing-alt-xs);
  align-self: flex-start;
}

.dlrel > div > a > img {
  margin-right: var(--spacing-md);
  width: 140px;
  height: 105px;
  border-radius: 8px;
  object-fit: cover;
}

.dlrel > div > a > img.logo {
  width: 64px;
  height: 64px;
}

.dlrel > div > a > div > .p {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  margin-top: var(--spacing-xs);
}

.dlrel > div > a:nth-child(n+9) {
  display: none;
}

/* --- */
.trel {
  font-size: 14px;
  font-weight: bold;
  color: var(--gray-900);
  display: block;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
  text-align: left;
}

.anf {
  padding: var(--spacing-alt-sm) var(--spacing-xl);
}

.anf h1 {
  font-size: 22px;
  font-weight: 400;
  margin: var(--spacing-none);
}

.anf div {
  font-size: 16px;
  color: var(--gray-700);
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}

td .pv {
  font-size: 10px;
  border-bottom: 1px solid var(--gray-400);
}

.thumb {
  float: left;
  margin-right: var(--spacing-alt-xs);
}

.helpo .help {
  line-height: 1.6;
  width: 760px;
  padding: var(--spacing-xl) var(--spacing-6xl) var(--spacing-xl) var(--spacing-none);
  border-right: 1px solid var(--gray-400);
}

.postdlg > .tos > .help {
  line-height: 1.6;
  margin: 30px var(--spacing-xl) var(--spacing-none) var(--spacing-xl);
  padding: var(--spacing-xl) 30px;
  background-color: var(--gray-100);
}

.postdlg > .tos > .fbtn > a {
  min-width: 160px;
  margin: var(--spacing-xs) var(--spacing-xl);
  padding: var(--spacing-alt-sm) 18px;
  border-radius: 20px;
}

.postdlg > .tos > .help > .i {
  font-size: 16px;
  font-weight: bold;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

.help > div, .help p {
  font-size: 16px;
  color: var(--gray-900);
  line-height: 1.7;
  padding: var(--spacing-alt-xs) var(--spacing-sm) var(--spacing-sm) var(--spacing-none);
}

.help a {
  color: var(--brand-400);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: -0.24px;
  text-decoration: underline;
}

.help h1 {
  font-size: 26px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.2;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-md);
}

.help li {
  font-size: 16px;
  color: var(--gray-900);
  line-height: 1.6;
}

.help .warn {
  font-size: 16px;
  color: var(--gray-900);
  margin: var(--spacing-lg) var(--spacing-sm) var(--spacing-lg) var(--spacing-none);
  padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-lg) 46px;
  border-top: 1px solid var(--gray-400);
  border-bottom: 1px solid var(--gray-400);
  background: url(/img/helpwarn.png) no-repeat 0 center;
  background-size: 32px 32px;
}

.help .title {
  font-size: 20px;
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.5;
  padding: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-xs);
}

.help_idx {
  font-size: 15px;
  width: 300px;
  padding: var(--spacing-xl);
  text-align: left;
}

.help_idx .i {
  font-weight: 700;
  padding: var(--spacing-alt-xs) var(--spacing-none);
}

.help_idx a {
  font-size: 15px;
  font-weight: normal;
  color: var(--gray-600);
}

.help_idx .grp {
  font-size: 15px;
  color: var(--gray-900);
  padding: var(--spacing-xs) var(--spacing-none) var(--spacing-sm);
  text-align: left;
}

.help_idx .sep {
  font-size: 1px;
  width: 94%;
  margin-top: var(--spacing-xs);
  padding-bottom: var(--spacing-alt-sm);
  border-top: 1px solid var(--gray-400);
}

.help .num {
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-xs);
  padding: var(--spacing-xxs) var(--spacing-sm) var(--spacing-xxs) var(--spacing-none);
}

.help .num .l {
  float: left;
  padding: var(--spacing-none);
}

.help .num .r {
  margin-left: var(--spacing-xl);
  padding: var(--spacing-none);
}

.help .bl {
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-xs);
  padding: var(--spacing-xxs) var(--spacing-sm) var(--spacing-xxs) var(--spacing-none);
}

.help .bl .l {
  float: left;
  width: 35px;
  margin-left: var(--spacing-xl);
  padding: var(--spacing-none);
}

.help .bl .r {
  margin-left: 60px;
  padding: var(--spacing-none);
}

.helpo .c {
  padding: var(--spacing-xl);
  vertical-align: top;
}

.helpo .s {
  margin-bottom: var(--spacing-md);
}

.helpo .s .grp {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xs);
  text-align: left;
}

.help .icon {
  display: flex;
}

.help .icon img {
  display: block;
  width: 32px;
  height: 32px;
  margin: var(--spacing-sm) var(--spacing-xl) var(--spacing-none) var(--spacing-none);
}

.help .icon div {
  flex: 1;
  padding: var(--spacing-none);
}

.help .image {
  display: flex;
}

.help .image img {
  display: block;
  margin: var(--spacing-sm) var(--spacing-xl) var(--spacing-none) var(--spacing-none);
}

.help .image div {
  flex: 1;
  padding: var(--spacing-none);
}

.help .topSection .title {
  font-weight: bold;
  margin-top: var(--spacing-sm);
  font-size: 19px;
}

.help .section .title {
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-xxs) var(--spacing-alt-sm);
  font-weight: bold;
  font-size: 16px;
}

.help .childSection .section .title.bold {
  font-weight: bold;
  font-size: 14px;
}

.help .sectionDiv {
  margin-top: var(--spacing-alt-sm);
}

.help .childSection .section .title {
  margin-left: 30px;
  font-size: 13px;
  font-weight: normal;
}

.help .childSection .section .childSection .section .title {
  margin-left: 60px;
}

.help .childSection .sectionDiv {
  margin-top: var(--spacing-none);
}

.cld {
  float: left;
  width: 200px;
  margin: var(--spacing-none) var(--spacing-alt-xs);
}

.cl {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
}

.cl .bt {
  font-size: 12px;
  padding: var(--spacing-xxs);
}

.cl .bs {
  font-size: 11px;
  padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xl);
}

.cl .br a {
  font-size: 11px;
  display: block;
  padding: 3px var(--spacing-xs) 3px var(--spacing-xl);
}

/* premium user profile page */
#puheader > .head {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
}

#puheader > .head > .bnr img {
  width: 1140px;
  height: 228px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  object-fit: cover;
}

#puheader > .head > .i {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg);
}

/* If there is a banner, the info container should visually connect to it (no top border). */
#puheader > .head > .bnr + .i {
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

#puheader > .head > .i > .l {
  display: flex;
  align-items: center;
  flex-direction: row;
}

/*avatar*/
#puheader > .head > .i > .l > .lav img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

#puheader > .head > .i > .l > .n {
  margin-top: var(--spacing-alt-sm);
}

/* verificationbadge */
#puheader > .head > .i > .l > .n .badge-container {
  margin: var(--spacing-xs) var(--spacing-none);
}

/*logo*/
#puheader > .head > .i > .l > .l img {
  width: 144px;
  height: 144px;
  border-radius: 16px;
  box-shadow: 0 0 4px 4px rgba(200, 200, 200, 0.2);
}

#puheader > .head > .i > .l > .l, #puheader > .head > .i > .l > .lav {
  margin-right: var(--spacing-xl);
}

#puheader > .head > .i > .l > .n > div:first-child {
  font-size: 26px;
  overflow: hidden;
  max-width: 420px;
  height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* business plus badge */
#puheader > .head > .i > .l > .n > div:first-child img, #uinfo > div:first-child > .n div:last-child img {
  width: 20px;
  height: 20px;
  margin-left: var(--spacing-alt-xs);
}

/*subtitle*/
#puheader > .head > .i > .l > .n > .st {
  display: flex;
  margin-top: var(--spacing-xs);
}

#puheader > .head > .i > .l > .n > .st > div {
  font-size: 14px;
  color: var(--gray-700);
  margin-right: var(--spacing-lg);
}

/*reviews*/
#puheader > .head > .i > .l > .n > .r {
  margin-top: var(--spacing-lg);
  display: flex;
}

#puheader > .head > .i > .l > .n > .r a {
  display: flex;
  align-items: center;
}

#puheader > .head > .i > .l > .n > .r a .i {
  font-size: 14px;
  color: var(--gray-600);
  margin-left: var(--spacing-alt-xs);
  text-align: center;
}

#puheader > .head > .i > .l > .n > .r > .btn {
  font-size: 15px;
  color: var(--brand-400);
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-alt-md);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 16px;
  margin-left: var(--spacing-alt-xs);
}

#puheader > .head > .i > .l > .n > .r > .btn:hover {
  background-color: var(--gray-300);
}

/*star ratings widget*/
/*noinspection CssUnresolvedCustomProperty*/
.stars {
  font-size: var(--size);
  display: inline-block;
  align-items: center;
  --percent: calc(var(--rating) / 5 * 10%);
  --px: calc(var(--rating) / 10 * var(--size) + var(--ratingfloor) * (var(--size) * 0.1875));
  margin-right: calc(var(--size) * 0.1875 * -1);
  line-height: 1;
}

.stars::before {
  content: "★★★★★";
  letter-spacing: calc(var(--size) * 0.1875);
  background: linear-gradient(90deg, var(--info-400) var(--px), var(--gray-400) var(--px));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stars > span {
  font-size: 16px;
  color: var(--gray-500);
  margin: var(--spacing-none) var(--spacing-xxs);
  text-align: center;
}

#puheader > .head > .i > .r {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/*button panel*/
#puheader > .head > .i > .r > .bp {
  display: flex;
  justify-content: flex-end;
}

#puheader > .head > .i > .r > .bp a {
  font-size: 15px;
  color: var(--gray-700);
  display: inline-block;
  min-width: 90px;
  margin-left: var(--spacing-md);
  padding: 5px 30px;
  cursor: pointer;
  border-radius: 20px;
  background-color: var(--gray-100);
  transition: color 0.4s, background-color 0.4s;
  -webkit-transition: -webkit-filter 200ms linear;
}

#puheader > .head > .i > .r > .bp a:hover {
  -webkit-filter: brightness(108%);
}

#puheader > .head > .i > .r > .bp a:nth-child(1) {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

#puheader > .head > .i > .r > .bp a:nth-child(2) {
  color: var(--gray-100);
  background-color: var(--accent-malachite);
}

#puheader > .head > .i > .r > .bp a:nth-child(3) {
  color: var(--gray-900) !important;
  background-color: var(--info-400);
}

#puheader > .head > .i:first-child > .uinfo > .n {
  margin: var(--spacing-none);
}

#puheader > .head > .i:first-child > .uinfo {
  align-items: center;
}

#puheader > .head > .i:first-child > .rinfo {
  padding: var(--spacing-none);
}

#puheader > .about {
  font-size: 15px;
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
  padding: var(--spacing-md) var(--spacing-none);
  border-radius: 8px;
}

#puheader > .head > .i > .r > .h {
  font-size: 15px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  margin: var(--spacing-xl) var(--spacing-none);
}

/*address*/
#puheader > .head > .i > .r > .h .addr, #puheader > .head > .i > .r > .h > .hrs {
  flex: 1;
  margin: var(--spacing-xs) var(--spacing-none);
  padding-left: var(--spacing-2xl);
  white-space: nowrap;
  text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 16px 16px;
  display: flex;
  align-items: center;
  text-decoration: underline;
  text-decoration-thickness: 0.8px;
  text-underline-offset: 3px;
  color: var(--brand-400);
}

#puheader > .head > .i > .r > .h .addr {
  background-image: url(/img/redesign/icons/location.svg);
}

/*hours*/
#puheader > .head > .i > .r > .h > .hrs {
  background-image: url(/img/redesign/icons/clock.svg);
}

/*for BusinessHoursModal*/
.hrs_list_status {
  font-size: 18px;
  color: var(--gray-900);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl);
  text-align: center;
}

.hrs_list {
  font-size: 16px;
  color: var(--gray-900);
}

.hrs_list > div {
  display: flex;
  flex-direction: row;
  padding: var(--spacing-md) var(--spacing-alt-xs);
  border-top: 1px solid var(--gray-300);
}

.hrs_list > div > div:nth-child(1) {
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
}

.hrs_list > div > div:nth-child(2), .hrs_list > div > div:nth-child(4) {
  width: 44px;
  text-align: right;
}

.hrs_list > div > div:nth-child(3) {
  width: 20px;
  text-align: center;
}

#puheader > .head > .i > .r > .h .addr span, #puheader > .head > .i > .r > .h .hrs span {
  font-size: 15px;
  color: var(--brand-400);
  display: inline-block;
  overflow: hidden;
  max-width: 320px;
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: all 0.2s;
}

#puheader > .head > .i > .r > .h .addr:hover span, #puheader > .head > .i > .r > .h .hrs:hover span {
  color: var(--brand-400);
  cursor: pointer;
}

#puheader > .head > .i > .r > .h .addr, #puheader > .head > .i > .r > .h .hrs {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
  cursor: pointer;
}

#puheader > .news {
  font-size: 14px;
  color: var(--gray-900);
  margin: var(--spacing-2xl) var(--spacing-none);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 8px;
  background-color: var(--info-100);
}

/* -------- */
#uinfo {
  border-top: 1px solid var(--gray-300);
  padding: var(--spacing-2xl) var(--spacing-none) 18px var(--spacing-none);
  text-align: center;
  background-color: var(--gray-100);
}

#uinfo .uiwrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}

#uinfo .uiwrapper > .n {
  align-self: flex-start;
}

/*simple  / single version for pending ads*/
#pmenu.s #uinfo {
  border: none;
  border-radius: 8px;
}

#dialog #uinfo {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
  border: none;
}

#menul > #uinfo {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-none);
  text-align: center;
  border: none;
  border-radius: 8px;
  background-color: var(--gray-100);
}

#uinfo .ctc {
  display: flex;
  gap: var(--spacing-sm);
  overflow: hidden;
  margin-top: var(--spacing-xl);
}

#uinfo > div:first-of-type {
  margin-bottom: var(--spacing-2xl);
}

#uinfo .hiddenctc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-alt-xs);
}

#uinfo .hiddenctc > span,
#uinfo .hiddenctc > a {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-align: left;
}

#uinfo .hiddenctc > a {
  color: var(--brand-400);
  cursor: pointer;
}

#uinfo .hiddenctc > a:hover {
  color: var(--brand-300);
}

#uinfo div a.n .username {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xxs);
}

#uinfo .username > a.n > .nmsp {
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* avatar company */
.av_comp {
  width: 54px;
  height: 54px;
  border-radius: 8px;
}

/* avatar user */
.av_user {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

#uinfo > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
  position: relative;
}

#uinfo > div:first-child > .n {
  display: flex;
  gap: var(--spacing-lg);
  transition: all 0.2s;
}

#uinfo > div:first-child > .r {
  position: absolute;
  left: 80px;
  top: 30px;
}

#uinfo > div:first-child > .n:hover {
  -webkit-filter: brightness(110%);
}

#uinfo > div:first-child > .n div:last-child {
  font-size: 18px;
  font-weight: 200;
  color: var(--gray-900);
}

#uinfo > div:first-child > .n:hover div:last-child,
#puheader > .head > .i > .l > .n > .r a:hover .i {
  color: var(--brand-400);
}

#uinfo > div:first-child > .n > .r {
  position: absolute;
  left: 80px;
}

#uinfo > div:first-child > .n > .r .btn span {
  font-size: 11px;
}

#uinfo > div:first-child > .n > .av_user + .username + .r {
  left: 70px;
  top: 10px;
}

/* larger avatar company */
#uinfo > div:first-child .av_comp {
  width: 64px;
  height: 64px;
  box-shadow: 0 0 4px 4px rgba(200, 200, 200, 0.2);
}

#uinfo .r .stars.h {
  line-height: 1;
}

#uinfo .r a:hover .i {
  color: var(--brand-400);
}

#uinfo .r .i {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: var(--spacing-xxs);
  transition: color 0.2s;
}

#uinfo div .btn {
  text-align: left;
}

#uinfo div .btn span {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  border-radius: 8px;
  background-color: var(--info-400);
  transition: background-color 0.2s;
}

#uinfo div .btn.write-review span {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--brand-100);
  color: var(--brand-400);
  font-size: 15px;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}

#uinfo div .btn.write-review span:hover {
  background-color: var(--brand-200);
}

.rev_sugg #uinfo div .btn {
  display: flex;
}

.rev_sugg #uinfo div .btn span {
  border-radius: var(--radius-sm);
  background: var(--brand-100);
  text-align: center;
  flex: 1;
  color: var(--brand-400);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

/*#menul > #uinfo .r + .additional-info {*/
/*	margin-top: 12px;*/
/*}*/
#uinfo div .btn span:hover {
  text-decoration: none;
  background-color: var(--accent-amber);
}

.rev_sugg #uinfo div .btn span:hover {
  background: var(--brand-200);
}

.rev_sugg #uinfo > div:first-child {
  margin: var(--spacing-none);
  justify-content: space-between;
}

.rev_sugg #uinfo .uiwrapper > .n {
  border-radius: 100%;
  overflow: hidden;
  min-width: max-content;
}

.rev_sugg #uinfo .uiwrapper {
  justify-content: start;
}

.rev_sugg #uinfo .username > a.n > .nmsp {
  overflow: hidden;
  color: var(--gray-900);
  text-overflow: ellipsis;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-sm);
}

#uinfo > div:first-child > div.avatar-name {
  display: flex;
  gap: var(--spacing-lg);
  align-items: start;
}

#uinfo > div:first-child > div.additional-info {
  display: flex;
  flex-direction: column;
  align-items: start;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--gray-900);
}

#uinfo > div:first-child > div.avatar-name > div > .r {
  display: flex;
  flex-direction: column;
}

#uinfo > div:first-child > div.avatar-name > a.n, #uinfo > div:first-child > div.avatar-name > div > a.n {
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.4px;
  text-align: left;
}

#uinfo > div:first-child > div.avatar-name > a.n > div {
  margin-top: var(--spacing-lg);
}

#uinfo > div:first-child > div > div {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-align: left;
}

#uinfo .username .n {
  display: flex;
}

#uinfo > div:first-child > div > div .no-reviews {
  color: var(--gray-400);
}

#uinfo .no-reviews, #uinfo .reviews {
  display: flex;
  margin-top: var(--spacing-sm);
  gap: var(--spacing-xs);
  color: var(--gray-600);
}

#uinfo .reviews {
  color: var(--gray-900);
}

#uinfo > div:first-child > div > div .no-reviews:hover,
#uinfo #uinfo > div:first-child > div > div .reviews:hover {
  color: var(--brand-400);
}

#uinfo > div:first-child > div > div .no-reviews:hover > img,
#uinfo #uinfo > div:first-child > div > div .reviews:hover > img {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}

#uinfo .user-verified-badge-cont {
  margin-top: var(--spacing-lg);
}

#uinfo > div:first-child > .n:has(.av_user) + .r {
  left: 68px;
  top: 26px;
}

#uinfo > div:first-child .c {
  font-size: 13px;
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xs) var(--spacing-none);
}

#uinfo > div:first-child .since, #uinfo > div:first-child .desc {
  font-weight: 400;
}

#uinfo > div:first-child .since {
  opacity: 0.5;
}

#uinfo > div:first-child .desc {
  font-size: 14px;
  margin-top: var(--spacing-md);
}

#uinfo .ctc {
  font-size: 14px;
}

#uinfo .email, #uinfo .phone {
  flex: 1;
  display: flex;
}

#uinfo .phone a,
#uinfo .email a {
  color: var(--gray-100);
  display: inline-block;
  padding: var(--spacing-alt-xs) var(--spacing-md);
  border-radius: 8px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
}

#uinfo .phone a {
  background-color: var(--accent-malachite);
}

#uinfo .phone a:hover {
  color: var(--gray-100);
  text-decoration: none;
  background-color: var(--success-400);
}

#uinfo .email a {
  background-color: var(--brand-400);
}

#uinfo .email a:hover {
  color: var(--gray-100);
  text-decoration: none;
  background-color: var(--brand-300);
}

#uinfo .rrate {
  font-size: 14px;
  color: var(--gray-600);
  margin-top: var(--spacing-md);
  text-align: left;
}

.srate {
  margin-bottom: 18px;
  text-align: center;
}

.srate > .i {
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: var(--spacing-xxs);
}

.srate > .s {
  transition: transform 0.1s;
}

.srate > .s > span {
  width: 32px;
  height: 32px;
  /*margin: 0 2px;*/
  cursor: pointer;
  text-align: center;
}

.srate > .s > span > img {
  width: 32px;
  height: 32px;
}

.srate > .s > span.on {
  color: var(--info-400);
}

.srate > .s.anim {
  transform: scale(1.1);
}

/* review suggestions */
.rev_sugg {
  display: flex;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  padding: var(--spacing-none);
  background-color: var(--gray-100);
  flex-direction: unset !important;
  justify-content: flex-start;
  margin-bottom: var(--spacing-xl);
}

.rev_sugg > div {
  max-width: 250px;
  width: auto;
}

.rev_sugg > div#uinfo {
  padding: var(--spacing-lg);
  display: flex;
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  background: var(--gray-100);
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
  box-sizing: border-box;
}

.d-none {
  display: none !important;
}

.show-more-sugg {
  cursor: pointer;
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-6xl);
}

.show-more-sugg:hover {
  color: var(--brand-400);
}

#rev_list {
  padding-top: var(--spacing-xl);
  border: 1px solid var(--gray-300);
  border-left: none;
  border-right: none;
}

.rev_sugg .user-verified-badge .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rev_sugg .user-verified-badge-cont, .rev_sugg .user-verified-badge {
  max-width: -webkit-fill-available;
}

.rev_sugg div.uiwrapper img {
  width: 54px !important;
  height: 54px !important;
}

.rev_sugg #uinfo .no-reviews img, .rev_sugg #uinfo .reviews img {
  width: 16px !important;
  height: 16px !important;
}

.rev_sugg .av_comp {
  border-radius: 8px;
}

.rev_sugg .n div:last-child {
  font-size: 17px !important;
  max-width: 190px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rev_sugg #uinfo .r {
  margin-top: var(--spacing-none);
}

img[src=""] {
  content: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}

.vit > .PostPhotoViewComponent {
  margin-bottom: var(--spacing-2xl);
}

.vit .thumbbar {
  display: flex;
  flex-wrap: wrap;
  margin-top: -4px;
}

.vit .thumbbar div {
  padding: 3px;
  cursor: pointer;
}

.vit .thumbbar div img {
  width: 68px;
  height: 51px;
  border-radius: 4px;
  object-fit: cover;
}

.vit .thumbbar div.sel img {
  outline: 2px solid var(--brand-400);
}

.vi .gt, .vi .body .t {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none);
}

.vi .attr {
  box-sizing: border-box;
  padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-md);
  display: grid;
  justify-content: space-between;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  column-gap: 40px;
}

.vi .attr .c {
  display: flex;
  align-items: center;
  margin: var(--spacing-none);
  padding: 7px var(--spacing-none);
  border-bottom: 1px dotted var(--gray-400);
  font-size: 15px;
}

.vi .attr .c .t {
  flex: 1;
  margin-right: var(--spacing-xl);
  color: var(--gray-700);
}

.vi .attr .c .i {
  text-align: right;
  font-weight: 800;
  color: var(--gray-900);
}

.vi .attr.g {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xxs) var(--spacing-none);
}

.vi .attr.g .c {
  border: none;
  padding: var(--spacing-alt-xs) var(--spacing-none);
}

.vi .attr.g .c .t {
  flex: 0;
  min-width: 180px;
  max-width: 180px;
  color: var(--gray-600);
}

.vi .attr.g .c .i {
  font-weight: normal;
  color: var(--gray-900);
  text-align: left;
}

/* check box list, used for days of the week business hours */
.bh_list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: var(--spacing-alt-xs) var(--spacing-none);
}

.bh_list_from_to {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.bh_list_from_to .me > img {
  z-index: 1;
}

.bh_list .ComboSelectorComponent {
  width: 120px !important;
}

.bh_list .ComboSelectorComponent input[type=text] {
  height: 32px;
  width: 85px;
}

.bh_list > div {
  display: flex;
  align-items: center;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
}

.bh_list > div > label {
  width: 160px;
}

.bh_list .bh_list_from_to .DropdownComponent {
  width: 110px;
}

.bh_list .bh_list_from_to .DropdownComponent .me {
  padding-left: var(--spacing-lg);
}

/* single check box */
label.cbox {
  display: flex;
  margin: var(--spacing-none);
  cursor: pointer;
}

label.cbox > div:first-child {
  display: flex;
  align-items: center;
  width: 22px;
  height: 20px;
  margin-top: 1px;
  margin-right: var(--spacing-alt-xs);
}

label.cbox > div:last-child {
  flex: 1;
  user-select: none;
}

label.cbox.disabled > div:last-child {
  color: var(--gray-500);
}

label.cbox > div > input {
  position: absolute;
  cursor: pointer;
}

label.cbox > div:last-child > span a {
  border-bottom: 1px dashed var(--gray-500);
}

label.cbox .i {
  font-size: 13px;
  color: var(--gray-700);
}

/* multicheck form element */
.femc {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.femc label {
  margin: var(--spacing-xxs) 18px var(--spacing-xxs) var(--spacing-none);
  flex-wrap: nowrap;
}

/* ------------- */
/* account type selection */
.eacctype {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.eacctype > div:first-child {
  font-size: 16px;
  margin-right: var(--spacing-alt-sm);
  width: 260px;
}

.eacctype .hlp_icon {
  margin-left: var(--spacing-alt-sm);
}

.eacctype > div:first-child div:nth-child(2) {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 3px;
}

/* account price panel */
.accpay {
  display: none;
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none) var(--spacing-lg);
}

.padded {
  margin: var(--spacing-xl) var(--spacing-none);
  padding: 30px var(--spacing-none);
}

.padded .l {
  float: left;
  width: 90px;
}

.padded .l img {
  width: 70px;
  height: 70px;
}

.padded .r .h {
  font-size: 16px;
  margin: var(--spacing-none) var(--spacing-none) 30px;
}

.padded .r .h .hlp_icon {
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-lg);
}

.padded .ad {
  display: flex;
  margin: 30px var(--spacing-none);
}

.padded .ad .i {
  width: 160px;
  height: 120px;
  margin-right: var(--spacing-xl);
}

.padded .ad .i img {
  width: 160px;
  height: 120px;
  border-radius: 4px;
}

.padded .ad .t {
  flex: 1;
  margin-top: -4px;
}

.padded .ad .t .x {
  font-size: 16px;
  color: var(--gray-900);
  text-decoration: none;
}

.padded .ad .t .x:hover {
  color: var(--brand-400);
}

.padded .srv {
  margin-top: var(--spacing-lg);
}

.padded .srv .h {
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: var(--spacing-lg);
}

.padded .srv .i {
  float: left;
  width: 80px;
  height: auto;
  margin: var(--spacing-none);
}

.padded .srv .i img {
  display: block;
  width: 32px;
  height: 32px;
  margin: var(--spacing-none) auto var(--spacing-xs);
}

.padded .btn {
  padding: var(--spacing-alt-sm) var(--spacing-none);
}

.padded .btn a {
  margin-right: var(--spacing-alt-md);
}

.dl .pbl {
  width: auto;
  height: auto;
  margin-top: var(--spacing-alt-md);
  padding: var(--spacing-none);
  text-align: left;
}

.dl .pbl a, .dl .pbl .g {
  font-size: 11px;
  float: left;
  margin-top: var(--spacing-md);
  margin-right: var(--spacing-lg);
  text-align: center;
  transition-duration: 0.2s;
  transition-property: color;
}

.dl .pbl a div, .dl .pbl .g div {
  zoom: 0.75;
  width: 32px;
  height: 32px;
  margin: auto;
  background: url(/img/psp.png) no-repeat;
  background-size: 200px 108px;
}

.dl .pbl .g {
  opacity: 0.5;
}

.dl .pbl .x {
  font-size: 11px;
  color: var(--gray-900);
  display: block;
}

#pmenu .pblock {
  margin: var(--spacing-alt-xs) auto;
  padding: var(--spacing-lg) var(--spacing-none);
  text-align: center;
  border-radius: 0;
  background-color: var(--gray-100);
  display: flex;
  width: 100%;
  justify-content: center;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
}

#pmenu .pblock a, .padded .srv .i a {
  font-size: 12px;
  display: inline-block;
  width: 80px;
  text-align: center;
  transition: color 0.2s;
}

#pmenu .pblock a div, #pmenu .pblock .g div {
  width: 24px;
  height: 24px;
  margin: auto;
  padding-bottom: var(--spacing-alt-xs);
  background-size: 32px;
}

#pmenu .pblock a.top div,
.dl .pbl a.top div {
  background: url(/img/redesign/icons/ad-actions/top.svg) no-repeat;
  background-size: 24px;
}

#pmenu .pblock a.home div,
.dl .pbl a.home div,
.bdash .l .pblock a div {
  background: url(/img/redesign/icons/ad-actions/homepage.svg) no-repeat;
  background-size: 24px;
}

#pmenu .pblock a.label div,
.dl .pbl a.label div {
  background: url(/img/redesign/icons/ad-actions/label.svg) no-repeat;
  background-size: 24px;
}

#pmenu .pblock .g:first-child div,
#pmenu .pblock .g:nth-child(2) div,
#pmenu .pblock .g:nth-child(3) div {
  background: url(/img/redesign/icons/top-green.svg) no-repeat;
  background-size: 24px;
}

#pmenu .pblock .g:nth-child(2) div,
.bdash .pblock .g:nth-child(1) div {
  background: url(/img/redesign/icons/homepage-green.svg) no-repeat;
  background-size: 24px;
}

#pmenu .pblock .g:nth-child(3) div {
  background: url(/img/redesign/icons/label-green.svg) no-repeat;
  background-size: 24px;
}

.pblock a:hover, .dl .pbl a:hover, .padded .srv .i a:hover {
  color: var(--brand-400);
  text-decoration: none;
}

.bdash .pblock a .hmpg,
.bdash .pblock a.g .hmpg {
  height: 24px;
  padding-bottom: var(--spacing-alt-xs);
  background-position: center;
}

#pmenu .pblock a {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  background-color: var(--gray-300);
  border-radius: 8px;
  padding: var(--spacing-alt-sm) var(--spacing-sm);
  color: var(--gray-900);
  flex: 1;
}

.bdash .pblock .g,
#pmenu .pblock .g {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  display: inline-block;
  width: 80px;
  text-align: center;
  background-color: var(--success-100);
  border-radius: 8px;
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  color: var(--gray-900);
  flex: 1;
}

#pmenu .pblock .g {
  background-color: var(--success-100);
}

.bdash .bdash-not-found,
.biz .bdash-not-found {
  width: 100%;
  position: relative;
}

.bdash .bdash-not-found > img,
.biz .bdash-not-found > img {
  width: 100%;
  height: auto;
}

.bdash .bdash-not-found .premium-prompt-box-wrapper,
.biz .bdash-not-found .premium-prompt-box-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
}

#pmenu .pblock .x {
  color: var(--gray-900);
}

#star, #sstar {
  position: absolute;
  cursor: pointer;
  z-index: 49;
}

#contentr #star {
  width: 28px;
  height: 28px;
}

#contentr #star div, a.star {
  display: block;
  width: 28px;
  height: 28px;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.dl a.star {
  float: right;
}

#contentr #star.gl div {
  background: url(/img/redesign/icons/heart.svg);
  width: 28px;
  height: 28px;
  background-size: 20px 20px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.1s;
}

#contentr #star.gl div.on {
  background: url(/img/redesign/icons/heart-filled.svg);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.1s;
}

#contentr #star div.on, a.star {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}

#contentr #star .off {
  background-position: center;
  background-size: 20px;
}

#main > #sstar {
  position: absolute;
  padding: var(--spacing-none);
  width: 32px;
  height: 32px;
  z-index: 1;
  top: 50px;
  left: -50px;
}

#main > #sstar.pws {
  top: initial;
  left: initial;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#main > #sstar div {
  width: 30px;
  height: 30px;
  background-size: 30px;
  position: relative;
}

#main > #sstar div.off::after,
#main > #sstar div.on::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  width: 30px;
  height: 30px;
  background-size: 30px;
  background-image: url(/img/redesign/icons/favorite-heart-hover.svg);
  background-repeat: no-repeat;
  transition: opacity 0.1s, transform 0.1s;
}

#main > #sstar div.off:hover::after {
  opacity: 1;
}

@media screen and (max-width: 1130px) {
  #main > #sstar.sstar__user-profile {
    top: 5px;
    left: auto;
    right: 0;
    display: block;
  }
}
#star .on, #sstar .on {
  background: url(/img/redesign/icons/favorite-heart-filled.svg);
  transition: transform 0.1s;
}

#star .off, #sstar .off {
  background: url(/img/redesign/icons/favorite-heart.svg);
  transition: transform 0.1s;
}

#star .on.anim,
#star .off.anim,
#sstar .on.anim,
#sstar .off.anim {
  transform: scale(1.4);
}

.dl .pblock .i img {
  display: inline;
  margin: var(--spacing-none);
  vertical-align: middle;
  border: none;
}

.pwdv .vih,
.pwmb .vih {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-alt-xs);
  margin-bottom: var(--spacing-2xl);
}

.vih h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.02em;
  text-align: left;
  margin-bottom: var(--spacing-none);
  max-width: calc(100% - 44px);
}

.vih .priceNegotiationSection {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  height: 28px;
}

.vih .priceNegotiationSection > div {
  height: 100%;
  display: flex;
  align-items: center;
}

.vih .priceNegotiationSection span {
  color: var(--brand-400);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-lg);
  letter-spacing: -0.14px;
  cursor: pointer;
}

.vih .priceNegotiationSection span:hover {
  color: var(--brand-300);
}

.vih .priceNegotiationSection.hidden {
  display: none;
}

.pwmb {
  display: none;
}

.pwdv {
  display: block;
}

#abar {
  color: var(--gray-900);
  display: flex;
  flex-direction: column;
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-2xl);
}

.pwdv .vih #abar {
  margin: var(--spacing-none);
}

#pcontact #abar {
  margin-top: var(--spacing-none);
}

#abar > .l {
  white-space: nowrap;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: var(--spacing-lg);
}

#pcontent .vi .l span,
#abar > .l > span,
#pcontent .vi .l > .lbl,
#abar > .l > .lbl {
  font-size: 13px;
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-md) var(--spacing-none) var(--spacing-none);
  padding: 5px var(--spacing-sm);
  border-radius: 8px;
}

#abar > .l::-webkit-scrollbar {
  display: none;
}

.preview_box .l .vi .vih #abar .loc,
#pcontent .vi > .vih .loc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--brand-400);
  padding: var(--spacing-md);
  background-color: var(--gray-300);
  border-radius: 8px;
}

.preview_box .l .vi .vih #abar .loc a,
.preview_box .l .vi .vih #abar .loc span,
#pcontent .vi > .vih .loc a,
#pcontent .vi > .vih .loc span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding-left: var(--spacing-alt-xs);
  color: var(--gray-900);
  display: inline-block;
  text-decoration: none;
}

#pcontent .vi > .vih .loc a,
.preview_box .l .vi .vih #abar .loc a,
.preview_box .l .vi .vih #abar .loc span {
  color: var(--brand-400);
  text-decoration: none;
}

#pcontent .vi > .vih .loc a,
.preview_box .l .vi .vih #abar .loc span {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-3xl);
  background-image: url(/img/redesign/icons/post-location.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 0 50%;
  width: calc(100% - 28px);
}

.vih #abar .clabel,
#pcontent .vi .clabel {
  color: var(--gray-900);
  background-color: var(--gray-400);
}

div.dl > a > div > div:nth-child(2) .ver, div.dl > a > div .at {
  color: var(--gray-900);
}

#main > .share {
  position: absolute;
  width: 28px;
  margin: 120px var(--spacing-none) var(--spacing-none) -50px;
}

#main > .share.ns {
  margin-top: var(--spacing-xl);
}

.share .c {
  display: inline-block;
}

.share .c a {
  font-size: 17px;
  color: var(--gray-500);
  line-height: 22px;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: var(--spacing-none) 3px;
  text-align: center;
  border-radius: 4px;
  background-image: url(/img/psp.png);
  background-size: 200px 108px;
  -webkit-transition: -webkit-filter 200ms linear;
}

.share .c a:hover {
  text-decoration: none;
  -webkit-filter: brightness(120%);
}

.share .c a:nth-child(1) {
  background-color: var(--brand-400);
}

.share .c a:nth-child(2) {
  background-color: var(--brand-400);
  background-position: -22px 0;
}

.share .c a:nth-child(3) {
  background-color: var(--delivery-400);
  background-position: -44px 0;
}

.share .c a:nth-child(4) {
  background-color: var(--success-400);
  background-position: -66px 0;
}

.vi .l {
  margin-bottom: var(--spacing-2xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.vi .lbl {
  padding-right: var(--spacing-alt-sm);
  white-space: nowrap;
  margin-right: var(--spacing-md);
}

.vi .body {
  font-size: 16px;
  line-height: 28px;
  color: var(--gray-900);
  margin: var(--spacing-md) var(--spacing-none);
  word-wrap: break-word;
}

.vi .body .t {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none);
}

.vi .body .d {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.vi .trans {
  font-size: 12px;
  font-style: italic;
  color: var(--gray-600);
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}

/*car models compat table*/
.vi .compat {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl);
  padding: var(--spacing-none);
}

.vi .compat > .t {
  font-size: 20px;
  font-weight: bold;
  color: var(--gray-900);
  margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-xs) var(--spacing-none);
}

.vi .compat > .c > div {
  font-size: 15px;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  padding: var(--spacing-alt-sm) var(--spacing-none);
  border-bottom: 1px dotted var(--gray-400);
}

.vi .compat > .c > div:last-child {
  border-bottom: none;
}

.vi .compat > .c > div > div {
  width: 25%;
}

.vi .compat > .c > div > div:nth-child(3) {
  flex: 1;
  width: 40%;
}

/*po*/
.vi .poi {
  color: var(--gray-800);
  max-width: 600px;
  margin: var(--spacing-none);
}

.vi .poi td {
  font-size: 15px;
  padding: var(--spacing-alt-xs) var(--spacing-none);
  vertical-align: middle;
}

.vi .poi td:first-child {
  padding-right: var(--spacing-6xl);
}

.vi .poi td:nth-child(2) {
  text-align: right;
  width: 70px;
  padding-right: var(--spacing-md);
  font-weight: bold;
  white-space: nowrap;
}

.vi .poi td:last-child {
  padding-left: var(--spacing-xl);
  text-align: left;
  background: url(/img/walk.png) no-repeat 0 center;
  background-size: 18px 18px;
  color: var(--gray-900);
  font-size: 14px;
  white-space: nowrap;
}

/* price history */
.vi .price_history table {
  max-width: 600px;
  margin: var(--spacing-none);
}

.vi .price_history tr:nth-child(n+8) {
  display: none;
}

.vi .price_history tr td {
  font-size: 15px;
  padding: 5px var(--spacing-xl) 5px var(--spacing-none);
  vertical-align: middle;
  color: var(--gray-700);
}

.vi .price_history tr td:nth-child(2), .vi .price_history tr td:last-child {
  text-align: right;
}

.vi .price_history tr td span.up {
  color: red;
  font-size: 15px;
}

.vi .price_history tr td span.down {
  color: green;
  font-size: 15px;
}

.vi .price_history tr td:nth-child(3) span,
.vi .price_history tr td:nth-child(2) {
  white-space: nowrap;
}

.vi .price_history .sm {
  margin-top: 4px;
  font-size: 15px;
  color: var(--brand-500);
  cursor: pointer;
}

.vi .price_history .sm:hover {
  color: var(--brand-300);
}

.vi .footer {
  margin: var(--spacing-xl) var(--spacing-none);
}

.vi .footer span {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-600);
  margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-alt-sm) var(--spacing-none);
}

button.start-over {
  cursor: pointer;
  transition: background-color 0.3s ease-out;
  background-color: var(--brand-100);
  color: var(--brand-400);
}

button.start-over:hover {
  background-color: var(--brand-200);
}

.code_verify input[type=text].code {
  padding: 13px var(--spacing-md);
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  border-radius: var(--radius-sm);
  width: 168px;
}

.code_verify .err {
  margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-xxs);
}

.code_verify .c > .e {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.pvp .code_verify input[type=text].code {
  margin: var(--spacing-none);
}

.code_verify input[type=button]#submit_dlg_button {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  border-radius: var(--radius-sm);
  padding-bottom: var(--spacing-md);
  padding-top: var(--spacing-md);
  background-color: var(--brand-400);
  align-self: flex-start;
}

.plogin .btns a.blink {
  margin-top: var(--spacing-4xl);
  font-weight: 500;
  padding-top: var(--spacing-none);
  font-size: var(--font-size-sm);
  font-style: normal;
}

.code_verify .existing {
  font-size: 18px;
  color: var(--gray-700);
  display: inline-block;
  margin-right: 18px;
}

.code-verify-container .code_verify {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.code-verify-container .code_verify > .e {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  width: 170px;
}

input[type=text], input[type=password], input[type=tel], input[type=email], select, textarea {
  font-family: "List Custom", "Open Sans", "lucida grande", tahoma, arial, sans-serif;
  box-sizing: border-box;
  outline: none;
}

input[type=datetime-local],
input[type=text]:not(.InputComponent),
input[type=password]:not(.InputComponent),
input[type=tel] :not(.InputComponent) :not(#_idphone_number) :not(#_idyour_number) :not(.ImIDModal #_idphone),
input[type=email]:not(.InputComponent),
select,
textarea:not(.TextAreaComponent) {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: var(--spacing-alt-sm) var(--spacing-md);
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  height: 40px;
  color: var(--gray-900);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.change-password-email,
.change-password-cur-pass,
.change-password-new,
.change-password-confirm {
  /*margin-bottom:var(--spacing-xl);*/
}

.change-password-cur-pass,
.change-password-new,
.change-password-confirm,
.change-password-email {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--gray-300);
  color: var(--gray-900);
  height: 56px;
  transition: all 0.2s;
}

.change-password-cur-pass::placeholder,
.change-password-new::placeholder,
.change-password-confirm::placeholder,
.change-password-email::placeholder {
  color: var(--gray-500);
}

.change-password-cur-pass:focus,
.change-password-new:focus,
.change-password-confirm:focus,
.change-password-email:focus {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
  outline: none;
}

#_idyour_password {
  margin: var(--spacing-md) var(--spacing-none);
}

#_idyour_password.InputComponent {
  margin-bottom: 0;
}

.InputComponent.felement_err + .err,
.InputComponent.felement_err:focus + .err {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  display: block;
  margin-top: var(--spacing-md);
  color: var(--error-400);
  text-align: left;
}

input.phone[type=text], input.phone[type=tel] {
  padding-left: 26px;
  background: url(/img/phone.png) no-repeat 4px 10px;
  background-size: 16px 16px;
}

input.viber,
input.whatsapp {
  max-height: 40px;
}

input.landline {
  padding-left: 25px;
  background: url(/img/landline.png) no-repeat 4px center !important;
  background-size: 18px 18px !important;
}

.pageicn {
  font-size: 14px;
  padding: 30px var(--spacing-none);
}

.pageicn .l {
  float: left;
}

.pageicn .l img {
  width: 80px;
  height: 80px;
}

.pageicn .r {
  font-size: 14px;
  color: var(--gray-900);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.pageicn .r .prgr {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

.pageicn .r .c:not(.CountryPhoneNumberFormElement) {
  margin: var(--spacing-none);
  display: flex;
  gap: var(--spacing-sm);
}

.pageicn .r > .c:not(.CountryPhoneNumberFormElement) {
  margin-top: var(--spacing-sm);
}

.pageicn .r .code_verify {
  margin-top: var(--spacing-sm);
  gap: var(--spacing-md);
  width: min-content;
}

.pageicn .r .c input[type=submit] {
  height: 48px;
  background-color: var(--brand-400);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  border-radius: var(--radius-sm);
}

.pageicn a.bblink {
  background-color: var(--brand-400);
  padding: var(--spacing-md) var(--spacing-2xl);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  border-radius: var(--radius-alt-sm);
}

.pageicn .r .c .phone {
  max-width: max-content;
  display: flex;
}

.dlg_toggle {
  font-size: 15px;
  margin: var(--spacing-none) var(--spacing-none) 30px var(--spacing-none);
  text-align: center;
}

.dlg_toggle > div {
  color: var(--gray-900);
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-lg);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: all 0.2s;
}

.dlg_toggle > div:hover {
  color: var(--brand-400);
  cursor: pointer;
}

.dlg_toggle > div.s {
  color: var(--brand-400);
  cursor: default;
  border-bottom: 1px solid var(--brand-400);
}

.dlg_toggle label {
  margin-right: var(--spacing-xl);
}

.dlg_toggle label:last-child {
  margin-right: var(--spacing-none);
}

.valid {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background: no-repeat center;
  background-size: 20px 20px;
}

.pcontact {
  font-size: 16px;
  display: flex;
  flex-direction: column;
}

.pcontact.real-contact:not(:first-child) {
  padding-top: var(--spacing-4xl);
}

.pcontact:last-child {
  border: none;
}

.pcontact.paddress .infbl, .pcontact.payment .infbl {
  background: none;
  padding: var(--spacing-none);
  gap: var(--spacing-2xl);
}

.pcontact.payment .notfound {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-700) !important;
}

.pcontact.pbankaccount {
  gap: var(--spacing-lg);
}

.pcontact.pbankaccount .l {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--gray-900);
  letter-spacing: -0.16px;
  padding: var(--spacing-none);
}

.pcontact.pbankaccount .r {
  margin: var(--spacing-none);
}

.pcontact.pbankaccount .r .i .paymentMethodCell {
  margin-left: var(--spacing-none);
}

.pcontact.pbankaccount .r .i .paymentMethodCell > div > span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-900);
}

.pcontact.pbankaccount .r .i .paymentMethodCell > div > span:last-child {
  color: var(--gray-700);
}

.pcontact.paddress {
  gap: var(--spacing-2xl);
}

.pcontact .r .i div a, .pcontact .r .i div a img {
  width: 20px;
  height: 20px;
}

.pcontact .r .i.landline div a,
.pcontact .r .i.landline div a img {
  width: 16px;
  height: 16px;
}

.pcontact.pbankaccount .frow .pcn {
  margin: var(--spacing-none);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-700);
}

.pcontact .l, .resume .fsec > .t {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--gray-900);
  flex: 1;
  padding: var(--spacing-none) var(--spacing-md) var(--spacing-alt-xs) var(--spacing-none);
}

.pcontact .addAddressLineWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.pcontact .r {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: var(--spacing-md) var(--spacing-none);
}

.pcontact .r .i {
  color: var(--gray-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pcontact.paddress .r .i {
  align-items: flex-start;
}

.pcontact .r > .add {
  position: relative;
  padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}

.pcontact .r > .add a {
  padding: var(--spacing-sm) var(--spacing-lg);
}

.pcontact .r > .email {
  /*background-image: url(/img/email.png);*/
}

.pcontact .r > .phone {
  /*background-image: url(/img/phone.png);*/
}

.pcontact .r > .landline {
  /*background-image: url(/img/landline.png);*/
}

.pcontact .r > .viber {
  /*background-image: url(/img/viber.png);*/
}

.pcontact .r > .whatsapp {
  /*background-image: url(/img/whatsapp.png);*/
}

.pcontact .r .i div:first-child {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  color: var(--gray-900);
}

.pcontact .r .i div.LineMenuComponent:first-child {
  height: 21px;
}

.paddress.pcontact .r .i div:first-child .fw-bold.addrcib {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
}

.addrwidget .paddress.pcontact .r .address .dai {
  color: var(--gray-600);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.addrwidget .paddress.pcontact .r {
  margin: var(--spacing-none);
}

.pcontact .r .i div:nth-child(2) {
  font-size: 12px;
  text-align: right;
  white-space: normal;
  /*opacity:      0.7;*/
}

.pcontact .r .i div:nth-child(2) img {
  margin-right: var(--spacing-sm);
}

.pcontact .r .i div:nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pcontact .r .i .cnt {
  color: var(--gray-700);
  display: inline-block;
  margin-left: var(--spacing-lg);
}

.pcontact .blink {
  position: relative;
  display: inline-flex;
  margin: -8px var(--spacing-none);
  padding: var(--spacing-sm);
  padding-right: var(--spacing-none);
  border-radius: 16px;
  transition: all 0.2s;
}

.pcontact .r > .add {
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}

.pcontact.real-contact .r > .add {
  padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}

.pcontact.real-contact .r .i.phone {
  padding: var(--spacing-md) var(--spacing-none);
}

.pcontact.paddress .add .blink, .pcontact .r > .add .blink {
  padding: var(--spacing-none);
  margin: var(--spacing-none);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--brand-400);
}

.pcontact.paddress .add .blink:hover, .pcontact .r > .add .blink:hover {
  background-color: transparent;
  color: var(--brand-300);
}

.addrwidget .pcontact .i .address {
  text-align: left;
}

.pcontact .addaddremp,
.pcontact .addcardemp,
.addrwidget > .pcontact .r .i.add,
.cardwidget > .pcontact .r .i.add {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.pcontact .addaddremp .blink {
  border-radius: 16px;
  padding: var(--spacing-sm) var(--spacing-lg);
}

.pcontact .r .blink:first-child {
  margin: var(--spacing-none);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.pcontact .r .LineMenuComponent img {
  width: 16px;
  height: 16px;
}

.pcontact .r a:hover img {
  -webkit-filter: brightness(120%);
}

.addrwidget > .pcontact > div > div.r > div.add {
  display: flex;
  justify-content: end;
}

.contact_sel {
  font-size: 14px;
}

.contact_sel {
  padding-top: var(--spacing-alt-xs);
}

.contact_sel .c {
  float: left;
  margin-right: 50px;
}

.contact_sel > div > div {
  margin-bottom: var(--spacing-md);
}

.contact_sel > div > div > label > div:last-child {
  padding-left: 25px;
  background: url(/img/redesign/icons/phone.svg) no-repeat 4px center;
  background-size: 16px 16px;
}

.contact_sel > div > div label.phone > div:last-child {
  background-image: url(/img/redesign/icons/phone.svg);
}

.contact_sel div div label.viber > div:last-child {
  background-image: url(/img/viber.png);
}

.contact_sel div div label.whatsapp > div:last-child {
  background-image: url(/img/whatsapp.png);
}

.contact_sel .post-add-call-recording-notice {
  width: 820px;
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background-color: var(--brand-100);
  color: var(--brand-500);
}

.contact_sel .post-add-call-recording-notice-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.contact_sel .post-add-call-recording-notice-text {
  color: var(--brand-500);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs);
  letter-spacing: -0.26px;
}

hr {
  height: 1px;
  margin: var(--spacing-lg) var(--spacing-none);
  border: none;
  border-top: 1px solid var(--gray-300);
}

.db {
  padding: var(--spacing-alt-sm);
  border: 1px solid var(--gray-500);
  border-radius: 4px;
}

/*page info on top of a page*/
.info {
  font-size: 14px;
  margin: var(--spacing-none) auto var(--spacing-xl);
  color: var(--gray-900);
  padding: var(--spacing-lg);
  border-radius: var(--radius-sm);
  background-color: var(--info-100);
  overflow-wrap: anywhere;
}

.info .t {
  font-weight: bold;
  margin-bottom: var(--spacing-sm);
}

.info .blink {
  display: inline-block;
  /*margin:  0 6px 0 0;*/
  padding: var(--spacing-none);
}

.info .btns {
  padding: var(--spacing-xl) var(--spacing-none) var(--spacing-none);
  border: none;
}

.info .btns a {
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  font-weight: 500;
  color: var(--brand-400);
}

.info .btns a:hover {
  color: var(--brand-300);
}

.info .x {
  float: right;
  width: 24px;
  height: 24px;
  margin: -10px -8px var(--spacing-none) var(--spacing-alt-sm);
  padding: var(--spacing-alt-xs);
  border-radius: 24px;
  background: url(/img/close.png) center center no-repeat;
  background-size: 18px 18px;
  transition: all 0.2s;
}

.info .x:hover {
  background-color: var(--gray-300);
}

.error {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

.error .c {
  color: var(--gray-100) !important;
  display: table;
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-md);
  border-radius: 8px;
  background-color: var(--error-400);
  font-size: 14px;
}

.bubble .error, .postdlg .error {
  padding: var(--spacing-alt-sm) var(--spacing-none);
}

.error .c > div {
  font-size: 15px;
  display: table-row;
  margin: var(--spacing-xs);
}

.error .c > div > div:last-child {
  color: var(--gray-300);
  display: table-cell;
  padding: var(--spacing-xs);
  font-size: 14px;
}

.error .c > div > div.t {
  font-weight: 600;
  color: var(--gray-100);
  display: table-cell;
  padding: var(--spacing-xs);
  font-size: 14px;
}

.page_info {
  font-size: 16px;
  color: var(--gray-900);
  line-height: 24px;
  max-width: 500px;
  margin: 30px auto;
  padding: 60px 100px;
  text-align: center;
  border-radius: 12px;
  background-color: var(--gray-100);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.page_info.logout {
  border: none;
  box-shadow: unset;
  display: flex;
  width: 100%;
  margin: var(--spacing-none) auto;
  height: calc(100vh - 150px);
  padding: var(--spacing-none);
}

.page_info.logout .EmptyStateComponent {
  margin: var(--spacing-none) auto;
}

.bubble .page_info {
  margin: auto;
  box-shadow: none;
}

.page_info h1 {
  font-size: 18px;
  margin-bottom: var(--spacing-xl);
}

.page_info a {
  color: var(--brand-400);
  display: block;
  max-width: 300px;
  margin: 30px auto var(--spacing-none) auto;
}

.forgotpass .recoverpage-info a {
  margin: var(--spacing-2xl) auto var(--spacing-none) auto;
}

.error td {
  color: var(--gray-100);
}

.error a {
  color: var(--gray-100);
  text-decoration: underline;
}

.dl_ad {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-alt-xs);
}

#padc {
  height: auto;
  padding: var(--spacing-md) var(--spacing-none) var(--spacing-lg);
  border-radius: 8px;
  background-color: var(--gray-100);
  display: flex;
  gap: var(--spacing-xs);
}

#padc a {
  font-size: 14px;
  color: var(--gray-900);
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  white-space: normal;
  border-radius: 4px;
}

#padc a.p {
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
}

#padc a.p:not(:last-child) {
  margin-bottom: var(--spacing-xs);
}

#padc .r a.n {
  padding: var(--spacing-sm) var(--spacing-md);
}

#padc .r a.n.p {
  padding: var(--spacing-md);
}

#padc .r .pane a.n {
  padding: var(--spacing-xs) var(--spacing-lg);
}

#padc a.p > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

#padc .r a.p > span {
  font-weight: 500;
}

#padc a.p > img {
  width: 18px;
  height: 18px;
  margin-right: var(--spacing-sm);
}

#padc a.p > img:last-child {
  margin-right: var(--spacing-none);
}

/*#padc a.p > img:last-child {*/
/*	margin-right: 0;*/
/*}*/
#padc a > span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

#padc .r .pane a.n > span {
  /*font-size: 13px;*/
  font-weight: 400;
}

#padc a:hover, #padc a.h {
  color: var(--brand-400);
  text-decoration: none;
  background-color: var(--gray-300);
}

#padc a.h {
  background-color: var(--gray-300);
  border-radius: 4px;
}

#padc a:hover img, #padc a.h img {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}

#padc a:hover:after, #padc a.h:after {
  border-color: var(--brand-400);
}

#padc a.n:after, #padc a.st:after {
  display: none;
  content: "";
}

.forgotpass .recoverpage-info {
  margin: var(--spacing-none);
  font-size: 15px;
  padding: var(--spacing-none) 30px;
}

#padc a span.cnt {
  font-size: 12px;
  color: var(--gray-900);
  margin-left: var(--spacing-sm);
  flex: unset;
  margin-right: var(--spacing-xs);
}

#padc span.sep {
  display: block;
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none);
  padding-bottom: var(--spacing-alt-xs);
  border-top: 1px solid var(--gray-400);
}

#padc .l {
  float: left;
  width: 220px;
}

#padc .l .c {
  padding: var(--spacing-none);
}

#padc .l .c a {
  font-weight: 500;
  padding: var(--spacing-md);
}

#padc .r {
  display: none;
  float: left;
  width: 340px;
  height: 100%;
  padding: var(--spacing-none);
  white-space: nowrap;
  background-color: var(--gray-100);
}

#padc .r .c {
  display: none;
}

#padc .r .c .pane {
  display: inline-block;
  width: 260px;
  vertical-align: top;
}

#padc .r .c .t, #padc a.st {
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  color: var(--gray-900);
  display: block;
  padding: var(--spacing-none) var(--spacing-lg) var(--spacing-xs) var(--spacing-lg);
  white-space: normal;
}

#padc a.st:hover {
  color: var(--brand-400);
}

#padc .r .c .sec {
  display: block;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
  white-space: normal;
}

.pasl {
  font-size: 12px;
  padding-right: 60px;
  padding-left: 30px;
  white-space: nowrap;
}

.pasl .t {
  font-size: 14px;
  font-weight: 700;
  padding-bottom: var(--spacing-alt-sm);
}

.pasl .s {
  font-size: 11px;
  padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-xxs) 15px;
}

.pasl .s .t {
  font-size: 12px;
  font-weight: 400;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
}

.pasl .l {
  font-size: 12px;
  padding-bottom: var(--spacing-alt-sm);
  padding-left: 30px;
}

.pa .lbl {
  width: 120px;
  padding-top: var(--spacing-alt-sm);
  padding-right: var(--spacing-lg);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

.pat {
  margin: var(--spacing-none) var(--spacing-lg) var(--spacing-alt-sm);
  padding: var(--spacing-xxs);
  border-bottom: 1px solid var(--gray-400);
}

.pa .tlbl {
  width: 120px;
  padding-right: var(--spacing-lg);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}

.pa .opt {
  padding-right: var(--spacing-xl);
}

.ad2 {
  position: relative;
  top: 0;
  left: 0;
}

.ad2 iframe {
  margin-top: var(--spacing-alt-sm);
}

.step {
  height: 40px;
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-4xl);
}

.step .step_t {
  font-size: 14px;
  color: var(--gray-700);
  float: left;
  overflow: hidden;
  max-width: 640px;
  padding-top: var(--spacing-alt-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.step_p {
  float: right;
  text-align: center;
  display: flex;
  gap: var(--spacing-xl);
}

.step_p .bline {
  position: relative;
  top: 12px;
  margin-right: 50px;
  margin-left: 50px;
}

.step_p .box_on, .step_p .box_off {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--gray-600);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step_p .box_on {
  color: var(--brand-400);
}

.step_p .box_on .circle, .step_p .box_off .circle {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  width: 24px;
  height: 24px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.step_p .box_on .circle {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.step_p .box_off .circle {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

.step-widget-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  padding-top: var(--spacing-lg);
}

.step-widget-wrapper .step-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.64px;
}

.step-widget-wrapper .steps-wrapper {
  display: flex;
  gap: var(--spacing-2xl);
}

.step-widget-wrapper .steps-wrapper .step-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.26px;
  color: var(--gray-500);
}

.step-widget-wrapper .steps-wrapper .step-wrapper.completed {
  color: var(--gray-900);
}

.step-widget-wrapper .steps-wrapper .step-wrapper.current {
  color: var(--brand-400);
}

.step-widget-wrapper .steps-wrapper .step-wrapper .circle {
  display: flex;
  width: 20px;
  height: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid var(--gray-400);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.step-widget-wrapper .steps-wrapper .step-wrapper .circle > img {
  display: none;
}

.step-widget-wrapper .steps-wrapper .step-wrapper.completed .circle {
  color: var(--gray-100);
  background-color: var(--accent-malachite);
  border: none;
}

.step-widget-wrapper .steps-wrapper .step-wrapper.completed .circle > img {
  display: block;
  width: 12px;
  height: 12px;
}

.step-widget-wrapper .steps-wrapper .step-wrapper.current .circle {
  color: var(--gray-100);
  background-color: var(--brand-400);
  border: none;
}

#dlgmap {
  height: 590px;
}

#dlgvideo {
  height: 450px;
}

.ui-helper-hidden-accessible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
}

.ui-helper-reset {
  font-size: 100%;
  line-height: 1.3;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  list-style: none;
  text-decoration: none;
  border: 0;
  outline: 0;
}

.ui-helper-clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: ".";
}

.ui-helper-clearfix {
  display: block;
}

.ui-helper-zfix {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-state-disabled {
  cursor: default !important;
}

.ui-icon {
  display: block;
  overflow: hidden;
  text-indent: -99999px;
  background-repeat: no-repeat;
}

.ui-icon-close, .ui-icon-closethick {
  width: 40px;
  height: 40px;
  padding: var(--spacing-none);
  margin-top: -20px;
  margin-right: var(--spacing-alt-xs);
  border-radius: 24px;
  background: url(/img/redesign/icons/xicon.svg) center center no-repeat;
  background-size: 32px 32px;
  /*transition:      all .2s;*/
  position: absolute;
  right: 0;
  top: 24px;
}

.ui-icon-close, .ui-icon-closethick:hover {
  background-color: var(--gray-300);
}

.ui-widget-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-color: var(--gray-900);
  filter: alpha(opacity=40);
}

.ui-widget {
  font-size: 12px;
  z-index: 20;
  box-shadow: 8px 8px 80px 2px var(--gray-700);
}

.ui-widget-content {
  color: var(--gray-900);
  z-index: 102;
  border: 1px solid var(--gray-400);
  border-radius: 16px;
  background-color: var(--gray-100);
}

.ui-widget-header {
  font-weight: 700;
  color: var(--gray-900);
  position: relative;
  z-index: 101;
}

.ui-state-hover, .ui-state-focus {
  font-weight: 400;
  color: var(--gray-900);
  cursor: pointer;
  border-radius: 2px;
  background-color: var(--gray-400);
}

.ui-autocomplete-search {
  position: absolute;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  cursor: default;
}

.ui-autocomplete-inline {
  position: static;
  overflow-y: scroll !important;
  max-height: 230px;
  padding: var(--spacing-xxs);
}

.ui-autocomplete span {
  color: var(--brand-500);
}

.ui-menu {
  position: absolute;
  z-index: 50;
  float: left;
  overflow: hidden;
  max-width: 100%;
  list-style: none;
  border: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.05);
}

.ui-menu .ui-menu {
  margin-top: -3px;
}

.ui-menu .ui-menu-item {
  width: 100%;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.ui-menu .ui-menu-item:hover a > div.c > img {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
  opacity: 1;
}

.ui-menu .ui-menu-item:hover a > div {
  color: var(--brand-400);
}

.ui-menu .ui-menu-item a {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--gray-900);
  display: block;
  padding: var(--spacing-xs) var(--spacing-lg);
  cursor: pointer;
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ui-menu .ui-menu-item a > div {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ui-menu .ui-menu-item a > div > div > div:first-child {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--gray-900);
}

.ui-menu .ui-menu-item a > div > div > div:nth-child(2) {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--gray-900);
  opacity: 0.5;
}

/*title*/
.ui-menu .ui-menu-item div.t {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  margin: var(--spacing-alt-sm) var(--spacing-lg) var(--spacing-xs) var(--spacing-lg);
  color: var(--gray-900);
}

/*business page*/
.ui-menu .ui-menu-item a > div.bp > img {
  width: 26px;
  height: 26px;
  margin-right: var(--spacing-alt-xs);
  border-radius: 6px;
}

.ui-menu .ui-menu-item a > div.c > img,
.ui-menu .ui-menu-item a > div.i > img {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

.ui-menu .clear {
  color: var(--gray-900);
  display: block;
  box-sizing: border-box;
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-alt-md) var(--spacing-md) var(--spacing-alt-xs) var(--spacing-alt-xs);
  text-align: right;
  border-top: 1px solid var(--gray-300);
  background-color: var(--gray-100);
}

.ui-menu .clear:hover {
  color: var(--brand-400);
}

.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
  font-weight: 400;
  color: var(--brand-400);
  border: none;
}

.ui-menu .ui-menu-item a.ui-state-hover > div > div > div:first-child,
.ui-menu .ui-menu-item a.ui-state-active > div > div > div:first-child {
  color: var(--brand-400);
}

.ui-dialog {
  position: absolute;
  width: 600px;
}

.ui-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-xxs);
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.ui-dialog .ui-dialog-title {
  overflow: hidden;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
  margin: var(--spacing-none) var(--spacing-2xl);
  line-height: 28px;
}

.ui-dialog .ui-dialog-titlebar-close {
  padding: var(--spacing-xl) var(--spacing-none);
  box-shadow: none;
}

.ui-button, .ui-button:hover, .ui-button:focus {
  margin: var(--spacing-none);
  outline: none;
  background: none;
}

.ui-dialog .ui-dialog-titlebar-close span {
  display: block;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  zoom: 1;
  height: auto;
  padding: var(--spacing-none) var(--spacing-2xl) var(--spacing-lg) var(--spacing-2xl);
  border: 0;
  background: none;
}

/* Remove padding for consent modal */
.ui-dialog .ui-dialog-content:has(.consent-modal) {
  padding: var(--spacing-none);
}

.ui-dialog .ui-dialog-buttonpane {
  margin: 0.5em var(--spacing-none) var(--spacing-none);
  padding: 0.3em 1em 0.5em 0.4em;
  text-align: left;
  border-width: 1px 0 0;
  background-image: none;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em var(--spacing-none);
  cursor: pointer;
}

.ui-dialog .ui-resizable-se {
  right: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
}

.tipsy {
  font-size: 13px;
  position: absolute;
  z-index: 999;
  padding: 5px;
}

.tipsy-inner {
  color: var(--gray-100);
  max-width: 200px;
  padding: var(--spacing-alt-xs) var(--spacing-md);
  text-align: center;
  border-radius: 6px;
  background-color: var(--gray-900);
}

.tipsy-arrow {
  line-height: 0;
  position: absolute;
  width: 0;
  height: 0;
  border: 5px dashed var(--gray-900);
}

.tipsy-arrow-n {
  border-bottom-color: var(--gray-900);
}

.tipsy-arrow-s {
  border-top-color: var(--gray-900);
}

.tipsy-arrow-e {
  border-left-color: var(--gray-900);
}

.tipsy-arrow-w {
  border-right-color: var(--gray-900);
}

.tipsy-n .tipsy-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-top: none;
  border-right-color: transparent;
  border-bottom-style: solid;
  border-left-color: transparent;
}

.tipsy-nw .tipsy-arrow {
  top: 0;
  left: 10px;
  border-top: none;
  border-right-color: transparent;
  border-bottom-style: solid;
  border-left-color: transparent;
}

.tipsy-ne .tipsy-arrow {
  top: 0;
  right: 10px;
  border-top: none;
  border-right-color: transparent;
  border-bottom-style: solid;
  border-left-color: transparent;
}

.tipsy-s .tipsy-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-style: solid;
  border-right-color: transparent;
  border-bottom: none;
  border-left-color: transparent;
}

.tipsy-sw .tipsy-arrow {
  bottom: 0;
  left: 10px;
  border-top-style: solid;
  border-right-color: transparent;
  border-bottom: none;
  border-left-color: transparent;
}

.tipsy-se .tipsy-arrow {
  right: 10px;
  bottom: 0;
  border-top-style: solid;
  border-right-color: transparent;
  border-bottom: none;
  border-left-color: transparent;
}

.tipsy-e .tipsy-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top-color: transparent;
  border-right: none;
  border-bottom-color: transparent;
  border-left-style: solid;
}

.tipsy-w .tipsy-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-top-color: transparent;
  border-right-style: solid;
  border-bottom-color: transparent;
  border-left: none;
}

#upload {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-none);
  border: 1px solid var(--gray-400);
  border-radius: 6px;
}

#upload #pickfiles div:hover {
  text-decoration: none;
  background-color: var(--gray-600);
}

#upload #pickfiles div {
  font-size: 14px;
  color: var(--gray-100);
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
  background-color: var(--gray-700);
  transition: all 0.2s;
}

#upload .i {
  float: left;
  width: 129px;
  height: 129px;
  margin: var(--spacing-xs);
  cursor: move;
  text-align: center;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  background: no-repeat center;
  background-size: cover;
  transition: border-color 200ms, box-shadow 200ms;
}

#upload .i:hover {
  border: 1px solid var(--gray-500);
  box-shadow: 0 0 15px var(--gray-500);
}

#upload .i .l {
  font-size: 11px;
  position: relative;
  right: -61px;
  top: -27px;
}

#upload {
  border: 1px solid var(--gray-400);
  border-radius: 12px;
  transition: border-color 0.3s ease;
}

#upload.dragover {
  border: 2px dashed blue;
}

#upload .i .w {
  padding: var(--spacing-xl);
  text-align: center;
}

#upload .i .l b {
  font-weight: 400;
}

#upload .ph {
  font-size: 15px;
  color: var(--gray-600);
  margin-bottom: var(--spacing-alt-sm);
}

#upload-pic-container .err.required,
#upload-pic-container .err.validation,
#captchaContainer .err {
  font-size: var(--font-size-xs);
  display: inline-block;
  margin-top: var(--spacing-md);
  color: var(--error-500);
  width: 100%;
}

#upload-pic-info .ph {
  margin-bottom: var(--spacing-lg);
}

#upload-inside-container,
#upload-doc-inside-container,
#docu_idsupporting_documentupload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 135px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
  cursor: pointer;
}

#docu_idsupporting_documentupload {
  border: 1px solid var(--gray-300);
}

#docu_idsupporting_documentimg > img {
  position: relative;
  left: 119px;
  top: -9px;
}

.uploadedDocumentPreview {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 129px;
  height: 129px;
  border-radius: var(--radius-md);
}

#upload-inside-container-info,
#upload-doc-inside-container-info {
  margin-top: var(--spacing-md);
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

#upload-inside-container-text-for-pick-short,
#upload-doc-inside-container-text-for-pick-short,
#upload-inside-container-text-for-pick-long,
#upload-doc-inside-container-text-for-pick-long {
  display: none;
}

#upload .err {
  margin: var(--spacing-xxs) var(--spacing-none) var(--spacing-none) var(--spacing-xxs);
}

#bupload {
  width: 670px;
  height: 90px;
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-xs);
  text-align: center;
  border: 1px solid var(--gray-400);
}

#bimg {
  display: none;
  height: 100%;
  background-repeat: no-repeat;
}

#bimg .w {
  margin-top: var(--spacing-xl);
}

#bupload div .res {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-500);
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-lg);
  text-align: center;
}

/* page assets upload */
.paupload {
  display: flex;
}

.paupload .assetupload-body {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.paupload .assetupload-frame {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  margin-right: var(--spacing-alt-sm);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-alt-xs);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.paupload .assetupload-frame .resinfo {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.paupload .assetupload-frame .bnr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-alt-xs);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.paupload.assetupload .assetupload-frame {
  border-color: var(--gray-300);
  background-color: var(--gray-100);
}

.paupload.assetupload--logo .assetupload-frame,
.paupload.assetupload--cover .assetupload-frame {
  background-color: var(--gray-300);
  border-radius: var(--spacing-md);
}

.paupload.assetupload--cover .assetupload-frame {
  max-width: 100% !important;
  height: 110px !important;
  aspect-ratio: 5/1;
}

.paupload.assetupload--cover .bnr {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (max-width: 1024px) {
  .paupload.assetupload--cover .assetupload-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(90px, 18vw, 135px) !important;
    aspect-ratio: auto;
    flex: 1 1 auto;
  }
  .frow.business-cover-row .e {
    margin-left: 0;
  }
}
.paupload.assetupload--cover .assetupload-delete-panel {
  display: none !important;
}

.frow.business-cover-row {
  min-width: 818px;
}

@media screen and (max-width: 1270px) {
  .frow.business-cover-row {
    min-width: 0;
  }
}
.frow.business-logo-row,
.frow.business-cover-row {
  align-items: flex-start;
}

.frow.business-logo-row .l,
.frow.business-cover-row .l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.frow.business-logo-row .l::after {
  content: "(512 x 512)";
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--gray-500);
}

.frow.business-logo-row .assetupload-delete-panel {
  display: none !important;
}

.frow.business-cover-row .l::after,
.fsec.business-cover-section .t::after {
  content: "(2400 x 480)";
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--gray-500);
}

.frow.business-logo-row .assetupload-action img,
.frow.business-cover-row .assetupload-action img {
  display: none;
}

.frow.business-logo-row .assetupload-action-edit,
.frow.business-cover-row .assetupload-action-edit {
  background: transparent url("/img/redesign/icons/edit-mark-white.svg") no-repeat center/16px 16px !important;
}

.frow.business-logo-row .assetupload-action-delete,
.frow.business-cover-row .assetupload-action-delete {
  background: transparent url("/img/redesign/icons/delete-mark-white.svg") no-repeat center/16px 16px !important;
}

.paupload.assetupload .assetupload-resinfo {
  width: 100%;
  height: 100%;
  padding: var(--spacing-lg);
  text-align: center;
}

.paupload.assetupload .assetupload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  height: 100%;
}

.paupload.assetupload .assetupload-placeholder-icon {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  opacity: 0.9;
}

.paupload.assetupload .assetupload-placeholder-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-alt-xs);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--gray-600);
}

.paupload.assetupload .assetupload-placeholder-text {
  color: var(--gray-600);
}

.paupload.assetupload .assetupload-placeholder-link a {
  padding: 0;
  color: var(--brand-400);
  font-weight: 500;
}

.paupload.assetupload .assetupload-placeholder-link a:hover {
  background-color: transparent;
  text-decoration: underline;
}

.paupload div a {
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-height-sm);
  color: var(--brand-400);
  display: block;
  padding: var(--spacing-alt-xs) var(--spacing-md);
  border-radius: var(--radius-lg);
}

.paupload div a:hover,
.docupload .u div a:hover {
  background-color: var(--gray-300);
}

.paupload.is-dragover div div:first-child {
  border-color: var(--gray-400);
  background-color: var(--gray-200);
  transform: scale(1.01);
  position: relative;
  overflow: hidden;
}

.paupload.is-dragover div div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%);
  animation: paupload-shimmer 1.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes paupload-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.paupload.is-uploading .assetupload-frame {
  position: relative;
  overflow: hidden;
}

.paupload.is-uploading .assetupload-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(16, 118, 255, 0.15) 45%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%);
  animation: paupload-shimmer 1.1s ease-in-out infinite;
  pointer-events: none;
}

.paupload.is-uploading .assetupload-overlay {
  opacity: 0;
  pointer-events: none;
}

.assetupload-preview {
  position: relative;
}

.assetupload-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: var(--radius-alt-xs);
  pointer-events: none;
}

.assetupload-preview:hover::after {
  opacity: 1;
}

.assetupload-overlay {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  display: flex;
  opacity: 0;
  transform: translateY(calc(var(--spacing-xs) * -1));
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.assetupload-preview:hover .assetupload-overlay {
  opacity: 1;
  transform: translateY(0);
}

.assetupload-action {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-100);
  outline: none;
  box-shadow: none !important;
  padding: 0;
  border: none;
}

.assetupload-action:hover,
.assetupload-action:focus,
.assetupload-action:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

.assetupload-action svg,
.assetupload-action img {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  display: block;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.paupload.assetupload .assetupload-delete-panel {
  display: none;
}

/* ---------------- */
/* document upload */
.frow.top.doc0 > .e > .docupload {
  width: 100%;
}

.frow.top.doc0 > .e > .docupload #document-upload-container {
  margin-top: var(--spacing-lg);
}

.frow.top.doc0 {
  display: block;
}

.frow.top.doc0 > .l {
  font-weight: 700;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  letter-spacing: -0.4px;
  color: var(--gray-900);
}

.frow.top.doc0 > .e {
  margin-left: var(--spacing-none);
}

.docupload > .i {
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  max-width: 800px;
  color: var(--gray-900);
}

.docupload > .i > span {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
  display: block;
  font-size: var(--font-size-md);
}

.docupload > .u {
  display: flex;
  align-items: center;
}

.docupload > .u:not(#docu_idsupporting_documentupload) > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 72px;
  height: 72px;
  background-size: cover;
  background-position: center center;
  margin-right: var(--spacing-alt-sm);
  border-radius: 4px;
}

.docupload > .u > div a {
  font-size: 15px;
  color: var(--brand-400);
  border-radius: 16px;
}

/* ---------------- */
.avupload_img > div > div:first-child, .resumeupload_img > div > div:first-child {
  border: none !important;
}

.avupload_img > div > div > .bnr {
  border-radius: 50%;
  background-size: contain;
}

#upbannerimg {
  flex: 1;
}

.f11, div.flabel.s, .ui-widget .ui-widget {
  font-size: 12px;
}

.p6 {
  padding: var(--spacing-alt-xs);
}

.bnr_type {
  padding: var(--spacing-alt-sm);
}

.prgr {
  font-size: 15px;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.pv30 {
  padding: 30px var(--spacing-none);
}

.b {
  font-weight: 700;
}

img, .nb {
  border: 0;
}

#contentl {
  float: left;
  width: 680px;
  padding-right: var(--spacing-xl);
}

.ftoggle, .filterbtn, #ph .b .st, .ui-helper-hidden {
  display: none;
}

.featured .t .r a {
  color: var(--gray-900);
}

.ft_title .btn, .dl .search, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.wallet ol span {
  font-size: 16px;
}

.example {
  color: var(--gray-500);
}

.inforadio .row {
  font-size: 15px;
  color: var(--gray-900);
  display: block;
  padding: var(--spacing-sm) var(--spacing-none);
  border-radius: 6px;
  transition: all 0.2s;
}

.inforadio .row:hover {
  cursor: pointer;
}

.inforadio .row:first-child {
  padding-top: var(--spacing-none);
}

.inforadio .row:last-child {
  padding-bottom: var(--spacing-none);
}

.inforadio > .row > input {
  float: left;
  margin-top: var(--spacing-xxs);
}

.inforadio .r1 {
  font-size: 15px;
  padding-left: var(--spacing-2xl);
}

.inforadio .r3 {
  display: none;
  padding: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none) var(--spacing-2xl);
}

.inforadio .r3 input {
  max-width: 90%;
}

.inforadio .r2 {
  font-size: 14px;
  color: var(--gray-600);
  margin-top: var(--spacing-xs);
  padding-left: var(--spacing-2xl);
}

.inforadio .r4 {
  font-size: 15px;
  font-weight: bold;
  color: var(--gray-900);
  margin-top: var(--spacing-xs);
  padding-left: 22px;
}

.inforadio .disabled {
  opacity: 0.7;
}

.rgroup input[type=radio], input, img, select, .pa td {
  vertical-align: middle;
  margin-top: var(--spacing-none);
}

.btns {
  padding-top: var(--spacing-xl);
}

.btns input, .btns button {
  margin: var(--spacing-none) var(--spacing-sm);
}

.btns input:only-child {
  width: 100%;
}

a:focus, div:focus, button:focus, .ui-widget:focus {
  outline: none;
}

input[type=submit][disabled], input[type=button][disabled], button[disabled], input[type=submit].sub, button.sub {
  color: var(--gray-100);
  cursor: default;
  background: var(--gray-300) none;
}

button[primary][disabled] {
  cursor: default;
  background-color: #ccc;
}

input[type=submit].secondary {
  background-color: var(--brand-100);
  color: var(--brand-400);
}

input[type=submit].secondary:hover {
  background-color: var(--brand-200);
}

input[type=submit].empty {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

input[type=submit].empty:hover {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

input[type=submit].empty {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

input[type=submit].empty:hover {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

input[disabled], input[readonly] {
  color: var(--gray-500);
  border-color: var(--gray-300);
  background-color: var(--gray-200);
}

.dl table {
  width: 100%;
  border-spacing: 0;
}

.dl .dltitle {
  display: flex;
  justify-content: space-between;
  line-height: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dl .dltitle div {
  display: -webkit-box;
  line-height: var(--line-height-lg);
  max-height: 86px;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*heart icon is 28px and 16 for title and heart icon gap*/
.dl .dltitle > .pt {
  flex: 1;
  max-width: calc(100% - 44px);
}

/*favorite ads, note and delete icons are 52px and 16px for gap*/
.dl .favorite-ads .dltitle > div:first-child:not(.pt) {
  flex: 1;
  max-width: calc(100% - 68px);
}

.dl .favorite-ads .dltitle .del {
  cursor: not-allowed;
}

.dl .toolbar, .helpo .s .i {
  padding: var(--spacing-alt-xs) var(--spacing-none);
}

.helpo .s .i {
  font-size: 15px;
}

.dl td a {
  color: var(--gray-900);
}

.dl .clabel, .dl .tlabel, #mapinfo > a .clabel {
  font-size: 12px;
  color: var(--gray-900);
  padding: var(--spacing-xs) var(--spacing-alt-xs);
  border-radius: 6px;
  background-color: var(--gray-100);
}

.dl .h, .dle .h,
#tp .dl .h.blue, #tp .dle .h.blue {
  background-color: var(--info-100);
}

.dl .h.blue, .dle .h.blue {
  background-color: var(--brand-100);
}

#tp .dl .h.blue .p, #tp .dle .h.blue .p {
  color: var(--gray-900);
}

.dl .h.blue .p, .dle .h.blue .p {
  color: var(--brand-400);
}

.dl .gl .tlabel {
  font-weight: normal;
  float: left;
}

.ad3 {
  display: block;
  width: 670px;
  height: 92px;
  margin: var(--spacing-xl) auto;
  border-radius: 8px;
}

.node {
  display: none;
}

#cciframe {
  height: 210px;
  background: url(/img/loading.gif) center center no-repeat;
}

#bupload .x {
  font-size: 6px;
  display: none;
  float: right;
  width: 16px;
  height: 16px;
  padding: var(--spacing-none);
  text-align: center;
}

#upload .i .x {
  font-size: var(--spacing-alt-xs);
  display: none;
  position: relative;
  left: 108px;
  top: 6px;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  padding: var(--spacing-none);
  text-align: center;
}

.docupload .x {
  position: relative;
  left: 103px;
  top: var(--spacing-xs);
  width: var(--spacing-lg);
  height: var(--spacing-lg);
}

#upload .i .x a, #bupload .x a {
  margin: var(--spacing-none);
}

#upload .i:hover .x, #bupload:hover .x {
  display: block;
}

#upload .i .x img, #bupload .x img {
  width: 16px;
  height: 16px;
  border-radius: 0 0 0 4px;
}

#upload .i:has(.x) {
  overflow: hidden;
}

.gl a img[data-original], .dlrel img[data-original], .featured .c > a > img[data-original], .dl td.r img[data-original] {
  visibility: hidden;
}

.gl a img[src], .dlrel img[src], .featured .c > a > img[src], .dl td.r img[src] {
  visibility: visible;
}

.btndel {
  background-color: var(--error-400) !important;
}

.btndel:hover {
  background-color: var(--error-300) !important;
}

.btngo {
  background-color: var(--accent-malachite) !important;
}

.btngo:hover {
  background-color: var(--success-400) !important;
}

#close_dlg_button, .btncancel {
  color: var(--gray-900) !important;
  outline: none;
  background-color: var(--gray-300) !important;
}

#close_dlg_button:hover, .btncancel:hover {
  background-color: var(--gray-400) !important;
}

#confirm_dlg_button {
  font-size: 16px;
  padding: var(--spacing-alt-sm) var(--spacing-6xl);
  border-radius: 60px;
}

.phnverified {
  color: var(--success-400);
  font-size: 14px !important;
  font-weight: 500;
  vertical-align: middle;
  line-height: 20px;
}

.review_post {
  font-size: 11px;
  padding: var(--spacing-alt-xs);
}

.review_post .d {
  color: var(--gray-700);
}

/*credit card styling*/
.cc_c, .cc_cs {
  max-width: 400px;
  margin: auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: 8px;
  background-color: var(--gray-400);
}

.cc_cs {
  display: flex;
  align-items: center;
  padding: var(--spacing-xl);
}

.cc_cs > div:first-child {
  margin-right: var(--spacing-xl);
}

.cc_cs > div:first-child img {
  width: 100px;
}

.cc_cs > div:nth-child(2) > div:first-child {
  font-size: 16px;
  margin-bottom: var(--spacing-sm);
}

.cc_cs > div:nth-child(2) > div:nth-child(2) {
  font-size: 12px;
  color: var(--gray-700);
  margin-bottom: var(--spacing-alt-sm);
}

.cc_cs > div:nth-child(2) > div:nth-child(3) {
  font-size: 13px;
}

.cc_cs > div:nth-child(2) > div:nth-child(3) > a.blink {
  display: inline-block;
  margin: var(--spacing-none);
  padding: var(--spacing-alt-xs) var(--spacing-none);
}

.cc_cs > div:nth-child(2) > div:nth-child(3) > a.blink:first-child {
  margin-right: var(--spacing-xl);
}

.cc_cs > div:nth-child(2) > div:nth-child(3) > a.blink:last-child:hover {
  color: red;
}

.cc_cards {
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.cc_cards img {
  height: 40px;
}

.cc_c .brand {
  width: 30px;
}

.cc_row {
  display: flex;
}

.cc_field1 {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
  padding: var(--spacing-alt-sm) var(--spacing-md);
  border-radius: 8px;
  background-color: var(--gray-100);
}

.cc_field2 {
  flex: 1;
  margin-right: var(--spacing-alt-sm);
  padding: var(--spacing-alt-sm) var(--spacing-md);
  border-radius: 8px;
  background-color: var(--gray-100);
}

.cc_field3 {
  flex: 1;
  margin-left: var(--spacing-alt-sm);
  padding: var(--spacing-alt-sm) var(--spacing-md);
  border-radius: 8px;
  background-color: var(--gray-100);
}

.cc_field::placeholder {
  color: var(--error-400);
}

#cc_btn, #cc_loading {
  margin-top: var(--spacing-xl);
  text-align: center;
}

#cc_btn button {
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  margin: auto;
}

#cc_btn button img {
  width: 14px;
  height: 14px;
  margin-right: var(--spacing-xs);
}

#cc_errors {
  font-size: 15px;
  color: red;
  display: none;
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  text-align: center;
}

#cc_loading {
  line-height: 40px;
  display: none;
  height: 40px;
}

/* line menu end */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    padding: var(--spacing-sm) var(--spacing-2xl) var(--spacing-sm) var(--spacing-md);
    background: url("/img/redesign/icons/chevron-down.svg") no-repeat right 0 center;
    background-size: 24px 24px;
    -webkit-appearance: none;
  }
}
.chart {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 300px;
}

.chartt {
  font-size: 16px;
  color: var(--gray-600);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
}

.chart > .i {
  font-size: 18px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: var(--spacing-md);
}

.chart > .y {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 40px;
  left: 0;
  display: flex;
  flex-direction: column;
}

.chart > .y > div {
  position: relative;
  display: flex;
  flex: 1;
}

.chart > .y > div > div {
  flex: 1;
  border-top: 1px solid var(--gray-300);
}

.chart > .y > div > span {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 24px;
  overflow: hidden;
  width: 40px;
  margin-top: -12px;
  padding-right: var(--spacing-alt-xs);
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chart > .x {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  margin-left: 46px;
  border-top: 1px solid var(--gray-300);
}

.chart > .x > div {
  font-size: 13px;
  color: var(--gray-700);
  flex: 1;
  text-align: center;
}

.chart > .p {
  z-index: 3;
  display: flex;
  align-items: flex-end;
  flex: 1;
  margin-left: 50px;
}

.chart > .p > div {
  flex: 1;
  margin: var(--spacing-none) var(--spacing-xxs);
  border-radius: 3px 3px 0 0;
  background-color: var(--brand-400);
  transition: all 0.2s;
}

.chart > .p > div:hover {
  background-color: var(--brand-300);
}

.chart > .h {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 40px;
  left: 50px;
  display: flex;
  flex-direction: row;
}

.chart > .h > div {
  flex: 1;
  padding: var(--spacing-none) var(--spacing-xxs);
}

.chart > .h > div.h {
  background-color: var(--info-100);
}

/* map view */
#mapview #menul {
  position: absolute;
  z-index: 49;
  top: 61px;
  bottom: 20px;
  left: 16px;
  width: 340px;
  margin: var(--spacing-none);
  border-radius: 8px;
}

body:has(#secondary-header-wrapper) #mapview #menul {
  top: 95px;
}

#mapview #map {
  position: fixed !important;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
}

body:has(#secondary-header-wrapper) #mapview #map {
  top: 105px;
}

#mapview .marker {
  font-size: 12px;
  font-weight: bold;
  color: var(--gray-100);
  position: absolute;
  width: auto !important;
  height: auto !important;
  padding: var(--spacing-alt-xs) var(--spacing-sm);
  white-space: nowrap;
  border: 1px solid var(--gray-300);
  border-radius: 16px;
  background-color: var(--brand-400);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

#mapview .marker:hover {
  font-size: 14px;
  z-index: 999 !important;
}

#mapview .tm:hover {
  z-index: 999;
}

#mapview .marker > span {
  font-size: 12px;
  color: var(--brand-400);
  line-height: 12px;
  display: inline-block;
  min-width: 12px;
  height: 12px;
  margin-right: var(--spacing-alt-xs);
  padding: var(--spacing-xxs);
  text-align: center;
  border-radius: 50%;
  background-color: var(--gray-100);
}

.gm-style-pbc, .gm-style-pbc + div {
  pointer-events: none !important;
}

#mapinfo {
  position: absolute;
  z-index: 49;
  top: 61px;
  bottom: 0;
  left: 12px;
  display: none;
  width: 320px;
  height: fit-content;
  min-height: 120px;
  margin: var(--spacing-none);
}

#mapinfo > a {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: var(--spacing-xl) var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-radius: 12px;
  background-color: var(--gray-100);
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2);
}

#mapinfo > a:hover {
  transform: scale(1.02);
  -webkit-filter: brightness(110%);
}

#mapinfo > a:hover > div > .l {
  color: var(--brand-400);
}

#mapinfo > a > img {
  width: 100%;
  height: 200px;
  margin-bottom: var(--spacing-alt-xs);
  border-radius: 12px 12px 0 0;
  object-fit: cover;
}

#mapinfo > a > div {
  flex: 1;
  margin: var(--spacing-none) var(--spacing-md);
}

#mapinfo > a > div > .l {
  font-size: 15px;
  color: var(--gray-900);
  line-height: 1.4;
  margin: var(--spacing-xs) var(--spacing-none);
}

#mapinfo > a > div > .p {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin: var(--spacing-xs) var(--spacing-none);
}

#mapinfo > a > div > .at {
  font-size: 14px;
  color: var(--gray-700);
  margin: var(--spacing-alt-xs) var(--spacing-none);
}

#mapinfo > a.h {
  background-color: var(--info-100);
}

#mapview .marker.h {
  border: 4px solid var(--info-100);
  border-radius: 20px;
}

#mapview > .close {
  position: fixed;
  top: 80px;
  right: 29px;
  border-radius: 50%;
  background-color: var(--gray-100);
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

body:has(#secondary-header-wrapper) #mapview > .close {
  top: 115px;
}

#mapview > .close div {
  display: block;
  width: 24px;
  height: 24px;
  padding: var(--spacing-sm);
  background: url(/img/close.png) center center no-repeat;
  background-size: 24px 24px;
}

#mapview > .close:hover {
  transform: scale(1.1);
}

/* end map view */
/*map ad view*/
/*map selector*/
.amap #map {
  height: 590px;
}

/* make yandex maps in dialog rounded */
.amap .ymaps {
  border-radius: 0 0 10px 10px;
}

/*---------------------------------------------------------------------------*/
#stmain {
  background-color: var(--gray-100);
  padding-top: 30px;
}

.story {
  box-sizing: border-box;
  width: 1140px;
  margin: var(--spacing-none) auto var(--spacing-xl);
  padding: var(--spacing-none) var(--spacing-none) 30px;
}

.story_h {
  width: 1140px;
  margin: var(--spacing-none) auto var(--spacing-xl);
  padding: var(--spacing-6xl);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  gap: var(--spacing-2xl);
}

.story_h img {
  max-height: 400px;
  max-width: 500px;
  object-fit: contain;
  border-radius: 16px;
}

.story_h > .t {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-right: 30px;
}

.story_h > .t > div:first-child {
  font-size: 36px;
  font-weight: 700;
  color: var(--gray-100);
  line-height: 1.3;
  padding: var(--spacing-alt-sm) var(--spacing-none);
}

.story_h > .t > div:nth-child(2) {
  font-size: 16px;
  line-height: 28px;
  color: var(--gray-100);
  padding: var(--spacing-alt-sm) var(--spacing-none);
}

.story > .article {
  margin: auto;
  max-width: 600px;
}

.story > .article > :last-child {
  margin: var(--spacing-none);
}

.story > .article > .t {
  font-size: 24px;
  font-weight: bold;
  margin: 60px var(--spacing-none) var(--spacing-alt-sm);
  line-height: 1.6;
}

.story > .article > .t2 {
  font-size: 24px;
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-sm);
  line-height: 1.6;
}

.story > .article > .d {
  font-size: 18px;
  color: var(--gray-900);
  line-height: 1.6;
}

.story > .article li {
  font-size: 18px;
  color: var(--gray-900);
  line-height: 1.6;
  margin: 18px var(--spacing-none);
}

.story > .article > img {
  border-radius: 16px;
  display: block;
  margin: var(--spacing-6xl) var(--spacing-none);
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
}

.story > .article > .s > .c {
  flex: 1;
}

.story .dl .h, .story .dle .h {
  background-color: transparent;
}

.story .coll > .c > .s {
  margin: var(--spacing-md) var(--spacing-none);
  padding: var(--spacing-md) var(--spacing-none);
}

.story .coll > .c > .s > div.t {
  font-size: 22px;
  font-weight: bold;
  color: var(--gray-900);
  display: block;
  height: auto;
  margin-bottom: var(--spacing-sm);
}

.story .coll > .c > .s > .c {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-between;
}

.story .coll .c > .s > .c > a {
  position: relative;
  display: inline-block;
  width: 210px;
  margin: var(--spacing-md) var(--spacing-none);
  text-align: left;
  vertical-align: top;
  transition: color 0.2s, background-color 0.2s;
}

.story .coll .c .s a > img {
  width: 210px;
  height: 200px;
  border-radius: 8px;
  transition: all 0.2s;
  object-fit: cover;
}

.story .coll .c .s a > div {
  margin: var(--spacing-alt-xs) var(--spacing-none);
}

.story .coll .c .s a > div > div.p {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.story .coll .c .s a > div > .at {
  font-size: 14px;
  color: var(--gray-700);
  margin-top: var(--spacing-xs);
}

.story .coll .c .s a > div > .t {
  font-size: 16px;
  color: var(--gray-900);
  line-height: 21px;
  display: -webkit-box;
  overflow: hidden;
  max-height: 44px;
  text-overflow: ellipsis;
  transition: all 0.2s;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.story .coll .c .s a:hover {
  -webkit-filter: brightness(110%);
}

.story .coll .c .s a:hover > div > .t {
  color: var(--brand-400);
}

.story .coll .c > .s > .c.r1 > a:nth-child(n+6) {
  display: none;
}

.story .coll .c > .s > .c.r2 > a:nth-child(n+11) {
  display: none;
}

.story .coll .c > .s > .c.r3 > a:nth-child(n+16) {
  display: none;
}

.story .coll .c > .s > .c.r4 > a:nth-child(n+21) {
  display: none;
}

.story .coll .c > .s > .c.r5 > a:nth-child(n+26) {
  display: none;
}

.story .coll .c > .s > .c.r6 > a:nth-child(n+31) {
  display: none;
}

.story .coll .c > .s > .c.r7 > a:nth-child(n+36) {
  display: none;
}

.story .coll .c > .s > .c.r8 > a:nth-child(n+41) {
  display: none;
}

.story .coll .c > .s > .c.r9 > a:nth-child(n+46) {
  display: none;
}

.story .coll .c > .s > .c > a:nth-child(n+51) {
  display: none;
}

.story .coll > .c > .h2 {
  display: flex;
  justify-content: space-evenly;
  margin: 80px auto 60px;
}

.story .coll > .c > .h2 > .c {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 330px;
  border-radius: 6px;
}

.story .coll > .c > .h2 > .c > a > .cl {
  font-size: 12px;
  color: var(--gray-100);
  position: absolute;
  top: 196px;
  left: 3px;
  margin: var(--spacing-none) var(--spacing-md) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-xs) var(--spacing-alt-xs);
  border-radius: 4px;
  background-color: var(--error-400);
}

.story .coll > .c > .h2 > .c > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.story .coll > .c > .h2 > .c > a > img {
  width: 300px;
  min-width: 300px;
  height: 280px;
  border-radius: 16px;
  transition: all 0.2s;
  object-fit: cover;
}

.story .coll > .c > .h2 > .c:hover img {
  -webkit-filter: brightness(110%);
}

.story .coll > .c > .h2 > .c > a > div {
  padding: var(--spacing-md) var(--spacing-none);
  transition: all 0.2s;
}

.story .coll > .c > .h2 > .c > a > div > div:first-child {
  font-size: 17px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none);
}

.story .coll > .c > .h2 > .c > a > div > div:first-child .p {
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--spacing-xs);
}

.story .coll > .c > .h2 > .c > a > div > div:nth-child(2) {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* resume */
#dialog .resume {
  max-height: 500px;
  overflow: scroll;
}

.postdlg.post-ad-form form > .c,
.postdlg.post-edit-form form > .c {
  max-width: 855px;
  margin-left: var(--spacing-none);
}

.postdlg.post-ad-form #upload {
  border-color: var(--gray-300);
  background-color: var(--gray-300);
  opacity: 1;
}

.postdlg.post-ad-form #upload,
.postdlg.post-edit-form #upload {
  border-color: var(--gray-300);
  background-color: var(--gray-300);
  border-radius: var(--radius-md);
}

.postdlg.post-ad-form #upload:hover,
.postdlg.post-edit-form #upload:hover {
  border-color: var(--gray-400);
}

input[type=checkbox]:not(:checked):not(:disabled) ~ span:hover,
input[type=checkbox]:not(:checked):not(:disabled):hover ~ span {
  border-color: var(--brand-400);
}

.option-container:has(input[type=checkbox]:disabled),
input[type=checkbox]:disabled,
input[type=checkbox]:disabled ~ span {
  cursor: default;
}

.postdlg.post-ad-form #upload .ph,
.postdlg.post-edit-form #upload .ph {
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
}

.postdlg.post-ad-form #upload.felement_err,
.postdlg.post-ad-form input[type=checkbox]:not(:checked) ~ span.felement_err,
.postdlg.post-edit-form #upload.felement_err,
.postdlg.post-edit-form input[type=checkbox]:not(:checked) ~ span.felement_err {
  background-color: var(--gray-100);
}

.postdlg.post-ad-form label.cbox input[type=checkbox] ~ span.checkbox-error,
.postdlg.post-edit-form label.cbox input[type=checkbox] ~ span.checkbox-error {
  border-color: var(--error-400) !important;
}

.felement_content_err.fsec {
  border: 1px solid var(--error-400);
  border-radius: var(--spacing-alt-sm);
  padding: var(--spacing-alt-sm);
  margin-bottom: var(--spacing-xl);
}

.fsec:has(> div:last-child:empty) {
  display: none;
}

.postdlg.post-ad-form select,
.postdlg.post-edit-form select {
  height: 44px;
}

.postdlg.post-ad-form div.preview_box input[type=checkbox]:not(:checked) ~ span,
.postdlg.post-edit-form div.preview_box input[type=checkbox]:not(:checked) ~ span {
  border: 1px solid var(--gray-600);
  background-color: transparent;
  opacity: 0.3;
}

#docu_idsupporting_documentpickfiles,
.postdlg.post-ad-form #upload #pickfiles,
.postdlg.post-edit-form #upload #pickfiles {
  color: var(--brand-400);
  background-color: transparent;
}

.resume .fsec:first-child {
  padding-top: var(--spacing-none);
}

.postdlg .resume {
  margin: var(--spacing-none);
}

.postdlg .resume .fsec > .t {
  margin: var(--spacing-none);
  background-color: transparent;
  font-size: var(--font-size-xl);
  line-height: var(--spacing-4xl);
  font-weight: 700;
  color: var(--gray-900);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.postdlg .resume .list, .vi .resume .list {
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none) 30px;
}

.postdlg .resume .header, .vi .resume .header {
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none) 30px;
}

.postdlg .resume .blink {
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--spacing-10xl);
  transition: 0.2s ease-in-out;
}

.postdlg .resume.emp {
  margin: var(--spacing-md) var(--spacing-lg) var(--spacing-none);
}

.post-form-employer-information .resume.emp {
  margin: 0;
}

.post-form-employer-information .resume.emp .header {
  margin: 0;
  display: block;
}

.vi .resume.emp {
  margin: var(--spacing-xl) var(--spacing-lg);
}

.vi .resume .fsec > .t {
  margin: var(--spacing-none);
  background-color: transparent;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  padding: var(--spacing-none);
  margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
}

.resume .fsec > .t {
  margin-bottom: var(--spacing-lg);
}

.resume .list {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-lg);
}

.resume .list > div {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl);
}

.resume .list > div:last-child {
  margin: var(--spacing-none);
}

.resume div.mi {
  margin-top: var(--spacing-xs);
  float: right;
  margin-right: var(--spacing-alt-sm);
}

.resume .list > div > div.a img {
  width: 16px;
  height: 16px;
}

.resume .list > div > div.title {
  font-size: 16px;
  font-weight: 800;
}

.resume .list > div > div.cname {
  font-size: 15px;
  margin-top: var(--spacing-xs);
}

.resume .list > div > div.date {
  font-size: 15px;
  color: var(--gray-700);
  margin-top: var(--spacing-xxs);
}

.resume .list > div > div.desc {
  font-size: 15px;
  color: var(--gray-900);
  margin-top: var(--spacing-alt-xs);
}

.resume .blink {
  font-size: 15px;
  display: inline-flex;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 16px;
  transition: all 0.2s;
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
}

.resume .blink:hover {
  background-color: var(--gray-300);
}

.resumeupload_img > div > div > .bnr {
  border-radius: 8px;
}

.resume .header {
  display: flex;
  flex-direction: row;
  margin-left: var(--spacing-lg);
}

.resume .header > .l {
  margin-right: var(--spacing-xl);
}

.resume .header > .l > img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.resume.emp .header > .l > img {
  width: 64px;
  height: 64px;
}

.resume .header > .r > .name {
  font-size: 20px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.resume .header > .r > .loc {
  font-size: 15px;
  color: var(--gray-700);
}

.resume .header > .r > .i, .resume .header > .r > .i2 {
  margin-top: var(--spacing-sm);
}

.resume .header > .r > .i > div {
  font-size: 13px;
  color: var(--gray-700);
}

.resume .header > .r > .i2 > div {
  font-size: 14px;
  color: var(--gray-700);
  margin: 1px var(--spacing-none);
}

.resume .header > .r > .desc {
  font-size: 15px;
  color: var(--gray-900);
  margin-top: var(--spacing-sm);
  overflow-wrap: anywhere;
}

.resume .header > .r > .add {
  display: flex;
  align-items: center;
  height: 100%;
}

.resume .header > .r > .add .blink {
  margin: var(--spacing-none);
}

/* horizontal menu strip */
span.msanc {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

.menustrip {
  display: flex;
  margin: var(--spacing-alt-sm) var(--spacing-none);
  flex-wrap: wrap;
  height: 38px;
  overflow: hidden;
  align-items: center;
}

.menustrip a {
  display: block;
  background-color: var(--gray-300);
  border-radius: 21px;
  padding: var(--spacing-alt-xs) var(--spacing-xl);
  margin: var(--spacing-xxs) var(--spacing-md) var(--spacing-xxs) var(--spacing-none);
  font-size: 15px;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.menustrip a:hover {
  background-color: var(--gray-300);
}

/* Gift dialog box on my ads page */
.ui-widget-content:has(#dlgGiftId) {
  border: none;
}

#dlgGiftId {
  display: flex;
  gap: var(--spacing-6xl);
  padding: var(--spacing-none);
}

#dlgGiftId .new-year-discount-info {
  flex: 1;
  padding: var(--spacing-6xl) var(--spacing-none) var(--spacing-6xl) var(--spacing-6xl);
}

#dlgGiftId .new-year-discount-info > .discount-texts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

#dlgGiftId .new-year-discount-info > .discount-texts .discount-text-greeting {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

#dlgGiftId .new-year-discount-info > .discount-texts .discount-text,
#dlgGiftId .new-year-discount-info > .discount-texts .discount-text-signature {
  font-size: 15px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.21px;
}

#dlgGiftId .new-year-discount-info > .discount-texts .discount-text-note {
  margin: var(--spacing-sm) var(--spacing-none);
  border-radius: 8px;
  background-color: var(--brand-100);
  color: var(--brand-400);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: var(--spacing-lg) var(--spacing-xl);
}

#dlgGiftId .new-year-discount-info .btns {
  padding: var(--spacing-none);
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-none);
  display: flex;
  gap: var(--spacing-md);
}

#dlgGiftId .new-year-discount-info .btns > a {
  width: fit-content;
  margin: var(--spacing-none);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  align-items: center;
}

#dlgGiftId .new-year-discount-info .btns > a:first-child {
  background-color: var(--gray-300);
  color: var(--gray-900);
  border-radius: 8px;
}

#dlgGiftId .new-year-discount-info .btns > a:first-child:hover {
  background-color: var(--gray-400);
}

#dlgGiftId .img > img {
  height: 100%;
  width: auto;
  border-radius: 0 15px 15px 0;
}

@media screen and (max-width: 1130px) {
  #self-serve-main-section-wrapper {
    width: 1000px;
    margin-left: unset;
  }
}
@media screen and (max-width: 1110px) {
  #main > .share {
    margin: 120px var(--spacing-none) var(--spacing-none) -30px;
  }
}
@media screen and (max-width: 1050px) {
  #main > .share,
  #main > #sstar {
    display: none;
  }
  #main > #sstar.pws {
    display: block;
    z-index: 8;
    left: auto;
    width: 32px;
    height: 32px;
  }
}
@media screen and (max-width: 1005px) {
  #ph .c {
    width: 1000px;
  }
  #main .bubble {
    border-right: none;
    border-left: none;
    border-radius: 0;
  }
}
@media only screen and (min-width: 721px) and (max-width: 1024px) and (orientation: landscape) {
  .featured .c > a {
    margin: var(--spacing-xxs);
  }
  #ph .c {
    width: 100%;
  }
  .featured .t .r {
    display: none;
  }
  .bnr_list .hdr {
    padding: var(--spacing-alt-sm) var(--spacing-alt-sm) var(--spacing-xl);
  }
  .step {
    padding-right: var(--spacing-alt-sm);
    padding-left: var(--spacing-alt-sm);
  }
}
/*-------*/
@media screen and (max-width: 1270px) {
  #ph > .c, #main,
  .pmain,
  #hcontent, #main .bubble,
  .helpo, #puheader > .head > .bnr img,
  .story, .story_h {
    width: 1000px;
  }
  #secondary-header-wrapper {
    padding: var(--spacing-none) var(--spacing-md);
  }
  #padc .r .pane a.n > span,
  #padc a {
    font-size: 13px;
  }
  #padc .r {
    padding: var(--spacing-none) var(--spacing-xxs);
  }
  #menul {
    width: 260px;
  }
  #pcontent {
    width: 640px;
  }
  .helpo .help {
    width: 640px;
    padding: var(--spacing-xl) 30px var(--spacing-xl) var(--spacing-none);
  }
  #pmenu {
    width: 340px;
    margin-left: var(--spacing-2xl);
  }
  .dl .gl a {
    width: 220px;
  }
  .dl .gl a > img {
    width: 220px;
    height: 165px;
  }
  #padc .r .c .pane {
    width: 240px;
  }
  #tabmenu {
    width: 225px;
  }
  .bdash > .l {
    width: 380px;
  }
  .preview_box > .l {
    width: 640px;
  }
  .ad3 {
    margin-left: -16px;
  }
  .featured > .c > .s > .c1 a:nth-child(n+6), .featured > .c > .s > .c2 a:nth-child(n+11), .featured > .c > .s > .c3 a:nth-child(n+16) {
    display: none;
  }
  .featured > .c > .st > .c > a:last-child, .featured > .c > .u > .c > a:last-child {
    display: none;
  }
  .story .coll .c > .s > .c > a {
    width: 184px;
  }
  .story .coll .c .s a img {
    width: 184px;
    height: 170px;
  }
  .story .coll > .c > .h2 > .c {
    width: 300px;
  }
  .story .coll > .c > .h2 > .c img {
    width: 280px;
    min-width: 280px;
    height: 260px;
  }
  #uinfo .phone a, #uinfo .email a {
    min-width: unset;
    flex: 1;
  }
  #pmenu .pblock a,
  #pmenu .pblock .g {
    padding: var(--spacing-sm);
  }
  .category-selector .category-card.business .fragment-2 {
    height: 32px;
    bottom: 19px;
  }
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: inset 0 0 0 500px white !important;
}

.plogin:has(input:-webkit-autofill):not(:has(input:focus)) #_idphone_number_or_email,
.plogin:has(input:-webkit-autofill):not(:has(input:focus)) #_idpassword,
.plogin:has(input:-webkit-autofill):not(:has(input:focus)) #_idyour_number,
.plogin:has(input:-webkit-autofill):not(:has(input:focus)) #_idverification_number {
  box-shadow: inset 0 0 0 500px var(--gray-300) !important;
}

/* COMMON UTILITY CLASSES - START */
.fs-10 {
  font-size: 10px;
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-64 {
  font-size: 64px;
}

.fw-bold {
  font-weight: bold;
}

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.p-3 {
  padding: 3px;
}

.p-10 {
  padding: var(--spacing-alt-sm);
}

.p-20 {
  padding: var(--spacing-xl);
}

.mb-20 {
  margin-bottom: var(--spacing-xl);
}

.gap-10 {
  gap: var(--spacing-alt-sm);
}

.gap-30 {
  gap: 30px;
}

.w-100 {
  width: 100%;
}

.m-0 {
  margin: var(--spacing-none);
}

.flex-column-start {
  display: flex;
  justify-content: center;
  align-items: start;
}

.flex-start {
  display: flex;
  justify-content: start;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: end;
  align-items: center;
}

.fd-column {
  flex-direction: column;
}

.fd-row {
  flex-direction: row;
}

.pointer {
  cursor: pointer;
  user-select: none;
}

/* COMMON UTILITY CLASSES - END */
.dbp {
  opacity: 0.6;
  cursor: not-allowed;
}

.text-grey-300 {
  color: var(--gray-400);
}

.text-grey-500 {
  color: var(--gray-600);
}

.text-grey-700 {
  color: var(--gray-700);
}

.text-grey-900 {
  color: var(--gray-900);
}

/*  Orders tab styles */
.seePostLinkWrapper {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.seePostLinkWrapper .blink {
  margin: var(--spacing-none);
  padding-top: var(--spacing-none);
  padding-bottom: var(--spacing-none);
}

.orderDetails .buyOrderDetailBlock {
  margin-bottom: var(--spacing-xl);
}

.rejectionReasonCheckbox .rgroup {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-sm);
  margin: var(--spacing-lg) var(--spacing-none);
}

.rejectionReasonCheckbox .rgroup input[type=radio] {
  margin-right: var(--spacing-md);
}

.rejectionReasonCheckbox .rgroup label {
  font-weight: 500;
  padding: var(--spacing-none);
}

.rejectionReasonCheckbox .fbtn {
  padding: var(--spacing-none) var(--spacing-xl);
}

.otherReasonBlock {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.otherReasonBlock .textareaWrapper {
  padding: var(--spacing-none);
}

.otherReasonBlock .textareaWrapper textarea {
  width: 100%;
  height: 70px;
  min-height: 70px;
  padding: var(--spacing-alt-sm);
}

/*     ************   */
.actionBtn {
  padding: var(--spacing-alt-sm) var(--spacing-xl);
  border-radius: 50px;
  background-color: var(--accent-argentinaBlue);
  color: var(--gray-100);
  text-transform: capitalize;
  cursor: pointer;
}

.actionBtn:hover {
  color: var(--gray-100);
}

.priceRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
}

.priceRow:last-child {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-lg);
}

.priceRow span.free {
  text-transform: uppercase;
}

.priceRow > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.priceWrapper {
  margin-top: var(--spacing-alt-sm);
}

/*      ADD ADDRESS MODAL / FORM - START   */
.addAddressFormWrapper .fdeladdr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  gap: var(--spacing-sm);
}

.fdeladdr #_idcity:focus {
  border-color: var(--gray-400);
}

#_add_address_form {
  display: none; /* hide the form initially, control with js */
}

#_add_address_form .fsec {
  gap: var(--spacing-md);
}

#_add_address_form .frow.fcontacts > div {
  min-width: calc(50% - 4px);
}

#order-confirmation-form .addpw,
#order-fulfill-form .addpw {
  display: none;
}

/* fulfill order no bank account */
.fonba {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.fonba a {
  color: var(--brand-400);
  font-size: 16px;
}

.fdeladdr .fsec {
  padding: var(--spacing-none);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.fdeladdr .fsec .frow {
  padding: var(--spacing-none);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.fdeladdr .fsec .frow .l {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-sm);
  font-size: 16px;
  color: var(--gray-700);
  width: fit-content;
  max-width: 100%;
}

.fdeladdr .fsec .frow .e,
.fdeladdr .fsec .frow .e .addr {
  margin: var(--spacing-none);
  width: 100%;
  max-width: 100%;
}

/*  add address street, house number, entrance, floor, apartment block */
.fdeladdr .fsec .fapart,
.fdeladdr .fsec .fcontacts {
  display: flex;
  flex-direction: row;
  align-items: center;
  /*justify-content:        space-between;*/
  gap: var(--spacing-md);
  width: 100%;
}

.fdeladdr .fsec .fapart > div {
  flex: 1;
}

.fdeladdr .fsec .frow.flex-between {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.fdeladdr .fsec .frow.flex-between > div {
  flex: 1;
  display: flex;
}

.fdeladdr .fsec .frow.flex-between > div .e {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.fdeladdr .fsec .fapart .fapartcell {
  width: 33%;
}

.fdeladdr > .fsec input,
.fdeladdr .fsec .fapart .fapartcell .e {
  width: 100%;
}

.fdeladdr .fsec .fapart .fapartcell:last-of-type .e input {
  width: 100% !important;
}

.fdeladdr .fsec .fstr > div.frow.top {
  width: 100%;
}

/*  add address phone block */
.fdeladdr .e input.phone[type=tel] {
  padding-left: var(--spacing-4xl);
  background: url(/img/redesign/icons/phone.svg) no-repeat 12px 11px;
  background-size: 16px 16px;
  border-radius: 6px;
}

.fdeladdr .frow .field-hint {
  margin: var(--spacing-xxs) 0 0 var(--spacing-xxs);
}

.fdeladdr .frow .field-hint span {
  font-size: 12px;
  color: var(--gray-600);
}

/*  add address additional notes block */
.fdeladdr .textareaWrapper,
.buyDeliveryNoteSection .buyDeliveryNoteInputWrapper .textareaWrapper,
.buySellerNoteSection .buySellerNoteInputWrapper .textareaWrapper {
  width: 100%;
}

.fdeladdr .textareaWrapper textarea,
.buyDeliveryNoteSection .buyDeliveryNoteInputWrapper .textareaWrapper textarea,
.buySellerNoteSection .buySellerNoteInputWrapper .textareaWrapper textarea {
  padding: var(--spacing-alt-sm) var(--spacing-md);
  width: 100%;
  overflow-y: hidden;
  min-height: 80px;
}

.buyDeliveryNoteSection .buyDeliveryNoteInputWrapper .textareaWrapper .counterVal,
.buySellerNoteSection .buySellerNoteInputWrapper .textareaWrapper .counterVal {
  bottom: 9px;
}

/*  add address save btn block */
.fdeladdr > .frow {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fdeladdr > .frow > .actbtns {
  width: 100%;
}

/*      ADD ADDRESS MODAL / FORM - END   */
.buyLoggedOutModalWrapper {
  margin: var(--spacing-xl) var(--spacing-none);
  text-align: center;
  color: var(--gray-700);
}

.buyLoggedOutModalWrapper {
  margin: var(--spacing-xl) var(--spacing-none) var(--spacing-xl);
  text-align: center;
  font-size: 16px;
  color: var(--gray-700);
}

.addrDatalist {
  border: 1px solid var(--gray-900);
  border-radius: 10px;
  margin: var(--spacing-alt-sm) var(--spacing-xl);
}

.addrDatalist .addrDatalistInfo {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.addrDatalist .addrDatalistActions {
  display: flex;
  column-gap: 10px;
}

/* Fulfill Order Modal Form */
.fom .ComboSelectorComponent {
  width: 100%;
  margin-bottom: var(--spacing-md);
  border-radius: 8px;
}

.fom .ComboSelectorComponent + .err {
  display: block;
  margin-bottom: 12px;
}

.fom .ComboSelectorComponent .me {
  min-width: 100%;
}

.fom p {
  margin-bottom: var(--spacing-sm);
}

.fom .ComboSelectorComponent .l {
  width: 100%;
}

.fom h2 {
  font-size: 14px;
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-sm);
}

.fom h2:first-child {
  margin-top: var(--spacing-none);
}

.fom p {
  margin-top: var(--spacing-none);
}

.fom .blink {
  display: block;
  margin: var(--spacing-sm) var(--spacing-none);
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
}

.fom label.cbox {
  font-weight: bold;
}

.fom .ba, .addp, .bankAccountBlock {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-xs);
  border: 1px solid var(--gray-400);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 8px;
}

.fom .ba .rgroup {
  display: none;
}

.fom .vn {
  margin-top: var(--spacing-sm);
  font-style: italic;
}

.fom .fm {
  padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-sm);
}

.fom .fm button,
.fom .fm input {
  flex: 1;
}

.actbtns,
.dmbtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing-md);
  height: 48px;
}

.dmbtns > input {
  width: 50%;
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  border-radius: var(--radius-alt-sm);
}

.dmbtns > input:first-of-type {
  color: var(--gray-900);
  background: var(--gray-300);
}

.dmbtns > input:last-of-type {
  color: var(--gray-100);
  background: var(--brand-400);
}

.actbtns #mbcnc {
  width: 30%;
}

.actbtns #submit_dlg_button {
  width: 70%;
}

.actbtns #mbcnc,
.dmbtns #mbcnc,
.ordrejsell #mbcnc,
.fom .fm button {
  padding: var(--spacing-md);
  font-size: 14px;
  background-color: var(--gray-300);
  color: var(--gray-900);
}

.actbtns #mbcnc:hover,
.dmbtns #mbcnc:hover,
.ordrejsell #mbcnc:hover,
.fom .fm button:hover {
  background-color: var(--gray-400);
}

.fom .odbtmr {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.fom .rejinf {
  font-size: 14px;
}

/* END */
.paymentMethodCell {
  margin-left: var(--spacing-alt-sm);
}

.paymentMethodCell div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.paymentMethodCell img {
  width: 42px;
  height: 24px;
  object-fit: contain;
  object-position: center;
}

.paymentMethodCell div span {
  margin: var(--spacing-none);
}

.paymentMethodList {
  padding: 15px var(--spacing-xl);
}

.pcontact .l a input[type=submit] {
  background-color: var(--gray-300);
  padding: var(--spacing-none);
  color: var(--gray-900);
  font-size: 16px;
  font-weight: bold;
}

.pcontact .l {
  padding: var(--spacing-none);
}

/*  BANK ACCOUNTS MODAL  */
/*	BANK ACCOUTNS DATALIST	*/
.pcn {
  font-size: 14px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-xl);
}

.pbankaccount .paymentMethodCell > div {
  align-items: start;
}

.pbankaccount .i.add a {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 16px;
  font-size: 16px;
}

/*	BANK ACCOUTNS DATALIST	*/
.fom .fombtn,
.rejbtns > .ordrejsell > input {
  display: inline-block;
  background-color: var(--delivery-400);
  text-align: center;
  color: var(--gray-100);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 20px;
  font-size: 14px;
  transition: background-color 0.2s linear;
}

.fom .fombtn,
.rejbtns > .ordrejsell > input {
  background-color: var(--brand-400);
  border-radius: 8px;
  padding: var(--spacing-md);
}

.fom .fombtn:hover,
.rejbtns > .ordrejsell > input:hover {
  background-color: var(--brand-300);
}

/*      BUY BUTTON BLOCK     */
/*      MyOrders page       */
.dlpo,
.dlso {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2xl) var(--spacing-none);
  border-bottom: 1px dashed var(--gray-400);
  max-width: 100%;
  gap: var(--spacing-sm);
}

.dl .dlso:last-of-type,
.dl .dlpo:last-of-type {
  border-bottom: none;
}

.dl .dlso:first-child,
.dl .dlpo:first-child {
  padding-top: var(--spacing-sm);
}

.odl {
  width: 100%;
  gap: var(--spacing-xl);
  display: flex;
  align-items: flex-start;
}

.dlso .odl {
  padding: var(--spacing-none);
}

.odl .inf {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.odl .inf > .upperInf {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.odl .inf > .upperInf > .orderTitle {
  margin: var(--spacing-none);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}

.odl .inf > .upperInf .orderNumber {
  font-size: 17px;
  font-style: normal;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--gray-900);
}

.odl .inf > .upperInf > .orderTitle span {
  padding: var(--spacing-xs) var(--spacing-alt-sm);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  border-radius: 6px;
}

.odl .inf > .upperInf > .prodTitle {
  margin: var(--spacing-none);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  color: var(--gray-800);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.odl .inf > .lowerInf {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.odl .inf > .lowerInf .orderPlacedInf,
.odl .inf > .lowerInf .toBePaidInf {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-alt-xs);
}

.odl .inf > .lowerInf .orderPlacedInf p,
.odl .inf > .lowerInf .toBePaidInf p {
  margin: var(--spacing-none);
  color: var(--gray-900);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
}

.odl .inf > .lowerInf .orderPlacedInf > .orderPlacedTitle,
.odl .inf > .lowerInf .toBePaidInf > .toBePaidInfTitle {
  background-size: 16px 16px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  padding-left: 22px;
  margin: var(--spacing-none);
}

.odl .inf > .lowerInf .orderPlacedInf > .orderPlacedTitle {
  background-image: url("/img/redesign/icons/calendar.svg");
}

.odl .inf > .lowerInf .toBePaidInf > .toBePaidInfTitle {
  background-image: url("/img/redesign/icons/price.svg");
}

.odl .thumb {
  width: 160px;
  display: flex;
  align-items: flex-start;
  margin: var(--spacing-none);
}

.odl .thumb a,
.odl .thumb a img {
  width: 100%;
}

.odl .thumb a img {
  border: 0.861px solid var(--gray-400);
  border-radius: 8px;
}

.dlso .odl .inf a.ctb,
.dlpo .odl .inf a.cts {
  font-size: 14px;
  color: var(--brand-400);
}

.dlso .odl .inf a.ctb:hover,
.dlpo .odl .inf a.cts:hover {
  color: var(--brand-300);
}

.dlso .act {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: var(--spacing-sm);
}

.dlso .act a {
  width: 140px;
  box-sizing: border-box;
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-2xl);
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s linear;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.dlso .act a.f {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.dlso .act a.f.disabled {
  background-color: var(--gray-400);
  color: var(--gray-500);
}

.dlso .act a.f:hover {
  background-color: var(--brand-300);
}

.dlso .act a.f.disabled {
  background-color: var(--gray-400);
}

.dlso .act a.r {
  background-color: var(--gray-300);
  color: var(--error-400);
}

.dlso .act a.r:hover {
  background-color: var(--gray-400);
}

.dlso .odl .appract a.fcnc {
  padding: var(--spacing-sm) var(--spacing-2xl);
  border-radius: 6px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  cursor: pointer;
  color: var(--gray-900);
  background-color: var(--gray-300);
}

/*      MyOrders page       */
/*       BUY SUCCESS MODAL      */
.buySuccessModal {
  height: 100%;
}

.buySuccessModalWrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4xl);
}

.buySuccessModalWrapper .buySuccessModalThankNote {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.02em;
  text-align: center;
}

.buySuccessModalWrapper a {
  text-align: center;
  padding: var(--spacing-md) 80px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  background-color: var(--gray-300);
  color: var(--gray-900);
  transition: background-color 0.3s ease-out;
}

.buySuccessModalWrapper a:hover {
  background-color: var(--gray-400);
}

/*       BUY SUCCESS MODAL          */
/*Order Fulfill Success Modal*/
.bosc > div:first-child span {
  display: block;
  font-size: 16px;
}

.bosm {
  padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
}

.bosm .bos {
  margin-top: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bosm .bos .bosc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bosc > div > span:first-child,
.bosm .bos .bopt .boptp span {
  margin-bottom: var(--spacing-sm);
  font-size: 20px;
  display: block;
  color: var(--gray-900);
}

.bosc > div > span:first-child {
  font-size: 24px;
  font-weight: bold;
}

.bos .bosc > h2 {
  color: var(--gray-900);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-md);
  font-style: normal;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.04em;
  text-align: center;
}

.bos .bosc > span {
  color: var(--gray-800);
  text-align: center;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-bottom: var(--spacing-md);
}

.bosm .bopl {
  width: 300px;
}

.bosm svg {
  width: 256px;
  height: 253px;
}

/*	Order Fulfill Success Modal	*/
/*      USER ADDRESSES DATA LIST    */
.addrwidget .pcontact.paddress .r {
  gap: var(--spacing-md);
}

.addrwidget .pcontact .r {
  gap: var(--spacing-sm);
  border: none;
  margin: var(--spacing-lg) var(--spacing-none);
}

.addrwidget > .pcontact .r .i {
  height: fit-content;
  width: 100%;
}

.addrwidget .pcontact .r .i {
  background-position: 0 44%;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-400);
  border-radius: 0;
}

.addrwidget .pcontact .r .i:last-child {
  border-bottom: none;
}

.addrwidget > .pcontact .r .address .addrlm {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.addrwidget > .pcontact.paddress .r .address .addrlm {
  gap: var(--spacing-md);
  padding: var(--spacing-none) var(--spacing-sm);
}

.addrwidget > .pcontact.paddress .r .address .addrlm a,
.addrwidget > .pcontact.paddress .r .address .addrlm a img,
.pcontact.pbankaccount .r .i .cardlm a,
.pcontact.pbankaccount .r .i .cardlm a img {
  width: 20px;
  height: 20px;
  line-height: 24px;
}

.addrwidget .pcontact .r .address .dai {
  text-align: start;
  margin-right: var(--spacing-none);
}

.addrwidget > .pcontact .r .i div:nth-child(2) img {
  margin: var(--spacing-none);
}

/*      USER ADDRESSES DATA LIST    */
/*      USER CARDS DATA LIST    */
.cardwidget > .pcontact .r {
  gap: var(--spacing-lg);
}

.cardwidget > .pcontact .r .i {
  padding: var(--spacing-none);
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cardwidget > .pcontact .r .i.address .paymentMethodCell div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.cardwidget > .pcontact .r .i.address .cardlm,
.cardwidget > .pcontact .r .i.address .cardlm .LineMenuComponent img,
.cardwidget > .pcontact .r .i.address .paymentMethodCell {
  margin: var(--spacing-none);
}

.cardwidget > .pcontact .i.add form .pmadd input {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 16px;
  font-size: 16px;
  color: var(--brand-400);
  background-color: var(--gray-100);
  transition: all 0.2s;
}

.cardwidget > .pcontact .i.add form .pmadd input:hover {
  background-color: var(--gray-300);
}

/*      USER CARDS DATA LIST    */
.dpmmod {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
}

.damod {
  padding-top: var(--spacing-4xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.damod h2 {
  margin-bottom: var(--spacing-sm);
}

.damod .address-preview {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
}

.damod .flex-center:first-of-type,
.dpmmod .flex-center:first-of-type {
  margin: var(--spacing-lg);
  text-align: center;
}

/*      USER CARDS DATA LIST    */
.fulfillOrderModal {
  height: 250px;
}

/*      Completed orders datalist filter        */
/*      Buyer Order Details Page        */
.odbtm {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.odbtm > div {
  width: 50%;
}

.odbtml,
.odbtmr {
  padding: var(--spacing-xl);
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid var(--gray-400);
}

.odbtml div:empty {
  display: none;
}

.odbtmr > p {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xs) var(--spacing-none);
}

.odbtml,
.oddi {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: var(--spacing-sm);
}

.odbtm .odbtmr > p {
  display: block;
  color: var(--gray-900);
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
}

.odbtmr > div p {
  margin: var(--spacing-none);
}

.odbtmr .odostp {
  border-top: 1px solid var(--gray-400);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

.odbtmr .odostp p {
  font-weight: bold;
  color: var(--gray-900);
}

.odbtml .oddi .paymentMethodCell {
  margin-left: var(--spacing-none);
}

.odbtml .oddi .paymentMethodCell div {
  justify-content: flex-start;
  gap: 4px;
}

.oddi h2 {
  font-size: 16px;
  margin-top: var(--spacing-sm);
  color: var(--gray-900);
}

.oddi .odaddr p {
  margin: var(--spacing-none);
  font-size: 14px;
}

.odt p {
  margin: var(--spacing-none);
  font-size: 14px;
}

.odt h2 {
  color: var(--gray-900);
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
}

.odpd {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 12px;
}

.odpd img {
  border-radius: 8px;
  width: 112px;
}

.odpd .odpdr a {
  color: var(--brand-400);
  font-size: 16px;
  padding: var(--spacing-none);
}

.odpd .odpdr p {
  font-size: 12px;
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}

/*      Buyer Order Details Page        */
.deldt {
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  color: var(--gray-700);
}

.dlcoh {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: rgba(242, 242, 242, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-sm);
  border-bottom: 1px solid var(--gray-400);
}

.dlcoh #crumb li a,
.dlcoh #crumb li span {
  font-size: 12px;
  line-height: 16;
  font-weight: 500;
  color: var(--gray-900);
  opacity: 0.5;
}

.dlcoh #crumb li img {
  width: 16px;
  height: 16px;
}

.dlcoh #crumb li a:hover {
  color: var(--brand-400);
  opacity: 1;
  text-decoration: none;
}

.dlcof {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
  display: flex;
  justify-content: flex-start;
}

.dlcof .ComboSelectorComponent {
  min-width: 144px;
  width: fit-content;
}

.dlcof .ComboSelectorComponent .me {
  background-color: var(--gray-300);
  border: none;
  transition: background-color 0.3s ease-out;
}

.dlcof .ComboSelectorComponent .me:hover {
  background-color: var(--gray-400);
}

@media (hover: none) {
  .dlcof .ComboSelectorComponent .me:hover {
    background-color: var(--gray-300);
    border: none;
  }
}
.dlcof .ComboSelectorComponent .l {
  width: 100%;
}

.dlcof .ComboSelectorComponent .me > div,
.dlcof .ComboSelectorComponent .l .i {
  font-size: 13px;
}

/*      Completed orders datalist filter        */
.dlcosr {
  text-align: right;
  font-size: 13px;
}

.dlcosr.appr {
  text-align: left;
}

.appract {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.oslw {
  margin: var(--spacing-none);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.psl {
  background-color: var(--accent-malachite-light);
  color: var(--accent-malachite-dark);
}

.fsl {
  background-color: var(--accent-electricBlue-light);
  color: var(--accent-electricBlue-dark);
}

.asl {
  background-color: var(--accent-lime-light);
  color: var(--accent-lime-dark);
}

.dsl {
  background-color: var(--accent-tropicalIndigo-light);
  color: var(--accent-tropicalIndigo-dark);
}

.csl {
  background-color: var(--accent-argentinaBlue-light);
  color: var(--accent-argentinaBlue-dark);
}

.rsl {
  background-color: var(--accent-electricRaspberry-light);
  color: var(--accent-electricRaspberry-dark);
}

.cbsl {
  background-color: var(--accent-aerospaceOrange-light);
  color: var(--accent-aerospaceOrange-dark);
}

.asl svg {
  width: 14px;
  height: 14px;
  margin-right: var(--spacing-sm);
  animation: spin 1.5s linear infinite;
}

.asl svg path {
  fill: var(--delivery-400);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.admordcnc {
  background-color: var(--gray-400);
  opacity: 0.6;
  cursor: not-allowed;
}

.sorm .rejreaswrapper > p {
  margin-top: var(--spacing-none);
}

.rejbtns,
.ordrejsell {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
}

.rejbtns > .ordrejsell > input {
  min-width: 100%;
}

.sorm .rejinf {
  font-size: 14px;
}

#product_confirmation_sec {
  display: none;
}

#product_confirmation_sec .product_confirmation_sec_dtls {
  margin: var(--spacing-none) var(--spacing-xl) var(--spacing-none) var(--spacing-2xl);
  font-size: 14px;
  color: var(--gray-600);
}

.pagetab > span.dot {
  z-index: -1;
}

.dot {
  position: relative;
  display: inline-block;
}

.pagetab > .dot::after, .dot::after {
  display: inline-block;
  content: "";
  border-radius: 50%;
  background-color: var(--delivery-400);
  width: 6px;
  height: 6px;
  position: absolute;
  top: 6px;
  right: 12px;
  left: unset;
}

#tabmenu .dot::after {
  top: 0;
  right: -10px;
}

.add-email-banner {
  padding: var(--spacing-lg);
  border-radius: 8px;
  background-color: var(--brand-100);
  margin: var(--spacing-alt-sm) var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
  white-space: normal !important;
}

.dle .add-email-banner.pending-ads {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.dle .add-email-banner.pending-ads .blink-cont .blink {
  font-size: 14px;
  font-weight: 500;
}

.dle .add-email-banner {
  margin: var(--spacing-lg);
}

.add-email-banner, .add-email-banner span {
  font-size: 14px;
  margin-top: var(--spacing-none);
}

.add-email-banner:hover {
  background-color: var(--brand-200);
}

.add-email-banner + .blink {
  margin-top: var(--spacing-none);
  margin-bottom: var(--spacing-none);
}

.blink-cont {
  margin-top: var(--spacing-alt-sm);
  padding: var(--spacing-none);
}

.blink-cont .blink {
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  font-weight: bold;
}

#ph .verify-account {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray-900);
  margin-right: var(--spacing-xl);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  text-decoration: none;
  border-radius: 20px;
  text-align: center;
  border: 2px dotted var(--error-500);
}

.verify-account-banner {
  padding: var(--spacing-lg);
  background-color: var(--error-100);
  margin-top: -4px;
}

a.verify-button, .eacctype > a.account-type-change-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--accent-electricRaspberry);
  border-radius: 12px;
  color: var(--gray-100);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  display: inline-block;
  cursor: pointer;
}

a.verify-button:hover {
  background-color: rgba(255, 65, 116, 0.85);
}

a.verify-button.imid {
  background-color: var(--success-400);
  opacity: 1;
  border-radius: var(--radius-sm);
  width: fit-content;
}

a.verify-button.imid:hover {
  background-color: var(--success-400);
  opacity: 0.9;
}

a.verify-company-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--accent-tropicalIndigo);
  border-radius: 12px;
  color: var(--gray-100);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  display: inline-block;
  cursor: pointer;
}

a.verify-company-button:hover {
  background-color: rgb(from var(--accent-tropicalIndigo) r g b/0.85);
}

.eacctype > a.account-type-change-btn {
  margin-left: 52px;
  background-color: var(--brand-400);
}

.eacctype > a.account-type-change-btn:hover {
  background-color: var(--brand-300);
}

.verify-account-banner .verify-button {
  font-size: 10px;
}

.verify-account-banner p {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xxs);
  color: var(--gray-900);
  font-size: 12px;
}

.verify-account-banner .message {
  font-weight: 600;
  text-wrap: wrap;
  color: var(--error-500);
}

.verify-account-banner .text {
  text-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

/* profile: verification form element */
.user-verified-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.user-verified-badge .not-verified {
  margin-right: var(--spacing-lg);
  color: var(--gray-500);
}

.user-verified-badge .icon-verified {
  margin-right: var(--spacing-xs);
}

.username .icon-verified,
.dlrev .icon-verified,
.username .icon-company-verified {
  margin-left: var(--spacing-xs);
}

.username .icon-company-verified {
  width: 14px;
  height: 14px;
}

.icon {
  min-width: 15px;
  min-height: 17px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.icon-verified, .icon-verified-blue {
  background-image: url(/img/redesign/icons/verified-user-green.svg);
  min-width: 14px;
  min-height: 14px;
  width: 14px;
  height: 14px;
}

.icon-verified-blue {
  background-image: url(/img/redesign/icons/verified-user-blue.svg);
}

.user-verified-badge.verified {
  background-color: var(--success-100);
  padding: var(--spacing-alt-xs) var(--spacing-alt-sm) var(--spacing-alt-xs) var(--spacing-alt-xs);
  width: max-content;
  border-radius: var(--radius-xs);
  user-select: none;
  transition: all 0.2s ease-in-out;
}

.user-verified-badge.verified.pointer:hover {
  background-color: var(--success-200);
}

.user-verified-badge.blue.verified {
  background: var(--brand-100);
}

.user-verified-badge.blue.verified.pointer:hover {
  background: var(--brand-200);
}

.user-verified-badge .label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--success-500);
}

.user-verified-badge .label.gray {
  color: var(--gray-500);
  font-size: 14px;
  padding: 0px 5px;
}

.user-verified-badge.blue .label {
  color: var(--brand-400);
}

.start-verification-modal {
  margin-bottom: var(--spacing-md);
  align-items: start;
  flex-direction: column;
}

.start-verification-modal .icon {
  width: 19px;
  height: 19px;
}

.start-verification-modal .icon-gov-name {
  background-image: url(/img/gov-name.svg);
  min-width: 24px;
  min-height: 24px;
  flex: 1;
  margin-right: 5px;
}

.start-verification-modal .gov-info {
  display: flex;
  flex-direction: row;
  margin-top: var(--spacing-6xl);
}

.start-verification-modal .gov-info-text {
  font-size: 16px;
}

.start-verification-modal .icon-users {
  background-image: url(/img/users.svg);
}

.start-verification-modal .icon-rocket {
  background-image: url(/img/rocket.svg);
}

.start-verification-modal .icon-key {
  background-image: url(/img/key.svg);
}

.start-verification-modal .title {
  font-weight: bold;
  font-size: 26px;
  line-height: 40px;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.add-badge-container {
  display: flex;
  padding: var(--spacing-lg);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--radius-sm);
  background-color: var(--gray-300);
}

.add-badge-text {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

.add-badge-btn {
  color: var(--brand-400);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

.benefits {
  align-items: stretch;
  gap: var(--spacing-md);
}

.start-verification-modal .benefit-cont {
  background-color: var(--gray-200);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: 12px;
  flex: 1;
  align-items: start;
}

.start-verification-modal .description {
  margin-top: var(--spacing-none);
  line-height: 28px;
  font-size: 16px;
}

.start-verification-modal .label {
  font-size: 12px;
  line-height: 16px;
  margin-top: var(--spacing-md);
}

.start-verification-modal .requirements-cont {
  margin: var(--spacing-2xl) var(--spacing-none) var(--spacing-4xl);
}

.start-verification-modal .requirements-cont p:first-child {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 18px;
  font-weight: bold;
}

.requirements-cont p:first-child ~ p {
  font-size: 16px;
  line-height: 26px;
  margin: var(--spacing-xs) var(--spacing-none);
}

.start-verification-modal .requirements-cont > p:last-child {
  margin-top: var(--spacing-6xl);
}

.start-verification-modal .action-buttons > * {
  font-size: 16px;
  line-height: 20px;
  background-color: var(--brand-400);
  color: var(--gray-100);
  padding: var(--spacing-lg);
  border-radius: 6px;
  margin: var(--spacing-none);
  text-align: center;
  flex: 2.2;
}

.start-verification-modal .start-button {
  transition: background-color 0.2s;
}

.start-verification-modal .start-button:hover {
  background-color: var(--brand-300);
}

.start-verification-modal .cancel-button {
  background-color: var(--gray-300);
  color: var(--gray-900);
  transition: background-color 0.2s;
  flex: 1;
}

.start-verification-modal .cancel-button:hover {
  background-color: var(--gray-400);
}

.start-verification-modal .action-buttons {
  align-items: stretch;
  gap: var(--spacing-xl);
  width: 100%;
}

.main_logo {
  background: url(/img/redesign/logo.svg) no-repeat;
}

.frow.fdinf {
  padding: var(--spacing-none);
  margin: -4px var(--spacing-none) var(--spacing-lg);
}

.frow.fdinf > .e {
  color: var(--gray-600);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.frow.fdinf > .e.p {
  margin-top: var(--spacing-sm);
}

#post_delivery_section {
  display: none;
}

#post_delivery_section label.cbox {
  align-items: center;
}

#post_delivery_section label.cbox > div:first-child {
  margin-right: var(--spacing-alt-xs);
}

#post_delivery_section label.cbox > div {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.15px;
}

#post_delivery_section label.cbox > div input:focus-visible {
  outline: none;
}

#post_negotiable_section div.t {
  font-weight: 700;
  font-size: 16px;
}

#post_negotiable_section .fdinf + .frow {
  padding-top: var(--spacing-none);
}

.delivery-disabled {
  opacity: 0.3;
}

.delivery-disabled label.cbox,
.delivery-disabled label.cbox > div {
  cursor: auto;
}

#post_delivery_section input[type=checkbox] ~ span {
  background-color: var(--gray-100);
}

/* Inline edit element */
.inline-edit-wrapper > .inline-view-mode,
.inline-edit-wrapper > .inline-edit-mode,
.inline-edit-wrapper > .inline-edit-mode .edit-mode-btns {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: space-between;
  position: relative;
}

.inline-edit-wrapper > .inline-edit-mode .edit-mode-btns .save-btn-container {
  position: relative;
}

.inline-edit-wrapper > .inline-edit-mode .edit-mode-btns .save-btn-container img {
  display: none;
  position: absolute;
  width: 16px;
  height: 16px;
  left: calc(50% - 8px);
  top: calc(50% - 8px);
}

.inline-edit-wrapper > .inline-edit-mode.loading .edit-mode-btns .save-btn-container > input {
  color: var(--brand-400);
}

.inline-edit-wrapper > .inline-edit-mode.loading .edit-mode-btns .save-btn-container img {
  display: block;
}

.inline-edit-wrapper > .inline-view-mode > .initial-text-wrapper {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
}

.inline-edit-wrapper > .inline-view-mode > .initial-text-wrapper .initial-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.inline-edit-wrapper > .inline-view-mode > .initial-text-wrapper > img {
  width: 20px;
  height: 20px;
  display: none;
}

.inline-edit-wrapper > .inline-view-mode.show-success > .initial-text-wrapper > .initial-text {
  color: var(--success-400);
}

.inline-edit-wrapper > .inline-view-mode.show-success > .initial-text-wrapper > img.success-icon {
  display: block;
}

.inline-edit-wrapper > .inline-view-mode .edit-btn,
.inline-edit-wrapper > .inline-view-mode .edit-btn > img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.inline-edit-wrapper > .inline-edit-mode .edit-mode-btns > .save-btn-container > .save-btn,
.inline-edit-wrapper > .inline-edit-mode .edit-mode-btns > .cancel-btn {
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  border-radius: var(--spacing-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  height: 42px;
}

.inline-edit-wrapper > .inline-edit-mode .edit-element-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.inline-edit-wrapper > .inline-edit-mode .edit-element-wrapper > .error-msg {
  padding-left: var(--spacing-xxs);
  color: var(--error-400);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  display: none;
}

.inline-edit-wrapper > .inline-edit-mode.show-error .edit-element-wrapper > .error-msg {
  display: block;
}

.inline-edit-wrapper > .inline-edit-mode.show-error .edit-element-wrapper input[type=text],
.inline-edit-wrapper > .inline-edit-mode.show-error .edit-element-wrapper .ComboSelectorComponent > .me {
  border-color: var(--error-400);
}

.inline-edit-wrapper > .inline-edit-mode .edit-element-wrapper > .ComboSelectorComponent,
.inline-edit-wrapper > .inline-edit-mode .edit-element-wrapper > .ComboSelectorComponent.open > .l {
  width: 100%;
}

.inline-edit-wrapper > .inline-edit-mode .edit-mode-btns > .cancel-btn {
  color: var(--gray-900);
  background-color: var(--gray-300);
}

.inline-edit-wrapper > .inline-edit-mode .edit-mode-btns > .cancel-btn:hover {
  background-color: var(--gray-400);
}

.inline-edit-wrapper > .inline-edit-mode .edit-element-loading {
  display: none;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(256, 256, 256, 0.3);
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.inline-edit-wrapper > .inline-edit-mode.loading .edit-element-loading {
  display: flex;
  opacity: 1;
}

.inline-edit-wrapper > .inline-edit-mode.loading {
  pointer-events: none;
}

.avatar-inline-edit-container {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.avatar-inline-edit-container .err {
  flex: 1;
}

.paupload div a {
  padding: var(--spacing-none);
}

.paupload div a:hover {
  background-color: var(--gray-100);
}

.paupload div a > img {
  width: 20px;
  height: 20px;
}

.avatar-edit-action-btns {
  display: flex;
  gap: var(--spacing-md);
  margin-left: auto;
}

.frow.hide-display-name-container {
  padding-top: var(--spacing-none);
}

.frow.hide-display-name-container > .e {
  position: relative;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.frow.hide-display-name-container > .l {
  visibility: hidden;
}

.frow.hide-display-name-container > .e > label > div {
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  color: var(--gray-700);
}

.frow.hide-display-name-container .loading-overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(256, 256, 256, 0.3);
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.frow.hide-display-name-container.loading {
  pointer-events: none;
}

.frow.hide-display-name-container.loading .loading-overlay {
  display: block;
}

.frow.hide-display-name-container .loading-gif {
  display: none;
  width: 14px;
  height: 14px;
}

.frow.hide-display-name-container.loading .loading-gif {
  display: block;
}

.frow.hide-display-name-container.show-success > .e > label > div {
  color: var(--success-400);
}

.frow.hide-display-name-container .success-icon {
  display: none;
  width: 14px;
  height: 14px;
}

.frow.hide-display-name-container.show-success .success-icon {
  display: block;
}

.frow.hide-display-name-container.show-error > .e > label > div {
  color: var(--error-400);
}

.frow.hide-display-name-container .error-icon {
  display: none;
  width: 14px;
  height: 14px;
}

.frow.hide-display-name-container.show-error .error-icon {
  display: block;
}

#panel_au_idyour_avatarupload {
  display: block !important;
}

.avatar-inline-edit-container + div {
  display: none;
}

/* End of Inline edit element */
.page_process_payment {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.page_process_payment > *:not(.loading) {
  display: none;
}

/*------------------------------------------------------------*/
/*rollover image slider*/
.tslider {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--spacing-none) !important;
  display: flex;
  flex-direction: row;
}

/*sections*/
.tslider > div {
  flex: 1;
  display: flex;
  align-items: end;
  z-index: 1;
}

/*number photos info container*/
.tslider > span.inf {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--gray-900) 90;
  color: var(--gray-100);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 16px;
}

.tslider > span.inf > img {
  width: 32px;
  height: 32px;
  background-color: transparent;
  margin-bottom: var(--spacing-sm);
}

/*dots container*/
.tslider > span.d {
  flex: 1;
  display: none;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease-out;
  z-index: 0;
}

/*dots*/
.tslider > span.d > div {
  width: 6px;
  height: 6px;
  margin: var(--spacing-none) 3px;
  opacity: 0.6;
  border: 1px solid var(--gray-400);
  border-radius: 50%;
  background-color: var(--gray-900);
}

.tslider > span.d > div.sel {
  opacity: 1;
  border: 1px solid var(--gray-900);
  background-color: var(--gray-300);
}

.tslider:hover > span.d {
  display: flex;
}

/*------------------------------------------------------------*/
/*	Secondary header in homepage	*/
#secondary-header-wrapper {
  background-image: linear-gradient(to bottom, var(--gray-900), var(--gray-900), var(--gray-900));
  display: flex;
  justify-content: center;
  align-items: center;
}

#secondary-header {
  width: 1140px;
  max-width: 1140px;
  height: var(--secondary-header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#secondary-header .first-group-container,
#secondary-header .second-group-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

@media screen and (max-width: 1130px) {
  #secondary-header .second-group-container {
    padding-right: var(--spacing-4xl);
  }
}
.secondary-header__item {
  color: var(--gray-400);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

.secondary-header__item:visited {
  color: var(--gray-400);
}

.secondary-header__item:hover {
  color: var(--gray-100);
  text-decoration-line: underline;
}

#secondary-header .become-seller-container:visited,
#secondary-header .become-seller-container {
  background-color: var(--gray-800);
  color: var(--gray-100);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 100px;
  transition: background 0.3s ease-in-out;
}

#secondary-header .become-seller-container:hover {
  background: var(----grey-700, #5A5A62);
}

@media screen and (max-width: 1270px) {
  #secondary-header {
    width: 1000px;
  }
}
@media (hover: none) {
  #secondary-header > div > a:hover {
    color: var(--gray-100);
  }
}
/*	Secondary header in homepage	*/
/*	Secondary header about delivery modal	*/
.instructions-btn-wrapper {
  width: 100%;
  box-sizing: border-box;
  /*  TODO: leave commented until modal redesign  @gohar*/
  /*display:         flex;*/
  /*justify-content: space-between;*/
  /*gap:             12px;*/
  /*align-items:     center;*/
}

.instructions-btn-wrapper a:focus-visible {
  outline: none;
}

.instructions-btn-wrapper .become-seller-btn {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

.instructions-btn-wrapper .become-seller-btn:hover {
  background-color: var(--gray-400);
}

/*	Secondary header about delivery modal	*/
/*	Empty seller bucket	*/
.oles {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  gap: var(--spacing-lg);
}

.oles a {
  cursor: pointer;
}

.oles .new-bucket-become-seller-link {
  padding: var(--spacing-none);
  color: var(--brand-400);
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.34px;
  text-decoration-line: underline;
}

/*	Empty seller bucket	*/
/*Self service wrapper in new bucket*/
.self-service-wrapper,
.self-service-wrapper > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.self-service-wrapper {
  width: 848px;
  padding: var(--spacing-lg);
  border-radius: 8px;
  background-color: var(--brand-100);
}

.self-service-wrapper > div {
  gap: var(--spacing-sm);
}

.self-service-wrapper > div > .primary-title {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.15px;
}

.self-service-wrapper > div > span:not(.primary-title) {
  color: var(--gray-800);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.self-service-wrapper > .complete-registration-link {
  color: var(--brand-400);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.3px;
}

.header-not-fixed {
  position: absolute !important;
}

.header-not-fixed.with-border {
  border: none !important;
}

/*Self serve touchpoint in post add form*/
.post-add-self-serve-touchpoint-section {
  display: none;
}

.post-add-self-serve-touchpoint-wrapper {
  border-radius: 12px;
  background-color: #EDEDED;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-4xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-add-self-serve-touchpoint-wrapper > .delivery-moto-img {
  height: 272px;
}

.benefit-section-wrapper {
  padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-2xl) var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.title-section-wrapper h3 {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
  color: var(--gray-900);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.32px;
}

.title-section-wrapper span {
  color: var(--gray-800);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.title-section-wrapper > div {
  display: none;
}

.benefit-section-wrapper p {
  margin: var(--spacing-none);
  color: var(--gray-900);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.26px;
}

.benefit-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.benefit-list > p > img {
  width: 14px;
  height: 14px;
  margin-right: var(--spacing-sm);
}

#start-selling-btn {
  width: fit-content;
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  background-color: var(--delivery-400);
  border-radius: 8px;
  cursor: pointer;
  color: var(--gray-100);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.26px;
  transition: background-color 0.3s ease-out;
}

#start-selling-btn:hover {
  background-color: var(--delivery-300);
  color: var(--gray-100);
}

.hide-section-img {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/*Self serve touchpoint in post add form*/
.start-selling-modal-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.start-selling-modal-wrapper .seller-options-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--spacing-xl);
}

.start-selling-modal-wrapper .primary-title {
  color: var(--gray-900);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
}

.start-selling-modal-wrapper > div > span {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.start-selling-modal-wrapper .seller-options-wrapper > div {
  width: 50%;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 12px;
  background: var(--gray-300);
  transition: background-color 0.3s ease-out;
}

.start-selling-modal-wrapper .seller-options-wrapper > div svg {
  margin-bottom: var(--spacing-lg);
}

.start-selling-modal-wrapper .seller-options-wrapper > div svg .box {
  transition: fill 0.3s ease-out;
}

.start-selling-modal-wrapper .seller-options-wrapper #selling-own-items,
.start-selling-modal-wrapper .seller-options-wrapper #running-a-business,
.start-selling-modal-wrapper .seller-options-wrapper #selling-own-items > div,
.start-selling-modal-wrapper .seller-options-wrapper #running-a-business > div,
.start-selling-modal-wrapper .seller-options-wrapper > div h3,
.start-selling-modal-wrapper .seller-options-wrapper > div span {
  cursor: pointer;
}

.start-selling-modal-wrapper .seller-options-wrapper > div h3 {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xxs);
  transition: color 0.3s ease-out;
}

.start-selling-modal-wrapper .seller-options-wrapper > div > span {
  color: var(--gray-700);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.start-selling-modal-wrapper .become-partner-btn p {
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--error-400);
  margin: var(--spacing-none);
  display: none;
}

.start-selling-modal-wrapper .become-partner-btn button {
  margin-top: var(--spacing-xl);
  border-radius: 8px;
  background: var(--brand-400);
  padding: var(--spacing-md) var(--spacing-lg);
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.3px;
}

.start-selling-modal-wrapper .become-partner-btn button:disabled {
  background-color: var(--gray-400);
  color: var(--gray-500);
}

.seller-options-wrapper > div.activeBlockOption,
.seller-options-wrapper > div:not(.disabled):hover {
  background-color: var(--brand-100);
  cursor: initial;
}

.seller-options-wrapper > .inActiveBlockOption:not(.disabled):hover {
  background: var(--gray-300);
  opacity: 1;
}

.seller-options-wrapper > .inActiveBlockOption:not(.disabled):hover svg:last-of-type {
  opacity: 0;
}

.seller-options-wrapper > .inActiveBlockOption:not(.disabled):hover svg:first-of-type {
  opacity: 1;
}

.seller-options-wrapper > div > div > svg {
  transition: opacity 0.3s ease-out;
}

.seller-options-wrapper > div div {
  position: relative;
}

.seller-options-wrapper > div svg:first-of-type {
  opacity: 1;
}

.seller-options-wrapper > div svg:last-of-type {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.seller-options-wrapper > .inActiveBlockOption svg:first-of-type,
.seller-options-wrapper > .activeBlockOption svg:last-of-type {
  opacity: 0;
}

.seller-options-wrapper > .activeBlockOption svg:first-of-type,
.seller-options-wrapper > .inActiveBlockOption svg:last-of-type {
  opacity: 1;
}

.seller-options-wrapper > .inActiveBlockOption:not(.disabled):hover {
  opacity: 1;
}

.seller-options-wrapper > div > h3.activeTextOption,
.seller-options-wrapper > div:not(.disabled):hover h3 {
  color: var(--brand-400);
}

.seller-options-wrapper > div.inActiveBlockOption,
.seller-options-wrapper > div.inActiveBlockOption > h3 {
  opacity: 0.8;
}

/*Main section in B2C landing page*/
.self-serve-landing-page-wrapper {
  overflow-x: hidden;
  margin-top: var(--spacing-6xl);
}

.self-serve-landing-page-wrapper > div:not(.flex-center) {
  margin-bottom: 160px;
}

@media screen and (max-width: 1024px) {
  .self-serve-landing-page-wrapper > div {
    margin-top: var(--spacing-none);
    margin-bottom: 52px;
  }
}
#self-serve-main-section-wrapper {
  width: 100%;
  height: calc(100vh - 72px);
  overflow-x: visible;
}

@media screen and (max-width: 1130px) {
  #self-serve-main-section-wrapper {
    margin-left: unset;
  }
}
#self-serve-main-section-wrapper .self-serve-main-section {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-10xl);
  position: relative;
}

#self-serve-main-section-wrapper .self-serve-main-section .info-section .hero-wrapper {
  display: none;
}

#self-serve-main-section-wrapper .self-serve-main-section .info-section {
  /*width: 626px;*/
  width: 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4xl);
}

#self-serve-main-section-wrapper .self-serve-main-section .info-section > h1,
#self-serve-main-section-wrapper .self-serve-main-section .info-section > h1 span {
  color: var(--gray-900);
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: 64px;
  letter-spacing: -0.96px;
}

#self-serve-main-section-wrapper .self-serve-main-section .info-section > h1 {
  position: relative;
}

#self-serve-main-section-wrapper .self-serve-main-section .info-section > h1 span {
  color: var(--brand-400);
}

#self-serve-main-section-wrapper .self-serve-main-section .info-section .delivery-notice {
  color: var(--gray-700);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.32px;
  margin-bottom: var(--spacing-none);
}

#self-serve-main-section-wrapper .self-serve-main-section .info-section > span {
  /*width: 586px;*/
  color: var(--gray-900);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.4px;
  margin-bottom: var(--spacing-md);
}

#self-serve-landing-cta {
  padding: var(--spacing-xl) var(--spacing-6xl);
  width: fit-content;
  border-radius: 16px;
  background: var(--delivery-400);
  color: var(--gray-100) !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.4px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}

#self-serve-landing-cta:hover {
  background-color: var(--delivery-300);
}

#self-serve-main-section-wrapper .self-serve-main-section .hero-wrapper {
  /*width: 742px;*/
  /*height: 677px;*/
  width: 45%;
  height: inherit;
  border-radius: 64px 0 0 64px;
  background-image: url("/img/redesign/icons/sellers_self_service/main-section-hero.jpg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  position: absolute;
  right: 0;
}

@media (hover: none) {
  #self-serve-landing-cta:hover {
    background-color: var(--delivery-400);
  }
}
@media screen and (max-width: 1270px) {
  #self-serve-main-section-wrapper {
    margin-left: auto;
  }
  #self-serve-main-section-wrapper .self-serve-main-section {
    width: 100%;
    gap: 88px;
  }
  #self-serve-main-section-wrapper .self-serve-main-section .hero-wrapper {
    height: 500px;
  }
  #self-serve-main-section-wrapper .self-serve-main-section .info-section {
    width: 50%;
    gap: var(--spacing-2xl);
  }
  #self-serve-main-section-wrapper .self-serve-main-section .info-section h1,
  #self-serve-main-section-wrapper .self-serve-main-section .info-section h1 span {
    font-size: 42px;
    letter-spacing: -0.84px;
  }
  #self-serve-main-section-wrapper .self-serve-main-section .info-section > span {
    width: auto;
    font-size: 22px;
    letter-spacing: -0.44px;
  }
}
/*	Main section in B2C landing page	*/
/*	Benefits section in B2C landing page	*/
#self-serve-benefit-section-wrapper,
.self-serve-benefit-section {
  box-sizing: border-box;
}

.self-serve-benefit-section {
  display: flex;
  gap: var(--spacing-2xl);
}

#self-serve-benefit-section-wrapper h2 {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-6xl);
  text-align: center;
  color: var(--gray-900);
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: -0.8px;
}

.self-serve-benefit-section .benefit-col-one,
.self-serve-benefit-section .benefit-col-two,
.self-serve-benefit-section .benefit-col-three {
  width: 33%;
  height: 100%;
}

.self-serve-benefit-section .benefit-col-one > div,
.self-serve-benefit-section .benefit-col-two > div,
.self-serve-benefit-section .benefit-col-three > div {
  position: relative;
  box-sizing: border-box;
  padding: var(--spacing-4xl) var(--spacing-4xl) var(--spacing-none);
  border-radius: 24px;
}

.self-serve-benefit-section h4,
.individual-benefit-section h4 {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  color: var(--gray-900);
  font-size: 17px;
  font-style: normal;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -0.17px;
}

.self-serve-benefit-section span,
.individual-benefit-section span {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.14px;
}

.self-serve-benefit-section .benefit-col-one > .benefit-brand-awareness {
  margin-bottom: var(--spacing-4xl);
  height: 534px;
  background: url("/img/redesign/icons/sellers_self_service/benefit-brand-awareness.jpg") no-repeat center/cover;
}

.self-serve-benefit-section .benefit-col-one > .benefit-promotional-tools {
  height: 284px;
  background: url("/img/redesign/icons/sellers_self_service/benefit-promotional-tools.jpg") no-repeat center/cover;
}

.self-serve-benefit-section .benefit-col-two > .benefit-secure-transactions {
  margin-bottom: 29px;
  height: 361px;
  background: url("/img/redesign/icons/sellers_self_service/benefit-secure-transactions.jpg") no-repeat center/cover;
}

.self-serve-benefit-section .benefit-col-two > .benefit-cost-effectiveness {
  height: 460px;
  background: url("/img/redesign/icons/sellers_self_service/benefit-cost-effectiveness.jpg") no-repeat center/cover;
}

.self-serve-benefit-section .benefit-col-three > .benefit-increased-sales {
  margin-bottom: 26px;
  height: 304px;
  background: url("/img/redesign/icons/sellers_self_service/benefit-increased-sales.jpg") no-repeat center/cover;
}

.self-serve-benefit-section .benefit-col-three > .benefit-sales-management-and-analytical-tools {
  height: 520px;
  background: url("/img/redesign/icons/sellers_self_service/benefit-sales-management-and-analytical-tools.jpg") no-repeat center/cover;
}

.self-serve-benefit-section .benefit-col-one > div::before,
.self-serve-benefit-section .benefit-col-two > div::before,
.self-serve-benefit-section .benefit-col-three > div::before,
.individual-benefit-section .benefit-col-one > div::before,
.individual-benefit-section .benefit-col-two > div::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 24px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: black;
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease-out;
}

.self-serve-benefit-section .benefit-col-one > div:hover::before,
.self-serve-benefit-section .benefit-col-two > div:hover::before,
.self-serve-benefit-section .benefit-col-three > div:hover::before,
.individual-benefit-section .benefit-col-one > div:hover::before,
.individual-benefit-section .benefit-col-two > div:hover::before {
  opacity: 20%;
}

@media (hover: none) {
  .self-serve-benefit-section .benefit-col-one > div:hover::before,
  .self-serve-benefit-section .benefit-col-two > div:hover::before,
  .self-serve-benefit-section .benefit-col-three > div:hover::before,
  .individual-benefit-section .benefit-col-one > div:hover::before,
  .individual-benefit-section .benefit-col-two > div:hover::before {
    opacity: 0;
  }
}
@media screen and (max-width: 1024px) {
  #self-serve-benefit-section-wrapper h2 {
    font-size: 32px;
    letter-spacing: -0.64px;
    margin-bottom: var(--spacing-4xl);
  }
}
/*	Benefits section in B2C landing page	*/
.individual-benefit-section {
  display: flex;
  gap: var(--spacing-2xl);
}

.individual-benefit-section .benefit-col-one {
  width: 744px;
}

.individual-benefit-section .benefit-col-two {
  width: 372px;
}

.individual-benefit-section .benefit-col-one > div,
.individual-benefit-section .benefit-col-two > div {
  position: relative;
}

.individual-benefit-section .benefit-col-one > .benefit-potential-buyers-flow {
  background: url("/img/redesign/icons/sellers_self_service/benefit-potential-buyers-flow.jpg") no-repeat center/cover;
  width: 100%;
  height: 244px;
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-4xl) var(--spacing-none) var(--spacing-none) var(--spacing-4xl);
  box-sizing: border-box;
}

.individual-benefit-section .benefit-col-one > .benefit-potential-buyers-flow span {
  width: 341px;
  display: block;
}

.individual-benefit-section .benefit-col-one > div:last-of-type {
  display: flex;
  gap: var(--spacing-2xl);
}

.individual-benefit-section .benefit-col-one > div:last-of-type > div {
  height: 400px;
}

.individual-benefit-section .benefit-col-one > div:last-of-type > .benefit-control-and-empowerment {
  background: url("/img/redesign/icons/sellers_self_service/benefit-control-and-empowerment.jpg") no-repeat center/cover;
  padding: var(--spacing-4xl) var(--spacing-4xl) var(--spacing-none) var(--spacing-4xl);
  box-sizing: border-box;
  width: 380px;
}

.individual-benefit-section .benefit-col-one > div:last-of-type > .benefit-promotional-tools {
  background: url("/img/redesign/icons/sellers_self_service/benefit-promotional-tools-for-individuals.jpg") no-repeat center/cover;
  padding: var(--spacing-4xl) var(--spacing-4xl) var(--spacing-none) var(--spacing-4xl);
  box-sizing: border-box;
  width: 340px;
}

.individual-benefit-section .benefit-col-two > .benefit-secure-payments {
  background: url("/img/redesign/icons/sellers_self_service/benefit-secure-payments.jpg") no-repeat center/cover;
  padding: var(--spacing-4xl) var(--spacing-4xl) var(--spacing-none) var(--spacing-4xl);
  margin-bottom: var(--spacing-3xl);
  height: 322px;
  box-sizing: border-box;
}

.individual-benefit-section .benefit-col-two > .benefit-trust {
  background: url("/img/redesign/icons/sellers_self_service/benefit-trust.jpg") no-repeat center/cover;
  padding: var(--spacing-4xl) var(--spacing-4xl) var(--spacing-none) var(--spacing-4xl);
  height: 318px;
  box-sizing: border-box;
}

/*	Instruction steps self serve landing page	*/
.self-serve-instructions-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.delivery-flow-steps {
  height: 60vh;
  width: 1048px;
  display: grid;
  grid-template-columns: repeat(4, 25%);
}

.delivery-flow-steps-mobile {
  display: none;
}

#self-serve-instructions-section-wrapper {
  height: 864px;
  padding: 80px var(--spacing-none);
  margin: var(--spacing-none) var(--spacing-6xl) 80px;
  background-color: #eeeced;
  border-radius: 64px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  position: relative;
}

#self-serve-instructions-section-wrapper img {
  width: 50%;
  border-radius: 64px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#self-serve-instructions-section-wrapper h1 {
  width: 100%;
  margin-bottom: 50px;
  color: var(--gray-900);
  text-align: center;
  font-size: 44px;
  font-style: normal;
  font-weight: 800;
  line-height: 80px;
  letter-spacing: -0.88px;
  z-index: 1;
}

#self-serve-instructions-section-wrapper > div {
  position: relative;
  width: 100%;
  height: 100%;
}

.delivery-flow-steps .steps {
  height: fit-content;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px 0 rgba(129, 106, 91, 0.15);
  backdrop-filter: blur(12.5px);
  padding: var(--spacing-2xl) var(--spacing-4xl);
  position: absolute;
  box-sizing: border-box;
}

#self-serve-instructions-section-wrapper > .self-serve-instructions-section > .delivery-flow-steps > div > .step-one {
  width: 179px;
}

#self-serve-instructions-section-wrapper > .self-serve-instructions-section > .delivery-flow-steps > div > .step-two {
  width: 260px;
}

#self-serve-instructions-section-wrapper > .self-serve-instructions-section > .delivery-flow-steps > div > .step-three {
  width: 227px;
}

#self-serve-instructions-section-wrapper > .self-serve-instructions-section > .delivery-flow-steps > div > .step-four {
  width: 308px;
}

#self-serve-instructions-section-wrapper > .self-serve-instructions-section > .delivery-flow-steps > div > .step-five {
  width: 335px;
}

.delivery-flow-steps > div {
  position: relative;
}

.arrows {
  position: absolute;
  z-index: 10;
}

.delivery-flow-steps .steps > span {
  color: var(--gray-900);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.36px;
}

.arrow-step-one svg path,
.arrow-step-two svg path,
.arrow-step-three svg path,
.arrow-step-four svg path {
  transition: fill 300ms ease-out;
}

.self-serve-instructions-section:hover svg > path {
  fill: var(--brand-400);
}

@media (hover: none) {
  .self-serve-instructions-section:hover svg > path {
    fill: black;
  }
}
@media screen and (max-width: 1920px) {
  .self-serve-instructions-section img {
    transform: translateY(-15%);
  }
}
@media screen and (max-width: 1440px) {
  .delivery-flow-steps {
    transform: scale(1.02);
    will-change: transform;
  }
  .self-serve-instructions-section img {
    transform: translateY(20%);
  }
}
@media screen and (max-width: 1130px) {
  #self-serve-instructions-section-wrapper {
    margin: var(--spacing-none) var(--spacing-md) 52px;
  }
  .delivery-flow-steps {
    transform: scale(0.95);
    will-change: transform;
  }
}
@media screen and (max-width: 1024px) {
  #self-serve-instructions-section-wrapper {
    padding-top: var(--spacing-6xl);
    margin: var(--spacing-none) var(--spacing-md) 52px;
  }
  .self-serve-instructions-section {
    padding-bottom: var(--spacing-6xl);
  }
  .self-serve-instructions-section img {
    width: 75%;
    transform: translate(-10%, 20%);
  }
  #self-serve-instructions-section-wrapper h1 {
    font-size: 32px;
    letter-spacing: -0.64px;
  }
  .delivery-flow-steps {
    transform: scale(0.95);
    will-change: transform;
  }
  .delivery-flow-steps > div > div:not(.steps) {
    transform: scale(0.8);
  }
  .delivery-flow-steps .steps {
    transform: scale(0.85);
  }
}
/*	Instruction steps self serve landing page	*/
.self-serve-landing-page-wrapper > div.flex-center {
  margin-bottom: 90px;
}

/*	Orders and shop tab empty state view and become seller touchpoint view	*/
.orders-empty-state-wrapper,
.purchases-empty-state-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-6xl);
  padding: var(--spacing-none) var(--spacing-8xl);
  height: 100%;
}

.orders-empty-state-wrapper,
.purchases-empty-state-wrapper {
  height: 50vh;
}

.orders-empty-state-wrapper img,
.purchases-empty-state-wrapper img {
  height: 120px;
}

.orders-empty-state-wrapper > div > h3,
.purchases-empty-state-wrapper > div > .purchases-empty-state-title,
.business-page-shop-tab-business-verification-status > h4 {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xs);
  color: var(--gray-900);
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.34px;
}

.oles span,
.orders-empty-state-wrapper > div > span,
.purchases-empty-state-wrapper > div > span,
.business-page-shop-tab-business-verification-status > span {
  display: block;
  margin-bottom: var(--spacing-xl);
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}

.business-page-shop-tab-business-verification-status a {
  color: var(--brand-400);
}

.business-page-shop-tab-business-verification-status a:hover {
  color: var(--brand-300);
}

.purchases-empty-state-wrapper > div > span {
  margin-bottom: var(--spacing-2xl);
}

.business-page-shop-tab-business-verification-status {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.business-page-shop-tab-business-verification-status > span > span {
  color: var(--brand-400);
}

/*	Orders and shop tab empty state view and become seller touchpoint view	*/
/*	Empty ad list action buttons wrapper	*/
.empty-ad-list-action-btns-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
}

.empty-ad-list-action-btns-wrapper > a,
.business-page-shop-tab-business-verification-status .selling-tips,
#purchases-empty-state-shop-now-link {
  display: block;
  width: fit-content;
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  border-radius: 8px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.26px;
  transition: background-color 0.3s ease-out;
  text-align: center;
  cursor: pointer;
}

.empty-ad-list-action-btns-wrapper > a.my-posts {
  color: var(--gray-900);
  background-color: var(--gray-300);
}

.empty-ad-list-action-btns-wrapper > a.my-ads:hover {
  background-color: var(--gray-400);
}

.empty-ad-list-action-btns-wrapper > a.post-a-new-ad {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.empty-ad-list-action-btns-wrapper > a.post-a-new-ad:hover {
  background-color: var(--brand-300);
}

#purchases-empty-state-shop-now-link {
  color: var(--gray-100);
  background-color: var(--delivery-400);
}

#purchases-empty-state-shop-now-link:hover {
  background-color: var(--delivery-300);
}

#purchases-empty-state-shop-now-link {
  display: inline-block;
  margin-right: var(--spacing-lg);
}

/*	Empty ad list action buttons wrapper	*/
/*
* seller apply page
*/
#company-verify-page input,
#company-verify-page .ComboSelectorComponent .me,
#company-verify-page textarea,
#seller-apply-page input,
#seller-apply-page .ComboSelectorComponent .me,
#seller-apply-page textarea {
  border: none;
}

#company-verify-page label,
#company-verify-page label div,
#seller-apply-page label,
#seller-apply-page label div {
  color: var(--gray-800);
}

#company-verify-page .step,
#seller-apply-page .step {
  display: flex;
  height: auto;
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-6xl);
}

#company-verify-page .step .bline,
#seller-apply-page .step .bline {
  display: none;
}

#company-verify-page .heading h1,
#seller-apply-page .heading h1 {
  color: var(--gray-900);
  font-size: 30px;
  font-weight: 800;
  line-height: 40px;
  font-style: normal;
  letter-spacing: -0.64px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
}

#company-verify-page .heading p,
#seller-apply-page .heading p {
  color: var(--gray-800);
  font-size: 18px;
  font-weight: 500;
  font-style: normal;
  line-height: 32px;
  letter-spacing: -0.4px;
  margin: var(--spacing-none);
}

#company-verify-page .actions,
#seller-apply-page .actions {
  margin-top: var(--spacing-2xl);
  display: flex;
  justify-content: space-between;
}

#company-verify-page .actions a,
#company-verify-page .actions input,
#seller-apply-page .actions a,
#seller-apply-page .actions input {
  width: fit-content;
  box-sizing: border-box;
  padding: var(--spacing-lg) var(--spacing-4xl);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--gray-900);
  transition: background-color 0.3s ease-out;
}

#company-verify-page .actions a,
#seller-apply-page .actions a {
  background-color: var(--gray-400);
}

#company-verify-page .actions a:hover,
#seller-apply-page .actions a:hover {
  background-color: var(--gray-300);
}

#company-verify-page .actions input,
#seller-apply-page .actions input {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

#company-verify-page .actions input:hover,
#seller-apply-page .actions input:hover {
  background-color: var(--brand-300);
}

#company-verify-page .verification-completion-wrapper,
#seller-apply-page .verification-completion-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6xl);
  justify-content: flex-start;
  align-items: flex-start;
}

#company-verify-page .verification-completion-wrapper .empty-ad-list-action-btns-wrapper a,
#seller-apply-page .verification-completion-wrapper .empty-ad-list-action-btns-wrapper a {
  font-size: 15px;
  padding: var(--spacing-md) var(--spacing-xl);
}

#company-verify-page .verification-completion-wrapper .selling-tips,
#seller-apply-page .verification-completion-wrapper .selling-tips {
  width: fit-content;
  padding: var(--spacing-lg) var(--spacing-4xl);
  border-radius: 8px;
  color: var(--gray-100);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.3px;
  background-color: var(--brand-400);
}

.business-page-shop-tab-business-verification-status .selling-tips {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.business-page-shop-tab-business-verification-status .selling-tips:hover,
#company-verify-page .verification-completion-wrapper .selling-tips:hover,
#seller-apply-page .verification-completion-wrapper .selling-tips:hover {
  color: var(--gray-100);
  background-color: var(--brand-300);
}

#company-verify-page .c2,
#seller-apply-page .c2 {
  display: flex;
  gap: var(--spacing-6xl);
}

#company-verify-page .c2 > div,
#seller-apply-page .c2 > div {
  width: 50%;
}

#company-verify-page .fg,
#seller-apply-page .fg {
  margin: var(--spacing-4xl) var(--spacing-none);
}

#company-verify-page .fg .f,
#seller-apply-page .fg .f {
  display: flex;
  flex-direction: column;
}

#company-verify-page .fg .f label,
#seller-apply-page .fg .f label {
  margin-bottom: var(--spacing-sm);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
  font-weight: 500;
}

#company-verify-page .fg .f > .htnwrapper,
#seller-apply-page .fg .f > .htnwrapper {
  margin-bottom: var(--spacing-sm);
}

label.fereq:after {
  content: "*";
  margin-left: var(--spacing-sm);
  color: var(--error-400);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.3px;
}

#company-verify-page .fg .f input[type=text],
#company-verify-page .fg .f textarea,
#seller-apply-page .fg .f input[type=text],
#seller-apply-page .fg .f textarea {
  background-color: var(--gray-300);
  padding: var(--spacing-lg);
  border-radius: 8px;
  line-height: 24px;
  font-weight: normal;
  height: 56px;
}

#company-verify-page .fg .f input[type=text],
#seller-apply-page .fg .f input[type=text] {
  font-size: 16px;
}

#company-verify-page .fg .f textarea,
#seller-apply-page .fg .f textarea {
  min-height: 160px;
  font-size: 15px;
}

#company-verify-page .fg .rgroup,
#seller-apply-page .fg .rgroup {
  flex-direction: column;
  gap: var(--spacing-md);
}

#company-verify-page .docupload > div:first-child,
#seller-apply-page .docupload > div:first-child {
  background-color: var(--gray-300);
  border-radius: 8px;
  height: 180px;
  justify-content: center;
}

#company-verify-page .docupload > div:first-child > div:nth-child(3) > a,
#seller-apply-page .docupload > div:first-child > div:nth-child(3) > a {
  background-color: var(--gray-800);
  color: white;
  font-size: 13px;
  line-height: 28px;
  border: none;
  width: 72px;
  text-align: center;
  border-radius: 100px;
  padding: var(--spacing-xs) var(--spacing-md);
}

/*#seller-apply-page .docupload > div:first-child > div:first-child*/
#company-verify-page .docupload > div:last-child,
#seller-apply-page .docupload > div:last-child {
  display: none;
}

/**
* seller company form
*/
#company-verify-page #docu_idstate_registered_certificateimg,
#company-verify-page #docu_idcopy_of_passportimg,
#seller-company-form #docu_idstate_registered_certificateimg,
#seller-company-form #docu_idcopy_of_passportimg {
  background-image: url("/img/certificate.png") !important;
}

#company-verify-page #docu_idstate_registered_certificateimg.loading,
#company-verify-page #docu_idcopy_of_passportimg.loading #seller-company-form #docu_idstate_registered_certificateimg.loading,
#seller-company-form #docu_idcopy_of_passportimg.loading {
  background-image: none !important;
}

#company-verify-page #docu_idstate_registered_certificateimg.checked,
#company-verify-page #docu_idcopy_of_passportimg.checked,
#seller-company-form #docu_idstate_registered_certificateimg.checked,
#seller-company-form #docu_idcopy_of_passportimg.checked {
  background-image: url("/img/certificate_checked.png") !important;
}

/*
* seller individual verification form
*/
#seller-individual-verification-form p:not(.TextComponent) {
  font-size: 17px;
  line-height: 28px;
  margin: var(--spacing-none);
}

#seller-individual-verification-form p.bold {
  color: var(--gray-900);
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.17px;
  margin-bottom: var(--spacing-md);
}

/* TODO: global */
p.info-blue {
  border-radius: 12px;
  padding: var(--spacing-lg);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--brand-400);
  background-color: var(--brand-100);
}

#seller-individual-verification-form .dn {
  display: none;
}

#seller-individual-verification-form .d1 {
  margin: var(--spacing-2xl) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  align-items: flex-start;
}

#seller-individual-verification-form input[type=submit] {
  background-color: var(--brand-400);
  border-radius: 8px;
  padding: var(--spacing-lg) var(--spacing-4xl);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.03px;
}

#seller-individual-verification-form input[type=submit]:disabled {
  background-color: var(--gray-400);
  color: var(--gray-500);
}

/* seller terms form */
#seller-terms-form #terms-view {
  margin: var(--spacing-6xl) var(--spacing-none) var(--spacing-2xl);
  padding: var(--spacing-xl);
  border-radius: 8px;
  background-color: var(--gray-300);
  height: 400px;
  overflow: hidden scroll;
}

#seller-terms-form .heading .delivery-notice {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.32px;
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  color: var(--gray-700);
}

/* seller terms form */
/*  seller product form */
#seller-apply-page .ComboSelectorComponent,
#seller-apply-page .ComboSelectorComponent .me {
  width: 100% !important;
  max-width: 100%;
  height: 56px;
  border-radius: 8px;
  background-color: var(--gray-300);
}

#seller-apply-page .ComboSelectorComponent + .err {
  color: var(--error-400);
  margin-top: var(--spacing-sm);
}

#seller-terms-form .err,
#seller-company-form .cbox .err {
  display: block;
  font-size: 13px;
  color: var(--error-500) !important;
  margin-top: var(--spacing-md);
}

#seller-company-form .fg .f .err,
#company-verify-page .fg .f .err,
#seller-apply-page .fg .f .err {
  display: block;
  font-size: 13px;
  color: var(--error-500) !important;
  margin-top: var(--spacing-md);
}

#seller-apply-page .ComboSelectorComponent.open > .l {
  width: 100%;
  top: 56px;
  bottom: unset;
}

#seller-company-form .ComboSelectorComponent.open .l {
  bottom: unset;
}

#seller-apply-page .ComboSelectorComponent .me > div {
  font-size: 16px;
  display: flex;
  align-items: center;
}

#seller-product-form #active-note > span {
  font-size: 12px;
  transform: translate(24px, 2px);
  display: block;
  opacity: 0.3;
}

#seller-product-form #active-note label.cbox > div {
  color: var(--success-400);
}

#seller-product-form #active-note input[type=checkbox]:checked ~ span {
  background-color: var(--accent-malachite);
}

#seller-product-form #active-note input[type=checkbox]:checked ~ span {
  border-color: var(--accent-malachite);
}

#seller-product-form #active-note label.cbox,
#seller-product-form #active-note label.cbox > div > input {
  cursor: auto;
}

/*  seller address form */
#seller-address-form #operational-same,
#seller-address-form #notification-same {
  align-self: center;
  margin-top: var(--spacing-xl);
}

.bopl {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

.bopl svg path.heart {
  animation: bounce 0.7s ease-in-out infinite;
  animation-iteration-count: 1;
}

@keyframes bounce {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
  }
}
.notification-operational-address-same-as-legal-address-disabled,
.publicLinksBlockDisabled {
  opacity: 0.5;
}

/* adult consent modal */
#adult-consent-modal h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.02em;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
}

#adult-consent-modal p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
}

#adult-consent-modal .actions {
  display: flex;
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  gap: var(--spacing-md);
}

#adult-consent-modal .actions button {
  width: 50%;
  height: 48px;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
  border-radius: 8px;
}

#adult-consent-modal .actions button:first-child {
  /*  TODO: use var    */
  color: var(--gray-900);
  background-color: var(--gray-300);
}

#adult-consent-modal .actions button:last-child {
  background-color: var(--brand-400);
}

/* Category Selection Widget */
.category-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xl);
  justify-content: space-between;
}

.category-card {
  min-width: 300px;
  height: 240px;
  background-color: var(--gray-300);
  box-shadow: 0px 0px 0px 1px var(--gray-300);
  border-radius: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.category-card, .category-card * {
  transition: 0.3s cubic-bezier(0.66, 1.16, 0.94, 0.99);
}

/* Card backgroynd hover --------------------- */
.category-card.vehicles:hover {
  background-color: var(--info-100);
  box-shadow: 0px 0px 0px 1px var(--info-100);
}

.category-card.products:hover {
  background-color: var(--info-100);
  box-shadow: 0px 0px 0px 1px var(--info-100);
}

.category-card.jobs:hover {
  background-color: var(--error-100);
  box-shadow: 0px 0px 0px 1px var(--error-100);
}

.category-card.services:hover {
  background-color: var(--success-100);
  box-shadow: 0px 0px 0px 1px var(--success-100);
}

.category-card.business:hover {
  background-color: var(--accent-tropicalIndigo-light);
  box-shadow: 0px 0px 0px 1px var(--accent-tropicalIndigo-light);
}

.category-card.real-estate:hover {
  background-color: var(--accent-argentinaBlue-light);
  box-shadow: 0px 0px 0px 1px var(--accent-argentinaBlue-light);
}

/* Card backgroynd hover end --------------------- */
.category-card > * {
  flex: 1;
}

.category-card > *:first-child {
  align-self: flex-start;
}

.category-card > *:last-child {
  align-self: flex-end;
}

.category-title {
  display: inline-block;
  margin: var(--spacing-lg) var(--spacing-xl);
  color: var(--gray-900);
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.24px;
}

.category-page > h2, .category-page > h2 span {
  color: var(--gray-900);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
}

.category-page > h2 {
  line-height: 40px;
}

.category-page > h2 span {
  color: var(--brand-400);
}

.category-page .label {
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
  margin-bottom: var(--spacing-lg);
  display: inline-block;
}

.category-page .category-type {
  margin-bottom: var(--spacing-2xl);
}

.category-page .category-type input {
  display: none;
}

.category-page .category-type label {
  display: flex;
  padding: var(--spacing-sm) var(--spacing-xl);
  justify-content: center;
  align-items: center;
  background-color: var(--gray-300);
  color: var(--gray-900);
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  line-height: 24px;
  font-size: 16px;
}

.category-page .category-type label:hover {
  background-color: var(--gray-400);
}

.category-page .category-type input:checked + label {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.category-page .fsec .t {
  padding: var(--spacing-none);
  margin-bottom: var(--spacing-lg);
}

.category-page .fsec .category-results .t:has(+ div .suggested-categories:empty) {
  display: none;
}

.category-page .category-results:has(.suggested-categories:empty) {
  margin-top: var(--spacing-none);
  padding-top: var(--spacing-none);
}

.category-page .category-type .rgroup span {
  margin-right: var(--spacing-md);
}

.category-page .category-search .rgroup span {
  margin-right: var(--spacing-sm);
}

.category-search {
  display: flex;
  flex-direction: column;
}

.category-results, .choose-category-manually {
  margin-top: var(--spacing-4xl);
}

/* For Resumes */
.category-search.resumes > .t, .category-search.resumes input[name=s] {
  display: none;
}

.category-search.resumes .category-results {
  padding-top: var(--spacing-none);
  margin-top: var(--spacing-none);
}

/* For Resumes end */
.category-selector-widget .hidden {
  display: none;
}

.category-page .category-search input {
  border-radius: 8px;
  background: var(--gray-300);
  display: flex;
  width: 100%;
  height: 56px;
  padding: var(--spacing-lg);
  align-items: center;
  align-self: stretch;
}

.category-page .category-search input, .category-page .category-search input::placeholder {
  font-size: 16px;
}

.category-page .category-results.fsec .t {
  margin-bottom: var(--spacing-alt-md);
}

.category-page .category-search input:focus {
  border: 1px solid var(--gray-900);
}

.category-card .category-img {
  display: inline-block;
  flex: 3 3;
  max-width: 85%;
  min-width: 74%;
  background: 1px bottom/contain no-repeat;
  position: relative;
}

.category-card .category-img > span {
  display: inline-block;
  background-repeat: no-repeat;
  position: absolute;
}

.category-card.products .category-img {
  background-image: url(/img/category-selection/products.svg);
}

.category-card.real-estate .category-img {
  background: url(/img/category-selection/real-estate.svg) 2px bottom/contain no-repeat;
}

.category-card.vehicles .category-img {
  background-image: url(/img/category-selection/vehicles.svg);
  background-position-x: 42px;
}

.category-card.vehicles:hover .category-img {
  background-position-x: 0;
}

/* Vehicles -------------------------------------------------------- */
/* Fragment 1 */
.category-card.vehicles .fragment-1 {
  background-image: url(/img/category-selection/vehicles-fragment-1.svg);
  height: 43%;
  width: 13%;
  top: 0;
  left: 33%;
  background-size: contain;
}

.category-card.vehicles:hover .fragment-1 {
  top: -8%;
}

/* Fragment 2 */
.category-card.vehicles .fragment-2 {
  background-image: url(/img/category-selection/vehicles-fragment-2.svg);
  height: 22%;
  width: 12%;
  top: 30%;
  left: 12%;
  background-size: contain;
}

.category-card.vehicles:hover .fragment-2 {
  top: 24%;
}

/* Vehicles end -------------------------------------------------------- */
/* Products -------------------------------------------------------- */
/* Fragment 1 */
.category-card.products .fragment-1 {
  background-image: url(/img/category-selection/products-fragment-1.svg);
  height: 40%;
  width: 19.5%;
  left: 26%;
  top: 30%;
}

.category-card.products:hover .fragment-1 {
  left: 85px;
  height: 80px;
  top: 9%;
}

/* Fragment 2 */
.category-card.products .fragment-2 {
  background-image: url(/img/category-selection/products-fragment-2.svg);
  height: 21.5%;
  width: 13%;
  right: 6.4%;
  top: 40%;
  background-size: contain;
}

.category-card.products:hover .fragment-2 {
  transform: scale(1.03);
}

/* Fragment 3 */
.category-card.products .fragment-3 {
  background-image: url(/img/category-selection/products-fragment-3.svg);
  height: 30%;
  width: 19%;
  right: 3.4%;
  bottom: 6%;
  background-size: contain;
}

.category-card.products:hover .fragment-3 {
  transform: scale(1.03);
}

/* Fragment 4 */
.category-card.products .fragment-4 {
  background: url(/img/category-selection/products-fragment-4.svg) right bottom/contain no-repeat;
  height: 70%;
  width: 58%;
  bottom: 0;
  left: -2%;
}

.category-card.products:hover .fragment-4 {
  left: 2%;
}

/* Products end -------------------------------------------------------- */
/* Services -------------------------------------------------------- */
/* Fragment 1 */
.category-card.services .fragment-1 {
  background-image: url(/img/category-selection/services-fragment-1.svg);
  height: 88px;
  width: 62px;
  right: 10%;
  top: 11%;
}

.category-card.services:hover .fragment-1 {
  top: -2%;
}

/* Fragment 2 */
.category-card.services .fragment-2 {
  background-image: url(/img/category-selection/services-fragment-2.svg);
  height: 88px;
  width: 116px;
  bottom: 0;
  right: 0;
  background-size: contain;
}

/* Fragment 4 */
.category-card.services .fragment-4 {
  background-image: url(/img/category-selection/services-fragment-4.svg);
  height: 90px;
  width: 50px;
  bottom: 0;
  right: 45%;
  background-size: contain;
}

.category-card.services:hover .fragment-4 {
  right: 47%;
  height: 98px;
}

/* Fragment 4 */
.category-card.services .fragment-5 {
  background-image: url(/img/category-selection/services-fragment-5.svg);
  height: 14px;
  width: 15px;
  top: 27%;
  right: 6%;
}

/* Products end -------------------------------------------------------- */
/* Jobs -------------------------------------------------------- */
/* Fragment 1 */
.category-card.jobs .fragment-1 {
  background-image: url(/img/category-selection/jobs-fragment-1.svg);
  height: 20%;
  width: 4%;
  bottom: 27%;
  left: 47.2%;
}

.category-card.jobs:hover .fragment-1 {
  transform: scaleX(3);
}

/* Fragment 2 */
.category-card.jobs .fragment-2 {
  background-image: url(/img/category-selection/jobs-fragment-2.svg);
  height: 28%;
  width: 58%;
  left: 7%;
  bottom: 21%;
  background-size: contain;
}

.category-card.jobs:hover .fragment-2 {
  transform: rotate(-40deg);
  left: 10%;
}

/* Jobs end -------------------------------------------------------- */
/* Real Estate -------------------------------------------------------- */
/* Fragment 1 */
.category-card.real-estate .fragment-1 {
  background: url(/img/category-selection/real-estate-fragment-1.svg) 2px bottom/contain no-repeat;
  height: 100%;
  width: 100%;
  opacity: 0;
}

.category-card.real-estate:hover .fragment-1 {
  opacity: 1;
}

/* Real Estate end -------------------------------------------------------- */
/* Business -------------------------------------------------------- */
/* Fragment 1 */
.category-card.business .fragment-1 {
  background-image: url(/img/category-selection/business-fragment-1.svg);
  height: 56px;
  width: 56px;
  top: 49px;
  left: 20px;
  background-size: contain;
}

.category-card.business:hover .fragment-1 {
  transform: scale(1.05);
  top: 45px;
}

/* Fragment 2 */
.category-card.business .fragment-2 {
  background-image: url(/img/category-selection/business-fragment-2.svg);
  height: 31px;
  width: 32px;
  bottom: 18px;
  left: 98.5px;
  background-position: center;
  background-color: var(--gray-300);
  box-shadow: 0px 0px 0px 1px var(--gray-900);
  border-radius: 2px;
}

.category-card.business:hover .fragment-2 {
  background-color: var(--accent-tropicalIndigo);
}

/* Real Estate end -------------------------------------------------------- */
.category-card.jobs .category-img {
  background-image: url(/img/category-selection/jobs.svg);
}

.category-card.services .category-img {
  background-image: url(/img/category-selection/services.svg);
}

.category-card.business .category-img {
  background-image: url(/img/category-selection/business.svg);
  background-position: right bottom;
}

/* Responsive Category UI */
@media screen and (max-width: 1270px) {
  .category-card .category-img {
    min-width: 88%;
  }
  .category-card.products .fragment-2 {
    right: 6.5%;
    top: 38%;
  }
  .category-card.products .fragment-3 {
    bottom: 6%;
    background-size: contain;
  }
  .category-card.products .fragment-4 {
    height: 73%;
  }
  .category-card.products:hover .fragment-1 {
    top: 6.2%;
  }
}
.category-page .suggested-category {
  display: flex;
  padding: var(--spacing-md) var(--spacing-lg);
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: 8px;
  background: var(--gray-300);
  width: max-content;
  margin-bottom: var(--spacing-md);
  user-select: none;
}

.category-page .suggested-category:last-child {
  margin-bottom: var(--spacing-none);
}

.category-page > .suggested-category {
  display: none;
}

.category-page .suggested-category span {
  color: var(--gray-600);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.category-page .suggested-category span:last-child {
  color: var(--gray-900);
}

.category-page .suggested-category span:has(.chevron) {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--spacing-xs);
}

.category-page .suggested-category .title {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.category-page .suggested-category:hover {
  background-color: var(--gray-400);
}

.suggested-categories {
  /* margin-bottom: 20px; */
}

.suggested-categories.loading {
  opacity: 0.4;
}

.suggested-categories .title .chevron {
  width: 20px;
  min-width: 20px;
  height: 20px;
  background-image: url(/img/category-selection/chevron.svg);
  display: inline-block;
}

.suggested-categories .empty-result, .suggested-categories .choosing-right-category {
  color: var(--gray-800);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  display: inline-block;
}

.suggested-categories .choosing-right-category {
  margin-bottom: var(--spacing-lg);
}

.choose-other-category {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  display: inline-block;
  margin-top: var(--spacing-2xl);
}

.choose-other-category a {
  color: var(--brand-400);
}

.choose-other-category a:hover {
  border-bottom: 1px solid;
}

a.go-to-categories {
  display: flex;
  width: max-content;
  padding: var(--spacing-md) var(--spacing-lg);
  align-items: center;
  border-radius: 8px;
  background-color: var(--brand-100);
  color: var(--brand-400);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

a.go-to-categories:hover {
  background-color: var(--brand-200);
}

/* end Category Selection Widget */
/*------------------------------------------------------------*/
#promote-become-a-seller {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

#promote-become-a-seller .body {
  display: flex;
  gap: var(--spacing-lg);
}

#promote-become-a-seller h1 {
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.02em;
  text-align: left;
}

#promote-become-a-seller p {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--gray-900);
}

#promote-become-a-seller img {
  align-self: flex-start;
  width: 120px;
}

#promote-become-a-seller ul {
  padding-left: var(--spacing-xl);
}

#promote-become-a-seller .actions {
  display: flex;
  gap: var(--spacing-md);
}

#promote-become-a-seller .actions button {
  height: 48px;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--spacing-sm);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-align: left;
}

#promote-become-a-seller .actions button:first-child {
  background-color: var(--gray-300);
  color: var(--gray-900);
  width: 120px;
  text-align: center;
}

#promote-become-a-seller .actions button:last-child {
  background: var(--brand-400);
  color: var(--gray-100);
  flex: 1;
  text-align: center;
}

#post_delivery_type_section,
#post_delivery_cargo_movers_section,
#post_accept_returns_section {
  display: none;
}

#post_delivery_type_section.fsec > .st {
  display: flex;
  align-items: center;
}

#post_delivery_cargo_movers_section .rgroup,
#post_accept_returns_section .rgroup,
#post_negotiable_section .rgroup {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.applstartover {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm);
  gap: var(--spacing-6xl);
}

.orderDetailPage > .detailsWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-6xl);
}

.orderDetailPage .tabbody {
  border: none;
}

.orderDetailPage > .detailsWrapper > .detailsRight .statusCard,
.orderDetailPage > .detailsWrapper > .detailsLeft .productCard,
.orderDetailPage > .detailsWrapper > .detailsLeft .addressCard,
.orderDetailPage > .detailsWrapper > .detailsLeft .noteCard,
.orderDetailPage > .detailsWrapper > .detailsLeft .paymentCard,
.orderDetailPage > .detailsWrapper > .detailsLeft .fundsCard,
.orderDetailPage > .detailsWrapper > .detailsLeft .summaryCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
}

.orderDetailPage > .header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.orderDetailPage > .detailsWrapper > .detailsLeft .summaryCard > div.statusWrapper {
  width: 100%;
}

.orderDetailPage > .detailsWrapper > .detailsRight .statusCard > .desc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-2xl);
}

.orderDetailPage > .detailsWrapper > .detailsLeft > .actions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.orderDetailPage > .detailsWrapper > .detailsLeft > .actions a {
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-sm);
  width: 140px;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.orderDetailPage > .detailsWrapper > .detailsLeft > .actions a.f {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.orderDetailPage > .detailsWrapper > .detailsLeft > .actions a.f:hover {
  background-color: var(--brand-300);
}

.orderDetailPage > .detailsWrapper > .detailsLeft > .actions a.r {
  background-color: var(--gray-300);
  color: var(--error-400);
}

.orderDetailPage > .detailsWrapper > .detailsLeft > .actions a.r:hover {
  background-color: var(--gray-400);
}

.orderDetailPage > .detailsWrapper > .detailsRight .fundsCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-2xl);
}

.orderDetailPage > .detailsWrapper > .detailsRight .fundsCard > .fundsCardTop {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.orderDetailPage > .detailsWrapper > .detailsLeft .statusCard > div,
.orderDetailPage > .detailsWrapper > .detailsLeft .addressCard > div,
.orderDetailPage > .detailsWrapper > .detailsLeft .noteCard > div {
  width: 100%;
  max-width: 100%;
}

.orderDetailPage > .detailsWrapper > .detailsRight {
  width: 30%;
  max-width: 30%;
}

.orderDetailPage > .detailsWrapper > .detailsLeft {
  width: 70%;
  max-width: 70%;
}

.orderDetailPage > .detailsWrapper > .detailsLeft,
.orderDetailPage > .detailsWrapper > .detailsRight {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-3xl);
}

.republish-form-wrapper.disabled .republish-submit-btn-wrapper input {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.business-page-body {
  width: 100%;
  padding-top: var(--spacing-alt-sm);
}

.business-page-body.dlsearch form {
  display: block;
}

.business-page-body.dlsearch > div {
  text-align: left;
}

.ehdm-receipt-view {
  font-family: monospace;
  background: var(--gray-100);
  color: var(--gray-900);
  width: 400px;
  margin: var(--spacing-none) auto;
  padding: var(--spacing-lg);
  border: 1px solid var(--gray-500);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  line-height: 1.4;
}

.ehdm-receipt-view h4 {
  text-align: center;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
  font-size: 15px;
  font-weight: bold;
}

.ehdm-receipt-view ul {
  list-style: none;
  padding: var(--spacing-none);
  margin: var(--spacing-none);
}

.ehdm-receipt-view li {
  margin-bottom: var(--spacing-xs);
  white-space: nowrap;
  font-family: monospace;
  font-size: 12px;
}

.qr-code-container {
  text-align: center;
}

.qr-hr {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--gray-900) 0, var(--gray-900) 20px, transparent 20px, transparent 25px);
  margin: 15px var(--spacing-none);
}

.w50inline {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}

.w100nw {
  width: 100%;
  white-space: nowrap;
  font-weight: bold;
}

.qr-totals {
  text-align: center;
  font-size: 16px !important;
  font-weight: bold;
}

.qr-code-container {
  text-align: center;
}

.qr-code-container img,
.qr-code-container canvas {
  display: block;
  margin: var(--spacing-none) auto;
}

.ehdm-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  width: 100px;
  margin-left: var(--spacing-alt-sm);
  text-align: right;
}

.dlpayh > span > div.ehdm-amount:last-child {
  width: 20px !important;
}

.ehdm-amount-last {
  color: var(--gray-500);
  font-weight: bold;
  font-size: 16px;
}

.ehdm-amount-last:hover {
  color: var(--gray-900);
}

.ehdm-amount-last:active {
  color: var(--gray-900);
}

.ehdm-amount-last:focus {
  outline: none;
  color: var(--gray-900);
}

#main .imid-verification-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#main .imid-verification-banner-titles {
  flex: 1;
}

#main .imid-verification-banner-titles + a,
#main .imid-verification-banner-titles + a * {
  width: max-content;
  text-align: center;
}

#main .imid-verification-banner-titles p {
  text-align: left;
}

.verification-info-text {
  line-height: 1.4;
  margin-top: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--gray-300);
  border-radius: var(--radius-xs);
  border-left: 1px solid var(--success-400);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.verification-info-text p {
  color: var(--gray-700);
}

.verification-info-text a {
  color: var(--brand-400);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: -0.24px;
  text-decoration: none;
}

/* ImID Activation UI styles */
.user-verified-badge-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: 0px;
}

.user-verified-badge-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.user-verified-badge-container .user-verified-badge.verified {
  opacity: 0.7;
  pointer-events: none;
  background-color: rgba(177, 177, 177, 0.15);
}

.icon-verified-gray {
  background-image: url(/img/redesign/icons/verified_user_gray.svg);
  min-width: 14px;
  min-height: 14px;
  width: 14px;
  height: 14px;
  position: relative;
}

.user-verified-badge .label.gray {
  color: var(--gray-500);
  font-size: 14px;
  padding: 0px 5px;
}

.verify-button-activate {
  color: var(--brand-400);
  cursor: pointer;
}

#employer-info-edit-modal .frow > * {
  flex: 1 1 0;
  min-width: 0;
}

#employer-info-edit-modal #au_idlogoupload {
  display: flex;
  flex-direction: column;
}

#employer-info-edit-modal .err.assetupload-inline-error {
  display: none;
}

.dmy-wrapper {
  display: flex;
  gap: var(--spacing-sm);
}

.fsec.additional-info-section {
  padding-right: var(--spacing-none);
}

.resume-edit .frow > .l {
  font-size: var(--font-size-md);
}

#captchaContainer {
  margin: var(--spacing-none) auto;
  max-width: 380px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: var(--font-size-md);
}

#captchaContainer .labelImageContainer {
  height: 61px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#captchaContainer #_idverification_number {
  width: 120px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--gray-300);
  color: var(--gray-900);
  overflow: hidden;
  cursor: text;
  transition: all 0.2s;
  box-sizing: border-box;
  margin-top: 25px;
}

#captchaContainer .err {
  text-align: right;
}

#captchaContainer #_idverification_number:focus {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}

#_idpage_url {
  margin-bottom: var(--spacing-xs);
}

.add-phone-number-action-container {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-6xl);
}

.add-phone-number-action-container > .e {
  /*flex: 1;*/
  display: flex;
  flex-direction: column;
}

.add-phone-number-action-container .country-phone-number-container {
  min-width: 300px;
  margin-right: var(--spacing-md);
  margin-left: var(--spacing-none);
}

.add-phone-number-action-container .err {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  color: var(--error-400);
}

/* Phone error width after country-phone-number-container */
.country-phone-number-container + .err,
.country-phone-number-container ~ .err {
  width: 380px;
}

.add-phone-number-action-container input[type=button] {
  border-radius: var(--radius-sm);
  background-color: var(--brand-400);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs);
  align-self: flex-start;
  min-height: 46px;
}

/* Button height when error is shown in phone form */
.c.phone:has(.err) input[type=submit],
.phone:has(.err) input[type=submit],
.c:has(.phone .err) input[type=submit] {
  height: 48px;
}

.ui-dialog:has(.add-phone-number-action-container),
.ui-dialog:has(.code-verify-container),
.ui-dialog:has(.contact-number-action-container),
.ui-dialog:has(.delete-contact-number-container) {
  padding: var(--spacing-2xl);
  box-sizing: border-box;
}

.ui-dialog:has(.add-phone-number-action-container) .ui-dialog-title,
.ui-dialog:has(.code-verify-container) .ui-dialog-title,
.ui-dialog:has(.contact-number-action-container) .ui-dialog-title,
.ui-dialog:has(.delete-contact-number-container) .ui-dialog-title {
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-md);
  margin: var(--spacing-none);
}

.ui-dialog:has(.add-phone-number-action-container) .ui-dialog-titlebar,
.ui-dialog:has(.add-phone-number-action-container) .ui-dialog-titlebar-close,
.ui-dialog:has(.code-verify-container) .ui-dialog-titlebar,
.ui-dialog:has(.code-verify-container) .ui-dialog-titlebar-close,
.ui-dialog:has(.contact-number-action-container) .ui-dialog-titlebar,
.ui-dialog:has(.contact-number-action-container) .ui-dialog-titlebar-close,
.ui-dialog:has(.delete-contact-number-container) .ui-dialog-titlebar,
.ui-dialog:has(.delete-contact-number-container) .ui-dialog-titlebar-close {
  padding: var(--spacing-none);
}

.ui-dialog:has(.contact-number-action-container) .ui-dialog-titlebar,
.ui-dialog:has(.delete-contact-number-container) .ui-dialog-titlebar {
  margin-bottom: var(--spacing-lg);
}

.ui-dialog:has(.add-phone-number-action-container) .ui-icon-closethick,
.ui-dialog:has(.code-verify-container) .ui-icon-closethick,
.ui-dialog:has(.contact-number-action-container) .ui-icon-closethick,
.ui-dialog:has(.delete-contact-number-container) .ui-icon-closethick {
  transition: unset;
  margin-bottom: var(--spacing-none);
  margin-right: var(--spacing-none);
  right: -20px;
  top: 0;
}

.ui-dialog:has(.add-phone-number-action-container) .ui-dialog-content,
.ui-dialog:has(.code-verify-container) .ui-dialog-content,
.ui-dialog:has(.contact-number-action-container) .ui-dialog-content,
.ui-dialog:has(.delete-contact-number-container) .ui-dialog-content {
  padding: var(--spacing-none);
}

.ui-dialog:has(.code-verify-container) .code_verify {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.ui-dialog:has(.code-verify-container) .code-valid-info,
.ui-dialog:has(.code-verify-container) .code-request-count-info {
  color: var(--gray-600);
  font-size: var(--font-size-tiny);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-tiny);
  margin: var(--spacing-none);
}

.contact-number-action-container .contact-number-info,
.delete-contact-number-container .contact-number-info {
  color: var(--gray-800);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
  margin-bottom: var(--spacing-xs);
  letter-spacing: -0.3px;
}

.contact-number-action-container .contact-number,
.delete-contact-number-container .contact-number {
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-md);
}

.contact-number-action-container .contact-number {
  color: var(--brand-400);
  margin-bottom: var(--spacing-2xl);
}

.delete-contact-number-container .contact-number {
  color: var(--gray-900);
  margin-bottom: var(--spacing-2xl);
}

.delete-contact-number-container:has(.warning-text) .contact-number {
  margin-bottom: var(--spacing-none);
}

.delete-contact-number-container .warning-text {
  color: var(--error-400);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-sm);
  margin-bottom: var(--spacing-2xl);
}

.contact-number-action-container .buttons-container input[type=button],
.delete-contact-number-container .buttons-container input[type=button] {
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  padding: var(--spacing-alt-md) var(--spacing-2xl);
}

.contact-number-action-container .buttons-container #close_dlg_button,
.delete-contact-number-container .buttons-container #close_dlg_button {
  color: var(--gray-900);
  background-color: var(--gray-300);
  margin-right: var(--spacing-md);
}

.contact-number-action-container .buttons-container #submit_dlg_button {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.delete-contact-number-container .buttons-container #submit_dlg_button {
  color: var(--gray-100);
  background-color: var(--error-400);
}

.resend-timer-info-container {
  color: var(--gray-600);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-sm);
  margin-bottom: var(--spacing-none);
  margin-top: var(--spacing-lg);
}

.code-verify-container .resend-new-code-container {
  display: none;
}

.code-verify-container .resend-new-code {
  color: var(--brand-400);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-sm);
  margin-bottom: var(--spacing-none);
  margin-top: var(--spacing-lg);
  cursor: pointer;
}

.add-phone-number-info {
  color: var(--gray-800);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
  margin: var(--spacing-lg) var(--spacing-none);
}

.phone-landline-container .phone-landline-add-btn {
  padding: var(--spacing-md) var(--spacing-2xl);
  line-height: var(--line-height-sm);
}

.phone-landline-container input[type=tel] {
  line-height: var(--line-height-sm);
}

#phone_code_verify_container a {
  color: var(--brand-400);
}

#phone_code_verify_container a:hover {
  color: var(--brand-300);
}

.add-phone-number-action-container:has(input:-webkit-autofill):not(:has(input:focus)) input[type=tel],
.phone-landline-container:has(input:-webkit-autofill):not(:has(input:focus)) input[type=tel],
.code_verify:has(input:-webkit-autofill):not(:has(input:focus)) input[type=text] {
  box-shadow: inset 0 0 0 500px var(--gray-300) !important;
  -webkit-text-fill-color: inherit;
}

.checkoutPage .checkoutHeader {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

#buy-bundle-container .frow:has(.MultiLevelDropdownComponent) {
  padding-bottom: var(--spacing-2xl);
}

#buy-bundle-container .frow:has(.DropdownComponent) {
  padding: var(--spacing-none);
}

.l.username-row {
  display: flex;
  align-items: center;
}

.w-max {
  min-width: max-content;
}

.t.asterisk {
  width: fit-content;
  display: inline-block;
  position: relative;
}

.fsec.new .t.asterisk {
  width: 100%;
}

.t.asterisk:after {
  position: absolute;
  content: "*";
  color: var(--error-500);
  right: -10px;
  top: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
}

#detailed-information .t.asterisk {
  padding-bottom: var(--spacing-sm);
}

#detailed-information .frow2.stacked:not(:last-of-type) {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-xl);
}

#detailed-information .fsec {
  margin-bottom: var(--spacing-none);
}

#detailed-information > div .fsec {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}

.fsec.new.ver .t {
  padding-bottom: var(--spacing-sm);
}

/* dialog styles start */
.dialog-body-unscroll {
  overflow: hidden;
}

.dialog-container .ui-dialog[role=dialog] {
  position: static;
  max-width: unset;
  display: flex;
  flex-direction: column;
}

.dialog-container {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  z-index: 106;
  box-sizing: border-box;
  padding: var(--spacing-xl);
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dialog-container + .ui-widget-overlay.ui-front {
  z-index: 101 !important;
}

@media screen and (max-width: 1024px) {
  .dialog-body-unscroll::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
  }
  .dialog-container {
    height: var(--window-inner-height);
    background-color: #fff;
    padding: 0;
  }
  .dialog-container .ui-dialog[role=dialog] {
    height: 100% !important;
    width: 100% !important;
  }
  .dialog-container #dialog {
    padding: var(--spacing-none) var(--spacing-lg);
  }
  .dialog-container .ui-dialog .ui-dialog-titlebar {
    max-height: unset;
  }
}
/* dialog styles end */
.post-location-icon {
  display: flex;
  width: 18px;
  height: 24px;
  background-image: url(/img/redesign/icons/post-location-new.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.post-location-title {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: var(--spacing-sm);
  margin: var(--spacing-xxs) 0 var(--spacing-lg);
}

.gt:has(#poi-map) {
  position: relative;
}

/* haeder height (71) + some space (9) */
#poi-map {
  position: absolute;
  top: -80px;
}

#pagecol .favorite-heart-container.gl,
#pagecol .favorite-heart-container.dl {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 32px;
  height: 32px;
  padding: 0;
}

#pagecol .h .favorite-heart-container.gl {
  top: 10px;
  right: 10px;
}

#pagecol .favorite-heart-container .heart-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

#pagecol .favorite-heart-container .favorite-heart-icon {
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

#pagecol .favorite-heart-contai ner {
  transition: transform 0.1s;
}

#pagecol .favorite-heart-container.anim {
  transform: scale(1.4);
}

#pagecol .favorite-heart-container .favorite-heart-icon.post-saved {
  background-image: url(/img/redesign/icons/heart-filled.svg);
}

#pagecol .favorite-heart-container .favorite-heart-icon.post-not-saved {
  background-image: url(/img/redesign/icons/favorite-heart.svg);
}

.category-location-container {
  display: flex;
}

.category-location-container:has(.MultiLevelDropdownComponent:nth-child(2)) .MultiLevelDropdownComponent:first-child {
  margin-right: var(--spacing-alt-xs);
}

.category-location-container:has(.MultiLevelDropdownComponent:nth-child(2)) .MultiLevelDropdownComponent:last-child {
  margin-left: var(--spacing-alt-xs);
}

/* ensure the header bar and its menus are rendered above other UI elements */
body:has(#main .my-posts) #ph {
  z-index: 106;
}

body:has(#main .my-posts) #mainoverlay {
  z-index: 105;
}

body:has(#main .my-posts):has(.ui-widget-overlay.ui-front) #ph,
body:has(#main .my-posts):has(.dialog-container) #ph,
body:has(#main .PostsFilterComponent):has(.dialog-container) #ph,
body:has(#main .PostsFilterComponent):has(.dialog-container) .filter-apply-container {
  z-index: 101;
}

.service-area-container {
  width: 100%;
}

.dlbar-action-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.dlbar.with-map .dlbar-action-container {
  padding-top: var(--spacing-3xl);
}

.dlbar-action-container:has(.view-options) {
  justify-content: space-between;
}

.dlbar-action-container .filter-view-type-container {
  display: flex;
  align-items: center;
}

.dlbar-action-container:not(:has(.view-options)) {
  justify-content: flex-end;
}

.dlbar-action-container .favorite-search-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.dlbar-action-container .favorite-search-container .info-container {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

.dlbar-action-container .favorite-search-container #sstar {
  position: unset;
}

.dlbar-action-container .favorite-search-container #sstar div.on,
.dlbar-action-container .favorite-search-container #sstar div.off {
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.dlbar-action-container .favorite-search-container #sstar div.off {
  background: url(/img/redesign/icons/favorite-heart-darker.svg);
}

.get-started-container-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.get-started-container-wrapper .get-started-container,
.get-started-container-wrapper .get-started-container .get-started-container-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.get-started-container-wrapper .get-started-container {
  gap: var(--spacing-lg);
}

.get-started-container-wrapper .get-started-container .get-started-container-top {
  gap: var(--spacing-xs);
}

.get-started-container-wrapper .get-started-container .get-started-container-link {
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  color: var(--gray-100);
  background-color: var(--brand-400);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  transition: background-color 0.3s;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.26px;
  cursor: pointer;
}

.get-started-container-wrapper .get-started-container .get-started-container-link:hover {
  background-color: var(--brand-300);
}

.ellipsis {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nowrap {
  white-space: nowrap !important;
}

.poi-container {
  margin-bottom: var(--spacing-7xl);
}

.fw-normal {
  font-weight: 400;
}
@media screen and (max-width: 1024px) {
  .fw-normal {
    font-weight: 400;
  }
}

.fw-medium {
  font-weight: 500;
}
@media screen and (max-width: 1024px) {
  .fw-medium {
    font-weight: 500;
  }
}

.fw-semi-bold {
  font-weight: 600;
}
@media screen and (max-width: 1024px) {
  .fw-semi-bold {
    font-weight: 600;
  }
}

.fw-bold {
  font-weight: 700;
}
@media screen and (max-width: 1024px) {
  .fw-bold {
    font-weight: 600;
  }
}

.fs-tiny {
  font-size: 10px;
}
@media screen and (max-width: 1024px) {
  .fs-tiny {
    font-size: 10px;
  }
}

.fs-xxs {
  font-size: 12px;
}
@media screen and (max-width: 1024px) {
  .fs-xxs {
    font-size: 13px;
  }
}

.fs-xs {
  font-size: 13px;
}
@media screen and (max-width: 1024px) {
  .fs-xs {
    font-size: 13px;
  }
}

.fs-sm {
  font-size: 14px;
}
@media screen and (max-width: 1024px) {
  .fs-sm {
    font-size: 14px;
  }
}

.fs-md {
  font-size: 15px;
}
@media screen and (max-width: 1024px) {
  .fs-md {
    font-size: 15px;
  }
}

.fs-lg {
  font-size: 17px;
}
@media screen and (max-width: 1024px) {
  .fs-lg {
    font-size: 16px;
  }
}

.fs-xl {
  font-size: 20px;
}
@media screen and (max-width: 1024px) {
  .fs-xl {
    font-size: 18px;
  }
}

.fs-2xl {
  font-size: 26px;
}
@media screen and (max-width: 1024px) {
  .fs-2xl {
    font-size: 22px;
  }
}

.fs-3xl {
  font-size: 32px;
}
@media screen and (max-width: 1024px) {
  .fs-3xl {
    font-size: 26px;
  }
}

.fs-4xl {
  font-size: 36px;
}
@media screen and (max-width: 1024px) {
  .fs-4xl {
    font-size: 32px;
  }
}

.lh-tiny {
  line-height: 14px;
}
@media screen and (max-width: 1024px) {
  .lh-tiny {
    line-height: 14px;
  }
}

.lh-xxs {
  line-height: 16px;
}
@media screen and (max-width: 1024px) {
  .lh-xxs {
    line-height: 16px;
  }
}

.lh-xs {
  line-height: 20px;
}
@media screen and (max-width: 1024px) {
  .lh-xs {
    line-height: 18px;
  }
}

.lh-sm {
  line-height: 20px;
}
@media screen and (max-width: 1024px) {
  .lh-sm {
    line-height: 20px;
  }
}

.lh-md {
  line-height: 24px;
}
@media screen and (max-width: 1024px) {
  .lh-md {
    line-height: 24px;
  }
}

.lh-lg {
  line-height: 28px;
}
@media screen and (max-width: 1024px) {
  .lh-lg {
    line-height: 24px;
  }
}

.lh-xl {
  line-height: 32px;
}
@media screen and (max-width: 1024px) {
  .lh-xl {
    line-height: 26px;
  }
}

.lh-2xl {
  line-height: 36px;
}
@media screen and (max-width: 1024px) {
  .lh-2xl {
    line-height: 32px;
  }
}

.lh-3xl {
  line-height: 40px;
}
@media screen and (max-width: 1024px) {
  .lh-3xl {
    line-height: 36px;
  }
}

.lh-4xl {
  line-height: 48px;
}
@media screen and (max-width: 1024px) {
  .lh-4xl {
    line-height: 40px;
  }
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.text-primary {
  color: var(--gray-900);
}

.text-white {
  color: var(--gray-100);
}

.text-dark-grey {
  color: var(--gray-800);
}

.text-light-grey {
  color: var(--gray-600);
}

.text-mid-grey {
  color: var(--gray-700);
}

.text-info-grey {
  color: var(--gray-600);
}

.text-blue-highlighted {
  color: var(--brand-400);
}

.text-blue-highlighted-dark {
  color: var(--brand-500);
}

.text-disabled {
  color: var(--gray-500);
}

.text-delivery {
  color: var(--delivery-400);
}

.box-clear {
  background-color: var(--gray-100);
}

.box-light {
  background-color: var(--gray-300);
}

.box-top {
  background-color: var(--info-100);
}

.box-error {
  background-color: var(--error-100);
}

.box-delivery {
  background-color: var(--delivery-100);
}

.box-highlight {
  background-color: var(--brand-100);
}

.box-tab-default {
  background-color: var(--gray-300);
}

.m-none {
  margin: var(--spacing-none);
}

.mt-none {
  margin-top: var(--spacing-none);
}

.mr-none {
  margin-right: var(--spacing-none);
}

.mb-none {
  margin-bottom: var(--spacing-none);
}

.ml-none {
  margin-left: var(--spacing-none);
}

.p-none {
  padding: var(--spacing-none);
}

.pt-none {
  padding-top: var(--spacing-none);
}

.pr-none {
  padding-right: var(--spacing-none);
}

.pb-none {
  padding-bottom: var(--spacing-none);
}

.pl-none {
  padding-left: var(--spacing-none);
}

.m-xs {
  margin: var(--spacing-xs);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.p-xs {
  padding: var(--spacing-xs);
}

.pt-xs {
  padding-top: var(--spacing-xs);
}

.pr-xs {
  padding-right: var(--spacing-xs);
}

.pb-xs {
  padding-bottom: var(--spacing-xs);
}

.pl-xs {
  padding-left: var(--spacing-xs);
}

.m-alt-xs {
  margin: var(--spacing-alt-xs);
}

.mt-alt-xs {
  margin-top: var(--spacing-alt-xs);
}

.mr-alt-xs {
  margin-right: var(--spacing-alt-xs);
}

.mb-alt-xs {
  margin-bottom: var(--spacing-alt-xs);
}

.ml-alt-xs {
  margin-left: var(--spacing-alt-xs);
}

.p-alt-xs {
  padding: var(--spacing-alt-xs);
}

.pt-alt-xs {
  padding-top: var(--spacing-alt-xs);
}

.pr-alt-xs {
  padding-right: var(--spacing-alt-xs);
}

.pb-alt-xs {
  padding-bottom: var(--spacing-alt-xs);
}

.pl-alt-xs {
  padding-left: var(--spacing-alt-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.p-sm {
  padding: var(--spacing-sm);
}

.pt-sm {
  padding-top: var(--spacing-sm);
}

.pr-sm {
  padding-right: var(--spacing-sm);
}

.pb-sm {
  padding-bottom: var(--spacing-sm);
}

.pl-sm {
  padding-left: var(--spacing-sm);
}

.m-alt-sm {
  margin: var(--spacing-alt-sm);
}

.mt-alt-sm {
  margin-top: var(--spacing-alt-sm);
}

.mr-alt-sm {
  margin-right: var(--spacing-alt-sm);
}

.mb-alt-sm {
  margin-bottom: var(--spacing-alt-sm);
}

.ml-alt-sm {
  margin-left: var(--spacing-alt-sm);
}

.p-alt-sm {
  padding: var(--spacing-alt-sm);
}

.pt-alt-sm {
  padding-top: var(--spacing-alt-sm);
}

.pr-alt-sm {
  padding-right: var(--spacing-alt-sm);
}

.pb-alt-sm {
  padding-bottom: var(--spacing-alt-sm);
}

.pl-alt-sm {
  padding-left: var(--spacing-alt-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.p-md {
  padding: var(--spacing-md);
}

.pt-md {
  padding-top: var(--spacing-md);
}

.pr-md {
  padding-right: var(--spacing-md);
}

.pb-md {
  padding-bottom: var(--spacing-md);
}

.pl-md {
  padding-left: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.p-lg {
  padding: var(--spacing-lg);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

.pr-lg {
  padding-right: var(--spacing-lg);
}

.pb-lg {
  padding-bottom: var(--spacing-lg);
}

.pl-lg {
  padding-left: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.p-xl {
  padding: var(--spacing-xl);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

.pr-xl {
  padding-right: var(--spacing-xl);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pl-xl {
  padding-left: var(--spacing-xl);
}

.m-2xl {
  margin: var(--spacing-2xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

.mr-2xl {
  margin-right: var(--spacing-2xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.ml-2xl {
  margin-left: var(--spacing-2xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

.pt-2xl {
  padding-top: var(--spacing-2xl);
}

.pr-2xl {
  padding-right: var(--spacing-2xl);
}

.pb-2xl {
  padding-bottom: var(--spacing-2xl);
}

.pl-2xl {
  padding-left: var(--spacing-2xl);
}

.m-3xl {
  margin: var(--spacing-3xl);
}

.mt-3xl {
  margin-top: var(--spacing-3xl);
}

.mr-3xl {
  margin-right: var(--spacing-3xl);
}

.mb-3xl {
  margin-bottom: var(--spacing-3xl);
}

.ml-3xl {
  margin-left: var(--spacing-3xl);
}

.p-3xl {
  padding: var(--spacing-3xl);
}

.pt-3xl {
  padding-top: var(--spacing-3xl);
}

.pr-3xl {
  padding-right: var(--spacing-3xl);
}

.pb-3xl {
  padding-bottom: var(--spacing-3xl);
}

.pl-3xl {
  padding-left: var(--spacing-3xl);
}

.m-4xl {
  margin: var(--spacing-4xl);
}

.mt-4xl {
  margin-top: var(--spacing-4xl);
}

.mr-4xl {
  margin-right: var(--spacing-4xl);
}

.mb-4xl {
  margin-bottom: var(--spacing-4xl);
}

.ml-4xl {
  margin-left: var(--spacing-4xl);
}

.p-4xl {
  padding: var(--spacing-4xl);
}

.pt-4xl {
  padding-top: var(--spacing-4xl);
}

.pr-4xl {
  padding-right: var(--spacing-4xl);
}

.pb-4xl {
  padding-bottom: var(--spacing-4xl);
}

.pl-4xl {
  padding-left: var(--spacing-4xl);
}

.m-5xl {
  margin: var(--spacing-5xl);
}

.mt-5xl {
  margin-top: var(--spacing-5xl);
}

.mr-5xl {
  margin-right: var(--spacing-5xl);
}

.mb-5xl {
  margin-bottom: var(--spacing-5xl);
}

.ml-5xl {
  margin-left: var(--spacing-5xl);
}

.p-5xl {
  padding: var(--spacing-5xl);
}

.pt-5xl {
  padding-top: var(--spacing-5xl);
}

.pr-5xl {
  padding-right: var(--spacing-5xl);
}

.pb-5xl {
  padding-bottom: var(--spacing-5xl);
}

.pl-5xl {
  padding-left: var(--spacing-5xl);
}

.m-6xl {
  margin: var(--spacing-6xl);
}

.mt-6xl {
  margin-top: var(--spacing-6xl);
}

.mr-6xl {
  margin-right: var(--spacing-6xl);
}

.mb-6xl {
  margin-bottom: var(--spacing-6xl);
}

.ml-6xl {
  margin-left: var(--spacing-6xl);
}

.p-6xl {
  padding: var(--spacing-6xl);
}

.pt-6xl {
  padding-top: var(--spacing-6xl);
}

.pr-6xl {
  padding-right: var(--spacing-6xl);
}

.pb-6xl {
  padding-bottom: var(--spacing-6xl);
}

.pl-6xl {
  padding-left: var(--spacing-6xl);
}

.m-8xl {
  margin: var(--spacing-8xl);
}

.mt-8xl {
  margin-top: var(--spacing-8xl);
}

.mr-8xl {
  margin-right: var(--spacing-8xl);
}

.mb-8xl {
  margin-bottom: var(--spacing-8xl);
}

.ml-8xl {
  margin-left: var(--spacing-8xl);
}

.p-8xl {
  padding: var(--spacing-8xl);
}

.pt-8xl {
  padding-top: var(--spacing-8xl);
}

.pr-8xl {
  padding-right: var(--spacing-8xl);
}

.pb-8xl {
  padding-bottom: var(--spacing-8xl);
}

.pl-8xl {
  padding-left: var(--spacing-8xl);
}

.m-9xl {
  margin: var(--spacing-9xl);
}

.mt-9xl {
  margin-top: var(--spacing-9xl);
}

.mr-9xl {
  margin-right: var(--spacing-9xl);
}

.mb-9xl {
  margin-bottom: var(--spacing-9xl);
}

.ml-9xl {
  margin-left: var(--spacing-9xl);
}

.p-9xl {
  padding: var(--spacing-9xl);
}

.pt-9xl {
  padding-top: var(--spacing-9xl);
}

.pr-9xl {
  padding-right: var(--spacing-9xl);
}

.pb-9xl {
  padding-bottom: var(--spacing-9xl);
}

.pl-9xl {
  padding-left: var(--spacing-9xl);
}

.m-10xl {
  margin: var(--spacing-10xl);
}

.mt-10xl {
  margin-top: var(--spacing-10xl);
}

.mr-10xl {
  margin-right: var(--spacing-10xl);
}

.mb-10xl {
  margin-bottom: var(--spacing-10xl);
}

.ml-10xl {
  margin-left: var(--spacing-10xl);
}

.p-10xl {
  padding: var(--spacing-10xl);
}

.pt-10xl {
  padding-top: var(--spacing-10xl);
}

.pr-10xl {
  padding-right: var(--spacing-10xl);
}

.pb-10xl {
  padding-bottom: var(--spacing-10xl);
}

.pl-10xl {
  padding-left: var(--spacing-10xl);
}

.r-xs {
  border-radius: var(--radius-xs);
}

.r-sm {
  border-radius: var(--radius-sm);
}

.r-md {
  border-radius: var(--radius-md);
}

.r-lg {
  border-radius: var(--radius-lg);
}

.r-xl {
  border-radius: var(--radius-xl);
}

.ActionButtonComponent {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gray-100) !important;
  display: inline-block;
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 8px;
  background-color: var(--brand-400);
  transition: background-color 0.2s;
}

.ActionButtonComponent.disabled {
  cursor: wait;
  background-color: var(--gray-500);
}

.ActionButtonComponent:hover {
  background-color: var(--brand-300);
}

.AdActionComponent {
  background-color: var(--gray-300);
  border-radius: 8px;
}
.AdActionComponent .ad-action-wrapper {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
  border-radius: 8px;
  color: var(--gray-900);
}
.AdActionComponent .ad-action-wrapper .action-name {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  text-overflow: ellipsis;
  overflow: hidden;
}
.AdActionComponent .ad-action-wrapper .mobile-title {
  display: none;
}
.AdActionComponent a.ad-action-wrapper {
  cursor: pointer;
}
.AdActionComponent a.ad-action-wrapper:hover {
  color: var(--gray-900);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1215686275);
}
.AdActionComponent a.ad-action-wrapper:hover > svg > path {
  stroke: #FFFFFF;
}
.AdActionComponent a.ad-action-wrapper > svg {
  width: 20px;
  height: 20px;
}
.AdActionComponent a.ad-action-wrapper.renew {
  background-color: var(--success-100);
}
.AdActionComponent a.ad-action-wrapper.renew:hover {
  background-color: var(--success-200);
}
.AdActionComponent a.ad-action-wrapper.renew > svg > path {
  stroke: #FFFFFF;
}
.AdActionComponent a.ad-action-wrapper.renew > svg > rect {
  fill: var(--accent-malachite);
}
.AdActionComponent a.ad-action-wrapper.republish > svg > rect {
  fill: var(--accent-argentinaBlue);
}
.AdActionComponent a.ad-action-wrapper.republish > svg > path {
  stroke: #FFFFFF;
}
.AdActionComponent a.ad-action-wrapper.republish.disabled {
  background-color: var(--gray-300);
  cursor: default;
  box-shadow: none;
}
.AdActionComponent a.ad-action-wrapper.republish.disabled > svg > rect {
  fill: var(--gray-500);
}
.AdActionComponent a.ad-action-wrapper.activate > svg rect {
  fill: var(--brand-400);
}
.AdActionComponent a.ad-action-wrapper.activate > svg path {
  stroke: #FFFFFF;
}
.AdActionComponent a.ad-action-wrapper.activate.disabled {
  background-color: var(--gray-300);
  cursor: default;
  box-shadow: none;
}
.AdActionComponent a.ad-action-wrapper.activate.disabled > svg > rect {
  fill: var(--gray-500);
}
.AdActionComponent a.ad-action-wrapper.top > svg > path {
  stroke: #FFFFFF;
}
.AdActionComponent a.ad-action-wrapper.top > svg > rect {
  fill: var(--accent-amber);
}
.AdActionComponent a.ad-action-wrapper.homepage > svg > path {
  stroke: #FFFFFF;
}
.AdActionComponent a.ad-action-wrapper.homepage > svg > rect {
  fill: var(--accent-argentinaBlue);
}
.AdActionComponent a.ad-action-wrapper.label > svg > path {
  stroke: #FFFFFF;
}
.AdActionComponent a.ad-action-wrapper.label > svg > rect {
  fill: var(--accent-tropicalIndigo);
}
.AdActionComponent div.ad-action-wrapper {
  background-color: var(--gray-300);
  color: var(--gray-500);
  position: relative;
}
.AdActionComponent div.ad-action-wrapper:not(.renew) {
  pointer-events: none;
}
.AdActionComponent div.ad-action-wrapper::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-image: url(/img/redesign/icons/check-circle.svg);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -10px;
  right: -7px;
  border-radius: 50%;
}
.AdActionComponent div.ad-action-wrapper > svg {
  width: 20px;
  height: 20px;
}
.AdActionComponent div.ad-action-wrapper > svg > rect {
  fill: #FFFFFF;
}
.AdActionComponent div.ad-action-wrapper.renew {
  cursor: pointer;
}
.AdActionComponent div.ad-action-wrapper.renew > svg > path {
  stroke: var(--accent-malachite);
}
.AdActionComponent div.ad-action-wrapper.top > svg > path {
  stroke: var(--accent-amber);
}
.AdActionComponent div.ad-action-wrapper.homepage > svg > path {
  stroke: var(--accent-argentinaBlue);
}
.AdActionComponent div.ad-action-wrapper.label > svg > path {
  stroke: var(--accent-tropicalIndigo);
}

@media screen and (max-width: 1270px) {
  .AdActionComponent > .ad-action-wrapper {
    flex-direction: column;
    padding: var(--spacing-sm);
  }
  .AdActionComponent > .ad-action-wrapper .action-name {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .AdActionComponent > a.ad-action-wrapper,
  .AdActionComponent > div.ad-action-wrapper {
    align-items: center;
    position: relative;
    padding: var(--spacing-md) var(--spacing-sm);
    border-radius: 12px;
    flex-direction: row;
  }
  .AdActionComponent > a.ad-action-wrapper.link-style,
  .AdActionComponent > div.ad-action-wrapper.link-style {
    text-decoration: underline;
  }
  .AdActionComponent > a.ad-action-wrapper.link-style > svg,
  .AdActionComponent > div.ad-action-wrapper.link-style > svg {
    display: none;
  }
  .AdActionComponent > a.ad-action-wrapper.link-style:hover,
  .AdActionComponent > div.ad-action-wrapper.link-style:hover {
    box-shadow: none;
    color: var(--brand-400);
  }
  .AdActionComponent div.ad-action-wrapper:not(.renew) {
    pointer-events: all;
  }
  .AdActionComponent div.ad-action-wrapper::after {
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background-image: url(/img/redesign/icons/check-white.svg);
    background-size: 18px;
    background-repeat: no-repeat;
    background-color: var(--accent-malachite);
    border: 2px solid var(--gray-100);
  }
  .AdActionComponent > .ad-action-wrapper > .action-name {
    width: auto;
  }
  .AdActionComponent:has(.link-style) {
    background-color: unset;
  }
}
.AddFundsComponent {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.AddFundsComponent .add-funds-label,
.AddFundsComponent .pt {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.16px;
  padding-bottom: var(--spacing-lg);
}

.AddFundsComponent .add-funds-label {
  color: var(--gray-900);
  padding-bottom: var(--spacing-md);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}

.AddFundsComponent .tabs-restyle div:first-child > div:has(img) {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: unset;
  display: flex;
  padding: var(--spacing-sm) var(--spacing-lg);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-alt-sm);
  background: unset;
  opacity: 0.6;
  border: 1px solid transparent;
}

.AddFundsComponent > div > div:first-child > div > img {
  height: 16px;
}

.AddFundsComponent .error {
  display: none;
}

.AddFundsComponent .pt {
  padding-bottom: var(--spacing-md);
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.AddFundsComponent form > span {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--spacing-2xl);
}

.AddFundsComponent form #idw_value,
.AddFundsComponent form #_idamount {
  width: 175px !important;
  padding-right: var(--spacing-3xl);
}

.AddFundsComponent form #idw_value + span.crc,
.AddFundsComponent form #_idamount + span.crc {
  position: absolute;
  left: 147px;
  top: 10px;
}

.AddFundsComponent .buttons {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-2xl);
  flex: 1;
  align-items: end;
}

.AddFundsComponent .InlineTabComponent.pmTabs {
  padding: var(--spacing-none);
}

.AddFundsComponent .InlineTabComponent.tabs-restyle > div:first-child {
  width: fit-content;
  padding: var(--spacing-xs);
  background: var(--gray-300);
  border-radius: 10px;
}

.AddFundsComponent .InlineTabComponent.tabs-restyle > div:first-child > div {
  opacity: 0.6;
}

.AddFundsComponent .InlineTabComponent.tabs-restyle > div:first-child > div.s {
  box-shadow: 0 2px 6px 0 rgba(26, 29, 62, 0.1019607843);
  background: var(--gray-100);
  opacity: 1;
}

.AddFundsComponent .buttons a {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  padding: var(--spacing-md);
  justify-content: center;
  align-items: center;
  border-radius: var(--spacing-md);
  background: var(--gray-300);
  flex: 1;
  letter-spacing: -0.28px;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--spacing-2xl, 24px);
  text-align: center;
  cursor: pointer;
}

.AddFundsComponent .buttons a:first-child:not(:only-child) {
  background: var(--gray-300);
  color: var(--brand-400);
  font-style: normal;
}

.AddFundsComponent .buttons > *:last-child:not(.custom) {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--brand-400);
  color: var(--gray-100);
  letter-spacing: -0.28px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  flex: 1;
}

.AddFundsComponent .buttons > *:last-child:not(.custom):hover {
  background-color: var(--brand-300);
}

.AddFundsComponent .buttons > *:last-child:not(.custom).hidden {
  display: none;
}

.AddFundsComponent .buttons > *:last-child:not(.custom).disabled {
  pointer-events: none;
  color: var(--gray-500);
  background: var(--gray-400);
  cursor: default;
}

.AddFundsComponent #payment_form {
  position: absolute;
  top: 0;
  text-align: left;
  width: 100%;
}

.PostRenewModal .AddFundsComponent .InlineTabComponent > div:nth-child(2) {
  padding-top: var(--spacing-md);
}

.AddFundsComponent .payment-processing-msg, .AddFundsComponent .payment-failed-msg {
  margin-top: var(--spacing-md);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs, 20px);
  letter-spacing: -0.28px;
  display: none;
}

.AddFundsComponent #payment_form > input.payment_value {
  width: 100%;
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
  padding: var(--spacing-2xl) var(--spacing-lg);
  border-radius: var(--radius-sm);
  background: var(--gray-300);
}

.AddFundsComponent .funds {
  display: flex;
  flex-direction: column;
  position: relative;
}

.AddFundsComponent .funds .rgroup {
  display: flex;
  flex-direction: column;
  background-color: var(--gray-300);
  padding-top: var(--spacing-xxs);
  padding-bottom: var(--spacing-xxs);
  border-radius: var(--radius-sm);
  margin-top: 38px;
}

.PostRenewModal .AddFundsComponent .funds .rgroup {
  margin-top: 34px;
}

.PostActionModal:has(.republish) .AddFundsComponent .funds .rgroup,
.PromotionComboDialogComponent .AddFundsComponent .funds .rgroup {
  margin-top: 42px;
}

/* START ERROR Cases */
.AddFundsComponent .mt-payment-value-err,
.AddFundsComponent .mt-payment-min-value-err {
  margin-top: 54px !important;
}

.AddFundsComponent .mt-payment-process-err {
  margin-top: 72px !important;
}

.AddFundsComponent .mt-payment-failed-err,
.AddFundsComponent .mt-payment-failed-renew-err,
.AddFundsComponent .mt-payment-process-err.mt-payment-value-err,
.AddFundsComponent .mt-payment-process-err.mt-payment-min-value-err {
  margin-top: 88px !important;
}

.AddFundsComponent .mt-payment-value-err.mt-payment-failed-err,
.AddFundsComponent .mt-payment-min-value-err.mt-payment-failed-err {
  margin-top: 100px !important;
}

.PostActionModal:has(.republish) .AddFundsComponent .mt-payment-value-err.mt-payment-failed-err,
.PostActionModal:has(.republish) .AddFundsComponent .mt-payment-min-value-err.mt-payment-failed-err,
.PromotionComboDialogComponent .AddFundsComponent .mt-payment-value-err.mt-payment-failed-err,
.PromotionComboDialogComponent .AddFundsComponent .mt-payment-min-value-err.mt-payment-failed-err {
  margin-top: 104px !important;
}

/* END ERROR Cases */
.AddFundsComponent .funds .rgroup .feradio-container {
  display: flex;
  align-items: center;
  margin: var(--spacing-xxs) var(--spacing-xs);
  background-color: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
  border: 1px solid transparent;
  cursor: pointer;
}

.AddFundsComponent .feradio-container:has(input[type=radio]:checked) {
  border: 1px solid var(--brand-400);
}

.AddFundsComponent .funds .rgroup .feradio-container input[name=wallet_payment_method] {
  margin-right: var(--spacing-sm);
}

.AddFundsComponent .funds .rgroup .feradio-container label {
  display: flex;
  padding-left: var(--spacing-none);
  cursor: pointer;
}

.AddFundsComponent .funds .rgroup .feradio-container img {
  height: 18px;
}

.AddFundsComponent .feradio-container input[name=wallet_payment_method] + label span {
  display: none;
}

.AddFundsComponent #payment_form > input.payment_value:hover {
  border: 1px solid var(--gray-400);
}

.AddFundsComponent #payment_form > input.payment_value:focus {
  border: 1px solid var(--gray-900);
  background-color: var(--gray-100);
}

.AddFundsComponent #payment_form > input.payment_value.show-error {
  border-color: var(--error-400);
}

.AddFundsComponent #payment_form > .crc {
  position: absolute;
  top: 13px;
  right: 16px;
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
}

.AddFundsComponent #payment_form > .error-msg {
  padding-top: var(--spacing-xs);
  color: var(--error-400);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.AddFundsComponent .pt svg {
  width: 20px;
}

.AddFundsComponent .pt, .AddFundsComponent .pt, .AddFundsComponent .pt span {
  display: flex;
  gap: var(--spacing-xs);
  color: var(--gray-900);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--spacing-lg, 16px);
  letter-spacing: -0.26px;
  align-items: center;
  height: 20px;
}

.AddFundsComponent .show-hide {
  padding: var(--spacing-md) var(--spacing-none);
  gap: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.AddFundsComponent .hidden-element-icons-container {
  display: flex;
  gap: var(--spacing-md);
}

.AddFundsComponent .hidden-element-icon {
  height: 16px;
}

.AddFundsComponent .show-hide .chevron-down {
  width: 8px;
}

.free-ad-soft-limit-section-container .AddFundsComponent {
  margin-bottom: var(--spacing-2xl);
}

@media screen and (max-width: 1024px) {
  .AddFundsComponent .buttons > *:last-child:not(.custom) {
    padding: var(--spacing-alt-md) var(--spacing-2xl);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-top: var(--spacing-none);
  }
  .AddFundsComponent .buttons > *:last-child:not(.custom).add-funds {
    margin-top: var(--spacing-2xl);
  }
  .AddFundsComponent .buttons {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }
  .free-ad-soft-limit-section-container .AddFundsComponent {
    margin-bottom: var(--spacing-none);
  }
  /* START ERROR Cases */
  .AddFundsComponent .mt-payment-value-err,
  .AddFundsComponent .mt-payment-min-value-err {
    margin-top: 70px !important;
  }
  .AddFundsComponent .mt-payment-process-err.mt-payment-min-value-err,
  .AddFundsComponent .mt-payment-process-err.mt-payment-value-err {
    margin-top: 100px !important;
  }
  .PostActionModal:has(.republish) .AddFundsComponent .mt-payment-value-err.mt-payment-failed-err,
  .PostActionModal:has(.republish) .AddFundsComponent .mt-payment-min-value-err.mt-payment-failed-err,
  .AddFundsComponent .mt-payment-value-err.mt-payment-failed-err,
  .AddFundsComponent .mt-payment-min-value-err.mt-payment-failed-err {
    margin-top: 116px !important;
  }
  .PromotionComboDialogComponent .AddFundsComponent .mt-payment-value-err.mt-payment-failed-err,
  .PromotionComboDialogComponent .AddFundsComponent .mt-payment-min-value-err.mt-payment-failed-err {
    margin-top: 122px !important;
  }
  /* END ERROR Cases */
}
@media screen and (max-width: 400px) {
  /* START ERROR Cases */
  .PostActionModal:has(.republish) .AddFundsComponent .mt-payment-value-err.mt-payment-failed-err,
  .PostActionModal:has(.republish) .AddFundsComponent .mt-payment-min-value-err.mt-payment-failed-err {
    margin-top: 122px !important;
  }
  /* END ERROR Cases */
}
.AddressComponent {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
}
.AddressComponent div.cerr {
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  color: var(--error-400);
}
.AddressComponent > div:not(.map-desktop) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
}
.AddressComponent input::placeholder,
.AddressComponent textarea::placeholder {
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.AddressComponent .city,
.AddressComponent .address,
.AddressComponent .addressName,
.AddressComponent .instr,
.AddressComponent .recipient,
.AddressComponent .recipient .contacts {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}
.AddressComponent .city textarea,
.AddressComponent .address textarea,
.AddressComponent .addressName textarea,
.AddressComponent .instr textarea,
.AddressComponent .recipient textarea,
.AddressComponent .recipient .contacts textarea {
  height: 100px;
}
.AddressComponent .city + .map-mobile {
  display: none;
}
.AddressComponent .recipient .contacts {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  /* Keep 3 inputs in one row: name, surname, phone */
  /* Error on its own row below the 3 inputs, does not change input width/height */
}
.AddressComponent .recipient .contacts > .frow,
.AddressComponent .recipient .contacts > input,
.AddressComponent .recipient .contacts > span {
  flex: 1 1 0;
  min-width: 0;
}
.AddressComponent .recipient .contacts > .frow {
  display: flex;
}
.AddressComponent .recipient .contacts > .frow .e {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  min-width: 0;
}
.AddressComponent .recipient .contacts > span,
.AddressComponent .recipient .contacts > input {
  width: 100%;
  box-sizing: border-box;
}
.AddressComponent .recipient .contacts > .err {
  flex: 0 0 100%;
  width: 100%;
  margin-top: var(--spacing-xxs);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  color: var(--error-400);
}
.AddressComponent .recipient .contacts > .err p, .AddressComponent .recipient .contacts > .err ul, .AddressComponent .recipient .contacts > .err li {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}
.AddressComponent .req > p:first-of-type:after {
  content: "*";
  margin-left: var(--spacing-xxs);
  color: var(--error-400);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
}
.AddressComponent .address .street,
.AddressComponent .address .dets {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}
.AddressComponent .address .street .frow:first-of-type {
  width: 67%;
}
.AddressComponent .address .street .frow:first-of-type .e {
  width: 100%;
}
.AddressComponent .address .street .frow:last-of-type {
  width: 33%;
}
.AddressComponent .address .street .frow a {
  display: none;
}
.AddressComponent .map-desktop {
  width: 500px;
}
.AddressComponent .map-desktop .inline {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.AddressComponent .map-desktop .inline #map {
  width: 500px !important;
  height: 770px !important;
}
.AddressComponent .map-desktop .inline #map::after {
  width: 38px;
  height: 48px;
  background: url(/img/re/map-marker-round.svg);
  background-size: 38px 48px;
}
.AddressComponent .frow {
  padding: var(--spacing-none);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}
.AddressComponent .frow .e {
  margin: var(--spacing-none);
}
.AddressComponent .field-hint {
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  color: var(--gray-600);
}
.AddressComponent input[type=button] {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-alt-sm);
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.28px;
}
.AddressComponent input[type=button]:disabled {
  color: var(--gray-500);
  background: var(--gray-400);
}
@media screen and (max-width: 1024px) {
  .AddressComponent {
    flex-direction: column;
  }
  .AddressComponent .address .street,
  .AddressComponent .recipient .contacts {
    flex-direction: column;
  }
  .AddressComponent .address .street .frow .addr,
  .AddressComponent .recipient .contacts .frow .addr {
    max-width: none;
  }
  .AddressComponent .address .street .recipient .contacts > .frow,
  .AddressComponent .recipient .contacts .recipient .contacts > .frow {
    display: block;
  }
  .AddressComponent .address .street input,
  .AddressComponent .address .street span,
  .AddressComponent .address .street .frow:first-of-type,
  .AddressComponent .address .street .frow:last-of-type,
  .AddressComponent .recipient .contacts input,
  .AddressComponent .recipient .contacts span,
  .AddressComponent .recipient .contacts .frow:first-of-type,
  .AddressComponent .recipient .contacts .frow:last-of-type {
    width: 100%;
  }
  .AddressComponent > div:not(.map-desktop) {
    width: 100%;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-none) var(--spacing-md);
  }
  .AddressComponent textarea {
    height: 150px;
  }
  .AddressComponent input[type=submit] {
    min-width: 100%;
    max-width: 100%;
  }
  .AddressComponent > .map-desktop {
    display: none;
  }
  .AddressComponent .city .map-mobile {
    width: 100%;
    height: 300px;
    display: block;
  }
  .AddressComponent .city .map-mobile .inline {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
  .AddressComponent .city .map-mobile .inline #map {
    position: relative;
    width: 100% !important;
    height: 300px !important;
  }
  .AddressComponent .city .map-mobile .inline #map::after {
    width: 32px;
    height: 42px;
    background: url(/img/re/map-marker-round.svg);
    background-size: 32px 42px;
  }
}

.ui-dialog:has(.addrmod) .buyLoggedOutModalWrapper .btns .bblink {
  background-color: var(--brand-400);
  color: var(--gray-100);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;
}

.ui-dialog:has(.AddressComponent) .ui-menu {
  height: fit-content;
}

.ui-dialog:has(.AddressComponent) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-none);
  z-index: 105;
}

.ui-dialog:has(.AddressComponent) .ui-dialog-titlebar-close span {
  background-color: var(--gray-100);
  transition: all 0.3s ease-out;
}

.ui-dialog:has(.AddressComponent) .ui-dialog-titlebar-close:hover span {
  box-shadow: 0 10px 20px 0 rgba(26, 29, 62, 0.15);
}

.ui-dialog:has(.AddressComponent) form div.error {
  display: none;
}

.AdStatComponent {
  display: flex;
  align-items: center;
  gap: var(--spacing-alt-xs);
  width: fit-content;
  transition: all 0.2s;
  color: var(--gray-800);
  cursor: default;
}
.AdStatComponent.red > .stat-value {
  color: var(--error-400);
}
.AdStatComponent a.clickable {
  display: flex;
  align-items: center;
  gap: var(--spacing-alt-xs);
  color: var(--brand-400);
  max-width: 100%;
}
.AdStatComponent > img, .AdStatComponent a.clickable > img,
.AdStatComponent > svg, .AdStatComponent a.clickable > svg {
  width: 16px;
  height: 16px;
  color: var(--gray-800);
  transition: all 0.2s;
}
.AdStatComponent a.clickable > img,
.AdStatComponent a.clickable > svg {
  color: var(--brand-400);
}
.AdStatComponent svg path {
  stroke: currentColor;
}
.AdStatComponent div.stat-value {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.AdStatComponent:hover {
  color: var(--brand-400);
}
.AdStatComponent:hover > img, .AdStatComponent:hover a.clickable > img,
.AdStatComponent:hover > svg, .AdStatComponent:hover a.clickable > svg {
  color: var(--brand-400);
}

@media screen and (max-width: 1024px) {
  .AdStatComponent a.clickable div.stat-value {
    color: var(--brand-400);
    text-decoration: underline;
  }
  .AdStatComponent > img, .AdStatComponent a.clickable > img,
  .AdStatComponent > svg, .AdStatComponent a.clickable > svg {
    width: 16px;
    height: 16px;
    color: var(--gray-900);
    transition: all 0.2s;
  }
  .AdStatComponent a.clickable > img,
  .AdStatComponent a.clickable > svg {
    color: var(--brand-400);
  }
  .AdStatComponent div.stat-value {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--gray-900);
  }
  .AdStatComponent:hover {
    color: var(--gray-900);
  }
  .AdStatComponent:hover > img, .AdStatComponent:hover a.clickable > img,
  .AdStatComponent:hover > svg, .AdStatComponent:hover a.clickable > svg {
    color: var(--gray-900);
  }
}
.AppDownloadBannerComponent {
  display: none;
}

@media screen and (max-width: 1024px) {
  .AppDownloadBannerComponent {
    position: fixed;
    z-index: 106;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    display: none;
    background-color: var(--gray-200);
    overflow: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .AppDownloadBannerComponent.visible {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .AppDownloadBannerComponent .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 800px;
    padding: var(--spacing-2xl);
    box-sizing: border-box;
  }
  .AppDownloadBannerComponent .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    width: 100%;
    margin: var(--spacing-none);
    max-width: 40ch;
  }
  .AppDownloadBannerComponent .text-container .title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .text-container .subtitle {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--gray-900);
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 100%;
    object-fit: contain;
  }
  .AppDownloadBannerComponent .action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    flex-shrink: 0;
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .download-button {
    display: none;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .download-button .bblink {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .AppDownloadBannerComponent .action-container .skip-button {
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .skip-button a {
    font-size: var(--font-size-lg);
    color: var(--gray-900);
    text-decoration: none;
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  .AppDownloadBannerComponent {
    position: fixed;
    z-index: 106;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    display: none;
    background-color: var(--gray-200);
    overflow: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
  }
  .AppDownloadBannerComponent.visible {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .AppDownloadBannerComponent .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 800px;
    padding: var(--spacing-2xl);
    box-sizing: border-box;
  }
  .AppDownloadBannerComponent .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    width: 100%;
    margin: var(--spacing-none);
    max-width: 40ch;
  }
  .AppDownloadBannerComponent .text-container .title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .text-container .subtitle {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--gray-900);
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 100%;
    object-fit: contain;
  }
  .AppDownloadBannerComponent .action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    flex-shrink: 0;
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .download-button {
    display: none;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .download-button .bblink {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .AppDownloadBannerComponent .action-container .skip-button {
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .skip-button a {
    font-size: var(--font-size-lg);
    color: var(--gray-900);
    text-decoration: none;
  }
}
.AppLanguageSelectorComponent {
  position: relative;
  margin-right: var(--spacing-lg);
  display: inline-block;
  width: 18px;
  height: 12px;
  cursor: pointer;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 18px 12px;
}
.AppLanguageSelectorComponent__menu {
  font-size: var(--font-size-xxs);
  font-weight: 400;
  position: absolute;
  z-index: 99;
  display: none;
  padding: var(--spacing-alt-xs) var(--spacing-none);
  text-align: left;
  border-radius: var(--radius-alt-xs);
  background-color: var(--gray-100);
  box-shadow: 0 0 2px 0 rgba(26, 29, 62, 0.2);
  user-select: none;
  right: -11px;
  top: 26px;
}
@media screen and (max-width: 1024px) {
  .AppLanguageSelectorComponent__menu {
    font-size: var(--font-size-sm);
  }
}
.AppLanguageSelectorComponent__menu:before {
  position: absolute;
  top: -5px;
  right: 13px;
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  background-color: var(--gray-100);
  transform: rotate(225deg);
  box-shadow: 0 2px 2px -2px rgba(26, 29, 62, 0.2), 2px 0 2px -2px rgba(26, 29, 62, 0.2);
}
.AppLanguageSelectorComponent__menu--flip {
  right: auto;
  left: -7px;
  bottom: calc(100% + 14px);
  top: auto;
}
.AppLanguageSelectorComponent__menu--flip:before {
  top: auto;
  bottom: -5px;
  left: var(--spacing-sm);
  transform: rotate(405deg);
}
.AppLanguageSelectorComponent__item {
  color: var(--gray-700);
  position: relative;
  height: 16px;
  padding: var(--spacing-alt-xs) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-alt-xs);
}
.AppLanguageSelectorComponent__item:hover {
  color: var(--brand-400);
}
.AppLanguageSelectorComponent__flag {
  width: 18px;
  height: 12px;
  background-size: 18px 12px;
  background-repeat: no-repeat;
}
.AppLanguageSelectorComponent__flag--en {
  background-image: url(/img/redesign/icons/flags/flag-eng.svg);
}
.AppLanguageSelectorComponent__flag--ru {
  background-image: url(/img/redesign/icons/flags/flag-rus.svg);
}
.AppLanguageSelectorComponent__flag--am {
  background-image: url(/img/redesign/icons/flags/flag-arm.svg);
}
.AppLanguageSelectorComponent--en {
  background-image: url(/img/redesign/icons/flags/flag-eng.svg);
}
.AppLanguageSelectorComponent--ru {
  background-image: url(/img/redesign/icons/flags/flag-rus.svg);
}
.AppLanguageSelectorComponent--am {
  background-image: url(/img/redesign/icons/flags/flag-arm.svg);
}

@media screen and (min-width: 1025px) {
  body:has(#ph):not(:has(#secondary-header-wrapper)) .AppLanguageSelectorComponent {
    position: fixed;
    right: var(--spacing-xl);
    top: calc((var(--primary-header-height) - 12px) / 2);
    margin: 0;
    z-index: 109;
  }
}

@media screen and (min-width: 1025px) {
  body:has(#secondary-header-wrapper) .AppLanguageSelectorComponent {
    position: fixed;
    right: var(--spacing-xl);
    top: calc((var(--secondary-header-height) - 12px) / 2);
    margin: 0;
    z-index: 109;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1130px) {
  body:has(#secondary-header-wrapper) .AppLanguageSelectorComponent {
    right: calc((100vw - 1000px) / 2);
  }
}

body.f .AppLanguageSelectorComponent {
  right: var(--spacing-alt-xs);
}

.dialog-body-unscroll .AppLanguageSelectorComponent {
  z-index: 101;
}

@media screen and (max-width: 1130px) {
  #main:has(.plogin:not(.reg)) + #pfooter {
    visibility: visible;
  }
}
.AppNotificationAreaHeaderComponent {
  display: flex;
  gap: var(--spacing-sm);
}

.AppNotificationAreaHeaderComponent > a {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-alt-sm);
  display: block;
  position: relative;
}

.AppNotificationAreaHeaderComponent > a > div {
  position: absolute;
  top: -8px;
  left: 10px;
  padding: 1px var(--spacing-alt-xs);
  font-size: 8px;
  font-weight: bold;
  color: var(--gray-100);
  text-align: center;
  border-radius: 20px;
}

.AppNotificationAreaHeaderComponent > a.m > div {
  background-color: var(--brand-400);
}

.AppNotificationAreaHeaderComponent > a.n > div {
  background-color: var(--brand-400);
}

.AppNotificationAreaHeaderComponent:hover > a.n > div {
  background-color: var(--brand-400);
}

@media screen and (max-width: 1024px) {
  .AppNotificationAreaHeaderComponent {
    display: none;
  }
}
.AssetCropperComponent {
  user-select: none;
}
.AssetCropperComponent__overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 115;
  touch-action: none;
}
.AssetCropperComponent__dialog {
  width: 660px;
  max-width: calc(100% - 32px);
  overflow: hidden;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  color: var(--gray-900);
}
.AssetCropperComponent__stage {
  width: calc(100% + 2 * var(--spacing-2xl));
  margin-left: calc(-1 * var(--spacing-2xl));
  margin-right: calc(-1 * var(--spacing-2xl));
}
.AssetCropperComponent__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
  padding-right: 44px;
}
.AssetCropperComponent__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
}
.AssetCropperComponent__close {
  border: none;
  background: transparent;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-sm);
  cursor: pointer;
  color: var(--gray-700);
  width: 32px;
  height: 32px;
  position: absolute;
  top: var(--spacing-md);
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.AssetCropperComponent__close img {
  width: 16px;
  height: 16px;
  display: block;
}
.AssetCropperComponent__close:hover {
  background: var(--gray-100);
}
.AssetCropperComponent__description {
  color: var(--gray-800);
  font-size: var(--font-size-md);
  font-style: normal;
  letter-spacing: -0.3;
  font-weight: 500;
  margin-bottom: var(--spacing-2xl);
}
.AssetCropperComponent__stage {
  position: relative;
  width: 100%;
  background: var(--gray-100);
  border-radius: 0;
  overflow: hidden;
  cursor: move;
  touch-action: none;
}
.AssetCropperComponent__stage--reset {
  height: auto !important;
  aspect-ratio: auto !important;
}
.AssetCropperComponent__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  user-select: none;
  pointer-events: none;
  max-width: none;
  max-height: none;
}
.AssetCropperComponent__frame {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.AssetCropperComponent__dropzone {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--spacing-sm);
  background: var(--gray-300);
  border: 1px dashed var(--gray-300);
  color: var(--gray-600);
  text-align: center;
  z-index: 2;
}
.AssetCropperComponent__dropzone.is-dragover {
  border-color: var(--brand-400);
  background: rgba(16, 118, 255, 0.08);
}
.AssetCropperComponent__dropzone-line {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.AssetCropperComponent__dropzone-link {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--brand-500);
  font: inherit;
}
.AssetCropperComponent__dropzone-link:hover {
  background-color: transparent;
  text-decoration: none;
}
.AssetCropperComponent__hint {
  margin-top: var(--spacing-2xl);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--gray-600);
}
.AssetCropperComponent__hint--error {
  color: var(--error-400);
}
.AssetCropperComponent__zoom {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-2xl);
}
.AssetCropperComponent__zoom-range {
  flex: 1;
  accent-color: var(--gray-900);
}
.AssetCropperComponent__zoom-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
}
.AssetCropperComponent__zoom-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: var(--radius-4xl);
  background: var(--gray-900);
}
.AssetCropperComponent__zoom-btn {
  border: none;
  background: transparent;
  font-size: var(--font-size-3xl);
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: var(--line-height-xl);
  color: var(--gray-900);
}
.AssetCropperComponent__zoom-btn:hover {
  background: transparent;
}
.AssetCropperComponent__zoom-btn:disabled {
  color: var(--gray-500);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.6;
}
.AssetCropperComponent__shift {
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  display: none;
}
.AssetCropperComponent__shift-btn {
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
  border-radius: var(--radius-alt-sm);
  padding: var(--spacing-alt-xs) var(--spacing-md);
  cursor: pointer;
  color: var(--gray-900);
}
.AssetCropperComponent__actions {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: flex-start;
}
.AssetCropperComponent__spacer {
  flex: 1;
}
.AssetCropperComponent__actions .AssetCropperComponent__spacer:last-of-type {
  flex: 0 0 12px;
}
.AssetCropperComponent__btn {
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-lg);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-highlight, 500);
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  min-width: 160px;
  width: 160px;
  height: 56px;
  font-family: "List Custom";
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.AssetCropperComponent__btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.AssetCropperComponent__delete {
  background: var(--gray-300);
  color: var(--gray-700);
}
.AssetCropperComponent__delete:hover {
  background: var(--gray-300);
}
.AssetCropperComponent__delete:disabled {
  opacity: 0.5;
  background-color: var(--gray-500);
  color: var(--gray-700);
  cursor: not-allowed;
}
.AssetCropperComponent__change {
  background: rgba(16, 118, 255, 0.12);
  color: var(--brand-500);
}
.AssetCropperComponent__change:hover {
  background: rgba(16, 118, 255, 0.12);
}
.AssetCropperComponent__change:disabled {
  opacity: 0.5;
  background-color: var(--gray-500);
  color: var(--gray-700);
  cursor: not-allowed;
}
.AssetCropperComponent__apply {
  background: var(--brand-400);
  color: var(--gray-100);
}
.AssetCropperComponent__apply:hover {
  background: --gray-200;
}
.AssetCropperComponent__apply:disabled {
  opacity: 0.5;
  background-color: var(--gray-500);
  color: var(--gray-700);
  cursor: not-allowed;
}

.AssetCropperComponent__actions button,
.AssetCropperComponent__actions a,
.AssetCropperComponent__zoom-btn,
.AssetCropperComponent__zoom-range,
.AssetCropperComponent__header,
.AssetCropperComponent__description,
.AssetCropperComponent__hint {
  user-select: none;
}

.AssetCropperComponent__dialog .AssetCropperComponent__stage {
  width: calc(100% + 2 * var(--spacing-2xl));
  margin-left: calc(-1 * var(--spacing-2xl));
  margin-right: calc(-1 * var(--spacing-2xl));
}

body.AssetCropperComponent--open {
  overflow: hidden;
}

.assetupload-inline-error {
  display: none;
  max-width: 488px;
  margin-top: var(--spacing-xs);
  width: 100%;
  flex-basis: 100%;
  order: 2;
}

@media screen and (max-width: 1024px) {
  .AssetCropperComponent__overlay {
    align-items: stretch;
  }
  .AssetCropperComponent__dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: var(--spacing-xl);
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .AssetCropperComponent__header {
    position: relative;
    padding-right: 44px;
  }
  .AssetCropperComponent__close {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 126;
    background: var(--gray-100);
    border-radius: var(--radius-4xl);
  }
  .AssetCropperComponent__frame {
    inset: 12% 0;
  }
  .AssetCropperComponent__stage {
    max-height: 45vh;
  }
  .AssetCropperComponent__zoom {
    margin: var(--spacing-2xl);
  }
  .AssetCropperComponent__zoom-btn {
    position: relative;
  }
  .AssetCropperComponent__zoom-range {
    padding: 12px 0;
  }
  .AssetCropperComponent__zoom-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
  }
  .AssetCropperComponent__zoom-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
  }
  .AssetCropperComponent__zoom-btn::before {
    content: "";
    position: absolute;
    inset: -16px;
  }
  .AssetCropperComponent__actions {
    margin-top: auto;
    background: var(--gray-100);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-6xl);
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
    border-top: 1px solid var(--gray-200);
  }
  .AssetCropperComponent__spacer {
    display: none;
  }
  .AssetCropperComponent__btn {
    width: 100%;
    height: 56px;
  }
  .AssetCropperComponent__shift {
    margin-bottom: var(--spacing-md);
  }
  body.AssetCropperComponent--open #ph {
    display: none !important;
  }
}
@media (min-width: 1025px) {
  .AssetCropperComponent__dialog {
    width: 660px;
    max-width: calc(100% - 32px);
    padding: var(--spacing-2xl);
  }
}
.vi .attr.g:has(.AttributeComponent) {
  display: flex;
  padding: var(--spacing-xxs) var(--spacing-none);
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--spacing-2xl);
  flex-direction: row;
  justify-content: flex-start;
}
.vi .attr.g:has(.AttributeComponent).new {
  padding-top: var(--spacing-alt-sm);
  padding-bottom: var(--spacing-3xl);
}
.vi .attr.g:has(.AttributeComponent).bordered {
  border-bottom: 1px solid var(--gray-400);
}

.AttributeComponent {
  display: flex;
  align-items: center;
  gap: var(--spacing-alt-xs);
  flex: 0 0 calc((100% - var(--spacing-2xl) * 2) / 3);
  min-width: 0;
}
.AttributeComponent .attr-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.AttributeComponent .attr-info-wraper {
  gap: var(--spacing-xxs);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.AttributeComponent .attr-info-wraper .attr-value {
  max-height: 40px;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}
.AttributeComponent .attr-info-wraper .attr-value.one-line {
  max-height: 20px;
}
.AttributeComponent.disabled .attr-info-wraper p {
  color: var(--gray-600);
}

@media screen and (max-width: 1024px), screen and (max-width: 1024px) and (orientation: portrait) {
  .vi .attr.g:has(.AttributeComponent).new {
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
  }
  .AttributeComponent {
    flex: 0 0 calc((100% - var(--spacing-md)) / 2);
  }
  .AttributeComponent .attr-icon {
    width: 36px;
    height: 36px;
  }
}
.BoxComponent {
  display: block;
  box-sizing: border-box;
  color: inherit;
  text-align: inherit;
}

.BundleDiscountBannerComponent {
  margin-left: -1px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  background-color: var(--brand-100);
}

.BundleDiscountBannerComponent > .text-wrapper > .heading {
  font-size: 17px;
}

.BundleDiscountBannerComponent > .text-wrapper > .message {
  font-size: 15px;
}

.BundleDiscountBannerComponent > .image {
  width: 100px;
  height: 100px;
}

.CadastralNumberFormElement {
  width: 100%;
}

.CarBrandMultiSelectDropdownComponent {
  /* Less padding between search bar and first section (Popular) */
  /* Section labels (Popular, All): smaller gap below search, bold title */
}
.CarBrandMultiSelectDropdownComponent > .l > span {
  padding-bottom: var(--spacing-xs);
}
.CarBrandMultiSelectDropdownComponent > .l > div.section-label {
  margin-top: var(--spacing-sm);
}
.CarBrandMultiSelectDropdownComponent > .l > div.section-label:first-of-type {
  margin-top: var(--spacing-xs);
}
.CarBrandMultiSelectDropdownComponent > .l > div.section-label .title-wrapper,
.CarBrandMultiSelectDropdownComponent > .l > div.section-label .title-wrapper * {
  font-weight: 700;
}
.CarBrandMultiSelectDropdownComponent > .l > div.i.disabled {
  pointer-events: none;
}
.CarBrandMultiSelectDropdownComponent > .l > div.i.disabled input[type=checkbox] + span {
  border-color: var(--gray-400);
}
.CarBrandMultiSelectDropdownComponent > .l > div.i.disabled .title-wrapper p {
  color: var(--gray-500);
}
@media screen and (max-width: 1024px) {
  .CarBrandMultiSelectDropdownComponent > .l > div.i {
    padding: var(--spacing-alt-sm) var(--spacing-sm) var(--spacing-alt-sm) var(--spacing-lg) !important;
  }
}
.CarBrandMultiSelectDropdownComponent .title-wrapper > p {
  letter-spacing: 0px !important;
}

.CarGenerationMultiSelectDropdownComponent {
  /* "(All)" in Make Model (All) chips displayed lowercase via CSS */
  /* Less padding between search bar and list */
  /* Hide checkbox for group headers (Make + Model names) */
}
.CarGenerationMultiSelectDropdownComponent .chip-parens-lower {
  text-transform: lowercase;
}
.CarGenerationMultiSelectDropdownComponent > .l > span {
  padding-bottom: var(--spacing-xs);
}
.CarGenerationMultiSelectDropdownComponent > .l > div.t > input[type=checkbox],
.CarGenerationMultiSelectDropdownComponent > .l > div.t > input[type=checkbox] + span {
  display: none !important;
}

/* Mobile: show Apply/Cancel buttons (match Make/Model behavior); base selector may not apply to this component */
@media screen and (max-width: 1024px) {
  .CarGenerationMultiSelectDropdownComponent > .l > .ca-btn {
    display: flex;
    padding: var(--spacing-alt-sm) var(--spacing-md) var(--spacing-md);
  }
  .CarGenerationMultiSelectDropdownComponent > .l.ms:has(.ca-btn) {
    padding-bottom: var(--spacing-none);
  }
}
.CarModelMultiSelectDropdownComponent {
  /* "(All)" in Make (All) chips displayed lowercase via CSS */
  /* Less padding between search bar and list */
  /* Hide checkbox for group headers (make names) */
}
.CarModelMultiSelectDropdownComponent .chip-parens-lower {
  text-transform: lowercase;
}
.CarModelMultiSelectDropdownComponent > .l > span {
  padding-bottom: var(--spacing-xs);
}
.CarModelMultiSelectDropdownComponent > .l > div.t > input[type=checkbox],
.CarModelMultiSelectDropdownComponent > .l > div.t > input[type=checkbox] + span {
  display: none !important;
}

.CarModelSelectorModal {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  gap: var(--spacing-lg);
}
.CarModelSelectorModal > div {
  width: 100%;
}
.CarModelSelectorModal .frow2 {
  padding: var(--spacing-none);
  flex-direction: column;
  gap: var(--spacing-xs);
}
.CarModelSelectorModal .add-car-btn {
  background-color: var(--brand-400);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.32px;
  width: 100%;
  margin-top: var(--spacing-md);
}
.CarModelSelectorModal .add-car-btn:hover {
  background-color: var(--brand-300);
}
.CarModelSelectorModal .add-car-btn:disabled {
  background-color: var(--gray-400);
  color: var(--gray-500);
  pointer-events: none;
}

/*---------------------------------------------------------------------------*/
/* custom form list for car parts compat form element */
#CarPartsCompatSelectorFormElement > .list > div {
  color: var(--gray-900);
  display: flex;
  align-items: center;
  padding: var(--spacing-alt-sm) var(--spacing-none);
  border-bottom: 1px dotted var(--gray-400);
}

#CarPartsCompatSelectorFormElement > .list > div:last-child {
  margin-bottom: var(--spacing-alt-sm);
  border: none;
}

#CarPartsCompatSelectorFormElement > .list > div > div {
  width: 25%;
}

#CarPartsCompatSelectorFormElement > .list > div > div:nth-child(3) {
  flex: 1;
  width: 40%;
}

#CarPartsCompatSelectorFormElement > .list > div > div.x {
  width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  padding: var(--spacing-alt-xs);
  cursor: pointer;
  border-radius: 24px;
  background: url(/img/close.png) center center no-repeat;
  background-size: 16px 16px;
  transition: all 0.2s;
}

#CarPartsCompatSelectorFormElement > .list > div > div.x:hover {
  background-color: var(--gray-300);
}

#CarPartsCompatSelectorFormElement > div:first-child {
  margin: var(--spacing-none);
}

#CarPartsCompatSelectorFormElement > a, #CarPartsCompatSelectorFormElement > a:visited {
  color: var(--brand-400);
  display: inline-block;
  margin-left: -16px;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 16px;
  transition: all 0.2s;
}

#CarPartsCompatSelectorFormElement > a:hover {
  background-color: var(--gray-300);
}

#CarPartsCompatSelectorFormElement .err {
  display: block;
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none);
  font-size: 14px;
}

@media screen and (max-width: 1024px) {
  #CarPartsCompatSelectorFormElement > div:first-child {
    margin: var(--spacing-none);
    text-align: left;
  }
  #CarPartsCompatSelectorFormElement > .list > div > div {
    margin-right: var(--spacing-alt-sm);
  }
}
.CategoryFilterButtonComponent {
  display: none;
}

@media screen and (max-width: 1024px) {
  .CategoryFilterButtonComponent {
    font-size: 16px;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    max-width: 150px;
    text-align: left;
  }
  .filter.business-page-search-form .CategoryFilterButtonComponent {
    height: 48px;
  }
  .CategoryFilterButtonComponent span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: var(--spacing-none) var(--spacing-lg) var(--spacing-none) var(--spacing-none);
    vertical-align: middle;
    background: url(/img/redesign/icons/sliders.svg) 0 0 no-repeat;
    background-size: 24px 24px;
  }
  .CategoryFilterButtonComponent div {
    display: inline;
    font-weight: 500;
  }
  .dl.p .CategoryFilterButtonComponent {
    padding: var(--spacing-none);
    margin-left: var(--spacing-sm);
  }
  .dl.p .CategoryFilterButtonComponent span {
    margin: var(--spacing-none);
  }
  .dl .dlsearch form.filter .CategoryFilterButtonComponent {
    margin-left: var(--spacing-none);
  }
}
.CategoryListFilterComponentNew {
  border-bottom: none;
  text-align: left;
  font-size: 14px;
  line-height: 30px;
  margin-bottom: var(--spacing-3xl);
}
.CategoryListFilterComponentNew > .categoryTree > .categoryNode:not(:last-child) {
  padding-bottom: var(--spacing-xl);
}
.CategoryListFilterComponentNew .componentTitle {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: var(--spacing-alt-sm);
}
.CategoryListFilterComponentNew .categoryTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}
.CategoryListFilterComponentNew .categoryTitle div, .CategoryListFilterComponentNew .categoryTitle a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}
.CategoryListFilterComponentNew .categoryTitle:not(.selected):hover {
  cursor: pointer;
}
.CategoryListFilterComponentNew .categoryTitle:not(.selected):hover .adsCount {
  color: var(--brand-400);
}
.CategoryListFilterComponentNew .categoryTitle:not(.selected):hover a {
  color: var(--brand-400);
}
.CategoryListFilterComponentNew .categoryTitle .adsCount {
  font-size: var(--font-size-tiny);
  line-height: 12px;
  display: flex;
  padding: var(--spacing-xxs) var(--spacing-xs);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-alt-sm);
  border-radius: 100px;
  font-weight: 500;
  background: var(--gray-300);
}
.CategoryListFilterComponentNew .categoryChildren.marginLeft {
  margin-left: var(--spacing-md);
}
.CategoryListFilterComponentNew .categoryChildren.marginLeft20 {
  margin-left: var(--spacing-xl);
}
.CategoryListFilterComponentNew .categoryChildren.marginLeft32 {
  margin-left: var(--spacing-4xl);
}
.CategoryListFilterComponentNew .categoryChildren.hide .categoryTree > .categoryNode:nth-child(n+6) {
  display: none;
}
.CategoryListFilterComponentNew .categoryChildren.marginLeft .selected {
  margin-left: var(--spacing-none) !important;
}
.CategoryListFilterComponentNew .showMoreBtn {
  color: var(--brand-400);
  cursor: pointer;
}
.CategoryListFilterComponentNew .showMoreBtn.marginLeft20 {
  margin-left: var(--spacing-xl);
}
.CategoryListFilterComponentNew.hideShowSearch > .categoryTree > .categoryNode:nth-child(n+4) {
  display: none;
}
.CategoryListFilterComponentNew .selected {
  font-weight: bold;
  margin-left: var(--spacing-xl);
  width: auto;
}
.CategoryListFilterComponentNew .selected.removeMargin {
  margin-left: var(--spacing-none) !important;
}
.CategoryListFilterComponentNew .allSelected {
  font-weight: bold;
}
.CategoryListFilterComponentNew .allSelected.removeMargin {
  margin-left: var(--spacing-none) !important;
}
.CategoryListFilterComponentNew .bold {
  font-weight: bold;
}
.CategoryListFilterComponentNew a span {
  display: flex;
  align-items: center;
}
.CategoryListFilterComponentNew a span img {
  width: 20px;
  height: 20px;
}
.CategoryListFilterComponentNew .category-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  max-width: 260px;
}
.CategoryListFilterComponentNew .category-title-text .category-title-text {
  max-width: 230px;
}

@media screen and (max-width: 1024px) {
  .CategoryListFilterComponentNew {
    display: none;
  }
  .CategoryListFilterComponentNew.showOnMobile {
    display: block;
    margin: var(--spacing-md);
    font-size: 16px;
  }
  .CategoryListFilterComponentNew.showOnMobile .categoryTitle span {
    font-size: 16px;
  }
  .CategoryListFilterComponentNew.showOnMobile > .categoryTree > .categoryNode:not(:last-child) {
    padding-bottom: var(--spacing-md);
  }
  .CategoryListFilterComponentNew .category-title-text {
    max-width: unset;
  }
  .CategoryListFilterComponentNew .category-title-text .category-title-text {
    max-width: unset;
  }
}
.CategoryMenuButtonComponent {
  position: relative;
  z-index: 110;
}
.CategoryMenuButtonComponent > span {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--gray-900);
}
.CategoryMenuButtonComponent > span > label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  margin-right: var(--spacing-xs);
}
.CategoryMenuButtonComponent > span > label .menu-button {
  width: 24px;
  height: 24px;
}
.CategoryMenuButtonComponent:hover > span {
  color: var(--brand-400);
}
.CategoryMenuButtonComponent:hover > span label .menu-button {
  color: var(--brand-400);
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}
.CategoryMenuButtonComponent > div {
  position: fixed;
  z-index: 40;
  width: 1220px;
  display: none;
  left: 0;
  right: 0;
  margin: auto;
}
.CategoryMenuButtonComponent > div > div {
  background-color: #fff;
  margin: var(--spacing-2xl) auto var(--spacing-none);
  padding: var(--spacing-none);
  border-radius: 0 0 12px 12px;
}
.CategoryMenuButtonComponent > div > div > .c {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  border-right: 1px solid #eee;
  width: 280px;
  padding: var(--spacing-sm) var(--spacing-none);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.CategoryMenuButtonComponent > div > div > .c > i {
  display: block;
  height: 6px;
  margin-bottom: var(--spacing-alt-xs);
  border-bottom: 1px solid #eee;
  width: 280px;
}
.CategoryMenuButtonComponent > div > div > .c > span > a {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gray-900);
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-alt-xs) var(--spacing-sm) var(--spacing-md);
  align-items: center;
}
.CategoryMenuButtonComponent > div > div > .c > span > a > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.CategoryMenuButtonComponent > div > div > .c > span > a img {
  width: 20px;
  height: 20px;
}
.CategoryMenuButtonComponent > div > div > .c > span > div {
  position: absolute;
  top: 22px;
  bottom: 0;
  left: 280px;
  margin: var(--spacing-none);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex-wrap: wrap;
  display: flex;
}
.CategoryMenuButtonComponent > div > div > .c > span > div::-webkit-scrollbar {
  display: none;
}
.CategoryMenuButtonComponent > div > div > .c > span > div a {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  display: block;
  padding: var(--spacing-xs) var(--spacing-none);
}
.CategoryMenuButtonComponent > div > div > .c > span > div a.st {
  font-weight: 700;
  font-size: 14px;
  padding: var(--spacing-xs) var(--spacing-none);
}
.CategoryMenuButtonComponent > div > div > .c > span.s > a {
  color: var(--brand-400);
}
.CategoryMenuButtonComponent > div > div > .c > span.s > a img {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}
.CategoryMenuButtonComponent > div > div > .c::-webkit-scrollbar {
  display: none;
}
.CategoryMenuButtonComponent > div > .c > span {
  left: 280px;
}
.CategoryMenuButtonComponent > div .pane {
  display: inline-block;
  box-sizing: border-box;
  color: var(--gray-900);
  width: 306px;
  padding: var(--spacing-lg) var(--spacing-xl);
  vertical-align: top;
  white-space: normal;
  line-height: 24px;
}
.CategoryMenuButtonComponent > div .pane > .category-section {
  font-size: 16px;
}
.CategoryMenuButtonComponent > div .pane > b {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.16px;
  display: block;
  margin-top: var(--spacing-xxs);
}
.CategoryMenuButtonComponent > div .pane:last-child {
  padding-right: var(--spacing-none);
}
.CategoryMenuButtonComponent > div .pane .s {
  padding: var(--spacing-xxs) var(--spacing-none) var(--spacing-sm);
}

body.f .CategoryMenuButtonComponent > div {
  width: auto;
  max-width: 1200px;
  margin: auto;
}

body:has(#secondary-header-wrapper) .CategoryMenuButtonComponent > div > div {
  margin-top: var(--spacing-xl);
}

@media screen and (max-width: 1270px) {
  .CategoryMenuButtonComponent > div {
    width: auto;
    max-width: 98%;
  }
}
@media screen and (max-width: 1024px) {
  .CategoryMenuButtonComponent {
    display: none;
  }
}
.ChatTitleComponent {
  padding: var(--spacing-md);
  padding-right: var(--spacing-lg);
  background-color: var(--gray-300);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2xl);
}
.ChatTitleComponent .postWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-lg);
  max-width: 60%;
  width: 100%;
}
.ChatTitleComponent .postWrapper > .l > a > img {
  border-radius: var(--radius-sm);
}
.ChatTitleComponent .postWrapper .titleWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-alt-xs);
  width: 100%;
  max-width: calc(100% - 88px);
}
.ChatTitleComponent .postWrapper .titleWrapper > div:not(.inactivePost) a,
.ChatTitleComponent .postWrapper .titleWrapper div {
  overflow: hidden;
  color: var(--gray-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  max-width: 60%;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postWrapper .titleWrapper > div:not(.inactivePost) a,
  .ChatTitleComponent .postWrapper .titleWrapper div {
    flex: 1;
    font-size: 13px;
    font-style: normal;
    line-height: var(--line-height-sm);
    letter-spacing: -0.26px;
    max-width: 100%;
  }
}
.ChatTitleComponent .postWrapper .titleWrapper > div:not(.inactivePost) a:hover {
  color: var(--brand-400);
}
.ChatTitleComponent .postWrapper .titleWrapper > div:not(.inactivePost) {
  flex: 1;
  width: fit-content;
}
.ChatTitleComponent .postWrapper .titleWrapper > div:not(.inactivePost) > .priceCell {
  display: none;
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-none);
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postWrapper .titleWrapper > div:not(.inactivePost) > .priceCell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
  }
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postWrapper .titleWrapper > div:not(.inactivePost) {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postWrapper .titleWrapper {
    align-items: flex-start;
  }
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postWrapper {
    max-width: none;
  }
}
.ChatTitleComponent .postPriceWrapper {
  display: flex;
  line-height: 40px;
}
.ChatTitleComponent .postPriceWrapper > div {
  display: flex;
  line-height: 40px;
  align-items: center;
  gap: var(--spacing-2xl);
}
.ChatTitleComponent .postPriceWrapper > div .priceCell {
  overflow: hidden;
  color: var(--gray-900);
  text-overflow: ellipsis;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-sm);
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postPriceWrapper > div .priceCell {
    display: none;
  }
}
.ChatTitleComponent .postPriceWrapper > div a {
  background-color: var(--delivery-400);
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--radius-md);
  color: var(--gray-100);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-md);
  transition: background-color 0.3s ease-out;
  cursor: pointer;
}
.ChatTitleComponent .postPriceWrapper > div a:hover {
  background-color: var(--delivery-300);
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postPriceWrapper > div a {
    font-size: 13px;
    padding: var(--spacing-alt-xs) var(--spacing-lg);
  }
}
.ChatTitleComponent .postPriceWrapper > .emptyThumb {
  width: 80px;
  display: none;
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postPriceWrapper > .emptyThumb {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent .postPriceWrapper.btmWrapper {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .ChatTitleComponent {
    margin: var(--spacing-none) var(--spacing-md);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
}

.chatLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  gap: var(--spacing-sm);
  border-radius: var(--radius-xs);
  color: var(--gray-100);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: -0.18px;
  width: fit-content;
}
.chatLabel.orderType {
  background-color: var(--delivery-400);
}
.chatLabel.priceNegotiationType {
  background-color: var(--accent-tropicalIndigo);
}
.chatLabel.inactiveType {
  background-color: var(--gray-500);
  color: var(--gray-800);
}
.name .chatLabel {
  margin-left: var(--spacing-sm);
}
@media screen and (max-width: 1024px) {
  .chatLabel:not(.inactiveType) {
    display: none;
  }
}

.ChatViewComponent {
  overflow: auto;
  height: calc(100vh - 450px);
  min-height: 240px;
}

.ChatViewComponent .msg {
  display: flex;
  margin: var(--spacing-lg) var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-none);
}

.ChatViewComponent .msg .r {
  flex: 1;
  margin-left: var(--spacing-lg);
  display: flex;
}

.ChatViewComponent .msg .r > .rb {
  display: flex;
  gap: var(--spacing-sm);
  flex-direction: column;
  flex: 1;
}

.ChatViewComponent .msg .r .msg_u {
  font-size: 14px;
  margin-top: -2px;
}

.ChatViewComponent .msg .r > .rb > .i > div {
  font-size: 13px;
  color: var(--gray-600);
  margin: var(--spacing-xxs) var(--spacing-none);
}

.ChatViewComponent .msg .r > .rb > .i > div > .new {
  font-size: 12px;
  display: inline-block;
  color: var(--gray-100);
  background-color: var(--accent-electricRaspberry);
  margin-left: var(--spacing-alt-xs);
  border-radius: 8px;
  padding: var(--spacing-xxs) var(--spacing-alt-sm);
}

.dlmsg .att, .ChatViewComponent .msg .r > .rb > .att {
  font-size: 15px;
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-sm);
  color: var(--brand-400);
  transition: color 0.2s;
}

.ChatViewComponent .msg .r > .rb > .att:hover {
  color: var(--brand-300);
}

.ChatViewComponent .msg .r .msg_u a {
  font-weight: bold;
  font-size: 16px;
}

.ChatViewComponent .msg .r .msg_d {
  font-size: 11px;
  color: var(--gray-700);
  margin-left: var(--spacing-6xl);
  text-align: right;
}

.ChatViewComponent .msg .r .msg_d img {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-alt-sm);
}

.ChatViewComponent .msg .r .msg_b {
  font-size: 15px;
  font-weight: 400;
  box-sizing: border-box;
  width: fit-content;
  max-width: 640px;
  color: var(--gray-900);
  padding: var(--spacing-md) var(--spacing-lg);
  line-height: var(--line-height-md);
  border-radius: var(--spacing-md);
  background-color: var(--gray-300);
  overflow-wrap: anywhere;
}

.ChatViewComponent .msg .r .msg_b a {
  color: var(--brand-400);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 400;
}

.ChatViewComponent .msg .r .msg_b a:hover {
  text-decoration: underline;
}

.ChatViewComponent .msg .r .msg_b.priceAccepted {
  background-color: var(--brand-100);
  color: var(--brand-400);
  font-weight: 500;
}

.ChatViewComponent .msg .r .msg_b.priceRejected,
.ChatViewComponent .msg .r .msg_b.priceExpired {
  font-weight: 500;
  color: var(--error-400);
  background-color: var(--accent-error);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-md);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted,
.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-xl);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted {
  justify-content: space-between;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div {
  max-width: 85%;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div > div > p {
  margin: var(--spacing-none);
  overflow: hidden;
  color: var(--gray-900);
  text-overflow: ellipsis;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div > div > .offerView {
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted {
  padding: var(--spacing-md);
  border-radius: var(--spacing-md);
  border: 1px solid var(--gray-400);
  flex-wrap: wrap;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted div img {
  border-radius: var(--spacing-sm);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted a {
  width: fit-content;
  height: fit-content;
  background-color: var(--delivery-400);
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--radius-md);
  color: var(--gray-100);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-md);
  transition: background-color 0.3s ease-out;
  cursor: pointer;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted a:hover {
  background-color: var(--delivery-300);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > form > input,
.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > a {
  display: flex;
  padding: var(--spacing-sm) var(--spacing-lg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  transition: background-color 0.3s ease-out;
  cursor: pointer;
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > form > input.reject {
  background-color: var(--gray-300);
  color: var(--error-400);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > form > input.reject:hover {
  background-color: var(--gray-400);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > a {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > a:hover {
  background-color: var(--brand-300);
}

.ChatViewComponent .msg .r .msg_b.orderNote {
  background-color: var(--info-100);
}

.ChatViewComponent .notice {
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  background-color: var(--info-300);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  max-width: 480px;
}

.ChatViewComponent .d {
  font-size: 15px;
}

.ChatViewComponent .notice .t {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: var(--spacing-xxs);
}

.ChatViewComponent .msg .r > .rb > .att img {
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-xs);
}

.chat .chatReply textarea.TextAreaComponent {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: var(--gray-600) var(--gray-300);
}

.chat .chatReply textarea.TextAreaComponent::-webkit-scrollbar {
  width: 8px;
}

.chat .chatReply textarea.TextAreaComponent::-webkit-scrollbar-track {
  background: var(--gray-300);
  border-radius: var(--radius-sm);
}

.chat .chatReply textarea.TextAreaComponent::-webkit-scrollbar-thumb {
  background: var(--gray-600);
  border-radius: var(--radius-sm);
}

@media screen and (max-width: 1024px) {
  .ChatViewComponent {
    height: calc(100vh - 300px);
    min-height: 0;
    max-height: none;
  }
  .chat .ChatViewComponent .msg img.av_user, .chat .ChatViewComponent .msg img.av_comp {
    width: 48px;
    height: 48px;
  }
  .chat .ChatViewComponent .msg img.av_comp {
    border-radius: 8px;
  }
  .ChatViewComponent .msg .r .msg_u a {
    font-size: 14px;
    font-weight: 700;
  }
  .ChatViewComponent .msg {
    display: flex;
    align-items: flex-start;
    margin: var(--spacing-none);
    padding: var(--spacing-md);
    background-color: var(--gray-100);
  }
  .ChatViewComponent .msg .l {
    float: none;
    width: 64px;
  }
  .ChatViewComponent .av_user {
    width: 54px;
    height: 54px;
  }
  .ChatViewComponent .msg .r {
    flex: 1;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
    flex-direction: column;
  }
  .ChatViewComponent .msg .r .msg_u {
    font-size: 15px;
  }
  .ChatViewComponent .msg .r .msg_d {
    font-size: 12px;
    color: var(--gray-600);
    margin: var(--spacing-alt-xs) var(--spacing-none);
    text-align: left;
  }
  .ChatViewComponent .msg .r .msg_d div {
    float: right;
    margin: var(--spacing-none);
  }
  .ChatViewComponent .msg .r .msg_b {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--gray-900);
  }
  .ChatViewComponent .notice {
    max-width: none;
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted {
    padding: var(--spacing-sm);
    gap: var(--spacing-md);
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted a {
    font-size: 13px;
    padding: var(--spacing-alt-xs) var(--spacing-lg);
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div {
    gap: var(--spacing-md);
    max-width: 100%;
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div > div > p {
    font-size: 14px;
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper .actions.offerAccepted > div img {
    height: 64px;
  }
}
.CheckboxSelectComponent {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.CheckboxSelectComponent .DropdownComponent .me {
  background: none;
  border: none;
  padding-left: var(--spacing-sm);
}
.CheckboxSelectComponent .DropdownComponent .me div {
  padding: var(--spacing-none);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
}
.CheckboxSelectComponent .DropdownComponent .l div.i > div.title-wrapper {
  margin-right: 20px;
  width: unset;
  overflow: unset;
  text-overflow: unset;
}
.CheckboxSelectComponent .DropdownComponent.open .l.sm {
  width: auto;
  top: 32px;
  bottom: unset;
}
.CheckboxSelectComponent label.cbox div:first-child {
  margin-right: var(--spacing-sm);
}
.CheckboxSelectComponent label.cbox div:last-child {
  width: max-content;
  font-size: var(--font-size-xs);
}

.ComboSelectorComponent {
  position: relative;
  display: inline-block;
  overflow: visible !important;
  vertical-align: middle;
}

/* main element */
.ComboSelectorComponent > .me {
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  min-width: 60px;
  max-width: 400px;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
  height: 40px;
}

.ComboSelectorComponent > .me > div {
  font-size: 14px;
  color: var(--gray-900);
  overflow: hidden;
  padding: var(--spacing-none) var(--spacing-md);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 22px;
  line-height: 38px;
}

.ComboSelectorComponent > .me > div > img {
  width: 16px;
  height: 16px;
  min-width: 16px;
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}

.ComboSelectorComponent > .me > span > input:focus {
  border: none;
  box-shadow: none;
}

.ComboSelectorComponent > .me > div.ph {
  color: var(--gray-500);
}

.ComboSelectorComponent > .me > div.clr {
  display: flex;
  align-items: center;
}

.ComboSelectorComponent > .me > div.ico {
  background-image: var(--a-icon);
  background-size: 16px 16px;
  background-position: 12px center;
  background-repeat: no-repeat;
  padding-left: var(--spacing-5xl);
}

.ComboSelectorComponent.disabled > .me {
  cursor: default;
  border-color: var(--gray-300);
  background-color: var(--gray-200);
}

.ComboSelectorComponent.disabled > .me > div {
  color: var(--gray-700);
}

.ComboSelectorComponent.disabled > .me:after {
  display: none;
}

.ComboSelectorComponent.open > .me {
  border-color: var(--brand-400);
}

.ComboSelectorComponent > .me > img {
  transition: all 0.2s;
}

.ComboSelectorComponent.open > .me > img {
  transform: rotate(180deg);
}

.ComboSelectorComponent > .me > div.clr:before {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  min-width: 14px;
  height: 14px;
  margin-right: var(--spacing-sm);
  content: " ";
  border-radius: 50%;
  background-color: var(--a-color);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
}

/* search field */
.ComboSelectorComponent > .me > span {
  position: absolute;
  top: 3px;
  right: 25px;
  bottom: 4px;
  left: 12px;
  display: none;
}

.ComboSelectorComponent > .me > span > input {
  color: var(--gray-900);
  width: 100%;
  padding: var(--spacing-none);
  border: none;
  outline: 0;
  height: 32px;
}

.ComboSelectorComponent > .me > span > input::placeholder {
  color: var(--gray-600);
  padding: var(--spacing-none);
}

/* menu / list of elements */
.ComboSelectorComponent > .l {
  position: absolute;
  z-index: 105;
  top: 64px;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 320px;
  padding: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-alt-sm);
  user-select: none;
  opacity: 0;
  border: 1px solid var(--gray-400);
  border-radius: 8px;
  background-color: var(--gray-100);
  transition: opacity 150ms linear, top 150ms linear, bottom 150ms linear, display 150ms linear;
}

.ComboSelectorComponent.open > .l {
  left: 0;
  top: 40px;
  bottom: auto;
  display: block;
  opacity: 1;
  box-shadow: 0 4px 16px 0 rgba(26, 29, 62, 0.1);
}

.ComboSelectorComponent > .l.top {
  top: auto;
  bottom: 64px;
}

.ComboSelectorComponent.open > .l.top {
  bottom: 40px;
  display: block;
  opacity: 1;
}

/* search field mobile */
.ComboSelectorComponent > .l > span {
  display: none;
}

.ComboSelectorComponent > .l > div {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  text-align: left;
  text-overflow: ellipsis;
}

.ComboSelectorComponent > .l > div.i {
  font-size: 15px;
  color: var(--gray-900);
  margin: var(--spacing-none);
  padding: var(--spacing-alt-xs) 30px;
  cursor: pointer;
  white-space: nowrap;
}

.ComboSelectorComponent > .l > div.i:hover {
  color: var(--brand-400);
}

.ComboSelectorComponent > .l > div svg {
  display: none;
}

/* multi-select support  */
.ComboSelectorComponent > .l.ms {
  padding-bottom: var(--spacing-none);
}

.ComboSelectorComponent > .l.ms > div.i {
  padding: var(--spacing-alt-xs) var(--spacing-md) var(--spacing-alt-xs) var(--spacing-none);
}

.ComboSelectorComponent > .l.ms > div.i.g {
  padding-left: var(--spacing-2xl);
}

.ComboSelectorComponent > .l.ms > div.i.s:after {
  display: none;
}

.ComboSelectorComponent > .l.ms > div.i input + span {
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-lg);
}

/* buttons ok/cancel */
.ComboSelectorComponent > .l > .bt {
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none);
  position: sticky;
  bottom: 0;
  background-color: var(--gray-100);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--gray-300);
}

.ComboSelectorComponent > .l > .bt > div {
  padding: var(--spacing-alt-xs) var(--spacing-md);
  margin: var(--spacing-none);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 8px;
  flex: 1;
  text-align: center;
}

.ComboSelectorComponent > .l > .bt > .b1 {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.ComboSelectorComponent > .l > .bt > .b2 {
  color: var(--gray-600);
}

.ComboSelectorComponent > .l > .bt > .b1:hover {
  background-color: var(--brand-400);
}

.ComboSelectorComponent > .l > .bt > .b2:hover {
  color: var(--brand-400);
}

/* end multi-select support  */
.ComboSelectorComponent > .l > div.t {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-900);
  margin-top: var(--spacing-alt-xs);
  margin-bottom: -2px;
  padding: var(--spacing-alt-xs) var(--spacing-6xl);
  white-space: nowrap;
  transition: all 0.2s;
}

/*expandable title (exp) and non-expandable title (nexp)*/
.ComboSelectorComponent > .l > div.t.exp, .ComboSelectorComponent > .l > div.t.nexp {
  display: flex;
  cursor: pointer;
}

.ComboSelectorComponent > .l > div.t.i {
  padding: var(--spacing-alt-xs) 30px;
  margin: var(--spacing-alt-xs) var(--spacing-none) -2px var(--spacing-none);
}

.ComboSelectorComponent > .l > div.t.exp:after {
  position: absolute;
  top: 14px;
  right: 16px;
  left: auto;
  width: 5px;
  height: 5px;
  content: "";
  border-top: 1px solid var(--gray-500);
  border-right: 1px solid var(--gray-500);
  transition: all 0.2s;
  transform: rotate(135deg);
}

.ComboSelectorComponent > .l > div.t.exp:hover:after {
  border-top: 1px solid var(--brand-400);
  border-right: 1px solid var(--brand-400);
}

.ComboSelectorComponent > .l > div.t.exp.open:after {
  top: 16px;
  transform: rotate(-45deg);
}

.ComboSelectorComponent > .l > div.t.exp:hover, .ComboSelectorComponent > .l > div.t.nexp:hover {
  color: var(--brand-400);
}

.ComboSelectorComponent > .l > div.t2 {
  font-size: 16px;
  color: var(--gray-600);
  padding: var(--spacing-alt-xs) var(--spacing-2xl) var(--spacing-alt-xs) 46px;
  white-space: nowrap;
}

.ComboSelectorComponent > .l > div.g {
  padding-left: 46px;
}

/*collapsed item*/
.ComboSelectorComponent.open > .l > div.i.exp, .ComboSelectorComponent.open > .l > div.t2.exp {
  display: none;
}

.ComboSelectorComponent > .l > div.g2 {
  padding-left: var(--spacing-9xl);
}

.ComboSelectorComponent > .l > div.s {
  color: var(--brand-400);
}

/*checkbox for selected elements*/
.ComboSelectorComponent > .l > div.s:after, .ComboSelectorComponent > .l > div.t.exp.s:before {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 12px;
  height: 6px;
  content: "";
  border-top: 1px solid var(--brand-400);
  border-right: 1px solid var(--brand-400);
  transform: rotate(125deg);
}

.ComboSelectorComponent > .l > div.s:hover:after {
  border-color: var(--brand-400);
}

.ComboSelectorComponent > .l > div.t.s:hover:after {
  border-color: var(--brand-400);
}

/*counter for number of items*/
.ComboSelectorComponent > .l > div.t span, .ComboSelectorComponent > .l > div.i span {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  color: var(--gray-700);
  font-weight: normal;
  font-style: italic;
  font-size: 12px;
}

.ComboSelectorComponent > .l > div.t:hover span {
  color: var(--gray-900);
}

/* color circle used for color selection dropdowns */
.ComboSelectorComponent > .l > div > i {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  border-radius: 50%;
  background-color: var(--a-color);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.ComboSelectorComponent > .l > div > i.na {
  box-shadow: none;
  background-color: transparent;
}

/* icons for lsw selection dropdowns */
.ComboSelectorComponent > .l > div > img {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  pointer-events: none;
}

/* ToDo remove these once we unified styles for this component in all pages */
.postdlg.post-ad-form .ComboSelectorComponent > .me,
.postdlg.post-edit-form .ComboSelectorComponent > .me {
  border-color: var(--gray-300);
  background-color: var(--gray-300);
  opacity: 1;
  height: 44px;
}

.postdlg.post-ad-form .ComboSelectorComponent.open > .me:has(input[type=text]:focus),
.postdlg.post-edit-form .ComboSelectorComponent.open > .me:has(input[type=text]:focus) {
  border-color: var(--gray-900);
  background-color: var(--gray-100);
  opacity: 1;
  height: 44px;
}

.postdlg.post-ad-form .ComboSelectorComponent > .me input[type=text],
.postdlg.post-edit-form .ComboSelectorComponent > .me input[type=text] {
  opacity: 0;
  transition: background-color 0.2s, border-top-color 0.2s, border-bottom-color 0.2s;
}

.postdlg.post-ad-form .ComboSelectorComponent.open > .me input[type=text],
.postdlg.post-edit-form .ComboSelectorComponent.open > .me input[type=text] {
  opacity: 1;
  height: 42px;
  border: none;
  background-color: var(--gray-300);
}

.postdlg.post-ad-form .ComboSelectorComponent.open > .me input[type=text]:focus,
.postdlg.post-edit-form .ComboSelectorComponent.open > .me input[type=text]:focus {
  background-color: var(--gray-100);
}

.postdlg.post-ad-form .ComboSelectorComponent > .me.felement_err,
.postdlg.post-edit-form .ComboSelectorComponent > .me.felement_err {
  background-color: var(--gray-100);
}

.postdlg.post-ad-form .ComboSelectorComponent > .me.felement_err input[type=text],
.postdlg.post-edit-form .ComboSelectorComponent > .me.felement_err input[type=text] {
  background-color: var(--gray-100);
  border: none;
}

.postdlg.post-ad-form .ComboSelectorComponent > .me > div,
.postdlg.post-edit-form .ComboSelectorComponent > .me > div {
  font-size: 15px;
  display: flex;
  align-items: center;
}

.postdlg.post-ad-form .ComboSelectorComponent > .me > span,
.postdlg.post-edit-form .ComboSelectorComponent > .me > span {
  height: 42px;
  top: 0;
  right: 28px;
}

.postdlg.post-ad-form .ComboSelectorComponent.open > .l,
.postdlg.post-edit-form .ComboSelectorComponent.open > .l {
  top: 44px;
  bottom: auto;
}

.postdlg.post-ad-form .ComboSelectorComponent.open > .l.top,
.postdlg.post-edit-form .ComboSelectorComponent.open > .l.top {
  bottom: 44px;
  top: auto;
}

@media screen and (max-width: 1024px) {
  .ComboSelectorComponent > .me > div {
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    line-height: 28px;
  }
  .ComboSelectorComponent > .me:after {
    top: 13px;
  }
  .ComboSelectorComponent > .l {
    position: fixed;
    z-index: 1101;
    max-height: 95%;
    min-height: 80px;
    left: 20px;
    width: auto !important;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-radius: 12px;
    top: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
  }
  .ComboSelectorComponent.open > .l {
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
    display: block;
    opacity: 1;
    padding: var(--spacing-lg);
    margin: var(--spacing-none);
    top: 20px;
    left: 20px;
  }
  .ComboSelectorComponent > .l > div.i {
    font-size: 18px;
    margin: var(--spacing-none);
    padding: var(--spacing-alt-sm) var(--spacing-sm);
  }
  .ComboSelectorComponent > .l > div.i:hover {
    color: var(--brand-400);
    background-color: var(--gray-100);
  }
  .ComboSelectorComponent > .l > div:last-child {
    border: none;
  }
  .ComboSelectorComponent > .l > div.t {
    font-size: 18px;
    padding: var(--spacing-alt-xs) var(--spacing-md);
  }
  .ComboSelectorComponent > .l > div.g {
    margin-left: var(--spacing-2xl);
  }
  .ComboSelectorComponent > .l > div.g2 {
    margin-left: var(--spacing-8xl);
  }
  .ComboSelectorComponent > .l > div.t2 {
    font-size: 17px;
    padding-left: var(--spacing-7xl);
  }
  /* search field mobile */
  .ComboSelectorComponent > .l > span {
    position: sticky;
    z-index: 106;
    top: 0;
    display: none;
    padding: var(--spacing-xl) var(--spacing-none) var(--spacing-alt-sm);
    background-color: var(--gray-100);
  }
  .ComboSelectorComponent > .l > span > input {
    color: var(--gray-900);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl);
    border: none;
    border-radius: 24px;
    outline: 0;
    background-color: var(--gray-300);
  }
  .ComboSelectorComponent > .l > span > input:focus {
    border: none;
    box-shadow: none;
  }
  .ComboSelectorComponent > .l > span > input::placeholder {
    color: var(--gray-600);
    padding: var(--spacing-none);
  }
  .ComboSelectorComponent > .l.ms:has(.bt) {
    padding-bottom: var(--spacing-none);
  }
  .ComboSelectorComponent > .l.ms > div.i input {
    margin-right: var(--spacing-alt-sm);
  }
  .ComboSelectorComponent > .l.ms > div.i input {
    width: 18px;
    height: 18px;
  }
  .ComboSelectorComponent > .l.ms > div.i div.title-wrapper {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }
  .ComboSelectorComponent > .l > .bt {
    padding: var(--spacing-xl) var(--spacing-sm) 22px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .ComboSelectorComponent > .l > .bt > div {
    font-size: 18px;
    padding: 6px 16px;
  }
  body.ComboSelectorComponent #ph, body.ComboSelectorComponent .tbar {
    z-index: 1 !important;
  }
  /* when select overlay is open, apply these styles in iOS safari to fix overlapping header issue */
  @supports (-webkit-touch-callout: none) {
    body.ComboSelectorComponent .tbar, body.ComboSelectorComponent .ui-dialog-titlebar {
      display: none !important;
    }
  }
  /* filters */
  .ComboSelectorComponent > .me > div {
    font-size: 16px !important;
    padding: var(--spacing-alt-xs) var(--spacing-xl) var(--spacing-alt-xs) var(--spacing-sm);
  }
  .filter .ComboSelectorComponent > .me {
    max-width: 170px;
  }
  .filter .ComboSelectorComponent > .me > span > input:focus {
    border: none;
  }
  .ComboSelectorComponent > .l > div.s:after {
    top: 18px;
    right: 6px;
    left: auto;
    width: 14px;
    height: 7px;
  }
  .ComboSelectorComponent > .l > div.ico:before {
    margin-right: var(--spacing-md);
  }
}
.ComboSelectorComponentNew {
  position: relative;
  display: inline-block;
  overflow: visible !important;
  vertical-align: middle;
}

.dl .toolbar .ComboSelectorComponentNew {
  min-width: 160px;
  max-width: 300px;
  line-height: 24px;
}

.ComboSelectorComponentNew > .l > div.s:after {
  top: 9px;
}

.ComboSelectorComponentNew > .l > div.t.nexp.s:after {
  top: 12px;
}

.ComboSelectorComponentNew > .l > div.i:hover {
  color: var(--gray-100) !important;
  background-color: var(--brand-400) !important;
}

.ComboSelectorComponentNew > .me > span > input {
  min-width: auto;
}

/* main element */
.ComboSelectorComponentNew > .me {
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  min-width: 60px;
  max-width: 400px;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
  height: 40px;
}

.ComboSelectorComponentNew > .me > div {
  font-size: 14px;
  color: var(--gray-900);
  overflow: hidden;
  padding: var(--spacing-none) var(--spacing-md);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 22px;
  line-height: 38px;
}

.ComboSelectorComponentNew > .me > div > img {
  width: 16px;
  height: 16px;
  min-width: 16px;
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}

.ComboSelectorComponentNew > .me > span > input:focus {
  border: none;
  box-shadow: none;
}

.ComboSelectorComponentNew > .me > div.ph {
  color: var(--gray-500);
}

.ComboSelectorComponentNew > .me > div.clr {
  display: flex;
  align-items: center;
}

.ComboSelectorComponentNew > .me > div.ico {
  background-image: var(--a-icon);
  background-size: 16px 16px;
  background-position: 12px center;
  background-repeat: no-repeat;
  padding-left: var(--spacing-5xl);
}

.ComboSelectorComponentNew.disabled > .me {
  cursor: default;
  border-color: var(--gray-300);
  background-color: var(--gray-200);
}

.ComboSelectorComponentNew.disabled > .me > div {
  color: var(--gray-700);
}

.ComboSelectorComponentNew.disabled > .me:after {
  display: none;
}

.ComboSelectorComponentNew.open > .me {
  border-color: var(--brand-400);
}

.ComboSelectorComponentNew > .me > img {
  transition: all 0.2s;
}

.ComboSelectorComponentNew.open > .me > img {
  transform: rotate(180deg);
}

.ComboSelectorComponentNew > .me > div.clr:before {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  min-width: 14px;
  height: 14px;
  margin-right: var(--spacing-sm);
  content: " ";
  border-radius: 50%;
  background-color: var(--a-color);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
}

/* search field */
.ComboSelectorComponentNew > .me > span {
  position: absolute;
  top: 3px;
  right: 25px;
  bottom: 4px;
  left: 12px;
  display: none;
}

.ComboSelectorComponentNew > .me > span > input {
  color: var(--gray-900);
  width: 100%;
  padding: var(--spacing-none);
  border: none;
  outline: 0;
  height: 32px;
}

.ComboSelectorComponentNew > .me > span > input::placeholder {
  color: var(--gray-600);
  padding: var(--spacing-none);
}

/* menu / list of elements */
.ComboSelectorComponentNew > .l {
  position: absolute;
  z-index: 105;
  top: 64px;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 320px;
  padding: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-alt-sm);
  user-select: none;
  opacity: 0;
  border: 1px solid var(--gray-400);
  border-radius: 8px;
  background-color: var(--gray-100);
  transition: opacity 150ms linear, top 150ms linear, bottom 150ms linear, display 150ms linear;
}

div.dle .ComboSelectorComponentNew > .l {
  display: none;
}

.ComboSelectorComponentNew.open > .l {
  left: 0;
  top: 40px;
  bottom: auto;
  display: block;
  opacity: 1;
  box-shadow: 0 4px 16px 0 rgba(26, 29, 62, 0.1);
}

div.dle .ComboSelectorComponentNew.open > .l {
  display: block;
}

.ComboSelectorComponentNew > .l.top {
  top: auto;
  bottom: 64px;
}

.ComboSelectorComponentNew.open > .l.top {
  bottom: 40px;
  display: block;
  opacity: 1;
}

/* search field mobile */
.ComboSelectorComponentNew > .l > span {
  display: none;
}

.ComboSelectorComponentNew > .l > div {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  text-align: left;
  text-overflow: ellipsis;
}

.ComboSelectorComponentNew > .l > div.i {
  font-size: 15px;
  color: var(--gray-900);
  margin: var(--spacing-none);
  padding: var(--spacing-xxs) var(--spacing-alt-sm) var(--spacing-xxs) var(--spacing-5xl);
  cursor: pointer;
  white-space: nowrap;
}

.ComboSelectorComponentNew > .l > div.i:hover {
  color: var(--brand-400);
}

/* multi-select support  */
.ComboSelectorComponentNew > .l.ms {
  padding-bottom: var(--spacing-none);
}

.ComboSelectorComponentNew > .l.ms > div.i {
  padding: var(--spacing-alt-xs) var(--spacing-md) var(--spacing-alt-xs) var(--spacing-none);
}

.ComboSelectorComponentNew > .l.ms > div.i.g {
  padding-left: var(--spacing-2xl);
}

.ComboSelectorComponentNew > .l.ms > div.i.s:after {
  display: none;
}

.ComboSelectorComponentNew > .l.ms > div.i input + span {
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-lg);
}

/* buttons ok/cancel */
.ComboSelectorComponentNew > .l > .bt {
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none);
  position: sticky;
  bottom: 0;
  background-color: var(--gray-100);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--gray-300);
}

.ComboSelectorComponentNew > .l > .bt > div {
  padding: var(--spacing-alt-xs) var(--spacing-md);
  margin: var(--spacing-none);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 8px;
  flex: 1;
  text-align: center;
}

.ComboSelectorComponentNew > .l > .bt > .b1 {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.ComboSelectorComponentNew > .l > .bt > .b2 {
  color: var(--gray-600);
}

.ComboSelectorComponentNew > .l > .bt > .b1:hover {
  background-color: var(--brand-400);
}

.ComboSelectorComponentNew > .l > .bt > .b2:hover {
  color: var(--brand-400);
}

/* end multi-select support  */
.ComboSelectorComponentNew > .l > div.t {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-900);
  margin-top: var(--spacing-alt-xs);
  margin-bottom: -2px;
  padding: var(--spacing-alt-xs) 70px var(--spacing-alt-xs) 30px;
  white-space: nowrap;
  transition: all 0.2s;
  width: calc(100% - 100px);
}

/*expandable title (exp) and non-expandable title (nexp)*/
.ComboSelectorComponentNew > .l > div.t.exp, .ComboSelectorComponentNew > .l > div.t.nexp {
  display: flex;
  cursor: pointer;
}

.ComboSelectorComponentNew > .l > div.t.i {
  padding: var(--spacing-alt-xs) 30px;
  margin: var(--spacing-alt-xs) var(--spacing-none) -2px var(--spacing-none);
}

.ComboSelectorComponentNew > .l > div.t.exp:after {
  position: absolute;
  top: 14px;
  right: 16px;
  left: auto;
  width: 5px;
  height: 5px;
  content: "";
  border-top: 1px solid var(--gray-500);
  border-right: 1px solid var(--gray-500);
  transition: all 0.2s;
  transform: rotate(135deg);
}

.ComboSelectorComponentNew > .l > div.t.exp:hover:after {
  border-top: 1px solid var(--brand-400);
  border-right: 1px solid var(--brand-400);
}

.ComboSelectorComponentNew > .l > div.t.exp.open:after {
  top: 16px;
  transform: rotate(-45deg);
}

.ComboSelectorComponentNew > .l > div.t.exp:hover, .ComboSelectorComponentNew > .l > div.t.nexp:hover {
  color: var(--brand-400);
}

.ComboSelectorComponentNew > .l > div.t2 {
  font-size: 16px;
  padding: var(--spacing-alt-xs) var(--spacing-2xl) var(--spacing-alt-xs) 46px;
  white-space: nowrap;
}

.ComboSelectorComponentNew > .l > div.t2:not(.i) {
  color: var(--gray-600);
}

.ComboSelectorComponentNew > .l > div.g {
  padding-left: 46px;
}

.ComboSelectorComponentNew > .l > div.g.last-level {
  padding-left: 70px;
}

/*collapsed item*/
.ComboSelectorComponentNew.open > .l > div.i.exp, .ComboSelectorComponentNew.open > .l > div.t2.exp {
  display: none;
}

.ComboSelectorComponentNew > .l > div.g2 {
  padding-left: var(--spacing-9xl);
}

.ComboSelectorComponentNew > .l > div.s {
  color: var(--brand-400);
}

/*checkbox for selected elements*/
.ComboSelectorComponentNew > .l > div.s:after, .ComboSelectorComponentNew > .l > div.t.exp.s:before {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 12px;
  height: 6px;
  content: "";
  border-top: 1px solid var(--brand-400);
  border-right: 1px solid var(--brand-400);
  transform: rotate(125deg);
}

.ComboSelectorComponentNew > .l > div.s:hover:after {
  border-color: var(--brand-400);
}

.ComboSelectorComponentNew > .l > div.t.s:hover:after {
  border-color: var(--brand-400);
}

/*counter for number of items*/
.ComboSelectorComponentNew > .l > div.t span, .ComboSelectorComponentNew > .l > div.i span {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  color: var(--gray-700);
  font-weight: normal;
  font-style: italic;
  font-size: 12px;
}

.ComboSelectorComponentNew > .l > div.t:hover span {
  color: var(--gray-900);
}

.ComboSelectorComponentNew > .l > div.i:hover span {
  color: var(--gray-100);
}

/* color circle used for color selection dropdowns */
.ComboSelectorComponentNew > .l > div > i {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  border-radius: 50%;
  background-color: var(--a-color);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* icons for lsw selection dropdowns */
.ComboSelectorComponentNew > .l > div > img {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  pointer-events: none;
}

/* ToDo remove these once we unified styles for this component in all pages */
.postdlg.post-ad-form .ComboSelectorComponentNew > .me,
.postdlg.post-edit-form .ComboSelectorComponentNew > .me {
  border-color: var(--gray-300);
  background-color: var(--gray-300);
  opacity: 1;
  height: 44px;
}

.postdlg.post-ad-form .ComboSelectorComponentNew.open > .me:has(input[type=text]:focus),
.postdlg.post-edit-form .ComboSelectorComponentNew.open > .me:has(input[type=text]:focus) {
  border-color: var(--gray-900);
  background-color: var(--gray-100);
  opacity: 1;
  height: 44px;
}

.postdlg.post-ad-form .ComboSelectorComponentNew > .me input[type=text],
.postdlg.post-edit-form .ComboSelectorComponentNew > .me input[type=text] {
  opacity: 0;
  transition: background-color 0.2s, border-top-color 0.2s, border-bottom-color 0.2s;
}

.postdlg.post-ad-form .ComboSelectorComponentNew.open > .me input[type=text],
.postdlg.post-edit-form .ComboSelectorComponentNew.open > .me input[type=text] {
  opacity: 1;
  height: 42px;
  border: none;
  background-color: var(--gray-300);
}

.postdlg.post-ad-form .ComboSelectorComponentNew.open > .me input[type=text]:focus,
.postdlg.post-edit-form .ComboSelectorComponentNew.open > .me input[type=text]:focus {
  background-color: var(--gray-100);
}

.postdlg.post-ad-form .ComboSelectorComponentNew > .me.felement_err,
.postdlg.post-edit-form .ComboSelectorComponentNew > .me.felement_err {
  background-color: var(--gray-100);
}

.postdlg.post-ad-form .ComboSelectorComponentNew > .me.felement_err input[type=text],
.postdlg.post-edit-form .ComboSelectorComponentNew > .me.felement_err input[type=text] {
  background-color: var(--gray-100);
  border: none;
}

.postdlg.post-ad-form .ComboSelectorComponentNew > .me > div,
.postdlg.post-edit-form .ComboSelectorComponentNew > .me > div {
  font-size: 15px;
  display: flex;
  align-items: center;
}

.postdlg.post-ad-form .ComboSelectorComponentNew > .me > span,
.postdlg.post-edit-form .ComboSelectorComponentNew > .me > span {
  height: 42px;
  top: 0;
  right: 28px;
}

.postdlg.post-ad-form .ComboSelectorComponentNew.open > .l,
.postdlg.post-edit-form .ComboSelectorComponentNew.open > .l {
  top: 44px;
  bottom: auto;
}

.postdlg.post-ad-form .ComboSelectorComponentNew.open > .l.top,
.postdlg.post-edit-form .ComboSelectorComponentNew.open > .l.top {
  bottom: 44px;
  top: auto;
}

@media screen and (max-width: 1024px) {
  .ComboSelectorComponentNew > .me > div {
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    line-height: 28px;
  }
  .dlsearch.my-posts form .ComboSelectorComponentNew {
    margin-top: var(--spacing-md);
  }
  .ComboSelectorComponentNew > .me:after {
    top: 13px;
  }
  .ComboSelectorComponentNew > .l {
    position: fixed;
    z-index: 1101;
    max-height: 95%;
    min-height: 80px;
    left: 20px;
    width: auto !important;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-radius: 12px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
  }
  .ComboSelectorComponentNew.open > .l {
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
    display: block;
    opacity: 1;
    padding: var(--spacing-lg);
    margin: var(--spacing-none);
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
  }
  .ComboSelectorComponentNew > .l > div.i {
    font-size: 18px;
    margin: var(--spacing-none);
    padding: var(--spacing-alt-sm) var(--spacing-sm);
  }
  .ComboSelectorComponentNew > .l > div.i:hover {
    color: var(--brand-400);
    background-color: var(--gray-100);
  }
  .ComboSelectorComponentNew > .l > div:last-child {
    border: none;
  }
  .ComboSelectorComponentNew > .l > div.t {
    font-size: 18px;
    padding: var(--spacing-alt-xs) var(--spacing-md);
  }
  .ComboSelectorComponentNew > .l > div.g {
    margin-left: var(--spacing-2xl);
  }
  .ComboSelectorComponentNew > .l > div.g2 {
    margin-left: var(--spacing-8xl);
  }
  .ComboSelectorComponentNew > .l > div.t2 {
    font-size: 17px;
    padding-left: var(--spacing-7xl);
  }
  /* search field mobile */
  .ComboSelectorComponentNew > .l > span {
    position: sticky;
    z-index: 106;
    top: 0;
    display: none;
    padding: var(--spacing-xl) var(--spacing-none) var(--spacing-alt-sm);
    background-color: var(--gray-100);
  }
  .ComboSelectorComponentNew > .l > span > input {
    color: var(--gray-900);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl);
    border: none;
    border-radius: 24px;
    outline: 0;
    background-color: var(--gray-300);
  }
  .ComboSelectorComponentNew > .l > span > input:focus {
    border: none;
    box-shadow: none;
  }
  .ComboSelectorComponentNew > .l > span > input::placeholder {
    color: var(--gray-600);
    padding: var(--spacing-none);
  }
  .ComboSelectorComponentNew > .l.ms:has(.bt) {
    padding-bottom: var(--spacing-none);
  }
  .ComboSelectorComponentNew > .l.ms > div.i input {
    margin-right: var(--spacing-alt-sm);
  }
  .ComboSelectorComponentNew > .l.ms > div.i input {
    width: 18px;
    height: 18px;
  }
  .ComboSelectorComponentNew > .l.ms > div.i div.title-wrapper {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }
  .ComboSelectorComponentNew > .l > .bt {
    padding: var(--spacing-xl) var(--spacing-sm) 22px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .ComboSelectorComponentNew > .l > .bt > div {
    font-size: 18px;
    padding: 6px 16px;
  }
  body.ComboSelectorComponentNew #ph, body.ComboSelectorComponentNew .tbar {
    z-index: 1 !important;
  }
  /* when select overlay is open, apply these styles in iOS safari to fix overlapping header issue */
  @supports (-webkit-touch-callout: none) {
    body.ComboSelectorComponentNew .tbar, body.ComboSelectorComponentNew .ui-dialog-titlebar {
      display: none !important;
    }
  }
  /* filters */
  .ComboSelectorComponentNew > .me > div {
    font-size: 16px !important;
    padding: var(--spacing-alt-xs) var(--spacing-xl) var(--spacing-alt-xs) var(--spacing-sm);
  }
  .filter .ComboSelectorComponentNew > .me {
    max-width: 170px;
  }
  .filter .ComboSelectorComponentNew > .me > span > input:focus {
    border: none;
  }
  .ComboSelectorComponentNew > .l > div.s:after {
    top: 18px;
    right: 6px;
    left: auto;
    width: 14px;
    height: 7px;
  }
  .ComboSelectorComponentNew > .l > div.ico:before {
    margin-right: var(--spacing-md);
  }
  .postdlg.post-ad-form .ComboSelectorComponentNew.open > .l,
  .postdlg.post-edit-form .ComboSelectorComponentNew.open > .l {
    top: 50%;
  }
}
.CompanyVerificationDecisionModal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.CompanyVerificationDecisionModal .company-verification-decision-modal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.CompanyVerificationDecisionModal .company-verification-decision-modal .company-verification-decision-title {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
}
.CompanyVerificationDecisionModal .company-verification-decision-modal .company-verification-rejection-reasons {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.24px;
}
.CompanyVerificationDecisionModal .company-verification-decision-modal .company-verification-rejection-reasons .rejection-reason {
  display: flex;
  gap: var(--spacing-xs);
}
.CompanyVerificationDecisionModal .company-verification-decision-modal .company-verification-rejection-reasons .rejection-reason > img {
  width: 14px;
  height: 14px;
  margin-top: 7px;
}
.CompanyVerificationDecisionModal .company-verification-decision-modal .company-verification-decision-info {
  font-size: 15px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.24px;
}
.CompanyVerificationDecisionModal .company-verification-decision-modal .company-verification-decision-info > a {
  color: var(--brand-400);
}
.CompanyVerificationDecisionModal .company-verification-decision-modal .company-verification-decision-info > a:hover {
  text-decoration: underline;
}
.CompanyVerificationDecisionModal a.start-over-button {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-radius: 10px;
  padding: 7px var(--spacing-lg);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.26px;
  width: fit-content;
}
.CompanyVerificationDecisionModal a.start-over-button:hover {
  background-color: var(--brand-300);
}

#dialog:has(.CompanyVerificationDecisionModal) {
  padding: var(--spacing-none) var(--spacing-6xl) var(--spacing-6xl) var(--spacing-6xl);
  margin-top: -16px;
}

@media screen and (max-width: 1024px) {
  #dialog:has(.CompanyVerificationDecisionModal) {
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    margin-top: var(--spacing-none);
  }
}
.ContactUserModal > form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.ContactUserModal > form .btns {
  padding: var(--spacing-none);
  margin: var(--spacing-none);
  display: flex;
}
.ContactUserModal > form .btns > input {
  margin: var(--spacing-none);
  width: 100%;
}
.ContactUserModal > form .err {
  font-size: var(--font-size-xs);
  color: var(--text-error);
}
.ContactUserModal .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: var(--gray-800);
}
.ContactUserModal .user-info-wh-container {
  border: 1px solid var(--gray-400);
  padding: var(--spacing-lg);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.ContactUserModal .user-info-wh-container .wh-div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-left: 80px;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-400);
}
.ContactUserModal .user-info-wh-container .wh-div .wh-title {
  color: var(--gray-600);
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: -0.24px;
}
.ContactUserModal .user-info-wh-container .wh-div .wh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: -0.24px;
}

.ui-dialog:has(.ContactUserModal) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-none);
  z-index: 105;
}

#dialog:has(.ContactUserModal) {
  margin-top: var(--spacing-2xl);
}

@media screen and (max-width: 1024px) {
  #dialog:has(.ContactUserModal) {
    margin-top: var(--spacing-lg);
  }
}
.CountryPhoneNumberFormElement {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.country-phone-number-container .CountryPhoneNumberFormElement.c {
  display: flex;
  height: 46px;
  padding: var(--spacing-none) !important;
}

.CountryPhoneNumberFormElement.c .DropdownComponent {
  width: unset;
}

.CountryPhoneNumberFormElement.c .DropdownComponent > .l.sm {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.CountryPhoneNumberFormElement.c .DropdownComponent > .l > div.s {
  gap: unset;
}

.CountryPhoneNumberFormElement.c .DropdownComponent > .l > div.i {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.CountryPhoneNumberFormElement.c .DropdownComponent > .l > div.i > div.title-wrapper {
  width: 55px;
}

.CountryPhoneNumberFormElement.c .DropdownComponent > .l > div.i > div.title-wrapper-second {
  width: 80px;
}

.CountryPhoneNumberFormElement.c .DropdownComponent .ico > .ico {
  height: 16px;
  padding-left: var(--spacing-xl);
  font-size: var(--font-size-md);
}

.CountryPhoneNumberFormElement.c .DropdownComponent > .l {
  left: -13px;
}

.CountryPhoneNumberFormElement.c .DropdownComponent.open > .me {
  border-color: var(--gray-400);
}

.CountryPhoneNumberFormElement.c .DropdownComponent .me.sm.fw-normal.fs-xs.lh-xs.pt-sm.pr-md.pb-sm.pl-md {
  top: 5px;
  right: 7px;
  padding-right: 1px;
  background-color: var(--gray-300);
}

.CountryPhoneNumberFormElement.c .DropdownComponent .me.sm.fw-normal.fs-xs.lh-xs.pt-sm.pr-md.pb-sm.pl-md:hover {
  background-color: var(--gray-400);
}

.CountryPhoneNumberFormElement.c .DropdownComponent.open .me.sm.fw-normal.fs-xs.lh-xs.pt-sm.pr-md.pb-sm.pl-md {
  background-color: var(--gray-400);
}

.country-phone-number-container {
  border: 1px solid var(--gray-400);
  padding: var(--spacing-none) var(--spacing-md);
  border-radius: var(--radius-sm);
  max-width: 380px;
  margin: auto;
}

.country-phone-number-container input {
  border: none;
}

.country-phone-number-container input.felement_err {
  border: none !important;
}

.country-phone-number-container:has(input.felement_err) {
  border: 1px solid var(--error-400);
  outline: none;
}

.country-phone-number-container .felement_err:focus {
  box-shadow: none !important;
}

.country-phone-number-container,
.country-phone-number-container span.valid {
  background-color: var(--gray-300);
}

.country-phone-number-container input:focus {
  background-color: var(--gray-100);
  border-color: var(--gray-100);
}

.country-phone-number-container:has(input:focus) span.valid {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}

.country-phone-number-container:has(input:focus) {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}

.country-phone-number-container:has(input.felement_err:focus) {
  background-color: var(--gray-100);
  border-color: var(--error-400);
}

.country-phone-number-container:has(input:focus) .DropdownComponent .me.sm.fw-normal.fs-xs.lh-xs.pt-sm.pr-md.pb-sm.pl-md {
  background-color: var(--gray-100);
  border-color: var(--gray-100);
}

.country-phone-number-container input {
  margin-left: var(--spacing-alt-sm);
  width: 100%;
  height: 46px;
  background-color: var(--gray-300);
  box-shadow: none;
  font-size: 16px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
}

.CountryPhoneNumberFormElement div {
  display: inline-block;
}

.CountryPhoneNumberFormElement select:focus {
  z-index: 11;
}

.CountryPhoneNumberFormElement .i {
  margin-bottom: var(--spacing-none) !important;
  border-radius: var(--radius-sm);
}

@media screen and (max-width: 1024px) {
  .CountryPhoneNumberFormElement {
    margin-bottom: var(--spacing-xl);
    text-align: center;
  }
  .CountryPhoneNumberFormElement.c {
    margin: var(--spacing-none);
  }
  .CountryPhoneNumberFormElement select {
    width: 122px;
  }
  .CountryPhoneNumberFormElement .c input[type=button] {
    font-size: 16px;
    display: block;
    margin: var(--spacing-none) auto;
  }
  .CountryPhoneNumberFormElement.c .DropdownComponent .i {
    font-size: var(--font-size-md);
  }
  .CountryPhoneNumberFormElement .i {
    margin: var(--spacing-xl) var(--spacing-none);
  }
}
.DataListActionsComponent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  right: var(--spacing-lg);
  margin: -6px -4px 0 var(--spacing-md);
}
@media screen and (max-width: 1024px) {
  .DataListActionsComponent {
    top: 8px;
    right: var(--spacing-md);
  }
}
.DataListActionsComponent__item {
  width: 32px;
  height: 32px;
}
@media screen and (max-width: 1024px) {
  .DataListActionsComponent__item {
    width: 30px;
  }
}
.DataListActionsComponent__item button,
.DataListActionsComponent__item a {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.DataListActionsComponent__note a {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: opacity, transform;
}
.DataListActionsComponent__note--hidden a {
  opacity: 0;
  transform: translateY(-4px) scale(0.9);
  pointer-events: none;
}

.DataListItemComponent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  padding: var(--spacing-md);
  box-sizing: border-box;
  border-bottom: 1px solid var(--gray-400);
}
.DataListItemComponent a:not([href]):hover {
  color: var(--text-300);
}
.DataListItemComponent:last-child {
  border-bottom-width: 0;
}
.DataListItemComponent--no-img {
  padding: var(--spacing-2xl) var(--spacing-md);
}
.DataListItemComponent__image-section {
  margin-right: var(--spacing-lg);
}
.DataListItemComponent__image-section a, .DataListItemComponent__image-section img {
  display: block;
  width: 100%;
  height: 100%;
}
.DataListItemComponent__image-section figure {
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 190px;
  height: 144px;
  border-radius: var(--spacing-md);
  box-sizing: border-box;
}
@media screen and (max-width: 680px) {
  .DataListItemComponent__image-section figure {
    width: 100px;
    height: 82px;
  }
}
.DataListItemComponent__image-section img {
  object-fit: cover;
}
.DataListItemComponent__image-section--avatar figure {
  width: 80px;
  height: 80px;
}
.DataListItemComponent__content-section {
  flex: 1;
  color: var(--text-300);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-body, 400);
  line-height: var(--line-height-sm);
  overflow-wrap: anywhere;
}
.DataListItemComponent__content-section h2 {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  max-height: 72px;
  letter-spacing: -0.3px;
  flex: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.DataListItemComponent__content-section header {
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0 0 var(--spacing-xs) 0;
}
.DataListItemComponent__content-section .ad-info-line-wrapper {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: var(--font-weight-heading, 700);
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.DataListItemComponent__content-section .ad-info-line-wrapper .p {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  overflow: hidden;
  margin: var(--spacing-none) var(--spacing-md) var(--spacing-none) var(--spacing-none);
  white-space: nowrap;
}
.DataListItemComponent__content-section .ad-info-line-wrapper .po {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-500);
  overflow: hidden;
  margin: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-none);
  white-space: nowrap;
  text-decoration: line-through;
}
.DataListItemComponent__content-section .ad-info-line-wrapper .pc {
  font-size: 14px;
  overflow: hidden;
  margin: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-none);
  white-space: nowrap;
}
.DataListItemComponent__content-section .ad-info-line-wrapper .pc.p1 {
  color: var(--success-500);
}
.DataListItemComponent__content-section .ad-info-line-wrapper .pc.p2 {
  color: var(--error-500);
}
.DataListItemComponent__content-section .c {
  color: var(--grey-600);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  margin-top: var(--spacing-xs);
  opacity: 0.5;
}
.DataListItemComponent__content-section footer {
  margin-top: var(--spacing-md);
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.DataListItemComponent__content-section .icon-verified,
.DataListItemComponent__content-section .icon-company-verified {
  cursor: pointer;
  width: 16px;
  height: 16px;
  vertical-align: text-top;
  margin-left: var(--spacing-xs);
}
.DataListItemComponent__content-section .data-list-search-info,
.DataListItemComponent__content-section .data-list-client-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.DataListItemComponent__note {
  padding: 8px 10px;
  color: var(--gray-900);
  font-size: var(--font-size-xs, 13px);
  font-weight: 500;
  line-height: var(--line-height-xs, 20px);
  border-radius: 4px;
  background: var(--info-300, #FFCD58);
}
.DataListItemComponent--inactive .DataListItemComponent__content-section header h2, .DataListItemComponent--inactive .DataListItemComponent__info, .DataListItemComponent--inactive .DataListItemComponent__image-section {
  opacity: 0.3;
}
.DataListItemComponent--highlight {
  background: var(--info-100);
}
.DataListItemComponent--highlight-blue {
  background-color: var(--brand-100);
}

.DataListNewBadgeComponent {
  display: inline-block;
  color: var(--gray-100);
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-tiny);
  line-height: var(--line-height-tiny);
  padding: 3px var(--spacing-alt-xs);
  border-radius: 999px;
  background: var(--brand-400);
  white-space: nowrap;
}
.DataListNewBadgeComponent span {
  font-size: var(--font-size-tiny);
  line-height: var(--line-height-tiny);
}

a:visited.DataListSimilarAdsComponent,
a.DataListSimilarAdsComponent {
  border-radius: var(--spacing-sm);
  background: var(--brand-100);
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--brand-500, #0169D9);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
}

.DeliveryScheduleOrderNote {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-alt-xs);
  overflow-wrap: anywhere;
}
.DeliveryScheduleOrderNote p,
.DeliveryScheduleOrderNote h4 {
  overflow-wrap: anywhere;
}

.DialogIconLayoutComponent {
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

.DialogIconLayoutComponent .err {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  display: block;
  margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-xxs);
  color: var(--error-400);
  width: 190px;
}

.DialogIconLayoutComponent .felement_err {
  border-color: var(--error-400) !important;
}

.DialogIconLayoutComponent > .head > .l {
  float: left;
  padding-bottom: var(--spacing-xl);
}

.DialogIconLayoutComponent > .head > .l img {
  width: 64px;
  height: 64px;
}

.DialogIconLayoutComponent > .head > .r {
  font-size: 15px;
  color: var(--gray-900);
  line-height: 1.5;
  padding-left: 84px;
  text-align: left;
}

.DialogIconLayoutComponent > .head > .r .c {
  padding: 30px var(--spacing-none);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.DialogIconLayoutComponent > .head > .r .c > .e {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.DialogIconLayoutComponent:not(:has(.CountryPhoneNumberFormElement)) > .head > .r .i {
  font-size: 13px;
  color: var(--gray-600);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

.DialogIconLayoutComponent > .head > .r h1 {
  font-size: 18px;
  font-weight: 700;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-md);
  overflow-wrap: anywhere;
}

.DialogIconLayoutComponent > .btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
}

.DialogIconLayoutComponent > .btns > button,
.DialogIconLayoutComponent > .btns > input {
  margin: var(--spacing-none);
}

@media screen and (max-device-width: 980px), screen and (max-device-width: 1024px) and (orientation: portrait) {
  .DialogIconLayoutComponent > .head > .l {
    float: none;
    margin-bottom: var(--spacing-sm);
    text-align: center;
  }
  .DialogIconLayoutComponent > .head > .l img {
    width: 42px;
    height: 42px;
  }
  .DialogIconLayoutComponent > .head > .r {
    font-size: 15px;
    padding: var(--spacing-none);
    text-align: center;
  }
  .DialogIconLayoutComponent > .head > .r .hlp_icon div {
    display: none;
  }
  .DialogIconLayoutComponent > .head > .r .hlp_icon span {
    margin: var(--spacing-none);
  }
  .DialogIconLayoutComponent .c input[type=button] {
    font-size: var(--font-size-md);
    display: block;
    margin: var(--spacing-xl) auto var(--spacing-none);
    padding: var(--spacing-sm) var(--spacing-2xl);
  }
  .DialogIconLayoutComponent .c.phone-landline-container input[type=button].phone-landline-add-btn {
    padding: var(--spacing-md) var(--spacing-2xl);
  }
}
.DropdownComponent:not(body) {
  position: relative;
  display: inline-block;
  overflow: visible !important;
  vertical-align: middle;
  width: 100%;
}
.DropdownComponent:not(body).disabled {
  pointer-events: none;
}
.DropdownComponent:not(body).disabled > .me {
  cursor: default;
  border-color: var(--gray-200);
  background-color: var(--gray-200);
  color: var(--gray-500);
}
.DropdownComponent:not(body).disabled > .me::after {
  display: none;
}
.DropdownComponent:not(body).disabled > .me > div {
  color: var(--gray-500);
}
.DropdownComponent:not(body).disabled > .me > svg path {
  stroke: var(--gray-500);
}
.DropdownComponent:not(body) .dropdown-component-label-action {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  cursor: default;
  margin-bottom: var(--spacing-sm);
}
.DropdownComponent:not(body) .dropdown-component-label-action .dropdown-component-label span {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
}
.DropdownComponent:not(body) .dropdown-component-label-action .dropdown-component-reset {
  cursor: pointer;
}
.DropdownComponent:not(body) .dropdown-component-label-action .dropdown-component-reset span {
  color: var(--brand-400);
  font-weight: 500;
  font-size: var(--font-size-xxs);
}
.DropdownComponent:not(body) .dropdown-component-label-action .dropdown-component-reset-none {
  display: none;
}
.DropdownComponent:not(body).felement_err {
  border: none !important;
  box-shadow: none !important;
}
.DropdownComponent:not(body).felement_err > .me {
  background-color: var(--gray-100);
  border: 1px solid var(--error-400);
}
.DropdownComponent:not(body).felement_err > .me:hover, .DropdownComponent:not(body).felement_err > .me:has(input[type=text]:focus) {
  border: 1px solid var(--error-400);
}
.DropdownComponent:not(body).felement_err > .me input[type=text] {
  background-color: var(--gray-100);
  border: none;
}

.dmy-wrapper > .DropdownComponent {
  width: unset;
  flex: 5;
}
.dmy-wrapper > .DropdownComponent:first-child, .dmy-wrapper > .DropdownComponent:nth-child(2):last-child {
  flex: 2;
}
.dmy-wrapper > .DropdownComponent:last-child {
  flex: 4;
}
.dmy-wrapper.double-col {
  flex-wrap: wrap;
}
.dmy-wrapper.double-col > .DropdownComponent.felement_err {
  flex: 2;
}
.dmy-wrapper.double-col > .DropdownComponent.felement_err:first-child {
  flex: 2;
}
.dmy-wrapper.double-col > .DropdownComponent.felement_err:first-child ~ .DropdownComponent:not(.felement_err) {
  flex: 2;
}

.resume-edit .DropdownComponent > .me {
  padding-right: var(--spacing-md);
}

/* main element */
.DropdownComponent > .me {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.2s;
  background-color: var(--gray-300);
  opacity: 1;
}
.inline-edit-mode .DropdownComponent > .me {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
}
.inline-edit-mode .DropdownComponent > .me.lg input[type=text] {
  height: 40px !important;
}
.DropdownComponent > .me::placeholder {
  color: var(--gray-500);
}
.DropdownComponent > .me:hover {
  border-color: var(--gray-400);
}
.DropdownComponent > .me:has(input[type=text]:focus) {
  border-color: var(--gray-900);
}
.DropdownComponent > .me input[type=text] {
  opacity: 0;
  transition: background-color 0.2s, border-top-color 0.2s, border-bottom-color 0.2s;
}
.DropdownComponent > .me.felement_err {
  background-color: var(--gray-100);
}
.DropdownComponent > .me.felement_err input[type=text] {
  background-color: var(--gray-100);
  border: none;
}
.DropdownComponent > .me > div {
  display: flex;
  align-items: center;
}
.DropdownComponent > .me > span {
  height: 42px;
  top: 0;
  right: 28px;
}

.DropdownComponent > .me > div {
  color: var(--gray-900);
  overflow: hidden;
  padding: var(--spacing-none);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.DropdownComponent > .me > div > img {
  width: 16px;
  height: 16px;
  min-width: 16px;
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}

.DropdownComponent > .me > span > input:focus {
  border: none;
  box-shadow: none;
}

.DropdownComponent > .me > div.ph {
  color: var(--gray-500);
}

.DropdownComponent > .me > div.clr {
  display: flex;
  align-items: center;
}

.DropdownComponent > .me > div.ico {
  background-image: var(--a-icon);
  background-size: 16px 16px;
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left: var(--spacing-2xl);
}

.DropdownComponent:has(.groupedAddress) > .me > div.ico {
  background-size: 20px 20px;
  padding-left: var(--spacing-3xl);
}

.DropdownComponent .me > .groupWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.DropdownComponent.open > .me {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.DropdownComponent.open > .me input[type=text] {
  opacity: 1;
  border: none;
}

.DropdownComponent.open > .me.sm input[type=text] {
  height: 36px;
}

.DropdownComponent.open > .me.lg input[type=text] {
  height: 48px;
}

.DropdownComponent > .me > svg {
  width: 20px;
  height: 20px;
  transition: all 0.2s;
}

.DropdownComponent.open > .me > svg {
  transform: rotate(180deg);
}

.DropdownComponent > .me > div.clr:before {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
  content: " ";
  border-radius: 50%;
  background-color: var(--a-color);
  border: 1px solid var(--gray-400);
}

/* search field */
.DropdownComponent > .me > span {
  position: absolute;
  right: 36px;
  bottom: 4px;
  left: 12px;
  display: none;
}

.DropdownComponent > .me > span:has(> input) {
  right: 34px;
  padding-left: var(--spacing-xs);
}

.DropdownComponent > .me > span > input {
  width: 100%;
  padding: var(--spacing-none);
  border: none;
  outline: 0;
  height: 32px;
}

.DropdownComponent > .me > span > input::placeholder {
  color: var(--gray-600);
  padding: var(--spacing-none);
}

/* menu / list of elements */
.DropdownComponent > .l {
  position: absolute;
  z-index: 105;
  top: 64px;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 480px;
  min-width: 100%;
  user-select: none;
  opacity: 0;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
  transition: opacity 150ms linear, top 150ms linear, bottom 150ms linear, display 150ms linear;
  width: 100%;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.DropdownComponent > .l:has(.no-search-results.show) {
  min-width: 152px;
}

.DropdownComponent.open > .l {
  left: 0;
  bottom: auto;
  opacity: 1;
  box-shadow: 0 4px 16px 0 rgba(26, 29, 62, 0.1);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-alt-xs) var(--spacing-none);
}
.DropdownComponent.open > .l.sm {
  top: 42px;
}
.DropdownComponent.open > .l.lg {
  top: 54px;
}

.DropdownComponent.open:has(.groupedAddress) .l.lg {
  top: 80px;
}

.DropdownComponent:has(.groupedAddress) .l .selectNewAddress > div {
  border-radius: var(--radius-alt-xs);
  padding: var(--spacing-alt-xs) var(--spacing-sm) var(--spacing-alt-xs) var(--spacing-alt-xs);
  background: var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);
}

.DropdownComponent:has(.groupedAddress) .l .selectNewAddress > div > img {
  width: 16px;
  height: 16px;
}

.DropdownComponent.open > .l > div.no-search-results {
  display: none;
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.28px;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.DropdownComponent.open > .l > div.no-search-results.show {
  display: flex;
  padding: var(--spacing-md) var(--spacing-lg);
}

.DropdownComponent > .l.top {
  top: auto;
  bottom: 64px;
}

.DropdownComponent.open > .l.top {
  top: auto;
  display: block;
  opacity: 1;
}
.DropdownComponent.open > .l.top.sm {
  bottom: 42px;
}
.DropdownComponent.open > .l.top.lg {
  bottom: 54px;
}

.DropdownComponent.open:has(.groupedAddress) .l.lg {
  bottom: unset;
}

.DropdownComponent .groupedAddress div[data-value="0"] {
  padding: var(--spacing-alt-xs) var(--spacing-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
}

/* search field mobile */
.DropdownComponent > .l > span {
  display: none;
}

.DropdownComponent > .l > div {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  text-align: left;
  text-overflow: ellipsis;
}

.DropdownComponent > .l > div.i {
  line-height: 24px;
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-900);
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  white-space: nowrap;
  flex: 1;
  max-width: none;
}

.DropdownComponent > .l > div.i:hover {
  background-color: var(--gray-300);
}

.DropdownComponent > .l > div svg {
  display: none;
}

/* multi-select support  */
.DropdownComponent > .l.ms {
  padding-bottom: var(--spacing-none);
}

.DropdownComponent > .l.ms > div.i {
  padding: var(--spacing-alt-xs) var(--spacing-md) var(--spacing-alt-xs) var(--spacing-none);
}

.DropdownComponent > .l.ms > div.i.g {
  padding-left: var(--spacing-2xl);
}

.DropdownComponent > .l.ms > div.i.s:after {
  display: none;
}

.DropdownComponent > .l.ms > div.i input + span {
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-lg);
}

/* buttons ok/cancel */
.DropdownComponent > .l > .bt {
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-none);
  position: sticky;
  bottom: 0;
  background-color: var(--gray-100);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: var(--spacing-sm);
  border-top: 1px solid #efefef;
}

.DropdownComponent > .l > .bt > div {
  padding: var(--spacing-alt-xs) var(--spacing-md);
  margin: var(--spacing-none);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: var(--radius-sm);
  flex: 1;
  text-align: center;
}

.DropdownComponent > .l > .bt > .b1 {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.DropdownComponent > .l > .bt > .b2 {
  color: var(--gray-600);
}

.DropdownComponent > .l > .bt > .b1:hover {
  background-color: var(--brand-400);
}

.DropdownComponent > .l > .bt > .b2:hover {
  color: var(--brand-400);
}

/* end multi-select support  */
.DropdownComponent > .l > div.t {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-900);
  padding: var(--spacing-alt-xs) var(--spacing-md);
  white-space: nowrap;
  transition: all 0.2s;
}

/*expandable title (exp) and non-expandable title (nexp)*/
.DropdownComponent > .l > div.t.exp, .DropdownComponent > .l > div.t.nexp {
  display: flex;
  cursor: pointer;
}

.DropdownComponent > .l > div.t.i {
  padding: var(--spacing-alt-xs) 30px;
  margin: var(--spacing-alt-xs) var(--spacing-none) -2px var(--spacing-none);
}

.DropdownComponent > .l > div.t.exp:after {
  position: absolute;
  top: 14px;
  right: 16px;
  left: auto;
  width: 5px;
  height: 5px;
  content: "";
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  transition: all 0.2s;
  transform: rotate(135deg);
}

.DropdownComponent > .l > div.t.exp:hover:after {
  border-top: 1px solid var(--brand-400);
  border-right: 1px solid var(--brand-400);
}

.DropdownComponent > .l > div.t.exp.open:after {
  top: 16px;
  transform: rotate(-45deg);
}

.DropdownComponent > .l > div.t.exp:hover, .DropdownComponent > .l > div.t.nexp:hover {
  color: var(--brand-400);
}

.DropdownComponent > .l > div.t2 {
  font-size: 16px;
  color: var(--gray-600);
  padding: var(--spacing-alt-xs) var(--spacing-2xl) var(--spacing-alt-xs) 46px;
  white-space: nowrap;
}

.DropdownComponent > .l > div.g {
  padding-left: var(--spacing-2xl);
}

/*collapsed item*/
.DropdownComponent.open > .l > div.i.exp, .DropdownComponent.open > .l > div.t2.exp {
  display: none;
}

.DropdownComponent > .l > div.g2 {
  padding-left: var(--spacing-9xl);
}

.DropdownComponent > .l > div.s {
  color: var(--brand-400);
  gap: var(--spacing-xs);
}
.DropdownComponent > .l > div.s > svg {
  display: block;
  right: 16px;
  position: absolute;
}

.DropdownComponent:has(.groupedAddress) > .l > .i {
  padding: var(--spacing-sm) var(--spacing-lg);
}
.DropdownComponent:has(.groupedAddress) > .l > .i > .actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}
.DropdownComponent:has(.groupedAddress) > .l > .i > .select {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
}
@media screen and (max-width: 1024px) {
  .DropdownComponent:has(.groupedAddress) > .l > .i {
    padding: var(--spacing-none);
    margin-bottom: var(--spacing-sm);
  }
}

.DropdownComponent > .l > div.s:hover:after {
  border-color: var(--brand-400);
}

.DropdownComponent > .l > div.t.s:hover:after {
  border-color: var(--brand-400);
}

/*counter for number of items*/
.DropdownComponent > .l > div.t span, .DropdownComponent > .l > div.i span {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  font-weight: normal;
  font-style: italic;
  font-size: 12px;
}

/* color circle used for color selection dropdowns */
.DropdownComponent > .l > div > i {
  display: block;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  border-radius: 50%;
  background-color: var(--a-color);
  border: 1px solid var(--gray-400);
  pointer-events: none;
}

.DropdownComponent > .l > div > i.na {
  box-shadow: none;
  background-color: transparent;
}

/* icons for lsw selection dropdowns */
.DropdownComponent > .l > div > img {
  display: block;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  pointer-events: none;
}

.DropdownComponent > .l > div.i > div.title-wrapper {
  width: calc(100% - 22px);
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 1024px) {
  .DropdownComponent > .me:after {
    top: 13px;
  }
  .DropdownComponent > .l {
    position: fixed;
    z-index: 1101;
    max-height: 95%;
    left: 20px;
    width: auto !important;
    top: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
  }
  .DropdownComponent.open > .l > div.no-search-results {
    justify-content: start;
  }
  .DropdownComponent.open > .l > div.no-search-results.show {
    padding: var(--spacing-alt-sm) var(--spacing-sm);
  }
  .DropdownComponent.open > .l {
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
    opacity: 1;
    padding: var(--spacing-lg);
    margin: var(--spacing-none);
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 100px);
    min-width: -webkit-fill-available;
  }
  .DropdownComponent > .l > div.i {
    font-size: 18px;
    margin: var(--spacing-none);
    padding: var(--spacing-alt-sm) var(--spacing-sm);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .DropdownComponent > .l > div.i.s {
    width: calc(100% - 20px);
  }
  .DropdownComponent:has(.groupedAddress) > .l > div.i {
    width: 100%;
  }
  .DropdownComponent > .l > div.i:hover {
    background-color: var(--gray-100);
  }
  .DropdownComponent > .l > div.i > div.title-wrapper,
  .DropdownComponent > .l > div.i > div.title-wrapper-second {
    width: calc(100% - 28px);
  }
  .DropdownComponent > .l > div:last-child {
    border: none;
  }
  .DropdownComponent > .l > div.t {
    font-size: 18px;
    padding: var(--spacing-alt-xs) var(--spacing-md);
  }
  .DropdownComponent > .l > div.g {
    margin-left: var(--spacing-2xl);
  }
  .DropdownComponent > .l > div.g2 {
    margin-left: var(--spacing-8xl);
  }
  .DropdownComponent > .l > div.t2 {
    font-size: 17px;
    padding-left: var(--spacing-7xl);
  }
  /* search field mobile */
  .DropdownComponent > .l > span {
    position: sticky;
    z-index: 106;
    top: 0;
    display: none;
    padding: var(--spacing-xl) var(--spacing-none) var(--spacing-alt-sm);
    background-color: var(--gray-100);
  }
  .DropdownComponent > .l > span > input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--radius-sm);
  }
  .DropdownComponent > .l > span > input::placeholder {
    padding: var(--spacing-none);
  }
  .DropdownComponent > .l.ms:has(.bt) {
    padding-bottom: var(--spacing-none);
  }
  .DropdownComponent > .l.ms > div.i input {
    margin-right: var(--spacing-alt-sm);
  }
  .DropdownComponent > .l.ms > div.i input {
    width: 18px;
    height: 18px;
  }
  .DropdownComponent > .l.ms > div.i div.title-wrapper,
  .DropdownComponent > .l.ms > div.i div.title-wrapper-second {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }
  .DropdownComponent > .l > .bt {
    padding: var(--spacing-xl) var(--spacing-sm) 22px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .DropdownComponent > .l > .bt > div {
    font-size: 18px;
    padding: 6px 16px;
  }
  body.DropdownComponent #ph, body.DropdownComponent .tbar {
    z-index: 1 !important;
  }
  /* when select overlay is open, apply these styles in iOS safari to fix overlapping header issue */
  @supports (-webkit-touch-callout: none) {
    body.DropdownComponent .tbar, body.DropdownComponent .ui-dialog-titlebar {
      display: none !important;
    }
  }
  .filter .DropdownComponent > .me {
    max-width: 170px;
  }
  .filter .DropdownComponent > .me > span > input:focus {
    border: none;
  }
  .DropdownComponent > .l > div.s:after {
    top: 18px;
    right: 6px;
    left: auto;
    width: 14px;
    height: 7px;
  }
  .DropdownComponent > .l > div.ico:before {
    margin-right: var(--spacing-md);
  }
}
.EmptyStateComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  align-items: center;
  justify-content: center;
}
.EmptyStateComponent.advertise-tab {
  padding: var(--spacing-none) var(--spacing-6xl);
}
.EmptyStateComponent .empty-state-img-wrapper {
  width: 200px !important;
  height: 200px;
  margin: var(--spacing-none) !important;
}
.EmptyStateComponent .empty-state-img-wrapper > img {
  width: 200px !important;
  height: 200px !important;
}
.EmptyStateComponent .empty-state-description {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
  text-align: center;
  margin-top: -20px;
}
.EmptyStateComponent .empty-state-description .empty-state-title {
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
  margin: var(--spacing-none) !important;
}
.EmptyStateComponent .empty-state-description .empty-state-desc {
  font-weight: 400;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.EmptyStateComponent .empty-state-buttons-wrapper {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}
.EmptyStateComponent .empty-state-buttons-wrapper .empty-state-cta-btn {
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 500;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.EmptyStateComponent .empty-state-buttons-wrapper .empty-state-cta-btn.btn-default {
  background: var(--gray-300);
  color: var(--gray-900);
}
.EmptyStateComponent .empty-state-buttons-wrapper .empty-state-cta-btn.btn-default:hover {
  background-color: var(--gray-400);
}
.EmptyStateComponent .empty-state-buttons-wrapper .empty-state-cta-btn.btn-secondary {
  background: var(--brand-100);
  color: var(--brand-400);
}
.EmptyStateComponent .empty-state-buttons-wrapper .empty-state-cta-btn.btn-secondary:hover {
  background-color: var(--brand-200);
}
.EmptyStateComponent .empty-state-additional-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.3px;
}

@media screen and (max-width: 1024px) {
  .EmptyStateComponent {
    padding: var(--spacing-none) var(--spacing-xl);
  }
  .EmptyStateComponent .empty-state-img-wrapper {
    width: 160px !important;
    height: 160px;
  }
  .EmptyStateComponent .empty-state-img-wrapper > img {
    width: 160px !important;
    height: 160px !important;
  }
  .EmptyStateComponent .empty-state-description .empty-state-title {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-md);
    letter-spacing: -0.32px;
  }
  .EmptyStateComponent .empty-state-description .empty-state-desc {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: -0.28px;
  }
}
@media screen and (max-width: 1024px) {
  .ExpandableComponent {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-xxs) var(--spacing-none);
  }
  .ExpandableComponent .expandable-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ExpandableComponent .expandable-title-container .expandable-title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
  }
  .ExpandableComponent .expandable-title-container > img {
    width: 24px;
    height: 24px;
  }
  .ExpandableComponent .expandable-content-container {
    display: none;
  }
  .ExpandableComponent .expandable-content-container.show {
    display: flex;
  }
}
@media screen and (max-width: 400px), screen and (max-width: 400px) and (orientation: portrait) {
  .ExpandableComponent {
    padding: var(--spacing-none);
  }
  .ExpandableComponent .expandable-title-container .expandable-title {
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
  }
  .ExpandableComponent .expandable-title-container > img {
    width: 20px;
    height: 20px;
  }
}
.ExpandableSectionComponent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.ExpandableSectionComponent img {
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}
.ExpandableSectionComponent img.expanded {
  transform: rotate(0deg);
}

.FeatureAnnouncementComponent {
  display: flex;
  gap: var(--spacing-6xl);
  color: var(--gray-900);
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper .republish-feature-modal-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper .republish-feature-modal-intro-highlighted {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  background-color: var(--brand-100);
  color: var(--brand-400);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-desc-text,
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-outro {
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.24px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-desc-text .list-delivery,
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-outro .list-delivery {
  color: var(--brand-400);
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-desc-text .list-delivery:hover,
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-outro .list-delivery:hover {
  color: var(--brand-300);
  text-decoration: underline;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-outro {
  margin-bottom: auto;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-outro a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-note {
  background-color: var(--gray-300);
  border-radius: 12px;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 15px;
  line-height: 28px;
  font-weight: 500;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-steps:has(.bullet-point) {
  gap: var(--spacing-md);
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step {
  background-color: var(--gray-300);
  border-radius: 8px;
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.21px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step > span:first-child {
  width: 12px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step.bullet-point {
  background-color: transparent;
  border-radius: 0;
  gap: var(--spacing-md);
  padding: var(--spacing-none);
  font-size: 15px;
  line-height: 24px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step.bullet-point > span:first-child {
  width: 16px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-cta {
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  padding: var(--spacing-alt-md) var(--spacing-2xl);
  cursor: pointer;
  border-radius: var(--radius-md);
  background-color: var(--brand-400);
  transition: color 0.2s, background-color 0.2s;
  color: var(--gray-100);
  width: fit-content;
  margin-top: var(--spacing-md);
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .republish-feature-cta:hover {
  background-color: var(--brand-300);
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .feature-announcement-footnote-wrapper {
  margin-top: 15px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .feature-announcement-footnote-wrapper > .feature-announcement-footnote {
  font-size: 12px;
}
.FeatureAnnouncementComponent > .republish-feature-text-wrapper > .feature-announcement-footnote-wrapper > .feature-announcement-footnote-cta {
  color: var(--brand-400);
  font-size: 12px;
  font-weight: 500;
}
.FeatureAnnouncementComponent .republish-feature-illustration-wrapper {
  width: 320px;
  background-color: var(--brand-100);
  border-radius: 0 16px 16px 0;
  margin: -41px -25px -17px var(--spacing-none);
  padding: var(--spacing-none);
  display: flex;
  justify-content: center;
  align-items: center;
}
.FeatureAnnouncementComponent .republish-feature-illustration-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.ui-dialog:has(.FeatureAnnouncementComponent) > .ui-dialog-titlebar {
  z-index: 999;
}
.ui-dialog:has(.FeatureAnnouncementComponent) .ui-icon-closethick:hover {
  background-color: transparent;
}
.ui-dialog:has(.FeatureAnnouncementComponent) .ui-dialog-content {
  margin-top: -16px;
}

@media screen and (max-width: 1024px) {
  .FeatureAnnouncementComponent {
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  .FeatureAnnouncementComponent .republish-feature-text-wrapper .republish-feature-cta {
    width: auto;
    text-align: center;
  }
  .FeatureAnnouncementComponent .republish-feature-text-wrapper .republish-feature-cta, .FeatureAnnouncementComponent .republish-feature-text-wrapper .republish-feature-note, .FeatureAnnouncementComponent .republish-feature-text-wrapper > .republish-feature-outro, .FeatureAnnouncementComponent .republish-feature-text-wrapper > .republish-feature-outro a, .FeatureAnnouncementComponent .republish-feature-text-wrapper > .republish-feature-desc-text, .FeatureAnnouncementComponent .republish-feature-text-wrapper > .republish-feature-desc-text .list-delivery,
  .FeatureAnnouncementComponent .republish-feature-text-wrapper .republish-feature-step.bullet-point > span {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    font-weight: 500;
  }
  .FeatureAnnouncementComponent > .republish-feature-illustration-wrapper {
    border-radius: 12px;
    margin: var(--spacing-none);
    width: 100%;
  }
  .FeatureAnnouncementComponent > .republish-feature-illustration-wrapper img {
    border-radius: var(--radius-md);
  }
  .ui-dialog .ui-dialog-content:has(.FeatureAnnouncementComponent) {
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
  }
}
.FeatureAnnouncementGroupComponent {
  display: flex;
  gap: var(--spacing-4xl);
  flex-direction: column;
  margin: var(--spacing-none) var(--spacing-lg) var(--spacing-lg);
  max-width: min(85vw, 1300px);
  min-width: min-content;
}
.FeatureAnnouncementGroupComponent .header .title {
  color: var(--accent-secondary-header-background);
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-6xl);
  letter-spacing: -0.64px;
  margin-bottom: var(--spacing-lg);
}
.FeatureAnnouncementGroupComponent .header .description {
  color: var(--accent-secondary-header-background);
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-3xl);
}
.FeatureAnnouncementGroupComponent .announcements {
  display: flex;
  gap: var(--spacing-lg);
}

.ui-dialog:has(.FeatureAnnouncementGroupComponent) .ui-dialog-titlebar {
  z-index: 999;
}
.ui-dialog:has(.FeatureAnnouncementGroupComponent) .ui-icon-closethick:hover {
  background-color: transparent;
}
.ui-dialog:has(.FeatureAnnouncementGroupComponent) .ui-dialog-content {
  margin-top: -16px;
}

@media screen and (max-width: 1024px) {
  .FeatureAnnouncementGroupComponent {
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) var(--spacing-none);
    max-width: unset;
    min-width: unset;
  }
  .FeatureAnnouncementGroupComponent .announcements {
    flex-direction: column;
  }
  .FeatureAnnouncementGroupComponent .header .title {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: var(--spacing-4xl);
    letter-spacing: -0.4px;
    margin-bottom: var(--spacing-sm);
  }
  .FeatureAnnouncementGroupComponent .header .description {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: var(--spacing-2xl);
    letter-spacing: -0.3px;
  }
  .ui-dialog .ui-dialog-content:has(.FeatureAnnouncementGroupComponent) {
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
  }
}
.FeatureAnnouncementItemComponent {
  display: flex;
  border-radius: var(--radius-md);
  background-color: var(--gray-200);
  gap: var(--spacing-6xl);
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper .republish-feature-modal-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-desc-text,
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-outro {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.24px;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-note {
  background-color: var(--gray-300);
  border-radius: 12px;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 15px;
  line-height: 28px;
  font-weight: 500;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-none);
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-steps:has(.bullet-point) {
  gap: var(--spacing-md);
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step {
  background-color: var(--gray-300);
  border-radius: 8px;
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.21px;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step > span:first-child {
  width: 12px;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step.bullet-point {
  background-color: transparent;
  border-radius: 0;
  gap: var(--spacing-md);
  padding: var(--spacing-none);
  font-size: 15px;
  line-height: 24px;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-steps > .republish-feature-step.bullet-point > span:first-child {
  width: 16px;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-cta {
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  padding: var(--spacing-alt-sm) 26px;
  cursor: pointer;
  border-radius: 6px;
  background-color: var(--brand-400);
  transition: color 0.2s, background-color 0.2s;
  color: var(--gray-100);
  width: fit-content;
}
.FeatureAnnouncementItemComponent > .republish-feature-text-wrapper > .republish-feature-cta:hover {
  background-color: var(--brand-300);
}
.FeatureAnnouncementItemComponent > .republish-feature-illustration-wrapper {
  width: 240px;
  background-color: var(--brand-100);
  border-radius: 0 16px 16px 0;
  margin: -40px -24px -24px var(--spacing-none);
  padding: var(--spacing-4xl);
  display: flex;
  justify-content: center;
  align-items: center;
}
.FeatureAnnouncementItemComponent > .republish-feature-illustration-wrapper img {
  width: 100%;
}

.ui-dialog:has(.FeatureAnnouncementItemComponent) > .ui-dialog-titlebar {
  z-index: 999;
}
.ui-dialog:has(.FeatureAnnouncementItemComponent) .ui-icon-closethick:hover {
  background-color: transparent;
}
.ui-dialog:has(.FeatureAnnouncementItemComponent) .ui-dialog-content {
  margin-top: -16px;
}

@media screen and (max-width: 1024px) {
  .FeatureAnnouncementItemComponent {
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  .FeatureAnnouncementItemComponent > .republish-feature-illustration-wrapper {
    border-radius: 12px;
    margin: var(--spacing-none);
    width: calc(100% - 64px);
  }
  .ui-dialog .ui-dialog-content:has(.FeatureAnnouncementItemComponent) {
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
  }
}
.FeatureAnnouncementItemComponent {
  display: flex;
  border-radius: var(--radius-md, 12px);
  background: var(--gray-300);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4xl);
  padding: 0 var(--spacing-xl);
  flex: 1;
  overflow: hidden;
}
.FeatureAnnouncementItemComponent:only-child {
  flex-direction: unset;
  height: auto;
  padding: var(--spacing-none);
  width: 100%;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  width: 100%;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-modal-title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.17px;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-desc-text,
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-outro {
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-note {
  background-color: var(--gray-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-md);
  line-height: var(--line-height-lg);
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-steps:has(.bullet-point) {
  gap: var(--spacing-sm);
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-steps .republish-feature-step {
  background-color: var(--gray-300);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.21px;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-steps .republish-feature-step span:first-child {
  max-width: 12px;
  width: 12px;
  min-width: 12px;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-steps .republish-feature-step span:first-child img {
  width: inherit;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-steps .republish-feature-step.bullet-point {
  background-color: transparent;
  border-radius: 0;
  gap: var(--spacing-sm);
  padding: var(--spacing-none);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-cta {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 400;
  padding: var(--spacing-alt-sm) 26px;
  cursor: pointer;
  border-radius: var(--radius-alt-xs);
  background-color: var(--brand-400);
  transition: color 0.2s, background-color 0.2s;
  color: var(--gray-100);
  width: fit-content;
}
.FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-cta:hover {
  background-color: var(--brand-300);
}
.FeatureAnnouncementItemComponent .republish-feature-illustration-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 360/245;
  background-color: var(--surface-highlight-blue);
  border-radius: var(--radius-md);
  padding: var(--spacing-4xl);
}
.FeatureAnnouncementItemComponent .republish-feature-illustration-wrapper img {
  max-width: 100%;
}

.ui-dialog:has(.FeatureAnnouncementItemComponent) .ui-dialog-titlebar {
  z-index: 999;
}
.ui-dialog:has(.FeatureAnnouncementItemComponent) .ui-icon-closethick:hover {
  background-color: transparent;
}
.ui-dialog:has(.FeatureAnnouncementItemComponent) .ui-dialog-content {
  margin-top: -16px;
}

@media screen and (max-width: 1024px) {
  .FeatureAnnouncementItemComponent {
    flex-direction: column;
    gap: var(--spacing-2xl);
    max-width: unset;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-none);
  }
  .FeatureAnnouncementItemComponent:only-child {
    flex-direction: column;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-none);
    width: unset;
  }
  .FeatureAnnouncementItemComponent .republish-feature-cta,
  .FeatureAnnouncementItemComponent .republish-feature-note,
  .FeatureAnnouncementItemComponent .republish-feature-outro,
  .FeatureAnnouncementItemComponent .republish-feature-outro a,
  .FeatureAnnouncementItemComponent .republish-feature-desc-text,
  .FeatureAnnouncementItemComponent .republish-feature-step.bullet-point span,
  .FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-desc-text {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    font-weight: 500;
  }
  .FeatureAnnouncementItemComponent .republish-feature-text-wrapper {
    padding: var(--spacing-none) var(--spacing-lg);
  }
  .FeatureAnnouncementItemComponent .republish-feature-text-wrapper .republish-feature-modal-title {
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-md);
    letter-spacing: -0.15px;
  }
  .FeatureAnnouncementItemComponent .republish-feature-illustration-wrapper {
    border-radius: var(--radius-md);
    margin: var(--spacing-none);
    width: auto;
  }
  .ui-dialog .ui-dialog-content:has(.FeatureAnnouncementItemComponent) {
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
  }
}
#_idvin.vin-busy {
  background-image: url("/img/loading.gif");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.FEDeliveryType {
  width: 100%;
}
.FEDeliveryType.delivery-type {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.FEDeliveryType.delivery-type span, .FEDeliveryType.delivery-type > div {
  min-width: 312px;
}
.FEDeliveryType.delivery-type + .frow .e {
  display: none;
}
@media screen and (max-width: 1024px) {
  .FEDeliveryType.delivery-type {
    flex-direction: column;
  }
}
.FEDeliveryType.delivery-type-vertical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
}
.FEDeliveryType > div:first-of-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.FEDeliveryType > div:first-of-type p {
  position: relative;
}
.FEDeliveryType > div:first-of-type p:after {
  position: absolute;
  content: "*";
  color: var(--error-500);
  right: -8px;
}
.FEDeliveryType > div:first-of-type p + div {
  margin-left: var(--spacing-lg);
}
.FEDeliveryType + .FESelector {
  display: none;
}
.FEDeliveryType + .cm {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
}
.FEDeliveryType + .cm > span {
  width: 300px;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-900);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .FEDeliveryType + .cm {
    flex-direction: column;
  }
}
.FEDeliveryType > .inforadio {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  box-sizing: border-box;
}
.FEDeliveryType > .inforadio > label {
  flex: 31%;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  border-radius: var(--radius-sm);
  background-color: var(--gray-300);
  cursor: pointer;
  transition: background-color 0.3s linear;
  box-sizing: border-box;
}
.FEDeliveryType > .inforadio > label > input {
  display: none;
}
.FEDeliveryType > .inforadio > label::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  width: 100%;
  background-position: center;
  margin-bottom: var(--spacing-md);
}
.FEDeliveryType > .inforadio > label:nth-of-type(1)::before {
  background-image: url("/img/redesign/icons/delivery-types/small.svg");
}
.FEDeliveryType > .inforadio > label:nth-of-type(2)::before {
  background-image: url("/img/redesign/icons/delivery-types/medium.svg");
}
.FEDeliveryType > .inforadio > label:nth-of-type(3)::before {
  background-image: url("/img/redesign/icons/delivery-types/large.svg");
}
.FEDeliveryType > .inforadio > label .r1 {
  padding: var(--spacing-none);
  color: var(--gray-900);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs);
  letter-spacing: -0.26px;
  text-align: center;
  cursor: pointer;
}
.FEDeliveryType > .inforadio > label .r2 {
  padding: var(--spacing-none);
  color: var(--gray-700);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs);
  letter-spacing: -0.24px;
  text-align: center;
  cursor: pointer;
}
.FEDeliveryType > .inforadio > label:hover {
  background-color: var(--brand-100);
}
.FEDeliveryType > .inforadio > label:has(input:checked) {
  background-color: var(--brand-400);
}
.FEDeliveryType > .inforadio > label:has(input:checked) > .r1, .FEDeliveryType > .inforadio > label:has(input:checked) .r2 {
  color: var(--gray-100);
}
.FEDeliveryType > .inforadio:has(label input:checked) > label {
  opacity: 0.4;
}
.FEDeliveryType > .inforadio:has(label input:checked) > label:has(input:checked) {
  opacity: 1;
}
@media screen and (max-width: 1024px) {
  .FEDeliveryType > .inforadio {
    flex-direction: column;
  }
  .FEDeliveryType > .inforadio > label {
    width: 100%;
    box-sizing: border-box;
  }
}

.FESchedule {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.FESchedule input[type=text], .FESchedule .ComboSelectorComponent .me {
  width: 348px !important;
}
.FESchedule .ComboSelectorComponent .l {
  width: 100% !important;
}
.FESchedule .ComboSelectorComponent .l .i {
  border-bottom: none !important;
  justify-content: center;
}
.FESchedule .scheduleopt {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 40px;
}
.FESchedule .scheduleopt > label {
  width: 157px;
  font-size: 15px;
  font-weight: 500;
  line-height: var(--spacing-2xl, 24px);
  letter-spacing: -0.3px;
}
.FESchedule .scheduleopt .te {
  color: var(--gray-600);
  font-size: 15px;
  font-weight: 500;
  line-height: var(--spacing-2xl, 24px);
  letter-spacing: -0.3px;
}
.FESchedule .scheduleopt .te span {
  margin-right: var(--spacing-sm);
}
.FESchedule .scheduleopt .help {
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background-color: var(--gray-400);
  color: var(--accent-secondary-header-background);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 12px;
  transform: translateY(-1px);
  padding: var(--spacing-none);
}
@media screen and (max-width: 1024px) {
  .FESchedule {
    gap: var(--spacing-lg);
  }
  .FESchedule .ComboSelectorComponent .l {
    width: auto !important;
  }
  .FESchedule .scheduleopt {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  .FESchedule .scheduleopt div {
    width: 100%;
  }
  .FESchedule .scheduleopt div > .me,
  .FESchedule .scheduleopt div > input {
    width: 100% !important;
    max-width: 100%;
  }
}
@media (max-width: 533px) {
  .FESchedule input[type=text], .FESchedule .ComboSelectorComponent .me {
    width: 200px !important;
  }
}

.FEScheduleNew .time-slots-tomorrow,
.FEScheduleNew .other-option {
  display: none;
}
.FEScheduleNew .days-tabs {
  margin-bottom: var(--spacing-md);
}
.FEScheduleNew .SingleSelectBubbleComponent .label-and-reset-container {
  display: none;
}
@media screen and (max-width: 1024px) {
  .FEScheduleNew .days-tabs {
    margin-bottom: var(--spacing-lg);
  }
}

.FESelector {
  width: 100%;
}
.FESelector.align-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
@media screen and (max-width: 1024px) {
  .FESelector.align-row {
    flex-direction: column;
  }
}
.FESelector.align-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.FESelector > .rgroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  gap: var(--spacing-sm);
}
.FESelector > .rgroup > span {
  width: 59px;
  text-align: center;
  border-radius: var(--radius-sm);
  background-color: var(--gray-300);
  margin: var(--spacing-none);
  cursor: pointer;
  transition: background-color 0.3s linear;
}
.FESelector > .rgroup > span > input {
  display: none;
}
.FESelector > .rgroup > span > label {
  padding: var(--spacing-alt-xs) var(--spacing-md);
  color: var(--gray-800);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  cursor: pointer;
}
.FESelector > .rgroup > span:has(input:checked) {
  background-color: var(--brand-400);
}
.FESelector > .rgroup > span:has(input:checked) > label {
  color: var(--gray-100);
}
.FESelector > .rgroup > span:hover {
  background-color: var(--brand-100);
}
.FESelector > .rgroup:has(label input:checked) > label {
  opacity: 0.4;
}
.FESelector > .rgroup:has(label input:checked) > label:has(input:checked) {
  opacity: 1;
}
@media screen and (max-width: 1024px) {
  .FESelector > .rgroup {
    flex-direction: row;
  }
}

.GenericPostLabelComponent {
  background-color: #dfdfdf;
  padding: var(--spacing-xs) var(--spacing-alt-sm);
  display: inline-block;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-900);
}
.GenericPostLabelComponent img {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xxs);
}

@media screen and (max-width: 1024px) {
  .GenericPostLabelComponent {
    font-weight: 500;
    font-size: 12px;
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  .GenericPostLabelComponent {
    font-weight: 500;
    font-size: 12px;
  }
}
.HeaderSearchComponent {
  position: relative;
  flex-grow: 3;
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent {
    position: static;
  }
}
.HeaderSearchComponent__list {
  position: absolute;
  width: 100%;
  background: var(--gray-100);
  box-sizing: border-box;
  top: calc(100% + var(--spacing-sm));
  padding: 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  max-height: calc(100vh - var(--header-height-with-secondary-header));
  overflow-y: auto;
  display: none;
}
.HeaderSearchComponent__list li {
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent__list {
    position: fixed;
    top: var(--header-height-with-secondary-header);
    left: 0;
    right: 0;
    bottom: 0;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.HeaderSearchComponent__item {
  color: var(--gray-900);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--spacing-xs) var(--spacing-lg);
  box-sizing: border-box;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  align-items: center;
}
.HeaderSearchComponent__item img {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  color: inherit;
}
.HeaderSearchComponent__item:focus {
  outline: none;
}
.HeaderSearchComponent__item:focus, .HeaderSearchComponent__item:hover {
  color: var(--brand-400);
}
.HeaderSearchComponent__item:focus img, .HeaderSearchComponent__item:hover img {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}
.HeaderSearchComponent__item--2 img {
  width: 26px;
  height: 26px;
  margin-right: var(--spacing-alt-xs);
  border-radius: var(--radius-alt-xs);
}
.HeaderSearchComponent__item--2:focus img, .HeaderSearchComponent__item--2:hover img {
  filter: none;
}
.HeaderSearchComponent__history-clear {
  display: none;
  border-top: 1px solid var(--gray-300);
  text-align: right;
  width: 100%;
  font-size: var(--font-size-xxs);
  padding: var(--spacing-md);
}
.HeaderSearchComponent__category {
  cursor: default;
  padding-top: var(--spacing-alt-sm);
}
.HeaderSearchComponent__category .HeaderSearchComponent__title {
  font-size: var(--font-size-xxs);
  font-weight: 700;
  line-height: var(--line-height-alt-xs);
}
.HeaderSearchComponent__category:focus, .HeaderSearchComponent__category:hover {
  color: var(--gray-900);
}
.HeaderSearchComponent__clear {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  background-image: url("/img/redesign/icons/xicon.svg");
}
.HeaderSearchComponent__clear:focus {
  outline: 1px solid var(--brand-400) !important;
  outline-offset: -4px;
}
.HeaderSearchComponent__label {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.HeaderSearchComponent__title {
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: var(--line-height-lg);
  text-overflow: ellipsis;
  overflow: hidden;
}
.HeaderSearchComponent__sub {
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  opacity: 0.5;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent {
    width: 100%;
    height: 44px;
  }
}
.HeaderSearchComponent input {
  padding-right: var(--spacing-7xl);
  box-sizing: border-box;
  outline: none;
  padding-top: 0;
  padding-bottom: 0;
  height: 40px !important;
}
.HeaderSearchComponent input::placeholder {
  color: var(--gray-900);
  font-weight: 400;
  font-size: var(--font-size-md);
  opacity: 50%;
}
.HeaderSearchComponent input:focus {
  border: 1px solid var(--gray-900);
  background-color: var(--gray-100);
  box-shadow: none;
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent input {
    height: 44px !important;
  }
}
.HeaderSearchComponent form {
  position: relative;
  z-index: 51;
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent form {
    margin: auto;
  }
}
.HeaderSearchComponent:has(#idSearchBox:not(:placeholder-shown)) .HeaderSearchComponent__clear {
  display: block;
}
.HeaderSearchComponent:has(.HeaderSearchComponent__item--history) .HeaderSearchComponent__history-clear {
  display: block;
}

@media screen and (min-width: 1025px) {
  body:has(.HeaderSearchComponent__list:hover),
  body:has(.HeaderSearchComponent:focus-within) {
    overflow: hidden;
    touch-action: none;
  }
}
@media screen and (min-width: 1025px) {
  body:has(.HeaderSearchComponent__list:hover) #mainoverlay,
  body:has(.HeaderSearchComponent:focus-within) #mainoverlay {
    display: block !important;
  }
}
@media screen and (max-width: 1024px) {
  body:has(.HeaderSearchComponent__list:hover):has(.HeaderSearchComponent__dynamic),
  body:has(.HeaderSearchComponent:focus-within):has(.HeaderSearchComponent__dynamic) {
    overflow: hidden;
  }
  body:has(.HeaderSearchComponent__list:hover):has(.HeaderSearchComponent__dynamic)::after,
  body:has(.HeaderSearchComponent:focus-within):has(.HeaderSearchComponent__dynamic)::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 3;
  }
}
body:has(.HeaderSearchComponent__list:hover):has(.HeaderSearchComponent__dynamic) .HeaderSearchComponent__list,
body:has(.HeaderSearchComponent:focus-within):has(.HeaderSearchComponent__dynamic) .HeaderSearchComponent__list {
  pointer-events: all;
  display: block;
}
@media screen and (max-width: 1024px) {
  body:has(.HeaderSearchComponent__list:hover) #ph .c .brg,
  body:has(.HeaderSearchComponent__list:hover) #ph .c .b,
  body:has(.HeaderSearchComponent:focus-within) #ph .c .brg,
  body:has(.HeaderSearchComponent:focus-within) #ph .c .b {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .with-home-btn #HeaderSearchComponent input[value=""],
  .with-home-btn #HeaderSearchComponent #idSearchBox {
    background-image: url("/img/redesign/logo-no-bg.svg");
    background-repeat: no-repeat;
    background-position: 8px;
    background-size: 24px;
    padding: var(--spacing-none) var(--spacing-6xl);
    min-height: 44px;
  }
  .with-home-btn #HeaderSearchComponent input[value=""]:focus,
  .with-home-btn #HeaderSearchComponent #idSearchBox:focus {
    background-image: none;
  }
}
@media screen and (max-width: 1024px) and (max-width: 1024px) {
  .with-home-btn #HeaderSearchComponent input[value=""]:focus,
  .with-home-btn #HeaderSearchComponent #idSearchBox:focus {
    padding-left: var(--spacing-lg);
  }
}
.HeadingComponent {
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  white-space: normal;
  word-wrap: break-word;
}
.l.asterisk .HeadingComponent, .t.asterisk .HeadingComponent {
  position: relative;
  display: inline;
}
.l.asterisk .HeadingComponent:after, .t.asterisk .HeadingComponent:after {
  position: absolute;
  content: "*";
  color: var(--error-500);
  right: -10px;
  top: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
}
.t.asterisk:has(.HeadingComponent)::after {
  content: "";
}
.fsec.new.ver .t .HeadingComponent {
  font-size: var(--font-size-xl);
  line-height: var(--spacing-4xl);
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.4px;
}

.fsec .t .HeadingComponent,
#upload-pic-container .t .HeadingComponent {
  color: var(--gray-900);
}

.heart {
  position: relative;
  width: 20px;
  height: 20px;
}
.heart__content svg {
  width: 20px;
  height: 20px;
  fill: var(--accent-electricRaspberry);
  transition: fill 0.3s, stroke 0.3s;
  display: block;
}
.heart__float {
  position: absolute;
  bottom: 10px;
  width: 33%;
  height: 33%;
  background: url("/img/redesign/icons/heart-filled.svg") no-repeat center/contain;
  opacity: 0;
  pointer-events: none;
}
.heart__broken {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url("/img/redesign/icons/heart-filled.svg") no-repeat center/contain;
  opacity: 0;
  pointer-events: none;
  left: 0;
}

.heart-btn-label {
  font-weight: 500;
}

.heart-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-xs);
}
.heart-btn img {
  width: 20px;
  height: 20px;
  display: block;
}
.heart-btn--inactive .heart__content svg {
  fill: transparent;
  stroke: var(--gray-500);
}
.heart-btn--inactive .heart--touched .heart__broken {
  /* Animate left half */
  /* Animate right half */
}
.heart-btn--inactive .heart--touched .heart__broken--1 {
  clip-path: inset(0 50% 0 0);
  animation: brokenFloatLeft 0.6s forwards;
}
.heart-btn--inactive .heart--touched .heart__broken--2 {
  clip-path: inset(0 0 0 50%);
  animation: brokenFloatRight 0.6s forwards;
}
.heart-btn--active .heart--touched .heart__content {
  animation: heartbeat 0.6s forwards;
}
.heart-btn--active .heart--touched .heart__float {
  animation: floatUp 0.5s forwards;
}
.heart-btn--active .heart--touched .heart__float--1 {
  animation-delay: 0.4s;
  left: 50%;
}
.heart-btn--active .heart--touched .heart__float--2 {
  animation-delay: 0s;
  left: 20%;
}
.heart-btn--active .heart--touched .heart__float--3 {
  animation-delay: 0.2s;
  left: 80%;
}

button.heart-btn {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  line-height: normal;
  cursor: pointer;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes floatUp {
  0% {
    transform: translate(-50%, 0) scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -300%) scale(1.2);
    opacity: 0;
  }
}
@keyframes brokenFloatLeft {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-80%, 50%) rotate(-45deg);
    opacity: 0;
  }
}
@keyframes brokenFloatRight {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(80%, 50%) rotate(45deg);
    opacity: 0;
  }
}
/* Consent modal specific styles - reuses ImIDConsentModal base styles */
.ImIDConsentModal.consent-modal {
  width: 440px;
  height: 460px;
  display: flex;
  align-items: center;
}

.ImIDConsentModal.consent-modal .header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 auto;
  margin-bottom: var(--spacing-xl);
}

.ImIDConsentModal.consent-modal .imid-logo {
  display: flex;
  align-items: center;
}

.ImIDConsentModal.consent-modal .separator {
  width: 1px;
  height: 30px;
  background-color: var(--gray-400);
}

.ImIDConsentModal.consent-modal .list-logo {
  width: 85px;
  height: 33px;
  background: url(/img/redesign/logo.svg) no-repeat;
  background-size: contain;
  background-position: center;
}

.ImIDConsentModal.consent-modal .form-cont {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 350px;
}

.ImIDConsentModal.consent-modal .content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  justify-content: center;
}

.ImIDConsentModal.consent-modal .title {
  color: var(--gray-800, var(--gray-800));
  text-align: center;
  text-overflow: ellipsis;
  font-size: var(--font-size-md, 15px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm, 24px);
  letter-spacing: -0.3px;
  padding: 0px;
  margin: 0px;
}

.ImIDConsentModal.consent-modal .title-b {
  color: var(--gray-800, var(--gray-800));
  text-align: center;
  text-overflow: ellipsis;
  font-size: var(--font-size-md, 15px);
  font-style: normal;
  font-weight: var(--font-weight-heading, 700);
  line-height: var(--line-height-sm, 24px); /* 160% */
  letter-spacing: -0.3px;
  padding: 0px;
  margin: var(--spacing-alt-sm) 0px;
}

.ImIDConsentModal.consent-modal .content-bordered {
  display: flex;
  width: 344px;
  height: 222px;
  margin: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl) 23px;
  padding: var(--spacing-lg) var(--spacing-2xl);
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-radius: 16px;
  border: 1px solid var(--gray-400);
}

.ImIDConsentModal.consent-modal .verified-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background-color: var(--gray-300);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 8px;
  border: 1px solid #e0f0e0;
}

.ImIDConsentModal.consent-modal .subtitle {
  color: var(--gray-700);
  text-align: center;
  text-overflow: ellipsis;
  font-size: var(--font-size-xs, 13px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs, 20px);
  letter-spacing: -0.26px;
  margin: 0px;
}

.ImIDConsentModal.consent-modal .buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 15px;
}

.ImIDConsentModal.consent-modal .btn {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  min-width: 174px;
  display: inline-block;
  color: var(--gray-100);
  font-size: var(--font-size-sm, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs, 20px); /* 142.857% */
  letter-spacing: -0.28px;
}

.ImIDConsentModal.consent-modal .btn-primary {
  background-color: var(--brand-400);
  color: white;
}

.ImIDConsentModal.consent-modal .btn-primary:hover {
  background-color: var(--brand-300);
  transform: translateY(-1px);
}

.ImIDConsentModal.consent-modal .btn-default {
  background-color: var(--gray-300);
  color: black;
}

.ImIDConsentModal.consent-modal .btn-default:hover {
  transform: translateY(-1px);
}

.ImIDConsentModal.consent-modal .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.ImIDConsentModal.consent-modal .description {
  font-size: 16px;
  color: var(--gray-800);
  line-height: 1.5;
  text-align: center;
  margin: var(--spacing-none);
}

/* Mobile styles */
@media (max-width: 768px) {
  .ImIDConsentModal.consent-modal {
    width: 100%;
    display: block !important;
    margin-top: 50px;
  }
  .ImIDConsentModal.consent-modal .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    min-width: 160px;
    display: inline-block;
    flex: 1;
  }
  .ImIDConsentModal.consent-modal .buttons {
    display: flex;
    gap: var(--spacing-alt-sm);
    justify-content: center;
    margin-top: 15px;
  }
  .ImIDConsentModal.consent-modal .content-bordered {
    border: 1px solid #e7e7e7;
    width: 325px;
    margin: 0px auto;
    border-radius: 16px;
    padding: var(--spacing-lg) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-alt-sm);
    margin-top: var(--spacing-alt-sm);
  }
}
.ImIDErrorModal {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--error-500);
  border-radius: var(--spacing-lg);
}

.ImIDErrorModal .wrapper-cont {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-3xl);
}

.ImIDErrorModal .form-cont {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.ImIDErrorModal .header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: var(--spacing-none) auto;
  margin-bottom: var(--spacing-xl);
}

.ImIDErrorModal .header .imid-logo {
  display: flex;
  align-items: center;
}

.ImIDErrorModal .header .imid-logo svg {
  width: 90px;
  height: 32px;
}

.ImIDErrorModal .header .separator {
  width: 1px;
  height: 30px;
  background-color: var(--gray-400);
}

.ImIDErrorModal .header .list-logo {
  width: 90px;
  height: 32px;
  background: url(/img/redesign/logo.svg) no-repeat;
  background-size: contain;
  background-position: center;
}

.ImIDErrorModal .error-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.ImIDErrorModal .ImIDFlowStatesComponent {
  width: 100%;
}

.ImIDErrorModal .ImIDFlowStatesComponent .text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.ImIDErrorModal .ImIDLinkComponent {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.ImIDFlowStatesComponent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl);
}

.ImIDFlowStatesComponent .text {
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  align-self: stretch;
  color: var(--gray-800);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}

.ImIDFlowStatesComponent .image {
  width: 188px;
  height: 120px;
}

.ImIDLinkComponent {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  text-decoration: underline;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.ImIDLinkComponent:hover {
  color: var(--gray-900);
  text-decoration: underline;
}

.ImIDModal .form-cont {
  display: flex;
  height: fit-content;
  flex-direction: column;
  justify-content: space-between;
}

.ImIDModal.verif-flow .form-cont {
  margin-top: 140px;
  height: unset;
  justify-content: start;
}

.ImIDModal.verif-flow .content {
  gap: var(--spacing-none);
}

.ImIDModal.verif-flow .imid-login-form {
  margin: var(--spacing-5xl) var(--spacing-10xl) var(--spacing-none);
}

.ImIDModal.verif-flow form .actions {
  margin-top: var(--spacing-xl);
}

#dialog:has(.ImIDModal.verif-flow) {
  padding: var(--spacing-lg);
}

.ImIDModal .wrapper-cont {
  display: flex;
}

.ImIDModal .wrapper-cont > * {
  flex: 1;
}

.ImIDModal .info-banner-cont, .ImIDModal .form-cont {
  flex: 1;
}

.ImIDModal .footer .LinkComponent {
  font-weight: 500;
  text-decoration: underline;
}

.ImIDModal .footer .LinkComponent:hover {
  color: var(--gray-100);
}

.ImIDModal .info-banner-cont {
  padding: var(--spacing-6xl);
  border-radius: var(--spacing-md);
  background: radial-gradient(181.77% 100.4% at 98.02% 98.59%, var(--success-300) 0%, var(--gray-800) 52.99%, var(--gray-900) 100%);
}

.ImIDModal .info-banner-cont * {
  color: var(--gray-100);
}

.ImIDModal .list-logo {
  width: 85px;
  background: url(/img/redesign/logo.svg) no-repeat;
}

.ImIDModal .header {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
}

.ImIDModal .separator {
  width: 1px;
  flex-shrink: 0;
  background-color: var(--gray-900);
}

.ImIDModal .ajax-submit, .ImIDModal .continue-btn {
  display: flex;
  width: -webkit-fill-available;
  max-width: -webkit-fill-available;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-alt-xs);
  border-radius: var(--radius-sm);
  background: var(--accent-secondary-header-background);
  color: var(--gray-100);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding: var(--spacing-lg);
}

.ImIDModal .ajax-submit:hover {
  opacity: 0.9;
}

.ImIDModal .ajax-submit[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

.ImIDModal .ajax-submit > span {
  display: flex;
  align-items: center;
}

.ImIDModal form .actions {
  margin-top: var(--spacing-xl);
}

.ImIDModal form .learn-more {
  text-align: center;
  margin-top: var(--spacing-9xl);
}

.ImIDModal .imid-login-form:has(.ImIDFlowStatesComponent) {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}

.ImIDModal .OrganizedCellPhoneNumberFormElement {
  margin: var(--spacing-none);
  border-radius: var(--radius-sm);
  background: var(--gray-300);
  display: flex;
  align-items: center;
  border: 1px solid transparent;
}

.ImIDModal .OrganizedCellPhoneNumberFormElement > select {
  margin-left: var(--spacing-md);
}

.ImIDModal .OrganizedCellPhoneNumberFormElement div {
  flex-grow: 1;
  display: flex;
}

.ImIDModal .OrganizedCellPhoneNumberFormElement input[type=tel] {
  flex-grow: 1;
  display: flex;
  background-color: transparent !important;
  border: none;
  height: 54px;
}

.ImIDModal .OrganizedCellPhoneNumberFormElement input.felement_err {
  border: none !important;
  box-shadow: none !important;
}

.ImIDModal .OrganizedCellPhoneNumberFormElement:has(input.felement_err) {
  border: 1px solid var(--error-400) !important;
}

.ImIDModal form .error {
  display: none;
}

.ImIDModal .benefits > * {
  background: rgba(0, 0, 0, 0.3);
}

.ImIDModal .benefits {
  margin-bottom: var(--spacing-2xl);
}

/* ImID info banner styles */
.ImIDModal .benefit-cont {
  gap: var(--spacing-md);
}

.ImIDModal .header,
.ImIDModal .content {
  gap: var(--spacing-lg);
  width: 100%;
}

.ImIDModal .info-banner-cont .header > *,
.ImIDModal .content > *,
.ImIDModal .footer > * {
  width: 100%;
}

.ImIDModal .ActionButtonComponent {
  display: flex;
  padding: var(--spacing-lg) var(--spacing-2xl);
  flex-direction: column;
  color: var(--gray-100);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  border-radius: 6px;
  background: var(--brand-400);
}

.ImIDModal .horizontal-separator {
  margin-bottom: var(--spacing-4xl);
  display: flex;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.ImIDModal .digital-info-text p {
  color: var(--gray-700);
}

.ImIDModal .imid-login-form {
  margin-top: var(--spacing-9xl);
}

@media screen and (max-width: 1024px) {
  .ImIDModal {
    margin-top: var(--spacing-4xl);
  }
  .ImIDModal .imid-login-form {
    margin-top: var(--spacing-10xl);
  }
  .ImIDModal form .learn-more {
    margin-top: var(--spacing-4xl);
  }
  .ImIDModal form .actions {
    margin-top: var(--spacing-md);
  }
  .ImIDModal .ajax-submit {
    padding: unset;
    height: 51px;
  }
  /* ImID info banner styles */
  .ImIDModal .ActionButtonComponent {
    font-size: var(--font-size-sm);
  }
  .ImIDModal .footer .TextComponent {
    margin-bottom: var(--spacing-none);
  }
  .ImIDModal .horizontal-separator {
    margin-bottom: var(--spacing-2xl);
  }
  .ImIDModal .footer .LinkComponent {
    font-size: 12px;
  }
  .ImIDModal .benefits .BoxComponent {
    padding: var(--spacing-md);
  }
  .ImIDModal .BoxComponent .TextComponent {
    font-size: var(--font-size-xxs);
  }
  .ImIDModal .wrapper-cont {
    flex-direction: column-reverse;
    position: relative;
    padding: var(--spacing-none);
  }
  .ImIDModal.verif-flow .imid-login-form {
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
  }
  .ImIDModal.verif-flow .form-cont {
    margin-top: 60px;
  }
  .ImIDModal .info-banner-cont {
    padding: var(--spacing-xl);
    /* margin-top: var(--spacing-6xl); */
    flex: initial;
  }
  .ImIDModal .info-banner-cont .header > * {
    padding: var(--spacing-none);
  }
  .ImIDModal.verif-flow .first-page .form-cont {
    display: none;
  }
  .ImIDModal.verif-flow .wrapper-cont:not(.first-page) .info-banner-cont-wrapper {
    display: none;
  }
  .ImIDModal.verif-flow .imid-login-form:has(.ImIDFlowStatesComponent) {
    align-items: start;
  }
  .ImIDModal .continue-btn {
    display: flex !important;
    margin-top: var(--spacing-xl);
  }
}
.IndividualTypeVerificationStepComponent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xl);
  /* Extra info box shown conditionally when exactly one option is selected */
}
.IndividualTypeVerificationStepComponent .options {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xl);
}
.IndividualTypeVerificationStepComponent .options .imid-block, .IndividualTypeVerificationStepComponent .options .persona-block {
  width: 50%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  justify-content: flex-start;
  align-items: flex-start;
  transition: all 0.2s ease-out;
  cursor: pointer;
  border: 1px solid transparent;
}
.IndividualTypeVerificationStepComponent .options .imid-block:not(.disabled):hover, .IndividualTypeVerificationStepComponent .options .persona-block:not(.disabled):hover {
  background-color: var(--tab-bg-hover);
}
.IndividualTypeVerificationStepComponent .options .imid-block.selected, .IndividualTypeVerificationStepComponent .options .persona-block.selected {
  border-color: var(--gray-900);
}
.IndividualTypeVerificationStepComponent .options .imid-block.not-selected, .IndividualTypeVerificationStepComponent .options .persona-block.not-selected {
  opacity: 0.3;
  border-color: transparent;
  filter: grayscale(10%);
}
.IndividualTypeVerificationStepComponent .options .imid-block .card-sub-title, .IndividualTypeVerificationStepComponent .options .persona-block .card-sub-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xxs);
}
.IndividualTypeVerificationStepComponent .options-info {
  width: 100%;
}
.IndividualTypeVerificationStepComponent .options-info .imid-block-info, .IndividualTypeVerificationStepComponent .options-info .persona-block-info {
  display: none;
}
.IndividualTypeVerificationStepComponent .options-info .imid-block-info.show, .IndividualTypeVerificationStepComponent .options-info .persona-block-info.show {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-2xl);
}
.IndividualTypeVerificationStepComponent .options-info .imid-block-info.show .highlight, .IndividualTypeVerificationStepComponent .options-info .persona-block-info.show .highlight {
  min-width: 100%;
}
.IndividualTypeVerificationStepComponent .options-info .imid-block-info .info-wrapper, .IndividualTypeVerificationStepComponent .options-info .persona-block-info .info-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.IndividualTypeVerificationStepComponent .options-info .imid-block-info .LinkComponent {
  text-decoration: underline;
}
.IndividualTypeVerificationStepComponent .imid-block .icon-wrapper, .IndividualTypeVerificationStepComponent .imid-block .icon-wrapper svg {
  width: 56px;
  height: 20px;
}
.IndividualTypeVerificationStepComponent .persona-block .icon-wrapper, .IndividualTypeVerificationStepComponent .persona-block .icon-wrapper svg {
  width: 82px;
  height: 20px;
}
.IndividualTypeVerificationStepComponent .verification-extra {
  display: none;
  width: 100%;
  flex-basis: 100%;
}
.IndividualTypeVerificationStepComponent .verification-extra.show {
  display: block;
}
@media screen and (max-width: 1024px) {
  .IndividualTypeVerificationStepComponent .options {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .IndividualTypeVerificationStepComponent .options .imid-block, .IndividualTypeVerificationStepComponent .options .persona-block {
    width: 100%;
  }
  .IndividualTypeVerificationStepComponent .options-info .imid-block-info, .IndividualTypeVerificationStepComponent .options-info .persona-block-info {
    gap: var(--spacing-xl);
  }
}

.InfoModal {
  display: flex;
  gap: var(--spacing-6xl);
  color: var(--gray-900);
}
.InfoModal .info-modal-wrapper {
  flex: 1;
  gap: var(--spacing-lg);
}
.InfoModal .info-modal-wrapper .info-modal-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  margin-bottom: var(--spacing-lg);
}
.InfoModal .info-modal-wrapper .info-modal-content {
  line-height: var(--line-height-lg);
  font-weight: 500;
  letter-spacing: -0.24px;
}
.InfoModal .info-modal-wrapper .info-modal-content .delivery-first-desc,
.InfoModal .info-modal-wrapper .info-modal-content .delivery-second-desc {
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.InfoModal .info-modal-wrapper .info-modal-btn {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  border-radius: var(--radius-md);
  background-color: var(--brand-400);
  transition: color 0.2s, background-color 0.2s;
  color: var(--gray-100);
  width: fit-content;
  display: block;
}
.InfoModal .info-modal-wrapper .info-modal-btn:hover {
  background-color: var(--brand-300);
}
.InfoModal .info-modal-img-wrapper {
  width: 300px;
  background-color: var(--brand-100);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: -41px -25px -41px var(--spacing-none);
  padding: var(--spacing-none);
  display: flex;
  justify-content: center;
  align-items: center;
}
.InfoModal .info-modal-img-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.ui-dialog:has(.InfoModal) .ui-dialog-titlebar {
  z-index: 103;
}
.ui-dialog:has(.InfoModal) .ui-icon-closethick:hover {
  background-color: transparent;
}
.ui-dialog:has(.InfoModal) .ui-dialog-content {
  margin-top: -16px;
  padding-left: var(--spacing-6xl);
  padding-bottom: var(--spacing-6xl);
}

@media screen and (max-width: 1024px) {
  .InfoModal {
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  .InfoModal .info-modal-wrapper .info-modal-btn {
    width: auto;
    text-align: center;
  }
  .InfoModal .info-modal-wrapper .info-modal-content {
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.3px;
  }
  .InfoModal .info-modal-img-wrapper {
    border-radius: var(--radius-md);
    margin: var(--spacing-none);
    width: 100%;
  }
  .InfoModal .info-modal-img-wrapper img {
    border-radius: var(--radius-md);
  }
  .dialog-container #dialog:has(.InfoModal) {
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
  }
}
.InlineHintComponent {
  color: var(--gray-900);
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  cursor: default;
  background-image: url(/img/redesign/icons/info-icon.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.InlineHintComponent:hover {
  color: var(--gray-700);
}

form .InlineHintComponent {
  margin-left: var(--spacing-sm);
}

.l.asterisk .InlineHintComponent {
  margin-left: var(--spacing-lg);
}

#purchases-empty-state-shop-now-link + a > div.InlineHintComponent {
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .InlineHintComponent {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 13px;
  }
  .fdeladdr .frow .l .InlineHintComponent {
    display: none;
  }
}
.InlineOptionsMenuComponent {
  position: relative;
}
.InlineOptionsMenuComponent > svg {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.InlineOptionsMenuComponent > svg:hover > path {
  fill: var(--brand-400);
}
.InlineOptionsMenuComponent:has(.open) > svg > path {
  fill: var(--brand-400);
}
.InlineOptionsMenuComponent .options-container {
  position: absolute;
  background: var(--gray-100);
  padding: var(--spacing-md);
  display: none;
  border-radius: 8px;
}
.InlineOptionsMenuComponent .options-container.open {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  left: -10px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1019607843);
  z-index: 9;
}
.InlineOptionsMenuComponent .options-container .option-wrapper {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  cursor: pointer;
}
.InlineOptionsMenuComponent .options-container .option-wrapper[name=delivery] {
  white-space: nowrap;
}
.InlineOptionsMenuComponent .options-container .option-wrapper .option-label {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 24px;
}
.InlineOptionsMenuComponent .options-container .option-wrapper > svg {
  width: 20px;
  height: 20px;
}
.InlineOptionsMenuComponent .options-container .option-wrapper:hover {
  color: var(--brand-400);
}
.InlineOptionsMenuComponent .options-container .option-wrapper:hover > svg > path {
  stroke: var(--brand-400);
}
.InlineOptionsMenuComponent .option-wrapper.disabled {
  color: var(--gray-500);
}
.InlineOptionsMenuComponent .option-wrapper.disabled:hover {
  color: var(--gray-500);
}
.InlineOptionsMenuComponent .option-wrapper.disabled svg path {
  stroke: var(--gray-500) !important;
}
.InlineOptionsMenuComponent .option-wrapper.disabled:hover svg path {
  stroke: var(--gray-500);
}
.InlineOptionsMenuComponent .inline-menu-overlay {
  display: none;
}

@media screen and (max-width: 1400px) {
  .InlineOptionsMenuComponent .options-container.open {
    right: 0;
    left: unset;
  }
}
@media screen and (max-width: 1024px) {
  .InlineOptionsMenuComponent {
    width: 20px;
    height: 20px;
  }
  .InlineOptionsMenuComponent:has(.open) > svg > path {
    fill: var(--brand-400);
  }
  .InlineOptionsMenuComponent > svg {
    width: 20px;
    height: 20px;
  }
  .InlineOptionsMenuComponent > svg > path {
    fill: var(--gray-900);
  }
  .InlineOptionsMenuComponent > .options-container {
    display: flex;
    position: fixed;
    margin: var(--spacing-none) var(--spacing-md) var(--spacing-2xl) var(--spacing-md);
    padding: var(--spacing-none);
    bottom: -200px;
    z-index: 9;
  }
  .InlineOptionsMenuComponent > .options-container.open {
    right: 0;
    left: 0;
    gap: var(--spacing-none);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  }
  .InlineOptionsMenuComponent > .options-container.open .option-wrapper {
    margin: var(--spacing-none);
    padding: var(--spacing-xl) var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }
  .InlineOptionsMenuComponent > .options-container.open .option-wrapper .option-label {
    font-size: 17px;
    font-weight: 500;
    line-height: var(--line-height-lg);
  }
  .InlineOptionsMenuComponent > .options-container.open .option-wrapper > svg {
    width: 26px;
    height: 26px;
  }
  .InlineOptionsMenuComponent > .options-container.open .option-wrapper:not(:last-child) {
    border-bottom: 1px solid #EFEFEF;
  }
  .InlineOptionsMenuComponent .inline-menu-overlay {
    z-index: 2;
    position: fixed;
    background-color: var(--gray-900);
    opacity: 0.4;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
  }
}
.InlineTabComponent > div:first-child {
  display: flex;
  align-items: center;
}

.InlineTabComponent > div:first-child > div {
  font-size: 15px;
  padding: var(--spacing-alt-sm) var(--spacing-alt-md);
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-transition: -webkit-filter 500ms linear;
}

.InlineTabComponent > div:first-child > div:hover {
  -webkit-filter: brightness(110%);
}

.InlineTabComponent > div:first-child > div.s {
  border: 1px solid var(--brand-400);
  border-radius: 8px;
}

.InlineTabComponent > div:first-child > div > img {
  height: 24px;
}

.InlineTabComponent > div:nth-child(2) {
  display: none;
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-none);
  left: 0;
}

.InlineTabComponent > div:nth-child(2) > div {
  display: none;
  flex-direction: column;
}

.InlineTabComponent > div:nth-child(2) > div > * {
  width: 100%;
}

.InlineTabComponent.tabs-restyle > div:first-child > div {
  display: flex;
  padding: var(--spacing-sm) var(--spacing-lg);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--gray-800);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
  background: var(--gray-300);
  border-radius: var(--radius-sm);
  border: none;
}

.InlineTabComponent.tabs-restyle > div:first-child > div.s {
  background: var(--brand-100);
  color: var(--brand-400);
}

.InlineTabComponent.tabs-restyle > div:first-child {
  gap: var(--spacing-sm);
}

.InlineTabComponent.tabs-restyle > div:first-child > div:hover {
  /* background-color: var(--brand-200); */
  -webkit-filter: none;
}

.InlineTabComponent.tabs-restyle > div:nth-child(2) > div {
  flex: 1;
}

.InlineTabComponent.tabs-restyle:has(.SelectBoxComponent) > div:nth-child(2) > div {
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .InlineTabComponent > div:first-child {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .InlineTabComponent > div:first-child > div {
    padding: var(--spacing-alt-sm);
  }
}
.InputComponent {
  height: unset !important;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--gray-300);
  color: var(--gray-900);
  overflow: hidden;
  cursor: text;
  transition: all 0.2s;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-appearance: none;
}
.InputComponent::placeholder {
  color: var(--gray-500);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.InputComponent:focus-visible {
  outline: none;
}
.InputComponent:hover {
  cursor: text;
  border-color: var(--gray-400);
}
.InputComponent:hover + span {
  border-color: var(--gray-400);
}
.InputComponent:focus {
  background-color: var(--gray-100);
  border-color: var(--gray-900) !important;
}
.InputComponent:focus + span {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.InputComponent:disabled, .InputComponent:read-only {
  background: var(--gray-200);
  color: var(--gray-500);
  border: none;
  cursor: unset;
  pointer-events: none;
}
.InputComponent:disabled:focus, .InputComponent:read-only:focus {
  border: none;
}
.InputComponent.felement_err, .InputComponent.felement_err:focus {
  background-color: var(--gray-100);
  border-color: var(--error-400) !important;
  box-shadow: none !important;
  text-overflow: ellipsis;
}
.InputComponent.felement_err::placeholder, .InputComponent.felement_err:focus::placeholder {
  color: var(--gray-500) !important;
}
.InputComponent.felement_err + span, .InputComponent.felement_err:focus + span {
  color: var(--error-400);
  background-color: var(--gray-100);
  border-color: var(--error-400);
}
.InputComponent.felement_err + .err, .InputComponent.felement_err:focus + .err {
  font-size: 13px;
  color: var(--error-400);
}
.InputComponent.clearable {
  padding-right: var(--spacing-3xl);
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  box-sizing: border-box;
  cursor: text;
}
.InputComponent.clearable.has-value {
  background-image: url("/img/redesign/icons/xicon.svg");
}
.InputComponent.clearable:not(.has-value) {
  background-image: none;
}

.input-wrapper {
  position: relative;
  display: inline-block;
}
.input-wrapper .input-component {
  width: 100%;
  box-sizing: border-box;
  padding-right: var(--spacing-3xl);
  cursor: text;
}
.input-wrapper .clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("/img/redesign/icons/xicon.svg") no-repeat center center;
  background-size: 16px 16px;
  cursor: pointer;
  display: none;
}
.input-wrapper.has-value .clear-btn {
  display: block;
}

.dlsearch form input.InputComponent {
  background-color: var(--gray-300);
}
.dlsearch form .txt:has(.ctrl a.x) input.InputComponent {
  padding-right: var(--spacing-6xl);
}

#inline-name-edit-component .edit-element-wrapper .InputComponent {
  padding: 7px var(--spacing-lg);
}

.LanguagePopupComponent {
  padding: var(--spacing-4xl) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .LanguagePopupComponent {
    padding: var(--spacing-4xl) var(--spacing-none);
  }
}
.LanguagePopupComponent__header {
  margin-bottom: var(--spacing-5xl);
}
.LanguagePopupComponent__header h2 {
  padding: 0;
  margin: 0;
  color: var(--gray-900);
  text-align: center;
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-xl);
  letter-spacing: -0.4px;
  margin-bottom: var(--spacing-xs);
}
.LanguagePopupComponent__items {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm, 8px);
  align-self: stretch;
  flex-direction: row;
}
@media screen and (max-width: 680px) {
  .LanguagePopupComponent__items {
    flex-direction: column;
  }
}
.LanguagePopupComponent__items a {
  display: flex;
  padding: var(--spacing-xl);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  flex: 1 0 0;
  height: 124px;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  background: var(--gray-300);
  outline: 2px solid transparent;
  transition: all 0.3s ease-in-out;
}
.LanguagePopupComponent__items a:hover {
  color: var(--brand-400);
  outline: 2px solid var(--brand-400);
}
@media screen and (max-width: 680px) {
  .LanguagePopupComponent__items a {
    flex-direction: row;
    height: 88px;
    width: 100%;
  }
}
.LanguagePopupComponent__items img {
  display: block;
  width: 40px;
  height: 40px;
}
.LanguagePopupComponent__items span {
  display: block;
  color: inherit;
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
}

/* line menu start */
.LineMenuComponent {
  /*padding: 8px 0 8px 8px;*/
  padding-left: var(--spacing-sm);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.LineMenuComponent img {
  width: 20px;
  height: 20px;
}

#LineMenuComponent {
  position: absolute;
  display: none;
  padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}

#LineMenuComponent > div {
  padding: var(--spacing-md);
  border: 1px solid var(--gray-400);
  border-radius: 8px;
  background-color: var(--gray-100);
  box-shadow: 0 4px 12px 0 rgba(26, 29, 62, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-md);
}

#LineMenuComponent > div > div {
  color: var(--gray-900);
  font-weight: 500;
  display: flex;
  align-items: center;
  cursor: pointer;
}

#LineMenuComponent > div > div img {
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-sm);
}

#LineMenuComponent > div > div > span {
  font-size: 14px;
  white-space: nowrap;
}

#LineMenuComponent > div > div > span:first-child {
  margin-right: var(--spacing-sm);
}

#LineMenuComponent > div > span {
  display: block;
  margin-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-top: 1px solid var(--gray-400);
}

#LineMenuComponent > div:before {
  color: var(--gray-400);
  position: absolute;
  top: 2px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  content: "";
  border-top: 1px solid var(--gray-400);
  border-left: 1px solid var(--gray-400);
  background-color: var(--gray-100);
  transform: rotate(45deg);
}

@media screen and (max-width: 1024px) {
  /* line menu start */
  .LineMenuComponent {
    margin: var(--spacing-none) var(--spacing-xs);
  }
  #LineMenuComponent {
    position: fixed;
    z-index: 9;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
  }
  #LineMenuComponent > div {
    padding: var(--spacing-none);
    border: none;
    border-radius: 12px;
    box-shadow: none;
    margin: var(--spacing-none) var(--spacing-md) var(--spacing-2xl) var(--spacing-md);
  }
  #LineMenuComponent > div > div {
    margin: var(--spacing-none);
    padding: var(--spacing-xl) var(--spacing-md);
    border-bottom: 1px solid var(--gray-300);
    width: 100%;
    box-sizing: border-box;
  }
  #LineMenuComponent > div > div:last-child {
    border: none;
  }
  #LineMenuComponent > div > div img {
    width: 26px;
    height: 26px;
    margin-right: var(--spacing-md);
  }
  #LineMenuComponent > div > div > span {
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #LineMenuComponent > div > span {
    display: none;
  }
  #LineMenuComponent > div:before {
    display: none;
  }
}
.LinkComponent {
  padding: var(--spacing-none);
  margin: var(--spacing-none);
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--brand-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.LinkComponent:hover {
  color: var(--brand-300);
}

.LinkComponent:focus {
  outline: none;
  border-bottom-color: var(--brand-400);
}

.LocationFilterDropdownComponent {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.LoginImidComponent {
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
  margin-top: 64px;
}
.LoginImidComponent__badge {
  display: inline-block;
  padding: var(--spacing-alt-xs) var(--spacing-alt-sm) var(--spacing-alt-xs) var(--spacing-alt-xs);
  border-radius: var(--radius-alt-xs);
  background: var(--success-100);
  color: var(--gray-900);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  margin-bottom: var(--spacing-sm);
}
.LoginImidComponent__badge img {
  margin-right: var(--spacing-xs);
  vertical-align: top;
}
.LoginImidComponent__label {
  line-height: var(--line-height-md);
  align-self: stretch;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-basis: 100%;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
  justify-content: center;
  letter-spacing: -0.3px;
}
.LoginImidComponent__button {
  width: 100%;
  display: flex;
  padding: var(--spacing-md) var(--spacing-10xl) var(--spacing-alt-md) var(--spacing-10xl);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  align-self: stretch;
  border-radius: var(--radius-sm);
  background: var(--accent-secondary-header-background);
  color: var(--gray-100);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.LoginImidComponent__button span {
  line-height: inherit;
}
.LoginImidComponent__button:hover {
  background: var(--accent-secondary-header-background);
  opacity: 0.9;
}
.LoginImidComponent + .t.ts {
  margin: var(--radius-lg) 0;
}

.LoginPromptSection {
  text-align: center;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}
.LoginPromptSection__button {
  color: var(--brand-400) !important;
  display: block;
  width: 100%;
  margin: auto;
  padding: var(--spacing-alt-md) var(--spacing-none);
  line-height: var(--line-height-alt-xs);
  background-color: var(--brand-100);
  border-radius: var(--radius-sm);
  transition: color 0.2s, background-color 0.2s;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.LoginPromptSection__button:hover {
  background-color: var(--brand-200);
}
.LoginPromptSection__label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-md);
  font-weight: 500;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  flex-basis: 100%;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg);
  justify-content: center;
}

.MapLocationSelectorModal #map {
  position: relative;
  height: 400px;
}

.MapLocationSelectorModal #map:after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 22px;
  height: 40px;
  margin: -40px var(--spacing-none) var(--spacing-none) -11px;
  content: " ";
  pointer-events: none;
  background: url("https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png");
  background-size: 22px 40px;
}

.MapLocationSelectorModal .addr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
}

.MapLocationSelectorModal .addr > div {
  margin: var(--spacing-md) var(--spacing-xl);
  text-align: center;
}

.MapLocationSelectorModal .addr > div > div:first-child {
  font-size: 14px;
  color: var(--gray-600);
  margin: var(--spacing-xxs) var(--spacing-none);
}

.MapLocationSelectorModal .addr > div > div:last-child {
  font-size: 16px;
  color: var(--gray-900);
  margin: var(--spacing-xxs) var(--spacing-none);
}

.MapLocationSelectorModal .i {
  position: absolute;
  z-index: 99;
  top: 8px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MapLocationSelectorModal .i div {
  font-size: 16px;
  margin: var(--spacing-none) var(--spacing-alt-sm);
  padding: var(--spacing-sm);
  text-align: center;
  opacity: 0.9;
  border-radius: 8px;
  background-color: var(--gray-100);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.MapLocationSelectorModal .btns {
  font-size: 16px;
  padding: var(--spacing-alt-sm) var(--spacing-alt-sm) 30px var(--spacing-alt-sm) !important;
}

.MapLocationSelectorModal #idmls:disabled {
  background-color: var(--gray-400);
  color: var(--gray-500);
}

@media screen and (max-width: 1024px) {
  .MapLocationSelectorModal .addr {
    flex-direction: column;
  }
  .MapLocationSelectorModal #map {
    height: calc(100vh - 300px);
  }
  .MapLocationSelectorModal .addr > div {
    margin: var(--spacing-none) var(--spacing-xl);
  }
}
.MapViewComponent {
  width: 100%;
  height: 100%;
  position: relative;
}

.MapViewComponent.inline {
  border-radius: 16px;
  overflow: hidden;
}

.MapViewComponent #map {
  position: relative;
  height: 400px;
}

.MapViewComponent.inline #map {
  height: 280px;
}

.MapViewComponent #map:after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 22px;
  height: 40px;
  margin: -40px var(--spacing-none) var(--spacing-none) -11px;
  content: " ";
  pointer-events: none;
  background: url("https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png");
  background-size: 22px 40px;
}

.MapViewComponent.inline .addr, .MapViewComponent.inline .btns, .MapViewComponent.inline .i {
  display: none;
}

.frow.attr.flex-start:has(.MapViewComponent) {
  padding-bottom: var(--spacing-none);
}

.MapViewComponent .addr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
}

.MapViewComponent .addr > div {
  margin: var(--spacing-md) var(--spacing-xl);
  text-align: center;
}

.MapViewComponent .addr > div > div:first-child {
  font-size: 14px;
  color: var(--gray-600);
  margin: var(--spacing-xxs) var(--spacing-none);
}

.MapViewComponent .addr > div > div:last-child {
  font-size: 16px;
  color: var(--gray-900);
  margin: var(--spacing-xxs) var(--spacing-none);
}

.MapViewComponent .i {
  position: absolute;
  z-index: 99;
  top: 8px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MapViewComponent .i div {
  font-size: 16px;
  margin: var(--spacing-none) var(--spacing-alt-sm);
  padding: var(--spacing-sm);
  text-align: center;
  opacity: 0.9;
  border-radius: 8px;
  background-color: var(--gray-100);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}

.MapViewComponent .btns {
  font-size: 16px;
  padding: var(--spacing-alt-sm) var(--spacing-alt-sm) 30px var(--spacing-alt-sm) !important;
}

.MapViewComponent #idmls:disabled {
  background-color: var(--gray-400);
  color: var(--gray-500);
}

@media screen and (max-width: 1024px) {
  .MapViewComponent .addr {
    flex-direction: column;
  }
  .MapViewComponent #map {
    height: calc(100vh - 300px);
  }
  .MapViewComponent .addr > div {
    margin: var(--spacing-none) var(--spacing-xl);
  }
}
.ModalXButtonComponent {
  width: 40px;
  height: 40px;
  padding: var(--spacing-none);
  margin-top: -20px;
  margin-right: var(--spacing-alt-xs);
  border-radius: var(--radius-2xl);
  background: url(/img/redesign/icons/xicon.svg) center center no-repeat;
  background-size: 32px 32px;
  transition: all 0.2s;
  position: absolute;
  right: 0;
  top: var(--spacing-2xl);
  cursor: pointer;
}
.ModalXButtonComponent:hover {
  background-color: var(--gray-300);
}

.MultiLevelDropdownComponent {
  position: relative;
  display: inline-block;
  overflow: visible !important;
  vertical-align: middle;
  background-color: var(--gray-300);
  border-radius: var(--radius-sm);
  width: 100%;
}

.dl .toolbar .MultiLevelDropdownComponent {
  min-width: 160px;
  max-width: 300px;
  line-height: var(--line-height-md);
}

.MultiLevelDropdownComponent > .l > div.i:hover,
.MultiLevelDropdownComponent .t.exp:hover,
.MultiLevelDropdownComponent .t.nexp:hover {
  background-color: var(--gray-300);
}

.MultiLevelDropdownComponent > .me > span > input {
  min-width: auto;
}

.MultiLevelDropdownComponent > .me {
  padding: 5px var(--spacing-none);
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  min-width: 60px;
  width: 100%;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.2s;
  background-color: var(--gray-300);
}

.dlsearch.my-posts .MultiLevelDropdownComponent > .me {
  padding: var(--spacing-none);
}

.MultiLevelDropdownComponent > .me > div {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  overflow: hidden;
  padding: var(--spacing-none) var(--spacing-md);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 22px;
  line-height: 40px;
  width: 100%;
}

.MultiLevelDropdownComponent > .me > div.clr {
  display: flex;
  align-items: center;
}

.MultiLevelDropdownComponent > .me > div.ico {
  background-image: var(--a-icon);
  background-size: 16px 16px;
  background-position: 12px center;
  background-repeat: no-repeat;
  padding-left: var(--spacing-5xl);
  padding-right: var(--spacing-4xl);
}

.MultiLevelDropdownComponent.disabled > .me:after {
  display: none;
}

.MultiLevelDropdownComponent.open > .me {
  border-color: var(--gray-900);
  background-color: var(--gray-100);
}

.MultiLevelDropdownComponent > .me > img {
  position: absolute;
  right: 0;
  top: 11px;
  z-index: 1;
  width: 25px;
  transition: all 0.2s;
  margin-right: var(--spacing-alt-md);
}

.dlsearch.my-posts .MultiLevelDropdownComponent > .me > img {
  top: 7px;
}

.MultiLevelDropdownComponent.open > .me > img {
  transform: rotate(180deg);
}

.MultiLevelDropdownComponent > .me > div.clr:before {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  min-width: 14px;
  height: 14px;
  margin-right: var(--spacing-sm);
  content: " ";
  border-radius: var(--radius-4xl);
  background-color: var(--a-color);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
}

.MultiLevelDropdownComponent > .me > span {
  position: absolute;
  top: 3px;
  right: 25px;
  bottom: 4px;
  left: 12px;
  display: none;
  width: calc(100% - 12px);
}

.MultiLevelDropdownComponent > .me > span > input {
  width: 100%;
  padding: var(--spacing-none);
  border: none;
  outline: 0;
}

.dlsearch.my-posts .MultiLevelDropdownComponent > .me > span > input {
  height: 34px;
}

.MultiLevelDropdownComponent > .me > span > input::placeholder {
  padding: var(--spacing-none);
}

.MultiLevelDropdownComponent > .l {
  position: absolute;
  z-index: 105;
  top: 64px;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 320px;
  padding: var(--spacing-alt-xs) var(--spacing-none) var(--spacing-alt-sm);
  user-select: none;
  opacity: 0;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
  transition: opacity 150ms linear, top 150ms linear, bottom 150ms linear, display 150ms linear;
}

div.dle .MultiLevelDropdownComponent > .l {
  display: none;
}

.MultiLevelDropdownComponent.open > .l {
  left: 0;
  top: 40px;
  bottom: auto;
  display: block;
  opacity: 1;
  box-shadow: 0 4px 16px 0 rgba(26, 29, 62, 0.1);
  margin-top: var(--spacing-lg);
}

div.dle .MultiLevelDropdownComponent.open > .l {
  display: block;
  margin-top: var(--spacing-alt-xs);
}

.MultiLevelDropdownComponent > .l.top {
  top: auto;
  bottom: 64px;
}

.MultiLevelDropdownComponent.open > .l.top {
  bottom: 45px;
  display: block;
  opacity: 1;
}

.MultiLevelDropdownComponent > .l > span {
  display: none;
}

.MultiLevelDropdownComponent > .l > div {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  text-align: left;
  text-overflow: ellipsis;
}

.MultiLevelDropdownComponent > .l > div.i {
  font-size: var(--font-size-md);
  line-height: var(--line-height-xs);
  color: var(--gray-900);
  margin: var(--spacing-none);
  padding: var(--spacing-xxs) var(--spacing-alt-sm) var(--spacing-xxs) var(--spacing-5xl);
  cursor: pointer;
  white-space: nowrap;
}

.MultiLevelDropdownComponent > .l.ms {
  padding-bottom: var(--spacing-none);
}

.MultiLevelDropdownComponent > .l.ms > div.i {
  padding: var(--spacing-alt-xs) var(--spacing-md) var(--spacing-alt-xs) var(--spacing-none);
}

.MultiLevelDropdownComponent > .l.ms > div.i.g {
  padding-left: var(--spacing-2xl);
}

.MultiLevelDropdownComponent > .l.ms > div.i.s:after {
  display: none;
}

.MultiLevelDropdownComponent > .l.ms > div.i input + span {
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-lg);
}

.MultiLevelDropdownComponent > .l > div.t {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  color: var(--gray-900);
  margin-top: var(--spacing-alt-xs);
  padding-left: var(--spacing-md);
  white-space: nowrap;
  transition: all 0.2s;
}

.MultiLevelDropdownComponent .title-wrapper {
  text-wrap: wrap;
  font-size: var(--font-size-sm);
  padding-top: var(--spacing-alt-xs);
  padding-bottom: var(--spacing-alt-xs);
}

.MultiLevelDropdownComponent > .l > div.t.exp, .MultiLevelDropdownComponent > .l > div.t.nexp {
  display: flex;
  cursor: pointer;
}

.MultiLevelDropdownComponent > .l > div.t.i {
  padding: var(--spacing-alt-xs) 30px;
  margin: var(--spacing-alt-xs) var(--spacing-none) -2px var(--spacing-none);
}

.MultiLevelDropdownComponent > .l > div.t.exp:after {
  position: absolute;
  top: 14px;
  right: 18px;
  left: auto;
  width: 5px;
  height: 5px;
  content: "";
  border-top: 1px solid var(--gray-600);
  border-right: 1px solid var(--gray-600);
  transition: all 0.2s;
  transform: rotate(135deg);
}

.MultiLevelDropdownComponent > .l > div.t.exp:hover:after {
  border-top: 1px solid var(--brand-400);
  border-right: 1px solid var(--brand-400);
}

.MultiLevelDropdownComponent > .l > div.t.exp.open:after {
  top: 16px;
  transform: rotate(-45deg);
}

.MultiLevelDropdownComponent > .l > div.t2 {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  padding-left: var(--spacing-2xl);
  color: var(--gray-500);
  white-space: nowrap;
}

.MultiLevelDropdownComponent > .l > div.i.t2 {
  color: var(--gray-900);
}

.MultiLevelDropdownComponent > .l > div.i.t2.s {
  color: var(--brand-400);
}

.MultiLevelDropdownComponent > .l > div.g.last-level {
  padding-left: var(--spacing-5xl);
  white-space: normal;
  overflow-wrap: normal;
}

.MultiLevelDropdownComponent:has(:not(.category-name-container)) > .l > div.g.last-level {
  padding-right: var(--spacing-5xl);
}

.MultiLevelDropdownComponent .category-cnt-container {
  color: var(--gray-600);
}

.MultiLevelDropdownComponent .s .category-cnt-container {
  color: var(--brand-400);
}

.MultiLevelDropdownComponent .category-name-container {
  display: flex;
  align-items: center;
}

.MultiLevelDropdownComponent .category-name-container .circle-symbol {
  font-size: 6px;
}

.MultiLevelDropdownComponent.open > .l > div.i.exp, .MultiLevelDropdownComponent.open > .l > div.t2.exp {
  display: none;
}

.MultiLevelDropdownComponent > .l > div.s {
  color: var(--brand-400);
}

.MultiLevelDropdownComponent > .l > div.s:after,
.MultiLevelDropdownComponent > .l > div.t.exp.s:before {
  position: absolute;
  right: 12px;
  width: 12px;
  height: 12px;
  content: "";
  background-image: url("/img/redesign/icons/checked-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.MultiLevelDropdownComponent[data-select-group-title] > .l > div.t.exp.s:after,
.MultiLevelDropdownComponent[data-select-group-title] > .l > div.t.exp.open:after {
  background-image: none;
}

.MultiLevelDropdownComponent[data-select-group-title] > .l > div.t.exp.s:before {
  right: 40px;
}

.MultiLevelDropdownComponent[data-select-group-title] > .l > div.i.t2.g.exp.s.open {
  padding-right: var(--spacing-6xl);
}

.MultiLevelDropdownComponent .circle-symbol {
  color: var(--gray-500);
  margin: var(--spacing-none) var(--spacing-md);
}

.MultiLevelDropdownComponent > .l > div > i {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  border-radius: var(--radius-4xl);
  background-color: var(--a-color);
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.MultiLevelDropdownComponent > .l > div > img {
  display: block;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  pointer-events: none;
}

.postdlg.post-ad-form .MultiLevelDropdownComponent > .me input[type=text],
.postdlg.post-edit-form .MultiLevelDropdownComponent > .me input[type=text] {
  opacity: 0;
  transition: background-color 0.2s, border-top-color 0.2s, border-bottom-color 0.2s;
}

.postdlg.post-ad-form .MultiLevelDropdownComponent > .me > div,
.postdlg.post-edit-form .MultiLevelDropdownComponent > .me > div {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  display: flex;
  align-items: center;
}

.postdlg.post-ad-form .MultiLevelDropdownComponent > .me > span,
.postdlg.post-edit-form .MultiLevelDropdownComponent > .me > span {
  height: 42px;
  top: 0;
  right: 28px;
}

.postdlg.post-ad-form .MultiLevelDropdownComponent.open > .l.top,
.postdlg.post-edit-form .MultiLevelDropdownComponent.open > .l.top {
  bottom: 44px;
  top: auto;
  padding-left: var(--spacing-md);
}

#buy-bundle-container .MultiLevelDropdownComponent > .l {
  width: 30px;
}

#buy-bundle-container .MultiLevelDropdownComponent .t2.g.exp .title-wrapper {
  width: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: var(--spacing-5xl);
}

#admin_page_main_category .MultiLevelDropdownComponent > .me {
  padding: 0;
}

#admin_page_main_category .MultiLevelDropdownComponent > .me > span > input {
  margin-top: -3px;
}

#admin_page_main_category .MultiLevelDropdownComponent > .me > img {
  top: 8px;
}

@media screen and (max-width: 1024px) {
  .dlsearch.my-posts form .MultiLevelDropdownComponent {
    margin-top: var(--spacing-md);
  }
  .MultiLevelDropdownComponent > .me:after {
    top: 13px;
  }
  .MultiLevelDropdownComponent > .l {
    position: fixed;
    z-index: 1101;
    max-height: 95%;
    min-height: 80px;
    left: 20px;
    width: auto !important;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-radius: var(--radius-md);
    top: 50%;
    transform: translateY(-50%);
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
  }
  .MultiLevelDropdownComponent.open > .l {
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
    display: block;
    opacity: 1;
    padding: var(--spacing-lg);
    margin: var(--spacing-none);
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
  }
  .MultiLevelDropdownComponent > .l > div.i {
    font-size: var(--font-size-sm);
    margin: var(--spacing-none);
  }
  .MultiLevelDropdownComponent > .l > div:last-child {
    border: none;
  }
  .MultiLevelDropdownComponent > .l > div.t {
    font-size: var(--font-size-sm);
    padding: var(--spacing-alt-xs) var(--spacing-md);
  }
  .MultiLevelDropdownComponent > .l > div.g2 {
    margin-left: var(--spacing-8xl);
  }
  .MultiLevelDropdownComponent > .l > div.t2 {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-xs);
  }
  .MultiLevelDropdownComponent > .l > span {
    position: sticky;
    z-index: 106;
    top: 0;
    display: none;
    padding: var(--spacing-xl) var(--spacing-none) var(--spacing-alt-sm);
    background-color: var(--gray-100);
  }
  .MultiLevelDropdownComponent > .l > span > input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl);
    border: none;
    border-radius: var(--radius-2xl);
    outline: 0;
    background-color: var(--gray-300);
  }
  .MultiLevelDropdownComponentultiLevelDropdownComponent > .l > span > input::placeholder {
    padding: var(--spacing-none);
  }
  .MultiLevelDropdownComponent > .l.ms:has(.bt) {
    padding-bottom: var(--spacing-none);
  }
  .MultiLevelDropdownComponent > .l.ms > div.i input {
    margin-right: var(--spacing-alt-sm);
    width: 18px;
    height: 18px;
  }
  .MultiLevelDropdownComponent .t.exp .title-wrapper,
  .MultiLevelDropdownComponent .t.nexp .title-wrapper,
  .MultiLevelDropdownComponent .t2.g.exp .title-wrapper {
    width: fit-content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .MultiLevelDropdownComponent > .l > div.t.nexp.s .title-wrapper {
    margin-right: var(--spacing-alt-sm);
  }
  .MultiLevelDropdownComponent .t.exp .category-name-container {
    margin-right: var(--spacing-4xl);
  }
  body.MultiLevelDropdownComponent #ph, body.MultiLevelDropdownComponent .tbar {
    z-index: 1 !important;
  }
  @supports (-webkit-touch-callout: none) {
    body.MultiLevelDropdownComponent .tbar, body.MultiLevelDropdownComponent .ui-dialog-titlebar {
      display: none !important;
    }
  }
  .MultiLevelDropdownComponent > .me > div {
    font-size: var(--font-size-sm);
    padding: var(--spacing-alt-xs) var(--spacing-4xl) var(--spacing-alt-xs) var(--spacing-sm);
    line-height: var(--line-height-lg);
  }
  .MultiLevelDropdownComponent[data-select-group-title] > .me > div {
    max-width: 100%;
    width: fit-content;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filter .MultiLevelDropdownComponent > .me {
    max-width: 170px;
  }
  .filter .MultiLevelDropdownComponent > .me > span > input:focus {
    border: none;
  }
  .MultiLevelDropdownComponent > .l > div.ico:before {
    margin-right: var(--spacing-md);
  }
  .postdlg.post-ad-form .MultiLevelDropdownComponent.open > .l,
  .postdlg.post-edit-form .MultiLevelDropdownComponent.open > .l {
    top: 50%;
  }
  .MultiLevelDropdownComponent > .l > div.g.exp.last-level .title-wrapper {
    display: inline-block;
  }
}
.MultiLevelDropdownComponent > .l {
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.modal-open {
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* key part */
}

.MultiSelectBubbleComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.MultiSelectBubbleComponent .label-and-reset-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xxs);
}
.MultiSelectBubbleComponent .label-and-reset-container .label-container {
  font-weight: 600;
  font-size: 14px;
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}
.MultiSelectBubbleComponent .label-and-reset-container .reset-btn {
  font-weight: 500;
  font-size: 12px;
  line-height: var(--spacing-lg);
  opacity: 1;
  height: auto;
  color: var(--brand-400);
  cursor: pointer;
}
.MultiSelectBubbleComponent .label-and-reset-container .reset-btn.hidden {
  opacity: 0;
  height: 0;
}
.MultiSelectBubbleComponent .options-container {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.MultiSelectBubbleComponent .options-container .option-container {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-alt-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  background-color: var(--gray-300);
  color: var(--gray-900);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  transition: all 0.2s;
  user-select: none;
  border: 1px var(--gray-300) solid;
}
.MultiSelectBubbleComponent .options-container .option-container .option-container-icon {
  display: flex;
  align-items: center;
}
.MultiSelectBubbleComponent .options-container .option-container .option-container-icon svg {
  max-width: 14px;
  height: 14px;
}
.MultiSelectBubbleComponent .options-container .option-container:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.MultiSelectBubbleComponent .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px var(--brand-400) solid;
}
.MultiSelectBubbleComponent.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.MultiSelectBubbleComponent.disabled .label-and-reset-container .reset-btn {
  display: none;
}
.MultiSelectBubbleComponent.felement_err {
  border: none !important;
}
.MultiSelectBubbleComponent.felement_err .options-container .option-container {
  border: 1px solid var(--error-400);
  background-color: var(--gray-100);
}

@media screen and (max-width: 1024px) {
  .MultiSelectBubbleComponent .options-container .option-container:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px var(--gray-300) solid;
  }
  .MultiSelectBubbleComponent .options-container .option-container.selected:hover {
    color: var(--brand-400);
    background-color: var(--brand-100);
    border: 1px var(--brand-400) solid;
  }
}
.MultiSelectDropdownComponent:not(body) {
  position: relative;
  display: inline-block;
  overflow: visible;
  vertical-align: middle;
  width: 100%;
}
.MultiSelectDropdownComponent:not(body).disabled {
  pointer-events: none;
}
.MultiSelectDropdownComponent:not(body).disabled > .me {
  cursor: default;
  border-color: var(--gray-200);
  background-color: var(--gray-200);
  color: var(--gray-500);
}
.MultiSelectDropdownComponent:not(body).disabled > .me::after {
  display: none;
}
.MultiSelectDropdownComponent:not(body).disabled > .me > div {
  color: var(--gray-500);
}
.MultiSelectDropdownComponent:not(body).disabled > .me > svg path {
  stroke: var(--gray-500);
}
.MultiSelectDropdownComponent:not(body).felement_err {
  border: none;
  box-shadow: none;
}
.MultiSelectDropdownComponent:not(body).felement_err > .me {
  background-color: var(--gray-100);
  border: 1px solid var(--error-400);
}
.MultiSelectDropdownComponent:not(body).felement_err > .me:hover, .MultiSelectDropdownComponent:not(body).felement_err > .me:has(input[type=text]:focus) {
  border: 1px solid var(--error-400);
}
.MultiSelectDropdownComponent:not(body).felement_err > .me input[type=text] {
  background-color: var(--gray-100);
  border: none;
}

.resume-edit .MultiSelectDropdownComponent > .me {
  padding-right: var(--spacing-md);
}

/* main element */
.MultiSelectDropdownComponent > .me {
  min-height: 46px;
  padding: var(--spacing-alt-sm) var(--spacing-3xl) var(--spacing-alt-sm) var(--spacing-alt-sm);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.2s ease-out;
  background-color: var(--gray-300);
  opacity: 1;
  font-size: var(--spacing-alt-md);
  font-weight: 400;
  line-height: var(--line-height-sm);
  overflow-y: visible;
  /* search field */
}
.inline-edit-mode .MultiSelectDropdownComponent > .me {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
}
.inline-edit-mode .MultiSelectDropdownComponent > .me.lg input[type=text] {
  height: 40px !important;
}
.MultiSelectDropdownComponent > .me:after {
  position: absolute;
  top: calc(50% - 2.5px);
  right: 17px;
  left: auto;
  width: 5px;
  height: 5px;
  content: "";
  display: inline-block;
  pointer-events: none;
  z-index: 1;
  transition: all 0.2s ease-out;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-top: 1.5px solid var(--gray-900);
  border-right: 1.5px solid var(--gray-900);
  border-radius: 1.5px;
  transform: rotate(135deg);
}
.MultiSelectDropdownComponent > .me .ph {
  color: var(--gray-500);
}
.MultiSelectDropdownComponent > .me::placeholder {
  color: var(--gray-500);
}
.MultiSelectDropdownComponent > .me:hover {
  border-color: var(--gray-400);
}
.MultiSelectDropdownComponent > .me:has(input[type=text]:focus) {
  border-color: var(--gray-900);
}
.MultiSelectDropdownComponent > .me input[type=text] {
  opacity: 0;
  background-color: transparent;
  border: none;
  outline: 0;
  transition: opacity 0.2s ease-out;
}
.MultiSelectDropdownComponent > .me.felement_err {
  background-color: var(--gray-100);
}
.MultiSelectDropdownComponent > .me.felement_err input[type=text] {
  background-color: var(--gray-100);
  border: none;
}
.MultiSelectDropdownComponent > .me > div {
  display: flex;
  align-items: center;
}
.MultiSelectDropdownComponent > .me > span {
  height: 42px;
  top: 0;
  right: 28px;
}
.MultiSelectDropdownComponent > .me > div {
  overflow: hidden;
  padding: var(--spacing-none);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.MultiSelectDropdownComponent > .me > div.multi-value-wrapper {
  padding-right: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: 1;
  box-sizing: border-box;
  gap: var(--spacing-xs);
  max-height: 92px;
  overflow-y: auto;
  z-index: 1;
}
.MultiSelectDropdownComponent > .me > div .multi-selected-option {
  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-xs);
  background: var(--gray-400);
  overflow: hidden;
  letter-spacing: -0.26px;
  z-index: 100;
  cursor: auto;
}
.MultiSelectDropdownComponent > .me > div .multi-selected-option span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  font-size: var(--font-size-xs);
  line-height: var(--font-size-xl);
  font-weight: 400;
}
.MultiSelectDropdownComponent > .me > div .multi-selected-option .multi-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  cursor: pointer;
}
.MultiSelectDropdownComponent > .me > div > img {
  width: 16px;
  height: 16px;
  min-width: 16px;
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}
.MultiSelectDropdownComponent > .me > div.clr {
  display: flex;
  align-items: center;
}
.MultiSelectDropdownComponent > .me > div.clr:before {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
  content: " ";
  border-radius: 50%;
  background-color: var(--a-color);
  border: 1px solid var(--gray-400);
}
.MultiSelectDropdownComponent > .me > div.ico {
  background-image: var(--a-icon);
  background-size: 16px 16px;
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left: var(--spacing-2xl);
}
.MultiSelectDropdownComponent > .me > span > input:focus {
  border: none;
  box-shadow: none;
}
.MultiSelectDropdownComponent > .me.sm input[type=text] {
  height: 46px;
}
.MultiSelectDropdownComponent > .me.lg input[type=text] {
  height: 48px;
}
.MultiSelectDropdownComponent > .me > svg {
  width: 20px;
  height: 20px;
  transition: all 0.2s ease-out;
  position: relative;
  z-index: 11;
  pointer-events: none;
  transform: rotate(0deg);
}
.MultiSelectDropdownComponent > .me > span {
  position: absolute;
  right: 36px;
  bottom: 4px;
  left: 12px;
  display: none;
}
.MultiSelectDropdownComponent > .me > span:has(> input) {
  right: 34px;
  padding-left: var(--spacing-xs);
}
.MultiSelectDropdownComponent > .me > span > input {
  width: 100%;
  padding: var(--spacing-none);
  border: none;
  outline: 0;
  height: 32px;
}
.MultiSelectDropdownComponent > .me > span > input::placeholder {
  color: var(--gray-500);
  padding: var(--spacing-none);
}

.MultiSelectDropdownComponent.open > .me {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.MultiSelectDropdownComponent.open > .me input[type=text] {
  opacity: 1;
  border: none;
}
.MultiSelectDropdownComponent.open > .me:after {
  transform: rotate(315deg);
  transform-origin: center;
  transform-box: border-box;
}

/* menu / list of elements */
.MultiSelectDropdownComponent > .l {
  position: absolute;
  z-index: 39;
  top: calc(100% + 4px);
  bottom: auto;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 480px;
  min-width: 100%;
  user-select: none;
  opacity: 0;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
  transition: opacity 150ms linear, top 150ms linear, bottom 150ms linear, display 150ms linear;
  width: 100%;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* search field mobile */
}
.MultiSelectDropdownComponent > .l.top {
  top: auto;
  bottom: calc(100% + 4px);
}
.MultiSelectDropdownComponent > .l:has(.no-search-results.show) {
  min-width: 152px;
}
.MultiSelectDropdownComponent > .l > span {
  display: none;
}
.MultiSelectDropdownComponent > .l > span {
  display: none;
}
.MultiSelectDropdownComponent > .l > div {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  text-align: left;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.MultiSelectDropdownComponent > .l > div > input, .MultiSelectDropdownComponent > .l > div > input + span {
  cursor: pointer;
}
.MultiSelectDropdownComponent > .l > div input[type=checkbox]:checked ~ span {
  background-color: var(--brand-400);
  border-color: var(--brand-400);
}
.MultiSelectDropdownComponent > .l > div.i {
  color: var(--gray-900);
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-lg);
  cursor: pointer;
  white-space: nowrap;
  flex: 1;
}
.MultiSelectDropdownComponent > .l > div.i:hover {
  background-color: var(--gray-300);
}
.MultiSelectDropdownComponent > .l > div.i.g {
  padding-left: var(--spacing-4xl);
}
.MultiSelectDropdownComponent > .l > div.i.g .title-wrapper {
  max-width: 100%;
}
.MultiSelectDropdownComponent > .l .i svg, .MultiSelectDropdownComponent > .l .t svg {
  display: none;
}
.MultiSelectDropdownComponent > .l .title-wrapper {
  width: 100%;
  max-width: 100%;
}
.MultiSelectDropdownComponent > .l > div.t2 {
  font-size: var(--font-size-md);
  color: var(--gray-600);
  padding: var(--spacing-alt-xs) var(--spacing-2xl) var(--spacing-alt-xs) var(--spacing-7xl);
  white-space: nowrap;
}
.MultiSelectDropdownComponent > .l > div.g {
  padding-left: var(--spacing-2xl);
}
.MultiSelectDropdownComponent > .l div.g2 {
  padding-left: var(--spacing-9xl);
}
.MultiSelectDropdownComponent > .l .i.g {
  display: flex;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: var(--spacing-none);
  padding-bottom: var(--spacing-none);
  transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out, padding 250ms ease-in-out;
}

.MultiSelectDropdownComponent.open > .l {
  left: 0;
  opacity: 1;
  box-shadow: 0 4px 16px 0 rgba(26, 29, 62, 0.1);
  display: flex;
  flex-direction: column;
  padding: var(--spacing-alt-xs) var(--spacing-none);
}
.MultiSelectDropdownComponent.open > .l:has(.no-search-results), .MultiSelectDropdownComponent.open > .l:has(.show) {
  padding: var(--spacing-none);
}
.MultiSelectDropdownComponent.open > .l > div.no-search-results {
  display: none;
  letter-spacing: -0.28px;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.MultiSelectDropdownComponent.open > .l .no-search-results.show {
  display: flex;
  padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-2xl);
  text-align: center;
}
.MultiSelectDropdownComponent.open > .l.top {
  display: flex;
  flex-direction: column;
  opacity: 1;
}
.MultiSelectDropdownComponent.open > .l .i.g.visible {
  max-height: 60px;
  opacity: 1;
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-4xl);
}

/* multi-select support  */
.MultiSelectDropdownComponent > .l.ms > div.i.s:after {
  display: none;
}

.MultiSelectDropdownComponent > .l.ms > div.i:hover input:not(:checked) + span {
  border-color: var(--gray-900);
}

.MultiSelectDropdownComponent > .l.ms > div.i,
.MultiSelectDropdownComponent > .l.ms > div.t.exp {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

.MultiSelectDropdownComponent > .l.ms > div input + span {
  border-radius: var(--radius-xs);
  border: 1px solid var(--gray-500);
  margin-right: var(--spacing-alt-sm);
}

.MultiSelectDropdownComponent > .l.ms > div.i input:checked + span,
.MultiSelectDropdownComponent > .l.ms > div.t.exp input:checked + span {
  border-color: var(--brand-400);
}

/* buttons cancel / apply */
.MultiSelectDropdownComponent > .l > .ca-btn {
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  position: sticky;
  bottom: 0;
  display: none;
  justify-content: center;
  gap: var(--spacing-sm);
  background-color: var(--gray-100);
  width: 100%;
  z-index: 1;
}
.MultiSelectDropdownComponent > .l > .ca-btn.show {
  display: flex;
  padding: var(--spacing-alt-sm) var(--spacing-md) var(--spacing-md);
}
.MultiSelectDropdownComponent > .l > .ca-btn > div {
  padding: var(--spacing-sm) var(--spacing-lg);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-sm);
  background: var(--gray-300);
  transition: background-color 0.3s linear;
  width: 50%;
  max-width: 50%;
}
.MultiSelectDropdownComponent > .l > .ca-btn > div.apply {
  background-color: var(--brand-400);
}
.MultiSelectDropdownComponent > .l > .ca-btn > div.apply:hover {
  background-color: var(-brand-300);
}
.MultiSelectDropdownComponent > .l > .ca-btn > div.cancel {
  background-color: var(--gray-300);
}
.MultiSelectDropdownComponent > .l > .ca-btn > div.cancel:hover {
  background-color: var(--gray-400);
}

.MultiSelectDropdownComponent > .l > div.t {
  color: var(--gray-900);
  padding: var(--spacing-sm) var(--spacing-lg);
  white-space: nowrap;
  transition: all 0.2s;
  position: relative;
}
.MultiSelectDropdownComponent > .l > div.t:hover {
  background-color: var(--gray-300);
}
.MultiSelectDropdownComponent > .l > div.t.nexp {
  display: flex;
  cursor: pointer;
}
.MultiSelectDropdownComponent > .l > div.t.nexp:hover {
  color: var(--brand-300);
}
.MultiSelectDropdownComponent > .l > div.t.exp {
  display: flex;
  cursor: pointer;
}
.MultiSelectDropdownComponent > .l > div.t.exp:hover {
  color: var(--brand-300);
}
.MultiSelectDropdownComponent > .l > div.t.exp:after {
  position: absolute;
  top: 16px;
  right: 17px;
  left: auto;
  width: 5px;
  height: 5px;
  content: "";
  display: inline-block;
  pointer-events: none;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-top: 1.5px solid var(--gray-900);
  border-right: 1.5px solid var(--gray-900);
  border-radius: 1.5px;
  transform: rotate(135deg);
}
.MultiSelectDropdownComponent > .l > div.t.exp.open:after {
  transform: rotate(315deg);
  transform-origin: center;
  transform-box: border-box;
}

/* section labels */
.MultiSelectDropdownComponent > .l > div.section-label {
  color: var(--text-secondary);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xs);
  font-weight: 700;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
  pointer-events: none;
  cursor: default;
  margin-top: var(--spacing-sm);
  /* Hide checkbox and span for section labels */
}
.MultiSelectDropdownComponent > .l > div.section-label:first-child {
  margin-top: 0;
}
.MultiSelectDropdownComponent > .l > div.section-label > input[type=checkbox],
.MultiSelectDropdownComponent > .l > div.section-label > input[type=checkbox] + span {
  display: none !important;
}

.MultiSelectDropdownComponent > .l > div.s {
  color: var(--brand-400);
  gap: var(--spacing-xs);
}
.MultiSelectDropdownComponent > .l > div.s > svg {
  display: block;
  right: 16px;
  position: absolute;
}

.MultiSelectDropdownComponent > .l > div.s:hover:after {
  border-color: var(--brand-400);
}

.MultiSelectDropdownComponent > .l > div.t.s:hover:after {
  border-color: var(--brand-400);
}

/* color circle used for color selection dropdowns */
.MultiSelectDropdownComponent > .l > div > i {
  box-sizing: border-box;
  display: block;
  min-width: 18px;
  height: 18px;
  margin: var(--spacing-none);
  border-radius: 50%;
  background-color: var(--a-color);
  border: 1px solid var(--gray-400);
  pointer-events: none;
}

.MultiSelectDropdownComponent > .l > div > i.na {
  box-shadow: none;
  background-color: transparent;
}

/* icons for lsw selection dropdowns */
.MultiSelectDropdownComponent > .l > div > img {
  display: block;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: var(--spacing-none) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  pointer-events: none;
}

.MultiSelectDropdownComponent > .l > div > div.title-wrapper p {
  max-width: calc(100% - var(--spacing-lg));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (min-width: 1025px) {
  .MultiSelectDropdownComponent > .l > span > input {
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .MultiSelectDropdownComponent > .l {
    position: fixed;
    z-index: 1101;
    max-height: 80dvh;
    left: 20px;
    width: auto !important;
    top: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
  }
  .MultiSelectDropdownComponent > .l.top,
  .MultiSelectDropdownComponent.open > .l.top {
    bottom: auto;
  }
  .MultiSelectDropdownComponent.open > .l > div.no-search-results {
    justify-content: start;
  }
  .MultiSelectDropdownComponent.open > .l > div.no-search-results.show {
    padding: var(--spacing-2xl) var(--spacing-md);
  }
  .MultiSelectDropdownComponent.open > .l {
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
    opacity: 1;
    padding: var(--spacing-none);
    margin: var(--spacing-none);
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    max-height: 80dvh;
    min-width: -webkit-fill-available;
  }
  .MultiSelectDropdownComponent > .l > div.i {
    font-size: var(--font-size-lg);
    margin: var(--spacing-none);
    padding: var(--spacing-alt-sm) var(--spacing-sm);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .MultiSelectDropdownComponent > .l > div.i.s {
    width: calc(100% - 20px);
  }
  .MultiSelectDropdownComponent > .l > div.i:hover,
  .MultiSelectDropdownComponent > .l > div.t:hover {
    color: var(--gray-900);
    background-color: var(--gray-100);
  }
  .MultiSelectDropdownComponent > .l > div.i > div.title-wrapper,
  .MultiSelectDropdownComponent > .l > div.i > div.title-wrapper-second {
    width: calc(100% - 28px);
  }
  .MultiSelectDropdownComponent > .l > div:last-child {
    border: none;
  }
  .MultiSelectDropdownComponent > .l > div.t {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .MultiSelectDropdownComponent > .l > div.t2 {
    padding-left: var(--spacing-7xl);
  }
  /* search field mobile */
  .MultiSelectDropdownComponent > .l > span {
    position: sticky;
    z-index: 106;
    top: 0;
    display: none;
    padding: var(--spacing-xl) var(--spacing-none) var(--spacing-alt-sm);
    background-color: var(--gray-100);
  }
  .MultiSelectDropdownComponent > .l > span > input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--radius-sm);
  }
  .MultiSelectDropdownComponent > .l > span > input::placeholder {
    padding: var(--spacing-none);
  }
  .MultiSelectDropdownComponent > .l > .ca-btn {
    display: flex;
    padding: var(--spacing-alt-sm) var(--spacing-md) var(--spacing-md);
  }
  .MultiSelectDropdownComponent > .l.ms:has(.ca-btn) {
    padding-bottom: var(--spacing-none);
  }
  .MultiSelectDropdownComponent > .l.ms > div.i input {
    margin-right: var(--spacing-alt-sm);
  }
  .MultiSelectDropdownComponent > .l.ms > div.i input {
    width: 18px;
    height: 18px;
  }
  .MultiSelectDropdownComponent > .l.ms > div.i div.title-wrapper,
  .MultiSelectDropdownComponent > .l.ms > div.i div.title-wrapper-second {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-wrap: wrap;
    overflow-wrap: anywhere;
  }
  .MultiSelectDropdownComponent > .l.ms > div.i:hover input:not(:checked) + span {
    border-color: var(--gray-500);
  }
  /* when select overlay is open, apply these styles in iOS safari to fix overlapping header issue */
  @supports (-webkit-touch-callout: none) {
    body.MultiSelectDropdownComponent .tbar, body.MultiSelectDropdownComponent .ui-dialog-titlebar {
      display: none !important;
    }
  }
  .filter .MultiSelectDropdownComponent > .me {
    max-width: 170px;
  }
  .filter .MultiSelectDropdownComponent > .me > span > input:focus {
    border: none;
  }
  .MultiSelectDropdownComponent > .l > div.s:after {
    top: 18px;
    right: 6px;
    left: auto;
    width: 14px;
    height: 7px;
  }
  .MultiSelectDropdownComponent > .l > div.ico:before {
    margin-right: var(--spacing-md);
  }
}
/* Hide placeholder text when dropdown is open to avoid overlap with search input */
.MultiSelectDropdownComponent.open > .me > div.ph {
  visibility: hidden;
}

/* Ensure the inline search input appears above options and text is visible */
.MultiSelectDropdownComponent > .me > span {
  z-index: 101;
  background-color: transparent;
}

.MultiSelectDropdownComponent.open > .me > span > input {
  opacity: 1;
  color: var(--gray-900);
  background-color: transparent;
}

/* Ensure mobile (menu-based) search input is visible and above options */
.MultiSelectDropdownComponent > .l > span {
  position: sticky;
  top: 0;
  z-index: 1102;
  display: block;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
}

.MultiSelectDropdownComponent > .l > span > input {
  color: var(--gray-900);
}

.mu-wrapper {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--spacing-sm) !important;
  margin: var(--spacing-none) !important;
  overflow: visible !important;
}
.mu-wrapper .label-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: auto;
}
.mu-wrapper .label-wrapper > p {
  color: var(--gray-900);
}
.mu-wrapper .label-wrapper .reset-btn {
  display: none;
  cursor: pointer;
}
.mu-wrapper .label-wrapper .reset-btn .TextComponent {
  color: var(--brand-400);
  font-weight: 500;
  font-size: var(--font-size-xxs);
}
.mu-wrapper .label-wrapper .reset-btn:hover {
  color: var(--brand-300);
}

.postdlg.post-ad-form .MultiSelectDropdownComponent .me {
  min-height: 50px;
}

.MultiSelectListComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.MultiSelectListComponent .label-and-reset-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xxs);
}
.MultiSelectListComponent .label-and-reset-container .label-container {
  font-weight: 600;
  font-size: 14px;
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}
.MultiSelectListComponent .label-and-reset-container .reset-btn {
  font-weight: 500;
  font-size: 12px;
  line-height: var(--spacing-lg);
  opacity: 1;
  height: auto;
  color: var(--brand-400);
  cursor: pointer;
}
.MultiSelectListComponent .label-and-reset-container .reset-btn.hidden {
  opacity: 0;
  height: 0;
}
.MultiSelectListComponent .options-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.MultiSelectListComponent .options-container .option-container {
  color: var(--gray-900);
  transition: all 0.2s;
  user-select: none;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  width: fit-content;
}
.MultiSelectListComponent .options-container .option-container:has(input[type=checkbox]:not(:disabled)):hover {
  cursor: pointer;
}
.MultiSelectListComponent .options-container .option-container:has(input[type=checkbox]:not(:disabled)) .option-label {
  cursor: pointer;
}
.MultiSelectListComponent .options-container .option-container:has(input[type=checkbox]:not(:disabled)) span {
  cursor: pointer;
}
.MultiSelectListComponent .options-container .option-container.selected {
  color: var(--brand-400);
}
.MultiSelectListComponent .options-container .option-container span:hover {
  cursor: pointer;
}
.MultiSelectListComponent .options-container .option-container input[type=checkbox] {
  margin: var(--spacing-none);
  width: 20px;
  height: 20px;
}
.MultiSelectListComponent .options-container .option-container input[type=checkbox]:not(:disabled) {
  cursor: pointer;
}
.MultiSelectListComponent .options-container .option-container .option-label {
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: var(--spacing-xl);
  letter-spacing: -0.28px;
}
.MultiSelectListComponent .see-more-btn {
  font-weight: 500;
  font-size: 13px;
  line-height: var(--spacing-xl);
  color: var(--brand-400);
  cursor: pointer;
}
.MultiSelectListComponent.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.MultiSelectListComponent.disabled .label-and-reset-container .reset-btn {
  display: none;
}
.MultiSelectListComponent.felement_err {
  border: none !important;
}

@media screen and (max-width: 1024px) {
  .MultiSelectListComponent .options-container {
    position: relative;
  }
  .MultiSelectListComponent .options-container .option-container:hover {
    color: var(--gray-900);
  }
}
.MyAdCardComponent {
  padding: var(--spacing-none) !important;
  border: 1px solid var(--gray-400);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-none) !important;
}
.MyAdCardComponent .ad-card-main-section-wrapper {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg) var(--spacing-md);
  display: flex;
  flex-direction: row !important;
  gap: var(--spacing-lg);
  border-radius: 8px;
}
.MyAdCardComponent .ad-card-main-section-wrapper:has(+ .ad-card-bottom-section-wrapper) {
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
}
.MyAdCardComponent .ad-card-main-section-wrapper > img.post-thumbnail {
  width: 160px;
  height: 120px;
  border-radius: 6px;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section {
  width: 32px;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section .options-container {
  min-width: 170px;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section .options-container .option-wrapper.disabled-pin {
  color: var(--gray-400);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section .options-container .option-wrapper.disabled-pin svg path {
  stroke: var(--gray-400);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section .options-container .option-wrapper.disabled-pin svg:hover path {
  stroke: var(--gray-400);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section .options-container .option-wrapper.disabled-pin:hover {
  color: var(--gray-400);
  cursor: not-allowed;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section-container {
  display: flex;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section-container .pined-container {
  margin-right: var(--spacing-md);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .post-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .post-title > a.title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .price {
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.15px;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .ecom-label-wrapper {
  display: none;
}
@media screen and (max-width: 1024px) {
  .MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .ecom-label-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .ecom-label-wrapper.act {
    display: none;
  }
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .PostLabelContainerComponent {
  margin: var(--spacing-none);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .PostLabelContainerComponent .PostLabelComponent {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--line-height-alt-xs);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .category-breadcrumbs,
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .draft-expires-date {
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .draft-expires-date {
  color: var(--gray-800);
  padding-top: var(--spacing-sm);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .list-delivery {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .list-delivery > svg {
  width: 20px;
  height: 20px;
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .list-delivery.active > svg > path {
  fill: var(--delivery-400);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .post-stats-section {
  display: flex;
  gap: var(--spacing-lg);
  margin-top: auto;
  padding-top: var(--spacing-md);
}
.MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .post-stats-section .AdStatComponent {
  max-width: 100%;
}
.MyAdCardComponent .ad-card-main-section-wrapper.yellow {
  background-color: var(--info-100);
}
.MyAdCardComponent .ad-card-main-section-wrapper.blue {
  background-color: var(--brand-100);
}
.MyAdCardComponent .mobile-ad-card-info-section {
  display: none;
}
.MyAdCardComponent .ad-card-bottom-section-wrapper {
  margin: var(--spacing-none) var(--spacing-md) var(--spacing-md) var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--gray-400);
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section {
  display: flex;
  gap: var(--spacing-lg);
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  justify-content: space-between;
  flex: 1;
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info {
  display: flex;
  flex-direction: column;
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info.expired {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info .days-left {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info .days-left.red {
  color: var(--error-400);
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info .until-date {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-700);
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .actions-container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: var(--spacing-2xl);
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .actions-container .post-actions-container {
  display: flex;
  gap: var(--spacing-sm);
  flex: 1;
  max-width: max-content;
  margin-left: auto;
}

@media screen and (max-width: 1024px) {
  .MyAdCardComponent {
    margin: var(--spacing-none) var(--spacing-md);
  }
  .MyAdCardComponent .ad-card-main-section-wrapper {
    gap: var(--spacing-md);
    border-radius: 8px 8px 0 0;
  }
  .MyAdCardComponent .ad-card-main-section-wrapper > img.post-thumbnail {
    width: 80px;
    height: 64px;
  }
  .MyAdCardComponent .ad-card-main-section-wrapper .post-actions-section {
    width: 20px;
  }
  .MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .post-title > a.title {
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
  }
  .MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .PostLabelContainerComponent {
    display: none;
  }
  .MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .price-and-labels .price {
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: -0.26px;
  }
  .MyAdCardComponent .ad-card-main-section-wrapper .post-main-info-section .post-stats-section {
    display: none;
  }
  .MyAdCardComponent .ad-card-bottom-section-wrapper {
    display: none;
  }
  .MyAdCardComponent .mobile-ad-card-info-section {
    margin: var(--spacing-xs) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .promotion-section, .MyAdCardComponent .mobile-ad-card-info-section .management-section {
    display: flex;
    gap: var(--spacing-sm);
    flex: 1 1 0;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .promotion-section > div, .MyAdCardComponent .mobile-ad-card-info-section .management-section > div {
    flex: 1;
    max-width: calc(50% - 4px);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .promotion-section {
    flex-wrap: wrap;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .promotion-section > .AdActionComponent {
    flex: unset;
    width: calc(50% - 4px);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .category-breadcrumbs {
    color: var(--gray-600);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .post-services-wrapper {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .post-services-wrapper > svg {
    width: 24px;
    height: 24px;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .post-stats-section {
    display: flex;
    gap: var(--spacing-xl);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper {
    height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-alt-xs);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper > svg {
    width: 16px;
    height: 16px;
    color: var(--gray-900);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper .expire-days {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--gray-900);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper.isRed > svg path {
    stroke: var(--error-400);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper.isRed .expire-days {
    color: var(--error-400);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .PostLabelContainerComponent {
    margin: var(--spacing-none);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .PostLabelContainerComponent .PostLabelComponent {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .MyAdCardComponent:has(.yellow) .mobile-ad-card-info-section,
  .MyAdCardComponent:has(.blue) .mobile-ad-card-info-section {
    margin-top: var(--spacing-md);
  }
}
.NegotiatedPriceComponent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.offerAccepted .NegotiatedPriceComponent {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}
.NegotiatedPriceComponent > div {
  display: flex;
  width: fit-content;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  white-space: nowrap;
}
.NegotiatedPriceComponent > div > .oldPrice {
  overflow: hidden;
  color: var(--error-400);
  text-overflow: ellipsis;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-xs);
  text-decoration: line-through;
  white-space: nowrap;
}
.NegotiatedPriceComponent > div > .suggestedPrice {
  font-weight: 700;
  font-size: 16px;
  font-style: normal;
  color: var(--gray-900);
  line-height: var(--line-height-sm);
  white-space: nowrap;
}
.NegotiatedPriceComponent > .expiry {
  margin: var(--spacing-none);
  color: var(--gray-800);
  line-height: var(--line-height-sm);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .NegotiatedPriceComponent > .expiry {
    font-size: 12px;
    line-height: 16px;
    text-align: left;
  }
}
.titleWrapper .NegotiatedPriceComponent {
  display: none;
}
@media screen and (max-width: 1024px) {
  .titleWrapper .NegotiatedPriceComponent {
    display: block;
  }
  .postPriceWrapper .NegotiatedPriceComponent {
    display: none;
  }
}

.OrderAboutDeliveryComponent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-4xl);
}
.OrderAboutDeliveryComponent > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-2xl);
}
.OrderAboutDeliveryComponent > div > .steps {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xl);
}
.OrderAboutDeliveryComponent > div > .steps:last-of-type {
  margin-bottom: var(--spacing-md);
}
.OrderAboutDeliveryComponent > div > .steps > .img {
  width: 88px;
  height: 88px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.OrderAboutDeliveryComponent > div > .steps > .img.stepOneIcon {
  background-image: url(/img/redesign/icons/about-delivery-step-one.svg);
}
.OrderAboutDeliveryComponent > div > .steps > .img.stepTwoIcon {
  background-image: url(/img/redesign/icons/about-delivery-step-two.svg);
}
.OrderAboutDeliveryComponent > div > .steps > .img.stepThreeIcon {
  background-image: url(/img/redesign/icons/about-delivery-step-three.svg);
}
.OrderAboutDeliveryComponent > div > .steps > div:last-of-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.OrderAboutDeliveryComponent > div > .steps > div:last-of-type > p {
  margin: var(--spacing-none);
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.OrderAboutDeliveryComponent > div > .steps > div:last-of-type > p:first-of-type {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.3px;
}
.OrderAboutDeliveryComponent > .paymentSection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--spacing-xl);
  gap: var(--spacing-sm);
  align-self: stretch;
  border-radius: var(--radius-xl);
  background-color: var(--gray-300);
}
.OrderAboutDeliveryComponent > .paymentSection > p {
  margin: var(--spacing-none);
  color: var(--gray-900);
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.OrderAboutDeliveryComponent > .paymentSection > p:first-of-type {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.OrderAboutDeliveryComponent > .btnWrapper {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .OrderAboutDeliveryComponent > .btnWrapper {
    margin-bottom: var(--spacing-2xl);
  }
}

.OrderBuyBoxComponent {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  align-self: stretch;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-md);
  background-color: var(--delivery-100);
}
.OrderBuyBoxComponent .infoSection {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xs);
}
.OrderBuyBoxComponent .infoSection .card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: var(--line-height-md);
  letter-spacing: -0.34px;
}
.OrderBuyBoxComponent .infoSection .cashback {
  display: flex;
  gap: var(--spacing-alt-xs);
  align-items: center;
}
.OrderBuyBoxComponent .infoSection .cashback .cashback-title {
  font-size: 13px;
  font-weight: 500;
  line-height: var(--line-height-xs);
  letter-spacing: -0.26px;
  color: var(--gray-800);
}
.OrderBuyBoxComponent .btnSection .buy-button {
  padding: var(--spacing-alt-xs) var(--spacing-md);
  border-radius: 8px;
  background-color: var(--delivery-400);
  color: var(--gray-100);
  font-size: 14px;
  font-weight: 600;
  line-height: var(--line-height-xs);
  cursor: pointer;
}
.OrderBuyBoxComponent .btnSection .buy-button:hover {
  background-color: var(--delivery-300);
}
@media screen and (max-width: 1024px) {
  .OrderBuyBoxComponent {
    flex-direction: column;
  }
  .OrderBuyBoxComponent .btnSection .buy-button {
    width: fit-content;
  }
}

.OrderBuyButtonComponent {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  text-align: center;
  color: var(--gray-100);
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  cursor: pointer;
  background-color: var(--delivery-400);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  transition: background-color 0.2s linear;
}
.OrderBuyButtonComponent:visited {
  color: var(--gray-100);
}
.OrderBuyButtonComponent:hover {
  background-color: var(--delivery-300);
  color: var(--gray-100);
}
.OrderBuyButtonComponent > div {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  gap: var(--spacing-sm);
}
.OrderBuyButtonComponent > div > img {
  width: 24px;
  height: 24px;
}
.OrderBuyButtonComponent span {
  color: var(--gray-100);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-md);
  letter-spacing: -0.15px;
}
.OrderBuyButtonComponent.dbp {
  cursor: not-allowed;
}
.OrderBuyButtonComponent.delivery-buy-btn {
  justify-content: center;
  width: 100%;
}

.OrderBuyCardComponent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  align-self: stretch;
  gap: var(--spacing-2xl);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  background-color: var(--gray-300);
}
.OrderBuyCardComponent.dbp .OrderBuyButtonComponent {
  cursor: not-allowed;
}
.OrderBuyCardComponent .infoSection p,
.OrderBuyCardComponent .btnSection p {
  margin: var(--spacing-none);
}
.OrderBuyCardComponent .infoSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-sm);
}
.OrderBuyCardComponent .infoSection > p {
  color: var(--gray-900);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: -0.36px;
}
.OrderBuyCardComponent .infoSection .cashback {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
}
.OrderBuyCardComponent .infoSection .cashback p {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-md);
  letter-spacing: -0.14px;
}
.OrderBuyCardComponent .infoSection .cashback p span {
  color: var(--delivery-400);
}
.OrderBuyCardComponent .infoSection .cashback a {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--accent-secondary-header-background);
  font-size: 11px;
  font-weight: bold;
  padding: var(--spacing-none) !important;
  cursor: pointer;
}
.OrderBuyCardComponent .infoSection .post {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-lg);
}
.OrderBuyCardComponent .infoSection .post img {
  height: 44px;
  width: 58.67px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.OrderBuyCardComponent .infoSection .post span {
  color: var(--gray-900);
  line-height: var(--line-height-sm);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.OrderBuyCardComponent .btnSection {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--spacing-md);
}
.OrderBuyCardComponent .btnSection .priceNegotiationSection {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  height: 28px;
}
.OrderBuyCardComponent .btnSection .priceNegotiationSection > div {
  height: 100%;
  display: flex;
  align-items: center;
}
.OrderBuyCardComponent .btnSection .priceNegotiationSection span {
  color: var(--brand-400);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-lg);
  letter-spacing: -0.14px;
  cursor: pointer;
}
.OrderBuyCardComponent .btnSection .priceNegotiationSection span:hover {
  color: var(--brand-300);
}
.OrderBuyCardComponent .btnSection .priceNegotiationSection.hidden {
  display: none;
}
.OrderBuyCardComponent #uinfo .buyCardWrapper {
  margin-bottom: var(--spacing-lg);
}
@media screen and (max-width: 1024px) {
  .OrderBuyCardComponent {
    margin: var(--spacing-none) var(--spacing-md);
  }
  #uinfo .buyCardWrapper .OrderBuyCardComponent {
    margin: var(--spacing-none);
  }
}

.OrderBuySectionComponent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: var(--spacing-2xl);
}
.OrderBuySectionComponent > .ordersectlinks {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-alt-sm);
}
.OrderBuySectionComponent > .ordersectlinks > .buyInstructionsLink {
  color: var(--brand-400);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  cursor: pointer;
}
.OrderBuySectionComponent > .ordersectlinks > .buyInstructionsLink:hover {
  color: var(--brand-300);
}
.preview_box .r #orderbuyseccomp .OrderBuySectionComponent > .ordersectlinks {
  display: none;
}
.OrderBuySectionComponent .ordersectstars ul {
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none);
  list-style-type: none;
}
.OrderBuySectionComponent .ordersectstars ul li {
  margin-bottom: var(--spacing-alt-xs);
  color: var(--gray-800);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.OrderBuySectionComponent .ordersectstars ul li img {
  width: 8px;
  margin-right: var(--spacing-xs);
}
.OrderBuySectionComponent .ordersectstars ul li:last-child {
  margin-bottom: var(--spacing-none);
}
@media screen and (max-width: 1024px) {
  .OrderBuySectionComponent .ordersectlinks, .OrderBuySectionComponent .ordersectstars {
    margin-left: var(--spacing-md);
    margin-right: var(--spacing-md);
  }
}

.OrderCheckoutFormComponent {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-10xl);
}
.OrderCheckoutFormComponent > .cfw {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-6xl);
}
.OrderCheckoutFormComponent > .cfw > div {
  width: 100%;
}
.OrderCheckoutFormComponent > .orderSummarySection {
  width: 40%;
}
.OrderCheckoutFormComponent .notesSection p {
  margin-bottom: var(--spacing-sm);
}
.OrderCheckoutFormComponent .notesSection input:placeholder-shown {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.OrderCheckoutFormComponent .productSection,
.OrderCheckoutFormComponent .orderSummarySection,
.OrderCheckoutFormComponent .addressSection,
.OrderCheckoutFormComponent .scheduleSection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.OrderCheckoutFormComponent .productSection > div,
.OrderCheckoutFormComponent .orderSummarySection > div,
.OrderCheckoutFormComponent .addressSection > div,
.OrderCheckoutFormComponent .scheduleSection > div {
  width: 100%;
}
.OrderCheckoutFormComponent .orderSummarySection > h3 {
  display: none;
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  border: 1px solid var(--gray-400);
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions {
  width: 100%;
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions > p {
  margin-bottom: var(--spacing-sm);
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions > input {
  width: 100%;
  padding: var(--spacing-lg);
  gap: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--brand-400);
  transition: background-color 0.3s ease-out;
  color: var(--gray-100);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions > input:hover {
  background-color: var(--brand-300);
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions > input:disabled {
  background: var(--gray-400);
  color: var(--gray-500);
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions .tabs-restyle {
  width: 100%;
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions .tabs-restyle > div:first-child {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-xs);
  background: var(--gray-300);
  border-radius: var(--radius-md);
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions .tabs-restyle > div:first-child > div {
  opacity: 0.6;
  width: 50%;
  transition: background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions .tabs-restyle > div:first-child > div.s {
  box-shadow: 0 2px 6px 0 rgba(26, 29, 62, 0.1019607843);
  background: var(--gray-100);
  opacity: 1;
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions .tabs-restyle > div:first-child > div:has(img) {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: unset;
  display: flex;
  align-items: center;
  gap: var(--spacing-alt-sm);
  background: unset;
  opacity: 0.6;
  border: 1px solid transparent;
}
.OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions .tabs-restyle > div:first-child > div:has(img) img {
  height: 16px;
}
.OrderCheckoutFormComponent .addressSection > .add-new {
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--brand-100);
  gap: var(--spacing-sm);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  transition: background-color 0.2s linear;
  cursor: pointer;
}
.OrderCheckoutFormComponent .addressSection > .add-new:hover {
  background-color: var(--brand-200);
}
.OrderCheckoutFormComponent .addressSection > .add-new svg {
  width: 24px;
  height: 24px;
}
.OrderCheckoutFormComponent .scheduleSection.e .err {
  font-size: var(--font-size-xs);
  color: var(--error-500);
}
@media screen and (max-width: 1024px) {
  .OrderCheckoutFormComponent {
    flex-direction: column;
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md);
    gap: var(--spacing-6xl);
  }
  .OrderCheckoutFormComponent > .cfw, .OrderCheckoutFormComponent > .orderSummarySection {
    width: 100%;
  }
  .OrderCheckoutFormComponent .cfw {
    gap: var(--spacing-2xl);
  }
  .OrderCheckoutFormComponent .orderSummarySection > h3 {
    display: block;
  }
  .OrderCheckoutFormComponent .orderSummarySection .orderSummary > .payOptions > input {
    padding: var(--spacing-md);
    max-width: 100%;
  }
  .OrderCheckoutFormComponent textarea {
    height: unset;
  }
}

.OrderConfirmationCashbackSectionComponent {
  display: flex;
  width: 100%;
  padding: var(--spacing-md);
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: var(--spacing-md);
  border-radius: var(--radius-sm);
  background: var(--success-200);
}
.OrderConfirmationCashbackSectionComponent > span {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-md);
  letter-spacing: -0.14px;
}
.OrderConfirmationCashbackSectionComponent > span.cashbackAmount {
  white-space: nowrap;
}

.OrderConfirmationPayComponent {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  /* end radio*/
  /*end summary*/
}
.OrderConfirmationPayComponent h1, .OrderConfirmationPayComponent h2 {
  margin: var(--spacing-none);
  color: var(--gray-900);
  font-style: normal;
  font-weight: 700;
}
.OrderConfirmationPayComponent h1 {
  font-size: 26px;
  line-height: 36px;
  letter-spacing: -0.52px;
}
.OrderConfirmationPayComponent h2 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
}
.OrderConfirmationPayComponent .paymentMethod {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.OrderConfirmationPayComponent .paymentMethod .inforadio {
  display: flex;
  gap: var(--spacing-md);
}
.OrderConfirmationPayComponent .paymentMethod .inforadio label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) !important;
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  width: 33.33%;
  min-width: 30%;
  max-width: 33.33%;
  box-sizing: border-box;
}
.OrderConfirmationPayComponent .paymentMethod .inforadio label.selected {
  border-color: var(--gray-900);
  background: var(--gray-300);
}
.OrderConfirmationPayComponent .paymentMethod .inforadio label > input {
  display: none;
}
.OrderConfirmationPayComponent .paymentMethod .inforadio label > div:nth-child(2) {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.15px;
}
.OrderConfirmationPayComponent .paymentMethod .inforadio label > div:last-child {
  height: 64px;
}
.OrderConfirmationPayComponent .paymentMethod .inforadio label div {
  padding: var(--spacing-none) !important;
  margin: var(--spacing-none) !important;
}
.OrderConfirmationPayComponent .paymentMethod .inforadio label img {
  height: 100%;
}
@media screen and (max-width: 1024px) {
  .OrderConfirmationPayComponent .paymentMethod .inforadio label[for=idpay_method2] img {
    width: 56px;
  }
}
@media screen and (max-width: 1024px) {
  .OrderConfirmationPayComponent .paymentMethod .inforadio label {
    justify-content: space-around;
  }
}
@media screen and (max-width: 425px) {
  .OrderConfirmationPayComponent .paymentMethod .inforadio label {
    width: 100%;
    max-width: 100%;
    min-width: initial;
  }
}
@media screen and (max-width: 425px) {
  .OrderConfirmationPayComponent .paymentMethod .inforadio {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.OrderConfirmationPayComponent .summary, .OrderConfirmationPayComponent .summary table tbody {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.OrderConfirmationPayComponent .summary tr, .OrderConfirmationPayComponent .summary table tbody tr {
  display: flex;
  justify-content: space-between;
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.OrderConfirmationPayComponent .summary tr:last-child, .OrderConfirmationPayComponent .summary table tbody tr:last-child {
  font-weight: 700;
  border-top: 1px solid var(--gray-400);
  padding-top: var(--spacing-md);
}
.OrderConfirmationPayComponent .actions {
  display: flex;
  gap: var(--spacing-md);
}
.OrderConfirmationPayComponent .actions button, .OrderConfirmationPayComponent .actions input {
  height: 48px;
  padding: var(--spacing-md) 80px;
  border-radius: 12px;
  background: var(--gray-300);
  color: var(--accent-secondary-header-background);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.OrderConfirmationPayComponent .actions input {
  flex: 1;
  color: var(--gray-100);
  background: var(--delivery-400);
}
@media screen and (max-width: 1024px) {
  .OrderConfirmationPayComponent .actions {
    flex-wrap: wrap-reverse;
  }
  .OrderConfirmationPayComponent .actions button {
    width: 100%;
  }
}

.OrderNoteComponent {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.OrderNoteComponent > .noteList {
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
  overflow-wrap: anywhere;
}
.OrderNoteComponent > .noteList .notes {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-alt-xs);
}
.OrderNoteComponent > .noteList .notes > :first-child {
  white-space: nowrap;
}
.OrderNoteComponent > .noteList .notes p {
  overflow-wrap: anywhere;
}
.OrderNoteComponent > .sellerReplyWrapper {
  display: inline-block;
  overflow-wrap: anywhere;
  padding: var(--spacing-xxs) var(--spacing-none) var(--spacing-xxs) var(--spacing-5xl);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  color: var(--gray-900);
  text-decoration: underline;
}
.OrderNoteComponent > .sellerReplyWrapper:hover {
  color: var(--brand-400);
}
.dlpo .odl .inf .OrderNoteComponent, .dlso .odl .inf .OrderNoteComponent {
  display: none;
}
@media screen and (max-width: 1024px) {
  .dlpo > .OrderNoteComponent, .dlso > .OrderNoteComponent {
    display: flex;
  }
  .OrderNoteComponent {
    flex-wrap: wrap;
    gap: var(--spacing-lg);
  }
  .OrderNoteComponent .sellerReplyWrapper {
    background-position: 0 50%;
    padding-left: var(--spacing-none);
  }
}

.OrderPaymentMethodComponent {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-top: 1px solid var(--gray-400);
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-alt-xs);
}
.OrderPaymentMethodComponent > img {
  height: 20px;
}
.OrderPaymentMethodComponent .method {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-lg);
}
.OrderPaymentMethodComponent .method img {
  height: 22px;
}

.OrderProcessingComponent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4xl);
  margin-bottom: var(--spacing-lg);
}
.OrderProcessingComponent .loaderWrapper {
  height: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-8xl);
}
.OrderProcessingComponent .loaderWrapper .loader {
  width: 20px;
  height: 20px;
}
.OrderProcessingComponent .buyStatusLoadingNote {
  font-size: 20px;
  line-height: var(--line-height-2xl);
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--gray-900);
}

.OrderStatusTrackerComponent .statusStep {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  justify-content: space-between;
}
.OrderStatusTrackerComponent .statusStep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 17px;
  height: calc(100% - 1px);
  border-left: 1px dashed var(--gray-500);
}
.OrderStatusTrackerComponent .circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--gray-300);
  position: relative;
}
.OrderStatusTrackerComponent .circle > p {
  white-space: nowrap;
}
.OrderStatusTrackerComponent .circle::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--gray-400);
  top: calc(50% - 6px);
  left: calc(50% - 6px);
}
.OrderStatusTrackerComponent .circle.currentStatus > p {
  display: inline-block;
  position: absolute;
}
.OrderStatusTrackerComponent .circle.pending.currentStatus {
  background-color: var(--accent-malachite-light);
}
.OrderStatusTrackerComponent .circle.pending.currentStatus > p {
  color: var(--accent-malachite);
}
.OrderStatusTrackerComponent .circle.pending.currentStatus::after {
  background-color: var(--accent-malachite);
}
.OrderStatusTrackerComponent .circle.approved.currentStatus {
  background-color: var(--accent-electricBlue-light);
}
.OrderStatusTrackerComponent .circle.approved.currentStatus > p {
  color: var(--accent-electricBlue-dark);
}
.OrderStatusTrackerComponent .circle.approved.currentStatus::after {
  background-color: var(--accent-electricBlue-dark);
}
.OrderStatusTrackerComponent .circle.on-the-way.currentStatus {
  background-color: var(--accent-lime-light);
}
.OrderStatusTrackerComponent .circle.on-the-way.currentStatus > p {
  color: var(--accent-lime-dark);
}
.OrderStatusTrackerComponent .circle.on-the-way.currentStatus::after {
  background-color: var(--accent-lime-dark);
}
.OrderStatusTrackerComponent .circle.delivered.currentStatus {
  background-color: var(--accent-tropicalIndigo-light);
}
.OrderStatusTrackerComponent .circle.delivered.currentStatus > p {
  color: var(--accent-tropicalIndigo-dark);
}
.OrderStatusTrackerComponent .circle.delivered.currentStatus::after {
  background-color: var(--accent-tropicalIndigo-dark);
}
.OrderStatusTrackerComponent .circle.completed.currentStatus {
  background-color: var(--accent-argentinaBlue-light);
}
.OrderStatusTrackerComponent .circle.completed.currentStatus > p {
  color: var(--accent-argentinaBlue-dark);
}
.OrderStatusTrackerComponent .circle.completed.currentStatus::after {
  background-color: var(--accent-argentinaBlue-dark);
}
.OrderStatusTrackerComponent .circle.cancelled.currentStatus {
  background-color: var(--accent-aerospaceOrange-light);
}
.OrderStatusTrackerComponent .circle.cancelled.currentStatus > p {
  color: var(--accent-aerospaceOrange-dark);
}
.OrderStatusTrackerComponent .circle.cancelled.currentStatus::after {
  background-color: var(--accent-aerospaceOrange-dark);
}
.OrderStatusTrackerComponent .circle.rejected.currentStatus {
  background-color: var(--accent-electricRaspberry-light);
}
.OrderStatusTrackerComponent .circle.rejected.currentStatus > p {
  color: var(--accent-electricRaspberry-dark);
}
.OrderStatusTrackerComponent .circle.rejected.currentStatus::after {
  background-color: var(--accent-electricRaspberry-dark);
}
.OrderStatusTrackerComponent .completed-success {
  margin-top: var(--spacing-4xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
  z-index: 1;
}
.OrderStatusTrackerComponent .completed-success svg {
  height: 120px;
}

.OrderSummaryComponent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
}
.OrderSummaryComponent div {
  width: 100%;
}
.OrderSummaryComponent div > .summaryRow {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.OrderSummaryComponent div > .summaryRow.totalRow {
  border-top: 1px solid var(--gray-400);
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-alt-xs);
}
.OrderSummaryComponent div > .summaryRow:last-of-type {
  margin-bottom: var(--spacing-none);
}
.OrderSummaryComponent div > .summaryRow.cashback p {
  color: var(--accent-malachite-dark);
}
.OrderSummaryComponent div > .summaryRow.cashback p:last-of-type {
  white-space: nowrap;
}
@media screen and (max-width: 1024px) {
  .OrderSummaryComponent {
    gap: var(--spacing-md);
  }
  .OrderSummaryComponent h3 {
    display: none;
  }
}

.priceWrapper {
  margin: var(--spacing-none);
  position: relative;
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.priceWrapper .priceRow {
  padding: var(--spacing-none);
  margin: var(--spacing-none);
}

.priceWrapper .priceRow.summary {
  width: 250px;
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  border-radius: 8px;
  margin-top: var(--spacing-xs);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.priceWrapper .priceRow > div {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  margin: var(--spacing-md);
  display: flex;
  justify-content: space-between;
}

.priceWrapper .priceRow.summary.show {
  max-height: 500px;
  opacity: 1;
}

.order-summary-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.priceWrapper > span,
.order-summary-row > span {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.01em;
  text-align: left;
}

.priceWrapper .chevron {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-sm);
  display: inline-block;
  background-image: url(/img/redesign/icons/chevron-down-32.svg);
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease-out;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  transform: rotate(180deg);
}

.OrderWithdrawComponent {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm);
  gap: var(--spacing-6xl);
}
.OrderWithdrawComponent .requestBlock {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.OrderWithdrawComponent .requestBlock h1 {
  color: var(--gray-900);
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-5xl);
  letter-spacing: -0.52px;
}
.OrderWithdrawComponent .requestBlock .totalBlock {
  display: flex;
  padding: var(--spacing-xl);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--radius-md);
  background: var(--gray-300);
  color: var(--gray-900);
  text-align: center;
  font-style: normal;
  font-weight: 700;
}
.OrderWithdrawComponent .requestBlock .totalBlock span.t {
  font-size: 12px;
  line-height: var(--spacing-lg);
  letter-spacing: -0.24px;
}
.OrderWithdrawComponent .requestBlock .totalBlock span.p {
  font-size: 32px;
  line-height: var(--spacing-8xl);
  letter-spacing: -0.72px;
}
.OrderWithdrawComponent .summaryBlock {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.OrderWithdrawComponent .summaryBlock span.t {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}
.OrderWithdrawComponent .summaryBlock table tbody {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.OrderWithdrawComponent .summaryBlock table tbody tr {
  display: flex;
  justify-content: space-between;
}
.OrderWithdrawComponent .summaryBlock table tbody tr td {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  overflow-wrap: anywhere;
}
.OrderWithdrawComponent .summaryBlock table tbody tr td:last-child {
  white-space: nowrap;
  margin-left: var(--spacing-sm);
}
.OrderWithdrawComponent .methodsBlock {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
.OrderWithdrawComponent .methodsBlock .methodsHeader {
  display: flex;
  justify-content: space-between;
}
.OrderWithdrawComponent .methodsBlock .methodsHeader span.t {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}
.OrderWithdrawComponent .methodsBlock .methodsHeader a {
  color: var(--brand-400);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-xl, 20px);
  text-decoration-line: underline;
}
.OrderWithdrawComponent .methodsBlock .empty {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-400);
  text-align: center;
  color: var(--gray-600);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
}
.OrderWithdrawComponent .methodsBlock .methods {
  display: flex;
  padding: var(--spacing-lg);
  gap: var(--spacing-lg);
  border-radius: 12px;
  border: 1px solid var(--gray-400);
}
.OrderWithdrawComponent .methodsBlock .methods input[type=radio] {
  transform: translateY(1px);
  margin-right: var(--spacing-sm);
}
.OrderWithdrawComponent .methodsBlock .methods .rgroup {
  flex: 1;
}
.OrderWithdrawComponent .methodsBlock .methods .rgroup > span {
  margin-right: var(--spacing-none);
  flex: 1;
}
.OrderWithdrawComponent .methodsBlock .methods label span {
  display: flex;
  justify-content: space-between;
  margin: var(--spacing-none);
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  overflow-wrap: anywhere;
}
.OrderWithdrawComponent .methodsBlock .methods label span > span {
  white-space: nowrap;
  overflow-wrap: unset;
  margin-left: var(--spacing-md);
}
.OrderWithdrawComponent .actions {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.OrderWithdrawComponent .actions input {
  flex: 1;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-2xl);
  color: var(--gray-100);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  border-radius: var(--spacing-md);
  background: var(--brand-400);
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  .OrderWithdrawComponent {
    min-height: calc(100vh - 48px - var(--spacing-4xl));
  }
}

.OrderWithdrawFundsComponent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xl);
  box-sizing: border-box;
}
.OrderWithdrawFundsComponent > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-alt-xs);
  box-sizing: border-box;
}
.OrderWithdrawFundsComponent > a {
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--gray-500);
  background-color: var(--gray-400);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  cursor: pointer;
}
.OrderWithdrawFundsComponent > a.active {
  color: var(--gray-100);
  background-color: var(--brand-400);
}

.fundsPending {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.fundsPending p > a {
  color: var(--brand-400);
  transition: all 0.7s ease-out;
}
.fundsPending p > a:hover {
  text-decoration: underline;
}

.OrderWithdrawSuccessComponent {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.OrderWithdrawSuccessComponent .body {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.OrderWithdrawSuccessComponent .body img {
  width: 120px;
  height: 120px;
}
.OrderWithdrawSuccessComponent .body h1 {
  margin: var(--spacing-none);
  color: var(--gray-900);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-4xl, 32px);
  letter-spacing: -0.4px;
}
.OrderWithdrawSuccessComponent .body p {
  margin: var(--spacing-none);
  color: var(--gray-900);
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--spacing-2xl, 24px);
}

.OrganizedCellPhoneNumberFormElement {
  position: relative;
  display: inline-block;
  margin: var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
  vertical-align: top;
}

.OrganizedCellPhoneNumberFormElement input[type=submit], .pageicn input[type=button] {
  text-align: center;
  border-radius: 3px;
}

.OrganizedCellPhoneNumberFormElement input[type=text].code {
  font-size: 18px;
  margin: var(--spacing-none) var(--spacing-md) var(--spacing-none) var(--spacing-alt-sm);
  border-radius: 6px;
}

.OrganizedCellPhoneNumberFormElement select {
  position: relative;
  z-index: 1;
  height: 40px;
  margin-right: -1px;
  padding: var(--spacing-none) var(--spacing-2xl) var(--spacing-none) 9px;
  border-radius: 6px 0 0 6px;
  max-width: 148px;
}

/* compact version */
.OrganizedCellPhoneNumberFormElement.c select {
  border: none;
  background: url(/img/dd.png) no-repeat left 2px center;
  background-size: 8px 9px;
  padding: var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none) 0px;
  text-align: right;
  height: 44px;
  font-size: 16px;
  width: auto !important;
  min-width: unset;
}

.OrganizedCellPhoneNumberFormElement.c div .valid {
  margin-right: var(--spacing-md);
}

.OrganizedCellPhoneNumberFormElement.c select:has(option:only-child) {
  pointer-events: none;
  background: none;
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-md);
}

.OrganizedCellPhoneNumberFormElement.c input {
  padding-left: var(--spacing-none) !important;
}

.OrganizedCellPhoneNumberFormElement div {
  position: relative;
  display: inline-block;
}

.OrganizedCellPhoneNumberFormElement select:focus {
  z-index: 11;
}

.OrganizedCellPhoneNumberFormElement input[type=text], .OrganizedCellPhoneNumberFormElement input[type=tel] {
  font-size: 16px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 200px;
  height: 40px;
  border-radius: 0 6px 6px 0;
}

.OrganizedCellPhoneNumberFormElement input[type=tel]:first-child {
  border-radius: 6px;
}

.OrganizedCellPhoneNumberFormElement input:focus {
  z-index: 2;
}

.OrganizedCellPhoneNumberFormElement .prefix {
  font-size: 16px;
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-left: var(--spacing-alt-sm);
}

.OrganizedCellPhoneNumberFormElement .i {
  color: var(--gray-600);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}

@media screen and (max-width: 1024px) {
  .OrganizedCellPhoneNumberFormElement {
    margin: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
    text-align: center;
  }
  .OrganizedCellPhoneNumberFormElement.c {
    margin: var(--spacing-none);
  }
  .OrganizedCellPhoneNumberFormElement select {
    width: 122px;
  }
  .OrganizedCellPhoneNumberFormElement .c input[type=button], .OrganizedCellPhoneNumberFormElement .c button, .pageicn .c input[type=button] {
    font-size: 16px;
    display: block;
    margin: var(--spacing-none) auto;
  }
  .OrganizedCellPhoneNumberFormElement .i {
    margin: var(--spacing-xl) var(--spacing-none);
  }
  .OrganizedCellPhoneNumberFormElement input[type=text].code {
    font-size: 18px;
    display: block;
    margin: var(--spacing-xl) auto;
  }
}
:root {
  --pnm-font-size: 16px;
  --pnm-map-height: 400px;
  --pnm-tabs-ml-neg: calc(-1 * var(--spacing-sm));
  --pnm-scroll-btn-font: 24px;
}

body.poi-fullscreen:has(.PlacesNearbyMapComponent) {
  height: 100vw;
  overflow: hidden;
  padding-top: 0 !important;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #ph, body.poi-fullscreen:has(.PlacesNearbyMapComponent) #pfooter {
  display: none;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main {
  position: relative;
  margin: 0 !important;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent {
  position: absolute;
  z-index: 10;
  width: 100vw;
  left: 0;
  height: 100dvh;
  top: 0;
  margin: 0;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap {
  width: 100vw;
  height: 100dvh;
  border-radius: unset;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .fullscreen-btn, body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .zoom-btn, body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .reset-btn {
  width: 44px;
  height: 44px;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .zoom-btn {
  line-height: 44px;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .fullscreen-btn {
  background-image: url(/img/redesign/icons/poi/close-fullscreen.svg);
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .fullscreen-btn:hover {
  background-image: url(/img/redesign/icons/poi/hover/close-fullscreen.svg);
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .fullscreen-btn:active {
  background-image: url(/img/redesign/icons/poi/active/close-fullscreen.svg);
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .fullscreen-btn, body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .zoom-wrapper, body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .reset-btn {
  border-radius: 12px;
  background-position: center;
  background-size: cover;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap .zoom-wrapper {
  height: 88px;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent .tabs-container {
  position: absolute;
  z-index: 10;
  margin: var(spacing-2xl);
  display: flex;
  width: auto;
  border-radius: 50px;
  overflow: visible;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent .tabs-container .SingleSelectBubbleComponent {
  padding: var(--spacing-2xl);
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent .tabs-container .option-container {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent .tabs-container .label-and-reset-container {
  display: none;
}
body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main > *:not(.pmain) {
  display: none;
}

.PlacesNearbyMapComponent {
  font-size: var(--pnm-font-size);
  line-height: var(--line-height-lg);
  color: var(--gray-900);
  margin: var(--spacing-md) var(--spacing-none);
  word-wrap: break-word;
}
.PlacesNearbyMapComponent .reset-btn, .PlacesNearbyMapComponent .fullscreen-btn {
  background: url(/img/redesign/icons/poi/navigation.svg);
  display: flex;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-position: center;
  background-size: cover;
  user-select: none;
}
.PlacesNearbyMapComponent .reset-btn:hover {
  background-image: url(/img/redesign/icons/poi/hover/navigation.svg);
}
.PlacesNearbyMapComponent .reset-btn:active {
  background-image: url(/img/redesign/icons/poi/active/navigation.svg);
}
.PlacesNearbyMapComponent .fullscreen-btn {
  background-image: url(/img/redesign/icons/poi/fullscreen.svg);
}
.PlacesNearbyMapComponent .fullscreen-btn:hover {
  background-image: url(/img/redesign/icons/poi/hover/fullscreen.svg);
}
.PlacesNearbyMapComponent .fullscreen-btn:active {
  background-image: url(/img/redesign/icons/poi/active/fullscreen.svg);
}
.PlacesNearbyMapComponent .zoom-wrapper {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  user-select: none;
  height: 64px;
}
.PlacesNearbyMapComponent .zoom-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 300;
  color: #000;
  cursor: pointer;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: url(/img/redesign/icons/poi/zoom-in.svg);
  background-position: center;
  background-size: cover;
  user-select: none;
}
.PlacesNearbyMapComponent .zoom-btn:hover {
  background-image: url(/img/redesign/icons/poi/hover/zoom-in.svg);
}
.PlacesNearbyMapComponent .zoom-btn:active {
  background-image: url(/img/redesign/icons/poi/active/zoom-in.svg);
}
.PlacesNearbyMapComponent .zoom-btn.zoom-out {
  background-image: url(/img/redesign/icons/poi/zoom-out.svg);
}
.PlacesNearbyMapComponent .zoom-btn.zoom-out:hover {
  background-image: url(/img/redesign/icons/poi/hover/zoom-out.svg);
}
.PlacesNearbyMapComponent .zoom-btn.zoom-out:active {
  background-image: url(/img/redesign/icons/poi/active/zoom-out.svg);
}
.PlacesNearbyMapComponent .zoom-btn.reset-btn {
  background-image: url(/img/redesign/icons/poi/zoom-out.svg);
}
.PlacesNearbyMapComponent .zoom-btn.reset-btn:hover {
  background-image: url(/img/redesign/icons/poi/hover/zoom-out.svg);
}
.PlacesNearbyMapComponent .zoom-btn.reset-btn:active {
  background-image: url(/img/redesign/icons/poi/active/zoom-out.svg);
}
.PlacesNearbyMapComponent #poiMap {
  height: var(--pnm-map-height);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.PlacesNearbyMapComponent #poiMap ymaps[class$=panel-pane], .PlacesNearbyMapComponent #poiMap ymaps[class$=copyrights-promo], .PlacesNearbyMapComponent #poiMap ymaps[class$=balloon-pane]:not(:has(.custom-balloon)) {
  display: none !important;
}
.PlacesNearbyMapComponent #poiMap .custom-balloon {
  position: relative;
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: 0 1.495px 3.985px 0 rgba(0, 0, 0, 0.3);
  width: max-content;
  max-width: 300px;
  transform: translate(-50%, calc(-100% - 20px));
}
.PlacesNearbyMapComponent #poiMap .custom-balloon__content {
  padding: var(--spacing-alt-sm);
  position: relative;
  z-index: 2;
  background: white;
  border-radius: var(--radius-sm);
}
.PlacesNearbyMapComponent #poiMap .custom-balloon__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
}
.PlacesNearbyMapComponent #poiMap .custom-balloon__header .custom-balloon__title {
  font-size: var(--font-size-xxs);
  color: var(--grey-900);
  width: max-content;
  margin-right: var(--spacing-alt-md);
}
.PlacesNearbyMapComponent #poiMap .custom-balloon__header .custom-balloon__close {
  cursor: pointer;
  background-image: url(/img/redesign/icons/close-gray.svg);
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 4px;
  top: 4px;
}
.PlacesNearbyMapComponent #poiMap .custom-balloon__body p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: #555;
}
.PlacesNearbyMapComponent #poiMap .custom-balloon__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  background: white;
  box-shadow: 0 1.495px 3.985px 0 rgba(0, 0, 0, 0.3);
  z-index: 0;
}
.PlacesNearbyMapComponent .tabs-container {
  display: flex;
  align-items: center;
  position: relative;
  width: calc(100% + var(--spacing-lg));
  margin-bottom: var(--spacing-lg);
  box-sizing: border-box;
  overflow: hidden;
}
.PlacesNearbyMapComponent .tabs-container .scroll-btn {
  width: var(--spacing-6xl);
  height: var(--spacing-6xl);
  padding: var(--spacing-xl);
  background-color: var(--gray-300);
  border: var(--spacing-sm) solid var(--gray-100);
  border-radius: var(--radius-4xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  font-size: var(--pnm-scroll-btn-font);
}
.PlacesNearbyMapComponent .tabs-container .scroll-btn:hover {
  background-color: var(--tab-bg-hover);
  color: var(--gray-900);
}
.PlacesNearbyMapComponent .tabs-container .scroll-btn.hidden {
  visibility: hidden;
  pointer-events: none;
}
.PlacesNearbyMapComponent .tabs-container .scroll-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.PlacesNearbyMapComponent .tabs-container .tabs-wrapper {
  flex: 1;
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
}
.PlacesNearbyMapComponent .tabs-container .tabs-wrapper::-webkit-scrollbar {
  display: none;
}
.PlacesNearbyMapComponent .tabs-container .tabs-wrapper > *:first-child {
  margin-left: 0;
}
.PlacesNearbyMapComponent .tabs-container .tabs-wrapper > *:last-child {
  margin-right: 0;
}
.PlacesNearbyMapComponent .tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-alt-sm);
  height: var(--spacing-6xl);
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  font-size: 14px;
  line-height: 1;
  border-radius: var(--spacing-10xl);
  background-color: var(--tab-bg-default);
  color: var(--tab-text-default);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  flex: 0 0 auto;
}
.PlacesNearbyMapComponent .tab:hover, .PlacesNearbyMapComponent .tab:focus {
  background-color: var(--tab-bg-hover);
  color: var(--gray-900);
  outline: none;
}
.PlacesNearbyMapComponent .tab.active {
  background-color: var(--brand-100);
  color: var(--brand-400);
}
.PlacesNearbyMapComponent .tab.active:hover {
  background-color: var(--brand-200);
  color: var(--brand-400);
}

@media screen and (max-width: 1024px), screen and (max-width: 1024px) and (orientation: portrait) {
  .PlacesNearbyMapComponent {
    margin: var(--spacing-sm) var(--spacing-md);
  }
  .PlacesNearbyMapComponent .tabs-container {
    width: 100%;
  }
  .PlacesNearbyMapComponent .tabs-container .SingleSelectBubbleComponent {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .PlacesNearbyMapComponent .tabs-container .SingleSelectBubbleComponent .options-container {
    flex-wrap: nowrap;
  }
  .PlacesNearbyMapComponent .tabs-container .SingleSelectBubbleComponent .options-container .option-container {
    white-space: nowrap;
  }
  html:has(body.poi-fullscreen .PlacesNearbyMapComponent) {
    min-height: unset;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) {
    height: 100dvh;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
    min-height: unset;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) #ph, body.poi-fullscreen:has(.PlacesNearbyMapComponent) #pfooter {
    display: none;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) .pmain .vi > *:not(.poi-container):not(.vit) {
    display: none !important;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) .pmain #pmenu {
    display: none;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent {
    overflow: hidden;
    z-index: 110;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent #poiMap {
    height: 100dvh;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent .tabs-container {
    bottom: 0;
    margin: 0;
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent .tabs-container .options-container .option-container:last-child {
    margin-right: var(--spacing-lg);
  }
  body.poi-fullscreen:has(.PlacesNearbyMapComponent) #main .PlacesNearbyMapComponent .tabs-container .SingleSelectBubbleComponent {
    overflow-x: scroll;
    padding: var(--spacing-lg);
    width: calc(100vw - 2 * var(--spacing-lg));
  }
}
.PostActionModal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  flex: 1;
}
.PostActionModal .info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
}
.PostActionModal .info-section .title-section {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}
.PostActionModal .info-section .title-section > img {
  width: 24px;
  height: 24px;
}
.PostActionModal .info-section .title-section .action-info-wrapper {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.4px;
  padding-right: var(--spacing-xl);
  overflow-wrap: anywhere;
}
.PostActionModal .info-section .more-info-section-wrapper {
  color: var(--gray-800);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
}
.PostActionModal .info-section .more-info-section-wrapper a {
  margin-left: var(--spacing-alt-xs);
  vertical-align: middle;
}
.PostActionModal .rgroup {
  display: flex;
  flex-direction: column;
}
.PostActionModal .rgroup label {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
}
.PostActionModal div.felement0 {
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-alt-sm);
  padding: var(--spacing-none);
}
.PostActionModal .activate-section form input {
  width: 100%;
}
.PostActionModal .main-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PostActionModal .main-section .republish-phone-requirement {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PostActionModal .main-section .republish-phone-requirement .f14 {
  display: flex;
  flex-direction: column;
}
.PostActionModal .main-section .republish-phone-requirement .verify-phones {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.PostActionModal .main-section .pay .btn {
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}
.PostActionModal .main-section .pay .btn a.bblink {
  padding: var(--spacing-md);
  background-color: var(--brand-400);
}
.PostActionModal .main-section .pay .btn a.bblink:hover {
  background-color: var(--brand-300);
}
.PostActionModal .main-section .pay .btn a.bblink.not-enough-funds {
  display: none;
}
.PostActionModal .main-section .wallet-section, .PostActionModal .main-section .bundle-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PostActionModal .main-section .bundle-section .no-active-bundles-wrapper {
  padding: var(--spacing-lg);
  border-radius: 12px;
  background-color: var(--brand-100);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.28px;
}
.PostActionModal .main-section .bundle-section .no-active-bundles-wrapper > a {
  color: var(--brand-400);
  margin-left: var(--spacing-xs);
}
.PostActionModal .main-section .bundle-section .no-active-bundles-wrapper {
  padding: var(--spacing-xl) var(--spacing-none) var(--spacing-none);
  background: none;
  line-height: 20px;
  display: flex;
  gap: var(--spacing-xs);
  flex-direction: column;
  border-top: 1px solid var(--gray-400);
  border-radius: 0;
}
.PostActionModal .main-section .bundle-section .no-active-bundles-wrapper > a {
  color: var(--brand-400);
  margin-left: var(--spacing-none);
}
.PostActionModal .main-section .bundle-section .price-info-wrapper .purchase-bundle-wrapper {
  border-top: 1px solid var(--gray-400);
  padding-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
}
.PostActionModal .main-section .bundle-section .price-info-wrapper .purchase-bundle-wrapper .purchase-bundle-link {
  color: var(--brand-400);
}
.PostActionModal .main-section .wallet-balance-low-wrapper,
.PostActionModal .main-section .republish-unavailable-wrapper {
  padding: var(--spacing-lg);
  border-radius: 12px;
  background-color: var(--accent-error);
  color: var(--error-400);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.28px;
}
.PostActionModal .main-section .wallet-balance-low-wrapper {
  padding: var(--spacing-none);
  background: none;
  line-height: 20px;
}
.PostActionModal .main-section .wallet-balance-low-wrapper.hidden {
  display: none !important;
}
.PostActionModal .main-section .pay .wallet-balance-low-wrapper {
  text-align: left;
}
.PostActionModal .main-section .price-info-wrapper {
  padding: var(--spacing-xl);
  border: 1px solid var(--gray-400);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.PostActionModal .main-section .price-info-wrapper .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.PostActionModal .main-section .price-info-wrapper .info-item .item-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}
.PostActionModal .main-section .price-info-wrapper .info-item .item-value {
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.15px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.PostActionModal .main-section .price-info-wrapper .info-item .item-value .red-highlight {
  color: var(--error-400);
}
.PostActionModal .main-section .price-info-wrapper .info-item .item-value .gray-highlight {
  color: var(--gray-600);
}
.PostActionModal .main-section .price-info-wrapper .info-item .item-value .item-desc {
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}
.PostActionModal .main-section .InlineTabComponent.tabs-restyle {
  display: flex;
  flex-direction: column;
}
.PostActionModal .main-section .InlineTabComponent.tabs-restyle:has(+ .republish-form-wrapper.hidden) {
  flex: 1;
}
.PostActionModal .main-section .InlineTabComponent.tabs-restyle > div:nth-child(2), .PostActionModal .main-section .InlineTabComponent.tabs-restyle .AddFundsComponent {
  flex: 1;
  padding-top: var(--spacing-md);
}
.PostActionModal .main-section .AddFundsComponent .InlineTabComponent {
  flex: 1;
}
.PostActionModal .main-section .AddFundsComponent .InlineTabComponent > div:nth-child(2) > div > * {
  display: flex;
  flex-direction: column;
}
.PostActionModal .main-section .AddFundsComponent .InlineTabComponent > div:nth-child(2) > div > * > .buttons {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.PostActionModal .main-section .republish-form-wrapper {
  flex: 1;
}
.PostActionModal .main-section .republish-form-wrapper .error {
  padding-bottom: var(--spacing-none);
}
.PostActionModal .main-section .republish-form-wrapper > form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  height: 100%;
}
.PostActionModal .main-section .republish-form-wrapper > form > .renewattr {
  padding: var(--spacing-none);
  text-align: left;
}
.PostActionModal .main-section .republish-form-wrapper > form > .renewattr > *:first-child {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
}
.PostActionModal .main-section .republish-form-wrapper > form > .renewattr > div:not(:first-child) {
  margin-top: var(--spacing-sm);
}
.PostActionModal .main-section .republish-form-wrapper > form > .renewattr div.flabel0 {
  margin-left: var(--spacing-alt-sm);
  user-select: none;
  display: flex;
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
}
.PostActionModal .main-section .republish-form-wrapper > form > .renewattr div.flabel0, .PostActionModal .main-section .republish-form-wrapper > form > .renewattr div.flabel0 * {
  cursor: pointer;
}
.PostActionModal .main-section .republish-form-wrapper > form > .renewattr div.flabel0.open > svg {
  transform: rotateX(180deg);
}
.PostActionModal .main-section .republish-form-wrapper > form .renewattr.hdn {
  display: none;
}
.PostActionModal .main-section .republish-form-wrapper > form .renewattr.del-conf {
  display: flex;
  flex-direction: column;
}
.PostActionModal .main-section .republish-form-wrapper > form .renewattr .cargomovers {
  display: none;
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > input {
  padding: var(--spacing-md) var(--spacing-2xl);
  width: 100%;
  border-radius: 12px;
  background-color: var(--brand-400);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > input:hover {
  background-color: var(--brand-300);
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > input:disabled {
  pointer-events: none;
  background-color: var(--gray-400);
  color: var(--gray-500);
}
.PostActionModal .main-section .republish-form-wrapper.hidden:not(:has(.missing-fields)) {
  display: none;
}
.PostActionModal .main-section .republish-form-wrapper.hidden > form > *:not(.missing-fields) {
  display: none;
}
.PostActionModal .main-section .republish-form-wrapper.disabled > .republish-submit-btn-wrapper {
  pointer-events: none;
}
.PostActionModal .main-section .republish-form-wrapper.disabled > form > .republish-submit-btn-wrapper > input {
  background-color: var(--gray-400);
  color: var(--gray-500);
}
.PostActionModal .main-section .republish-form-wrapper .republish-success-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.PostActionModal .main-section .republish-form-wrapper .republish-success-wrapper .republish-success-illustration-wrapper {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  align-items: center;
}
.PostActionModal .main-section .republish-form-wrapper .republish-success-wrapper .republish-success-illustration-wrapper > img {
  margin-top: -28px;
}
.PostActionModal .main-section .republish-form-wrapper .republish-success-wrapper .republish-success-illustration-wrapper > .success-msg {
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
}
.PostActionModal .main-section .republish-form-wrapper .republish-success-wrapper a.bblink {
  margin-top: auto;
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .ComboSelectorComponent,
.PostActionModal .main-section .republish-form-wrapper .renewattr .ComboSelectorComponent > .me,
.PostActionModal .main-section .republish-form-wrapper .renewattr .ComboSelectorComponent > .l {
  width: 100%;
  max-width: 400px;
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .price-container .ComboSelectorComponent {
  width: 100%;
  max-width: 198px;
  margin-bottom: var(--spacing-xxs);
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .price-container input[name=price] {
  width: 100%;
  max-width: 198px;
  margin-right: var(--spacing-xxs);
  margin-bottom: var(--spacing-xxs);
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .description-container .frow {
  display: block;
  padding-bottom: var(--spacing-none);
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .description-container .frow > .l {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .description-container .frow > .e {
  margin-left: var(--spacing-none);
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .description-container .fsec {
  padding-bottom: var(--spacing-none);
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .description-container .frow.top {
  align-items: flex-start;
}
.PostActionModal .main-section .republish-form-wrapper .renewattr .description-container .fsec {
  padding-top: var(--spacing-none);
}
.PostActionModal .main-section > .wallet-section {
  flex: 1;
}
.PostActionModal .main-section > .wallet-section .AddFundsComponent {
  flex: 1;
}
.PostActionModal .main-section > .wallet-section .AddFundsComponent .InlineTabComponent {
  flex: 1;
}
.PostActionModal .main-section > .wallet-section .AddFundsComponent .InlineTabComponent > div:nth-child(2) > div > * {
  display: flex;
  flex-direction: column;
}
.PostActionModal .main-section > .wallet-section .AddFundsComponent .InlineTabComponent > div:nth-child(2) > div > * > .buttons {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.PostActionModal .main-section .tier {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-radius: 10px;
  background-color: var(--gray-100);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.0588235294);
}
.PostActionModal .main-section .tier .day-selection {
  padding: var(--spacing-sm) var(--spacing-xl);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.PostActionModal .main-section .tier .day-selection > div, .PostActionModal .main-section .tier .day-selection label {
  cursor: pointer;
}
.PostActionModal .main-section .tier .day-selection label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.PostActionModal .main-section .tier .day-selection.selected {
  background-color: var(--gray-900);
  color: var(--gray-100);
}
.PostActionModal .main-section .info-table {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PostActionModal .main-section .info-table .valid-for-section > div {
  padding: var(--spacing-xl);
  border-radius: 12px;
  background-color: var(--gray-300);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.PostActionModal .main-section .info-table .valid-for-section > div > div:first-child {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
}
.PostActionModal .main-section .info-table .payment-info-section {
  padding: var(--spacing-xl);
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.PostActionModal .main-section .info-table .payment-info-section > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.PostActionModal .main-section .info-table .payment-info-section > div > div {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.15px;
}
.PostActionModal .main-section .info-table .payment-info-section > div > div:nth-child(2) {
  font-weight: 700;
}
.PostActionModal .main-section .info-table .payment-info-section .wallet-value-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.PostActionModal .main-section .applied-service-info {
  padding: var(--spacing-xl);
  background-color: var(--gray-300);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
.PostActionModal .main-section .applied-service-info .applied-service-info-row {
  display: flex;
  justify-content: space-between;
}
.PostActionModal .main-section .applied-service-info .applied-service-info-row .row-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.15%;
}
.PostActionModal .main-section .applied-service-info .applied-service-info-row .row-value {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.3%;
  color: var(--gray-800);
}
.PostActionModal .button-container {
  bottom: 0;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.PostActionModal .bblink {
  display: flex;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-2xl);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--spacing-md);
  background: var(--brand-400);
  font-weight: 500;
  font-size: var(--font-size-md);
  line-height: var(--spacing-2xl);
  max-width: unset;
}
.PostActionModal .bblink:hover {
  background: var(--brand-300);
}
.PostActionModal .payment-error-wrapper {
  display: flex;
  flex-direction: column;
  gap: 54px;
  align-items: center;
}
.PostActionModal .payment-error-wrapper > svg {
  width: 250px;
  height: 155px;
}
.PostActionModal .payment-error-wrapper .error-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
}
.PostActionModal .pick-your-wrapper,
.PostActionModal .needs-login-wrapper,
.PostActionModal .email-debounced-warning-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PostActionModal .pick-your-wrapper .pick-your-ad-text,
.PostActionModal .pick-your-wrapper .login-required-text,
.PostActionModal .pick-your-wrapper .email-debounce-text,
.PostActionModal .needs-login-wrapper .pick-your-ad-text,
.PostActionModal .needs-login-wrapper .login-required-text,
.PostActionModal .needs-login-wrapper .email-debounce-text,
.PostActionModal .email-debounced-warning-wrapper .pick-your-ad-text,
.PostActionModal .email-debounced-warning-wrapper .login-required-text,
.PostActionModal .email-debounced-warning-wrapper .email-debounce-text {
  background-color: var(--brand-100);
  padding: var(--spacing-lg);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.PostActionModal .pick-your-wrapper a.my-ads-button,
.PostActionModal .pick-your-wrapper a.login-btn,
.PostActionModal .pick-your-wrapper a.change-email-button,
.PostActionModal .needs-login-wrapper a.my-ads-button,
.PostActionModal .needs-login-wrapper a.login-btn,
.PostActionModal .needs-login-wrapper a.change-email-button,
.PostActionModal .email-debounced-warning-wrapper a.my-ads-button,
.PostActionModal .email-debounced-warning-wrapper a.login-btn,
.PostActionModal .email-debounced-warning-wrapper a.change-email-button {
  background-color: var(--brand-400);
  color: var(--gray-100);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;
  align-items: center;
  justify-content: center;
  display: flex;
}
.PostActionModal .pick-your-wrapper a.my-ads-button:hover,
.PostActionModal .pick-your-wrapper a.login-btn:hover,
.PostActionModal .pick-your-wrapper a.change-email-button:hover,
.PostActionModal .needs-login-wrapper a.my-ads-button:hover,
.PostActionModal .needs-login-wrapper a.login-btn:hover,
.PostActionModal .needs-login-wrapper a.change-email-button:hover,
.PostActionModal .email-debounced-warning-wrapper a.my-ads-button:hover,
.PostActionModal .email-debounced-warning-wrapper a.login-btn:hover,
.PostActionModal .email-debounced-warning-wrapper a.change-email-button:hover {
  background-color: var(--brand-300);
}

.ui-dialog:has(.PostActionModal) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-none);
  z-index: 105;
}

.ui-dialog:has(.PostActionModal .payment-error-wrapper) .ui-dialog-titlebar {
  height: var(--spacing-8xl);
}

#dialog:has(.PostActionModal) {
  margin-top: var(--spacing-2xl);
}

#dialog:has(.PostActionModal .info-section.error) {
  min-height: unset !important;
  padding-bottom: var(--spacing-sm);
}

.PostActionModal:has(.main-section.extend .already-extended-wrapper) .info-section.republish {
  display: none;
}

.PostActionModal:has(.main-section.extend .already-extended-wrapper) .main-section.extend {
  gap: var(--spacing-4xl);
}

.already-extended-wrapper .HeadingComponent {
  letter-spacing: -0.4px;
  margin-bottom: var(--spacing-sm);
}

.already-extended-wrapper .TextComponent {
  letter-spacing: -0.28px;
}

@media screen and (max-width: 1024px) {
  .PostActionModal .info-section {
    flex: none;
  }
  .PostActionModal .main-section .info-table .valid-for-section > div {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  .PostActionModal .rgroup {
    gap: var(--spacing-none);
  }
  #dialog:has(.PostActionModal) {
    margin-top: var(--spacing-lg);
  }
  .PostActionModal > div:nth-child(2) > .InlineTabComponent.pmTabs.tabs-restyle > div:nth-child(2) > div:nth-child(2) {
    width: 0;
  }
}
.activate-post-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.activate-post-form-wrapper .activate-post-modal-title-wrapper {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding-right: 40px;
}
.activate-post-form-wrapper .activate-post-modal-title-wrapper > svg {
  width: 24px;
  height: 24px;
}
.activate-post-form-wrapper .activate-post-modal-title-wrapper .activate-post-modal-title {
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
  word-break: break-word;
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper {
  display: flex;
  flex-direction: column;
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .activate-info {
  margin-bottom: var(--spacing-4xl);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--gray-800);
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .post-info-preview-wrapper {
  background-color: var(--gray-300);
  border-radius: 8px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  display: flex;
  gap: var(--spacing-lg);
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .post-info-preview-wrapper > img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .post-info-preview-wrapper > .post-title-and-price {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .post-info-preview-wrapper > .post-title-and-price .post-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .post-info-preview-wrapper > .post-title-and-price .post-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .form-action-btns {
  display: flex;
  gap: var(--spacing-2xl);
}
.activate-post-form-wrapper .activate-post-modal-body-wrapper .form-action-btns > input {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}

.ui-dialog:has(.activate-post-form-wrapper) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-none);
  z-index: 105;
}

#dialog:has(.activate-post-form-wrapper) {
  margin-top: var(--spacing-2xl);
}

@media screen and (max-width: 1024px) {
  #dialog:has(.activate-post-form-wrapper) {
    margin-top: var(--spacing-lg);
  }
}
.PostBuyWithDeliveryLabelComponent {
  margin: var(--spacing-none);
  background-color: var(--delivery-400);
  padding: var(--spacing-alt-xs) var(--spacing-sm) var(--spacing-alt-xs) var(--spacing-alt-xs);
  border-radius: var(--radius-sm);
  width: fit-content;
  max-width: 95%;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);
}

.PostBuyWithDeliveryLabelComponent > img {
  width: 16px !important;
  height: 16px !important;
  min-width: initial !important;
}

@media screen and (max-width: 1024px) {
  .dl > a .PostBuyWithDeliveryLabelComponent {
    margin-left: var(--spacing-none);
  }
}
@media screen and (max-width: 425px) {
  .dl .dltitle {
    flex-direction: column;
  }
}
#PostCallModal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

#PostCallModal .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
  color: var(--gray-900);
}

#PostCallModal > .c {
  min-width: 280px;
  margin: var(--spacing-none);
  text-align: center;
}

#PostCallModal > .cf {
  display: none;
  margin-bottom: 30px;
  padding: var(--spacing-md) var(--spacing-none);
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
}

#PostCallModal > .cf .t {
  font-size: 18px;
  color: var(--gray-700);
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
}

#PostCallModal > .cf .i {
  font-size: 22px;
  color: var(--success-500);
  margin: var(--spacing-alt-sm) var(--spacing-none);
}

#PostCallModal > .cf > div a {
  font-size: 15px;
  color: var(--brand-500);
  display: block;
  padding: var(--spacing-alt-xs) var(--spacing-none);
  transition: color 200ms;
}

#PostCallModal > .cf > div a:hover {
  color: var(--brand-300);
}

#PostCallModal .user-info-wh-container {
  border: 1px solid var(--gray-400);
  padding: var(--spacing-lg);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

#PostCallModal .user-info-wh-container .wh-div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-left: 80px;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--gray-400);
}

#PostCallModal .user-info-wh-container .wh-div .wh-title {
  color: var(--gray-600);
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  letter-spacing: -0.24px;
}

#PostCallModal .user-info-wh-container .wh-div .wh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

#PostCallModal .whc {
  font-size: 16px;
  color: var(--error-500);
  margin-bottom: 18px;
  text-align: left;
}

#PostCallModal .phone-numbers-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

#PostCallModal .phone-numbers-wrapper .other-contacts > a,
#PostCallModal .phone-numbers-wrapper .phone-number-wrapper {
  background-color: var(--gray-300);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
}

#PostCallModal .phone-numbers-wrapper .phone-number-wrapper {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}

#PostCallModal .phone-numbers-wrapper .phone-number-wrapper {
  gap: var(--spacing-lg);
}

#PostCallModal .phone-numbers-wrapper .phone-number-wrapper .phone-number-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  justify-content: center;
  align-items: baseline;
}

#PostCallModal .phone-numbers-wrapper .other-contacts > a,
#PostCallModal a.phone-number {
  color: var(--gray-900);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

#PostCallModal .phone-numbers-wrapper .other-contacts > a div,
#PostCallModal .phone-numbers-wrapper .phone-number-wrapper .phone-number-section .phone-number-info {
  color: var(--gray-800);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.26px;
  display: flex;
  gap: var(--spacing-alt-xs);
  justify-content: center;
  align-items: center;
  width: fit-content;
}

#PostCallModal .phone-numbers-wrapper .phone-number-wrapper .phone-number-section .phone-number-info img {
  width: 16px;
  height: 16px;
}

#PostCallModal .phone-numbers-wrapper .phone-number-wrapper .qr-section {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
}

#PostCallModal .phone-numbers-wrapper .phone-number-wrapper .qr-section .qr-code-container {
  width: 64px;
  height: 64px;
  padding: var(--spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}

#PostCallModal .phone-numbers-wrapper .qr-code-info {
  color: var(--gray-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.24px;
  text-align: left;
}

#PostCallModal .phone-numbers-wrapper .other-contacts {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
}

#PostCallModal .phone-numbers-wrapper .other-contacts > a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  background-color: var(--gray-300);
  padding: var(--spacing-alt-sm) var(--spacing-xl);
  border-radius: 12px;
}

#PostCallModal .phone-numbers-wrapper .other-contacts > a div {
  font-size: 12px;
  display: block;
  margin: var(--spacing-none);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-xl);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px 16px;
}

#PostCallModal .phone-numbers-wrapper .other-contacts > a .viber {
  background-image: url(/img/redesign/icons/social/viber.svg);
}

#PostCallModal .phone-numbers-wrapper .other-contacts > a .whatsapp {
  background-image: url(/img/redesign/icons/social/whatsapp.svg);
}

#PostCallModal .phone-numbers-wrapper .masked-number-notice {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background-color: var(--brand-100);
  color: var(--brand-500);
  text-align: left;
  margin-bottom: var(--spacing-alt-sm);
}

#PostCallModal .phone-numbers-wrapper .masked-number-notice .masked-number-notice-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: var(--spacing-xxs);
}

#PostCallModal .phone-numbers-wrapper .masked-number-notice .masked-number-notice-icon img {
  width: 20px;
  height: 20px;
  margin-bottom: var(--spacing-alt-sm);
}

#PostCallModal .phone-numbers-wrapper .masked-number-notice .masked-number-notice-text {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: 500;
  letter-spacing: -0.28px;
}

#PostCallModal .phone-numbers-wrapper .masked-number-notice .masked-number-notice-line {
  color: var(--brand-500);
}

#PostCallModal .phone-numbers-wrapper .masked-number-notice .masked-number-notice-line b {
  font-weight: 700;
}

.ui-dialog:has(#PostCallModal) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-none);
  z-index: 105;
}

#dialog:has(#PostCallModal) {
  margin-top: var(--spacing-2xl);
}

@media screen and (max-width: 1024px) {
  #PostCallModal .phones a {
    font-size: 22px;
    color: var(--brand-400);
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    text-align: center;
    text-overflow: ellipsis;
  }
  #PostCallModal .phone-numbers-wrapper {
    background-color: unset;
    gap: var(--spacing-2xl);
    padding: var(--spacing-none);
    margin-bottom: var(--spacing-3xl);
  }
  #PostCallModal .phone-numbers-wrapper .phone-number-wrapper {
    background-color: var(--gray-300);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 12px;
  }
  #PostCallModal .phone-numbers-wrapper .phone-number-wrapper .qr-section,
  #PostCallModal .phone-numbers-wrapper .qr-code-info {
    display: none;
  }
  #PostCallModal .phone-numbers-wrapper .masked-number-notice {
    padding: var(--spacing-md);
    margin-top: -12px;
  }
  #dialog:has(#PostCallModal) {
    margin-top: var(--spacing-lg);
  }
}
.deactivate-post-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.deactivate-post-form-wrapper .deactivate-post-modal-title-wrapper {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}
.deactivate-post-form-wrapper .deactivate-post-modal-title-wrapper > svg {
  width: 24px;
  height: 24px;
}
.deactivate-post-form-wrapper .deactivate-post-modal-title-wrapper .deactivate-post-modal-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper {
  display: flex;
  flex-direction: column;
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .deactivate-info {
  margin-bottom: var(--spacing-4xl);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--gray-800);
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .post-info-preview-wrapper {
  background-color: var(--gray-300);
  border-radius: 8px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  display: flex;
  gap: var(--spacing-lg);
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .post-info-preview-wrapper > img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .post-info-preview-wrapper > .post-title-and-price {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .post-info-preview-wrapper > .post-title-and-price .post-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .post-info-preview-wrapper > .post-title-and-price .post-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .deactivate-note {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-700);
  margin-bottom: var(--spacing-2xl);
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .form-action-btns {
  display: flex;
  gap: var(--spacing-2xl);
}
.deactivate-post-form-wrapper .deactivate-post-modal-body-wrapper .form-action-btns > input {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}

.ui-dialog:has(.deactivate-post-form-wrapper) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-none);
  z-index: 105;
}

#dialog:has(.deactivate-post-form-wrapper) {
  margin-top: var(--spacing-2xl);
}

@media screen and (max-width: 1024px) {
  #dialog:has(.deactivate-post-form-wrapper) {
    margin-top: var(--spacing-lg);
  }
}
.PostEditPendingInfoBlockComponent {
  padding: var(--spacing-md);
  overflow: hidden;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
  margin-top: var(--spacing-md);
  /* Mode-specific backgrounds */
}
.PostEditPendingInfoBlockComponent .text {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 500;
}
.PostEditPendingInfoBlockComponent .primary-text {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  word-wrap: break-word;
}
.PostEditPendingInfoBlockComponent .link-text {
  color: var(--brand-400);
  font-weight: 500;
}
.PostEditPendingInfoBlockComponent .status-icon {
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: var(--spacing-md);
}
.PostEditPendingInfoBlockComponent .status-icon .status-inner {
  width: 8px;
  height: 8px;
  left: 4px;
  top: 4px;
  position: absolute;
  outline: 1px var(--gray-900) solid;
  outline-offset: -0.5px;
}
.PostEditPendingInfoBlockComponent .close-icon {
  cursor: pointer;
  margin-left: var(--spacing-md);
  width: 14px;
  height: 14px;
  background-image: url("img/close.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  user-select: none;
}
.PostEditPendingInfoBlockComponent .close-icon:hover {
  opacity: 0.7;
  cursor: pointer;
}
.PostEditPendingInfoBlockComponent .rejection-rules {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  border-radius: 8px;
  position: relative;
}
.PostEditPendingInfoBlockComponent .rejection-rules .title {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
}
.PostEditPendingInfoBlockComponent .rejection-rules .close-icon {
  position: absolute;
  top: 2px;
  right: -1px;
}
.PostEditPendingInfoBlockComponent .rejection-rules .rule-row {
  display: flex;
  gap: var(--spacing-sm);
}
.PostEditPendingInfoBlockComponent .rejection-rules .rule-row .bullet-icon {
  width: 12px;
  height: 12px;
  padding-top: var(--spacing-xs);
}
.PostEditPendingInfoBlockComponent .rejection-rules .rule-row .bullet-icon > svg {
  width: 12px;
  height: 12px;
}
.PostEditPendingInfoBlockComponent .rejection-rules .rule-row .bullet-icon > svg path {
  fill: var(--error-400);
}
.PostEditPendingInfoBlockComponent .rejection-rules .rule-row .rule-info {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.PostEditPendingInfoBlockComponent .rejection-rules .rule-row.offset {
  padding-left: var(--spacing-xl);
}
.PostEditPendingInfoBlockComponent a.rejected-post-action-btn {
  margin-left: var(--spacing-md);
  padding: var(--spacing-md);
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  background-color: var(--gray-300);
  border-radius: 8px;
  width: fit-content;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-900);
}
.PostEditPendingInfoBlockComponent a.rejected-post-action-btn > div.change-category-text > span {
  color: var(--brand-400);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.PostEditPendingInfoBlockComponent a.rejected-post-action-btn:hover {
  background-color: var(--gray-400);
}
.PostEditPendingInfoBlockComponent a.rejected-post-action-btn > svg {
  width: 20px;
  height: 20px;
}
.PostEditPendingInfoBlockComponent.alert {
  background: var(--info-100);
}
.PostEditPendingInfoBlockComponent.success {
  background: var(--success-100);
}
.PostEditPendingInfoBlockComponent.reject {
  background: var(--error-100);
}

.PostLabelComponent {
  padding: var(--spacing-alt-xs) var(--spacing-sm) var(--spacing-alt-xs) var(--spacing-alt-xs);
  border-radius: var(--radius-sm);
  display: inline-block;
  align-items: center;
  font-size: 12px;
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.PostLabelComponent img {
  width: 16px !important;
  height: 16px !important;
  min-width: initial !important;
  vertical-align: middle;
  margin: -2px var(--spacing-xs) var(--spacing-none) -2px;
}

.PostLabelContainerComponent {
  margin: var(--spacing-sm) var(--spacing-none);
  display: flex;
  row-gap: var(--spacing-xs);
  column-gap: 8px;
  flex-wrap: wrap;
}

@media screen and (max-width: 1024px) {
  .vi .PostLabelContainerComponent {
    margin: var(--spacing-sm) var(--spacing-md);
  }
}
.PostListDeliveryLabelComponent {
  display: flex;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--gray-100);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: var(--spacing-none);
  background-color: var(--delivery-400);
  border-radius: 6px;
  width: fit-content;
  max-width: 90%;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
.PostListDeliveryLabelComponent > svg {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xs);
}
.PostListDeliveryLabelComponent > svg > path {
  fill: #FFFFFF;
}

@media screen and (max-width: 1024px) {
  .PostListDeliveryLabelComponent {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--delivery-400) 33;
    color: var(--gray-900);
  }
  .PostListDeliveryLabelComponent > svg {
    width: 12px;
    height: 12px;
    background-color: var(--delivery-400);
    border-radius: 100%;
    padding: var(--spacing-xs);
  }
}
.PostMapsModal #map {
  height: 590px;
}

/* make yandex maps in dialog rounded */
.PostMapsModal ymaps {
  border-radius: 0 0 10px 10px;
}

#dialog:has(.PostMapsModal) {
  padding: var(--spacing-none);
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .PostMapsModal #map {
    position: absolute;
    z-index: 999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
  }
}
/* Base component styling */
.PostPhotoInlineDiffViewComponent {
  width: 100%;
  box-sizing: border-box;
}

/* Slider wrapper and images */
.PostPhotoInlineDiffViewComponent .slider-wrapper {
  overflow-x: auto;
}

.PostPhotoInlineDiffViewComponent .slider {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: var(--spacing-sm);
}

/* Ensure each image container is positioned relative so badges can be absolute */
.PostPhotoInlineDiffViewComponent .slider-image,
.PostPhotoInlineDiffViewComponent .thumbnail {
  position: relative;
}

/* Slider images */
.PostPhotoInlineDiffViewComponent .slider-image {
  flex-shrink: 0;
  width: 100%;
  min-width: 270px;
  max-width: 270px;
  border-radius: 4px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.PostPhotoInlineDiffViewComponent .slider-image:hover {
  transform: scale(1.05);
}

/* Thumbnail bar */
.PostPhotoInlineDiffViewComponent .thumbnail-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--spacing-alt-xs);
  padding: var(--spacing-sm);
}

/* Thumbnail images */
.PostPhotoInlineDiffViewComponent .thumbnail {
  flex: 0 0 auto;
  height: 48px;
  width: auto;
  max-height: 48px;
  opacity: 0.6;
  border-radius: 3px;
  transition: opacity 0.3s;
  cursor: pointer;
}

.PostPhotoInlineDiffViewComponent .thumbnail:hover,
.PostPhotoInlineDiffViewComponent .thumbnail.active {
  opacity: 1;
}

/* Modal styling */
.PostPhotoInlineDiffViewComponent .photo-modal {
  display: none; /* hidden by default */
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

/* Modal content */
.PostPhotoInlineDiffViewComponent .modal-content {
  position: relative;
  margin: auto;
  padding: var(--spacing-none);
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modal title */
.PostPhotoInlineDiffViewComponent .modal-title {
  color: var(--gray-100);
  font-size: 21px;
  padding: var(--spacing-lg);
  position: absolute;
  top: 0;
  text-align: center;
}

/* Modal image */
.PostPhotoInlineDiffViewComponent .modal-image {
  margin: auto;
  max-height: 90%;
  max-width: 100%;
  object-fit: contain;
  margin-top: 70px;
}

/* Close button */
.PostPhotoInlineDiffViewComponent .modal-close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: var(--gray-100);
  font-size: 35px;
  cursor: pointer;
}

/* Navigation arrows */
.PostPhotoInlineDiffViewComponent .modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-100);
  font-size: 40px;
  cursor: pointer;
  user-select: none;
  padding: var(--spacing-lg);
}

.PostPhotoInlineDiffViewComponent .modal-arrow-left {
  left: 0;
}

.PostPhotoInlineDiffViewComponent .modal-arrow-right {
  right: 0;
}

/* ADDED image badge */
.PostPhotoInlineDiffViewComponent .slider-image.new,
.PostPhotoInlineDiffViewComponent .thumbnail.new {
  border: 3px solid #4CAF50;
}

.PostPhotoInlineDiffViewComponent .slider-image.new::after,
.PostPhotoInlineDiffViewComponent .thumbnail.new::after {
  content: "ADDED";
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: var(--success-400);
  color: var(--gray-100);
  font-size: 10px;
  font-weight: bold;
  padding: var(--spacing-xxs) var(--spacing-alt-xs);
  border-radius: 3px;
  z-index: 2;
}

/* REMOVED image badge */
.PostPhotoInlineDiffViewComponent .slider-image.removed,
.PostPhotoInlineDiffViewComponent .thumbnail.removed {
  border: 3px solid #FF5722;
}

.PostPhotoInlineDiffViewComponent .slider-image.removed::after,
.PostPhotoInlineDiffViewComponent .thumbnail.removed::after {
  content: "REMOVED";
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: var(--accent-aerospaceOrange);
  color: var(--gray-100);
  font-size: 10px;
  font-weight: bold;
  padding: var(--spacing-xxs) var(--spacing-alt-xs);
  border-radius: 3px;
  z-index: 2;
}

/* Base component styling */
.PostPhotoInlineViewComponent {
  width: 100%;
  box-sizing: border-box;
}

/* Slider wrapper and images */
.PostPhotoInlineViewComponent .slider-wrapper {
  overflow-x: auto;
}

.PostPhotoInlineViewComponent .slider {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: var(--spacing-sm);
}

.PostPhotoInlineViewComponent .slider-image {
  flex-shrink: 0;
  width: 33%;
  border-radius: 4px;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.PostPhotoInlineViewComponent .slider-image:hover {
  transform: scale(1.05);
}

/* Thumbnail images: fixed height, auto width, and no flex-grow */
.PostPhotoInlineViewComponent .thumbnail {
  flex: 0 0 auto; /* Prevent stretching */
  height: 48px; /* Set fixed height */
  width: auto; /* Maintain aspect ratio */
  max-height: 48px;
  opacity: 0.6;
  border-radius: 3px;
  transition: opacity 0.3s;
  cursor: pointer;
}

.PostPhotoInlineViewComponent .thumbnail:hover,
.PostPhotoInlineViewComponent .thumbnail.active {
  opacity: 1;
}

/* Base component styling */
.PostPhotoInlineViewComponent {
  width: 100%;
  box-sizing: border-box;
}

/* Slider wrapper and images */
.PostPhotoInlineViewComponent .slider-wrapper {
  overflow-x: auto;
}

.PostPhotoInlineViewComponent .slider {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: var(--spacing-sm);
}

/* Thumbnail bar: show small images in one horizontal line */
.PostPhotoInlineViewComponent .thumbnail-bar {
  display: flex;
  flex-wrap: wrap; /* Prevent wrapping */
  overflow-x: auto;
  gap: var(--spacing-alt-xs);
  padding: var(--spacing-sm);
}

/* Thumbnail images: fixed height, auto width, and no flex-grow */
.PostPhotoInlineViewComponent .thumbnail {
  flex: 0 0 auto; /* Prevent stretching */
  height: 48px; /* Set fixed height */
  width: auto; /* Maintain aspect ratio */
  max-height: 48px;
  opacity: 0.6;
  border-radius: 3px;
  transition: opacity 0.3s;
  cursor: pointer;
}

.PostPhotoInlineViewComponent .thumbnail:hover,
.PostPhotoInlineViewComponent .thumbnail.active {
  opacity: 1;
}

/* Modal styling */
.PostPhotoInlineViewComponent .photo-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

/* Updated modal-content for better centering and sizing */
.PostPhotoInlineViewComponent .modal-content {
  position: relative;
  margin: auto;
  padding: var(--spacing-none);
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* New modal title styling */
.PostPhotoInlineViewComponent .modal-title {
  color: var(--gray-100);
  font-size: 21px;
  padding: var(--spacing-lg);
  position: absolute;
  top: 0;
  text-align: center;
}

/* Updated modal-image styling to ensure fit on screen */
.PostPhotoInlineViewComponent .modal-image {
  margin: auto;
  max-height: 90%;
  max-width: 100%;
  object-fit: contain;
  margin-top: 70px;
}

.PostPhotoInlineViewComponent .modal-close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: var(--gray-100);
  font-size: 35px;
  cursor: pointer;
}

.PostPhotoInlineViewComponent .modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-100);
  font-size: 40px;
  cursor: pointer;
  user-select: none;
  padding: var(--spacing-lg);
}

.PostPhotoInlineViewComponent .modal-arrow-left {
  left: 0;
}

.PostPhotoInlineViewComponent .modal-arrow-right {
  right: 0;
}

.PostPhotoInlineViewComponent .thumbnail.active {
  opacity: 1;
  border: 2px solid var(--gray-900); /* clear visual highlight */
  outline-offset: 0;
  transition: outline 0.2s;
}

.PostPhotoViewComponent {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-alt-sm);
  border-radius: 8px 8px 0 0;
}

.PostPhotoViewComponent .p {
  position: relative;
  display: flex;
  float: left;
  overflow: hidden;
  flex-direction: row;
  width: 740px;
  height: 540px;
  padding: var(--spacing-none);
  white-space: nowrap;
  transition: left 200ms;
  border-radius: 12px;
}

.PostPhotoViewComponent > .p > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 12px;
}

.PostPhotoViewComponent > .p > div img {
  width: 740px;
  height: 540px;
  object-fit: cover;
  border-radius: 12px;
}

.PostPhotoViewComponent .p img[src=""] {
  display: none;
}

.PostPhotoViewComponent .arrow {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 34px;
  height: 540px;
  cursor: pointer;
  text-align: left;
  opacity: 0;
}

.PostPhotoViewComponent .zoom {
  position: absolute;
  z-index: 4;
  bottom: 40px;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: transform 0.2s;
}

.PostPhotoViewComponent .zoom div {
  display: block;
  width: 44px;
  height: 44px;
  margin: var(--spacing-none) auto var(--spacing-xs) auto;
  cursor: pointer;
  background: url(/img/psp.png) no-repeat -63px -24px;
  background-size: 200px 108px;
}

.PostPhotoViewComponent .p .load {
  position: absolute;
  z-index: 999;
  display: block;
  text-align: center;
  opacity: 0.8;
}

.PostPhotoViewComponent .p .load img {
  width: 32px;
  height: 32px;
  padding: var(--spacing-md);
  border: none;
  border-radius: 4px;
  background-color: var(--gray-900);
}

.PostPhotoViewComponent .arrow .left {
  position: absolute;
  align-self: center;
  width: 32px;
  height: 51px;
  margin-left: var(--spacing-xs);
  cursor: pointer;
  background: url(/img/psp.png) no-repeat 0 -24px;
  background-size: 200px 108px;
  transition: transform 0.2s;
}

.PostPhotoViewComponent .arrow:hover .left, .PostPhotoViewComponent .arrow:hover .right, .PostPhotoViewComponent .zoom:hover {
  transform: scale(1.1);
}

.PostPhotoViewComponent .arrow .right {
  position: absolute;
  align-self: center;
  width: 32px;
  height: 51px;
  margin-right: var(--spacing-xs);
  cursor: pointer;
  background: url(/img/psp.png) no-repeat -32px -24px;
  background-size: 200px 108px;
  transition: transform 0.2s;
}

/* dots for photos */
.PostPhotoViewComponent .jumptodiv {
  position: absolute;
  bottom: 10px;
  display: block;
  width: 100%;
  text-align: center;
}

.PostPhotoViewComponent .jumptodiv span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: var(--spacing-none) 3px;
  cursor: pointer;
  opacity: 0.6;
  border: 1px solid var(--gray-500);
  border-radius: 50%;
  background-color: var(--gray-900);
}

.PostPhotoViewComponent .jumptodiv span.selected {
  opacity: 1;
  border: 1px solid var(--gray-900);
  background-color: var(--gray-400);
}

#pvx .PostPhotoViewComponent .p {
  bottom: 60px;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

#pvx .PostPhotoViewComponent .p img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: scale-down;
}

#pvx span:hover {
  background-color: var(--gray-900);
}

#pvx .PostPhotoViewComponent .arrow, #pvx .PostPhotoViewComponent .zoom {
  display: none;
}

#pvx .aleft {
  position: fixed;
  z-index: 200;
  top: 80px;
  bottom: 80px;
  left: 0;
  display: flex;
  width: 80px;
  cursor: pointer;
}

#pvx .aleft div {
  align-self: center;
  width: 32px;
  height: 51px;
  margin: auto;
  background: url(/img/psp.png) no-repeat 0 -24px;
  background-size: 200px 108px;
  transition: transform 0.2s;
}

#pvx .aright {
  position: fixed;
  z-index: 200;
  top: 80px;
  right: 0;
  bottom: 80px;
  display: flex;
  width: 80px;
  cursor: pointer;
}

#pvx .aright div {
  align-self: center;
  width: 32px;
  height: 51px;
  margin: auto;
  background: url(/img/psp.png) no-repeat -32px -24px;
  background-size: 200px 108px;
  transition: transform 0.2s;
}

#pvx .aleft:hover div, #pvx .aright:hover div {
  transform: scale(1.2);
}

#pvx .PostPhotoViewComponent .t {
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  margin: auto;
}

#pvx .PostPhotoViewComponent .t div {
  border: 1px solid var(--gray-500);
}

@media screen and (max-width: 1270px) {
  .PostPhotoViewComponent > .p > div img, .PostPhotoViewComponent .p {
    width: 640px;
    height: 480px;
  }
  .PostPhotoViewComponent .arrow {
    height: 480px;
  }
}
#pvx {
  position: fixed;
  z-index: 200;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms linear;
}

#pvx.hidden {
  opacity: 0;
  transform: scale(0.01);
}

#pvx .pvl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.94;
  background-color: var(--gray-900);
}

#pvx > span {
  position: absolute;
  z-index: 200;
  top: 8px;
  right: 24px;
  display: block;
  width: 32px;
  height: 32px;
  padding: var(--spacing-alt-xs);
  cursor: pointer;
  border-radius: 50%;
  background: url(/img/close_white.png) no-repeat center;
  background-size: 32px 32px;
  transition: background-color 200ms;
}

#pvx > h2 {
  font-size: 18px;
  font-weight: normal;
  color: var(--gray-100);
  position: absolute;
  top: 16px;
  right: 80px;
  left: 80px;
  overflow: hidden;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#pvx .PostPhotoViewComponent {
  position: absolute;
  top: 60px;
  right: 50px;
  bottom: 0;
  left: 50px;
  margin: auto;
  border-radius: 0;
}

@media screen and (max-width: 1024px) {
  .PostPhotoViewComponent {
    margin: var(--spacing-none);
    border-radius: 0;
  }
  .vi .PostPhotoViewComponent .p {
    width: 100%;
    height: 280px;
    border-radius: 0;
  }
  .PostPhotoViewComponent > .p > div img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
  }
  .PostPhotoViewComponent .jumptodiv {
    display: block;
  }
  .PostPhotoViewComponent .jumptodiv span {
    width: 6px;
    height: 6px;
  }
  #pvx .PostPhotoViewComponent {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  #pvx .PostPhotoViewComponent .p {
    bottom: 0;
  }
  #pvx h2 {
    display: none;
  }
  #pvx .aleft, #pvx .aright, #pvx .PostPhotoViewComponent .t {
    display: none;
  }
  #pvx > span {
    top: 6px;
    right: 8px;
    opacity: 0.5;
    background-color: var(--gray-900);
  }
  .vi .PostPhotoViewComponent .t, .vi .PostPhotoViewComponent .arrow, .PostPhotoViewComponent .zoom {
    display: none;
  }
}
@media only screen and (min-width: 111568px) {
  .PostPhotoViewComponent .p {
    height: 480px !important;
    max-height: 480px;
  }
  #pvx .PostPhotoViewComponent .p {
    align-items: center;
    height: 100% !important;
    max-height: none;
  }
  .PostPhotoViewComponent > .p > div img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
  }
}
@media screen and (max-width: 360px) {
  .PostPhotoViewComponent .jumptodiv span {
    margin: var(--spacing-none) var(--spacing-xxs);
  }
}
.PostPriceViewComponent {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.02em;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding: var(--spacing-none);
}

.PostPriceViewComponent > .price,
.PostPriceViewComponent > .xprice > span:first-child {
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
  color: var(--gray-900);
  display: inline-block;
  padding: var(--spacing-none) var(--spacing-2xl) var(--spacing-none) var(--spacing-none);
}

.PostPriceViewComponent .oldPrice {
  overflow: hidden;
  color: var(--error-400);
  text-overflow: ellipsis;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-3xl);
  letter-spacing: -0.17px;
  text-decoration: line-through;
}

.PostPriceViewComponent .offerExpiryNotice {
  padding-left: var(--spacing-2xl);
  color: var(--accent-malachite);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  background-image: url("/img/redesign/icons/offer-green.svg");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 4px;
}

.PostPriceViewComponent > .price {
  padding: var(--spacing-none);
}

.PostPriceViewComponent > .xprice {
  position: absolute;
  box-shadow: 0 8px 32px rgb(0 0 0/20%);
  display: none;
  top: -16px;
  left: -24px;
  padding: var(--spacing-lg) var(--spacing-2xl);
  z-index: 999;
  background-color: var(--gray-100);
  border-radius: 8px;
}

.PostPriceViewComponent > .price.x, .PostPriceViewComponent > .xprice {
  cursor: pointer;
  width: auto;
}

.PostPriceViewComponent > .price.x {
  display: flex;
}

.PostPriceViewComponent > .price.x:after {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-sm);
  display: inline-block;
  content: url("/img/redesign/icons/chevron-down-32.svg");
  transition: all 0.2s;
  vertical-align: middle;
}

.PostPriceViewComponent > .xprice > div > span {
  color: var(--gray-600);
  font-weight: 500;
  padding: var(--spacing-alt-xs) var(--spacing-none);
  font-size: 16px;
}

.PostPriceViewComponent > .xprice > div.priceConverted {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.PostPriceViewComponent > .xprice > div > span:not(:first-child):before {
  content: "·";
  padding: var(--spacing-none) var(--spacing-sm);
  font-size: 20px;
  line-height: normal;
}

@media screen and (max-width: 1024px) {
  .PostPriceViewComponent {
    flex-direction: column;
    align-items: flex-start;
  }
  .PostPriceViewComponent > .xprice {
    width: auto;
    font-size: 18px;
    line-height: 28px;
    height: auto;
    padding: var(--spacing-none) var(--spacing-none) var(--spacing-xs) var(--spacing-none);
    margin: var(--spacing-none);
    position: static;
    box-shadow: none;
    z-index: auto;
  }
  .PostPriceViewComponent > .xprice > span:first-child {
    display: none;
  }
  .PostPriceViewComponent > .price.x.o:after {
    transform: rotate(180deg);
  }
  .PostPriceViewComponent > .price.x:after {
    height: 32px;
  }
}
.PostRenewModal {
  width: 100%;
  display: flex;
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex: 1;
}

.PostRenewModal:has(.bounced) {
  flex-direction: column;
}

.PostRenewModal .renew-modal-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  flex: 1;
}

.PostRenewModal .renew-modal-wrapper .info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
}

.PostRenewModal .renew-modal-wrapper .info-section .title-section {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  padding-right: 40px;
}

.PostRenewModal .renew-modal-wrapper .info-section .title-section > img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.PostRenewModal .renew-modal-wrapper .info-section .title-section .action-info-wrapper {
  min-width: 0;
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.4px;
  word-break: break-word;
}

.PostRenewModal .renew-modal-wrapper .info-section .more-info-section-wrapper {
  color: var(--gray-800);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.PostRenewModal .renew-modal-wrapper .info-section .more-info-section-wrapper a {
  margin-left: var(--spacing-alt-xs);
  vertical-align: middle;
}

.PostRenewModal a {
  color: var(--brand-400);
}

.PostRenewModal .renewed a {
  font-size: 14px;
}

.PostRenewModal a:hover {
  color: var(--accent-argentinaBlue-dark);
  cursor: pointer;
}

.PostRenewModal .cb {
  display: none;
}

.PostRenewModal::-webkit-scrollbar {
  display: none;
}

.PostRenewModal #schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  border-radius: var(--radius-md, 12px);
  background: var(--gray-300);
  padding: var(--spacing-xl);
}

.PostRenewModal #schedule .schedule-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.PostRenewModal #schedule .schedule-info {
  gap: var(--spacing-md);
}

.PostRenewModal #schedule .schedule-info .max-renew-count {
  color: var(--gray-600);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl, 24px);
  letter-spacing: -0.3px;
  margin-left: var(--spacing-xs);
}

.PostRenewModal #schedule .schedule-info .max-renew-count + div {
  background: var(--gray-400);
}

.PostRenewModal #schedule .schedule-info .value {
  border-radius: 8px;
  background: var(--gray-100);
  font-weight: 500;
}

.PostRenewModal #schedule .schedule-info .value.text {
  background: var(--gray-100);
  padding: var(--spacing-none) var(--spacing-md);
  line-height: 38px;
  border: 1px solid var(--gray-400);
  border-radius: 6px;
  width: 114px;
}

#schedule .schedule-info-label,
#schedule .schedule-info-label *,
.PostRenewModal #schedule .schedule-rows-container * {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl, 24px);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
}

/* temp code ------------------------------------------------------------------------------ */
.PostRenewModal .schedule-rows-container > * {
  display: flex;
  padding: var(--spacing-xs) var(--spacing-sm);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-alt-sm);
  border-radius: 4px;
  background: var(--gray-300);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  width: 15.7%;
}

.PostRenewModal .renewed .schedule-rows-container > * {
  width: 20.8%;
}

.PostRenewModal .schedule-rows-container .item.done {
  color: var(--accent-malachite);
  background: var(--success-100);
}

.PostRenewModal .schedule-rows-container .item img {
  display: none;
}

.PostRenewModal .schedule-rows-container .item.done img {
  padding: var(--spacing-none);
  display: block;
}

.PostRenewModal .schedule-rows-container {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--spacing-md);
}

/* end temp code ------------------------------------------------------------------------------ */
.PostRenewModal #schedule .dropdown .me {
  width: 170px !important;
  background: var(--gray-300);
  border: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
}

.PostRenewModal .dropdown .me + .l {
  width: 170px !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-100);
  padding: var(--spacing-sm) var(--spacing-md);
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: calc(170px - 2 * var(--spacing-md));
  margin-top: var(--spacing-xs);
}

.PostRenewModal .dropdown .open .me + .l {
  display: flex !important;
}

.PostRenewModal .felement0 .open .me + .l {
  max-width: calc(100% - 24px);
}

.PostRenewModal .separator {
  background: var(--gray-400);
  height: 1px;
  width: 100%;
}

.PostRenewModal #schedule .schedule-info .toggle-open > div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.PostRenewModal #schedule .toggle-open .schedule-info-label {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.PostRenewModal #schedule .schedule-info.toggle-open {
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}

.PostRenewModal #schedule .schedule-info.republish-message {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs);
}

.PostRenewModal #schedule a {
  font-size: 15px;
}

.PostRenewModal #schedule .toggle-open .item .n {
  width: 20px;
}

.PostRenewModal .toggle-open.open svg {
  transform: rotateZ(180deg);
}

.PostRenewModal .toggle-open .v:has(.show) {
  display: flex;
}

.PostRenewModal .toggle-open.open .show, .PostRenewModal .toggle-open:not(.open) .hide {
  display: none;
}

.PostRenewModal .renewed .pay .pay-info.not-enough-bundle {
  display: inline-block;
}

.PostRenewModal .pay .pay-info.not-enough-bundle,
.PostRenewModal .pay .pay-info.not-enough-funds {
  border-radius: unset;
  padding: var(--spacing-none);
  background: unset;
  border: none;
}

.PostRenewModal .pay .pay-info.not-enough-bundle .l,
.PostRenewModal .pay .pay-info.not-enough-funds .l {
  font-size: 14px;
  letter-spacing: -0.28px;
  color: var(--gray-900);
  display: inline-block;
}

.PostRenewModal .pay .pay-info.not-enough-bundle .l {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.PostRenewModal .pay .pay-info.not-enough-funds .l {
  color: var(--error-400);
}

.PostRenewModal .renew-today {
  display: flex;
  padding: var(--spacing-xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  border-radius: 12px;
}

.PostRenewModal .renew-today .label {
  display: flex;
  flex-direction: column;
  color: var(--gray-900);
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  gap: var(--spacing-xl);
}

.PostRenewModal .pay .pay-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--gray-400);
  background: var(--gray-100);
  padding: var(--spacing-xl, 20px);
}

.PostRenewModal .pay .pay-info .pay-info-row, .pay .pay-info .pay-info-row > div:first-child {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.PostRenewModal .pay .toggle-open.renewal-dates {
  margin-bottom: unset;
  cursor: pointer;
  flex-wrap: wrap;
  user-select: none;
}

.PostRenewModal .pay .toggle-open.renewal-dates .toggleable {
  cursor: default;
}

.PostRenewModal .pay .pay-info-row .l {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
}

.PostRenewModal .pay .pay-info .pay-info-row .v {
  display: flex;
  align-items: center;
  color: var(--gray-900);
  text-align: right;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.15px;
}

.PostRenewModal input#submit_dlg_button, .PostRenewModal .bblink {
  display: flex;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-2xl);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  border-radius: var(--spacing-md);
  background: var(--brand-400);
  font-weight: 500;
  font-size: 15px;
  line-height: var(--spacing-2xl);
  max-width: unset;
}

.PostRenewModal input#submit_dlg_button:hover, .PostRenewModal .bblink:hover {
  background: var(--brand-300);
}

.PostRenewModal .verify-phones {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.PostRenewModal div.error, .PostRenewModal .prgr {
  padding: var(--spacing-none);
  font-size: 15px;
  margin: var(--spacing-xl) var(--spacing-none);
}

.PostRenewModal .pick-your-wrapper,
.PostRenewModal .needs-login-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.PostRenewModal .pick-your-wrapper .pick-your-ad-text,
.PostRenewModal .needs-login-wrapper .login-required-text {
  background-color: var(--brand-100);
  padding: var(--spacing-lg);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.PostRenewModal .pick-your-wrapper a.my-ads-button,
.PostRenewModal .needs-login-wrapper a.login-btn {
  background-color: var(--brand-400);
  color: var(--gray-100);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.PostRenewModal .pick-your-wrapper a.my-ads-button:hover,
.PostRenewModal .needs-login-wrapper a.login-btn:hover {
  background-color: var(--brand-300);
}

.PostRenewModal .ComboSelectorComponent > .l > div > .title-wrapper {
  flex: 1;
}

.PostRenewModal .renew-modal-description {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.PostRenewModal .renew-modal-description .renew-modal-title {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
  padding: unset;
  margin: var(--spacing-none);
}

.PostRenewModal .renew-modal-description .bullet-row {
  display: flex;
  align-items: start;
  /* margin-bottom: var(--spacing-md); */
}

.PostRenewModal .bullet-icon {
  margin-top: var(--spacing-xxs);
  margin-right: var(--spacing-md);
}

.PostRenewModal .renew-modal-description .renew-bullet-text {
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

.PostRenewModal .renewattr > *:first-child {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
}

.PostRenewModal .renewattr.hdn {
  display: none;
}

.PostRenewModal .cargomovers {
  display: none;
}

.PostRenewModal .renewattr.del-conf {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.PostRenewModal div.flabel0 {
  margin-left: var(--spacing-alt-sm);
  user-select: none;
  display: flex;
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
}

.PostRenewModal div.flabel0, div.flabel0 * {
  cursor: pointer;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.PostRenewModal .renewattr > .felement0 {
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.PostRenewModal div.flabel0.open > svg {
  transform: rotateX(180deg);
}

.PostRenewModal .pay {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  flex: 1;
}

.PostRenewModal .renewattr {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.PostRenewModal .renewattr .ComboSelectorComponent,
.PostRenewModal .renewattr .ComboSelectorComponent > .me,
.PostRenewModal .renewattr .ComboSelectorComponent > .l {
  width: 100% !important;
  max-width: 400px;
}

.PostRenewModal .renewattr .price-container .ComboSelectorComponent {
  width: 100%;
  max-width: 198px;
  margin-bottom: var(--spacing-xxs);
}

.PostRenewModal .renewattr .price-container input[name=price] {
  width: 100%;
  max-width: 198px;
  margin-right: var(--spacing-xxs);
  margin-bottom: var(--spacing-xxs);
}

.PostRenewModal .renewattr .description-container .frow {
  display: block;
  padding-bottom: var(--spacing-none);
}

.PostRenewModal .renewattr .description-container .frow > .l {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.PostRenewModal .renewattr .description-container .frow > .e {
  margin-left: var(--spacing-none);
}

.PostRenewModal .renewattr .description-container .fsec {
  padding-bottom: var(--spacing-none);
}

.PostRenewModal .renewattr .description-container .frow.top {
  align-items: flex-start;
}

.PostRenewModal .renewattr .description-container .fsec {
  padding-top: var(--spacing-none);
}

.PostRenewModal .bundle-info {
  gap: var(--spacing-xs);
  align-items: center;
}

.PostRenewModal .bundle-expiration {
  color: var(--gray-600);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-lg);
}

.PostRenewModal .renew-content > .InlineTabComponent.pmTabs > div:first-child > div {
  display: flex;
  padding: var(--spacing-sm) var(--spacing-lg);
  justify-content: center;
  align-items: center;
  color: var(--gray-800);
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
  border: none;
  border-radius: 8px;
  background: var(--gray-300);
}

.PostRenewModal .renew-content > .InlineTabComponent > div:first-child > div:hover {
  color: var(--gray-900);
  -webkit-filter: unset;
}

.PostRenewModal .renew-content > .InlineTabComponent.pmTabs > div:first-child > div.s {
  border-radius: 8px;
  background: var(--accent-argentinaBlue-light);
  color: var(--brand-400);
}

.PostRenewModal .renew-content > .InlineTabComponent.pmTabs > div:first-child {
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.PostRenewModal input#submit_dlg_button:disabled,
.PostRenewModal input#submit_dlg_button.disabled,
.PostRenewModal input#submit_dlg_button.cta-disabled {
  color: var(--gray-500);
  background: var(--gray-400);
  cursor: default;
  pointer-events: none;
}

.PostRenewModal input#submit_dlg_button:disabled {
  pointer-events: none;
}

.PostRenewModal .InlineTabComponent > div:nth-child(2) {
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-none);
  flex: 1;
}

.PostRenewModal form {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.PostRenewModal .renew-content {
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
  gap: var(--spacing-2xl);
  flex-direction: column;
}

.PostRenewModal .button-container {
  bottom: 0;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.PostRenewModal .remind-me {
  background: var(--brand-100) !important;
  color: var(--brand-400) !important;
  margin: var(--spacing-none);
}

.PostRenewModal .remind-me.disabled {
  background: var(--gray-300) !important;
  color: var(--gray-500) !important;
  cursor: default;
  pointer-events: none;
}

.PostRenewModal .rgroup .InlineHintComponent {
  margin-top: var(--spacing-xs);
  margin-left: var(--spacing-alt-sm);
}

.PostRenewModal .InlineTabComponent > div:nth-child(2) > div {
  display: none;
  width: 100%;
}

.PostRenewModal .InlineTabComponent {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.PostRenewModal .DialogIconLayoutComponent {
  width: 100%;
  gap: var(--spacing-2xl);
}

.PostRenewModal .DialogIconLayoutComponent > .head > .l img {
  width: 54px;
  height: 54px;
}

.PostRenewModal .head {
  gap: var(--spacing-xl);
  /* margin-bottom: var(--spacing-2xl); */
  display: flex;
}

.PostRenewModal .DialogIconLayoutComponent > .head > .r {
  padding: unset;
}

.PostRenewModal #schedule .ComboSelectorComponent.open > .me {
  border: 1px solid var(--gray-900);
}

.PostRenewModal .ComboSelectorComponent > .me > div {
  padding-right: var(--spacing-none);
}

.PostRenewModal .ComboSelectorComponent > .l > div {
  padding: var(--spacing-none);
  line-height: var(--spacing-xl);
  justify-content: space-between;
  min-height: max-content;
  flex: 0 0 auto;
}

.PostRenewModal .ComboSelectorComponent > .l > div.s {
  color: var(--brand-400);
}

.PostRenewModal .ComboSelectorComponent > .l > div.i:hover {
  color: var(--brand-400);
}

.PostRenewModal .ComboSelectorComponent > .l > div.s:after,
.PostRenewModal .ComboSelectorComponent > .l > div.t.exp.s:before {
  display: none;
}

.PostRenewModal .InlineTabComponent > div:nth-child(2) > div > * {
  display: flex;
  flex-direction: column;
}

.PostRenewModal .wrapper {
  flex: 1;
  height: min-content;
  gap: var(--spacing-xl);
  display: flex;
  flex-direction: column;
}

.PostRenewModal .renewed .pay {
  height: min-content;
}

.PostRenewModal .bundle-info .available-from {
  color: var(--gray-600);
}

.PostRenewModal .bundle-info .not-enough {
  color: var(--error-400);
}

.PostRenewModal .ComboSelectorComponent > .l > div.i.s svg {
  display: flex;
  width: 14px;
  height: 14px;
}

.PostRenewModal .ComboSelectorComponent > .l > div.i.s svg {
  display: flex;
  width: 14px;
  height: 14px;
}

.PostRenewModal .rgroup {
  display: flex;
  flex-direction: column;
}

.PostRenewModal .rgroup span {
  margin: unset;
}

.PostRenewModal .rgroup span label {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
}

.PostRenewModal .rgroup label {
  padding-left: var(--spacing-alt-xs);
}

.PostRenewModal .rgroup > span:first-child, .PostRenewModal .rgroup > span:first-child .l {
  align-items: start;
}

.PostRenewModal .rgroup > span:first-child > input {
  margin-top: var(--spacing-alt-xs);
}

.ui-dialog:has(.PostRenewModal) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-none);
  z-index: 105;
}

#dialog:has(.PostRenewModal) {
  margin-top: var(--spacing-2xl);
}

@media screen and (max-width: 1024px) {
  .PostRenewModal .renew-modal-wrapper .info-section {
    flex: unset;
  }
  .PostRenewModal .button-container {
    margin-bottom: var(--spacing-lg);
  }
  .PostRenewModal input#submit_dlg_button, .PostRenewModal .bblink {
    font-size: 14px;
  }
  .PostRenewModal .InlineHintComponent {
    margin-left: var(--spacing-xs);
    min-width: 18px;
    width: 18px;
    height: 18px;
  }
  .PostRenewModal #schedule .schedule-info-label, .PostRenewModal #schedule .schedule-info-label > span {
    flex: 1;
  }
  .PostRenewModal #schedule .dropdown .me {
    width: 140px !important;
  }
  .PostRenewModal .dropdown .me + .l {
    width: auto !important;
    right: 20px !important;
    max-width: unset;
    border-radius: var(--radius-md);
  }
  .PostRenewModal .ComboSelectorComponent > .l > div .title-wrapper {
    font-size: 13px;
  }
  .PostRenewModal #schedule, .PostRenewModal .pay .pay-info {
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--spacing-md);
  }
  .PostRenewModal .pay .pay-info .pay-info-row > * {
    font-size: 14px;
  }
  .PostRenewModal .renew-content, .PostRenewModal .DialogIconLayoutComponent {
    gap: var(--spacing-xl);
  }
  .PostRenewModal .renew-content > .InlineTabComponent.pmTabs > div:first-child > div {
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .PostRenewModal .ComboSelectorComponent > .me > div,
  .PostRenewModal .renew-modal-description * {
    font-size: 14px !important;
  }
  .PostRenewModal .renew-modal-description svg {
    width: 12px;
    height: 12px;
  }
  .PostRenewModal .InlineTabComponent > div:nth-child(2) {
    padding-top: var(--spacing-xl);
  }
  .PostRenewModal .renew-content > .InlineTabComponent > div:nth-child(2) {
    padding-top: var(--spacing-md);
  }
  .PostRenewModal .pay .pay-info .l {
    text-align: left;
  }
  .PostRenewModal .schedule-rows-container > * {
    width: calc(33% - 21px);
  }
  .PostRenewModal .renewed .schedule-rows-container > * {
    width: calc(50% - 20px);
  }
  .PostRenewModal .schedule-rows-container {
    margin: var(--spacing-lg) var(--spacing-none) var(--spacing-xs);
  }
  .PostRenewModal .ComboSelectorComponent > .l > div.s {
    display: flex !important;
  }
  #schedule .schedule-info-label,
  #schedule .schedule-info-label *,
  .PostRenewModal #schedule .schedule-rows-container * {
    font-size: 13px;
    line-height: var(--spacing-lg);
  }
  #dialog:has(.PostRenewModal) {
    margin-top: var(--spacing-lg);
  }
  .PostRenewModal .renew-modal-wrapper .InlineTabComponent.pmTabs.tabs-restyle > div:nth-child(2) > div:nth-child(2) {
    width: 0;
  }
}
.PostsFilterComponent {
  font-size: 12px;
  position: relative;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  text-align: left;
}
.PostsFilterComponent input.ext {
  font-size: 14px;
  box-sizing: border-box;
  width: 76px;
  padding: var(--spacing-none);
  text-align: right;
  border: none;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  outline: none;
}
.PostsFilterComponent input.ext:last-of-type {
  padding-right: var(--spacing-alt-xs);
}
.PostsFilterComponent input.ext::placeholder {
  color: var(--gray-900);
  opacity: 0.3;
}
.PostsFilterComponent input.ext:focus {
  border-bottom: 1px solid var(--brand-400);
  box-shadow: none;
}
.PostsFilterComponent a.btn {
  position: absolute;
  top: 14px;
  right: -24px;
  display: none;
  opacity: 0.9;
}
.PostsFilterComponent a.btn:hover {
  opacity: 1;
}
.PostsFilterComponent a.btn > img {
  width: 24px;
  height: 24px;
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}
.PostsFilterComponent img.cb {
  width: 13px;
  height: 13px;
  margin: var(--spacing-xxs) var(--spacing-xs) var(--spacing-none) var(--spacing-none);
  vertical-align: top;
}
.PostsFilterComponent > form > div.title {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.15px;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.PostsFilterComponent > form > .section > .v {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.PostsFilterComponent > form > .section > .v:last-child {
  border-bottom: none;
}
.PostsFilterComponent > form > .section > .v div {
  display: flex;
  align-items: center;
}
.PostsFilterComponent > form > .section > .v label {
  font-size: 14px;
  color: var(--gray-900);
  margin-left: var(--spacing-alt-xs);
}
.PostsFilterComponent > form > .section > .v label:hover {
  cursor: pointer;
}
.PostsFilterComponent > form > .section > .v input[type=radio]:checked {
  position: relative;
  opacity: 1;
}
.PostsFilterComponent > form > .section:not(:empty) {
  background-color: var(--gray-100);
  display: flex;
  flex-direction: column;
}
.PostsFilterComponent > form > .section:not(:empty):nth-last-child(3) {
  border: none;
}
.PostsFilterComponent select {
  font-size: 12px;
  min-width: 70px;
}
.PostsFilterComponent .filter-label {
  color: var(--gray-900);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
}
.PostsFilterComponent .sline {
  margin-top: var(--spacing-alt-sm);
  padding-top: var(--spacing-alt-sm);
  border-top: 1px solid #f2f2f2;
}
.PostsFilterComponent .cl {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: var(--spacing-xxs) var(--spacing-sm) var(--spacing-xxs) var(--spacing-none);
}
.PostsFilterComponent .cl .sep {
  font-size: 1px;
  display: block;
  width: 94%;
  height: 10px;
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none);
  border-top: 1px dashed #e2e2e2;
  background-image: none;
}
.PostsFilterComponent .cl .s {
  font-weight: bold;
  color: var(--gray-900);
  display: block;
  padding: var(--spacing-sm) var(--spacing-xxs) var(--spacing-alt-xs) var(--spacing-none);
}
.PostsFilterComponent .cl .s b {
  display: block;
  padding-bottom: var(--spacing-xs);
}
.PostsFilterComponent .cl .t {
  font-weight: 700;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xs);
}
.PostsFilterComponent .cl .t a {
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}
.PostsFilterComponent .cl a {
  font-weight: normal;
  display: block;
  padding-top: var(--spacing-alt-sm);
}
.PostsFilterComponent .cl .sel {
  font-weight: 700;
  color: var(--brand-400);
  padding-top: var(--spacing-sm);
}
.PostsFilterComponent .tbar {
  display: none;
}
.PostsFilterComponent > .share {
  margin-bottom: var(--spacing-alt-sm);
  padding: var(--spacing-lg) var(--spacing-none);
  text-align: center;
  border-bottom: 1px solid #eee;
}
.PostsFilterComponent img {
  vertical-align: top;
}
.PostsFilterComponent .ComboSelectorComponent .me img {
  width: 24px;
  height: 24px;
  margin-top: var(--spacing-sm);
}
.PostsFilterComponent .ComboSelectorComponent > .me {
  max-width: 94px;
  font-size: 14px;
  justify-content: flex-end;
  max-width: 160px;
  border: none;
}
.PostsFilterComponent .ComboSelectorComponent > .me > div {
  font-size: 14px;
  width: 100%;
  color: var(--brand-400);
  display: block;
}
.PostsFilterComponent .ComboSelectorComponent > .me > div.ph {
  color: var(--gray-900);
  opacity: 0.3;
}
.PostsFilterComponent .ComboSelectorComponent > .me > span > input {
  text-align: right;
  font-size: 14px;
  line-height: 20px;
  width: 100%;
  height: 32px;
}
.PostsFilterComponent .ComboSelectorComponent > .me > span > input:focus {
  border-bottom: 1px solid var(--brand-400);
  box-shadow: none;
  border-radius: 0;
}
.PostsFilterComponent .ComboSelectorComponent.open > .me {
  box-shadow: none;
}
.PostsFilterComponent .filter-section {
  margin-bottom: var(--spacing-2xl);
}
.PostsFilterComponent .filter-section .DropdownComponent .me {
  padding: var(--spacing-alt-sm) var(--spacing-sm) !important;
  line-height: var(--line-height-md);
}
.PostsFilterComponent .filter-section .DropdownComponent .me div {
  margin-right: var(--spacing-sm);
}
.PostsFilterComponent .filter-section .DropdownComponent .me div.ph {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-body);
  letter-spacing: -0.28px;
}
.PostsFilterComponent .filter-section .DropdownComponent .me span:has(> input) {
  left: 4px;
  top: 3px;
}
.PostsFilterComponent .filter-section .verified-ads {
  display: flex;
  align-items: center;
}
.PostsFilterComponent .filter-section .verified-ads.option-container {
  position: relative;
}
.PostsFilterComponent .filter-section .verified-ads label {
  padding-left: var(--spacing-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-xl);
  letter-spacing: -0.28px;
  cursor: pointer;
}
.PostsFilterComponent .filter-section .verified-ads input[type=checkbox] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0;
}
.PostsFilterComponent .filter-section .verified-ads.option-container.selected label {
  color: var(--brad-400);
}
.PostsFilterComponent .filter-section .label-and-reset-container .label-container {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
}
.PostsFilterComponent .filter-section .label-wrapper > p.TextComponent {
  color: var(--text-100);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
}
.PostsFilterComponent .filter-section.model-section, .PostsFilterComponent .filter-section.car-compat-model-section, .PostsFilterComponent .filter-section.car-compat-generation-section {
  display: none;
}
.PostsFilterComponent .filter-section.model-section.show, .PostsFilterComponent .filter-section.car-compat-model-section.show, .PostsFilterComponent .filter-section.car-compat-generation-section.show {
  display: block;
}
.PostsFilterComponent .filter-section.model-section, .PostsFilterComponent .filter-section.car-compat-model-section {
  margin-bottom: 0;
}
.PostsFilterComponent .filter-section.car-compat-generation-section {
  margin-top: var(--spacing-2xl);
}
.PostsFilterComponent .filter-section .DropdownComponent.open > .l.sm:not(.top) {
  top: 75px;
}
.PostsFilterComponent .filter-section .RangeComponent .DropdownComponent.open > .l.sm:not(.top) {
  top: 50px;
}
.PostsFilterComponent .filter-section .DropdownComponent.open > .l.sm.top {
  bottom: 50px;
}
.PostsFilterComponent .filter-section.type-section {
  margin-bottom: var(--spacing-lg);
}
.PostsFilterComponent .BoxComponent {
  overflow: visible;
}
.PostsFilterComponent .filter-apply-container.sticky {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md) 0 var(--spacing-lg) 0;
  background: linear-gradient(to top, var(--gray-100) 75%, rgba(255, 255, 255, 0) 100%);
  z-index: 106;
  width: 100%;
}
.PostsFilterComponent .filter-apply-container.sticky .filter-apply-btn {
  width: 100%;
  height: 42px;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-alt-sm);
  background: var(--brand-400);
  color: var(--gray-100);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs);
  letter-spacing: -0.28px;
}
.PostsFilterComponent .filter-apply-container.sticky .filter-apply-btn .btn-loader {
  position: absolute;
  left: calc(50% - 12px);
  bottom: 22px;
  visibility: hidden;
  opacity: 0;
  width: 20px;
  height: 20px;
  display: block;
}
.PostsFilterComponent .filter-apply-container.sticky .filter-apply-btn .btn-loader.active {
  opacity: 1;
  visibility: visible;
}
.PostsFilterComponent .filter-apply-container.sticky .filter-apply-btn .btn-text {
  display: block;
}
.PostsFilterComponent .filter-apply-container.sticky .filter-apply-btn .btn-text.hidden {
  visibility: hidden;
  height: 0;
}
.PostsFilterComponent .MultiSelectDropdownComponent.open,
.PostsFilterComponent .DropdownComponent.open,
.PostsFilterComponent .RangeComponent:has(.DropdownComponent.open) .DropdownComponent {
  z-index: 107;
}

tr {
  vertical-align: top;
}

td {
  vertical-align: top;
}

.help .cb {
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

#mapview .PostsFilterComponent {
  margin: var(--spacing-lg);
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  background-color: var(--gray-100);
  padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  position: fixed;
  overflow-y: scroll;
  max-width: 290px;
  z-index: 1;
}

.dialog-body-unscroll:has(.PostsFilterComponent) .filter-apply-container,
.dialog-body-unscroll:has(.PostsFilterComponent) #ph {
  z-index: 101;
}

@media screen and (max-width: 1024px) {
  .PostsFilterComponent {
    position: fixed;
    z-index: 109;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    flex-direction: column;
    width: auto;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .PostsFilterComponent .tbar {
    font-size: 17px;
    position: static;
    z-index: 55;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 55px;
    background-color: var(--gray-100);
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.06);
  }
  .PostsFilterComponent .tbar div:first-child {
    width: 24px;
    height: 24px;
    margin-left: var(--spacing-sm);
    padding: var(--spacing-xs);
    border-radius: 24px;
    background: url(/img/close.png) center center no-repeat;
    background-size: 24px 24px;
    transition: all 0.2s;
  }
  .PostsFilterComponent .tbar div:last-child {
    flex: 1;
    margin-right: var(--spacing-xs);
    text-align: right;
  }
  .PostsFilterComponent .tbar div:last-child a {
    color: var(--brand-400);
    flex: 1;
    padding: var(--spacing-alt-sm);
    text-align: right;
    font-size: 16px;
    font-weight: 500;
  }
  .PostsFilterComponent form {
    overflow-x: scroll;
    flex: 1;
    background-color: var(--gray-300);
    -webkit-overflow-scrolling: touch;
  }
  .PostsFilterComponent form .section .filter-section:last-child {
    margin-bottom: 0;
  }
  .PostsFilterComponent form .section:has(.PriceComponent) {
    padding-bottom: 0;
  }
  .PostsFilterComponent .filter-label {
    margin: var(--spacing-lg) var(--spacing-md) var(--spacing-none) var(--spacing-md);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
  }
  .PostsFilterComponent .filter-label + .section:not(:empty) {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
  }
  .PostsFilterComponent > form > .section {
    max-width: 720px;
    margin: var(--spacing-alt-sm) var(--spacing-md);
    padding: var(--spacing-xxs) var(--spacing-lg);
    border: 1px solid #efefef;
    background-color: var(--gray-100);
    border-radius: 12px;
  }
  .PostsFilterComponent > form > .section:empty {
    display: none;
  }
  .PostsFilterComponent > form > .section:not(:empty) {
    gap: 4px;
    padding: var(--spacing-md);
  }
  .PostsFilterComponent > form > .section > .v {
    gap: var(--spacing-sm);
    padding: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
  }
  .PostsFilterComponent > form > .section > .v:last-child {
    padding-bottom: var(--spacing-sm);
  }
  .PostsFilterComponent > form > .section > .v:not(:first-child) {
    margin-top: var(--spacing-none);
  }
  .PostsFilterComponent > form > .section > .v label {
    font-size: 16px;
  }
  .PostsFilterComponent > form > .section:first-child {
    max-width: 720px;
    margin: var(--spacing-alt-sm) var(--spacing-md);
    padding: var(--spacing-xxs) var(--spacing-lg);
    border: 1px solid #efefef;
    background-color: var(--gray-100);
    border-radius: 12px;
  }
  .PostsFilterComponent > form > .section.mobile-business-category-filter:not(:empty) {
    gap: 8px;
  }
  .PostsFilterComponent > form > div.title {
    padding: 8px 12px 0 16px;
  }
  .PostsFilterComponent .cl {
    font-size: 15px;
  }
  .PostsFilterComponent .cl a {
    padding-top: var(--spacing-md);
    font-size: 14px;
    line-height: 24px;
  }
  .PostsFilterComponent input.ext {
    font-size: 16px;
    box-sizing: border-box;
    width: 110px;
    padding: 5px var(--spacing-xl) 5px var(--spacing-xxs);
  }
  .PostsFilterComponent .MultiSelectDropdownComponent.open,
  .PostsFilterComponent .DropdownComponent.open,
  .PostsFilterComponent .RangeComponent:has(.DropdownComponent.open) .DropdownComponent {
    z-index: unset;
  }
  .PostsFilterComponent .mobile-business-category-filter {
    display: none;
  }
  .PostsFilterComponent .mobile-business-category-filter .filter-label {
    margin: var(--spacing-none);
    color: var(--text-100);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: 700;
    letter-spacing: -0.28px;
    padding-bottom: 4px;
  }
  .PostsFilterComponent .mobile-business-category-filter .label-wrapper > p.TextComponent {
    font-weight: 700;
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent {
    position: relative;
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent > input + .me:after {
    position: absolute;
    top: calc(50% - 2.5px);
    right: 17px;
    left: auto;
    width: 5px;
    height: 5px;
    content: "";
    display: inline-block;
    pointer-events: none;
    z-index: 1;
    transition: all 0.2s ease-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-top: 1.5px solid var(--gray-900);
    border-right: 1.5px solid var(--gray-900);
    border-radius: 1.5px;
    transform: rotate(135deg);
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent > input[value]:not([value=""]) + .me:after {
    opacity: 1;
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent > .me > img {
    display: none;
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent > .me {
    padding: 2px var(--spacing-none);
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent.open > .me:after {
    transform: rotate(315deg);
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent > .me > div {
    display: flex;
    align-items: center;
  }
  .PostsFilterComponent .mobile-business-category-filter .MultiLevelDropdownComponent[data-select-group-title] > .me > div {
    display: block;
  }
  .PostsFilterComponent .mobile-business-category-filter .label-and-reset-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--brand-400);
  }
  .PostsFilterComponent .mobile-business-category-filter .category-reset-btn .TextComponent {
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-alt-xs);
  }
  .mobile-filter-title {
    display: none;
  }
}
@media screen and (max-width: 1024px) and (max-width: 1024px) {
  .mobile-filter-title {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .filter-apply-container {
    display: none;
  }
  #mapview .PostsFilterComponent {
    padding: var(--spacing-none);
    margin: var(--spacing-none);
    max-width: unset;
    z-index: 109;
  }
  #mapview .CategoryFilterButtonComponent {
    padding: var(--spacing-xxs) var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  }
  .verified-ads {
    display: flex;
    align-items: center;
  }
  .verified-ads.option-container {
    position: relative;
  }
  .verified-ads.option-container.selected:hover {
    color: var(--brad-400);
  }
  html:has(.PostsFilterComponent .DropdownComponent.open),
  html:has(.PostsFilterComponent .MultiSelectDropdownComponent.open),
  body:has(.PostsFilterComponent .DropdownComponent.open),
  body:has(.PostsFilterComponent .MultiSelectDropdownComponent.open) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  .PostsFilterComponent {
    position: fixed;
    z-index: 109;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    flex-direction: column;
    width: auto;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .PostsFilterComponent .tbar {
    font-size: 17px;
    position: static;
    z-index: 55;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 55px;
    background-color: var(--gray-100);
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.06);
  }
  .PostsFilterComponent .tbar div:first-child {
    width: 24px;
    height: 24px;
    margin-left: var(--spacing-sm);
    padding: var(--spacing-xs);
    border-radius: 24px;
    background: url(/img/close.png) center center no-repeat;
    background-size: 24px 24px;
    transition: all 0.2s;
  }
  .PostsFilterComponent .tbar div:last-child {
    flex: 1;
    margin-right: var(--spacing-xs);
    text-align: right;
  }
  .PostsFilterComponent .tbar div:last-child a {
    color: var(--brand-400);
    flex: 1;
    padding: var(--spacing-alt-sm);
    text-align: right;
    font-size: 16px;
    font-weight: 500;
  }
  .PostsFilterComponent form {
    overflow-x: scroll;
    flex: 1;
    background-color: var(--gray-300);
    -webkit-overflow-scrolling: touch;
  }
  .PostsFilterComponent .filter-label {
    margin: var(--spacing-lg) var(--spacing-md) var(--spacing-none) var(--spacing-md);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
  }
  .PostsFilterComponent .filter-label + .section:not(:empty) {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
  }
  .PostsFilterComponent > form > .section {
    max-width: 720px;
    margin: var(--spacing-alt-sm) var(--spacing-md);
    padding: var(--spacing-xxs) var(--spacing-lg);
    border: 1px solid #efefef;
    background-color: var(--gray-100);
    border-radius: 12px;
  }
  .PostsFilterComponent > form > .section:empty {
    display: none;
  }
  .PostsFilterComponent > form > .section:not(:empty) {
    gap: 4px;
    padding: var(--spacing-md);
  }
  .PostsFilterComponent > form > .section > .v {
    gap: var(--spacing-sm);
    padding: var(--spacing-alt-sm) var(--spacing-none) var(--spacing-none);
  }
  .PostsFilterComponent > form > .section > .v:last-child {
    padding-bottom: var(--spacing-sm);
  }
  .PostsFilterComponent > form > .section > .v:not(:first-child) {
    margin-top: var(--spacing-none);
  }
  .PostsFilterComponent > form > .section > .v label {
    font-size: 16px;
  }
  .PostsFilterComponent > form > .section:first-child {
    max-width: 720px;
    margin: var(--spacing-alt-sm) var(--spacing-md);
    padding: var(--spacing-xxs) var(--spacing-lg);
    border: 1px solid #efefef;
    background-color: var(--gray-100);
    border-radius: 12px;
  }
  .PostsFilterComponent > form > div.title {
    padding: 8px 12px 0 16px;
  }
  .PostsFilterComponent .cl {
    font-size: 15px;
  }
  .PostsFilterComponent .cl a {
    padding-top: var(--spacing-md);
    font-size: 14px;
    line-height: 24px;
  }
  .PostsFilterComponent input.ext {
    font-size: 16px;
    box-sizing: border-box;
    width: 110px;
    padding: 5px var(--spacing-xl) 5px var(--spacing-xxs);
  }
  .PostsFilterComponent .MultiSelectDropdownComponent.open,
  .PostsFilterComponent .DropdownComponent.open,
  .PostsFilterComponent .RangeComponent:has(.DropdownComponent.open) .DropdownComponent {
    z-index: unset;
  }
  .PostsFilterComponent:has(.MultiSelectDropdownComponent.open) form, .PostsFilterComponent:has(.DropdownComponent.open) form {
    overflow: hidden;
  }
  #mapview .PostsFilterComponent {
    padding: var(--spacing-none);
    margin: var(--spacing-none);
    max-width: unset;
    z-index: 109;
  }
  #mapview .CategoryFilterButtonComponent {
    padding: var(--spacing-xxs) var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  }
  html:has(.PostsFilterComponent .DropdownComponent.open),
  html:has(.PostsFilterComponent .MultiSelectDropdownComponent.open),
  body:has(.PostsFilterComponent .DropdownComponent.open),
  body:has(.PostsFilterComponent .MultiSelectDropdownComponent.open) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
  }
  body:has(.favorite-ads-filter-container) .PostsFilterComponent .section.mobile-business-category-filter {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
  }
}
.PostShippingConfigComponent .frow {
  padding: var(--spacing-none);
}
.PostShippingConfigComponent .frow.fdinf .e {
  color: var(--gray-800);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
}
.PostShippingConfigComponent > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xl);
  width: 100%;
}
.PostShippingConfigComponent > div .section-title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.PostShippingConfigComponent > div .del-conf {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  box-sizing: border-box;
}
.PostShippingConfigComponent > div .del-conf .frow .e {
  display: flex;
  flex-direction: column;
}
.PostShippingConfigComponent > div .del-conf .err {
  margin-left: var(--spacing-none);
  display: flex;
  align-items: center;
}
.PostShippingConfigComponent > div .del-conf, .PostShippingConfigComponent > div .del-conf .frow {
  width: 100%;
}
.PostShippingConfigComponent > div .dt,
.PostShippingConfigComponent > div .ar {
  display: none;
  width: 100%;
}
.PostShippingConfigComponent > div .dt .err,
.PostShippingConfigComponent > div .ar .err {
  margin-left: var(--spacing-none);
}
.PostShippingConfigComponent > div .dt > .frow > .e > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-2xl);
}
@media screen and (max-width: 1024px) {
  .PostShippingConfigComponent > div .dt > .frow > .e > div {
    gap: var(--spacing-lg);
  }
}
.PostShippingConfigComponent > div .dt .delivery-type + .frow .e {
  display: none;
}
@media screen and (max-width: 1024px) {
  .PostShippingConfigComponent > div {
    width: 100%;
    gap: var(--spacing-lg);
  }
}
.PostShippingConfigComponent .FESelector .lbl {
  width: 312px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.PostShippingConfigComponent .FESelector .lbl p {
  position: relative;
}
.PostShippingConfigComponent .FESelector .lbl p:after {
  position: absolute;
  content: "*";
  color: var(--error-500);
  right: -8px;
}
.PostShippingConfigComponent .FESelector .lbl p + div {
  margin-left: var(--spacing-lg);
}
@media screen and (max-width: 1024px) {
  .PostShippingConfigComponent {
    padding: var(--spacing-none) var(--spacing-md) !important;
  }
}

.PostSortingComponent {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);
}
.PostSortingComponent .me {
  background: none;
  border: none;
  padding: var(--spacing-none);
}
.PostSortingComponent .me:before {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  background-image: url(/img/redesign/icons/sort.svg);
  margin-right: var(--spacing-xs);
}
.PostSortingComponent .DropdownComponent.open > .l.sm {
  top: 32px;
  bottom: unset;
}
.PostSortingComponent .DropdownComponent.open .me > div > p > span {
  color: var(--brand-400);
}
@media screen and (max-width: 1024px) {
  .PostSortingComponent {
    padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-md);
    margin-top: var(--spacing-none);
  }
}

.PostViewReportComponent {
  color: var(--gray-600);
  transition: color 0.2s ease;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  display: block;
  padding: var(--spacing-alt-sm) var(--spacing-none);
  margin-top: -38px;
  width: auto;
  float: right;
}
@media screen and (max-width: 1024px) {
  .PostViewReportComponent {
    float: none;
    width: auto;
    margin: var(--spacing-none);
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-lg) var(--spacing-md);
    border-bottom: 1px solid var(--gray-300);
    background-color: var(--gray-100);
  }
}
.PostViewReportComponent:hover {
  text-decoration: none;
  color: var(--error-400);
}
.PostViewReportComponent:hover::before {
  filter: invert(38%) sepia(92%) saturate(4000%) hue-rotate(340deg) brightness(95%) contrast(105%);
}
.PostViewReportComponent::before {
  content: "";
  opacity: 0.5;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  vertical-align: bottom;
  background: url(/img/redesign/icons/report-flag.svg) no-repeat 0 0;
  background-size: 16px;
  transition: filter 0.2s ease, color 0.2s ease;
}

.PriceComponent {
  gap: var(--spacing-alt-xs);
  display: flex;
  flex-direction: column;
}
.PriceComponent .price-filter-label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
}
.PriceComponent .SingleSelectBubbleComponent {
  margin-top: var(--spacing-sm);
}
.PriceComponent .price-range-wrapper {
  margin: var(--spacing-lg) 0 0;
}
.PriceComponent .rgroup {
  display: flex;
  flex-direction: column;
}
.PriceComponent .rgroup input,
.PriceComponent .rgroup img,
.PriceComponent .rgroup label {
  display: block;
}
.PriceComponent .feradio-container {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-alt-sm);
  margin-bottom: var(--spacing-xxs);
}
.PriceComponent .feradio-container span {
  font-weight: 500;
}
.PriceComponent .feradio-container label {
  cursor: pointer;
  display: flex;
  margin-left: var(--spacing-xs);
  gap: var(--spacing-sm);
}

/**
Todo need to remove after filters are redesigned
 */
.PostsFilterComponent .at:has(.PriceComponent) {
  flex-direction: column !important;
}

.PostsFilterComponent .at:has(.PriceComponent) > div:has(:not(.label)) {
  width: 100%;
}

.ProductAcceptReturnsLabelComponent {
  padding: var(--spacing-alt-xs) var(--spacing-sm) var(--spacing-alt-xs) var(--spacing-alt-xs);
  border-radius: var(--radius-sm);
  color: var(--delivery-400);
  background-color: var(--accent-aerospaceOrange-light);
  width: fit-content;
  max-width: 95%;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);
}
.ProductAcceptReturnsLabelComponent img {
  width: 16px;
  height: 16px;
}

.dl .dltitle .n {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--radius-sm);
  margin: var(--spacing-none) 30px var(--spacing-none) var(--spacing-alt-md);
}
@media screen and (max-width: 1024px) {
  .dl .dltitle .n {
    margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  }
}

.ProductEnableShippingComponent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  padding: var(--spacing-none) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
  box-sizing: border-box;
}
.ProductEnableShippingComponent .modal-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.ProductEnableShippingComponent .modal-header div {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.ProductEnableShippingComponent .modal-header div > p {
  margin: var(--spacing-none);
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  flex: 1;
}
.ProductEnableShippingComponent .modal-header h2 {
  color: var(--gray-900);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-xl);
  letter-spacing: -0.4px;
  margin: var(--spacing-none);
}
.ProductEnableShippingComponent .accept-returns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ProductEnableShippingComponent .accept-returns span {
  color: var(--gray-900);
  line-height: var(--line-height-md);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.3px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.ProductEnableShippingComponent .accept-returns .FESelector {
  width: fit-content;
}
.ProductEnableShippingComponent .delivery-type {
  width: 100%;
}
.ProductEnableShippingComponent .delivery-type > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.ProductEnableShippingComponent .delivery-type .inforadio {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
}
.ProductEnableShippingComponent .delivery-type span {
  color: var(--gray-900);
  line-height: var(--line-height-md);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.3px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.ProductEnableShippingComponent .delivery-type .frow {
  display: block;
  padding: var(--spacing-none);
  width: 100%;
}
.ProductEnableShippingComponent .delivery-type .frow .e {
  display: none;
  margin: var(--spacing-4xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}
.ProductEnableShippingComponent .delivery-type .frow .e div[name=number_of_loaders] {
  justify-content: space-between;
}
.ProductEnableShippingComponent .delivery-type .frow .e div[name=number_of_loaders] .lbl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
@media screen and (max-width: 1024px) {
  .ProductEnableShippingComponent .delivery-type .frow .e {
    margin-top: var(--spacing-lg);
  }
}
.ProductEnableShippingComponent .product-confirmation > .cbox {
  gap: var(--spacing-md);
}
.ProductEnableShippingComponent .product-confirmation > .cbox div {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.ProductEnableShippingComponent .product-confirmation > .cbox div input:focus-visible {
  outline: none;
}
.ProductEnableShippingComponent .product-confirmation > .cbox div span {
  width: 18px;
  height: 18px;
}
.ProductEnableShippingComponent .action-btn {
  width: 100%;
  box-sizing: border-box;
}
.ProductEnableShippingComponent .action-btn > input {
  width: 100%;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--gray-100);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.3px;
  border-radius: var(--radius-sm);
  background: var(--brand-400);
}
.ProductEnableShippingComponent .action-btn > input:hover {
  background-color: var(--brand-300);
}
@media screen and (max-width: 1024px) {
  .ProductEnableShippingComponent {
    padding: var(--spacing-none);
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
  }
  .ProductEnableShippingComponent > div {
    gap: var(--spacing-md);
  }
  .ProductEnableShippingComponent > .accept-returns {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.ui-dialog:has(.ProductEnableShippingComponent) .ui-dialog-titlebar {
  padding: var(--spacing-none);
}

.ProductInfoComponent {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: var(--gray-300);
  transition: all 0.3s ease-out;
}
.ProductInfoComponent img {
  display: block;
  min-width: 64px;
  width: 64px;
  height: 48px;
  border-radius: var(--radius-xs);
}
.ProductInfoComponent p {
  max-width: 100%;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.ProductInfoComponent:hover p {
  color: var(--brand-400);
}
.ProductInfoComponent .BoxComponent {
  overflow: hidden;
}

.ProductPriceNegotiationSuggestSuccessModal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xl);
}
.ProductPriceNegotiationSuggestSuccessModal > .titleWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.ProductPriceNegotiationSuggestSuccessModal > .titleWrapper span {
  color: var(--gray-900);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
}
.ProductPriceNegotiationSuggestSuccessModal > .titleWrapper > div#close {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xs);
  right: var(--spacing-md);
  top: var(--spacing-md);
  border-radius: var(--radius-4xl);
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
.ProductPriceNegotiationSuggestSuccessModal > .titleWrapper > div#close:hover {
  background-color: var(--gray-300);
}
.ProductPriceNegotiationSuggestSuccessModal > .titleWrapper > div#close > img {
  width: 12px;
  height: 12px;
}
.ProductPriceNegotiationSuggestSuccessModal > .btnWrapper {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.ProductPriceNegotiationSuggestSuccessModal > .btnWrapper > a {
  width: 100%;
  height: 48px;
  text-align: center;
  padding: var(--spacing-md) var(--spacing-lg);
  transition: background-color 0.3s ease-out;
  box-sizing: border-box;
  border-radius: var(--spacing-md);
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.ProductPriceNegotiationSuggestSuccessModal > .btnWrapper > a#close {
  background-color: var(--gray-300);
}
.ProductPriceNegotiationSuggestSuccessModal > .btnWrapper > a#close:hover {
  background-color: var(--gray-400);
}
.ProductPriceNegotiationSuggestSuccessModal > .btnWrapper > a.goToChat {
  color: var(--brand-400);
  background-color: var(--brand-100);
}
.ProductPriceNegotiationSuggestSuccessModal > .btnWrapper > a.goToChat:hover {
  background-color: var(--brand-100);
}

.promotion-combo-widget-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
}

.promotion-combo-widget-wrapper > .promotion-duration-selected-value,
.promotion-combo-widget-wrapper > .promotion-combo-selected-value {
  display: none;
}

.promotion-combo-widget-wrapper .promotion-combo-header-text {
  color: var(--gray-900);
  font-size: 26px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.64px;
}

.promotion-combo-widget-wrapper .promotion-combo-header-text .promotion_combo_subtitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.16px;
  margin-top: var(--spacing-md);
}

.promotion-combo-widget-wrapper .promotion-combo-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper {
  display: flex;
  border-radius: 20px;
  background-color: var(--gray-300);
  justify-content: space-between;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info {
  padding: var(--spacing-4xl);
  display: flex;
  flex-direction: column;
  max-width: 360px;
  flex: 1;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-select-days-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
  margin-bottom: var(--spacing-lg);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-select-days-label.hide {
  display: none;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-highlight-ad-wrapper {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  visibility: visible;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-highlight-ad-wrapper.hide {
  display: none;
}

.promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-highlight-ad-wrapper label {
  display: flex;
  gap: var(--spacing-alt-xs);
  align-items: flex-start;
}

.promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-highlight-ad-wrapper label.cbox > div:first-child {
  margin-top: var(--spacing-none);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .number-of-views-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .number-of-views-wrapper .number-of-views {
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.72px;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper {
  flex: 1;
  max-width: 700px;
  border-radius: 16px;
  border: 1px solid var(--gray-900);
  background-color: var(--gray-100);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-none);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-icon-wrapper {
  height: 22px;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-icon-wrapper > img {
  height: 100%;
  width: auto;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper {
  display: flex;
  gap: var(--spacing-xl);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty,
.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview {
  width: calc((100% - 60px) / 4);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview {
  background-color: var(--info-100);
  border-radius: 8px;
  padding: var(--spacing-sm);
  margin: -8px -8px var(--spacing-none) -8px;
  transition: background-color 0.3s ease-out;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview:has(.hide) {
  margin-bottom: 30px;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview.highlighted {
  background-color: var(--brand-100);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview.highlighted .ad-price {
  color: var(--brand-400);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview .ad-img > img {
  width: 100%;
  max-width: 160px;
  height: 120px;
  border-radius: 8px;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview .ad-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.17px;
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-alt-xs) var(--spacing-none);
  transition: all 0.3s ease-out;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview .ad-label {
  width: fit-content;
  margin-bottom: var(--spacing-alt-xs);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview .ad-label.hide {
  display: none;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview .ad-label .PostLabelComponent {
  display: flex;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.12px;
  gap: var(--spacing-xs);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview .ad-label .PostLabelComponent img {
  margin: var(--spacing-none);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview .ad-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty .ad-empty-img {
  width: 100%;
  max-width: 160px;
  height: 120px;
  background-color: var(--gray-300);
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty .ad-empty-title,
.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty .ad-empty-info {
  border-radius: 2px;
  background-color: var(--gray-300);
  height: 11px;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty .ad-empty-title {
  background-color: var(--gray-500);
  height: 14px;
  width: 55%;
  margin-bottom: var(--spacing-alt-xs);
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty .ad-empty-info {
  width: 90%;
}

.promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty .ad-empty-info:last-child {
  width: 80%;
  margin-top: 3px;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection {
  display: flex;
  padding: var(--spacing-xs);
  border-radius: 10px;
  background-color: var(--gray-100);
  width: fit-content;
  margin-bottom: var(--spacing-8xl);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration {
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: 8px;
  color: var(--gray-900);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-alt-xs);
  font-size: 14px;
  font-weight: 500;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration .promotion-duration-hint-wrapper {
  position: relative;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration .promotion-duration-hint-wrapper .promotion-duration-hint {
  position: absolute;
  text-wrap: nowrap;
  border-radius: 7.5px;
  padding: 5px var(--spacing-alt-sm);
  background-color: var(--accent-aerospaceOrange);
  color: var(--gray-100);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 20px;
  bottom: 26px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration .promotion-duration-hint-wrapper img:hover + .promotion-duration-hint {
  opacity: 1;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration img {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration.selected img {
  filter: brightness(0) invert(1);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration img.selected:hover,
.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration img:hover {
  filter: invert(41%) sepia(88%) saturate(3384%) hue-rotate(355deg) brightness(102%) contrast(107%);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration.selected,
.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo.selected {
  background-color: var(--gray-100);
  cursor: default;
  box-shadow: 0 4px 20px 0 rgba(26, 29, 62, 0.0509803922);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration.selected {
  background-color: var(--gray-900);
  color: var(--gray-100);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection {
  display: flex;
  padding: var(--spacing-md);
  border-radius: 20px;
  background-color: var(--gray-300);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo {
  padding: var(--spacing-2xl);
  border-radius: 16px;
  width: 30%;
  cursor: pointer;
  transition: all 0.2s;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo:nth-child(2) {
  width: 40%;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo:hover {
  filter: brightness(110%);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo.selected:hover {
  filter: none;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-title {
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
  margin-bottom: var(--spacing-md);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos .promotion-combo-info {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos .promotion-combo-info.not-included {
  color: var(--gray-500);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos .promotion-combo-info > img {
  width: 16px;
  height: 16px;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-price-wrapper {
  display: flex;
  gap: var(--spacing-sm);
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-price-wrapper .promotion-combo-price {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.8px;
  transition: all 0.4s;
}

.promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-price-wrapper .promotion-combo-info {
  display: flex;
  padding: 3px var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
  justify-content: center;
  align-items: center;
  height: fit-content;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--gray-100);
}

.promotion-combo-widget-wrapper .promotion-combo-buttons {
  display: flex;
  gap: var(--spacing-alt-md);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-4xl);
}

.promotion-combo-widget-wrapper .promotion-combo-buttons .promotion-combo-button {
  padding: var(--spacing-alt-sm) 26px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
  cursor: pointer;
  text-align: center;
}

.promotion-combo-widget-wrapper .promotion-combo-buttons .promotion-combo-button.skip {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

.promotion-combo-widget-wrapper .promotion-combo-buttons .promotion-combo-button.skip:hover {
  background-color: var(--gray-400);
}

.promotion-combo-widget-wrapper .promotion-combo-buttons .promotion-combo-button.promote {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.promotion-combo-widget-wrapper .promotion-combo-buttons .promotion-combo-button.promote:hover {
  background-color: var(--brand-300);
}

@media screen and (max-width: 1270px) {
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-price-wrapper .promotion-combo-price {
    font-size: 32px;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos .promotion-combo-info {
    font-size: 13px;
  }
}
@media screen and (max-width: 1024px) {
  .promotion-combo-widget-wrapper {
    padding: var(--spacing-none) var(--spacing-md);
    gap: var(--spacing-xl);
  }
  .promotion-combo-widget-wrapper .promotion-combo-header-text {
    font-size: 20px;
    line-height: 28px;
    margin-top: var(--spacing-md);
  }
  .promotion-combo-widget-wrapper .promotion-combo-header-text .promotion_combo_subtitle {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.14px;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body {
    gap: var(--spacing-lg);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection {
    width: unset;
    border-radius: 12px;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-2xl);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-selection .promotion-duration .promotion-duration-hint-wrapper .promotion-duration-hint {
    right: 0;
    left: unset !important;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection {
    flex-direction: column;
    padding: var(--spacing-xs);
    border-radius: 12px;
    gap: var(--spacing-xs);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo {
    padding: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-lg);
    border-radius: 12px;
    width: auto;
    flex: 1;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo:nth-child(2) {
    width: auto;
    flex: 1;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo > div:first-child {
    flex: 1;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-title {
    font-size: 16px;
    line-height: 24px;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos {
    margin-bottom: var(--spacing-none);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos .promotion-combo-info {
    font-size: 13px;
    line-height: 16px;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-infos .promotion-combo-info > img {
    width: 12px;
    height: 12px;
    margin-top: var(--spacing-xxs);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-price-wrapper {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-price-wrapper .promotion-combo-price {
    font-size: 24px;
    line-height: 28px;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-combo-selection .promotion-combo .promotion-combo-price-wrapper .promotion-combo-info {
    font-size: 10px;
    line-height: 14px;
    width: fit-content;
    align-self: flex-end;
  }
  .promotion-combo-widget-wrapper .promotion-combo-buttons {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .promotion-combo-widget-wrapper .promotion-combo-buttons .promotion-combo-button {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    padding: var(--spacing-alt-md) var(--spacing-2xl);
    border-radius: 8px;
    width: calc(100% - 52px);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper {
    flex-direction: column;
    padding: var(--spacing-lg);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info {
    padding: var(--spacing-none);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-select-days-label {
    margin-bottom: var(--spacing-md);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .combo-highlight-ad-wrapper.hide {
    display: none;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-days-and-info .number-of-views-wrapper {
    margin-top: var(--spacing-4xl);
  }
  .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty:nth-child(3),
  .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty:nth-child(4) {
    display: none;
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper {
    margin: var(--spacing-4xl) var(--spacing-none) var(--spacing-none);
    border: 2px solid var(--gray-900);
    border-radius: 12px;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
  }
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-empty,
  .promotion-combo-widget-wrapper .promotion-combo-body .promotion-widget-days-and-preview-wrapper .combo-preview-wrapper .combo-preview-ads-wrapper .ad-preview {
    width: calc((100% - 30px) / 2);
  }
}
.PromotionComboDialogComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  padding: var(--spacing-none) var(--spacing-xxs);
}

.PromotionComboDialogComponent input:focus-visible {
  outline: none;
}

.PromotionComboDialogComponent .promotion-modal-info-text {
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.PromotionComboDialogComponent .promotion-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  border: 1px solid var(--gray-400);
  border-radius: 12px;
  padding: var(--spacing-xl);
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info.pricing .combo-info-line .combo-info-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info.gray-filled {
  background-color: var(--gray-400);
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info.gray-filled input[type=checkbox]:not(:checked) ~ span {
  border-color: var(--gray-500);
  background-color: white;
  opacity: 1;
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .wallet-balance-low-wrapper {
  color: var(--error-400);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox {
  display: flex;
  gap: var(--spacing-alt-sm);
  align-items: center;
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox > div:first-child {
  width: 16px;
  height: 16px;
  margin-top: var(--spacing-none);
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox > div:last-child {
  color: var(--brand-400);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  margin-left: var(--spacing-none);
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-title,
.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value {
  color: var(--gray-900);
  width: 185px;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-title.total-price {
  font-weight: 600;
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value {
  width: unset;
  flex: 1;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.16px;
}

.PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value.regular-weight {
  font-weight: 400;
}

.PromotionComboDialogComponent .promotion-info-wrapper .divider {
  border-top: 1px solid var(--gray-400);
}

.PromotionComboDialogComponent .promotion-modal-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 12px;
  background-color: var(--brand-400);
  color: var(--gray-100);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  cursor: pointer;
  margin-top: var(--spacing-2xl);
  transition: all 0.3s;
  text-align: center;
}

.PromotionComboDialogComponent .promotion-modal-button:hover {
  background-color: var(--brand-300);
}

.PromotionComboDialogComponent .promotion-modal-button.hidden {
  display: none;
}

.PromotionComboDialogComponent .promotion-modal-button.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.PromotionComboDialogComponent .combo-payment-failure {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  padding: var(--spacing-6xl) var(--spacing-sm) var(--spacing-10xl);
}

.PromotionComboDialogComponent .combo-payment-failure.hidden {
  display: none;
}

.PromotionComboDialogComponent .combo-payment-failure > img {
  width: 120px;
  height: 120px;
}

.PromotionComboDialogComponent .combo-payment-failure > .combo-payment-failure-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

.PromotionComboDialogComponent .combo-payment-failure > a.failure-retry-button {
  align-self: stretch;
}

@media screen and (max-width: 1024px) {
  .PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-title, .PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value {
    font-size: 14px;
    line-height: 20px;
  }
  .PromotionComboDialogComponent .promotion-modal-button {
    padding: var(--spacing-alt-md) var(--spacing-2xl);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-top: var(--spacing-none);
  }
  .PromotionComboDialogComponent .promotion-modal-button.add-funds {
    margin-top: var(--spacing-2xl);
  }
  .PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox {
    align-items: flex-start;
  }
  .PromotionComboDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox > div:first-child {
    margin-top: var(--spacing-xxs);
  }
}
.RangeComponent {
  cursor: default;
}
.RangeComponent .first-element-placeholder,
.RangeComponent .second-element-placeholder,
.RangeComponent .range-component-type {
  display: none;
}
.RangeComponent .InputComponent {
  font-size: var(--font-size-sm);
}
.RangeComponent .InputComponent,
.RangeComponent .DropdownComponent .me {
  padding: var(--spacing-alt-sm) var(--spacing-sm) !important;
  line-height: var(--line-height-md);
}
.RangeComponent .range-component-label-action {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  cursor: default;
}
.RangeComponent .range-component-label-action .range-component-label span {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
}
.RangeComponent .range-component-label-action .range-component-reset {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.RangeComponent .range-component-label-action .range-component-reset span {
  color: var(--brand-400);
  font-weight: 500;
  font-size: var(--font-size-xxs);
}
.RangeComponent .range-component-label-action .range-component-reset-none {
  display: none;
}
.RangeComponent .dropdown-range-elements-container {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
}
.RangeComponent .dropdown-range-elements-container .DropdownComponent .me > span {
  top: 4px;
  left: 4px;
}
.RangeComponent .dropdown-range-elements-container .DropdownComponent:first-child {
  margin-right: var(--spacing-xxs);
}
.RangeComponent .dropdown-range-elements-container .DropdownComponent:last-child {
  margin-left: var(--spacing-xxs);
}
.RangeComponent .dropdown-range-elements-container .DropdownComponent .l {
  max-height: 300px;
}
.RangeComponent .dropdown-range-elements-container .DropdownComponent .l > div.i {
  line-height: var(--line-height-sm);
}
.RangeComponent .input-range-elements-container {
  display: flex;
  margin-top: var(--spacing-sm);
}
.RangeComponent .input-range-elements-container .input-wrapper {
  width: 100%;
}
.RangeComponent .input-range-elements-container .input-wrapper:first-child {
  padding-right: var(--spacing-xxs);
}
.RangeComponent .input-range-elements-container .input-wrapper:last-child {
  padding-left: var(--spacing-xxs);
}
.RangeComponent:has(input:-webkit-autofill):not(:has(input:focus)) input[type=text] {
  box-shadow: inset 0 0 0 500px var(--gray-300) !important;
  -webkit-text-fill-color: inherit;
}
.RangeComponent:has(input:-webkit-autofill):not(:has(input:focus)) input[type=text] {
  box-shadow: inset 0 0 0 500px var(--gray-300) !important;
  -webkit-text-fill-color: inherit;
}

@media screen and (max-width: 1024px) {
  .RangeComponent .dropdown-range-elements-container .DropdownComponent .l {
    max-height: 85%;
  }
}
/**
TODO after releasing new filters maybe we can delete this style
 */
.PostsFilterComponent .at > .r:has(.RangeComponent .DropdownComponent) {
  overflow: visible;
}

.PostsFilterComponent > form > .section .at:has(.RangeComponent) {
  cursor: default;
}

.RejectedPostInfoAndActionComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}
.RejectedPostInfoAndActionComponent .rejection-rules {
  margin: var(--spacing-none) var(--spacing-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background-color: var(--accent-error);
  border-radius: 8px;
}
.RejectedPostInfoAndActionComponent .rejection-rules .title {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.14px;
}
.RejectedPostInfoAndActionComponent .rejection-rules .rule-row {
  display: flex;
  gap: var(--spacing-sm);
}
.RejectedPostInfoAndActionComponent .rejection-rules .rule-row .bullet-icon {
  width: 12px;
  height: 12px;
  padding-top: var(--spacing-xs);
}
.RejectedPostInfoAndActionComponent .rejection-rules .rule-row .bullet-icon > svg {
  width: 12px;
  height: 12px;
}
.RejectedPostInfoAndActionComponent .rejection-rules .rule-row .bullet-icon > svg path {
  fill: var(--error-400);
}
.RejectedPostInfoAndActionComponent .rejection-rules .rule-row .rule-info {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.RejectedPostInfoAndActionComponent .rejection-rules .rule-row.offset {
  padding-left: var(--spacing-xl);
}
.RejectedPostInfoAndActionComponent a.rejected-post-action-btn {
  margin-left: var(--spacing-md);
  padding: var(--spacing-md);
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  background-color: var(--gray-300);
  border-radius: 8px;
  width: fit-content;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--gray-900);
}
.RejectedPostInfoAndActionComponent a.rejected-post-action-btn > div.change-category-text > span {
  color: var(--brand-400);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.RejectedPostInfoAndActionComponent a.rejected-post-action-btn:hover {
  background-color: var(--gray-400);
}
.RejectedPostInfoAndActionComponent a.rejected-post-action-btn > svg {
  width: 20px;
  height: 20px;
}

.SelectBoxComponent {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xs);
}
.SelectBoxComponent .me {
  background: none;
  border: none;
  padding: var(--spacing-none);
}
.SelectBoxComponent .DropdownComponent.open > .l.sm {
  top: 32px;
  bottom: unset;
  width: 400px;
  left: calc(100% - 400px);
}
.SelectBoxComponent .DropdownComponent.open .me > div > p > span {
  color: var(--brand-400);
}

.bundle-section .item-value.bundle .SelectBoxComponent {
  width: 100%;
}
.bundle-section .item-value.bundle .SelectBoxComponent .DropdownComponent .me div:first-child, .bundle-section .item-value.bundle .SelectBoxComponent .DropdownComponent .me p.TextComponent {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-md);
  letter-spacing: -0.15px;
}

.renew-content .SelectBoxComponent .DropdownComponent .me div:first-child {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
}

.SelectBoxComponent .DropdownComponent div.title-wrapper {
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
}

@media screen and (max-width: 1024px) {
  .SelectBoxComponent .DropdownComponent .me div:first-child {
    max-width: 200px;
  }
}
.SingleSelectBubbleComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.SingleSelectBubbleComponent .label-and-reset-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xxs);
}
.SingleSelectBubbleComponent .label-and-reset-container .label-container {
  font-weight: 600;
  font-size: 14px;
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}
.SingleSelectBubbleComponent .label-and-reset-container .reset-btn {
  font-weight: 500;
  font-size: 12px;
  line-height: var(--spacing-lg);
  opacity: 1;
  height: auto;
  color: var(--brand-400);
  cursor: pointer;
}
.SingleSelectBubbleComponent .label-and-reset-container .reset-btn.hidden {
  opacity: 0;
  height: 0;
}
.SingleSelectBubbleComponent .options-container {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.SingleSelectBubbleComponent .options-container .option-container {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-alt-xs) var(--spacing-md);
  border-radius: var(--spacing-10xl);
  background-color: var(--gray-300);
  color: var(--gray-900);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  transition: all 0.2s;
  user-select: none;
  border: 1px solid var(--gray-300);
}
.SingleSelectBubbleComponent .options-container .option-container .option-container-icon {
  display: flex;
  align-items: center;
}
.SingleSelectBubbleComponent .options-container .option-container .option-container-icon svg {
  max-width: 14px;
  height: 14px;
}
.SingleSelectBubbleComponent .options-container .option-container:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.SingleSelectBubbleComponent .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px var(--brand-400) solid;
}
.SingleSelectBubbleComponent .options-container .option-container.not-selected:hover {
  color: var(gray-100);
}
.SingleSelectBubbleComponent .options-container .option-container.disabled {
  pointer-events: none;
  opacity: 0.7;
}
.SingleSelectBubbleComponent.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.SingleSelectBubbleComponent.disabled .label-and-reset-container .reset-btn {
  display: none;
}
.SingleSelectBubbleComponent.felement_err {
  border: none !important;
}
.SingleSelectBubbleComponent.felement_err .options-container .option-container {
  border: 1px solid var(--error-400);
  background-color: var(--gray-100);
}

.irt .SingleSelectBubbleComponent .option-container {
  padding: var(--spacing-alt-sm) var(--spacing-lg);
}

@media screen and (max-width: 1024px) {
  .SingleSelectBubbleComponent .options-container .option-container:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px var(--gray-300) solid;
  }
  .SingleSelectBubbleComponent .options-container .option-container.selected:hover {
    color: var(--brand-400);
    background-color: var(--brand-100);
    border: 1px var(--brand-400) solid;
  }
}
#dialog .StartCompanyVerificationModal {
  padding: var(--spacing-2xl) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
#dialog .StartCompanyVerificationModal .title {
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.52px;
}
#dialog .StartCompanyVerificationModal .description {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
#dialog .StartCompanyVerificationModal .benefits {
  display: flex;
  gap: var(--spacing-md);
}
#dialog .StartCompanyVerificationModal .benefits .benefit {
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
  background-color: var(--gray-200);
  border-radius: 12px;
}
#dialog .StartCompanyVerificationModal .benefits .benefit > span {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
}
#dialog .StartCompanyVerificationModal .requirements {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
}
#dialog .StartCompanyVerificationModal .requirements .requirements-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.16px;
}
#dialog .StartCompanyVerificationModal .requirements ul.requirements-content {
  padding-left: var(--spacing-2xl);
  margin: var(--spacing-none);
}
#dialog .StartCompanyVerificationModal .requirements ul.requirements-content .requirement {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
#dialog .StartCompanyVerificationModal .action-buttons {
  display: flex;
  gap: var(--spacing-xl);
}
#dialog .StartCompanyVerificationModal .action-buttons .cancel-button,
#dialog .StartCompanyVerificationModal .action-buttons .start-button {
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.16px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#dialog .StartCompanyVerificationModal .action-buttons .cancel-button {
  margin: var(--spacing-none);
  width: 192px;
  background-color: var(--gray-300);
  color: var(--gray-900);
}
#dialog .StartCompanyVerificationModal .action-buttons .cancel-button:hover {
  background-color: var(--gray-400);
}
#dialog .StartCompanyVerificationModal .action-buttons .start-button {
  flex: 1;
  background-color: var(--brand-400);
  color: var(--gray-100);
}
#dialog .StartCompanyVerificationModal .action-buttons .start-button:hover {
  background-color: var(--brand-300);
}

@media screen and (max-width: 1024px) {
  #dialog .StartCompanyVerificationModal {
    padding: var(--spacing-md) var(--spacing-none);
    gap: var(--spacing-md);
  }
  #dialog .StartCompanyVerificationModal .action-buttons {
    flex-direction: column;
  }
  #dialog .StartCompanyVerificationModal .action-buttons > p.cancel-button {
    width: auto;
  }
  #dialog .StartCompanyVerificationModal .description {
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
  }
  #dialog .StartCompanyVerificationModal .benefits {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  #dialog .StartCompanyVerificationModal .benefits .benefit > span {
    font-size: 13px;
    line-height: 18px;
  }
  #dialog .StartCompanyVerificationModal .requirements {
    gap: var(--spacing-sm);
  }
  #dialog .StartCompanyVerificationModal .requirements .requirements-title {
    font-size: 15px;
  }
  #dialog .StartCompanyVerificationModal .requirements ul.requirements-content .requirement {
    font-size: 15px;
    line-height: 24px;
  }
  #dialog .StartCompanyVerificationModal .action-buttons {
    gap: var(--spacing-md);
  }
  #dialog .StartCompanyVerificationModal .action-buttons .cancel-button,
  #dialog .StartCompanyVerificationModal .action-buttons .start-button {
    font-size: 15px;
    line-height: 24px;
  }
}
.street-autocomplete-list.ui-autocomplete {
  padding-left: 0;
  box-sizing: border-box;
  padding-top: var(--spacing-alt-xs);
  padding-bottom: var(--spacing-alt-xs);
  z-index: 110;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  height: max-content;
}
.street-autocomplete-list.ui-autocomplete .ui-menu-item {
  width: 100%;
  cursor: pointer;
}
.street-autocomplete-list.ui-autocomplete .ui-menu-item:not(.ui-state-disabled):hover {
  background-color: var(--gray-300);
}
.street-autocomplete-list.ui-autocomplete .ui-menu-item.ui-state-disabled > .ui-menu-item-wrapper .street-title {
  color: var(--gray-700);
  text-align: center;
  font-weight: 400;
}
.street-autocomplete-list.ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
  padding: var(--spacing-alt-xs) var(--spacing-lg) var(--spacing-alt-xs) var(--spacing-md);
  display: flex;
  flex-direction: column;
}
.street-autocomplete-list.ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper .street-title, .street-autocomplete-list.ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper .street-location {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.street-autocomplete-list.ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper .street-location {
  color: var(--gray-600);
}
.street-autocomplete-list.ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper .i,
.street-autocomplete-list.ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper .i > div,
.street-autocomplete-list.ui-autocomplete .ui-menu-item > .ui-menu-item-wrapper .i > div > div {
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.StreetFilterComponent .section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.StreetFilterComponent .section .street-search-input {
  padding: var(--spacing-alt-sm) var(--spacing-sm);
  line-height: var(--line-height-md);
  font-size: var(--font-size-sm);
}
.StreetFilterComponent .section .label-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.StreetFilterComponent .section .label-wrapper .reset-btn {
  font-weight: 500;
  font-size: var(--font-size-xxs);
  line-height: var(--spacing-lg);
  opacity: 1;
  height: auto;
  color: var(--brand-400);
  cursor: pointer;
}
.StreetFilterComponent .section .label-wrapper .reset-btn.hidden {
  opacity: 0;
  height: 0;
}
.StreetFilterComponent .section .label-wrapper .label {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
}

@media screen and (max-width: 1024px) {
  .StreetFilterComponent .addr:has(> .street-search-input) {
    position: relative;
  }
  .StreetFilterComponent .street-autocomplete-list.ui-autocomplete {
    position: absolute;
    top: 46px !important;
    left: 0 !important;
    padding-top: 0;
    margin: 0;
  }
}
[role=dialog]:has(.SuccessScreenComponent) .ui-dialog-title {
  display: none;
}

#dialog:has(.SuccessScreenComponent) {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-6xl);
}

.ui-dialog:has(.SuccessScreenComponent) .ui-dialog-titlebar {
  display: flex;
}

.SuccessScreenComponent .img {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4xl);
}

.SuccessScreenComponent svg {
  width: 320px;
  height: 220px;
}

.SuccessScreenComponent {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--spacing-6xl);
}

.SuccessScreenComponent .label {
  color: var(--gray-900);
  text-align: center;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-3xl);
}

.SuccessScreenComponent .cta-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.SuccessScreenComponent a {
  display: flex;
  padding: var(--spacing-md) var(--spacing-2xl);
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  border-radius: var(--spacing-md, 12px);
  background: var(--brand-400);
  color: var(--gray-100);
  max-width: 240px;
}

.SuccessScreenComponent a:hover {
  color: var(--gray-100);
}

@media screen and (max-width: 1024px) {
  .SuccessScreenComponent {
    margin-bottom: var(--spacing-3xl);
  }
}
.SuggestPriceComponent {
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-lg);
}
.SuggestPriceComponent > span.title {
  color: var(--gray-900);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-2xl);
  letter-spacing: -0.48px;
  margin-bottom: var(--spacing-xs);
}
.SuggestPriceComponent .section-title {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-sm);
  letter-spacing: -0.14px;
}
.SuggestPriceComponent > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.SuggestPriceComponent > div > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.SuggestPriceComponent > div > div > input {
  width: 100%;
  height: 56px;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-md);
  background: var(--gray-300);
  color: var(--gray-900);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
}
.SuggestPriceComponent > div > div > input:focus {
  border-color: var(--gray-900);
}
.SuggestPriceComponent > div > div > .initial-price {
  color: var(--gray-700);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.14px;
}
.SuggestPriceComponent > .suggestionReasonSection > span {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-sm);
  letter-spacing: -0.14px;
}
.SuggestPriceComponent > .suggestionReasonSection > textarea {
  width: 100%;
  height: 108px;
  border-radius: var(--radius-md);
  background: var(--gray-300);
  color: var(--gray-900);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
  padding: var(--spacing-md);
}
.SuggestPriceComponent > .suggestionReasonSection > textarea:focus {
  border-color: var(--gray-900);
}
.SuggestPriceComponent > .submitAction {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--spacing-md);
  background: var(--brand-400);
  transition: background-color 0.3s ease-out;
}
.SuggestPriceComponent > .submitAction:hover {
  background-color: var(--brand-300);
}
@media screen and (max-width: 1024px) {
  .SuggestPriceComponent {
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
    margin-top: var(--spacing-none);
  }
  .SuggestPriceComponent > div > span.title {
    font-size: 20px;
    line-height: var(--line-height-lg);
    letter-spacing: -0.4px;
  }
}

.SwitchComponent {
  display: flex;
  align-items: center;
}
.SwitchComponent .switch-container {
  display: flex;
  position: relative;
}
.SwitchComponent .switch-container input[type=checkbox] {
  width: 100%;
  height: 100%;
  margin: var(--spacing-none);
  cursor: pointer;
}
.SwitchComponent .switch-container .switch {
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-700);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 32px;
  position: relative;
  background-image: none;
  border: none;
}
.SwitchComponent .switch-container .switch:before {
  content: "";
  background-color: var(--gray-100);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
  position: absolute;
}
.SwitchComponent.primary-blue .switch-container input[type=checkbox]:checked + .switch {
  background-color: var(--brand-400);
}
.SwitchComponent.delivery-orange .switch-container input[type=checkbox]:checked + .switch {
  background-color: var(--delivery-400);
}
.SwitchComponent.error-red .switch-container input[type=checkbox]:checked + .switch {
  background-color: var(--error-400);
}
.SwitchComponent .switch-text {
  cursor: pointer;
}
.SwitchComponent.small-switch {
  gap: var(--spacing-sm);
}
.SwitchComponent.small-switch .switch {
  width: 24px;
  height: 16px;
}
.SwitchComponent.small-switch .switch:before {
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
}
.SwitchComponent.small-switch input[type=checkbox]:checked + .switch:before {
  -webkit-transform: translateX(8px);
  -ms-transform: translateX(8px);
  transform: translateX(8px);
}
.SwitchComponent.small-switch .switch-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;
}
.SwitchComponent.medium-switch {
  gap: var(--spacing-sm);
}
.SwitchComponent.medium-switch .switch {
  width: 32px;
  height: 20px;
}
.SwitchComponent.medium-switch .switch:before {
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
}
.SwitchComponent.medium-switch input[type=checkbox]:checked + .switch:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
}
.SwitchComponent.medium-switch .switch-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.28px;
}
.SwitchComponent.large-switch {
  gap: var(--spacing-md);
}
.SwitchComponent.large-switch .switch {
  width: 48px;
  height: 28px;
}
.SwitchComponent.large-switch .switch:before {
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
}
.SwitchComponent.large-switch input[type=checkbox]:checked + .switch:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.SwitchComponent.large-switch .switch-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}

.TextAreaComponent {
  height: unset;
  width: 100%;
  overflow-y: auto;
  display: flex;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--gray-300);
  color: var(--gray-900);
  cursor: text;
  transition: all 0.2s;
}
.TextAreaComponent + .counterVal {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 12px;
  padding: var(--spacing-xxs) var(--spacing-alt-xs) var(--spacing-xxs) var(--spacing-xxs);
  color: var(--gray-500);
  background-color: var(--gray-300);
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-xs) 0 var(--radius-sm) 0;
  transition: all 0.2s;
}
.TextAreaComponent::placeholder {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 500;
}
.TextAreaComponent:hover {
  border-color: var(--gray-400);
}
.TextAreaComponent:hover + .counterVal {
  border-color: var(--gray-400);
}
.TextAreaComponent:focus {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.TextAreaComponent:focus + .counterVal {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.TextAreaComponent:disabled {
  background: var(--gray-200);
  color: var(--gray-500);
  cursor: unset;
}
.TextAreaComponent.felement_err, .TextAreaComponent.felement_err:focus {
  background-color: var(--gray-100);
  border-color: var(--error-400) !important;
  box-shadow: none !important;
}
.TextAreaComponent.felement_err::placeholder, .TextAreaComponent.felement_err:focus::placeholder {
  color: var(--gray-500) !important;
}
.TextAreaComponent.felement_err + .counterVal, .TextAreaComponent.felement_err:focus + .counterVal {
  color: var(--error-400);
  background-color: var(--gray-100);
  border-color: var(--error-400);
}

@media screen and (max-width: 1024px) {
  .TextAreaComponent {
    height: 300px;
  }
}
.TextComponent {
  padding: var(--spacing-none);
  margin: var(--spacing-none);
  white-space: normal;
  word-wrap: break-word;
}
.l.asterisk .TextComponent {
  position: relative;
  display: inline;
}
.l.asterisk .TextComponent:first-of-type:after {
  position: absolute;
  content: "*";
  color: var(--error-500);
  right: -10px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
}

.frow .l .TextComponent {
  color: var(--gray-700);
}

.frow .l .apply .TextComponent {
  color: var(--gray-100);
}

.TopCategoryListComponent {
  border-bottom: none;
  text-align: left;
  color: var(--gray-900);
}

.TopCategoryListComponent > .title {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.16px;
  text-transform: none;
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-xs);
}

.TopCategoryListComponent > .section {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-900);
  padding: var(--spacing-alt-md) var(--spacing-none) var(--spacing-xs) var(--spacing-none);
  align-items: center;
}

.TopCategoryListComponent > .section a,
.TopCategoryListComponent > .section div.sel {
  padding-top: var(--spacing-none);
  display: flex;
  gap: var(--spacing-sm);
}

.TopCategoryListComponent > .section > div.sel > span {
  font-weight: 700;
  color: var(--brand-400);
}

.TopCategoryListComponent > .section img {
  width: 20px;
  height: 20px;
}

.TopCategoryListComponent > .section span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  line-height: 20px;
}

@media screen and (max-width: 1024px) {
  .TopCategoryListComponent {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-2xl) var(--spacing-none);
  }
  .TopCategoryListComponent .title {
    display: none;
  }
  .TopCategoryListComponent img {
    display: none;
  }
  .TopCategoryListComponent .section {
    margin-left: var(--spacing-none);
    padding: var(--spacing-none);
  }
  .TopCategoryListComponent > div.section ~ div.section {
    margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-sm);
  }
  .TopCategoryListComponent .section a,
  .TopCategoryListComponent .section div.sel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-none);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 8px;
  }
  .TopCategoryListComponent .section div.sel {
    background: var(--brand-400);
  }
  .TopCategoryListComponent > .section > div.sel > span {
    font-weight: 500;
    color: white;
  }
  .TopCategoryListComponent .section a {
    color: var(--gray-900);
    background: var(--gray-300);
  }
  .TopCategoryListComponent::-webkit-scrollbar {
    display: none;
  }
  .TopCategoryListComponent > .section span {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
}
/* @TODO class name needs to be the component name - UserAccountTypeChangeComponent */
.change-account-type-wrapper {
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.change-account-type-wrapper .change-account-type-title {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.52px;
}

.change-account-type-wrapper .change-account-type-title .hlp_icon > div {
  width: 24px;
  max-width: 24px;
  height: 24px;
  background-color: var(--gray-400);
}

.change-account-type-wrapper .change-account-type-title .hlp_icon:hover > div {
  background-color: var(--gray-400);
}

.change-account-type-wrapper .change-account-type-body {
  display: flex;
  gap: var(--spacing-lg);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper {
  flex: 1;
  padding: var(--spacing-xl);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.professional {
  background: rgba(176, 151, 255, 0.1);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.professional:hover {
  background: rgba(176, 151, 255, 0.2);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic {
  background: rgba(242, 242, 246, 0.5);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic:hover {
  background-color: rgb(242, 242, 246);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business {
  background: rgba(223, 238, 255, 0.5);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business:hover {
  background: rgba(223, 238, 255, 0.9);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-name-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-xs);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .mobile-only-price-and-cta-wrapper {
  display: none;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business .business-only-name-price-wrapper {
  display: flex;
  justify-content: space-between;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-name-wrapper .account-type-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.4px;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-name-wrapper .account-type-info-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--gray-600);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-price-wrapper {
  height: 64px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .business-only-name-price-wrapper .account-type-price-wrapper {
  align-items: flex-end;
  min-width: 130px;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-price-wrapper .account-type-price {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.64px;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-price-wrapper .account-type-price-frequency {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-cta-button-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-cta-button {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.34px;
  text-align: center;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .current-plan-label {
  display: flex;
  padding: var(--spacing-xs) var(--spacing-sm);
  width: fit-content;
  justify-content: center;
  align-items: center;
  border-radius: 1000px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.24px;
  margin-bottom: -8px;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .current-plan-label {
  background-color: var(--gray-100);
  color: var(--gray-700);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.professional .current-plan-label {
  background-color: var(--gray-100);
  color: var(--accent-tropicalIndigo-dark);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business .current-plan-label {
  background-color: var(--gray-100);
  color: var(--brand-400);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .account-type-cta-button {
  background-color: var(--gray-400);
  color: var(--gray-600);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.professional .account-type-cta-button,
.change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .account-type-cta-button.prolong {
  background-color: var(--accent-tropicalIndigo-dark);
  color: var(--gray-100);
  cursor: pointer;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.professional .account-type-cta-button:hover,
.change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .account-type-cta-button.prolong:hover {
  background-color: var(--accent-tropicalIndigo-dark);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.professional .disabled .account-type-cta-button,
.change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .disabled .account-type-cta-button.prolong {
  background-color: rgba(176, 151, 255, 0.3);
  color: rgba(140, 104, 255, 0.8);
  cursor: default;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business .account-type-cta-button {
  background-color: var(--brand-400);
  color: var(--gray-100);
  cursor: pointer;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business .account-type-cta-button:hover {
  background-color: var(--brand-300);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business .disabled .account-type-cta-button {
  background-color: rgba(0, 120, 249, 0.2);
  color: var(--brand-400);
  cursor: default;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business .account-type-cta-button-wrapper.business-only {
  width: fit-content;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper .account-type-info-title {
  display: flex;
  align-items: flex-end;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.professional .account-type-info-wrapper .account-type-info-title {
  color: var(--accent-tropicalIndigo-dark);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper.business .account-type-info-wrapper .account-type-info-title {
  color: var(--brand-400);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper .account-type-info-point {
  display: flex;
  gap: var(--spacing-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper .account-type-info-point > img {
  width: 16px;
  height: 16px;
  margin-top: var(--spacing-xxs);
}

.change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper .account-type-info-point > .account-type-info-point-body .bold {
  font-weight: 700;
}

#dialog .account-type-change-modal-wrapper .account-type-change-success,
#dialog .account-type-change-modal-wrapper .account-type-change-failure {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  padding: var(--spacing-6xl) var(--spacing-sm) var(--spacing-10xl);
}

#dialog .account-type-change-modal-wrapper .account-type-desc {
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

#dialog .account-type-change-modal-wrapper .account-type-change-success.hidden,
#dialog .account-type-change-modal-wrapper .account-type-change-failure.hidden {
  display: none;
}

#dialog .account-type-change-modal-wrapper .account-type-change-success > img,
#dialog .account-type-change-modal-wrapper .account-type-change-failure > img {
  width: 120px;
  height: 120px;
}

#dialog .account-type-change-modal-wrapper .account-type-change-success > .account-type-change-success-text,
#dialog .account-type-change-modal-wrapper .account-type-change-failure > .account-type-change-failure-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

#dialog .account-type-change-modal-wrapper .account-type-change-success > a.success-next-button,
#dialog .account-type-change-modal-wrapper .account-type-change-failure > a.failure-retry-button {
  align-self: stretch;
}

#dialog .account-type-change-modal-wrapper .funds .t {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.16px;
  margin-bottom: var(--spacing-none);
}

@media screen and (max-width: 1024px) {
  .change-account-type-wrapper {
    padding: var(--spacing-none) var(--spacing-md);
    gap: var(--spacing-lg);
  }
  .change-account-type-wrapper .change-account-type-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.4px;
  }
  .change-account-type-wrapper .change-account-type-body {
    flex-direction: column;
    gap: var(--spacing-alt-sm);
    margin-bottom: var(--spacing-alt-sm);
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper {
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
    border-radius: 12px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper > div:first-child:not(.current-plan-label) {
    display: none;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-name-wrapper {
    gap: var(--spacing-alt-xs);
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-name-wrapper .account-type-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.16px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper .account-type-info-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-name-wrapper .account-type-info-name {
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-price-wrapper,
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-cta-button-wrapper {
    display: none;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-cta-button-wrapper.business-only {
    display: flex;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-cta-button {
    flex: unset;
    min-width: 160px;
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .mobile-only-price-and-cta-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: var(--spacing-xs);
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .mobile-only-price-and-cta-wrapper .account-type-price-wrapper,
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .mobile-only-price-and-cta-wrapper .account-type-cta-button-wrapper {
    display: flex;
    flex: unset;
    height: fit-content;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-price-wrapper .account-type-price {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.48px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .account-type-cta-button {
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.26px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper {
    gap: var(--spacing-alt-sm);
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper .account-type-info-point {
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper .account-type-info-wrapper .account-type-info-point > img {
    width: 12px;
    height: 12px;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .account-type-info-wrapper .account-type-info-point {
    display: none;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic.show-items .account-type-info-wrapper .account-type-info-point {
    display: flex;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .account-type-info-wrapper .account-type-info-title {
    position: relative;
    cursor: pointer;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic .account-type-info-wrapper .account-type-info-title::after {
    content: "";
    background-image: url(/img/redesign/icons/chevron-down-32.svg);
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    transition: 0.3s all;
  }
  .change-account-type-wrapper .change-account-type-body .account-type-wrapper.basic.show-items .account-type-info-wrapper .account-type-info-title::after {
    transform: rotate(180deg);
  }
}
.UserAccountTypeChangeDialogComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  padding: var(--spacing-none) var(--spacing-xxs);
}

.UserAccountTypeChangeDialogComponent input:focus-visible {
  outline: none;
}

.UserAccountTypeChangeDialogComponent .promotion-modal-info-text {
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  border: 1px solid var(--gray-400);
  border-radius: 12px;
  padding: var(--spacing-xl);
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info.pricing .combo-info-line .combo-info-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info.gray-filled {
  background-color: var(--gray-400);
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info.gray-filled input[type=checkbox]:not(:checked) ~ span {
  border-color: var(--gray-500);
  background-color: white;
  opacity: 1;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .wallet-balance-low-wrapper {
  color: var(--error-400);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox {
  display: flex;
  gap: var(--spacing-alt-sm);
  align-items: center;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox > div:first-child {
  width: 16px;
  height: 16px;
  margin-top: var(--spacing-none);
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox > div:last-child {
  color: var(--brand-400);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  margin-left: var(--spacing-none);
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-title,
.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value {
  color: var(--gray-900);
  width: 185px;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-title.total-price {
  font-weight: 600;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value {
  width: unset;
  flex: 1;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.16px;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value.regular-weight {
  font-weight: 400;
}

.UserAccountTypeChangeDialogComponent .promotion-info-wrapper .divider {
  border-top: 1px solid var(--gray-400);
}

.UserAccountTypeChangeDialogComponent .promotion-modal-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: 12px;
  background-color: var(--brand-400);
  color: var(--gray-100);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  cursor: pointer;
  margin-top: var(--spacing-2xl);
  transition: all 0.3s;
  text-align: center;
}

.UserAccountTypeChangeDialogComponent .promotion-modal-button:hover {
  background-color: var(--brand-300);
}

.UserAccountTypeChangeDialogComponent .promotion-modal-button.hidden {
  display: none;
}

.UserAccountTypeChangeDialogComponent .promotion-modal-button.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.UserAccountTypeChangeDialogComponent .combo-payment-failure {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  align-items: center;
  padding: var(--spacing-6xl) var(--spacing-sm) var(--spacing-10xl);
}

.UserAccountTypeChangeDialogComponent .combo-payment-failure.hidden {
  display: none;
}

.UserAccountTypeChangeDialogComponent .combo-payment-failure > img {
  width: 120px;
  height: 120px;
}

.UserAccountTypeChangeDialogComponent .combo-payment-failure > .combo-payment-failure-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

.UserAccountTypeChangeDialogComponent .combo-payment-failure > a.failure-retry-button {
  align-self: stretch;
}

@media screen and (max-width: 1024px) {
  .UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-title, .UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-info-line .combo-info-value {
    font-size: 14px;
    line-height: 20px;
  }
  .UserAccountTypeChangeDialogComponent .promotion-modal-button {
    padding: var(--spacing-alt-md) var(--spacing-2xl);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-top: var(--spacing-none);
  }
  .UserAccountTypeChangeDialogComponent .promotion-modal-button.add-funds {
    margin-top: var(--spacing-2xl);
  }
  .UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox {
    align-items: flex-start;
  }
  .UserAccountTypeChangeDialogComponent .promotion-info-wrapper .promotion-info .combo-prompt-upgrade-wrapper label.cbox > div:first-child {
    margin-top: var(--spacing-xxs);
  }
}
.UserBankAccountAddEditComponent {
  min-height: 504px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  padding: var(--spacing-sm);
}
.UserBankAccountAddEditComponent h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.UserBankAccountAddEditComponent .form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.UserBankAccountAddEditComponent .form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.UserBankAccountAddEditComponent .form .form-group label {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}
.UserBankAccountAddEditComponent .form .form-group .err {
  font-size: 13px;
  color: var(--error-500) !important;
  margin-top: var(--spacing-sm);
}
.UserBankAccountAddEditComponent .actions {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.UserBankAccountAddEditComponent .actions input {
  background: var(--brand-400);
  flex: 1;
  height: 48px;
  padding: var(--spacing-alt-md);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--gray-100);
  cursor: pointer;
}
.UserBankAccountAddEditComponent .actions input.disabled {
  background: var(--gray-300);
  color: var(--gray-500);
}
@media screen and (max-width: 1024px) {
  .UserBankAccountAddEditComponent {
    min-height: calc(100vh - 48px - var(--spacing-4xl));
  }
}

.UserEditResumeComponent .resume-container {
  display: none;
}

.UserInfoComponent .uiwrapper {
  display: flex;
  gap: var(--spacing-lg);
  position: relative;
}
.UserInfoComponent .uiwrapper > a.n > img.av_comp,
.UserInfoComponent .uiwrapper > a.n > img.av_user {
  width: 64px;
  height: 64px;
}
.UserInfoComponent .uiwrapper .r {
  position: absolute;
  top: 0;
  right: 0;
}
.UserInfoComponent .uiwrapper .r div.reviews,
.UserInfoComponent .uiwrapper .r div.no-reviews {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xxs);
  font-weight: 500;
}
.UserInfoComponent .uiwrapper .username > a.n > span.nmsp {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  max-width: 450px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.UserInfoComponent .uiwrapper .username > .user-verified-badge-cont {
  margin-top: var(--spacing-sm);
}
.UserInfoComponent .uiwrapper .additional-info {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  color: var(--gray-600);
}

.verif-icon-cont {
  margin: var(--spacing-xxs) var(--spacing-none) var(--spacing-sm);
}
.verif-icon-cont .verif-icon {
  background-color: var(--accent-tropicalIndigo-light);
  padding: 5px var(--spacing-alt-xs);
  border-radius: 20px;
  display: flex;
  margin-left: var(--spacing-xs);
  width: max-content;
}
.verif-icon-cont .verif-icon.imid-icon {
  background-color: var(--accent-malachite-light);
}
.verif-icon-cont .verif-icon.imid-icon.from-left {
  margin-left: var(--spacing-none);
}
.verif-icon-cont .verif-icon svg {
  width: auto;
  height: 10px;
}

.verif-icon-cont {
  margin: var(--spacing-xxs) var(--spacing-none) var(--spacing-sm);
}
.verif-icon-cont .verif-icon {
  background-color: var(--accent-tropicalIndigo-light);
  padding: 5px var(--spacing-alt-xs);
  border-radius: 20px;
  display: flex;
  margin-left: var(--spacing-xs);
  width: max-content;
}
.verif-icon-cont .verif-icon.imid-icon {
  background-color: var(--accent-malachite-light);
}
.verif-icon-cont .verif-icon.imid-icon.from-left {
  margin-left: var(--spacing-none);
}
.verif-icon-cont .verif-icon svg {
  width: auto;
  height: 10px;
}

@media screen and (max-width: 1024px) {
  .UserInfoComponent .uiwrapper .username > a.n > span.nmsp {
    max-width: calc(100vw - 180px);
  }
  .user-verified-badge-row {
    display: flex;
    align-items: start;
    gap: var(--spacing-md);
    flex-direction: column-reverse;
  }
}
.UserMenuComponent {
  font-weight: 400;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-none) var(--spacing-sm) var(--spacing-none);
}

.UserMenuComponent .avatar-cont img {
  width: 32px;
  height: 32px;
  margin-right: var(--spacing-sm);
  border-radius: 50%;
}

.UserMenuComponent > span {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-900);
  overflow: hidden;
  max-width: 120px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.UserMenuComponent:hover, .UserMenuComponent:hover > span {
  color: var(--brand-400);
  cursor: pointer;
  text-decoration: none;
}

.UserMenuComponent:hover::after {
  border-color: var(--brand-400);
}

.UserMenuComponent > div {
  line-height: 1.5;
  position: absolute;
  z-index: 51;
  display: none;
  min-width: 260px;
  max-width: 370px;
  padding: var(--spacing-xs) var(--spacing-none);
  border-radius: 12px;
  background-color: var(--gray-100);
  box-shadow: 0 0 2px 0 rgb(26, 29, 62, 0.2);
}

body:has(.PostsFilterComponent) .UserMenuComponent > div {
  z-index: 108;
}

.UserMenuComponent > img {
  width: 20px;
  height: 20px;
}

.UserMenuComponent > div > .p {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-300);
  transition: all 0.2s;
}

.UserMenuComponent > div > .p > img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.UserMenuComponent > div > .p > img.av_comp {
  border-radius: 6px;
}

.UserMenuComponent > div > .p > div {
  overflow: hidden;
  max-width: 240px;
}

.UserMenuComponent > div > .p > div > div:first-child {
  font-size: 16px;
  color: var(--gray-900);
  overflow: hidden;
  padding-bottom: var(--spacing-xs);
  text-overflow: ellipsis;
  transition: all 0.2s;
}

.UserMenuComponent > div > .p:hover > div > div:first-child {
  color: var(--brand-400);
}

/* account badge */
.UserMenuComponent > div > .p > div > div:first-child img {
  width: 16px;
  height: 16px;
  margin-left: var(--spacing-alt-xs);
}

.UserMenuComponent > div > .p > div > div {
  display: flex;
  align-items: center;
}

.UserMenuComponent > div > .p > div .i {
  font-size: 12px;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: var(--spacing-alt-xs);
}

.UserMenuComponent > div > a {
  font-size: 15px;
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  box-sizing: border-box;
  padding: 7px var(--spacing-lg) 7px var(--spacing-md);
  color: var(--gray-900);
}

.UserMenuComponent > div > a:hover {
  color: var(--brand-400);
}

.UserMenuComponent > div > a > img {
  width: 18px;
  height: 18px;
  margin-right: var(--spacing-alt-sm);
}

.UserMenuComponent > div > a > div:first-child {
  width: 20px;
  height: 20px;
}

.UserMenuComponent > div > a > div:first-child > span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: 20px !important;
}

.UserMenuComponent > div > a:hover > div:first-child > span {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}

.UserMenuComponent > div > a > div:nth-child(2) {
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.UserMenuComponent > div > a.node {
  display: none;
}

.UserMenuComponent > div > a > .msg,
.UserMenuComponent > div > a > .notif,
.UserMenuComponent > div > a > .rate,
.UserMenuComponent > div > a > .ords {
  margin-right: -7px;
  margin-left: var(--spacing-lg);
  padding: var(--spacing-xxs) 7px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-100);
  text-align: center;
  border-radius: 20px;
}

.UserMenuComponent > div > a > .cnt {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.UserMenuComponent > div > a:hover > .cnt {
  color: var(--brand-400);
}

.UserMenuComponent > div > a > .wlt {
  font-size: 12px;
  color: var(--gray-600);
}

.UserMenuComponent > div > a > .msg {
  background-color: var(--brand-400);
}

.UserMenuComponent > div > a > .notif,
.UserMenuComponent > div > a > .ords {
  background-color: var(--brand-400);
}

.UserMenuComponent > div > a:hover > .notif,
.UserMenuComponent > div > a:hover > .ords {
  background-color: var(--brand-400);
}

.UserMenuComponent > div > a > .rate {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.UserMenuComponent > div > span {
  display: block;
  margin-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-top: 1px solid var(--gray-400);
}

.UserMenuComponent > div:before {
  color: var(--gray-400);
  position: absolute;
  top: -6px;
  right: 0;
  left: 0;
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
  content: "";
  background-color: var(--gray-100);
  transform: rotate(225deg);
  box-shadow: 0 2px 2px -2px rgb(26, 29, 62, 0.2), 2px 0 2px -2px rgb(26, 29, 62, 0.2);
}

.UserMenuComponent .avatar-cont {
  display: inline-block;
}

.UserMenuComponent .avatar-cont.dot::after {
  top: 0;
  right: 6px;
  border: 1.5px solid var(--gray-100);
}

.UserMenuComponent .dot::after {
  right: -8px;
  top: 0;
}

@media screen and (max-width: 1024px) {
  .UserMenuComponent > span, #ph .c #st span {
    display: none;
  }
  .UserMenuComponent {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
  }
  .UserMenuComponent::after {
    display: none;
  }
  .UserMenuComponent > div > a {
    font-size: 17px;
    overflow: hidden;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    text-overflow: ellipsis;
  }
  .UserMenuComponent > div > a > .cnt {
    font-size: 14px;
  }
  .UserMenuComponent > div > a > img {
    margin-right: var(--spacing-sm);
  }
  .UserMenuComponent > div > a > .msg,
  .UserMenuComponent > div > a > .rate,
  .UserMenuComponent > div > a > .notif,
  .UserMenuComponent > div > a > .ords {
    margin-right: -4px;
  }
  .UserMenuComponent > div > a > div:nth-child(2) {
    font-size: 16px;
    line-height: 28px;
    color: var(--gray-900);
    max-width: unset;
  }
  .UserMenuComponent > div > a > div:first-child, .UserMenuComponent > div > a > div:first-child > span {
    width: 22px;
    height: 22px;
    background-size: 22px !important;
  }
  .UserMenuComponent > div > a.node {
    display: flex;
    color: var(--brand-400);
  }
  .UserMenuComponent > div > a.node div {
    color: var(--brand-400);
  }
  .UserMenuComponent > div:before {
    display: none;
  }
  .UserMenuComponent > div {
    line-height: 1.5;
    position: fixed;
    right: 0;
    bottom: 0;
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    max-width: 500px;
    padding: var(--spacing-none);
    border: none;
    border-radius: 0;
    background-color: var(--gray-100);
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--gray-400);
    box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.06);
  }
  .UserMenuComponent > div > .p {
    display: flex;
    padding: var(--spacing-lg) var(--spacing-md);
  }
  .UserMenuComponent > div > .p > div > div:first-child {
    font-size: 17px;
    color: var(--gray-900);
  }
  .UserMenuComponent:first-child, #ph .c #st:first-child {
    margin: var(--spacing-none);
  }
  .UserMenuComponent.out {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    text-indent: 100px;
    background: url(/img/redesign/icons/mobile/user.svg) no-repeat;
    background-size: 32px 32px;
  }
  .UserMenuComponent img {
    width: 28px;
    height: 28px;
    margin: var(--spacing-none);
  }
  .UserMenuComponent.out img {
    width: 26px;
    height: 26px;
  }
}
/* Ensure UserMenu dropdown appears above the page overlay on My Ads page */
body:has(#main .my-posts) .UserMenuComponent > div {
  z-index: 107;
}

#main:has(.UserPageVerticalTabComponent) {
  display: flex;
  gap: var(--spacing-4xl);
  margin-top: var(--spacing-lg);
}

#main:has(.UserPageVerticalTabComponent) .current-section-wrapper-mobile,
#main:has(.UserPageVerticalTabComponent) .overlay {
  display: none;
}

.UserPageVerticalTabComponent {
  width: 268px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--gray-400);
}

.UserPageVerticalTabComponent > span.business-tab > div:not(.nested-business-tabs),
.UserPageVerticalTabComponent > span > div:not(.nested-business-tabs),
.UserPageVerticalTabComponent > span,
.UserPageVerticalTabComponent > a {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-none);
  display: flex;
  gap: var(--spacing-sm);
  width: 248px;
}

.UserPageVerticalTabComponent > span > div > span,
.UserPageVerticalTabComponent > span > div > a,
.UserPageVerticalTabComponent > a > span {
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.3px;
}

.UserPageVerticalTabComponent > span.business-tab {
  padding: var(--spacing-none);
  border-right: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-none);
}

.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs {
  display: flex;
  flex-direction: column;
}

.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs > span,
.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs > a {
  padding: var(--spacing-md) var(--spacing-4xl) var(--spacing-sm) var(--spacing-3xl);
}

.UserPageVerticalTabComponent > span.business-tab > div:not(.nested-business-tabs) {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-sm) var(--spacing-none);
  width: 100%;
  border-right: 1px solid var(--brand-400);
}

.UserPageVerticalTabComponent > span > div:not(.nested-business-tabs) {
  padding: var(--spacing-none);
}

.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs > span,
.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs > a:hover,
.UserPageVerticalTabComponent > span > div > span,
.UserPageVerticalTabComponent > a:hover > span:not(.cnt) {
  color: var(--brand-400);
}

.UserPageVerticalTabComponent > span > img,
.UserPageVerticalTabComponent > a > img {
  width: 20px;
  height: 20px;
}

.UserPageVerticalTabComponent > span > div .cnt,
.UserPageVerticalTabComponent > a .cnt {
  min-width: 10px;
  width: fit-content;
  height: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--accent-malachite);
  color: white;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  padding: var(--spacing-none) 5px;
}

.UserPageVerticalTabComponent > a:hover > img,
.UserPageVerticalTabComponent > a > img + img {
  display: none;
}

.UserPageVerticalTabComponent > a:hover > img + img {
  display: block;
}

.UserPageVerticalTabComponent > span {
  border-right: 1px solid var(--brand-400);
}

#main:has(.UserPageVerticalTabComponent) .tabbody {
  width: calc(100% - 292px);
  padding-bottom: var(--spacing-md);
  border-top: none;
}

.UserPageVerticalTabComponent .dot:after {
  top: 0;
  right: -8px;
}

@media screen and (max-width: 1024px) {
  #main:has(.UserPageVerticalTabComponent) {
    flex-direction: column;
    gap: var(--spacing-none);
    margin-top: var(--spacing-sm);
  }
  #main:has(.UserPageVerticalTabComponent) .current-section-wrapper-mobile {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    width: fit-content;
    padding: var(--spacing-md);
  }
  #main:has(.UserPageVerticalTabComponent) .current-section-wrapper-mobile .current-section {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.4px;
  }
  #main:has(.UserPageVerticalTabComponent) .current-section-wrapper-mobile img {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-out;
  }
  #main:has(.UserPageVerticalTabComponent) .current-section-wrapper-mobile img.up {
    transform: rotate(-180deg);
  }
  .UserPageVerticalTabComponent {
    display: none;
    position: absolute;
    z-index: 3;
    background: white;
    top: 118px;
    left: 12px;
    border-radius: 12px;
    width: auto;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
    padding: var(--spacing-xs) var(--spacing-md);
  }
  .UserPageVerticalTabComponent > span,
  .UserPageVerticalTabComponent > a {
    width: auto;
    padding: var(--spacing-md) var(--spacing-none);
  }
  .UserPageVerticalTabComponent > span,
  .UserPageVerticalTabComponent > span.business-tab > div:not(.nested-business-tabs) {
    border-right: none;
  }
  #main:has(.UserPageVerticalTabComponent) .tabbody {
    width: 100%;
    border: none;
  }
  #main:has(.UserPageVerticalTabComponent) .overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
}
.VerifiedCompanyBadgeComponent {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  width: fit-content;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
  background-color: var(--accent-tropicalIndigo-light);
  border-radius: 8px;
  cursor: default;
}
.VerifiedCompanyBadgeComponent.narrow {
  gap: var(--spacing-xs);
  border-radius: 4px;
  padding: var(--spacing-alt-xs) var(--spacing-alt-sm) var(--spacing-alt-xs) var(--spacing-alt-xs);
}
.VerifiedCompanyBadgeComponent.narrow > img {
  width: 14px;
  height: 14px;
}
.VerifiedCompanyBadgeComponent.narrow > .label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.VerifiedCompanyBadgeComponent > img {
  width: 20px;
  height: 20px;
}
.VerifiedCompanyBadgeComponent > .label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
  text-wrap: nowrap;
}
.VerifiedCompanyBadgeComponent.button {
  gap: var(--spacing-xs);
  border-radius: 4px;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xs);
}
.VerifiedCompanyBadgeComponent.button:hover {
  background-color: rgb(from var(--accent-tropicalIndigo) r g b/0.4);
}
.VerifiedCompanyBadgeComponent.button.gray:hover {
  background-color: rgba(177, 177, 177, 0.3);
}
.VerifiedCompanyBadgeComponent.button.red:hover {
  background-color: rgba(255, 232, 232, 0.85);
}
.VerifiedCompanyBadgeComponent.button.pending:hover {
  background-color: var(--delivery-200);
}
.VerifiedCompanyBadgeComponent.button.rejected:hover {
  background-color: var(--error-200);
}
.VerifiedCompanyBadgeComponent.button > img {
  width: 12px;
  height: 12px;
}
.VerifiedCompanyBadgeComponent.button > .label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
}
.VerifiedCompanyBadgeComponent.gray {
  background-color: rgba(177, 177, 177, 0.15);
}
.VerifiedCompanyBadgeComponent.red {
  background-color: var(--error-100);
  color: var(--error-500);
}
.VerifiedCompanyBadgeComponent.pending {
  background-color: var(--accent-amber-light);
  color: var(--gray-900);
}
.VerifiedCompanyBadgeComponent.rejected {
  background-color: var(--accent-aerospaceOrange-light);
  color: var(--gray-900);
}

.VerifiedCompanyModal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.VerifiedCompanyModal .verified-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.VerifiedCompanyModal .verified-modal-body .verified-company-title {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
}
.VerifiedCompanyModal .verified-modal-body .verified-company-info {
  font-size: 15px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.24px;
}
.VerifiedCompanyModal .verified-modal-body .verified-company-point {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.21px;
}
.VerifiedCompanyModal .verified-modal-body .verified-company-point > img {
  width: 14px;
  height: 14px;
  align-self: baseline;
  margin-top: var(--spacing-xs);
}
.VerifiedCompanyModal .note {
  display: flex;
  background-color: var(--gray-300);
  border-radius: 8px;
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}
.VerifiedCompanyModal .note.verify-prompt {
  padding: var(--spacing-md) var(--spacing-lg);
  flex-direction: column;
}
.VerifiedCompanyModal .note.verify-prompt .verify-company-desc,
.VerifiedCompanyModal .note.verify-prompt .verify-form-link {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.VerifiedCompanyModal .note.verify-prompt a.verify-form-link {
  color: var(--brand-400);
}
.VerifiedCompanyModal .note.verify-prompt a.verify-form-link:hover {
  color: var(--brand-300);
}
.VerifiedCompanyModal .note.pending {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.VerifiedCompanyModal .note.pending > img {
  width: 16px;
  height: 16px;
}

#dialog:has(.VerifiedCompanyModal) {
  padding: var(--spacing-none) var(--spacing-6xl) var(--spacing-6xl) var(--spacing-6xl);
  margin-top: -16px;
}

@media screen and (max-width: 1024px) {
  #dialog:has(.VerifiedCompanyModal) {
    padding: var(--spacing-none) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    margin-top: var(--spacing-none);
  }
}
.VerifiedPostLabelComponent {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  background-color: #8eee83;
  padding: var(--spacing-xs) var(--spacing-alt-sm);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-900);
}
.VerifiedPostLabelComponent img {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xxs);
}

@media screen and (max-width: 1024px) {
  .VerifiedPostLabelComponent {
    font-weight: 500;
    font-size: 12px;
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  .VerifiedPostLabelComponent {
    font-weight: 500;
    font-size: 12px;
  }
}
.VerifiedUserModal {
  padding: var(--spacing-none) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
  gap: var(--spacing-2xl);
  display: flex;
}
.VerifiedUserModal .verification-cont {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}
.VerifiedUserModal .verified-icon {
  height: 16px;
  width: auto;
}
.VerifiedUserModal .verified-icon.persona {
  height: 20px;
}
.VerifiedUserModal .verified-icon svg {
  height: inherit;
  width: inherit;
}
.VerifiedUserModal .user-verified-badge {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-sm);
}
.VerifiedUserModal .icon-verified {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-sm);
}
.VerifiedUserModal, .VerifiedUserModal .start-verification-modal {
  flex-direction: column;
}
.VerifiedUserModal.imid {
  padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm);
  gap: var(--spacing-2xl);
  display: flex;
}
.VerifiedUserModal .user-verified-badge > p {
  display: inline;
}
.VerifiedUserModal .title {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  margin-bottom: var(--spacing-none);
  margin-top: var(--spacing-xl);
}
.VerifiedUserModal .description {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-none);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-lg);
  letter-spacing: -0.24px;
}
.VerifiedUserModal.imid .description {
  margin-top: var(--spacing-none);
  line-height: var(--line-height-md);
}

@media screen and (max-width: 1024px) {
  .VerifiedUserModal {
    padding: var(--spacing-none);
    margin: var(--spacing-none);
  }
}
.VerifyCompanyPromptComponent {
  display: flex;
  gap: var(--spacing-lg);
  flex-direction: column;
  background-color: var(--accent-tropicalIndigo-light);
  border-radius: 8px;
  padding: var(--spacing-lg);
  position: relative;
}
.VerifyCompanyPromptComponent .close-verify-company-prompt {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
}
.VerifyCompanyPromptComponent .verify-company-prompt-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.VerifyCompanyPromptComponent .verify-company-prompt-text .verify-company-prompt-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.16px;
}
.VerifyCompanyPromptComponent .verify-company-prompt-text .verify-company-prompt-info {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.28px;
}
.VerifyCompanyPromptComponent.hide {
  display: none;
}