@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;
  --text-default: #0e0f21;
  --text-light: #4b4e6b;
  --text-veryverylight: #8a8b9e;
  --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: #e6ffeb;
  --accent-malachite-dark: #038124;
  --accent-electricBlue: #6effff;
  --accent-electricBlue-light: #e4ffff;
  --accent-electricBlue-dark: #007f7f;
  --accent-lime: #c2f600;
  --accent-lime-light: #f2ffc4;
  --accent-lime-dark: #5c7502;
  --accent-tropicalIndigo: #a183ff;
  --accent-tropicalIndigo-light: #f8ecff;
  --accent-tropicalIndigo-dark: #5528e2;
  --accent-argentinaBlue: #64aeff;
  --accent-argentinaBlue-light: #e1efff;
  --accent-argentinaBlue-dark: #0064d1;
  --accent-aerospaceOrange: #ff5104;
  --accent-aerospaceOrange-light: #ffe8dc;
  --accent-aerospaceOrange-dark: #b83901;
  --accent-amber: #ffbd00;
  --accent-amber-light: #fff7e0;
  --accent-amber-dark: #886500;
  --accent-violet: #ff82ff;
  --accent-violet-light: #fbecff;
  --accent-violet-dark: #a700c4;
  --accent-electricRaspberry: #ff4174;
  --accent-electricRaspberry-light: #ffe7ed;
  --accent-electricRaspberry-dark: #b60031;
  --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;
  --vehicle-color-white: #f8fafc;
  --vehicle-color-silver: #c0c0c0;
  --vehicle-color-gray: #7c8798;
  --vehicle-color-black: #1a1a1a;
  --vehicle-color-brown: #7c4a2d;
  --vehicle-color-gold: #c9a227;
  --vehicle-color-beige: #d6c3a1;
  --vehicle-color-red: #c63c32;
  --vehicle-color-blue: #2563eb;
  --vehicle-color-orange: #f97316;
  --vehicle-color-yellow: #facc15;
  --vehicle-color-green: #3fa34d;
  --vehicle-color-cyan: #22c1c3;
  --vehicle-color-maroon: #7f1d1d;
  --vehicle-color-pink: #ec4899;
  --vehicle-color-purple: #8b5cf6;
  --vehicle-color-other: #cbd5e1;
  --color-black: #000;
  --color-white: #fff;
  --color-gold: #ffd700;
  --color-red: #e00;
  --color-pink: #ffc0cb;
  --color-blue: #00c;
  --color-green: #0c0;
  --color-gray: #ccc;
  --color-silver: #efefef;
  --color-yellow: #ffff00;
  --color-purple: #800080;
  --color-coral: #ff7f50;
  --color-brown: #897058;
  --color-burgundy: #800020;
  --color-khaki: #78866b;
  --color-transparent: #c8dfea12;
  /*****      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;
  --spacing-13xl: 84px;
  --spacing-14xl: 88px;
  /*****      SPACINGS      *****/
  /*****      RADIUSES      *****/
  --radius-xxs: 2px;
  --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      *****/
  /*****      line-height-sm 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      *****/
}

@media screen and (max-width: 1024px) {
  :root {
    /* Header row: 64px bar + 64px padding (matches HeaderComponent__row mobile) */
    --body-top-padding: calc(64px + 64px);
    --header-height-with-secondary-header: calc(
        var(--secondary-header-height) + 64px + 64px
    );
    --body-top-padding-with-secondary-header: var(--header-height-with-secondary-header);
  }
}
@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;
}

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, #crumb a:hover span, .help_idx a:hover, .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 {
  box-sizing: border-box;
  width: 1140px;
  border-radius: 8px;
  background-color: var(--gray-100);
}

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

#hcontent .featured > .c {
  position: relative;
}

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

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

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

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*/
#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);
}

.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);
  display: inline-flex;
  width: fit-content;
}

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

.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 .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],
.plogin input[type=text] {
  max-width: 380px;
}

.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,
.page_process_payment .cc, .page_process_payment .cca {
  margin-bottom: var(--spacing-4xl);
}

.wallet .cc .error,
.page_process_payment .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,
.page_process_payment .cc form > span, .page_process_payment .cca form > span {
  display: flex;
  align-items: center;
  padding: var(--spacing-none);
  position: relative;
}

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

.wallet .cc .wallet-amount-row > .e, .wallet .cca .wallet-amount-row > .e,
.page_process_payment .cc .wallet-amount-row > .e, .page_process_payment .cca .wallet-amount-row > .e {
  flex: 1;
  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,
.page_process_payment .cc input, .page_process_payment .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,
.page_process_payment .cc .bblink, .page_process_payment .cca .bblink {
  margin-left: var(--spacing-lg);
}

.wallet .cc .crc, .wallet .cca .crc,
.page_process_payment .cc .crc, .page_process_payment .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;
}

.wallet .cc .wallet-amount-row .crc, .wallet .cca .wallet-amount-row .crc,
.page_process_payment .cc .wallet-amount-row .crc, .page_process_payment .cca .wallet-amount-row .crc {
  right: var(--spacing-md);
  top: 17px;
}

body:has(#AppLanguageSelectorComponent.ru) .wallet .cc .wallet-amount-row .crc,
body:has(#AppLanguageSelectorComponent.ru) .wallet .cca .wallet-amount-row .crc,
body:has(#AppLanguageSelectorComponent.en) .wallet .cc .wallet-amount-row .crc,
body:has(#AppLanguageSelectorComponent.en) .wallet .cca .wallet-amount-row .crc,
body:has(#AppLanguageSelectorComponent.ru) .page_process_payment .cc .wallet-amount-row .crc,
body:has(#AppLanguageSelectorComponent.ru) .page_process_payment .cca .wallet-amount-row .crc,
body:has(#AppLanguageSelectorComponent.en) .page_process_payment .cc .wallet-amount-row .crc,
body:has(#AppLanguageSelectorComponent.en) .page_process_payment .cca .wallet-amount-row .crc {
  right: var(--spacing-md);
}

.wallet .cc .wallet-amount-row > .e > .err, .wallet .cca .wallet-amount-row > .e > .err,
.page_process_payment .cc .wallet-amount-row > .e > .err, .page_process_payment .cca .wallet-amount-row > .e > .err {
  display: none;
  margin-top: var(--spacing-md);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  color: var(--error-400);
  text-align: left;
}

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

/* 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,
.docupload > .i,
.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) var(--spacing-4xl);
  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) var(--spacing-md) 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 .typesel .c .row .r .d {
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-xl);
}

/* New cars restriction page styles */
.postdlg .typesel.new-cars-restriction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-none);
  max-width: 855px;
}

.postdlg .typesel.new-cars-restriction .restriction-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.postdlg .typesel.new-cars-restriction .restriction-content p {
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--text-300);
  margin: var(--spacing-none);
}

.postdlg .typesel.new-cars-restriction .restriction-content .highlight {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-100);
}

/* Business Account link */
.postdlg .typesel.new-cars-restriction .restriction-link {
  display: flex;
  margin: var(--spacing-xs) var(--spacing-none) var(--spacing-md) var(--spacing-none);
}

.postdlg .typesel.new-cars-restriction .restriction-link a {
  color: var(--brand-400);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.postdlg .typesel.new-cars-restriction .restriction-link a:hover {
  text-decoration: underline;
}

/* Verification requirements list */
.postdlg .typesel.new-cars-restriction .restriction-requirements {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
  padding: var(--spacing-none);
  background-color: transparent;
}

.postdlg .typesel.new-cars-restriction .restriction-requirements .requirements-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--gray-900);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.postdlg .typesel.new-cars-restriction .restriction-requirements ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-none);
  list-style: none;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  padding-left: var(--spacing-sm);
}

.postdlg .typesel.new-cars-restriction .restriction-requirements ul li {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  line-height: 1.5;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.postdlg .typesel.new-cars-restriction .restriction-requirements ul li::before {
  content: "·";
  margin-right: var(--spacing-sm);
  color: var(--gray-900);
}

/* Restriction actions */
.postdlg .typesel.new-cars-restriction .restriction-actions {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md);
  justify-content: flex-start;
  align-items: center;
  margin-top: var(--spacing-lg);
}

.postdlg .typesel.new-cars-restriction .restriction-actions a.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-alt-sm) var(--spacing-2xl) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-md) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
  border: none !important;
}

.postdlg .typesel.new-cars-restriction .restriction-actions a.btn.primary {
  background-color: var(--brand-400) !important;
  color: var(--gray-100) !important;
}

.postdlg .typesel.new-cars-restriction .restriction-actions a.btn.primary:hover {
  background-color: var(--brand-300) !important;
}

.postdlg .typesel.new-cars-restriction .restriction-actions a.btn.secondary {
  background-color: var(--gray-300) !important;
  color: var(--gray-900) !important;
}

.postdlg .typesel.new-cars-restriction .restriction-actions a.btn.secondary:hover {
  background-color: var(--gray-400) !important;
}

.postdlg .typesel.new-cars-restriction .restriction-actions a.learn-more {
  color: var(--brand-400);
  text-decoration: none;
  font-size: var(--font-size-lg);
  font-weight: 500;
}

.postdlg .typesel.new-cars-restriction .restriction-actions a.learn-more:hover {
  color: var(--brand-400);
  text-decoration: none;
}

.postdlg .typesel label[for=ad_sub_category_1473] {
  color: var(--gray-700);
}

.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 > .glheader {
  flex: 0 0 100%;
  width: 100%;
}

.dl .gl .mob,
.dl .gl .mob-last {
  display: none;
}

.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,
.dlrel > .list > 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;
  gap: var(--spacing-md);
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
}

.dlrev > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "user rating" "body body" "date date";
  column-gap: var(--spacing-lg);
  row-gap: var(--spacing-sm);
  box-sizing: border-box;
  padding: var(--spacing-lg);
  border: 1.2px solid var(--gray-400);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  color: var(--gray-700);
  overflow: visible;
}

.dlrev > div:has(> div:last-child > .r) {
  grid-template-areas: "user rating" "body body" "date date" "reply reply";
}

.dlrev > div:has(> div:last-child > .st),
.dlrev > div:has(> div:last-child > .btn) {
  grid-template-areas: "user rating" "body body" "date date" "actions actions";
}

.dlrev > div:has(> div:last-child > .r):has(> div:last-child > .st),
.dlrev > div:has(> div:last-child > .r):has(> div:last-child > .btn) {
  grid-template-areas: "user rating" "body body" "date date" "reply reply" "actions actions";
}

.dlrev > div:has(> div:last-child > .photos) {
  grid-template-areas: "user rating" "body body" "photos photos" "date date";
}

.dlrev > div:has(> div:last-child > .photos):has(> div:last-child > .r) {
  grid-template-areas: "user rating" "body body" "photos photos" "date date" "reply reply";
}

.dlrev > div:has(> div:last-child > .photos):has(> div:last-child > .st),
.dlrev > div:has(> div:last-child > .photos):has(> div:last-child > .btn) {
  grid-template-areas: "user rating" "body body" "photos photos" "date date" "actions actions";
}

.dlrev > div:has(> div:last-child > .photos):has(> div:last-child > .r):has(> div:last-child > .st),
.dlrev > div:has(> div:last-child > .photos):has(> div:last-child > .r):has(> div:last-child > .btn) {
  grid-template-areas: "user rating" "body body" "photos photos" "date date" "reply reply" "actions actions";
}

.dlrev > div > div:first-child {
  grid-area: user;
  min-width: 0;
  width: auto;
  margin: var(--spacing-none);
}

.dlrev > div > div:first-child > div, .dlrev > div > div:first-child > a {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  min-width: 0;
  color: var(--gray-700);
  text-decoration: none;
}

.dlrev > div > div:first-child img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  object-fit: cover;
}

.dlrev > div > div:first-child a.comp img, .dlrev > div > div:first-child div.comp img {
  border-radius: var(--radius-sm);
}

.dlrev > div > div:first-child > div > div,
.dlrev > div > div:first-child > a > div {
  min-width: 0;
}

.dlrev > div > div:first-child > div > div > div:first-child,
.dlrev > div > div:first-child > a > div > div:first-child {
  color: var(--text-default);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlrev > div > div:first-child .since {
  color: var(--text-veryverylight);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  margin-top: var(--spacing-none);
  white-space: nowrap;
}

.dlrev > div > div:last-child {
  display: contents;
}

.dlrev > div > div:last-child > div:first-child {
  grid-area: rating;
  display: flex;
  align-items: center;
  justify-self: end;
  min-height: var(--spacing-lg);
}

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

.dlrev > div.x > div:first-child > div > div > div:first-child,
.dlrev > div.x > div:first-child > a > div > div:first-child {
  color: var(--gray-700);
}

.dlrev > div.x .StarRatingComponent .star-rating-star-filled::before {
  background: var(--gray-700);
}

.dlrev > div > div:last-child > div:first-child > .i {
  display: none;
}

.dlrev > div > div:last-child > .b {
  grid-area: body;
  padding-left: var(--spacing-7xl);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-default);
  line-height: var(--line-height-sm);
  word-break: break-word;
}

.dlrev > div.x > div:last-child > .b {
  color: var(--gray-700);
}

.dlrev > div > div:last-child > .photos {
  grid-area: photos;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding-left: var(--spacing-7xl);
}

.dlrev > div > div:last-child > .photos .chat-image-item {
  position: relative;
  display: block;
  width: var(--spacing-10xl);
  height: var(--spacing-10xl);
  flex: 0 0 var(--spacing-10xl);
  padding: var(--spacing-none);
  border: 0;
  border-radius: var(--radius-alt-xs);
  overflow: hidden;
  background: var(--gray-300);
  cursor: pointer;
}

.dlrev > div > div:last-child > .photos .chat-image-item img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-alt-xs);
  object-fit: cover;
}

.dlrev > div > div:last-child > .d {
  grid-area: date;
  padding-left: var(--spacing-7xl);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  color: var(--gray-600);
}

.dlrev > div > div:last-child > .r {
  grid-area: reply;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "user action" "body body" "date date";
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-alt-xs);
  align-items: center;
  box-sizing: border-box;
  width: auto;
  padding: var(--spacing-sm) var(--spacing-none) var(--spacing-sm) var(--spacing-lg);
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-7xl);
  border-left: 1px solid var(--gray-400);
}

.dlrev > div > div:last-child > .r > .rb {
  grid-area: body;
  width: 100%;
  min-width: 0;
  color: var(--text-light);
  font-size: var(--font-size-xs);
  font-weight: 500;
  font-style: normal;
  line-height: var(--line-height-sm);
  word-break: break-word;
}

.dlrev > div > div:last-child > .r > .rb.clamp-pending:not(.expanded),
.dlrev > div > div:last-child > .r > .rb.has-more:not(.expanded) {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}

.dlrev > div > div:last-child > .r > .rb.clamp-pending:not(.expanded) > .reply-body-text,
.dlrev > div > div:last-child > .r > .rb.has-more:not(.expanded) > .reply-body-text {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.dlrev > div > div:last-child > .r > .rb.has-more.expanded > .reply-body-text {
  white-space: normal;
}

.dlrev > div > div:last-child > .r > .rb > .reply-body-see-more {
  display: none;
  flex: 0 0 auto;
  margin-left: var(--spacing-xs);
  color: var(--brand-400);
  cursor: pointer;
  white-space: nowrap;
}

.dlrev > div > div:last-child > .r > .rb.has-more > .reply-body-see-more {
  display: inline;
}

.dlrev > div > div:last-child > .r > .rb.has-more.expanded > .reply-body-see-more {
  display: none;
}

.dlrev > div > div:last-child > .r > .d {
  grid-area: date;
  color: var(--gray-500);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  font-style: normal;
  line-height: var(--line-height-alt-xs);
  white-space: nowrap;
}

.dlrev > div > div:last-child > .r > .u {
  grid-area: user;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.dlrev > div > div:last-child > .r > .u > img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  object-fit: cover;
}

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

.dlrev > div > div:last-child > .r > .u > div {
  max-width: 200px;
  overflow: hidden;
  color: var(--gray-900);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dlrev > div > div:last-child > .btn, .dlrev > div > div:last-child > .r > .btn {
  grid-area: actions;
  box-sizing: border-box;
  width: max-content;
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-7xl);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  color: var(--brand-400);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  background-color: var(--brand-100);
}

.dlrev > div > div:last-child > .r > .btn {
  grid-area: action;
  position: relative;
  width: 32px;
  height: 24px;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  border-radius: var(--radius-xs);
  background-color: transparent;
  color: var(--text-default);
}

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

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

.dlrev > div > div:last-child > .r > .btn:has(> .review-reply-menu:hover) {
  background-color: transparent;
}

.dlrev > div > div:last-child > .r > .btn > .review-reply-menu-trigger {
  display: block;
  width: 32px;
  height: 24px;
  overflow: hidden;
  background: var(--text-default);
  mask: url(/img/redesign/icons/menu-circle-vertical.svg) center/20px 20px no-repeat;
  -webkit-mask: url(/img/redesign/icons/menu-circle-vertical.svg) center/20px 20px no-repeat;
  color: transparent;
  text-indent: -9999px;
}

.dlrev > div > div:last-child > .r > .btn > .review-reply-menu {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  right: var(--spacing-none);
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: var(--spacing-md);
  min-width: 88px;
  box-sizing: border-box;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  box-shadow: 0 4px 6px rgb(0 0 0/10%);
}

.dlrev > div > div:last-child > .r > .btn.open > .review-reply-menu {
  display: flex;
}

.dlrev > div > div:last-child > .r > .btn .review-reply-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-sm);
  border-radius: var(--radius-xs);
  color: var(--gray-900);
  cursor: pointer;
}

.dlrev > div > div:last-child > .r > .btn .review-reply-menu-item:hover {
  background: var(--gray-300);
}

.dlrev > div > div:last-child > .r > .btn .review-reply-menu-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: var(--gray-900);
}

.dlrev > div > div:last-child > .r > .btn .review-reply-menu-item.edit .review-reply-menu-icon {
  mask: url(/img/redesign/icons/edit.svg) center/16px 16px no-repeat;
  -webkit-mask: url(/img/redesign/icons/edit.svg) center/16px 16px no-repeat;
}

.dlrev > div > div:last-child > .r > .btn .review-reply-menu-item.delete .review-reply-menu-icon {
  mask: url(/img/redesign/icons/delete.svg) center/16px 16px no-repeat;
  -webkit-mask: url(/img/redesign/icons/delete.svg) center/16px 16px no-repeat;
}

.dlrev > div > div:last-child > .r > .btn .review-reply-menu-label {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.dlrev > div > div:last-child > .st {
  grid-area: actions;
  padding-left: var(--spacing-none);
  margin-top: var(--spacing-sm);
  color: var(--error-400);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  white-space: nowrap;
}

.dlrev > div > div:last-child > .st > .review-delete-action {
  color: var(--text-default);
  text-decoration: underline;
  cursor: pointer;
}

.dlrev .dlf {
  display: block;
}

.chat-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.chat-image-viewer.is-open {
  display: flex;
}

.chat-image-viewer-image {
  max-width: calc(100vw - 112px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
}

.chat-image-viewer-close,
.chat-image-viewer-prev,
.chat-image-viewer-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--gray-100);
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.chat-image-viewer-close {
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: var(--spacing-6xl);
  height: var(--spacing-6xl);
  border-radius: 100px;
}

.chat-image-viewer-close::before,
.chat-image-viewer-close::after {
  content: "";
  position: absolute;
  width: 15px;
  height: var(--spacing-xxs);
  border-radius: var(--radius-xxs);
  background: currentColor;
}

.chat-image-viewer-close::before {
  transform: rotate(45deg);
}

.chat-image-viewer-close::after {
  transform: rotate(-45deg);
}

.chat-image-viewer-prev,
.chat-image-viewer-next {
  top: 50%;
  width: var(--spacing-9xl);
  height: var(--spacing-9xl);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
}

.chat-image-viewer-prev {
  left: var(--spacing-lg);
}

.chat-image-viewer-next {
  right: var(--spacing-lg);
}

.chat-image-viewer-prev::before,
.chat-image-viewer-next::before {
  content: "";
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.chat-image-viewer-prev::before {
  transform: rotate(225deg);
}

.chat-image-viewer-next::before {
  transform: rotate(45deg);
}

.chat-image-viewer-close:hover,
.chat-image-viewer-close:focus,
.chat-image-viewer-close:focus-visible,
.chat-image-viewer-prev:not(:disabled):hover,
.chat-image-viewer-prev:not(:disabled):focus,
.chat-image-viewer-prev:not(:disabled):focus-visible,
.chat-image-viewer-next:not(:disabled):hover,
.chat-image-viewer-next:not(:disabled):focus,
.chat-image-viewer-next:not(:disabled):focus-visible {
  color: var(--gray-100);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  outline: none;
}

.chat-image-viewer-prev:disabled,
.chat-image-viewer-next:disabled {
  width: var(--spacing-6xl);
  height: var(--spacing-6xl);
  color: var(--gray-600);
  background: transparent;
  opacity: 1;
  cursor: default;
}

.chat-image-viewer-prev:disabled:hover,
.chat-image-viewer-prev:disabled:focus,
.chat-image-viewer-prev:disabled:focus-visible,
.chat-image-viewer-next:disabled:hover,
.chat-image-viewer-next:disabled:focus,
.chat-image-viewer-next:disabled:focus-visible {
  color: var(--gray-600);
  background: transparent;
  box-shadow: none;
  outline: none;
}

#rev_list > .dlrev > div {
  border: 1.2px solid var(--gray-400);
}

#rev_list > .dlrev > div:first-child {
  border: 1.2px solid var(--gray-400);
  padding-top: var(--spacing-lg);
}

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

/*-----*/
#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;
}

.tabbody > #rev_list + h1 {
  margin-top: var(--spacing-4xl);
}

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

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

.chat-warning-notice {
  margin-bottom: var(--spacing-md);
  background-color: var(--info-300);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
}

.chat-warning-notice__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: var(--spacing-xxs);
}

.chat-warning-notice__body {
  font-size: 15px;
}

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

.dlbp a {
  position: relative;
}

.dlbundles > span {
  padding: var(--spacing-none);
}

.dlbundles > span:first-of-type {
  padding-top: var(--spacing-lg);
}

.dlbundles {
  gap: var(--spacing-md);
}

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

.dlbundles > .EmptyStateComponent {
  align-items: center;
  justify-content: center;
}

/* 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;
  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 .username {
  display: block;
}

.dlbp .username .icon-company-verified {
  vertical-align: middle;
}

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

#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:has(.AdCampaignDetailComponent) .hdr {
  text-align: left;
}

.bnr_list .campaign-datalist {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}

.bnr_list .campaign-datalist a {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-lg);
  font-weight: 500;
  letter-spacing: -0.28px;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--gray-400);
}

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

#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;
}
@media screen and (max-width: 1270px) {
  #hcontent .stripc > div > a {
    font-size: var(--font-size-xs);
    letter-spacing: -0.28px;
  }
}

.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;
  max-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 .featured-top-left > .u {
  padding: var(--spacing-xl) var(--spacing-none);
}

.featured .featured-top-left > .u {
  padding-top: var(--spacing-6xl);
}

.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 .featured-top-left > .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 .featured-top-left > .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 .featured-top-left > .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 .featured-top-left > .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 .featured-top-left > .u > a:hover {
  color: var(--brand-400);
}

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

.featured > .c > .s > .c {
  justify-content: space-between;
}

.featured .featured-top-left > .u > .c {
  padding-right: var(--spacing-none);
  gap: var(--spacing-md);
  justify-content: space-between;
  box-sizing: border-box;
}

.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 .featured-top-left > .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 .featured-top-left > .u > .c > a {
  display: inline-block;
  width: 90px;
  text-align: center;
  transition: all 0.2s;
  margin-bottom: var(--spacing-alt-xs);
  border-radius: 12px;
  border: 1px solid var(--gray-400);
}

.featured .featured-top-left > .u > .c > a > img {
  width: 90px;
  height: 90px;
  border-radius: var(--spacing-md);
}

.featured .featured-top-left > .u > .c > a:hover {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}

/* rating */
.featured .featured-top-left > .u > .c > a > div.r {
  zoom: 0.9;
  margin: var(--spacing-alt-xs) var(--spacing-none);
}

/*stories*/
.featured .featured-top-left > .st > .c {
  display: flex;
  gap: var(--spacing-sm);
  overflow: hidden;
  justify-content: space-between;
}

.featured .featured-top-left > .st > .c > a {
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.2s;
  border-radius: 16px;
  width: 128px;
  height: 128px;
}

.featured .featured-top-left > .st > .c > a:hover {
  -webkit-filter: brightness(110%);
}

.featured .featured-top-left > .st > .c > a > div:last-child {
  padding: var(--spacing-none);
  width: 128px;
  height: 100%;
  align-items: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
  border-radius: 16px;
}

.featured .featured-top-left > .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;
}

/* Home featured top layout with List Ads banner */
.featured .featured-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-7xl);
  padding-top: var(--spacing-2xl);
}

.featured .featured-top-left {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-md);
  max-width: calc(100% - var(--spacing-2xl));
}

.dl .gl > .list-ads-category-after-top {
  flex: 0 0 100%;
  width: 100%;
}

.dl .gl > .list-ads-category-after-top .list-ads-banner-link {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.dl .gl > .list-ads-category-after-top .list-ads-banner-img {
  width: 100%;
  height: 100%;
  margin: var(--spacing-none);
}

.featured .hp-heart {
  position: absolute;
  top: calc(var(--spacing-sm) * -1);
  right: var(--spacing-none);
  z-index: 2;
  width: var(--spacing-4xl);
  padding: var(--spacing-none);
  height: var(--spacing-4xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.featured .hp-heart .heart-btn {
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*full width body*/
body.f #ph > .HeaderComponent__row, 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,
.tabbody:has(.info) {
  display: flex;
  flex-direction: column;
}

.tabbody:has(.info) .UserPageHorizontalTabComponent + .dle {
  flex: 1;
}

#main:has(.EmptyStateComponent) > .tabbody:has(.EmptyStateComponent) > .advertise-tab,
#main:has(.EmptyStateComponent) > .tabbody:has(.EmptyStateComponent) > .advertise-tab .EmptyStateComponent {
  flex: 1;
}

#main:has(.EmptyStateComponent) > .tabbody > .dle:not(:has(.EmptyStateComponent:only-child)) .EmptyStateComponent {
  margin: auto;
}

#main:has(.EmptyStateComponent) #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) > #pagecol #contentr:not(:has(> .list-ads-category-after-top)),
#main:has(.EmptyStateComponent) #tabcontent:not(:has(.resume.emp)),
#main:has(.EmptyStateComponent) > .bubble {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#main:has(.EmptyStateComponent) > #pagecol #contentr:has(> .list-ads-category-after-top) > .dl:has(.EmptyStateComponent) {
  display: flex;
  justify-content: center;
}

.dlrev > .EmptyStateComponent[data-testid=empty-state-user-reviews] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.my-reviews-page > .reviews-empty-state {
  flex: 1;
  justify-content: flex-start !important;
  box-sizing: border-box;
  width: 100%;
  padding: 140px var(--spacing-none) var(--spacing-none);
  gap: var(--spacing-4xl);
}

.my-reviews-page > .reviews-empty-state .empty-state-img-wrapper {
  width: 200px !important;
  height: 200px;
}

.my-reviews-page > .reviews-empty-state .empty-state-img-wrapper > img {
  width: 200px !important;
  height: 200px !important;
}

.my-reviews-page > .reviews-empty-state .empty-state-description {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-none) var(--spacing-6xl);
  margin-top: var(--spacing-none);
  gap: var(--spacing-sm);
  color: var(--gray-900);
  text-align: center;
  word-break: break-word;
}

.my-reviews-page > .reviews-empty-state .empty-state-title {
  margin: var(--spacing-none) !important;
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
}

.my-reviews-page > .reviews-empty-state .empty-state-desc {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}

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 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xxs, 12px);
  font-weight: var(--font-weight-highlight, 500);
  line-height: var(--line-height-xxs, 16px);
  letter-spacing: -0.24px;
}

.dlsearch form .my-ads-filters .f-label {
  color: var(--text-primary, #0E0F21);
}

.dlsearch form .my-ads-filters .f-sep {
  display: flex;
  align-items: center;
  width: 3px;
  height: 3px;
  flex-shrink: 0;
}

.dlsearch form .my-ads-filters .f-cnt {
  color: var(--gray-600, #7A7A81);
}

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

div.dl > div.hdr.search-results-section {
  letter-spacing: 0;
  white-space: normal;
}

div.dl > div.hdr.search-results-section:not(:first-child) {
  border-top: 1px solid var(--gray-300);
  padding-top: var(--spacing-lg);
  margin-top: var(--spacing-sm);
}

div.dl .search-results-section.search-results-section--fallback {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 56px;
  background: var(--brand-100);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-xl);
  color: var(--gray-900);
  font-weight: 600;
  text-align: left;
}

div.dl > div.hdr.search-results-section--fallback {
  width: calc(100% - 20px);
  margin: 10px;
  margin-top: 0;
  margin-bottom: 15px;
  padding: var(--spacing-sm) var(--spacing-md);
}

div.dl > div.hdr.search-results-section--fallback:not(:first-child) {
  border-top: 1px solid var(--brand-200);
  padding-top: var(--spacing-sm);
  margin-top: 0;
  margin-bottom: 15px;
}

.dl .gl > .search-results-section.search-results-section--fallback {
  flex: 0 0 calc(100% - 20px);
  width: calc(100% - 20px);
  margin: 10px;
  margin-top: 0;
  margin-bottom: 15px;
  padding: var(--spacing-sm) var(--spacing-md);
}

div.dl .search-results-section--fallback .search-results-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--brand-200);
  border-radius: 50%;
  background: var(--gray-100);
}

div.dl .search-results-section--fallback .search-results-section__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

div.dl .search-results-section--fallback .search-results-section__title {
  min-width: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  letter-spacing: 0;
  white-space: normal;
}

.dl .gl > .search-results-section {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  color: var(--gray-900);
  letter-spacing: 0;
  width: 100%;
  padding: var(--spacing-none) var(--spacing-sm) var(--spacing-alt-sm);
  margin-top: var(--spacing-md);
}

.dl .gl > .search-results-section:first-child {
  margin-top: var(--spacing-none);
}

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

#pmenu .dlrel > div > a > img.resume-placeholder-frame {
  border: 1px solid var(--gray-400);
}

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

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

.support-upload-row {
  display: flex;
  align-items: flex-start;
}

.support-upload-row > .l {
  width: 300px;
  margin-top: var(--spacing-alt-xs);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--line-height-md);
  letter-spacing: 0;
}

.support-upload-row > .e {
  margin-left: var(--spacing-xl);
}

.support-upload-row .support-upload-content {
  display: flow-root;
  width: 100%;
}

.support-upload-row .support-upload-hint {
  margin-top: var(--spacing-md);
  color: var(--gray-700);
  font-size: 14px;
  margin-left: 22px;
  line-height: var(--line-height-md);
}

.support-upload-row #upload-pic-container .err.required,
.support-upload-row #upload-pic-container .err.validation {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.support-upload-row #upload-pic-info {
  display: none;
}

.support-upload-row #upload {
  border: none;
  background-color: transparent;
}

.support-upload-row #upload:has(#filelist > .i) {
  border: none !important;
  background-color: transparent !important;
}

.support-upload-row.frow.top.doc0 {
  display: flex;
}

.support-upload-row #upload-inside-container {
  border: 1px solid var(--gray-400);
  background-color: #fff;
}

.support-upload-row #upload .i {
  width: 100px;
  height: 100px;
  position: relative;
}

.support-upload-row #upload .i .x {
  left: 79px;
  top: 4px;
}

.support-upload-row #upload .i .l {
  position: absolute;
  top: 4px;
  right: 4px;
}

.support-upload-row #upload .i .w {
  padding: 0;
}

.support-upload-row #upload-inside-container.i.no-drag {
  width: 100px;
  height: 100px;
  background-color: #fff !important;
  border: none !important;
}

.support-upload-row #upload-inside-container-img img {
  width: 21px;
  height: 21px;
  max-width: none;
  flex-shrink: 0;
}

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

.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: 23px var(--spacing-none) var(--spacing-lg) var(--spacing-none);
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
}

#puheader .head .bnr img {
  width: 100%;
  height: 226px;
  border-radius: var(--radius-md);
  /*border-radius: var(--radius-sm) var(--radius-sm) 0 0;*/
  object-fit: cover;
}

#puheader > .head > .i {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "info buttons" "hours hours";
  align-items: start;
  column-gap: var(--spacing-xl);
  row-gap: var(--spacing-4xl);
  border: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--spacing-none) var(--spacing-none);
}

/* If there is a banner, the info container should visually connect to it (no top border). */
#puheader .head .bnr + .i {
  padding-top: var(--spacing-xl);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

#puheader .head .i .l {
  grid-area: info;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}

/*avatar*/
#puheader .head .i .l .lav img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

#puheader .head .i .l .n {
  margin-top: var(--spacing-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-alt-xs);
  /*row-gap: 2px;*/
}

/* verificationbadge */
#puheader > .head > .i > .l > .n .badge-container {
  order: 2;
  margin: var(--spacing-xxs) var(--spacing-none) var(--spacing-none);
  flex: 0 0 auto;
}

/*logo*/
#puheader .head .i .l .l img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
}

#puheader .head .i .l .l, #puheader .head .i .l .lav {
  margin-right: var(--spacing-2xl);
}

#puheader > .head > .i > .l > .n > div:first-child {
  font-size: 26px;
  font-weight: 700;
  overflow: hidden;
  max-width: 520px;
  height: auto;
  line-height: 36px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* business plus badge */
#puheader .head .i .l .n div:first-child:not(.VerifiedCompanyBadgeComponent) img,
#uinfo div:first-child .n div:last-child:not(.VerifiedCompanyBadgeComponent) img {
  width: 20px;
  height: 20px;
}

/*subtitle*/
#puheader .head .i .l .n .st {
  display: flex;
  flex-basis: 100%;
  order: 3;
  margin-top: var(--spacing-sm);
}

#puheader .head .i .l .n .st div {
  font-size: 14px;
  color: var(--gray-700);
}

#puheader .head .i .l .n .st img {
  width: 3px;
  height: 3px;
  display: block;
  margin: 0 var(--spacing-sm);
  align-self: center;
}

/*reviews*/
#puheader .head .i .l .n .r {
  flex-basis: 100%;
  order: 2;
  display: flex;
  align-items: center;
}

#puheader .head .i .l .n .r a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

#puheader .head .i .l .n .r .business-page-stars {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
}

#puheader .head .i .l .n .r .business-page-stars img {
  width: 18px;
  height: 18px;
  display: block;
}

#puheader .head .i .l .n .r a .i {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-900);
  margin-left: var(--spacing-none);
  text-align: center;
}

#puheader .head .i .l .n .r .btn {
  font-size: 15px;
  color: var(--brand-400);
  display: inline-block;
  padding: var(--spacing-xs);
  cursor: pointer;
  line-height: var(--line-height-sm);
  transition: all 0.2s;
  border-radius: 16px;
  letter-spacing: -0.28px;
  font-style: normal;
  font-weight: 500 !important;
  margin-left: var(--spacing-md);
}

#puheader .head .i .l .n .r .btn:hover {
  background-color: var(--gray-300);
}

#puheader .head .i .r {
  display: contents;
}

/*button panel*/
#puheader .head .i .r .bp {
  grid-area: buttons;
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  justify-content: flex-end;
  margin-top: 8px;
}

#puheader .head .i .r .bp a {
  font-size: 15px;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: auto;
  min-width: 100px;
  height: 44px;
  margin-left: var(--spacing-none);
  padding: var(--spacing-alt-sm) var(--spacing-xl);
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius-alt-sm);
  box-sizing: border-box;
  white-space: nowrap;
  background-color: var(--gray-100);
  transition: color 0.4s, background-color 0.4s;
  -webkit-transition: -webkit-filter 200ms linear;
}

#puheader .head .i .r .bp .business-page-heart-container {
  order: 1;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: var(--radius-alt-sm);
  background-color: var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

#puheader .head .i .r .bp .business-page-heart-container:hover {
  background-color: var(--gray-400);
}

#puheader .head .i .r .bp .business-page-heart-container .heart-btn {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-none);
  cursor: pointer;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

#puheader .head .i .r .bp .business-page-heart-container .heart__content svg {
  transition: fill 0.2s, stroke 0.2s;
}

#puheader .head .i .r .bp .business-page-heart-container:hover .heart-btn--inactive .heart__content svg {
  stroke: var(--gray-900);
}

#puheader .head .i .r .bp .business-page-heart-container:hover .heart-btn--active .heart__content svg {
  fill: var(--accent-electricRaspberry);
}

#puheader .head .i .r .bp .business-page-heart-container .heart-btn-label {
  display: none;
}

#puheader .head .i .r .bp .business-page-heart-container .heart-btn img {
  width: 20px;
  height: 20px;
}

#puheader .head .i .r .bp a:hover {
  -webkit-filter: brightness(108%);
}

#puheader .head .i .r .bp a:nth-child(1) {
  order: 2;
  color: var(--gray-100);
  background-color: var(--brand-400);
}

#puheader .head .i .r .bp a:nth-child(2) {
  order: 1;
  color: var(--brand-500) !important;
  background-color: var(--brand-100);
}

#puheader .head .i .r .bp a:nth-child(3) {
  color: var(--gray-900) !important;
  background-color: var(--info-400);
}

/* for case with no banner */
#puheader > .head > .i:first-child {
  margin: var(--spacing-none);
  padding-top: var(--spacing-lg);
}

#puheader .head .i .r .bp a.business-page-call-button {
  order: 2;
  color: var(--brand-500) !important;
  background-color: var(--brand-100);
}

#puheader .head .i .r .bp a.business-page-call-button:hover {
  color: var(--brand-500) !important;
  background-color: var(--brand-100) !important;
  -webkit-filter: none;
}

#puheader .head .i .r .bp a.business-page-write-button {
  order: 3;
  color: var(--gray-100) !important;
  background-color: var(--brand-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);
  line-height: var(--line-height-sm);
  letter-spacing: -0.3px;
  margin: 24px var(--spacing-none) var(--spacing-none) var(--spacing-none);
  padding: var(--spacing-none);
  border-radius: 0;
}

#puheader .about:last-child {
  margin-bottom: var(--spacing-2xl);
}

#puheader .description-divider {
  margin: var(--spacing-2xl) var(--spacing-none);
  border-top: 1px solid var(--gray-400);
}

#puheader .head .i .r .h {
  grid-area: hours;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  margin: var(--spacing-none);
  padding-bottom: var(--spacing-2xl);
  border-bottom: 1px solid var(--gray-400);
  background: var(--gray-100);
}

#puheader .head .i .r .h .h-row {
  width: 100%;
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  align-items: start;
  cursor: pointer;
}

#puheader .head .i .r .h .h-row-label {
  display: flex;
  align-items: start;
  gap: 8px;
  color: var(--gray-800);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

#puheader .head .i .r .h .h-row-label img {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
}

#puheader .head .i .r .h .h-row-am-address,
#puheader .head .i .r .h .h-row-am-business-hours {
  grid-template-columns: 240px minmax(0, 1fr);
}

#puheader .head .i .r .h .h-row-value {
  min-width: 0;
  display: flex;
  align-items: start;
}

#puheader .head .i .r .h .h-row-value span {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--gray-900);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*for BusinessHoursModal*/
.ui-dialog:has(.business-hours-modal) {
  width: 428px !important;
  border-radius: 16px;
  overflow: hidden;
}

.ui-dialog:has(.business-hours-modal) .ui-dialog-titlebar {
  padding: 18px 54px 4px 20px;
  border: none;
  background: var(--gray-100);
}

.ui-dialog:has(.business-hours-modal) .ui-dialog-title {
  margin: var(--spacing-none);
  font-size: 17px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.34px;
}

.ui-dialog:has(.business-hours-modal) .ui-dialog-titlebar-close {
  padding: var(--spacing-none);
  width: 24px;
  height: 24px;
  top: 10px;
  right: 10px;
  margin: 0;
}

.ui-dialog:has(.business-hours-modal) .ui-dialog-content {
  padding: 0 20px 20px;
  background: var(--gray-100);
}

.hrs_list_status {
  font-size: 15px;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  margin-bottom: 20px;
}

.hrs_list_status.open {
  color: var(--brand-500);
}

.hrs_list_status.closed {
  color: var(--error-500);
}

.hrs_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  color: var(--gray-900);
}

.hrs_list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 0;
}

.hrs_list > div > div:nth-child(1) {
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
}

.hrs_list > div > div:nth-child(2) {
  text-align: right;
  white-space: nowrap;
}

.hrs_list > div.current > div {
  color: var(--brand-500);
}

#puheader .head .i .r .h .h-row:hover .h-row-value span {
  color: var(--brand-400);
}

#puheader .news {
  font-size: 14px;
  color: var(--gray-900);
  margin: 24px var(--spacing-none) var(--spacing-2xl) var(--spacing-none);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: 8px;
  background-color: var(--brand-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);
}

#menul > #uinfo > div:first-child .av_comp {
  width: 64px;
  height: 64px;
  box-shadow: none;
}

#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 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 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);
  word-break: break-word;
}

#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-md);
  flex-wrap: nowrap;
  padding: var(--spacing-none);
  background-color: var(--gray-100);
  flex-direction: column !important;
  justify-content: flex-start;
  margin-bottom: var(--spacing-xl);
  max-width: 848px;
}

.rev_sugg > div {
  max-width: none;
  width: 100%;
}

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

.rev_sugg .review-target-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
  min-height: 58px;
  box-sizing: border-box;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  cursor: pointer;
}

.rev_sugg .review-target-row:hover {
  border-color: var(--gray-400);
}

.rev_sugg .review-target-row > .UserAvatarComponent {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--radius-4xl);
  object-fit: cover;
}

.rev_sugg .review-target-row > .UserAvatarComponent.av_comp {
  border-radius: var(--radius-sm);
}

.rev_sugg .review-target-main {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 32px;
  align-items: center;
}

.rev_sugg .review-target-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-md);
}

.rev_sugg .review-target-name-text,
.rev_sugg .review-target-name > .nmsp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rev_sugg .review-target-rate-button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--spacing-alt-xs);
  box-sizing: border-box;
  padding: var(--spacing-sm) var(--spacing-alt-sm) var(--spacing-sm) var(--spacing-sm);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  overflow: hidden;
}

.rev_sugg .review-target-row:hover .review-target-rate-button,
.rev_sugg .review-target-row:focus .review-target-rate-button {
  border-color: var(--info-300);
}

.rev_sugg .review-target-star-icon {
  --star-shape-mask: url("/img/redesign/icons/star-mask.svg");
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  position: relative;
  display: block;
}

.rev_sugg .review-target-star-shape {
  position: absolute;
  inset: 0;
  background: var(--gray-400);
  mask: var(--star-shape-mask) center/contain no-repeat;
  -webkit-mask: var(--star-shape-mask) center/contain no-repeat;
}

.rev_sugg .review-target-row:hover .review-target-star-shape,
.rev_sugg .review-target-row:focus .review-target-star-shape {
  background: var(--info-400);
}

.rev_sugg .review-target-rate-label {
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.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_list:has(.dlrev) {
  border-bottom: 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);
}

.pwdv .vih,
.pwmb .vih {
  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);
  overflow-wrap: anywhere;
  word-break: break-word;
}

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

#pmenu > .share {
  float: right;
  width: 330px;
  margin-top: -47px;
  padding: var(--spacing-alt-sm) var(--spacing-none) 18px var(--spacing-xl);
}

#pmenu .share .flag {
  font-size: 11px;
  float: right;
  margin-top: 5px;
  vertical-align: middle;
}

#pmenu .share .flag a {
  color: var(--gray-900);
  opacity: 0.5;
  transition: color 0.2s, background-color 0.2s;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

#pmenu .share .flag a:hover {
  text-decoration: none;
  opacity: 1;
  color: var(--error-400);
}

#pmenu .share .flag a:hover div {
  background: url(/img/redesign/icons/report-flag-filled.svg) no-repeat 0 0;
}

#pmenu .share .flag a div {
  color: var(--gray-900);
  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: color 0.2s;
}

.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;
  gap: var(--spacing-md);
  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 {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vi .compat > .c > div > div:first-child {
  flex: 0 0 20%;
}

/*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 .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);
  position: relative;
}

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

.post-ad-form .bblink.post-another-ad {
  background-color: var(--brand-100);
  color: var(--brand-400) !important;
}

.post-ad-form .bblink.post-another-ad:hover {
  background-color: var(--brand-200);
}

.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 {
  display: flex;
  gap: var(--spacing-sm);
  align-items: baseline;
  max-width: 620px;
  line-height: var(--line-height-sm);
  color: var(--gray-700);
}

.contact_sel .post-add-call-recording-notice-icon {
  flex: 0 0 auto;
}

.contact_sel .post-add-call-recording-notice-text {
  min-width: 0;
  white-space: normal;
}

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-none);
  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-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;
  /* Figma: text/disabled (#b1b2bd) */
  color: #b1b2bd;
}

.step-widget-wrapper .steps-wrapper .step-wrapper.completed {
  /* Figma: text/primary (#0e0f21) */
  color: #0e0f21;
}

.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;
  /* Figma: border/default (#ededf0) */
  border: 1px solid #ededf0;
  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);
  /* Figma: button-bg/success (#08d058) */
  background-color: #08d058;
  border: none;
}

.step-widget-wrapper .steps-wrapper .step-wrapper.completed .circle > img {
  display: block;
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

.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: 32px;
  height: 32px;
  padding: var(--spacing-none);
  margin-right: var(--spacing-alt-sm);
  border-radius: 24px;
  background: url(/img/redesign/icons/xicon.svg) center center no-repeat;
  background-size: 32px 32px;
  transition: background-color 0.2s;
  position: absolute;
  right: 0;
  top: 10px;
}

.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-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-lg) var(--spacing-none) var(--spacing-xs);
}

.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.with-icon-title {
  padding-top: var(--spacing-xl);
}

.ui-dialog .ui-dialog-titlebar.with-icon-title .ui-dialog-title-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}

.ui-dialog .ui-dialog-titlebar.with-icon-title .ui-dialog-title-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.ui-dialog .ui-dialog-titlebar.with-icon-title .ui-dialog-title-icon-image {
  display: block;
  width: 24px;
  height: 24px;
}

.ui-dialog .ui-dialog-titlebar.with-icon-title .ui-dialog-title-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--font-size-3xl);
}

.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-2xl) var(--spacing-2xl);
  border: 0;
  background: none;
}

.ui-dialog #dlgLangSel.ui-dialog-content {
  padding-top: var(--spacing-md);
}

/* 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_idcreative_imageupload,
#docu_idmobile_creative_imageupload,
#docu_idsupporting_documentupload,
.PropertyVerificationComponent [id^=docu_][id$=upload] {
  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,
.PropertyVerificationComponent [id^=docu_][id$=upload] {
  border: 1px solid var(--gray-300);
}

#docu_idsupporting_documentimg > img,
.PropertyVerificationComponent [id^=docu_][id$=img] > 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%;
}

.docupload #document-upload-container,
.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,
.docupload > .u:not(.PropertyVerificationComponent [id^=docu_][id$=upload]) > 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, .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;
}

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

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 {
  padding: var(--spacing-alt-xs) var(--spacing-none);
}

.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;
  border-radius: 8px;
}

.ad3.list-ads-banner {
  margin: var(--spacing-none);
  height: unset;
}

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

.campaign-approve-form__actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

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

#mapview #map {
  position: fixed !important;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
}

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

#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,
.PropertyVerificationComponent [id^=docu_][id$=files],
.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;
}

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

.vi .resume .header .l img.resume-placeholder-frame {
  border: 1px solid var(--gray-400);
}

.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 > .i .extra-info-first-item {
  margin-top: var(--spacing-alt-xs);
}

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

/*language selector*/
#dlgLangSel {
  display: none;
}

#dlgLangSel .i > div {
  font-size: 20px;
  padding: var(--spacing-xxs);
  text-align: center;
  transition: all 0.4s;
}

#dlgLangSel .p {
  margin: var(--spacing-md) var(--spacing-none);
}

#dlgLangSel .p > div {
  font-size: 15px;
  color: var(--gray-700);
  padding: 1px;
  text-align: center;
  transition: all 0.4s;
}

#dlgLangSel .bar {
  display: flex;
  margin: var(--spacing-lg) var(--spacing-none) var(--spacing-alt-sm);
}

#dlgLangSel .bar > a {
  margin: var(--spacing-none) var(--spacing-alt-xs);
  flex: 1;
  padding: var(--spacing-alt-md);
  text-align: center;
  border-radius: 16px;
  transition: color 0.2s, background-color 0.2s;
  border: 2px solid transparent;
}

#dlgLangSel .bar > a:hover {
  border-color: var(--brand-400);
}

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

#dlgLangSel .bar > a > img {
  width: 96px;
  height: 96px;
  margin-bottom: var(--spacing-md);
}

#dlgLangSel .bar > a > div {
  font-size: 16px;
  color: var(--gray-700);
}

/* 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: 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) {
  #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);
  }
  .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) {
  #main,
  .pmain,
  #hcontent, #main .bubble,
  #puheader > .head > .bnr img,
  .story, .story_h {
    width: 1000px;
  }
  #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;
  }
  #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 .featured-top-left > .st > .c > a:nth-child(n+6) {
    display: none;
  }
  .featured .featured-top-left > .u > .c > a:nth-child(n+7) {
    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);
  }
  #pmenu > .share {
    width: 100%;
  }
  .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-align-start {
  display: flex;
  justify-content: start;
  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);
}

/* 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 > .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 .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);
}

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

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

.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 > ul.requirements-content {
  padding-left: var(--spacing-4xl);
  margin: var(--spacing-none);
}

.start-verification-modal .requirements-cont p:first-child {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 18px;
  font-weight: bold;
}

.start-verification-modal .requirements-cont > ul.requirements-content > li.requirement,
.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 .continue-button {
  background-color: var(--gray-100);
  border: 1px solid var(--brand-200);
  color: var(--brand-400);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.start-verification-modal .continue-button:hover {
  background-color: var(--brand-100);
  border-color: var(--brand-300);
}

.start-verification-modal .action-buttons {
  align-items: stretch;
  gap: var(--spacing-xl);
  width: 100%;
}

.agency-company-prereq {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.agency-company-prereq__description {
  letter-spacing: -0.34px;
}

.agency-company-prereq .requirements-cont {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agency-company-prereq__requirements-title > * {
  letter-spacing: -0.28px;
  margin: 0;
}

.agency-company-prereq .requirements-content {
  list-style: disc;
  padding-left: 21px;
  margin: 0;
}

.agency-company-prereq__requirements-item {
  letter-spacing: -0.28px;
  margin: 0;
}

.agency-company-prereq .action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}

.agency-company-prereq .action-buttons > * {
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.agency-company-prereq .action-buttons .cancel-button {
  background-color: var(--gray-300);
  color: var(--gray-800);
}

.agency-company-prereq .action-buttons .continue-button {
  background-color: var(--brand-100);
  color: var(--brand-400);
  border: 0;
}

.agency-company-prereq .action-buttons .start-button {
  background-color: var(--brand-400);
  color: var(--gray-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;
}

/*------------------------------------------------------------*/
/*THIS IS FROM MASTER*/
/*	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);
  }
}
/*THIS is from core*/
/*	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;
}

/*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);
}

.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;
  }
}
/*	Main section in B2C landing page	*/
/*	Benefits section in B2C landing page	*/
#self-serve-benefit-section-wrapper {
  box-sizing: border-box;
}

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

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

.individual-benefit-section span {
  color: var(--gray-900);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.14px;
}

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

.individual-benefit-section .benefit-col-one > div:hover::before,
.individual-benefit-section .benefit-col-two > div:hover::before {
  opacity: 20%;
}

@media (hover: none) {
  .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;
}

.self-serve-landing-page-wrapper > div.flex-center {
  margin-bottom: 90px;
}

/*	Orders and shop tab empty state view and become seller touchpoint view	*/
.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%;
}

.purchases-empty-state-wrapper {
  height: 50vh;
}

.purchases-empty-state-wrapper img {
  height: 120px;
}

.orders-empty-state-wrapper > div > h3,
.purchases-empty-state-wrapper > div > .purchases-empty-state-title {
  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 {
  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;
}

.purchases-empty-state-wrapper > div > span {
  margin-bottom: var(--spacing-2xl);
}

/*	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 {
  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);
}

/*	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 .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 .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);
}

#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-results:has(.category-search-empty-result) > .t,
.category-page .category-results:has(.category-search-empty-result) > .choose-category-manually {
  display: none;
}

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

.category-search-empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  text-align: center;
}

.category-search-empty-result .empty-result-img {
  width: 200px;
  height: 200px;
  margin-bottom: var(--spacing-4xl);
}

.category-search-empty-result .empty-result-img img {
  width: 200px;
  height: 200px;
}

.category-search-empty-result .empty-result-title {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: var(--spacing-sm);
}

.category-search-empty-result .empty-result-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.category-search-empty-result .empty-result-description a {
  color: var(--brand-400);
  font-weight: 500;
  text-decoration: none;
}

.category-search-empty-result .empty-result-description-text {
  color: var(--gray-800);
}

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

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 > .detailsRight .reviewPromptCard,
#main.pvp #pmenu .reviewPromptCard {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
  background-color: var(--brand-100);
}

.orderDetailPage > .detailsWrapper > .detailsRight .reviewPromptTitle,
#main.pvp #pmenu .reviewPromptTitle {
  width: 100%;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-height-sm);
  letter-spacing: 0;
}

.orderDetailPage > .detailsWrapper > .detailsRight .reviewPromptButton,
#main.pvp #pmenu .reviewPromptButton {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-alt-xs);
  padding: var(--spacing-sm) var(--spacing-alt-sm) var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: 0;
  cursor: pointer;
}

.orderDetailPage > .detailsWrapper > .detailsRight .reviewPromptButton:hover,
#main.pvp #pmenu .reviewPromptButton:hover {
  border-color: var(--gray-400);
}

.orderDetailPage > .detailsWrapper > .detailsRight .reviewPromptButton__icon,
#main.pvp #pmenu .reviewPromptButton__icon {
  width: 16px;
  height: 16px;
}

#main.pvp #pmenu .reviewPromptButton:hover,
#main.pvp #pmenu .reviewPromptButton:focus {
  color: var(--gray-700);
  text-decoration: none;
}

.orderDetailPage > .detailsWrapper > .detailsRight .reviewPromptButton__text,
#main.pvp #pmenu .reviewPromptButton__text {
  line-height: var(--line-height-sm);
}

.orderDetailPage > .detailsWrapper > .detailsRight .reviewPromptDescription,
#main.pvp #pmenu .reviewPromptDescription {
  color: var(--gray-500);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: 0;
}

.ui-dialog:has(.review-v2-form) {
  width: 650px !important;
  max-width: calc(100vw - var(--spacing-6xl)) !important;
}

.ui-dialog:has(.review-v2-form) .ui-dialog-content {
  padding: var(--spacing-none) var(--spacing-2xl) var(--spacing-2xl) !important;
}

.review-v2-form {
  box-sizing: border-box;
  width: 602px;
  max-width: 100%;
  padding: var(--spacing-none);
  color: var(--gray-900);
}

.review-v2-form * {
  box-sizing: border-box;
}

.review-v2-target {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  min-height: var(--spacing-12xl);
  padding: var(--spacing-lg);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  background: var(--gray-100);
}

.review-v2-target img {
  width: var(--spacing-8xl);
  height: var(--spacing-8xl);
  border-radius: var(--radius-4xl);
  object-fit: cover;
}

.review-v2-target-title {
  color: var(--gray-900);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
}

.review-v2-target-subtitle {
  margin-top: var(--spacing-xs);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-sm);
}

.review-v2-criteria-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-md);
  padding: var(--spacing-xl);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-lg);
  background: var(--gray-100);
}

.review-v2-criterion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.review-v2-criterion-title {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
}

.review-v2-criterion-description {
  margin-top: var(--spacing-xxs);
  color: var(--gray-600);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
}

.review-v2-stars {
  display: flex;
  gap: var(--spacing-alt-xs);
}

.review-v2-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  padding: var(--spacing-none);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  cursor: pointer;
}

.review-v2-star img {
  width: 18px;
  height: 18px;
}

.review-v2-star.is-selected img {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
}

.review-v2-field {
  margin-top: var(--spacing-md);
}

.review-v2-field textarea {
  height: 128px !important;
  min-height: 128px;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  outline: none !important;
  box-shadow: none !important;
  background: var(--gray-300) !important;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.review-v2-field textarea:hover {
  border-color: var(--gray-400) !important;
}

.review-v2-field textarea:focus,
.review-v2-field textarea:active {
  border-color: var(--gray-900) !important;
  background: var(--gray-100) !important;
}

.review-v2-field .textareaWrapper .counterVal {
  right: var(--spacing-xs);
  bottom: var(--spacing-xs);
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-color: transparent !important;
  background: var(--gray-300) !important;
  color: var(--gray-500) !important;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
}

.review-v2-field textarea:hover + .counterVal {
  border-color: var(--gray-400) !important;
}

.review-v2-field textarea:focus + .counterVal,
.review-v2-field textarea:active + .counterVal {
  border-color: var(--gray-900) !important;
  background: var(--gray-100) !important;
}

.review-v2-attachment-input {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: var(--spacing-md);
  gap: var(--spacing-md);
}

.chat-attachment-input.review-v2-attachment-input {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: var(--spacing-md);
}

.review-v2-attachment-input .chat-attachment-pick {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: var(--spacing-4xl);
  gap: var(--spacing-alt-xs);
  padding: var(--spacing-alt-xs) var(--spacing-alt-sm) var(--spacing-alt-xs) var(--spacing-sm);
  border: 0;
  border-radius: 100px;
  background: var(--brand-100);
  color: var(--brand-500);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  white-space: nowrap;
}

.review-v2-attachment-input .chat-attachment-pick:hover,
.review-v2-attachment-input .chat-attachment-pick:focus,
.review-v2-attachment-input .chat-attachment-pick:focus-visible {
  background: var(--brand-100);
}

.review-v2-attachment-input .chat-attachment-pick:disabled,
.review-v2-attachment-input .chat-attachment-pick:disabled:hover,
.review-v2-attachment-input .chat-attachment-pick:disabled:focus,
.review-v2-attachment-input .chat-attachment-pick:disabled:focus-visible {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: default;
}

.review-v2-attachment-input .chat-attachment-pick-icon {
  display: block;
  flex: 0 0 var(--spacing-xl);
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  background: url("/img/redesign/icons/attach.svg") center center/var(--spacing-xl) var(--spacing-xl) no-repeat;
  -webkit-mask: none;
  mask: none;
}

.review-v2-attachment-input .chat-attachment-pick:disabled .chat-attachment-pick-icon {
  filter: grayscale(1);
  opacity: 0.45;
}

.review-v2-attachment-input .chat-attachment-pick-label {
  display: inline-block;
  color: var(--brand-500);
  white-space: nowrap;
}

.review-v2-attachment-input .chat-attachment-pick:disabled .chat-attachment-pick-label {
  color: var(--gray-500);
}

.review-v2-attachment-input .chat-attachment-preview {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--spacing-xs);
}

.review-v2-attachment-input .chat-attachment-preview:empty {
  display: none;
}

.review-v2-attachment-input .chat-attachment-preview-item {
  width: var(--spacing-10xl);
  height: var(--spacing-10xl);
  border-radius: var(--radius-alt-xs);
}

.review-v2-attachment-input .chat-attachment-error {
  width: auto;
}

.review-v2-actions {
  margin-top: var(--spacing-2xl);
}

.review-v2-actions input {
  width: 100%;
  height: var(--spacing-9xl);
  border-radius: var(--radius-md);
}

.review-v2-actions input:disabled {
  background: var(--gray-400) !important;
  color: var(--gray-500) !important;
  cursor: default;
  opacity: 1;
}

.ui-dialog:has(.review-v2-success) {
  width: 650px !important;
  max-width: calc(100vw - var(--spacing-4xl)) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  background: var(--gray-100);
}

.ui-dialog:has(.review-v2-success) .ui-dialog-titlebar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ui-dialog:has(.review-v2-success) .ui-dialog-title {
  display: none;
}

.ui-dialog:has(.review-v2-success) .ui-dialog-titlebar-close {
  position: absolute;
  top: var(--spacing-alt-sm);
  right: var(--spacing-alt-sm);
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ui-dialog:has(.review-v2-success) .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none;
}

.ui-dialog:has(.review-v2-success) .ui-icon-closethick {
  display: block;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  margin: 0;
  background: url("/img/redesign/icons/close-dark.svg") center center/var(--spacing-alt-md) var(--spacing-alt-md) no-repeat;
}

.ui-dialog:has(.review-v2-success) .ui-dialog-content {
  padding: 0 !important;
  overflow: hidden;
}

.review-v2-success {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 650px;
  max-width: 100%;
  min-height: 493px;
  padding: var(--spacing-12xl) var(--spacing-2xl) var(--spacing-2xl);
  background: var(--gray-100);
  color: var(--text-default);
  text-align: center;
}

.review-v2-success * {
  box-sizing: border-box;
}

.review-v2-success__illustration {
  display: block;
  width: 320px;
  height: 220px;
  max-width: 100%;
  object-fit: contain;
}

.review-v2-success__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 448px;
  max-width: 100%;
  margin-top: var(--spacing-4xl);
  color: var(--text-default);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-lg);
}

.review-v2-success__title {
  font-weight: 700;
}

.review-v2-success__description {
  font-weight: 500;
}

.review-v2-success__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 97px;
  height: var(--spacing-9xl);
  margin-top: var(--spacing-2xl);
  padding: 0 var(--spacing-2xl);
  border-radius: var(--radius-alt-sm);
  background: var(--brand-100);
  color: var(--brand-400) !important;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  text-decoration: none;
  white-space: nowrap;
}

.review-v2-success__button:hover,
.review-v2-success__button:focus {
  background: var(--brand-100);
  color: var(--brand-400) !important;
  text-decoration: none;
}

@media (max-width: 700px) {
  .ui-dialog:has(.review-v2-form) {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ui-dialog:has(.review-v2-form) .ui-dialog-content {
    padding: var(--spacing-none) var(--spacing-lg) var(--spacing-lg) !important;
  }
  .review-v2-form {
    width: 100%;
    padding: var(--spacing-none);
  }
  .review-v2-success {
    width: 100%;
    min-height: 420px;
    padding: var(--spacing-10xl) var(--spacing-lg) var(--spacing-2xl);
  }
  .review-v2-success__copy {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }
}
.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);
}

#buy-bundle-container .upcoming-republishing-info {
  align-items: center;
  background: var(--brand-200);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  color: var(--brand-500);
  display: flex;
  font-size: var(--font-size-md);
  font-weight: 700;
  gap: var(--spacing-xs);
  line-height: var(--line-height-sm);
  max-width: 100%;
  padding: var(--spacing-alt-xs) var(--spacing-md);
  width: 100%;
}

#buy-bundle-container .upcoming-republishing-icon {
  align-self: flex-start;
  background: currentColor;
  display: inline-block;
  flex: 0 0 var(--spacing-lg);
  height: var(--spacing-lg);
  margin-top: var(--spacing-xxs);
  mask: url("/img/redesign/icons/renew-free.svg") center/contain no-repeat;
  -webkit-mask: url("/img/redesign/icons/renew-free.svg") center/contain no-repeat;
  width: var(--spacing-lg);
}

#buy-bundle-container #upcoming-republishing-text {
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 1024px) {
  #buy-bundle-container .bundle-config-section .frow .e {
    flex-wrap: wrap;
  }
  #buy-bundle-container .bundle-config-section #idpad,
  #buy-bundle-container .bundle-config-section #idprenew,
  #buy-bundle-container .bundle-config-section #idrepublish {
    display: block;
    width: 100%;
    margin-top: var(--spacing-alt-xs);
    margin-left: var(--spacing-none);
    margin-bottom: var(--spacing-none);
  }
  #buy-bundle-container .upcoming-republishing-info {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-xs);
    padding: var(--spacing-sm) var(--spacing-sm);
  }
  #buy-bundle-container .upcoming-republishing-icon {
    flex-basis: var(--spacing-md);
    height: var(--spacing-md);
    width: var(--spacing-md);
  }
}
.l.username-row {
  display: flex;
  align-items: center;
}

.w-max {
  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; /* remember to change */
  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;
}

@media screen and (min-width: 1025px) {
  .dialog-container {
    justify-content: flex-start;
    padding-top: min(18vh, 300px);
  }
}
.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;
  }
}
/*
 * Loader shown while a dlgo() / dlgoScrollable() modal is fetching its
 * contents. Positioned as a fixed viewport-centered overlay so its
 * placement is independent of where #dialog currently lives in the DOM
 * (#dialog is appended to body before .dialog() runs and would otherwise
 * render in the footer area). z-index sits one above .dialog-container
 * (106) so the loader is always on top of the dimming overlay.
 */
.dlgo-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 107;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
}

/* dialog styles end */
.post-location-icon {
  display: flex;
  width: 18px;
  height: 20px;
  background-image: url(/img/redesign/icons/post-location-new.svg);
  background-size: cover;
}

.post-location-title {
  display: flex;
  justify-content: start;
  align-items: center;
  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 .business-page-body .favorite-heart-container.dl {
  top: 8px;
}

#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) #mainoverlay {
  z-index: 105;
}

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

.ellipsis {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nowrap {
  white-space: nowrap !important;
}

.poi-container {
  margin-bottom: var(--spacing-7xl);
}

.max-content-height {
  min-height: var(--body-content-height);
}

.campaign-creatives-form .actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.campaign-creatives-form .actions .back {
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
  padding: var(--spacing-md) var(--spacing-2xl);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.28px;
  cursor: pointer;
}

.campaign-creatives-form .actions .btn-secondary {
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-md);
  background-color: var(--brand-200);
  color: var(--brand-400);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.28px;
  cursor: pointer;
}

.campaign-creatives-form .actions input[type=submit]:last-of-type {
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-md);
  background-color: var(--brand-400);
  color: var(--gray-100);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.28px;
  cursor: pointer;
}

.campaign-creatives-form .actions input[type=submit].sub:not(.btn-secondary) {
  background-color: var(--gray-400);
  color: var(--gray-500);
  cursor: initial;
}

.campaign-creatives-form .preview-link {
  display: none;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--gray-300);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}

.upload-campaign {
  width: 50%;
}

.upload-campaign .banner-heading {
  display: flex;
  align-items: center;
}

.upload-campaign .docupload > .i .description {
  margin-bottom: var(--spacing-sm);
}

.upload-campaign #document-upload-container {
  margin-top: var(--spacing-sm);
}

#upload-pic-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-content: flex-start;
  justify-content: flex-start;
}

.upload-campaign #docu_idcreative_imageupload {
  box-sizing: border-box;
  padding: var(--spacing-sm);
}

.upload-campaign #docu_idmobile_creative_imageupload {
  box-sizing: border-box;
  padding: var(--spacing-sm);
}

.upload-campaign.vertical .uploadedDocumentPreview,
.upload-campaign.vertical #docu_idcreative_imageupload,
.upload-campaign.vertical #docu_idcreative_imageimg {
  height: 304px;
  width: 260px;
}

.upload-campaign.horizontal-mini .uploadedDocumentPreview,
.upload-campaign.horizontal-mini #docu_idcreative_imageupload,
.upload-campaign.horizontal-mini #docu_idcreative_imageimg {
  width: 600px;
  height: auto;
}

.upload-campaign.horizontal .uploadedDocumentPreview,
.upload-campaign.horizontal #docu_idcreative_imageupload,
.upload-campaign.horizontal #docu_idcreative_imageimg {
  width: 600px;
  height: auto;
}

#upload-doc-inside-container-info {
  text-align: center;
}

.upload-campaign.vertical .x,
.upload-campaign.horizontal .x,
.upload-campaign.horizontal-mini .x {
  left: calc(100% - 24px);
}

.upload-campaign.vertical .uploadedDocumentPreview,
.upload-campaign.vertical #docu_idcreative_imageupload,
.upload-campaign.vertical #docu_idcreative_imageimg {
  aspect-ratio: 6/7;
}

.upload-campaign.vertical .mobile-creative-uploader .uploadedDocumentPreview,
.upload-campaign.vertical #docu_idmobile_creative_imageupload,
.upload-campaign.vertical #docu_idmobile_creative_imageimg {
  aspect-ratio: 3/1;
}

.campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageupload,
.campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageimg {
  width: auto;
  height: 135px;
  aspect-ratio: 3/1;
}

.campaign-creatives-form .upload-campaign.vertical #docu_idcreative_imageupload,
.campaign-creatives-form .upload-campaign.vertical #docu_idcreative_imageimg {
  width: auto;
  height: 308px;
  aspect-ratio: 6/7;
}

.upload-campaign.horizontal .uploadedDocumentPreview,
.upload-campaign.horizontal #docu_idcreative_imageupload,
.upload-campaign.horizontal #docu_idcreative_imageimg {
  aspect-ratio: 4/1;
}

.upload-campaign.horizontal-mini .uploadedDocumentPreview,
.upload-campaign.horizontal-mini #docu_idcreative_imageupload,
.upload-campaign.horizontal-mini #docu_idcreative_imageimg {
  aspect-ratio: 7/1;
}

.upload-campaign #docu_idcreative_imagepickfiles,
.upload-campaign #docu_idmobile_creative_imagepickfiles,
.upload-campaign #upload-doc-inside-container-text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
}

.upload-campaign #docu_idcreative_imagepickfiles,
.upload-campaign #docu_idmobile_creative_imagepickfiles {
  color: var(--brand-400);
}

.upload-campaign #upload-doc-inside-container-text {
  color: var(--gray-500);
}

#campaign-create-page,
#campaign-create-page form {
  height: 100%;
}

#campaign-create-page {
  position: relative;
  min-height: calc(100dvh - var(--header-height-with-secondary-header));
  padding-bottom: var(--spacing-14xl);
  box-sizing: border-box;
}

#campaign-create-page .actions {
  z-index: 2;
}

#campaign-create-page #mob-preview {
  display: none;
}

#campaign-create-page .campaign-completion-wrapper {
  margin-top: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-11xl);
}

#campaign-create-page .campaign-completion-wrapper .heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}

#campaign-create-page .campaign-completion-wrapper .campaign-completion-cta {
  padding: var(--spacing-lg) var(--spacing-2xl);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  height: 52px;
  color: var(--gray-100);
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  font-weight: 500;
  letter-spacing: -0.3px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: var(--brand-400);
  transition: background-color 0.2s ease-out;
}

#campaign-create-page .campaign-completion-wrapper .campaign-completion-cta:hover {
  background: var(--brand-500);
}

.campaign-list-header {
  display: flex;
  justify-content: flex-start;
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-2xl);
}

.campaign-list-header.hide {
  visibility: hidden;
}

.campaign-list-header .campaign-create-btn {
  display: inline-flex;
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-alt-sm);
  border-radius: var(--radius-sm);
  background: var(--brand-400);
  color: var(--gray-100);
  font-weight: 500;
  line-height: var(--line-height-sm);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.campaign-list-header .campaign-create-btn:hover {
  background-color: var(--brand-300);
}

.list-ads-post-bottom {
  position: relative;
}

.bundleTabWrapper {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bundleTabWrapper > div {
  width: 100%;
}

.post-ad-form .fbtn input,
.post-ad-form .promotion-combo-buttons .promotion-combo-button.promote,
.PropertyVerificationComponent .actions button,
.PropertyVerificationComponent .buttons .button {
  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: 12px;
  margin: 0;
}

.post-ad-form .fbtn .paf_primary_btns {
  display: flex;
  gap: var(--spacing-md);
}

.post-ad-form .fbtn {
  justify-content: start;
  padding: var(--spacing-4xl) 0;
  gap: var(--spacing-lg);
}

.underline {
  text-decoration-line: underline;
}

.turnstile-widget-container {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.turnstile-submit-loading {
  pointer-events: none;
  cursor: default;
  opacity: 1;
  background-image: url(/img/turnstile-button-loader.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
  color: var(--gray-500);
}

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

.box-blue-highlighted {
  background-color: var(--brand-400);
}

.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;
  }
}
#campaign-ad-reach-form {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-3xl);
}
#campaign-ad-reach-form .step-widget-wrapper {
  margin-bottom: var(--spacing-xs);
  gap: var(--spacing-4xl);
}
@media screen and (max-width: 1024px) {
  #campaign-ad-reach-form .step-widget-wrapper {
    padding: var(--spacing-none) var(--spacing-md);
    margin-bottom: var(--spacing-none);
  }
}
#campaign-ad-reach-form .ad-reach-form-wrapper {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--spacing-3xl);
}
#campaign-ad-reach-form #card-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}
#campaign-ad-reach-form .placement-cards {
  display: flex;
  gap: var(--spacing-xl);
  margin: var(--spacing-none);
}
@media screen and (max-width: 1024px) {
  #campaign-ad-reach-form .placement-cards {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
}
#campaign-ad-reach-form .form-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--spacing-4xl);
}
#campaign-ad-reach-form .form-content .heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#campaign-ad-reach-form .form-content .heading h1 {
  margin-bottom: var(--spacing-none);
}
#campaign-ad-reach-form #category-section {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
}
#campaign-ad-reach-form #category-section .title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}
#campaign-ad-reach-form #category-section h3 {
  margin: var(--spacing-none);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}
#campaign-ad-reach-form #category-section .MultiSelectDropdownComponent.felement_err > .me {
  background-color: transparent;
}
#campaign-ad-reach-form #category-section .MultiSelectDropdownComponent.felement_err > .me input[type=text] {
  background-color: transparent;
  border: none;
}
#campaign-ad-reach-form .fbtn {
  position: absolute;
  bottom: 40px;
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-start;
  align-items: center;
  padding: var(--spacing-none);
  border: none;
  margin: var(--spacing-none);
}
#campaign-ad-reach-form .fbtn > input[type=submit] {
  margin: var(--spacing-none);
  padding: var(--spacing-md) var(--spacing-2xl);
  min-height: var(--spacing-7xl);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
#campaign-ad-reach-form .fbtn > a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  #campaign-ad-reach-form .fbtn {
    background: var(--gray-100);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-none);
    box-sizing: border-box;
    gap: var(--spacing-sm);
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    bottom: 16px;
  }
  #campaign-ad-reach-form .fbtn a, #campaign-ad-reach-form .fbtn button, #campaign-ad-reach-form .fbtn input[type=submit] {
    width: 100%;
  }
}
#campaign-ad-reach-form .fbtn input[type=submit]:disabled,
#campaign-ad-reach-form .fbtn input[type=submit].sub {
  border-radius: var(--radius-md);
  background: var(--gray-400);
  color: var(--gray-500);
}
#campaign-ad-reach-form .fbtn input[type=submit].secondary:not(:disabled):not(.sub) {
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-md);
  background-color: var(--brand-200);
  color: var(--brand-400);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 500;
  letter-spacing: -0.28px;
}
#campaign-ad-reach-form .fbtn input[type=submit].secondary:not(:disabled):not(.sub):hover {
  background-color: var(--brand-200);
}
#campaign-ad-reach-form .fbtn > a.btn-secondary {
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
  padding: var(--spacing-md) var(--spacing-2xl);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 500;
  letter-spacing: -0.28px;
}
#campaign-ad-reach-form .fbtn > a.btn-secondary:hover {
  background: var(--gray-400);
}

.AdCampaignBillingInfoComponent {
  border: 1px solid var(--gray-400);
  width: 100%;
}
.AdCampaignBillingInfoComponent .discounted-price {
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}
.AdCampaignBillingInfoComponent .discounted-price > :first-child {
  text-decoration: line-through;
}
.AdCampaignBillingInfoComponent .bi-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}
.AdCampaignBillingInfoComponent .bi-row .TextComponent,
.AdCampaignBillingInfoComponent .bi-row .HeadingComponent {
  overflow-wrap: anywhere;
}
.AdCampaignBillingInfoComponent .bi-row .HeadingComponent {
  white-space: nowrap;
}
.AdCampaignBillingInfoComponent .bi-row:first-of-type {
  padding-bottom: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--gray-400);
}
.AdCampaignBillingInfoComponent .bi-row + .not-enough-funds {
  margin-top: var(--spacing-xl);
  color: var(--error-400);
}

.AdCampaignCapacityTrackerComponent {
  display: block;
  position: absolute;
  background: transparent;
  width: 1px;
  height: 1px;
}
.AdCampaignCapacityTrackerComponent.homepage {
  right: 0;
  top: 200px;
}
@media (max-width: 1024px) {
  .AdCampaignCapacityTrackerComponent.homepage {
    right: 50%;
  }
}
.hdr.regular-posts .AdCampaignCapacityTrackerComponent.search {
  top: 90px;
  right: 50%;
}
@media (max-width: 1024px) {
  .hdr.regular-posts .AdCampaignCapacityTrackerComponent.search {
    display: none;
  }
}
.mob .AdCampaignCapacityTrackerComponent.search {
  display: none;
}
@media (max-width: 1024px) {
  .mob .AdCampaignCapacityTrackerComponent.search {
    display: block;
    right: 50%;
    top: 100px;
  }
}
.mob-last .AdCampaignCapacityTrackerComponent.search {
  display: none;
}
@media (max-width: 1024px) {
  .mob-last .AdCampaignCapacityTrackerComponent.search {
    display: block;
    right: 50%;
  }
}
.AdCampaignCapacityTrackerComponent.adpage {
  top: 0;
  left: 50%;
  margin: var(--spacing-none) !important;
}
.AdCampaignCapacityTrackerComponent .mob {
  display: none;
}
@media (max-width: 1024px) {
  .AdCampaignCapacityTrackerComponent .mob {
    display: block;
  }
}

.AdCampaignCreativePreviewComponent {
  border: 1px solid var(--gray-400);
  padding: var(--spacing-xl);
  height: fit-content;
  width: 36%;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}
.AdCampaignCreativePreviewComponent .creative-preview-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.AdCampaignCreativePreviewComponent .creative-preview-heading .preview-subtitle {
  margin: 0;
}
.AdCampaignCreativePreviewComponent.no-box {
  padding: var(--spacing-none);
  border: none;
  width: 70%;
}
@media screen and (max-width: 1024px) {
  .AdCampaignCreativePreviewComponent {
    gap: var(--spacing-sm);
    padding: var(--spacing-none);
    border: none;
    width: 100%;
  }
  .AdCampaignCreativePreviewComponent h6 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-2xl);
    letter-spacing: -0.48px;
  }
  .campaign-creatives-form .form-wrapper .AdCampaignCreativePreviewComponent {
    display: none !important;
  }
}

.AdCampaignCreativePreviewModal .TabSwitcherComponent {
  width: 320px;
  max-width: 100%;
}
.ui-dialog:has(.AdCampaignCreativePreviewModal) .ui-dialog-titlebar {
  height: 0;
  z-index: 105;
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}
.AdCampaignCreativePreviewModal .AdCampaignPlacementPreviewComponent.wireframe-search .campaign-preview,
.AdCampaignCreativePreviewModal .AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-banner {
  height: 40px;
}

.campaign-creatives-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--spacing-3xl);
  /* Hide uploader on first paint when campaign already has image (avoids flash when navigating back → next). No !important so JS .show()/.hide() on X click can override. */
  /* After user clicks X: show uploader (flex to keep layout), hide tile (JS also sets inline styles; these back up when class is present) */
}
.campaign-creatives-form .step-widget-wrapper {
  margin-bottom: var(--spacing-2xl);
  gap: var(--spacing-4xl);
}
@media screen and (max-width: 1024px) {
  .campaign-creatives-form .step-widget-wrapper {
    padding: var(--spacing-none) var(--spacing-md);
  }
}
.campaign-creatives-form .creatives-form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-3xl);
}
.campaign-creatives-form .fbtn,
.campaign-creatives-form .BoxComponent.fbtn {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--spacing-none);
  border: none;
  gap: var(--spacing-sm);
  margin: var(--spacing-none);
  position: absolute;
  bottom: 40px;
}
.campaign-creatives-form .fbtn input[type=button],
.campaign-creatives-form .fbtn input[type=submit],
.campaign-creatives-form .BoxComponent.fbtn input[type=button],
.campaign-creatives-form .BoxComponent.fbtn input[type=submit] {
  padding: var(--spacing-md) var(--spacing-2xl);
  min-height: var(--spacing-7xl);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  margin: var(--spacing-none);
}
.campaign-creatives-form .fbtn input[type=submit]:disabled,
.campaign-creatives-form .fbtn input[type=submit].sub,
.campaign-creatives-form .BoxComponent.fbtn input[type=submit]:disabled,
.campaign-creatives-form .BoxComponent.fbtn input[type=submit].sub {
  border-radius: var(--radius-md);
  background: var(--gray-400);
  color: var(--gray-500);
}
@media screen and (max-width: 1024px) {
  .campaign-creatives-form .fbtn,
  .campaign-creatives-form .BoxComponent.fbtn {
    background: var(--gray-100, #fff);
    padding: var(--spacing-md);
    flex-direction: column;
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-none);
    width: 100%;
    bottom: 16px;
  }
  .campaign-creatives-form .fbtn button, .campaign-creatives-form .fbtn input[type=submit], .campaign-creatives-form .fbtn input[type=button],
  .campaign-creatives-form .BoxComponent.fbtn button,
  .campaign-creatives-form .BoxComponent.fbtn input[type=submit],
  .campaign-creatives-form .BoxComponent.fbtn input[type=button] {
    width: 100%;
  }
}
.campaign-creatives-form .fbtn input[type=submit].secondary,
.campaign-creatives-form .BoxComponent.fbtn input[type=submit].secondary {
  background-color: var(--brand-100);
  color: var(--brand-400);
}
.campaign-creatives-form .fbtn input[type=submit].secondary:hover,
.campaign-creatives-form .BoxComponent.fbtn input[type=submit].secondary:hover {
  background-color: var(--brand-200);
}
.campaign-creatives-form .fbtn input[type=button].btncancel,
.campaign-creatives-form .BoxComponent.fbtn input[type=button].btncancel {
  border-radius: var(--radius-md);
  background: var(--gray-300);
  color: var(--gray-900);
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s;
}
.campaign-creatives-form .fbtn input[type=button].btncancel:hover,
.campaign-creatives-form .BoxComponent.fbtn input[type=button].btncancel:hover {
  background: var(--gray-400);
}
.campaign-creatives-form .fbtn input[type=button].btncancel:focus,
.campaign-creatives-form .BoxComponent.fbtn input[type=button].btncancel:focus {
  outline: none;
}
.campaign-creatives-form .form-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-12xl);
}
@media screen and (max-width: 1024px) {
  .campaign-creatives-form .form-wrapper {
    flex-direction: column;
    padding: var(--spacing-none) var(--spacing-md);
    gap: var(--spacing-lg);
  }
  .campaign-creatives-form .form-wrapper .upload-campaign {
    width: 100%;
  }
}
.campaign-creatives-form .upload-campaign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-lg);
}
.campaign-creatives-form .upload-campaign .creative-uploader-group {
  width: 100%;
}
.campaign-creatives-form .upload-campaign .docupload .i {
  margin: var(--spacing-none);
}
.campaign-creatives-form .upload-campaign .docupload .i .TextComponent {
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: var(--font-weight-highlight);
  line-height: var(--line-height-xs);
  letter-spacing: -0.26px;
}
.campaign-creatives-form #document-upload-container {
  position: relative;
}
.campaign-creatives-form #docu_idcreative_imageupload,
.campaign-creatives-form #docu_idcreative_imageimg,
.campaign-creatives-form #docu_idmobile_creative_imageupload,
.campaign-creatives-form #docu_idmobile_creative_imageimg {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.campaign-creatives-form #docu_idcreative_imageupload,
.campaign-creatives-form #docu_idmobile_creative_imageupload {
  z-index: 1;
}
.campaign-creatives-form.has-existing-web-creative:not(.image-removed) #docu_idcreative_imageupload, .campaign-creatives-form.has-existing-mobile-creative:not(.image-removed) #docu_idmobile_creative_imageupload {
  display: none;
}
.campaign-creatives-form.has-existing-web-creative:not(.image-removed) #docu_idcreative_imageimg, .campaign-creatives-form.has-existing-mobile-creative:not(.image-removed) #docu_idmobile_creative_imageimg {
  display: block;
}
.campaign-creatives-form.image-removed #docu_idcreative_imageupload, .campaign-creatives-form.image-removed #docu_idmobile_creative_imageupload {
  display: flex;
}
.campaign-creatives-form.image-removed #docu_idcreative_imageimg, .campaign-creatives-form.image-removed #docu_idmobile_creative_imageimg {
  display: none;
}
.campaign-creatives-form #docu_idcreative_imageimg,
.campaign-creatives-form #docu_idmobile_creative_imageimg {
  display: none;
  background-color: var(--gray-200, #f5f5f5);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.campaign-creatives-form #docu_idcreative_imageimg.has-image, .campaign-creatives-form #docu_idcreative_imageimg.uploadedDocumentPreview,
.campaign-creatives-form #docu_idmobile_creative_imageimg.has-image,
.campaign-creatives-form #docu_idmobile_creative_imageimg.uploadedDocumentPreview {
  display: block;
}
.campaign-creatives-form #docu_idcreative_imageimg.loading,
.campaign-creatives-form #docu_idmobile_creative_imageimg.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center center !important;
  background-repeat: no-repeat;
}
.campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageupload,
.campaign-creatives-form .upload-campaign.vertical .mobile-creative-uploader .uploadedDocumentPreview {
  position: relative;
  aspect-ratio: 3/1;
  width: auto;
  height: 135px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
  cursor: pointer;
}
.campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageimg {
  position: relative;
  aspect-ratio: 3/1;
  width: auto;
  height: 135px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
}
.campaign-creatives-form .upload-campaign.vertical .mobile-creative-uploader .uploadedDocumentPreview {
  padding: var(--spacing-none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: default;
}
.campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imagepickfiles {
  color: var(--brand-400);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
}
.campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageupload,
.campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageimg {
  width: auto;
  height: 135px;
  aspect-ratio: 3/1;
}
.campaign-creatives-form .upload-campaign.vertical #docu_idcreative_imageupload,
.campaign-creatives-form .upload-campaign.vertical #docu_idcreative_imageimg {
  width: auto;
  height: 308px;
  aspect-ratio: 6/7;
}
@media screen and (max-width: 1024px) {
  .campaign-creatives-form .upload-campaign.vertical #docu_idcreative_imageupload {
    width: auto;
    height: 308px;
  }
  .campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageupload,
  .campaign-creatives-form .upload-campaign.vertical #docu_idmobile_creative_imageimg {
    width: 100%;
    height: auto;
    aspect-ratio: 3/1;
  }
}
.campaign-creatives-form .preview-link {
  display: none !important;
}
@media screen and (max-width: 1024px) {
  .campaign-creatives-form {
    margin-bottom: var(--spacing-14xl);
    height: inherit;
    min-height: 100%;
  }
  .campaign-creatives-form .preview-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-2xl);
    border-radius: var(--radius-md);
    background: var(--gray-300);
    color: var(--gray-900);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: 500;
  }
}

.AdCampaignDeleteDraftModal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  padding-bottom: var(--spacing-sm);
}
.AdCampaignDeleteDraftModal .delete-cmp-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.AdCampaignDeleteDraftModal form {
  width: 100%;
}
.AdCampaignDeleteDraftModal .dlt-form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.AdCampaignDeleteDraftModal .dlt-form input {
  width: 50%;
  height: 56px;
  padding: var(--spacing-lg);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
  letter-spacing: -0.3px;
  border-radius: var(--radius-md);
  transition: background-color 0.3s ease-out;
}
.AdCampaignDeleteDraftModal .dlt-form input[type=submit] {
  color: var(--gray-100);
  background-color: var(--error-400);
}
.AdCampaignDeleteDraftModal .dlt-form input[type=submit]:hover {
  background-color: var(--error-300);
}
.AdCampaignDeleteDraftModal .dlt-form input[type=button] {
  color: var(--gray-900);
  background-color: var(--gray-300);
}

.ui-dialog:has(.AdCampaignDeleteDraftModal) .ui-dialog-titlebar {
  height: 0;
  z-index: 105;
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}

.AdCampaignDetailComponent .info-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-12xl);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .edit-mode-btns {
  align-items: center;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .edit-mode-btns input,
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .save-btn-container .save-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  height: auto;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .girow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xxs);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .girow:has(.inline-edit-wrapper),
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .girow .inline-edit-wrapper {
  width: 100%;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .girow .inline-edit-mode {
  flex-direction: column;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .girow .inline-edit-mode .edit-mode-btns {
  justify-content: flex-start;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .inline-edit-wrapper {
  overflow-wrap: anywhere;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .inline-edit-wrapper > .inline-edit-mode.show-error .edit-element-wrapper input[name=campaign_name], .AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .inline-edit-wrapper > .inline-edit-mode.show-error .edit-element-wrapper input[name=campaign_name]:focus {
  border-color: var(--error-400) !important;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .inline-edit-wrapper .inline-view-mode {
  align-items: center;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox .inline-edit-wrapper .initial-text {
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: var(--line-height-lg);
  color: var(--gray-900);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions.contact-support-btn a,
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .pause-btn,
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .continue-btn,
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .delete-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: 500;
  letter-spacing: -0.26px;
  transition: background-color 0.3s ease-out;
  white-space: nowrap;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions.contact-support-btn a:focus {
  border: none;
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions.contact-support-btn a,
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .pause-btn {
  color: var(--gray-900);
  background-color: var(--gray-300);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions.contact-support-btn a:hover,
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .pause-btn:hover {
  background-color: var(--gray-400);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .continue-btn {
  background-color: var(--brand-100);
  color: var(--brand-400);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .continue-btn:hover {
  background-color: var(--brand-200);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .delete-btn {
  background-color: var(--error-100);
  color: var(--error-400);
}
.AdCampaignDetailComponent .info-wrapper .gibox-wrapper .gibox-actions .delete-btn:hover {
  background-color: var(--error-200);
}
.AdCampaignDetailComponent #pageButtonBar {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-2xl) var(--spacing-none);
}
.AdCampaignDetailComponent #pageButtonBar a {
  padding: var(--spacing-none);
}
.AdCampaignDetailComponent #pageButtonBar a:before {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: var(--spacing-none) 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);
}
.AdCampaignDetailComponent #pageButtonBar a:hover:before {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}
.AdCampaignDetailComponent #pageButtonBar a:focus {
  border: none;
}
@media screen and (max-width: 1024px) {
  .AdCampaignDetailComponent {
    padding: var(--spacing-none) var(--spacing-md);
  }
  .AdCampaignDetailComponent .info-wrapper {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing-2xl);
    width: 100%;
  }
  .AdCampaignDetailComponent .info-wrapper .inline-edit-wrapper,
  .AdCampaignDetailComponent .info-wrapper .gibox-wrapper,
  .AdCampaignDetailComponent .info-wrapper .girow {
    width: 100%;
  }
  .AdCampaignDetailComponent .info-wrapper .gibox {
    gap: var(--spacing-md);
    width: 100%;
  }
  .AdCampaignDetailComponent .pibox-wrapper .pibox .AdCampaignSummaryComponent {
    padding: var(--spacing-lg);
  }
  .AdCampaignDetailComponent #pageButtonBar {
    padding-bottom: var(--spacing-lg);
  }
}

.AdCampaignListComponent {
  font-family: inherit;
  /* Mobile web: row 1 = thumb + title/status, row 2 = Placement/Budget/etc. full width under title */
}
@media screen and (max-width: 1024px) {
  .AdCampaignListComponent .bip {
    border-radius: var(--spacing-sm);
    margin: var(--spacing-xl) var(--spacing-md);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  }
  .AdCampaignListComponent .bip .t {
    border-radius: var(--spacing-sm) var(--spacing-sm) var(--spacing-none) var(--spacing-none);
  }
  .AdCampaignListComponent .bip .c {
    border-radius: var(--spacing-none) var(--spacing-none) var(--spacing-sm) var(--spacing-sm);
  }
}
.AdCampaignListComponent .campaign-list-header {
  display: flex;
  justify-content: flex-start;
  margin: var(--spacing-sm) var(--spacing-none) var(--spacing-2xl);
}
.AdCampaignListComponent .campaign-create-btn {
  display: inline-flex;
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-alt-sm);
  border-radius: var(--radius-sm);
  background: var(--brand-400);
  color: var(--gray-100);
  font-weight: 500;
  line-height: var(--line-height-sm);
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}
.AdCampaignListComponent .campaign-create-btn:hover {
  background-color: var(--brand-300);
}
.AdCampaignListComponent .campaign-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.AdCampaignListComponent .campaign-card {
  display: grid !important;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto auto;
  padding: var(--spacing-md);
  align-items: start;
  gap: var(--spacing-lg);
  border-radius: var(--spacing-sm, 8px) var(--spacing-sm, 8px) 8px 8px;
  border: 1px solid var(--gray-400, #E6E6E9);
  background: var(--gray-100, #FFF);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.AdCampaignListComponent .campaign-card.card-hovered, .AdCampaignListComponent .campaign-card.menu-hovered {
  border-color: var(--brand-400, #0078F9);
}
.AdCampaignListComponent .campaign-card.card-hovered:not(.menu-hovered) .campaign-title-link {
  color: var(--brand-400);
}
.AdCampaignListComponent .campaign-card:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}
.AdCampaignListComponent .campaign-thumb {
  grid-column: 1;
  grid-row: 1/-1;
  display: flex;
  width: 100px;
  height: 100px;
  padding: 3px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  background: var(--gray-300, #F4F4F4);
  overflow: hidden;
  box-sizing: border-box;
}
.AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio.thumb-vertical {
  aspect-ratio: 6/7;
}
.AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio.thumb-horizontal {
  aspect-ratio: 4/1;
}
.AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio.thumb-horizontal-mini {
  aspect-ratio: 7/1;
}
.AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio.placeholder {
  background: var(--gray-300, #F4F4F4);
}
.AdCampaignListComponent .campaign-thumb.placeholder {
  background: var(--gray-300, #F4F4F4);
}
.AdCampaignListComponent .campaign-thumb.placeholder img {
  display: block;
}
.AdCampaignListComponent .campaign-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.AdCampaignListComponent .campaign-meta {
  grid-column: 2;
  grid-row: 2;
}
.AdCampaignListComponent .campaign-bottom {
  grid-column: 2;
  grid-row: 3;
}
.AdCampaignListComponent .campaign-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-alt-sm);
  align-items: flex-start;
}
.AdCampaignListComponent .campaign-title-row {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  min-width: 0;
}
.AdCampaignListComponent .campaign-title {
  min-width: 0;
  color: var(--text-primary, #0E0F21);
  font-size: var(--font-size-md, 15px);
  font-style: normal;
  font-weight: var(--font-weight-heading, 700);
  line-height: var(--line-height-sm, 24px);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.AdCampaignListComponent .campaign-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
}
.AdCampaignListComponent .campaign-title-link:hover {
  color: var(--brand-400);
}
.AdCampaignListComponent .campaign-status {
  display: flex;
  padding: var(--spacing-xs) var(--spacing-sm);
  align-items: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xxs, 12px);
  font-style: normal;
  font-weight: var(--font-weight-highlight, 500);
  line-height: var(--line-height-xxs, 16px);
  letter-spacing: -0.24px;
  white-space: nowrap;
}
.AdCampaignListComponent .campaign-status.green {
  background: var(--success-200, #C6FFD3);
  color: var(--success-500, #18A73D);
}
.AdCampaignListComponent .campaign-status.red {
  background: var(--error-200, #FECED0);
  color: var(--error-500, #D52D37);
}
.AdCampaignListComponent .campaign-status.gray {
  background: var(--gray-400, #E6E6E9);
  color: var(--gray-600, #7A7A81);
}
.AdCampaignListComponent .campaign-status.blue {
  background: var(--brand-200, #DAEBFF);
  color: var(--brand-500, #0169D9);
}
.AdCampaignListComponent .campaign-status.orange {
  background: var(--info-200, #FFECC0);
  color: var(--delivery-400, #FF6A00);
}
.AdCampaignListComponent .campaign-status.purple {
  background: var(--indigo-300, #F0ECFF);
  color: var(--indigo-100, #9674FF);
}
.AdCampaignListComponent .campaign-menu-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-self: end;
  justify-content: flex-end;
  align-items: flex-start;
  width: 32px;
  min-width: 32px;
  height: 32px;
  cursor: default;
}
.AdCampaignListComponent .campaign-menu-wrap .InlineOptionsMenuComponent .options-container.open {
  right: 0;
  left: unset;
}
.AdCampaignListComponent .campaign-menu-wrap .InlineOptionsMenuComponent > svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--radius-xs);
}
.AdCampaignListComponent .campaign-menu-wrap .InlineOptionsMenuComponent:has(.options-container.open) > svg {
  background: var(--gray-300);
}
.AdCampaignListComponent .campaign-card.menu-hovered .campaign-menu-wrap .InlineOptionsMenuComponent > svg {
  background: var(--gray-300);
}
.AdCampaignListComponent .campaign-meta {
  display: grid;
  /* 1st and 4th columns wider, 2nd and 3rd narrower */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--spacing-alt-sm);
  margin-top: var(--spacing-sm);
}
.AdCampaignListComponent .campaign-meta-item .lbl {
  color: var(--gray-600, #7A7A81);
  font-size: var(--font-size-xxs, 12px);
  font-style: normal;
  font-weight: var(--font-weight-highlight, 500);
  line-height: var(--line-height-xxs, 16px);
  letter-spacing: -0.24px;
  margin-bottom: var(--spacing-xxs);
}
.AdCampaignListComponent .campaign-meta-item .val {
  color: var(--text-100, #131315);
  font-size: var(--font-size-sm, 14px);
  font-style: normal;
  font-weight: var(--font-weight-highlight, 500);
  line-height: var(--line-height-xs, 20px);
  letter-spacing: -0.28px;
}
.AdCampaignListComponent .campaign-bottom {
  display: none;
}
@media (max-width: 900px) {
  .AdCampaignListComponent .campaign-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .AdCampaignListComponent .campaign-list-header {
    display: flex;
    justify-content: flex-start;
    margin: var(--spacing-md);
  }
  .AdCampaignListComponent .campaign-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-md);
  }
  .AdCampaignListComponent .campaign-card {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }
  .AdCampaignListComponent .campaign-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 80px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    padding: var(--spacing-xxs);
  }
  .AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio.thumb-vertical {
    aspect-ratio: 6/7;
  }
  .AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio.thumb-horizontal {
    aspect-ratio: 4/1;
  }
  .AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio.thumb-horizontal-mini {
    aspect-ratio: 7/1;
  }
  .AdCampaignListComponent .campaign-thumb .campaign-thumb-ratio img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .AdCampaignListComponent .campaign-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .AdCampaignListComponent .campaign-meta {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .AdCampaignListComponent .campaign-top {
    align-items: flex-start;
  }
  .AdCampaignListComponent .campaign-menu-wrap .InlineOptionsMenuComponent > .options-container.open {
    width: 95%;
    max-width: 95vw;
    left: auto;
    right: 2.5%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .AdCampaignListComponent .campaign-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-alt-xs);
    flex: 1;
    min-width: 0;
  }
  .AdCampaignListComponent .campaign-title {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
  }
  .AdCampaignListComponent .campaign-status {
    padding: 3px var(--spacing-sm);
    font-size: 11px;
  }
  .AdCampaignListComponent .campaign-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-alt-xs);
    margin-top: var(--spacing-md);
    grid-template-columns: unset;
  }
  .AdCampaignListComponent .campaign-meta-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-sm);
    align-items: baseline;
  }
  .AdCampaignListComponent .campaign-meta-item .lbl {
    margin-bottom: 0;
    font-size: 11px;
    color: var(--gray-600, #7A7A81);
  }
  .AdCampaignListComponent .campaign-meta-item .val {
    font-size: 13px;
    text-align: right;
  }
  .AdCampaignListComponent .campaign-bottom {
    grid-column: 1/-1;
    grid-row: 3;
    display: none;
  }
}

.AdCampaignOverviewComponent {
  width: 100%;
}
.AdCampaignOverviewComponent .dt-section {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-md);
}
.AdCampaignOverviewComponent .dt-section .dt-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.AdCampaignOverviewComponent .dt-section .dt-row .TextComponent,
.AdCampaignOverviewComponent .dt-section .dt-row .HeadingComponent {
  overflow-wrap: anywhere;
}
@media screen and (max-width: 425px) {
  .AdCampaignOverviewComponent .dt-section {
    gap: var(--spacing-sm);
  }
  .AdCampaignOverviewComponent .dt-section .dt-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
}

.AdCampaignPauseModal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  padding-bottom: var(--spacing-sm);
}
.AdCampaignPauseModal .pause-cmp-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.AdCampaignPauseModal form {
  width: 100%;
}
.AdCampaignPauseModal .needs-login-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.AdCampaignPauseModal .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;
}
.AdCampaignPauseModal .needs-login-wrapper .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;
}
.AdCampaignPauseModal .needs-login-wrapper .login-btn:hover {
  background-color: var(--brand-300);
}
.AdCampaignPauseModal .cmpt-form {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.AdCampaignPauseModal .cmpt-form input {
  width: 50%;
  height: 56px;
  padding: var(--spacing-lg);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
  letter-spacing: -0.3px;
  border-radius: var(--radius-md);
  transition: background-color 0.3s ease-out;
}
.AdCampaignPauseModal .cmpt-form input[type=submit] {
  color: var(--gray-100);
  background-color: var(--error-400);
}
.AdCampaignPauseModal .cmpt-form input[type=submit]:hover {
  background-color: var(--error-300);
}
.AdCampaignPauseModal .cmpt-form input[type=button] {
  color: var(--gray-900);
  background-color: var(--gray-300);
}

.ui-dialog:has(.AdCampaignPauseModal) .ui-dialog-titlebar {
  height: 0;
  z-index: 105;
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}

.acp-form {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
  padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
}
.acp-form .bill-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}
.acp-form .hdr-section {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-md);
}
.acp-form .hdr-section h3:focus-visible {
  outline: none;
}
.ui-dialog:has(.acp-form) .ui-dialog-titlebar {
  height: 0;
  padding: var(--spacing-4xl) var(--spacing-none) var(--spacing-none) var(--spacing-none);
}
.acp-form #submit_dlg_button.campaign-payment-form {
  display: none;
  width: 100%;
  cursor: pointer;
  height: 48px;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  background-color: var(--brand-400);
  transition: background-color 0.3s ease-out;
  color: var(--gray-100);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 500;
  letter-spacing: -0.28px;
}
.acp-form #submit_dlg_button.campaign-payment-form:hover {
  background-color: var(--brand-300);
}
@media screen and (max-width: 1024px) {
  .acp-form #submit_dlg_button.campaign-payment-form {
    min-width: 100%;
    max-width: 100%;
  }
}
.acp-form .bill-section + #submit_dlg_button {
  display: block;
}
.acp-form .AddFundsComponent {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .acp-form {
    margin-top: var(--spacing-lg);
  }
}

.AdCampaignPlacementCardComponent {
  display: flex;
  padding: var(--spacing-xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  flex: 1;
  border: 2px solid var(--gray-300);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--gray-300);
  position: relative;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent:hover {
  border-color: var(--brand-400);
}
.AdCampaignPlacementCardComponent.selected {
  border-color: var(--brand-400);
  background: var(--brand-100);
}
.AdCampaignPlacementCardComponent.placement-type-search:hover {
  border-color: var(--accent-tropicalIndigo);
}
.AdCampaignPlacementCardComponent.placement-type-search.selected {
  border-color: var(--accent-tropicalIndigo);
  background: rgba(139, 92, 246, 0.05);
}
.AdCampaignPlacementCardComponent.placement-type-adpages:hover {
  border-color: var(--accent-malachite);
}
.AdCampaignPlacementCardComponent.placement-type-adpages.selected {
  border-color: var(--accent-malachite);
  background: rgba(16, 185, 129, 0.05);
}
.AdCampaignPlacementCardComponent .placement-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
}
.AdCampaignPlacementCardComponent .placement-text-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  height: 160px;
  box-sizing: border-box;
}
html[lang=en] .AdCampaignPlacementCardComponent .placement-text-container {
  height: 120px;
}
html[lang=ru] .AdCampaignPlacementCardComponent .placement-text-container, html[lang=hy] .AdCampaignPlacementCardComponent .placement-text-container {
  height: 160px;
}
@media (max-width: 1024px) {
  .AdCampaignPlacementCardComponent .placement-text-container {
    height: fit-content !important;
  }
  html[lang=ru] .AdCampaignPlacementCardComponent .placement-text-container, html[lang=hy] .AdCampaignPlacementCardComponent .placement-text-container {
    height: fit-content !important;
  }
}
.AdCampaignPlacementCardComponent .placement-benefit {
  display: flex;
  padding: var(--spacing-xs) var(--spacing-sm);
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  width: fit-content;
  color: var(--text-inverse, #FFF);
  font-size: var(--font-size-tiny);
  font-style: normal;
  font-weight: var(--font-weight-highlight, 500);
  line-height: var(--line-height-xxs);
  letter-spacing: -0.24px;
  white-space: nowrap;
}
.AdCampaignPlacementCardComponent .placement-benefit .TextComponent {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .AdCampaignPlacementCardComponent .placement-benefit .TextComponent {
    white-space: normal;
  }
}
.AdCampaignPlacementCardComponent .placement-benefit__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xs);
}
.AdCampaignPlacementCardComponent .placement-benefit.brand {
  background: var(--brand-400);
}
.AdCampaignPlacementCardComponent .placement-benefit.reach {
  background: var(--accent-tropicalIndigo);
}
.AdCampaignPlacementCardComponent .placement-benefit.buyers {
  background: var(--accent-malachite);
}
.AdCampaignPlacementCardComponent .placement-title {
  color: var(--text-200, #3D3D46);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: var(--font-weight-display, 700);
  line-height: var(--line-height-xl);
  margin: 0;
}
.AdCampaignPlacementCardComponent .placement-description {
  color: var(--text-200, #3D3D46);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-highlight, 500);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  margin: 0;
}
.AdCampaignPlacementCardComponent .placement-wireframe {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-4xl);
  background: white;
  border-radius: 8px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  height: 200px;
  border: 1px solid #e6e6e9;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minw70 {
  width: 70% !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minw60 {
  width: 60% !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minw50 {
  width: 50% !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minw40 {
  width: 40% !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minw80 {
  width: 80% !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minh6 {
  height: 6px !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minh5 {
  height: 5px !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minh10 {
  height: 10px !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minh4 {
  height: 4px !important;
}
.AdCampaignPlacementCardComponent .wireframe-ad-text.minh8 {
  height: 8px !important;
}
.AdCampaignPlacementCardComponent .wireframe-container {
  width: 100%;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-ad-text {
  width: 100%;
  height: 10px;
  background: var(--gray-300);
  border-radius: 4px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-main-container {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-left-side {
  flex: 1 1 75%;
  min-width: 0;
  max-width: 75%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-right-side {
  flex: 1 1 30%;
  min-width: 0;
  max-width: 30%;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-grid {
  display: grid;
  gap: var(--spacing-alt-xs);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-grid.wireframe-grid-top {
  grid-template-columns: repeat(6, 1fr);
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-grid.wireframe-grid-top .wireframe-block {
  height: 21.5px;
  background: var(--gray-300);
  border-radius: 1.5px;
  min-width: 0;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-grid.wireframe-grid-bottom {
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--spacing-md);
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-grid.wireframe-grid-bottom .wireframe-block-wide {
  height: 43px;
  background: var(--gray-300);
  border-radius: 1.5px;
  min-width: 0;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-circles {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--spacing-xs);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-circles .wireframe-circle {
  width: 100%;
  aspect-ratio: 1;
  max-width: 20px;
  border-radius: 50%;
  background: var(--gray-300);
  min-width: 0;
}
.AdCampaignPlacementCardComponent .wireframe-homepage .wireframe-rectangle {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 60px;
  background: #DFEEFF;
  border-radius: 1.5322px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-ad-text {
  width: 100%;
  height: 10px;
  background: var(--gray-300);
  border-radius: 4px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-main-container {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-left-side {
  flex: 1 1 33.333%;
  min-width: 0;
  max-width: 33.333%;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-right-side {
  flex: 1 1 66.666%;
  min-width: 0;
  max-width: 66.666%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-sidebar {
  width: 100%;
  min-height: 120px;
  background: var(--gray-300);
  border-radius: 4px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-grid.wireframe-grid-bottom {
  grid-template-columns: repeat(3, 1fr);
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-grid.wireframe-grid-bottom .wireframe-block-wide {
  height: 43px;
  background: var(--gray-300);
  border-radius: 1.5px;
  min-width: 0;
}
.AdCampaignPlacementCardComponent .wireframe-search .wireframe-banner {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  background: #f0ecff;
  border-radius: 1.5322px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-ad-text {
  width: 100%;
  height: 10px;
  background: var(--gray-300);
  border-radius: 4px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-main-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-left-side {
  flex: 1 1 70%;
  min-width: 0;
  max-width: 70%;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-right-side {
  flex: 1 1 30%;
  min-width: 0;
  max-width: 30%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-ad-main-block {
  display: inline-flex;
  height: 96.635px;
  align-items: flex-start;
  gap: 3.475px;
  border-radius: 2.147px;
  background: var(--gray-300);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-right-top {
  display: inline-flex;
  flex-direction: column;
  height: 72.297px;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 3.477px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-right-item {
  width: 100%;
  height: 200px;
  background: var(--gray-300);
  border-radius: 2px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-right-bottom {
  display: flex;
  flex-direction: column;
  gap: 3.477px;
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-ad-text.minh20.campaign-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-malachite-light, #d3fae4);
  aspect-ratio: 7/1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--success-400);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-tiny);
  letter-spacing: -0.18px;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-ad-text.minh20.campaign-preview.has-image {
  color: transparent;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-right-bottom-item {
  width: 100%;
  height: 14.316px;
  background: var(--gray-300);
  border-radius: 2px;
  box-sizing: border-box;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-right-bottom-item.wireframe-right-bottom-item-highlighted {
  background: #d3fae4;
}
.AdCampaignPlacementCardComponent .wireframe-adpages .wireframe-banner {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 60px;
  background: var(--accent-malachite);
  border-radius: 1.5322px;
  box-sizing: border-box;
}

.AdCampaignPlacementPreviewComponent {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-4xl);
  background: white;
  border-radius: var(--radius-sm);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  height: 200px;
  border: 1px solid var(--gray-400);
}
.TabSwitcherComponent .AdCampaignPlacementPreviewComponent {
  margin-top: var(--spacing-none);
}
.AdCampaignPlacementPreviewComponent .wireframe-container {
  width: 100%;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minw70 {
  width: 70% !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minw60 {
  width: 60% !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minw50 {
  width: 50% !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minw40 {
  width: 40% !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minw80 {
  width: 80% !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minw90 {
  width: 90% !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minh6 {
  height: 6px !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minh5 {
  height: 5px !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minh10 {
  height: 10px !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minh4 {
  height: 4px !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minh8 {
  height: 8px !important;
}
.AdCampaignPlacementPreviewComponent .wireframe-container .wireframe-ad-text.minh20 {
  height: 20px !important;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-ad-text {
  width: 100%;
  height: 10px;
  background: var(--gray-300);
  border-radius: 4px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-main-container {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-left-side {
  flex: 1 1 75%;
  min-width: 0;
  max-width: 75%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-right-side {
  flex: 1 1 30%;
  min-width: 0;
  max-width: 30%;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-right-side .campaign-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 6/7;
  background-color: var(--brand-200);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--brand-300);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-tiny);
  letter-spacing: -0.18px;
  text-align: center;
  padding: 0px 5px;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-right-side .campaign-preview.has-image {
  color: transparent;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-grid {
  display: grid;
  gap: var(--spacing-alt-xs);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-grid.wireframe-grid-top {
  grid-template-columns: repeat(6, 1fr);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-grid.wireframe-grid-top .wireframe-block {
  height: 21.5px;
  background: var(--gray-300);
  border-radius: 1.5px;
  min-width: 0;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-grid.wireframe-grid-bottom {
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--spacing-md);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-grid.wireframe-grid-bottom .wireframe-block-wide {
  height: 43px;
  background: var(--gray-300);
  border-radius: 1.5px;
  min-width: 0;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-circles {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-xs);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-circles .wireframe-circle {
  width: 100%;
  aspect-ratio: 1;
  max-width: 25px;
  border-radius: 50%;
  background: var(--gray-300);
  min-width: 0;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage:has(.wireframe-mobile) {
  width: 140px;
  height: 260px;
  padding: var(--spacing-sm);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-ad-text {
  margin-bottom: var(--spacing-sm);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-main-container {
  flex-direction: column;
  gap: var(--spacing-md);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-bottom-search {
  width: 75%;
  height: 16px;
  background-color: var(--gray-300);
  border-radius: var(--radius-xs);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-grid.wireframe-grid-bottom {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--spacing-sm);
  gap: var(--spacing-alt-xs);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-grid.wireframe-grid-top {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-xs);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-grid.wireframe-grid-top div {
  width: 22px;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-left-side {
  max-width: 100%;
  flex: unset;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-right-side {
  max-width: 100%;
  flex: unset;
  gap: var(--spacing-alt-xs);
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-right-side .campaign-preview {
  width: 50%;
  padding: var(--spacing-xs);
  text-align: center;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-right-side .campaign-preview.has-image {
  color: transparent;
}
.AdCampaignPlacementPreviewComponent.wireframe-homepage .wireframe-mobile .wireframe-right-side .campaign-preview-mobile {
  width: 100%;
  aspect-ratio: 3/1;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-ad-text {
  width: 100%;
  height: 10px;
  background: var(--gray-300);
  border-radius: var(--radius-xs);
  margin-bottom: var(--spacing-alt-xs);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-main-container {
  display: flex;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-left-side {
  flex: 1 1 33.333%;
  min-width: 0;
  max-width: 33.333%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-right-side {
  flex: 1 1 66.666%;
  min-width: 0;
  max-width: 66.666%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-sidebar {
  width: 100%;
  min-height: 120px;
  background: var(--gray-300);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-grid {
  display: grid;
  gap: var(--spacing-alt-xs);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-grid.wireframe-grid-bottom {
  grid-template-columns: repeat(3, 1fr);
}
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-grid.wireframe-grid-bottom .wireframe-block-wide {
  height: 43px;
  background: var(--gray-300);
  border-radius: var(--radius-xs);
  min-width: 0;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .campaign-preview,
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
  /* Search results banner ratio 4:1 */
  aspect-ratio: 4/1;
  background-color: var(--accent-tropicalIndigo-light);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--accent-tropicalIndigo);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-tiny);
  letter-spacing: -0.18px;
}
.AdCampaignPlacementPreviewComponent.wireframe-search .campaign-preview.has-image,
.AdCampaignPlacementPreviewComponent.wireframe-search .wireframe-banner.has-image {
  color: transparent;
}
.AdCampaignPlacementPreviewComponent.wireframe-search:has(.wireframe-mobile) {
  width: 140px;
  height: 260px;
  padding: var(--spacing-sm);
}
.AdCampaignPlacementPreviewComponent.wireframe-search:has(.wireframe-mobile) .wf-m-filters {
  grid-template-columns: repeat(5, 1fr);
  display: grid;
  grid-column-gap: var(--spacing-xs);
  background: none;
}
.AdCampaignPlacementPreviewComponent.wireframe-search:has(.wireframe-mobile) .wf-m-filters .wf-m-filter {
  border-radius: var(--radius-xs);
  background-color: var(--gray-300);
}
.AdCampaignPlacementPreviewComponent.wireframe-search:has(.wireframe-mobile) .wf-m-card.wf-m-result {
  height: 50px;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-ad-text {
  width: 100%;
  height: 10px;
  background: var(--gray-300);
  border-radius: var(--radius-xs);
  margin-bottom: var(--spacing-alt-xs);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-main-container {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-left-side {
  flex: 1 1 70%;
  min-width: 0;
  max-width: 70%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-right-side {
  flex: 1 1 30%;
  min-width: 0;
  max-width: 30%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-ad-main-block {
  display: inline-flex;
  height: 96.635px;
  align-items: flex-start;
  gap: var(--spacing-xs);
  border-radius: var(--radius-xs);
  background: var(--gray-300);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-right-top {
  display: inline-flex;
  flex-direction: column;
  height: 72.297px;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacing-xs);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-right-item {
  width: 100%;
  height: 200px;
  background: var(--gray-300);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-right-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-ad-text.campaign-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  flex-shrink: 0;
  background-color: var(--accent-malachite-light);
  /* Ad Pages campaign preview should be 7:1 */
  aspect-ratio: 7/1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--success-400);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-tiny);
  letter-spacing: -0.18px;
}
@media screen and (max-width: 1270px) {
  .AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-ad-text.campaign-preview {
    min-height: 25px;
  }
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-ad-text.campaign-preview.has-image {
  color: transparent;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages .wireframe-right-bottom-item {
  width: 100%;
  height: 14.316px;
  background: var(--gray-300);
  border-radius: var(--radius-xs);
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) {
  width: 140px;
  height: 260px;
  padding: var(--spacing-sm);
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wireframe-mobile-container {
  gap: var(--spacing-alt-xs);
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-media {
  height: 84px;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-block.wf-m-title {
  height: 24px;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-block.wf-m-meta {
  height: 12px;
  width: 90%;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-block.wf-m-meta-2 {
  height: 8px;
  width: 70%;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-descs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: var(--spacing-sm);
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-block.wf-m-desc {
  height: 5px;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-block.wf-m-desc:nth-child(odd) {
  width: 100%;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-block.wf-m-desc:nth-child(even) {
  width: 80%;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wf-m-block.wf-m-desc:nth-child(3n) {
  width: 68%;
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wireframe-ad-text.campaign-preview {
  height: 18px;
}
@media screen and (max-width: 1270px) {
  .AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wireframe-ad-text.campaign-preview {
    min-height: 25px;
  }
}
.AdCampaignPlacementPreviewComponent.wireframe-adpages:has(.wireframe-mobile) .wireframe-ad-text.campaign-preview {
  min-height: 17px;
  background-size: contain;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wireframe-mobile-frame {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wireframe-mobile-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-header,
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-searchbar,
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-filters,
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-block,
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-card,
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-media {
  background: var(--gray-300);
  border-radius: var(--radius-xs);
  width: 100%;
  box-sizing: border-box;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-header {
  height: 16px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-searchbar {
  height: 18px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-filters {
  height: 16px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-media {
  height: 24px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-row {
  display: flex;
  gap: var(--spacing-xs);
  width: 100%;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-card.wf-m-card-sm {
  height: 28px;
  flex: 1 1 25%;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-card.wf-m-card-lg {
  height: 40px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-card.wf-m-result {
  height: 36px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-card.wf-m-related {
  height: 30px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-block.wf-m-title {
  height: 14px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-block.wf-m-meta {
  height: 12px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .wf-m-block.wf-m-desc {
  height: 10px;
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .campaign-preview.wf-m-banner {
  border-radius: var(--radius-xs);
}
.AdCampaignPlacementPreviewComponent .wireframe-mobile .campaign-preview.wf-m-inline-banner {
  height: 100%;
  border-radius: var(--radius-xs);
}
@media (max-width: 1024px) {
  .AdCampaignPlacementPreviewComponent {
    display: none;
  }
}

#campaign-settings-form {
  --campaign-choice-control-width: 400px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
  gap: var(--spacing-6xl);
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-lg);
}
#campaign-settings-form .budget-error {
  max-width: 320px;
  margin-top: -2px;
  color: var(--error-400) !important;
}
#campaign-settings-form .budget-error .LinkComponent {
  color: var(--error-400) !important;
  text-decoration: underline;
}
#campaign-settings-form .budget-error .LinkComponent:focus, #campaign-settings-form .budget-error .LinkComponent:focus-visible {
  color: var(--error-400) !important;
  border-bottom: none;
}
#campaign-settings-form .step-widget-wrapper {
  margin-bottom: var(--spacing-2xl);
  gap: var(--spacing-4xl);
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .step-widget-wrapper {
    padding: var(--spacing-none) var(--spacing-md);
  }
}
#campaign-settings-form .form-wrapper {
  display: flex;
  gap: var(--spacing-6xl);
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .form-wrapper {
    flex-direction: column;
    gap: var(--spacing-4xl);
  }
}
#campaign-settings-form .form-left {
  flex: 1;
  min-width: 0;
}
#campaign-settings-form .form-left .frow {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .form-left {
    width: 100%;
  }
}
#campaign-settings-form .form-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}
#campaign-settings-form .form-content .frow {
  padding: var(--spacing-none);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .form-content .frow {
    margin: var(--spacing-none);
  }
}
#campaign-settings-form .form-content .fsec {
  padding: var(--spacing-none);
  margin-bottom: var(--spacing-none);
}
#campaign-settings-form .form-content .fsec .t {
  padding-bottom: var(--spacing-xl);
}
#campaign-settings-form .campaign-budget-duration-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
#campaign-settings-form .campaign-budget-duration-section > .t {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-none) !important;
  margin-bottom: var(--spacing-none) !important;
  background: var(--gray-100);
}
#campaign-settings-form .campaign-budget-duration-section > .t .HeadingComponent {
  color: var(--gray-900);
  line-height: var(--line-height-md);
  letter-spacing: 0;
  white-space: nowrap;
}
#campaign-settings-form .campaign-budget-duration-section #budget-row,
#campaign-settings-form .campaign-budget-duration-section #duration-row {
  margin-bottom: var(--spacing-none);
}
#campaign-settings-form .campaign-budget-duration-section #budget-row .e.addr,
#campaign-settings-form .campaign-budget-duration-section #duration-row .e.addr {
  gap: var(--spacing-sm);
}
#campaign-settings-form .campaign-budget-duration-section #budget-row .TextComponent,
#campaign-settings-form .campaign-budget-duration-section #duration-row .TextComponent {
  color: var(--gray-800);
  line-height: var(--line-height-sm);
  letter-spacing: 0;
}
#campaign-settings-form .campaign-budget-duration-section #budget-row {
  margin-bottom: var(--spacing-md);
}
#campaign-settings-form .fsec.new .frow .e.addr {
  gap: var(--spacing-sm);
  align-self: stretch;
  margin-left: 0;
}
#campaign-settings-form .fsec.new .frow .e.addr input[type=number],
#campaign-settings-form .fsec.new .frow .e.addr input[type=text] {
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
}
#campaign-settings-form .fsec.new .frow .e.addr .DropdownComponent {
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .fsec.new .frow .e.addr {
    padding-top: 10px;
    max-width: 100%;
  }
  #campaign-settings-form .fsec.new .frow .e.addr input[type=number],
  #campaign-settings-form .fsec.new .frow .e.addr input[type=text] {
    width: 100%;
    max-width: 100%;
  }
  #campaign-settings-form .fsec.new .frow .e.addr .DropdownComponent {
    width: 100%;
    max-width: 100%;
  }
}
#campaign-settings-form .fsec.new .frow .e.addr .err {
  margin-top: var(--spacing-xxs);
}
#campaign-settings-form .campaign-internal-destination-block {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-lg);
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: 500;
}
#campaign-settings-form .campaign-internal-destination-block .campaign-internal-destination-block__message {
  margin-top: var(--spacing-alt-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--spacing-sm);
  background-color: var(--brand-100);
  color: var(--gray-800);
  opacity: 1;
}
#campaign-settings-form .campaign-internal-destination-block a {
  color: var(--brand-400);
  text-decoration: underline;
}
#campaign-settings-form .inforadio .disabled {
  opacity: 1;
}
#campaign-settings-form .row.disabled {
  cursor: default;
}
#campaign-settings-form .row.disabled input {
  cursor: default;
}
#campaign-settings-form .row.disabled .r1,
#campaign-settings-form .row.disabled .r2.disabled .campaign-internal-destination-block .campaign-internal-destination-block__desc {
  cursor: default;
  opacity: 0.7;
  color: var(--gray-500);
}
#campaign-settings-form #duration-row {
  display: block;
}
#campaign-settings-form .campaign-choice-control {
  display: flex;
  width: var(--campaign-choice-control-width);
  max-width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md);
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .campaign-choice-control {
    width: 100%;
    max-width: 100%;
  }
}
#campaign-settings-form .campaign-duration-control {
  width: var(--campaign-choice-control-width);
  max-width: 100%;
}
@media screen and (max-width: 480px) {
  #campaign-settings-form .campaign-duration-control {
    width: 100%;
  }
}
#campaign-settings-form .campaign-hidden-control {
  height: 0;
  overflow: visible;
}
#campaign-settings-form .campaign-hidden-control input[type=hidden] {
  display: none;
}
#campaign-settings-form .campaign-hidden-control .err {
  margin-top: var(--spacing-xxs);
  color: var(--error-400);
}
#campaign-settings-form .campaign-slider-surface {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-xs);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
  border-radius: var(--radius-md);
  background: var(--gray-300);
  box-sizing: border-box;
}
#campaign-settings-form .campaign-slider-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--line-height-sm);
}
#campaign-settings-form .campaign-slider-value {
  width: 100%;
  min-width: 0;
  padding: var(--spacing-none);
  border: none;
  background: transparent;
  color: var(--gray-900);
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-height-sm);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  appearance: none;
}
#campaign-settings-form .campaign-slider-value:focus, #campaign-settings-form .campaign-slider-value:focus-visible {
  outline: none;
}
#campaign-settings-form .campaign-slider-input {
  width: 100%;
  height: 10px;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  border: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
#campaign-settings-form .campaign-slider-input:focus-visible {
  outline: none;
}
#campaign-settings-form .campaign-slider-input::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: var(--radius-6xl);
  background: linear-gradient(to right, var(--gray-900) 0 var(--slider-progress), var(--gray-400) var(--slider-progress) 100%);
}
#campaign-settings-form .campaign-slider-input::-moz-range-track {
  height: 2px;
  border-radius: var(--radius-6xl);
  background: linear-gradient(to right, var(--gray-900) 0 var(--slider-progress), var(--gray-400) var(--slider-progress) 100%);
}
#campaign-settings-form .campaign-slider-input::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: none;
  border-radius: 50%;
  background-color: var(--gray-900);
  appearance: none;
  -webkit-appearance: none;
}
#campaign-settings-form .campaign-slider-input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: var(--gray-900);
}
#campaign-settings-form .campaign-preset-chips {
  width: 100%;
}
#campaign-settings-form .campaign-preset-chips .SingleSelectBubbleV2Component,
#campaign-settings-form .campaign-preset-chips .SingleSelectBubbleV2Component .options-container {
  width: 100%;
}
#campaign-settings-form .campaign-duration-presets {
  width: 100%;
  max-width: 100%;
}
#campaign-settings-form .campaign-duration-presets .SingleSelectBubbleV2Component .options-container {
  flex-wrap: nowrap;
}
#campaign-settings-form .campaign-duration-presets .SingleSelectBubbleV2Component .option-container {
  flex: 0 0 auto;
}
@media screen and (max-width: 480px) {
  #campaign-settings-form .campaign-duration-presets {
    width: 100%;
  }
  #campaign-settings-form .campaign-duration-presets .SingleSelectBubbleV2Component .options-container {
    flex-wrap: wrap;
  }
}
#campaign-settings-form .campaign-duration-presets.felement_err {
  padding: var(--spacing-xs);
  border: 1px solid var(--error-400);
  border-radius: var(--radius-md);
}
#campaign-settings-form .duration-error {
  color: var(--error-400);
}
#campaign-settings-form .forecast-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#campaign-settings-form .frow.flex-between.fapart {
  gap: var(--spacing-md);
}
#campaign-settings-form .frow.flex-between.fapart > div {
  flex: 1;
  min-width: 0;
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .frow.flex-between.fapart > div {
    flex: 1 1 100%;
  }
}
#campaign-settings-form .frow.flex-between.fapart > div:first-child .e.addr {
  gap: var(--spacing-alt-sm);
  align-self: stretch;
  margin-left: 0;
}
#campaign-settings-form .frow.flex-between.fapart > div:last-child .e.addr {
  justify-content: space-between;
  align-self: stretch;
  margin-left: 0;
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .frow.flex-between.fapart {
    flex-direction: column;
  }
}
#campaign-settings-form #destination-url-section {
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-4xl);
  display: none;
  padding-bottom: var(--spacing-none);
}
#campaign-settings-form #destination-url-section .e {
  margin-left: var(--spacing-none);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#campaign-settings-form #destination-url-section .e input {
  width: 100%;
  box-sizing: border-box;
}
#campaign-settings-form #destination-url-section .e .destination-url-help-link {
  margin-top: var(--spacing-sm);
}
#campaign-settings-form #destination-url-section .e .err.url-error {
  position: static;
  margin-top: var(--spacing-xxs);
}
#campaign-settings-form .fbtn {
  width: 100%;
  position: absolute;
  bottom: 40px;
  display: flex;
  margin: var(--spacing-none);
  justify-content: flex-start;
  align-items: center;
  padding: var(--spacing-none);
  border: none;
}
#campaign-settings-form .fbtn input[type=button],
#campaign-settings-form .fbtn input[type=submit] {
  padding: var(--spacing-md) var(--spacing-2xl);
  min-height: var(--spacing-7xl);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
#campaign-settings-form .fbtn input[type=submit]:disabled,
#campaign-settings-form .fbtn input[type=submit].sub {
  border-radius: var(--radius-md);
  background: var(--gray-400);
  color: var(--gray-500);
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .fbtn {
    background: var(--gray-100);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-none);
    box-sizing: border-box;
    gap: var(--spacing-sm);
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    bottom: 16px;
  }
  #campaign-settings-form .fbtn #campaign-settings-next-btn-wrap {
    width: 100%;
  }
  #campaign-settings-form .fbtn button, #campaign-settings-form .fbtn input[type=submit], #campaign-settings-form .fbtn input[type=button] {
    width: 100%;
    margin: var(--spacing-none);
  }
}
#campaign-settings-form .fbtn input[type=submit].secondary {
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-md);
  background-color: var(--brand-200);
  color: var(--brand-400);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.28px;
  cursor: pointer;
}
#campaign-settings-form .fbtn input[type=submit].secondary:hover {
  background-color: var(--brand-200);
}
#campaign-settings-form .fbtn input[type=button].btncancel {
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
  padding: var(--spacing-md) var(--spacing-2xl);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.28px;
  cursor: pointer;
}
#campaign-settings-form .fbtn input[type=button].btncancel:hover {
  background: var(--gray-400);
}
#campaign-settings-form .fbtn input[type=button].btncancel:focus {
  outline: none;
}
#campaign-settings-form .form-right {
  margin-top: 111px;
}
@media screen and (max-width: 1024px) {
  #campaign-settings-form .form-right {
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-none);
  }
}
@media screen and (min-width: 1025px) {
  #campaign-settings-form .form-right .form-right {
    margin-top: 110px;
  }
}
#campaign-settings-form .inforadio .r1,
#campaign-settings-form .inforadio .r2 {
  padding-left: 40px;
}
#campaign-settings-form .inforadio .r1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  padding-left: var(--spacing-md);
  font-weight: 500;
  line-height: var(--line-height-md);
}
#campaign-settings-form .inforadio .r1 .radio-badge {
  padding: var(--spacing-xxs) var(--spacing-alt-xs);
  border-radius: var(--radius-xl);
  background: var(--accent-tropicalIndigo);
  color: var(--gray-100);
  font-size: var(--font-size-tiny);
  line-height: var(--line-height-alt-xs);
  font-weight: 600;
  white-space: nowrap;
}
#campaign-settings-form .inforadio .r2 {
  margin-top: var(--spacing-none);
  padding-left: var(--spacing-4xl);
  color: var(--gray-600);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: 500;
}
#campaign-settings-form .inforadio .row {
  padding-top: var(--spacing-none);
}
#campaign-settings-form .inforadio .row input {
  position: relative;
  top: 2px;
  margin-right: var(--spacing-none);
}
#campaign-settings-form .inforadio .row:not(:last-of-type) {
  padding-bottom: var(--spacing-lg);
}

body:has(#campaign-settings-form) .tipsy-inner {
  max-width: 300px;
  width: auto;
}

@media screen and (max-width: 1024px) {
  .form-content {
    margin: var(--spacing-none) var(--spacing-md);
    gap: var(--spacing-4xl);
  }
  #campaign-settings-next-btn-wrap {
    width: 100%;
  }
  #campaign-settings-form .form-right {
    align-self: stretch;
    width: auto;
    margin: var(--spacing-none) var(--spacing-md) var(--spacing-12xl) var(--spacing-md);
  }
  .step-widget-wrapper .step-title {
    padding: var(--spacing-none) !important;
  }
  .fsec:not(.post-ad-form .fsec) > .t {
    margin: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none) !important;
    padding: var(--spacing-none) !important;
  }
  #campaign-settings-form {
    box-sizing: border-box;
    margin-bottom: var(--spacing-10xl);
    padding-bottom: var(--spacing-none);
  }
}
.AdCampaignSummaryComponent {
  display: flex;
  width: 320px;
  padding: var(--spacing-xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-400);
  background: var(--gray-100);
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  .AdCampaignSummaryComponent {
    width: 95%;
  }
}
.AdCampaignSummaryComponent .summary-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xs);
}
.AdCampaignSummaryComponent .summary-header .title-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.AdCampaignDetailComponent .AdCampaignSummaryComponent .summary-header .title-wrapper {
  gap: var(--spacing-sm);
}
.AdCampaignSummaryComponent .summary-header .info-icon {
  display: none;
}
.AdCampaignSummaryComponent .summary-disclaimer {
  align-self: stretch;
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm); /* 153.846% */
  letter-spacing: -0.26px;
  margin: 0;
}
.AdCampaignSummaryComponent .summary-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: stretch;
  width: 100%;
}
.AdCampaignSummaryComponent .summary-row {
  display: flex;
  padding-bottom: var(--spacing-sm);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs);
  align-self: stretch;
}
.AdCampaignSummaryComponent .summary-row:last-child {
  padding-bottom: 0;
}
.AdCampaignSummaryComponent .summary-row .summary-budget-value,
.AdCampaignSummaryComponent .summary-row .summary-duration-value,
.AdCampaignSummaryComponent .summary-row .summary-cpm-value,
.AdCampaignSummaryComponent .summary-row .summary-impressions-value {
  color: var(--gray-900);
  text-align: right;
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
}
.AdCampaignSummaryComponent .summary-row .summary-placeholder-value {
  color: var(--gray-700);
}
.AdCampaignSummaryComponent .summary-row .summary-cpm-breakdown {
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  letter-spacing: -0.2px;
}
.AdCampaignSummaryComponent .summary-row .summary-cpm-breakdown.hide {
  display: none;
}
.AdCampaignSummaryComponent .summary-row.summary-row-total {
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--gray-400);
  margin-top: var(--spacing-lg);
}
.AdCampaignSummaryComponent .summary-row.summary-row-total .summary-label {
  font-weight: 700;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
}
.AdCampaignSummaryComponent .summary-row.summary-row-total .summary-value .original-price {
  text-decoration: line-through;
  color: var(--gray-700);
  margin-right: var(--spacing-sm);
  font-weight: 500;
}
.AdCampaignSummaryComponent .summary-row.summary-row-total .summary-value .discounted-price {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--brand-400);
}
.AdCampaignSummaryComponent .summary-row .summary-total-value {
  color: var(--gray-900);
  text-align: right;
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-lg); /* 164.706% */
  letter-spacing: -0.34px;
}
.AdCampaignSummaryComponent .summary-row .summary-total-value .original-price {
  color: var(--text-400, #7A7A81);
  text-align: right;
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
  text-decoration-line: line-through;
}
.AdCampaignSummaryComponent .summary-row .summary-total-value .discounted-price {
  color: var(--brand-400);
  text-align: right;
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
}
.AdCampaignSummaryComponent .summary-row .summary-total-value.summary-placeholder-value {
  color: var(--gray-700);
}
.AdCampaignSummaryComponent .summary-row.hide {
  display: none;
}
.AdCampaignSummaryComponent .summary-row:not(.summary-row-total):has(+ .summary-row-total), .AdCampaignSummaryComponent .summary-row.summary-row-total {
  padding-bottom: var(--spacing-none);
}

#buy-bundle-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

#buy-bundle-container .bundle-config-section {
  background: var(--gray-300);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

#buy-bundle-container .bundle-summary-section {
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

#buy-bundle-container .bundle-config-section .frow,
#buy-bundle-container .bundle-summary-section .frow {
  align-items: center;
  display: flex;
  gap: var(--spacing-2xl);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  width: 100%;
}

#buy-bundle-container .bundle-config-section .frow .l {
  flex: 0 0 215px;
  font-size: var(--font-size-md);
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: var(--line-height-sm);
  width: 160px;
}

#buy-bundle-container .bundle-config-section .frow .l .TextComponent.text-primary {
  color: var(--gray-900);
  font-size: var(--font-size-md);
}

#buy-bundle-container .bundle-config-section .frow .e {
  align-items: center;
  display: flex;
  flex: 1;
  gap: var(--spacing-sm);
  min-width: 0;
}

#buy-bundle-container .bundle-summary-section .frow {
  flex-direction: row;
  flex-wrap: nowrap;
  height: var(--line-height-md);
  justify-content: space-between;
}

#buy-bundle-container .bundle-summary-section .frow:first-child {
  border-bottom: 1px solid var(--gray-400);
  padding-bottom: var(--spacing-xl);
}

#buy-bundle-container .bundle-summary-section .l,
#buy-bundle-container .bundle-summary-section .e {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  letter-spacing: -0.3px;
  line-height: var(--line-height-sm);
  margin: var(--spacing-none);
  min-width: 0;
  width: auto;
}

#buy-bundle-container .bundle-summary-section .l {
  flex: 1 1 0;
  font-weight: 500;
}

#buy-bundle-container .bundle-summary-section .e {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  justify-content: flex-end;
  font-weight: 700;
  text-align: right;
}

#buy-bundle-container .bundle-type-label {
  display: block;
  line-height: var(--line-height-sm);
}

#buy-bundle-container .bundle-type-label .TextComponent,
#buy-bundle-container .bundle-type-label label {
  color: var(--gray-900);
  display: inline;
  margin: var(--spacing-none);
}

#buy-bundle-container .bundle-type-label .InlineHintComponent {
  background-size: var(--spacing-md);
  display: inline-block;
  height: var(--spacing-md);
  margin-left: var(--spacing-alt-xs);
  vertical-align: -1px;
  width: var(--spacing-md);
}

#buy-bundle-container .upcoming-republishing-info {
  align-items: center;
  background: var(--brand-200);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  color: var(--brand-500);
  display: flex;
  font-size: var(--font-size-md);
  font-weight: 700;
  gap: var(--spacing-xs);
  line-height: var(--line-height-sm);
  max-width: 100%;
  padding: var(--spacing-alt-xs) var(--spacing-md);
  width: 100%;
}

#buy-bundle-container .upcoming-republishing-icon {
  align-self: flex-start;
  background: currentColor;
  display: inline-block;
  flex: 0 0 var(--spacing-lg);
  height: var(--spacing-lg);
  margin-top: var(--spacing-xxs);
  mask: url("/img/redesign/icons/renew-free.svg") center/contain no-repeat;
  -webkit-mask: url("/img/redesign/icons/renew-free.svg") center/contain no-repeat;
  width: var(--spacing-lg);
}

#buy-bundle-container #upcoming-republishing-text {
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent,
#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me {
  width: 100%;
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me,
#buy-bundle-container .bundle-config-section .DropdownComponent .me {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  height: var(--spacing-6xl);
  min-height: var(--spacing-6xl);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me img {
  position: absolute;
  right: var(--spacing-sm);
  top: var(--spacing-sm);
  margin-right: 0px !important;
  z-index: 1;
  width: 25px;
  transition: all 0.2s;
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me > span {
  position: absolute;
  right: 36px;
  bottom: 4px;
  left: 12px;
  display: none;
  width: auto;
  height: 30px;
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me > span:has(> input) {
  right: 34px;
  padding-left: var(--spacing-xs);
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me span input {
  appearance: none;
  background: transparent;
  color: var(--gray-900);
  height: 30px;
  width: 100%;
  padding: var(--spacing-none);
  border: none;
  outline: 0;
  opacity: 0;
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me span input::placeholder {
  color: var(--gray-600);
  padding: var(--spacing-none);
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent.open .me span input {
  opacity: 1;
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me div.ico {
  background-image: var(--a-icon);
  background-size: var(--spacing-lg) var(--spacing-lg);
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left: 22px;
  padding-right: 0;
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me > div:not(.ico) {
  padding-left: 0px;
}

#buy-bundle-container .bundle-config-section .DropdownComponent,
#buy-bundle-container .bundle-config-section .DropdownComponent .me {
  width: 160px !important;
}

#buy-bundle-container .bundle-config-section .DropdownComponent.open .me.lg input[type=text] {
  height: var(--spacing-8xl);
  opacity: 0;
}

#buy-bundle-container .bundle-config-section .DropdownComponent.open .l.lg:not(.top) {
  top: var(--spacing-6xl);
}

#buy-bundle-container .bundle-config-section .DropdownComponent.open .l.lg.top {
  top: auto;
  bottom: calc(100% + var(--spacing-sm));
}

#buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me div,
#buy-bundle-container .bundle-config-section .DropdownComponent .me div {
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 25px;
}

#buy-bundle-container .bundle-config-section .DropdownComponent .me .ph {
  color: var(--gray-500);
}

#buy-bundle-container .bundle-config-section #idpad,
#buy-bundle-container .bundle-config-section #idprenew,
#buy-bundle-container .bundle-config-section #idrepublish {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  display: inline-block;
  margin-left: var(--spacing-alt-sm);
  margin-bottom: 0;
}

#buy-bundle-container #btninactive {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-none);
}

#buy-bundle-container .btns {
  clear: both;
  margin: 0;
  padding: 0;
  text-align: center;
}

#buy-bundle-container .btns input,
#buy-bundle-container .btns button {
  margin: 0;
}

@media screen and (min-width: 1025px) {
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .l {
    min-width: 100%;
    width: 100% !important;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent.open .me > span {
    z-index: 2;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent.open .me > div {
    visibility: hidden;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent.open .me span input {
    background: transparent;
    caret-color: var(--gray-900);
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent.open .l {
    left: 0;
    right: 0;
    bottom: auto;
    display: block;
    opacity: 1;
    box-shadow: 0 var(--spacing-xs) var(--spacing-lg) 0 rgba(26, 29, 62, 0.1);
    margin-top: var(--spacing-sm);
  }
}
#buy-bundle-container #bundle-low-balance-message {
  color: var(--error-500);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: var(--line-height-xs);
  margin: var(--spacing-none);
}

#buy-bundle-container #btninactive .AddFundsComponent {
  display: block;
}

#buy-bundle-container #btninactive .AddFundsComponent .add-funds-label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
  line-height: var(--line-height-xs);
  padding-bottom: var(--spacing-md);
}

#buy-bundle-container #btninactive .AddFundsComponent .funds .t {
  display: none;
}

#buy-bundle-container #btninactive .AddFundsComponent #payment_form input.payment_value {
  border-radius: var(--radius-alt-sm);
  height: 52px;
  padding: var(--spacing-sm) var(--spacing-lg);
}

#buy-bundle-container #btninactive .AddFundsComponent #payment_form span.crc {
  right: var(--spacing-lg);
  top: var(--spacing-alt-md);
}

#buy-bundle-container #btninactive .AddFundsComponent .funds .rgroup {
  border-radius: var(--radius-alt-sm);
  margin-top: 90px !important;
  padding: var(--spacing-xs);
}

#buy-bundle-container #btninactive .AddFundsComponent:has(.payment-processing-msg[style*="display: block"]) .funds .rgroup,
#buy-bundle-container #btninactive .AddFundsComponent:has(.payment-failed-msg[style*="display: block"]) .funds .rgroup {
  margin-top: 110px !important;
}

#buy-bundle-container #btninactive .AddFundsComponent .funds .rgroup .feradio-container {
  border-radius: var(--radius-sm);
  margin: 0 0 var(--spacing-xs) 0;
  padding: var(--spacing-sm);
}

#buy-bundle-container .AddFundsComponent .funds .rgroup .feradio-container label {
  display: flex;
  cursor: pointer;
  padding-left: var(--spacing-sm);
}

#buy-bundle-container #btninactive .AddFundsComponent .funds .rgroup .feradio-container:last-of-type {
  margin-bottom: 0;
}

#buy-bundle-container #btninactive .AddFundsComponent .show-hide {
  justify-content: center;
  padding: var(--spacing-md) 0;
}

#buy-bundle-container #btninactive .AddFundsComponent .buttons {
  margin-top: var(--spacing-2xl);
}

#buy-bundle-container #btninactive .AddFundsComponent .buttons a,
#buy-bundle-container #btnactive input[type=button],
#buy-bundle-container #btnactive input[type=submit] {
  align-items: center;
  align-self: stretch;
  background: var(--brand-400);
  border-radius: var(--radius-md);
  color: var(--gray-100);
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-md);
  font-weight: 500;
  height: var(--spacing-9xl);
  justify-content: center;
  letter-spacing: -0.3px;
  line-height: var(--line-height-sm);
  padding: var(--spacing-lg) var(--spacing-6xl) var(--spacing-lg) var(--spacing-4xl);
}

#buy-bundle-container #btnactive input[type=button][disabled],
#buy-bundle-container #btnactive input[type=submit][disabled],
#buy-bundle-container #btnactive input[type=button].disabled,
#buy-bundle-container #btnactive input[type=submit].disabled,
#buy-bundle-container #btnactive input[type=button].sub,
#buy-bundle-container #btnactive input[type=submit].sub {
  background: var(--gray-400, #E6E6E9) none;
  color: var(--gray-500, #AFAFB3);
}

#buy-bundle-container #btnactive,
#buy-bundle-container #btninactive .AddFundsComponent .buttons {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

#dialog:has(#buy-bundle-container) > .dlgi {
  color: var(--gray-800, #3D3D46);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: var(--spacing-2xl);
}

@media screen and (max-width: 1024px) {
  .ui-dialog:has(#buy-bundle-container) .ui-dialog-titlebar {
    border: none;
    padding: 0;
  }
  .ui-dialog:has(#buy-bundle-container) .ui-dialog-title {
    color: var(--gray-900);
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--line-height-lg);
  }
  .ui-dialog:has(#buy-bundle-container) .ui-dialog-titlebar-close {
    right: 12px;
    top: 16px;
  }
  #dialog:has(#buy-bundle-container) {
    padding: 0 12px 16px;
  }
  #dialog:has(#buy-bundle-container) > .dlgi {
    margin-bottom: 20px;
  }
  #buy-bundle-container {
    gap: 20px;
  }
  #buy-bundle-container .bundle-config-section,
  #buy-bundle-container .bundle-summary-section {
    border-radius: 12px;
    padding: 16px;
  }
  #buy-bundle-container .bundle-config-section {
    gap: 12px;
  }
  #buy-bundle-container .bundle-summary-section {
    gap: var(--spacing-lg);
  }
  #buy-bundle-container .bundle-config-section .frow {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  #buy-bundle-container .bundle-config-section .frow .l {
    color: var(--gray-900);
    flex: none;
    font-size: var(--font-size-xs);
    letter-spacing: -0.26px;
    line-height: var(--line-height-xs);
    width: 100%;
  }
  #buy-bundle-container .bundle-config-section .frow .e {
    align-items: flex-start;
    gap: 0px;
    width: 100%;
  }
  #buy-bundle-container .bundle-type-label {
    align-items: center;
    display: flex;
    gap: 0px;
  }
  #buy-bundle-container .bundle-type-label .InlineHintComponent {
    background-size: 12px;
    height: 12px;
    margin-left: 0;
    vertical-align: middle;
    width: 12px;
  }
  #buy-bundle-container .upcoming-republishing-info {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-xs);
    padding: var(--spacing-sm) var(--spacing-sm);
  }
  #buy-bundle-container .upcoming-republishing-icon {
    flex-basis: var(--spacing-md);
    height: var(--spacing-md);
    width: var(--spacing-md);
  }
  #buy-bundle-container .bundle-config-section .DropdownComponent,
  #buy-bundle-container .bundle-config-section .DropdownComponent .me {
    width: 100% !important;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me,
  #buy-bundle-container .bundle-config-section .DropdownComponent .me {
    height: 48px;
    min-height: 48px;
    padding: 8px 8px 12px 12px;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me > div:not(.ico) {
    padding-left: 0;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me img {
    right: 8px;
    top: 12px;
    width: 20px;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .l,
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent.open .l {
    box-sizing: border-box;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px);
    width: 100% !important;
    max-height: min(589.422px, var(--window-inner-height) - 40px);
    position: absolute;
    transform: none;
    padding-top: 0px;
  }
  #buy-bundle-container .bundle-config-section .MultiLevelDropdownComponent .me div,
  #buy-bundle-container .bundle-config-section .DropdownComponent .me div {
    font-size: var(--font-size-sm);
    letter-spacing: -0.28px;
  }
  #buy-bundle-container .bundle-config-section #idpad,
  #buy-bundle-container .bundle-config-section #idprenew,
  #buy-bundle-container .bundle-config-section #idrepublish {
    display: block;
    margin-left: 0;
  }
  #buy-bundle-container .bundle-summary-section .frow {
    flex-direction: row;
    height: var(--line-height-md);
  }
  #buy-bundle-container .bundle-summary-section .frow:first-child {
    padding-bottom: var(--spacing-lg);
  }
  #buy-bundle-container .bundle-summary-section .l,
  #buy-bundle-container .bundle-summary-section .e {
    width: auto;
  }
}
.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 .stripe-card-payment {
  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);
  }
}
#main:has(.AgencyBusinessPromptComponent) > .step-widget-wrapper {
  margin-bottom: 0;
}
#main:has(.AgencyBusinessPromptComponent) > .step-widget-wrapper .step-title {
  display: none;
}

.padded:has(.AgencyBusinessPromptComponent) {
  padding-top: var(--spacing-md);
  margin-top: 0;
}

.AgencyBusinessPromptComponent {
  width: 690px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__intro .HeadingComponent {
  margin: 0;
}
.AgencyBusinessPromptComponent .agency-company-prereq__description {
  margin: 0;
  letter-spacing: -0.34px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefits {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  background-color: var(--gray-100);
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit > img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit-label {
  margin: 0;
  letter-spacing: -0.24px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefits {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  background-color: var(--gray-100);
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit > img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit-label {
  margin: 0;
  letter-spacing: -0.24px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefits {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  background-color: var(--gray-100);
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit > img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit-label {
  margin: 0;
  letter-spacing: -0.24px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefits {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--gray-400);
  background-color: var(--gray-100);
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit > img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.AgencyBusinessPromptComponent .agency-company-prereq__benefit-label {
  margin: 0;
  letter-spacing: -0.24px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__documents {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 12px;
  padding: 16px;
  background-color: var(--gray-300);
}
.AgencyBusinessPromptComponent .agency-company-prereq__documents-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__documents-header .HeadingComponent {
  margin: 0;
}
.AgencyBusinessPromptComponent .agency-company-prereq__documents-eta {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  background-color: var(--gray-100);
}
.AgencyBusinessPromptComponent .agency-company-prereq__documents-eta .TextComponent {
  margin: 0;
}
.AgencyBusinessPromptComponent .agency-company-prereq__documents-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid var(--gray-300);
  background-color: var(--gray-100);
  padding: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__document-badge {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background-color: var(--brand-100);
  color: var(--brand-400);
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.24px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__document-title {
  margin: 0;
  letter-spacing: -0.28px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview {
  width: 100%;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card > .HeadingComponent {
  display: none;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-wrapper {
  margin-top: 0;
  max-width: none;
  border-color: #2b3f6c;
  padding: 16px 14px 14px;
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-icon-wrapper {
  height: 24px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper {
  gap: 12px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-empty,
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-preview {
  width: calc((100% - 24px) / 3);
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-empty .preview-empty-img {
  height: 114px;
  margin-bottom: 10px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-preview {
  padding: 8px;
  margin: -8px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-preview .preview-label {
  margin-top: 8px;
}
.AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-preview .preview-price {
  margin: 2px 0 4px;
}
.AgencyBusinessPromptComponent .action-buttons {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding-top: 12px;
  width: 100%;
}
.AgencyBusinessPromptComponent .action-buttons > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.AgencyBusinessPromptComponent .action-buttons .cancel-button {
  background-color: var(--gray-300);
  color: var(--gray-800);
  transition: background-color 0.2s;
}
.AgencyBusinessPromptComponent .action-buttons .cancel-button:hover {
  background-color: var(--gray-400);
}
.AgencyBusinessPromptComponent .action-buttons .continue-button {
  background-color: var(--brand-100);
  color: var(--brand-400);
  border: 1px solid var(--brand-100);
  transition: background-color 0.2s, border-color 0.2s;
}
.AgencyBusinessPromptComponent .action-buttons .continue-button:hover {
  background-color: var(--gray-100);
  border-color: var(--brand-200);
}
.AgencyBusinessPromptComponent .action-buttons .start-button {
  background-color: var(--brand-400);
  color: var(--gray-100);
  transition: background-color 0.2s;
}
.AgencyBusinessPromptComponent .action-buttons .start-button:hover {
  background-color: var(--brand-300);
}

@media screen and (max-width: 1024px) {
  .padded:has(.AgencyBusinessPromptComponent) {
    padding: var(--spacing-md) var(--spacing-md) 0;
  }
  .AgencyBusinessPromptComponent {
    width: 100%;
    gap: 16px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__intro {
    gap: 8px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__intro .HeadingComponent {
    font-size: 22px;
    line-height: 30px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__description {
    font-size: 14px;
    line-height: 22px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefits {
    flex-direction: column;
    gap: 10px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefit {
    padding: 10px 12px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefits {
    flex-direction: column;
    gap: 10px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefit {
    padding: 10px 12px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefits {
    flex-direction: column;
    gap: 10px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefit {
    padding: 10px 12px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefits {
    flex-direction: column;
    gap: 10px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__benefit {
    padding: 10px 12px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__documents {
    padding: 12px;
    gap: 12px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__documents-header {
    align-items: center;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__documents-header .HeadingComponent {
    font-size: 13px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__documents-eta {
    padding: 5px 8px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__documents-eta .TextComponent {
    font-size: 10px;
    line-height: 14px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__document-item {
    padding: 10px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__document-title {
    font-size: 12px;
    line-height: 18px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-wrapper {
    padding: 12px 10px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper {
    gap: 10px;
  }
  .AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-empty,
  .AgencyBusinessPromptComponent .agency-company-prereq__preview-card .combo-preview-ads-wrapper .preview-preview {
    width: calc((100% - 10px) / 2);
  }
  .AgencyBusinessPromptComponent .action-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 0 var(--spacing-4xl);
  }
  .AgencyBusinessPromptComponent .action-buttons > * {
    width: 100%;
    max-width: stretch;
  }
  .AgencyBusinessPromptComponent .action-buttons .start-button {
    order: 1;
  }
  .AgencyBusinessPromptComponent .action-buttons .continue-button {
    order: 2;
  }
  .AgencyBusinessPromptComponent .action-buttons .cancel-button {
    order: 3;
  }
}
.AppDownloadBannerComponent {
  display: none;
}

@media screen and (max-width: 1024px) {
  .AppDownloadBannerComponent {
    position: fixed;
    z-index: 106;
    inset: 0;
    display: block;
    visibility: hidden;
    pointer-events: none;
  }
  .AppDownloadBannerComponent.visible {
    visibility: visible;
    pointer-events: auto;
  }
  .AppDownloadBannerComponent.visible .backdrop {
    opacity: 1;
  }
  .AppDownloadBannerComponent.visible .sheet {
    transform: translateY(0);
  }
  .AppDownloadBannerComponent .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.48);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .AppDownloadBannerComponent .sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .AppDownloadBannerComponent .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.22);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
    box-sizing: border-box;
  }
  .AppDownloadBannerComponent .sheet-handle {
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: var(--gray-300);
  }
  .AppDownloadBannerComponent .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    margin: var(--spacing-none);
    max-width: 32ch;
  }
  .AppDownloadBannerComponent .text-container .title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .text-container .subtitle {
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--gray-700);
    line-height: 1.45;
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container img {
    width: 100%;
    max-width: 160px;
    object-fit: contain;
  }
  .AppDownloadBannerComponent .action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .download-button {
    display: none;
    margin: var(--spacing-none);
    width: 100%;
  }
  .AppDownloadBannerComponent .action-container .download-button .bblink {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .AppDownloadBannerComponent .action-container .continue-button {
    margin: var(--spacing-none);
    width: 100%;
  }
  .AppDownloadBannerComponent .action-container .continue-button a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-md);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  .AppDownloadBannerComponent {
    position: fixed;
    z-index: 106;
    inset: 0;
    display: block;
    visibility: hidden;
    pointer-events: none;
  }
  .AppDownloadBannerComponent.visible {
    visibility: visible;
    pointer-events: auto;
  }
  .AppDownloadBannerComponent.visible .backdrop {
    opacity: 1;
  }
  .AppDownloadBannerComponent.visible .sheet {
    transform: translateY(0);
  }
  .AppDownloadBannerComponent .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.48);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .AppDownloadBannerComponent .sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .AppDownloadBannerComponent .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.22);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
    box-sizing: border-box;
  }
  .AppDownloadBannerComponent .sheet-handle {
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: var(--gray-300);
  }
  .AppDownloadBannerComponent .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    margin: var(--spacing-none);
    max-width: 32ch;
  }
  .AppDownloadBannerComponent .text-container .title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .text-container .subtitle {
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--gray-700);
    line-height: 1.45;
    text-align: center;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .image-container img {
    width: 100%;
    max-width: 160px;
    object-fit: contain;
  }
  .AppDownloadBannerComponent .action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
    margin: var(--spacing-none);
  }
  .AppDownloadBannerComponent .action-container .download-button {
    display: none;
    margin: var(--spacing-none);
    width: 100%;
  }
  .AppDownloadBannerComponent .action-container .download-button .bblink {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .AppDownloadBannerComponent .action-container .continue-button {
    margin: var(--spacing-none);
    width: 100%;
  }
  .AppDownloadBannerComponent .action-container .continue-button a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--gray-700);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-md);
    box-sizing: border-box;
  }
}
.AppLanguageSelectorComponent {
  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--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(#ph.HeaderComponent--has-secondary)) .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(#ph.HeaderComponent--has-secondary) .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(#ph.HeaderComponent--has-secondary) .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);
}
@media screen and (max-width: 1024px) {
  .AppNotificationAreaHeaderComponent {
    gap: var(--spacing-md);
  }
}

.AppNotificationAreaHeaderComponent > a {
  width: 24px;
  height: 24px;
  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 > .msg-dot {
  position: absolute;
  top: -1px;
  left: unset;
  right: -3px;
  font-weight: bold;
  color: var(--gray-100);
  text-align: center;
  border-radius: var(--radius-xl);
  width: 10px;
  height: 10px;
  padding: var(--spacing-none);
}

.AppNotificationAreaHeaderComponent > a.m > .msg-dot::after {
  display: inline-block;
  background-color: var(--brand-400);
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-4xl);
  position: absolute;
  top: -2px;
  right: 0;
  border: 2px solid white;
}

@media screen and (max-width: 1024px) {
  .AppNotificationAreaHeaderComponent > a.m > .msg-dot {
    left: unset !important;
    right: -3px;
    top: -1px !important;
    width: 8px;
    height: 8px;
  }
  .AppNotificationAreaHeaderComponent > a.m > .msg-dot::after {
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-width: 1.5px;
  }
}
.AppNotificationAreaHeaderComponent > a.m:hover,
.AppNotificationAreaHeaderComponent > a.m:focus-visible {
  background: url("/img/redesign/icons/settings/message-blue.svg") no-repeat 0 0 !important;
}
@media screen and (max-width: 1024px) {
  .AppNotificationAreaHeaderComponent > a.m:hover,
  .AppNotificationAreaHeaderComponent > a.m:focus-visible {
    background: url("/img/redesign/icons/settings/message-header.svg") no-repeat 50% 50% !important;
  }
}

.AppNotificationAreaHeaderComponent > a.n:hover,
.AppNotificationAreaHeaderComponent > a.n:focus-visible {
  background: url("/img/redesign/icons/settings/notification-blue.svg") no-repeat 0 0 !important;
}
@media screen and (max-width: 1024px) {
  .AppNotificationAreaHeaderComponent > a.n:hover,
  .AppNotificationAreaHeaderComponent > a.n:focus-visible {
    background: url("/img/redesign/icons/settings/notification.svg") no-repeat 50% 50% !important;
  }
}

.AppNotificationAreaHeaderComponent > a.n > div {
  background-color: var(--brand-400);
}

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

.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: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--spacing-xxs) var(--spacing-none);
  align-items: stretch;
  gap: var(--spacing-2xl);
}
.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);
  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-icon.color-swatch {
  width: 28px;
  height: 28px;
  margin: 8px;
  border-radius: 50%;
  border: 1px solid var(--gray-400);
  box-sizing: border-box;
  background-size: auto;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.04);
}
.AttributeComponent .attr-icon.body-type-icon {
  background-size: 82%;
}
.AttributeComponent .attr-icon.make-icon {
  background-size: 80%;
}
.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) {
  .vi .attr.g:has(.AttributeComponent) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vi .attr.g:has(.AttributeComponent).new {
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xl);
  }
  .AttributeComponent .attr-icon {
    width: 36px;
    height: 36px;
  }
  .AttributeComponent .attr-icon.color-swatch {
    width: 24px;
    height: 24px;
    margin: 6px;
  }
  .AttributeComponent .attr-icon.body-type-icon {
    background-size: 82%;
  }
  .AttributeComponent .attr-icon.make-icon {
    background-size: 80%;
  }
}
.BoxComponent {
  display: block;
  box-sizing: border-box;
  color: inherit;
  text-align: inherit;
}

.BreadCrumbComponent {
  display: flex;
  align-items: center;
  height: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-none) var(--spacing-md);
}
.BreadCrumbComponent 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: var(--spacing-lg);
}
.BreadCrumbComponent li,
.BreadCrumbComponent span {
  display: inline;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  color: var(--gray-900);
}
.BreadCrumbComponent li {
  opacity: 0.5;
}
.BreadCrumbComponent li:has(a):hover {
  opacity: 1;
}
.BreadCrumbComponent a:hover span {
  color: var(--brand-400);
  text-decoration: none;
}
.BreadCrumbComponent img {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
}
.BreadCrumbComponent li div {
  display: inline;
}
@media screen and (max-width: 1024px) {
  .BreadCrumbComponent {
    padding: var(--spacing-xl) var(--spacing-6xl) var(--spacing-sm) var(--spacing-md);
    height: initial;
  }
  #main.pvp .BreadCrumbComponent {
    padding-right: var(--spacing-md);
  }
  .BreadCrumbComponent ol {
    margin: auto;
    flex-wrap: wrap;
    height: initial;
  }
  .BreadCrumbComponent ol li {
    margin-bottom: var(--spacing-none);
  }
  .BreadCrumbComponent li:first-child,
  .BreadCrumbComponent li:nth-child(2) {
    display: none;
  }
}

.BundleCardComponent {
  width: 100%;
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}
.BundleCardComponent .bundleCardPrimary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1 1 auto;
  min-width: 0;
}
.BundleCardComponent .bundleCardBody {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex: 1 1 auto;
}
.BundleCardComponent .bundleCardIcon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-alt-sm);
  border-radius: var(--radius-sm);
  background: var(--gray-300);
}
.BundleCardComponent .bundleCardIcon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.BundleCardComponent .bundleCardInfo,
.BundleCardComponent .bundleCardValidity,
.BundleCardComponent .bundleCardUsage {
  display: flex;
  flex-direction: column;
}
.BundleCardComponent .bundleCardInfo {
  min-width: 0;
  gap: var(--spacing-xxs);
  flex: 1 1 auto;
}
.BundleCardComponent .bundleCardInfo h4,
.BundleCardComponent .bundleCardInfo p {
  margin: var(--spacing-none);
}
.BundleCardComponent .bundleCardTitleRow {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  min-width: 0;
}
.BundleCardComponent .bundleCardBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: var(--radius-xs);
  background: var(--accent-tropicalIndigo);
  white-space: nowrap;
}
.BundleCardComponent .bundleCardValidity {
  gap: var(--spacing-none);
}
.BundleCardComponent .bundleCardUsage {
  flex: 0 1 320px;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-xxs);
  min-width: 0;
}
@media screen and (max-width: 1024px) {
  .BundleCardComponent .bundleCardUsage {
    flex: 1;
  }
}
.BundleCardComponent .usageRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
  width: 100%;
}
.BundleCardComponent .usageLabel {
  min-width: 0;
}
.BundleCardComponent .usageLabel p {
  margin: var(--spacing-none);
  text-align: right;
  white-space: nowrap;
}
.BundleCardComponent .usageValue {
  flex: 0 0 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xxs);
}
.BundleCardComponent .usageValue p {
  margin: var(--spacing-none);
}
.BundleCardComponent .usageValueCurrent,
.BundleCardComponent .usageValueTotal {
  display: inline;
}
.BundleCardComponent.inactive .bundleCardIcon {
  background: var(--gray-300);
}
.BundleCardComponent.inactive .bundleCardIcon img {
  opacity: 0.4;
  filter: grayscale(1);
}
@media screen and (max-width: 1024px) {
  .BundleCardComponent {
    padding: var(--spacing-md);
    align-items: flex-start;
    min-width: 100%;
    max-width: 100%;
  }
  .BundleCardComponent .bundleCardPrimary {
    display: flex !important;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  .BundleCardComponent .bundleCardIcon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: var(--spacing-sm);
    border-radius: var(--radius-alt-xs);
  }
  .BundleCardComponent .bundleCardIcon img {
    width: 20px;
    height: 20px;
  }
  .BundleCardComponent .bundleCardBody {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-sm);
  }
  .BundleCardComponent .bundleCardInfo {
    gap: var(--spacing-xxs);
  }
  .BundleCardComponent .bundleCardInfo h4 {
    line-height: var(--line-height-xs);
  }
  .BundleCardComponent .bundleCardTitleRow {
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
  }
  .BundleCardComponent .bundleCardTitleRow h4 {
    min-width: 0;
  }
  .BundleCardComponent .bundleCardBadge {
    padding: var(--spacing-xxs) var(--spacing-xs);
  }
  .BundleCardComponent .bundleCardUsage {
    width: 100%;
    align-items: stretch;
    gap: var(--spacing-alt-xs);
  }
  .BundleCardComponent .usageRow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
  }
  .BundleCardComponent .usageLabel,
  .BundleCardComponent .usageValue {
    width: auto;
    min-width: 0;
  }
  .BundleCardComponent .usageValue {
    justify-content: flex-end;
  }
  .BundleCardComponent .usageLabel p {
    text-align: left;
  }
  .BundleCardComponent .bundleCardValidity {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }
  .BundleCardComponent .bundleCardValidity p:first-of-type:after {
    content: ":";
  }
}

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

/* BusinessPageToolbarComponent styles are currently provided by core.css and mobile.css. */
#main:has(.business-settings-v2) > .cb {
  display: none;
}

.BusinessSettingsComponent {
  --business-settings-content-width: 848px;
  --business-settings-control-width: 548px;
  --business-settings-label-width: 280px;
  --business-settings-stack-gap: var(--spacing-6xl);
  --business-settings-mobile-stack-gap: var(--spacing-4xl);
  --business-settings-section-gap: var(--spacing-xl);
  --business-settings-section-gap-compact: var(--spacing-lg);
  --business-settings-row-gap: var(--spacing-xl);
  --business-settings-bottom-offset: var(--spacing-md);
  --business-settings-title-font-size: 22px;
  --business-settings-title-line-height: var(--line-height-xl);
  --business-settings-text-font-size: var(--font-size-md);
  --business-settings-text-line-height: var(--line-height-sm);
  --business-settings-control-height: var(--spacing-7xl);
  --business-settings-compact-control-height: var(--spacing-5xl);
  --business-settings-small-control-height: var(--spacing-2xl);
  --business-settings-dropdown-z-index: 120;
  --business-settings-verification-alert-min-height: 130px;
  --business-settings-verification-alert-padding: var(--spacing-2xl) 56px var(--spacing-lg) var(--spacing-lg);
  --business-settings-working-hours-day-label-width: 192px;
  --business-settings-working-hours-time-width: 100px;
  --business-settings-working-hours-list-width: 128px;
}
.BusinessSettingsComponent__tabs {
  margin-bottom: 24px;
}
.BusinessSettingsComponent__tabs .SingleSelectBubbleComponent .options-container {
  flex-wrap: nowrap;
  -ms-overflow-style: none;
  overflow-x: scroll;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.BusinessSettingsComponent__tabs .SingleSelectBubbleComponent .options-container::-webkit-scrollbar {
  display: none;
}
.BusinessSettingsComponent__tabs .SingleSelectBubbleComponent .option-container {
  flex: 0 0 auto;
}
.BusinessSettingsComponent__manualSave {
  display: flex;
  justify-content: flex-end;
}
.BusinessSettingsComponent .BusinessSettingsComponent__manualSaveButton.ButtonComponent {
  min-width: 120px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent {
  display: flex;
  flex-direction: column;
  gap: var(--business-settings-stack-gap);
  padding-bottom: var(--business-settings-bottom-offset);
  max-width: var(--business-settings-content-width);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__section {
  display: flex;
  flex-direction: column;
  gap: var(--business-settings-section-gap);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlert {
  background: var(--accent-tropicalIndigo-light);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  min-height: var(--business-settings-verification-alert-min-height);
  padding: var(--business-settings-verification-alert-padding);
  position: relative;
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlert--hidden {
  display: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertContent {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertTitle {
  color: var(--gray-900);
  font-size: var(--business-settings-text-font-size);
  font-weight: 700;
  line-height: var(--business-settings-text-line-height);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertDescription {
  color: var(--gray-900);
  font-size: var(--business-settings-text-font-size);
  font-weight: 400;
  line-height: var(--business-settings-text-line-height);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertButton.ButtonComponent {
  background-color: var(--accent-tropicalIndigo);
  border-radius: var(--radius-md);
  color: var(--gray-100);
  min-width: 109px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertButton.ButtonComponent:hover, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertButton.ButtonComponent:focus, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertButton.ButtonComponent:active {
  background-color: var(--accent-tropicalIndigo-dark);
  color: var(--gray-100);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertClose {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  height: var(--business-settings-control-height);
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 10px;
  width: var(--business-settings-control-height);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlertClose img {
  height: 16px;
  width: 16px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__sectionTitle {
  color: var(--gray-900);
  font-size: var(--business-settings-title-font-size);
  font-weight: 700;
  line-height: var(--business-settings-title-line-height);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__sectionBody {
  display: flex;
  flex-direction: column;
  gap: var(--business-settings-section-gap);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__sectionDescription {
  color: var(--gray-800);
  font-size: var(--business-settings-text-font-size);
  font-weight: 400;
  line-height: var(--business-settings-text-line-height);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row {
  display: grid;
  grid-template-columns: var(--business-settings-label-width) minmax(0, var(--business-settings-control-width));
  gap: var(--business-settings-row-gap);
  align-items: start;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__label {
  color: var(--gray-700);
  font-size: var(--business-settings-text-font-size);
  font-weight: 500;
  line-height: var(--business-settings-text-line-height);
  padding-top: var(--spacing-md);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--companyVerification {
  box-sizing: border-box;
  min-height: 48px;
  padding-bottom: 20px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--companyVerification .BusinessSettingsBusinessInformationComponent__label {
  padding-top: 8px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--companyVerification .BusinessSettingsBusinessInformationComponent__control {
  align-self: start;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo {
  box-sizing: border-box;
  min-height: 140px;
  padding-bottom: 20px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--adsDisplayType {
  box-sizing: border-box;
  min-height: 60px;
  padding-bottom: 20px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--adsDisplayType, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__switchRow {
  background-image: linear-gradient(var(--gray-400), var(--gray-400));
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover {
  padding-bottom: 20px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo .BusinessSettingsBusinessInformationComponent__label, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover .BusinessSettingsBusinessInformationComponent__label {
  padding-top: 5px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo .BusinessSettingsBusinessInformationComponent__control, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover .BusinessSettingsBusinessInformationComponent__control, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--adsDisplayType .BusinessSettingsBusinessInformationComponent__control {
  align-self: start;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control {
  align-self: center;
  min-width: 0;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__autosaveError {
  margin-top: 6px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control > .InputComponent, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control > .input-wrapper, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control > .TextAreaComponent, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control > .textareaWrapper {
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control > .InputComponent, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control > .input-wrapper .InputComponent {
  box-sizing: border-box;
  height: var(--business-settings-control-height) !important;
  min-height: var(--business-settings-control-height);
  padding-bottom: 10px !important;
  padding-top: 10px !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control > .textareaWrapper {
  position: relative;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control .TextAreaComponent {
  box-sizing: border-box;
  height: 128px !important;
  min-height: 128px;
  resize: vertical;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl {
  align-items: center;
  display: flex;
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent {
  align-items: center;
  background: var(--gray-300);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  display: flex;
  min-height: var(--business-settings-control-height);
  position: relative;
  width: 100%;
  padding: 0 0 0 16px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--filled:focus-within {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--filled:hover {
  border-color: var(--gray-400);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--empty {
  background: transparent;
  border-color: transparent;
  min-height: var(--business-settings-compact-control-height);
  padding: 0;
  width: auto;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--empty .BusinessSettingsAddressFieldComponent__menuButton,
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--empty .BusinessSettingsAddressFieldComponent__menu {
  display: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--filled .BusinessSettingsAddressFieldComponent__addButton {
  display: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent__addButton.ButtonComponent {
  height: var(--business-settings-compact-control-height);
  min-width: 59px;
  padding-left: 16px;
  padding-right: 16px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent__legacy {
  display: contents;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--empty .BusinessSettingsAddressFieldComponent__legacy {
  display: block;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 0;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .frow {
  display: contents;
  margin: 0;
  padding: 0;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .frow.top.attr {
  padding: 0;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .frow .l {
  display: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .frow .e {
  display: contents;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .addr {
  align-items: center;
  display: contents;
  min-width: 0;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .addr input[type=text] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--gray-800);
  flex: 1 1 auto;
  font-size: var(--business-settings-text-font-size);
  line-height: var(--business-settings-text-line-height);
  min-height: 42px;
  min-width: 0;
  padding: 0;
  width: auto !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .addr input[type=text]:focus {
  outline: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent input[type=hidden] {
  display: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent .addr a {
  display: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent__menuButton {
  align-items: center;
  appearance: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 0;
  justify-content: center;
  padding: 0;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent__menuButton {
  background: transparent url("/img/redesign/icons/menu-circle-vertical.svg") no-repeat center;
  background-size: 20px 20px;
  flex: 0 0 var(--business-settings-control-height);
  height: var(--business-settings-control-height);
  width: var(--business-settings-control-height);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent__menu {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  position: absolute;
  right: -14px;
  top: 22px;
  width: 122px;
  z-index: 20;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent--menuOpen .BusinessSettingsAddressFieldComponent__menu {
  display: flex;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent__menuItem {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--gray-900);
  cursor: pointer;
  display: flex;
  font-size: var(--business-settings-text-font-size);
  font-weight: 500;
  gap: 10px;
  line-height: var(--business-settings-text-line-height);
  padding: 0;
  text-align: left;
  white-space: nowrap;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .BusinessSettingsAddressFieldComponent__menuItem img {
  flex: 0 0 20px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl {
  background: var(--gray-300);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  min-height: var(--business-settings-control-height);
  overflow: hidden;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl:hover {
  border-color: var(--gray-400);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl:focus-within {
  border-color: var(--gray-900);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl:has(.InputComponent.felement_err) {
  border-color: var(--error-400) !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl:hover .BusinessSettingsBusinessInformationComponent__urlPrefix, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl:focus-within .BusinessSettingsBusinessInformationComponent__urlPrefix, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl:has(.InputComponent:focus) .BusinessSettingsBusinessInformationComponent__urlPrefix {
  background: var(--gray-200);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl .InputComponent, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl .InputComponent:hover, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl .InputComponent:focus, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl .InputComponent.felement_err, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl .InputComponent.felement_err:focus {
  border-color: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlControl .InputComponent {
  background: var(--gray-300);
  flex: 1 1 auto;
  height: 42px !important;
  min-height: 42px;
  min-width: 0;
  padding-left: 12px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__urlPrefix {
  align-items: center;
  align-self: stretch;
  color: var(--gray-700);
  cursor: text;
  display: flex;
  flex: 0 0 auto;
  font-size: var(--business-settings-text-font-size);
  line-height: var(--business-settings-text-line-height);
  padding-left: 16px;
  padding-right: 12px;
  white-space: nowrap;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload {
  max-width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.felement_err .assetupload-frame {
  border-color: var(--error-400) !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-body, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-stack {
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-resinfo {
  box-sizing: border-box;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-frame {
  background-color: var(--gray-300) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  box-sizing: border-box;
  margin-right: 0;
  overflow: hidden;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--logo, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--logo .assetupload-frame, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--logo .assetupload-preview {
  height: 120px !important;
  width: 120px !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--cover {
  max-width: 548px !important;
  width: 100% !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--cover .assetupload-frame {
  aspect-ratio: 5/1;
  height: auto !important;
  max-width: 548px !important;
  width: 100% !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--cover .assetupload-preview {
  height: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-preview {
  border-radius: var(--radius-md);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-preview::after {
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-md);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-overlay {
  gap: 4px;
  right: 8px;
  top: 8px;
  transform: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-preview:hover .assetupload-overlay {
  transform: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action {
  height: 24px;
  padding: 4px;
  width: 24px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-edit, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-edit:hover, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-edit:focus, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-edit:active {
  background: transparent url("/img/redesign/icons/edit-mark-white.svg") no-repeat center/16px 16px !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-delete, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-delete:hover, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-delete:focus, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-action-delete:active {
  background: transparent url("/img/redesign/icons/delete-mark-white.svg") no-repeat center/16px 16px !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-delete-panel {
  display: none !important;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-placeholder-icon {
  height: 24px;
  width: 24px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--logo .assetupload-placeholder-line {
  display: none;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__switchRow {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  min-height: var(--business-settings-control-height);
  padding-bottom: 20px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__switchLabel {
  color: var(--gray-700);
  font-size: var(--business-settings-text-font-size);
  font-weight: 500;
  line-height: var(--business-settings-text-line-height);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__newsInput {
  max-width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__newsInput.TextAreaComponent {
  background: var(--brand-100);
  height: 128px !important;
  min-height: 128px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__newsInput.TextAreaComponent:focus {
  background: var(--gray-100);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__newsInput.TextAreaComponent + .counterVal {
  background: var(--brand-100);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__newsInput.TextAreaComponent:focus + .counterVal {
  background: var(--gray-100);
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__section--news {
  gap: 12px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__newsHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 64px;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__sectionBody--news {
  gap: 0;
}
.BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent .SingleSelectBubbleComponent .options-container {
  flex-wrap: nowrap;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent {
  display: flex;
  flex-direction: column;
  gap: var(--business-settings-stack-gap);
  max-width: var(--business-settings-content-width);
  padding-bottom: var(--business-settings-bottom-offset);
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__section {
  display: flex;
  flex-direction: column;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__section--description {
  gap: var(--business-settings-section-gap);
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__section--recommendedAds {
  gap: 16px;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionTitle {
  color: var(--gray-900);
  font-size: var(--business-settings-title-font-size);
  font-weight: 700;
  line-height: var(--business-settings-title-line-height);
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionDescription {
  color: var(--gray-800);
  font-size: var(--business-settings-text-font-size);
  font-weight: 400;
  line-height: var(--business-settings-text-line-height);
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionBody, .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionBody > .textareaWrapper {
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionBody > .textareaWrapper {
  position: relative;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__descriptionInput.TextAreaComponent {
  box-sizing: border-box;
  height: 176px !important;
  min-height: 176px;
  resize: vertical;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__autosaveError {
  margin-top: 6px;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__switchRow {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  min-height: var(--business-settings-control-height);
  padding-bottom: 20px;
}
.BusinessSettingsComponent .BusinessSettingsAdPagesComponent__switchLabel {
  color: var(--gray-700);
  font-size: var(--business-settings-text-font-size);
  font-weight: 500;
  line-height: var(--business-settings-text-line-height);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent {
  display: flex;
  flex-direction: column;
  gap: var(--business-settings-stack-gap);
  max-width: var(--business-settings-content-width);
  padding-bottom: var(--business-settings-bottom-offset);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__section {
  display: flex;
  flex-direction: column;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__section--hours {
  gap: 16px;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__section--options {
  gap: var(--business-settings-section-gap);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__sectionTitle {
  color: var(--gray-900);
  font-size: var(--business-settings-title-font-size);
  font-weight: 700;
  line-height: var(--business-settings-title-line-height);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__days {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__day {
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: var(--business-settings-compact-control-height);
  position: relative;
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__day--disabled {
  cursor: pointer;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__day:has(.DropdownComponent.open) {
  z-index: var(--business-settings-dropdown-z-index);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__dayLabel {
  align-items: center;
  display: flex;
  flex: 0 0 var(--business-settings-working-hours-day-label-width);
  gap: 12px;
  min-height: var(--business-settings-small-control-height);
  width: var(--business-settings-working-hours-day-label-width);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__dayName, .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__switchLabel {
  color: var(--gray-700);
  font-size: var(--business-settings-text-font-size);
  font-weight: 500;
  line-height: var(--business-settings-text-line-height);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeRow {
  align-items: center;
  display: flex;
  gap: 10px;
  max-height: var(--business-settings-compact-control-height);
  max-width: 100%;
  min-height: var(--business-settings-compact-control-height);
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height 160ms ease, max-width 160ms ease, min-height 160ms ease, opacity 120ms ease, transform 160ms ease;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeRow:has(.DropdownComponent.open) {
  overflow: visible;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__day--disabled .BusinessSettingsWorkingHoursComponent__timeRow {
  max-height: 0;
  max-width: 0;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown {
  flex: 0 0 var(--business-settings-working-hours-time-width);
  position: relative;
  width: var(--business-settings-working-hours-time-width);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown:has(.DropdownComponent.open) {
  z-index: var(--business-settings-dropdown-z-index);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .me {
  background-color: var(--gray-300);
  border-color: transparent;
  height: var(--business-settings-compact-control-height);
  min-height: var(--business-settings-compact-control-height);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .me > div {
  min-width: 0;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent.open > .me > span {
  display: none !important;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent.open > .me {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .l {
  box-sizing: border-box;
  min-width: var(--business-settings-working-hours-list-width);
  width: var(--business-settings-working-hours-list-width) !important;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .l > div.i {
  box-sizing: border-box;
  flex: none;
  padding-left: 14px;
  padding-right: 34px;
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .l > div.i > div.title-wrapper {
  flex: none;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  width: auto;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .l > div.s > svg {
  right: 12px;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .l > div.BusinessSettingsWorkingHoursComponent__nextDayLabel {
  color: var(--gray-600);
  cursor: default;
  flex: none;
  font-size: var(--font-size-xxs);
  font-weight: 400;
  line-height: var(--line-height-alt-xs);
  padding: 2px 14px 4px;
  pointer-events: none;
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent.disabled > .me {
  background-color: var(--gray-300);
  border-color: transparent;
  cursor: default;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent.disabled > .me > div {
  color: var(--gray-500);
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeSeparator {
  align-items: center;
  color: var(--gray-900);
  display: flex;
  justify-content: center;
  width: 6px;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__sectionBody {
  width: 100%;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__switchRow {
  align-items: center;
  border-bottom: 1px solid var(--gray-400);
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  min-height: var(--business-settings-control-height);
  padding-bottom: 20px;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__switchLabel {
  min-width: 0;
}
.BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__autosaveError {
  margin-top: 6px;
}

.BusinessSettingsToastComponent {
  align-items: center;
  background: var(--gray-900);
  border-radius: var(--radius-alt-xs);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--spacing-2xl));
  box-sizing: border-box;
  color: var(--gray-100);
  display: flex;
  font-size: var(--font-size-xs);
  font-weight: 500;
  gap: var(--spacing-sm);
  left: 50%;
  line-height: var(--line-height-xs);
  max-width: calc(100vw - var(--spacing-4xl));
  min-height: var(--spacing-5xl);
  opacity: 0;
  padding: var(--spacing-sm) var(--spacing-alt-md) var(--spacing-sm) var(--spacing-sm);
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, var(--spacing-sm));
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 10001;
}
.BusinessSettingsToastComponent--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.BusinessSettingsToastComponent__icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-lg) var(--spacing-lg);
  flex: 0 0 var(--spacing-lg);
  height: var(--spacing-lg);
  width: var(--spacing-lg);
}
.BusinessSettingsToastComponent--success .BusinessSettingsToastComponent__icon {
  background-image: url("/img/redesign/icons/check-circle-green.svg");
}
.BusinessSettingsToastComponent--error .BusinessSettingsToastComponent__icon {
  background-image: url("/img/redesign/icons/notifications/notif_error.svg");
}
.BusinessSettingsToastComponent__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 1024px) {
  .business-settings-v2 {
    padding-left: 12px;
    padding-right: 12px;
  }
  .BusinessSettingsComponent {
    --business-settings-bottom-offset: var(--spacing-lg);
    --business-settings-title-font-size: var(--font-size-xl);
    --business-settings-title-line-height: 26px;
    --business-settings-verification-alert-min-height: 114px;
    --business-settings-verification-alert-padding: var(--spacing-xl) 52px var(--spacing-lg) var(--spacing-lg);
  }
  .BusinessSettingsComponent__tabs {
    margin-top: 8px;
    margin-bottom: 16px;
  }
  .BusinessSettingsComponent__manualSave {
    justify-content: stretch;
  }
  .BusinessSettingsComponent .BusinessSettingsComponent__manualSaveButton.ButtonComponent {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent {
    gap: var(--business-settings-mobile-stack-gap);
    max-width: none;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__section {
    gap: 16px;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__verificationAlert {
    min-height: var(--business-settings-verification-alert-min-height);
    padding: var(--business-settings-verification-alert-padding);
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__sectionTitle {
    font-size: var(--business-settings-title-font-size);
    line-height: var(--business-settings-title-line-height);
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__sectionBody {
    gap: 16px;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__label {
    padding-top: 0;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__control {
    align-self: stretch;
    width: 100%;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover {
    gap: 12px;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo {
    min-height: auto;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo .BusinessSettingsBusinessInformationComponent__control, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover .BusinessSettingsBusinessInformationComponent__control {
    align-self: stretch;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--cover, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--cover .assetupload-frame {
    max-width: 100% !important;
    width: 100% !important;
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent {
    max-width: none;
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionTitle {
    font-size: var(--business-settings-title-font-size);
    line-height: var(--business-settings-title-line-height);
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent {
    max-width: none;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__sectionTitle {
    font-size: var(--business-settings-title-font-size);
    line-height: var(--business-settings-title-line-height);
  }
}
@media screen and (max-width: 1024px) {
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent {
    gap: var(--business-settings-mobile-stack-gap);
    padding-bottom: var(--business-settings-bottom-offset);
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row {
    gap: var(--spacing-sm);
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--companyVerification, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--adsDisplayType, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__switchRow {
    background-image: none;
    min-height: auto;
    padding-bottom: 0;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--companyVerification, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--adsDisplayType {
    gap: 8px;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--companyVerification .BusinessSettingsBusinessInformationComponent__label, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo .BusinessSettingsBusinessInformationComponent__label, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover .BusinessSettingsBusinessInformationComponent__label {
    padding-top: 0;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--companyVerification .BusinessSettingsBusinessInformationComponent__control, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--logo .BusinessSettingsBusinessInformationComponent__control, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--cover .BusinessSettingsBusinessInformationComponent__control, .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__row--adsDisplayType .BusinessSettingsBusinessInformationComponent__control {
    align-self: stretch;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__section:nth-child(3) .BusinessSettingsBusinessInformationComponent__sectionBody {
    gap: var(--business-settings-section-gap);
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload.assetupload--cover .assetupload-frame {
    aspect-ratio: 404/151.598;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__assetUpload .assetupload-inline-error:empty {
    margin-top: 0 !important;
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__switchRow {
    align-items: center;
    flex-direction: row;
    gap: 12px;
    min-height: var(--business-settings-small-control-height);
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__switchLabel {
    line-height: var(--business-settings-text-line-height);
  }
  .BusinessSettingsComponent .BusinessSettingsBusinessInformationComponent__newsHeader {
    min-height: 74px;
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent {
    gap: var(--business-settings-mobile-stack-gap);
    padding-bottom: var(--business-settings-bottom-offset);
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__section--description {
    gap: var(--business-settings-section-gap-compact);
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionHeader {
    gap: 4px;
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__sectionDescription {
    color: var(--gray-900);
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__descriptionInput.TextAreaComponent {
    height: 128px !important;
    min-height: 128px;
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__switchRow {
    min-height: var(--business-settings-small-control-height);
    padding-bottom: 0;
  }
  .BusinessSettingsComponent .BusinessSettingsAdPagesComponent__switchLabel {
    flex: 1 1 auto;
    min-width: 0;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent {
    gap: var(--business-settings-mobile-stack-gap);
    padding-bottom: var(--business-settings-bottom-offset);
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__section--hours {
    gap: var(--business-settings-section-gap-compact);
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__section--options {
    gap: var(--business-settings-section-gap-compact);
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__days {
    gap: 20px;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__day {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    min-height: var(--business-settings-small-control-height);
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__day--disabled {
    gap: 0;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__dayLabel {
    flex: none;
    width: 100%;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeRow {
    min-height: var(--business-settings-control-height);
    width: 100%;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .me {
    height: var(--business-settings-control-height);
    min-height: var(--business-settings-control-height);
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__timeDropdown .DropdownComponent > .l {
    min-width: 100%;
    width: 100% !important;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__switchRow {
    border-bottom: 0;
    min-height: var(--business-settings-small-control-height);
    padding-bottom: 0;
  }
  .BusinessSettingsComponent .BusinessSettingsWorkingHoursComponent__switchLabel {
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .BusinessSettingsWorkingHoursComponent__timeRow {
    transition: none;
  }
}
.BusinessVerificationStatusViewComponent {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BusinessVerificationStatusViewComponent > h4 {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-xs);
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
}
.BusinessVerificationStatusViewComponent > span {
  display: block;
  margin-bottom: var(--spacing-xl);
  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;
}
.BusinessVerificationStatusViewComponent > span > span {
  color: var(--brand-400);
}
.BusinessVerificationStatusViewComponent > a {
  color: var(--brand-400);
}
.BusinessVerificationStatusViewComponent > a:hover {
  color: var(--brand-300);
}
.BusinessVerificationStatusViewComponent .selling-tips {
  display: block;
  width: fit-content;
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  transition: background-color 0.3s ease-out;
  text-align: center;
  cursor: pointer;
  background-color: var(--brand-400);
  color: var(--gray-100);
}
.BusinessVerificationStatusViewComponent .selling-tips:hover {
  color: var(--gray-100);
  background-color: var(--brand-300);
}
@media screen and (max-width: 1024px) {
  .BusinessVerificationStatusViewComponent {
    padding: var(--spacing-none) var(--spacing-md);
    height: 70vh;
  }
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent,
.ButtonComponent {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  width: auto;
  min-width: 0;
  margin: 0;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border-style: solid;
  border-width: 0;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, background-color 0.2s;
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent:focus:not(:focus-visible),
.ButtonComponent:focus:not(:focus-visible) {
  outline: none;
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent:focus-visible,
.ButtonComponent:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent[type=submit],
.ButtonComponent[type=submit] {
  border-width: 0;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent .ButtonComponent__text,
.ButtonComponent .ButtonComponent__text {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md .ButtonComponent__text,
.ButtonComponent.ButtonComponent--md .ButtonComponent__text,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg .ButtonComponent__text,
.ButtonComponent.ButtonComponent--lg .ButtonComponent__text {
  gap: var(--spacing-sm);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent .ButtonComponent__text img,
.ButtonComponent .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent .ButtonComponent__text svg,
.ButtonComponent .ButtonComponent__text svg {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--lg .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--lg .ButtonComponent__text svg {
  width: 22px;
  height: 22px;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--md .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--md .ButtonComponent__text svg {
  width: 18px;
  height: 18px;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--sm .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--sm .ButtonComponent__text svg {
  width: 16px;
  height: 16px;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg,
.ButtonComponent.ButtonComponent--lg {
  --std-btn-height: var(--spacing-9xl);
  --std-btn-px: var(--spacing-4xl);
  --std-btn-py: var(--spacing-lg);
  gap: var(--spacing-sm);
  box-sizing: border-box;
  height: var(--std-btn-height);
  padding: var(--std-btn-py) var(--std-btn-px);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: calc(var(--std-btn-height) - var(--std-btn-py) - var(--std-btn-py));
  letter-spacing: -0.02em;
  border-radius: var(--radius-md);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md,
.ButtonComponent.ButtonComponent--md {
  --std-btn-height: var(--spacing-7xl);
  --std-btn-px: var(--spacing-lg);
  --std-btn-py: var(--spacing-md);
  gap: var(--spacing-sm);
  box-sizing: border-box;
  height: var(--std-btn-height);
  padding: var(--std-btn-py) var(--std-btn-px);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: calc(var(--std-btn-height) - var(--std-btn-py) - var(--std-btn-py));
  letter-spacing: -0.02em;
  border-radius: var(--radius-alt-sm);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm,
.ButtonComponent.ButtonComponent--sm {
  --std-btn-height: var(--spacing-5xl);
  --std-btn-px: var(--spacing-md);
  --std-btn-py: var(--spacing-sm);
  gap: var(--spacing-xs);
  box-sizing: border-box;
  height: var(--std-btn-height);
  padding: var(--std-btn-py) var(--std-btn-px);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: calc(var(--std-btn-height) - var(--std-btn-py) - var(--std-btn-py));
  letter-spacing: -0.018em;
  border-radius: var(--radius-sm);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--primary,
.ButtonComponent.ButtonComponent--md.ButtonComponent--primary {
  background-color: var(--brand-400);
  color: var(--gray-100);
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--primary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--md.ButtonComponent--primary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    background-color: var(--brand-300);
  }
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--primary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--md.ButtonComponent--primary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
  background-color: var(--brand-300);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--secondary,
.ButtonComponent.ButtonComponent--md.ButtonComponent--secondary {
  background-color: var(--brand-100);
  color: var(--brand-400);
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--secondary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--md.ButtonComponent--secondary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    background-color: var(--brand-200);
  }
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--secondary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--md.ButtonComponent--secondary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
  background-color: var(--brand-200);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--tertiary,
.ButtonComponent.ButtonComponent--md.ButtonComponent--tertiary {
  background-color: var(--gray-300);
  color: var(--gray-800);
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--tertiary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--md.ButtonComponent--tertiary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    background-color: var(--gray-400);
  }
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--tertiary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--md.ButtonComponent--tertiary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
  background-color: var(--gray-400);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--link,
.ButtonComponent.ButtonComponent--lg.ButtonComponent--link {
  height: auto;
  min-height: 0;
  padding: var(--spacing-xs) var(--spacing-4xl);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  border-radius: 0;
  background-color: transparent;
  color: var(--brand-400);
  text-decoration: none;
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--link:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--lg.ButtonComponent--link:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--link,
.ButtonComponent.ButtonComponent--md.ButtonComponent--link {
  height: auto;
  min-height: 0;
  padding: var(--spacing-xs) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
  border-radius: 0;
  background-color: transparent;
  color: var(--brand-400);
  text-decoration: none;
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--link:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--md.ButtonComponent--link:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--link,
.ButtonComponent.ButtonComponent--sm.ButtonComponent--link {
  height: auto;
  min-height: 0;
  padding: var(--spacing-xxs) var(--spacing-md);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.018em;
  border-radius: 0;
  background-color: transparent;
  color: var(--brand-400);
  text-decoration: none;
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--link:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--sm.ButtonComponent--link:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--link:focus-visible:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--link:focus-visible:not(.ButtonComponent--is-disabled):not(:disabled):not(.ButtonComponent--is-loading) {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--primary,
.ButtonComponent.ButtonComponent--sm.ButtonComponent--primary,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--primary,
.ButtonComponent.ButtonComponent--lg.ButtonComponent--primary {
  background-color: var(--brand-400);
  color: var(--gray-100);
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--primary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--sm.ButtonComponent--primary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--primary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--lg.ButtonComponent--primary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    background-color: var(--brand-300);
  }
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--primary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--sm.ButtonComponent--primary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--primary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--lg.ButtonComponent--primary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
  background-color: var(--brand-300);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--secondary,
.ButtonComponent.ButtonComponent--sm.ButtonComponent--secondary,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--secondary,
.ButtonComponent.ButtonComponent--lg.ButtonComponent--secondary {
  background-color: var(--brand-100);
  color: var(--brand-400);
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--secondary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--sm.ButtonComponent--secondary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--secondary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--lg.ButtonComponent--secondary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    background-color: var(--brand-200);
  }
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--secondary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--sm.ButtonComponent--secondary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--secondary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--lg.ButtonComponent--secondary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
  background-color: var(--brand-200);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--tertiary,
.ButtonComponent.ButtonComponent--sm.ButtonComponent--tertiary,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--tertiary,
.ButtonComponent.ButtonComponent--lg.ButtonComponent--tertiary {
  background-color: var(--gray-300);
  color: var(--gray-800);
}
@media (hover: hover) {
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--tertiary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--sm.ButtonComponent--tertiary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  :is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--tertiary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
  .ButtonComponent.ButtonComponent--lg.ButtonComponent--tertiary:hover:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
    background-color: var(--gray-400);
  }
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--tertiary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--sm.ButtonComponent--tertiary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--tertiary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading),
.ButtonComponent.ButtonComponent--lg.ButtonComponent--tertiary:active:not(.ButtonComponent--is-disabled):not([aria-disabled=true]):not(:disabled):not(.ButtonComponent--is-loading) {
  background-color: var(--gray-400);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters,
.ButtonComponent.ButtonComponent--img-icon-filters {
  --btn-img-icon-filter-on-brand: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(5660%) hue-rotate(196deg) brightness(100%) contrast(102%);
  --btn-img-icon-filter-on-light: brightness(0) saturate(100%) invert(1);
  --btn-img-icon-filter-disabled: brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(100%) hue-rotate(185deg) brightness(95%) contrast(88%);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--primary .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--primary .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--primary .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--primary .ButtonComponent__text svg {
  filter: var(--btn-img-icon-filter-on-light);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--secondary .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--secondary .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--secondary .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--secondary .ButtonComponent__text svg,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--link .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--link .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--link .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--link .ButtonComponent__text svg {
  filter: var(--btn-img-icon-filter-on-brand);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--tertiary .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--tertiary .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--tertiary .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--tertiary .ButtonComponent__text svg {
  filter: none;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent[aria-disabled=true],
:is(button, input[type=button], input[type=submit], a).ButtonComponent:disabled,
.ButtonComponent:disabled,
.ButtonComponent.ButtonComponent--is-disabled {
  background-color: var(--gray-400) !important;
  color: var(--gray-500) !important;
  -webkit-text-fill-color: var(--gray-500) !important;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--link.ButtonComponent--is-disabled,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--link[aria-disabled=true] {
  background-color: transparent !important;
  color: var(--gray-500) !important;
  -webkit-text-fill-color: var(--gray-500) !important;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters:disabled .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters:disabled .ButtonComponent__text svg,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--is-disabled .ButtonComponent__text img,
.ButtonComponent.ButtonComponent--img-icon-filters.ButtonComponent--is-disabled .ButtonComponent__text svg,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters[aria-disabled=true] .ButtonComponent__text img,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--img-icon-filters[aria-disabled=true] .ButtonComponent__text svg {
  filter: var(--btn-img-icon-filter-disabled);
}

.ButtonComponent__inputWrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.ButtonComponent__inputWrap input.ButtonComponent--primary.ButtonComponent--is-loading {
  color: var(--brand-400);
  -webkit-text-fill-color: var(--brand-400);
  caret-color: transparent;
}

.ButtonComponent__inputWrap input.ButtonComponent--secondary.ButtonComponent--is-loading {
  color: var(--brand-100);
  -webkit-text-fill-color: var(--brand-100);
  caret-color: transparent;
}

.ButtonComponent__inputWrap input.ButtonComponent--tertiary.ButtonComponent--is-loading {
  color: var(--gray-300);
  -webkit-text-fill-color: var(--gray-300);
  caret-color: transparent;
}

.ButtonComponent__inputWrap input.ButtonComponent--link.ButtonComponent--is-loading {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
}

.ButtonComponent__inputWrap .ButtonComponent__loader,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading .ButtonComponent__loader,
.ButtonComponent.ButtonComponent--is-loading .ButtonComponent__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.ButtonComponent__inputWrap .ButtonComponent__loader svg,
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading .ButtonComponent__loader svg,
.ButtonComponent.ButtonComponent--is-loading .ButtonComponent__loader svg {
  display: block;
  flex-shrink: 0;
  animation: std-btn-loader-rotate 0.8s linear infinite;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--lg.ButtonComponent--is-loading .ButtonComponent__loader svg,
.ButtonComponent.ButtonComponent--lg.ButtonComponent--is-loading .ButtonComponent__loader svg,
.ButtonComponent__inputWrap input.ButtonComponent--lg + .ButtonComponent__loader svg {
  width: 22px;
  height: 22px;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--md.ButtonComponent--is-loading .ButtonComponent__loader svg,
.ButtonComponent.ButtonComponent--md.ButtonComponent--is-loading .ButtonComponent__loader svg,
.ButtonComponent__inputWrap input.ButtonComponent--md + .ButtonComponent__loader svg {
  width: 18px;
  height: 18px;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--sm.ButtonComponent--is-loading .ButtonComponent__loader svg,
.ButtonComponent.ButtonComponent--sm.ButtonComponent--is-loading .ButtonComponent__loader svg,
.ButtonComponent__inputWrap input.ButtonComponent--sm + .ButtonComponent__loader svg {
  width: 16px;
  height: 16px;
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading.ButtonComponent--primary .ButtonComponent__loader,
.ButtonComponent__inputWrap input.ButtonComponent--primary + .ButtonComponent__loader {
  color: var(--gray-100);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading.ButtonComponent--secondary .ButtonComponent__loader,
.ButtonComponent__inputWrap input.ButtonComponent--secondary + .ButtonComponent__loader {
  color: var(--brand-400);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading.ButtonComponent--tertiary .ButtonComponent__loader,
.ButtonComponent__inputWrap input.ButtonComponent--tertiary + .ButtonComponent__loader {
  color: var(--gray-800);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading.ButtonComponent--link .ButtonComponent__loader,
.ButtonComponent__inputWrap input.ButtonComponent--link + .ButtonComponent__loader {
  color: var(--brand-400);
}

:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading,
.ButtonComponent.ButtonComponent--is-loading {
  position: relative;
  cursor: wait;
}
:is(button, input[type=button], input[type=submit], a).ButtonComponent.ButtonComponent--is-loading .ButtonComponent__text,
.ButtonComponent.ButtonComponent--is-loading .ButtonComponent__text {
  opacity: 0;
  pointer-events: none;
}

@keyframes std-btn-loader-rotate {
  to {
    transform: rotate(360deg);
  }
}
.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;
}

.CarConditionFilterComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}
.CarConditionFilterComponent .filter-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.CarConditionFilterComponent .label-and-reset-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xxs);
}
.CarConditionFilterComponent .label-and-reset-container .label-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.CarConditionFilterComponent .label-and-reset-container .label-container .new-label {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xxs) var(--spacing-alt-xs);
  font-size: var(--font-size-tiny);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-100);
  background-color: var(--brand-400);
  border-radius: var(--radius-xs);
}
.CarConditionFilterComponent .options-container {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.CarConditionFilterComponent .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);
  font-weight: 500;
  font-size: var(--font-size-sm);
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  transition: all 0.2s;
  user-select: none;
  border: 1px solid var(--gray-300);
  text-decoration: none;
  cursor: pointer;
}
.CarConditionFilterComponent .options-container .option-container:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.CarConditionFilterComponent .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px var(--brand-400) solid;
}

@media screen and (max-width: 1024px) {
  .CarConditionFilterComponent .options-container .option-container:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px var(--gray-300) solid;
  }
  .CarConditionFilterComponent .options-container .option-container.selected:hover {
    color: var(--brand-400);
    background-color: var(--brand-100);
    border: 1px var(--brand-400) solid;
  }
}
.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;
}

.CarPartCatalogLookupModal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-none);
  width: 100%;
}
.CarPartCatalogLookupModal .empty-state {
  color: var(--gray-700);
  font-size: 16px;
  line-height: 24px;
  padding: var(--spacing-md) var(--spacing-none);
}
.CarPartCatalogLookupModal .match-row {
  align-items: flex-start;
  background: transparent;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--gray-400);
  color: var(--gray-900);
  column-gap: var(--spacing-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--spacing-lg) var(--spacing-none);
  text-align: left;
  width: 100%;
}
.CarPartCatalogLookupModal .match-row:last-child {
  border-bottom: 0;
}
.CarPartCatalogLookupModal .match-row.is-info-only {
  grid-template-columns: minmax(0, 1fr);
}
.CarPartCatalogLookupModal .reference-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none);
}
.CarPartCatalogLookupModal .reference-title {
  color: var(--gray-700);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
}
.CarPartCatalogLookupModal .reference-content {
  background: var(--gray-300);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-height: min(360px, 45vh);
  overscroll-behavior: contain;
  overflow: auto;
  padding: var(--spacing-md);
  scrollbar-gutter: stable;
}
.CarPartCatalogLookupModal .reference-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.CarPartCatalogLookupModal .reference-section + .reference-section {
  border-top: 1px solid var(--gray-400);
  padding-top: var(--spacing-md);
}
.CarPartCatalogLookupModal .reference-section-title {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.CarPartCatalogLookupModal .reference-actions {
  background: var(--gray-100);
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-xs);
}
.CarPartCatalogLookupModal .match-content {
  align-items: flex-start;
  column-gap: var(--spacing-md);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-width: 0;
}
.CarPartCatalogLookupModal .match-photo {
  background: var(--gray-300);
  border-radius: var(--radius-sm);
  height: 72px;
  overflow: hidden;
  width: 72px;
}
.CarPartCatalogLookupModal .match-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.CarPartCatalogLookupModal .match-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}
.CarPartCatalogLookupModal .match-title {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.CarPartCatalogLookupModal .match-select {
  align-self: flex-start;
  appearance: none;
  background: var(--brand-400);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--gray-100);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  min-height: 36px;
  padding: var(--spacing-sm) var(--spacing-lg);
  transition: background-color 0.2s;
  -webkit-appearance: none;
}
.CarPartCatalogLookupModal .match-select:hover,
.CarPartCatalogLookupModal .match-select:focus {
  background: var(--brand-300);
  outline: none;
}
.CarPartCatalogLookupModal .fitment-preview-more {
  color: var(--gray-600);
  font-size: 14px;
  line-height: 21px;
}
.CarPartCatalogLookupModal .fitment-preview {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  margin-top: var(--spacing-none);
}
.CarPartCatalogLookupModal .analog-preview {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}
.CarPartCatalogLookupModal .fitment-preview-item {
  color: var(--gray-800);
  font-size: 13px;
  line-height: 19px;
  padding: var(--spacing-xxs) var(--spacing-xs);
}
.CarPartCatalogLookupModal .analog-preview-item {
  background: var(--gray-100);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  color: var(--gray-800);
  font-size: 13px;
  line-height: 18px;
  padding: var(--spacing-xxs) var(--spacing-xs);
}
.CarPartCatalogLookupModal .analog-preview .fitment-preview-more {
  flex-basis: 100%;
  padding-left: var(--spacing-none);
}
.CarPartCatalogLookupModal .fitment-preview-item.is-hidden,
.CarPartCatalogLookupModal .analog-preview-item.is-hidden {
  display: none;
}
.CarPartCatalogLookupModal .fitment-preview-more {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  padding: var(--spacing-xxs) var(--spacing-xs);
}
.CarPartCatalogLookupModal .fitment-preview-more:hover,
.CarPartCatalogLookupModal .fitment-preview-more:focus {
  color: var(--brand-400);
}
@media (max-width: 640px) {
  .CarPartCatalogLookupModal .reference-content {
    max-height: min(320px, 45vh);
    padding: var(--spacing-sm);
  }
  .CarPartCatalogLookupModal .reference-actions {
    justify-content: stretch;
  }
  .CarPartCatalogLookupModal .reference-actions .match-select {
    width: 100%;
  }
  .CarPartCatalogLookupModal .match-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-md);
  }
  .CarPartCatalogLookupModal .match-content {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .CarPartCatalogLookupModal .match-photo {
    height: 64px;
    width: 64px;
  }
}

/*---------------------------------------------------------------------------*/
/* 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;
  }
}
@media screen and (min-width: 1025px) {
  .CategoryMenuComponent__sheet {
    background-color: #fff;
    margin: var(--spacing-xl) auto var(--spacing-none);
    padding: var(--spacing-none);
    border-radius: 0 0 12px 12px;
  }
  .CategoryMenuComponent__nav {
    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;
  }
  .CategoryMenuComponent__nav::-webkit-scrollbar {
    display: none;
  }
  .CategoryMenuComponent__navDivider {
    display: block;
    height: 6px;
    margin-bottom: var(--spacing-alt-xs);
    border-bottom: 1px solid #eee;
    width: 280px;
  }
  .CategoryMenuComponent__topLink {
    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;
  }
  .CategoryMenuComponent__topLinkLabel {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
  }
  .CategoryMenuComponent__topLinkIcon {
    width: 20px;
    height: 20px;
  }
  .CategoryMenuComponent__submenu {
    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;
  }
  .CategoryMenuComponent__submenu::-webkit-scrollbar {
    display: none;
  }
  .CategoryMenuComponent__submenuLink {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: block;
    padding: var(--spacing-xs) var(--spacing-none);
  }
  .CategoryMenuComponent__submenuLink.CategoryMenuComponent__link--standalone {
    font-weight: 700;
    font-size: 14px;
    padding: var(--spacing-xs) var(--spacing-none);
  }
  .CategoryMenuComponent__row--active .CategoryMenuComponent__topLink {
    color: var(--brand-400);
  }
  .CategoryMenuComponent__row--active .CategoryMenuComponent__topLinkIcon {
    filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
  }
  .CategoryMenuComponent__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;
  }
  .CategoryMenuComponent__pane:last-child {
    padding-right: var(--spacing-none);
  }
  .CategoryMenuComponent__categorySection {
    font-size: 16px;
  }
  .CategoryMenuComponent__subsectionTitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.16px;
    display: block;
    margin-top: var(--spacing-xxs);
  }
  .CategoryMenuComponent__section {
    padding: var(--spacing-xxs) var(--spacing-none) var(--spacing-sm);
  }
}
@media screen and (max-width: 1024px) {
  .CategoryMenuComponent__sheet {
    margin-top: 0;
  }
  .CategoryMenuComponent__nav {
    width: auto;
    background-color: var(--gray-100);
    padding-bottom: var(--spacing-xl);
    padding-top: 0;
  }
  .CategoryMenuComponent__row {
    display: block;
  }
  .CategoryMenuComponent__topLink {
    font-size: var(--font-size-md);
    color: var(--gray-900);
    font-weight: 500;
    line-height: var(--line-height-md);
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--spacing-md);
    border: none;
    letter-spacing: -0.3px;
  }
  .CategoryMenuComponent__topLink--open {
    color: var(--brand-400);
  }
  .CategoryMenuComponent__topLinkLabel {
    font-size: inherit;
    line-height: inherit;
    font-weight: 500 !important;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .CategoryMenuComponent__topLinkIcon {
    width: 24px;
    height: 24px;
  }
  .CategoryMenuComponent__topLinkIcon--leading {
    margin-right: var(--spacing-md);
  }
  .CategoryMenuComponent__topLink .CategoryMenuComponent__topLinkIcon--trailing {
    margin-right: var(--spacing-xxs);
    -webkit-transition: all 0.4s;
    transform: rotate(90deg);
  }
  .CategoryMenuComponent__topLink--open .CategoryMenuComponent__topLinkIcon--trailing {
    transform: rotate(-90deg);
  }
  .CategoryMenuComponent__topLink--open .CategoryMenuComponent__topLinkIcon {
    filter: invert(45%) sepia(51%) saturate(5926%) hue-rotate(190deg) brightness(105%) contrast(106%);
  }
  .CategoryMenuComponent__submenu {
    display: none;
    padding: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-8xl);
  }
  .CategoryMenuComponent__subsectionTitle {
    font-size: 14px;
    line-height: 24px;
    color: var(--gray-900);
    padding: var(--spacing-xxs) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  }
  .CategoryMenuComponent__subsectionTitle .CategoryMenuComponent__submenuLink {
    font-weight: bold;
  }
  .CategoryMenuComponent__categorySectionHeading {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    letter-spacing: -0.3px;
    color: var(--gray-900);
    padding: var(--spacing-none);
    font-weight: 700;
  }
  .CategoryMenuComponent__submenu .CategoryMenuComponent__section {
    padding-left: var(--spacing-lg);
  }
  .CategoryMenuComponent__submenuLink {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--gray-900);
    font-weight: 500 !important;
    display: block;
    padding-top: var(--spacing-alt-xs);
    padding-bottom: var(--spacing-alt-xs);
  }
  .CategoryMenuComponent__submenuLink.CategoryMenuComponent__link--standalone {
    font-weight: 700;
    color: var(--gray-800);
    padding: var(--spacing-xs) var(--spacing-none);
  }
  .CategoryMenuComponent__categorySection {
    padding-top: var(--spacing-sm);
  }
  .CategoryMenuComponent__categorySection:first-child {
    padding-top: 0;
    padding-bottom: var(--spacing-alt-xs);
  }
  .CategoryMenuComponent__row:first-child .CategoryMenuComponent__topLink--open::after {
    margin-top: var(--spacing-sm);
    transform: rotate(-45deg);
  }
}
.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;
}

body.f .CategoryMenuButtonComponent > div {
  width: auto;
  max-width: 1200px;
  margin: auto;
}

@media screen and (max-width: 1270px) {
  .CategoryMenuButtonComponent > div {
    width: auto;
    max-width: 98%;
  }
}
@media screen and (max-width: 1024px) {
  .CategoryMenuButtonComponent {
    display: none;
  }
}
.CategorySelectionGridComponent {
  --content-nav-gap: calc(var(--spacing-lg) - 8px);
  --content-nav-gap-mobile: calc(var(--spacing-md) - 8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionGridComponent {
    padding: var(--spacing-none) var(--spacing-lg);
  }
}
.CategorySelectionGridComponent h1 {
  color: var(--gray-900);
  font-size: var(--font-size-3xl);
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: var(--spacing-6xl);
  margin-top: var(--spacing-xl);
}
@media screen and (max-width: 1024px) {
  .CategorySelectionGridComponent h1 {
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-xl);
    font-size: 22px;
    font-style: normal;
    line-height: var(--line-height-xl);
  }
}
.CategorySelectionGridComponent__frequent-title {
  color: var(--gray-900);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-xl);
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__frequent-title {
    font-size: 18px;
    font-style: normal;
    line-height: 26px;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__separator {
    display: none !important;
  }
}
.CategorySelectionGridComponent__content nav {
  display: flex;
  width: calc(100% + 4px);
  margin: calc(-1 * 4px / 2);
  gap: var(--content-nav-gap);
  flex-wrap: wrap;
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__content nav {
    gap: var(--content-nav-gap-mobile);
  }
}
.CategorySelectionGridComponent__category-tile {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc((100% - 3 * var(--content-nav-gap)) / 4);
  padding: 0;
  overflow: hidden;
  border: 4px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  outline: 2px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.CategorySelectionGridComponent__category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  transform: translateX(10%);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease-out;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.12) 44%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.12) 56%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0) 72%);
  background-size: 125% 125%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
}
@media (hover: hover) {
  .CategorySelectionGridComponent__category-tile:hover {
    border-color: var(--gray-100);
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.16);
  }
  .CategorySelectionGridComponent__category-tile:hover::after {
    opacity: 1;
    transform: translateX(0);
  }
}
.CategorySelectionGridComponent__category-tile:focus-visible {
  outline-color: var(--brand-400);
  border-color: var(--gray-100);
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.16);
}
.CategorySelectionGridComponent__category-tile:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .CategorySelectionGridComponent__category-tile {
    transition: none;
  }
  .CategorySelectionGridComponent__category-tile::after {
    transform: none;
    transition: none;
  }
  .CategorySelectionGridComponent__category-tile .CategorySelectionGridComponent__category-tile-title {
    transition: none;
  }
  .CategorySelectionGridComponent__category-tile:hover .CategorySelectionGridComponent__category-tile-img, .CategorySelectionGridComponent__category-tile:focus-visible .CategorySelectionGridComponent__category-tile-img, .CategorySelectionGridComponent__category-tile:hover .CategorySelectionGridComponent__category-tile-title, .CategorySelectionGridComponent__category-tile:focus-visible .CategorySelectionGridComponent__category-tile-title {
    transform: none;
    transition: none;
  }
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__category-tile {
    width: calc((100% - var(--content-nav-gap-mobile)) / 2);
  }
}
@media screen and (max-width: 428px) {
  .CategorySelectionGridComponent__category-tile {
    width: 100%;
  }
}
.CategorySelectionGridComponent__mobile-title {
  display: none;
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  margin: 0 0 var(--spacing-md) 0;
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__mobile-title {
    display: block;
  }
}
.CategorySelectionGridComponent__category-tile-body {
  display: block;
  background-color: var(--gray-300);
  border-radius: inherit;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionGridComponent__category-tile-body {
    padding-top: 20px;
  }
}
@media screen and (max-width: 428px) {
  .CategorySelectionGridComponent__category-tile-body {
    padding-top: var(--spacing-none);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
}
.CategorySelectionGridComponent__category-tile--services::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--spacing-lg);
  bottom: var(--spacing-xl);
  z-index: 1;
  width: 33%;
  background-image: url("/img/grid-categories/services-top-bg.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  pointer-events: none;
}
@media screen and (max-width: 428px) {
  .CategorySelectionGridComponent__category-tile--services::before {
    width: 40px;
  }
}
@media screen and (max-width: 1024px) {
  .CategorySelectionGridComponent__category-tile--autoparts {
    word-break: break-all;
  }
}
.CategorySelectionGridComponent__category-tile--autoparts .CategorySelectionGridComponent__category-tile-title {
  max-width: calc(100% - var(--spacing-2xl));
}
.CategorySelectionGridComponent__category-tile-img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translateX(0) scale(1);
  transition: transform 0.15s ease-out;
}
@media screen and (max-width: 428px) {
  .CategorySelectionGridComponent__category-tile-img {
    width: unset;
    height: 80px;
  }
}
.CategorySelectionGridComponent__category-tile-title {
  position: absolute;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  max-width: 49%;
  z-index: 2;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-sm);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.15s ease-out;
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__category-tile-title {
    top: var(--spacing-md);
    left: var(--spacing-md);
    font-size: var(--font-size-xs, 13px);
    letter-spacing: -0.26px;
  }
}
.CategorySelectionGridComponent__mobile-toolbar {
  height: 36px;
  padding: 0 var(--spacing-sm);
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-right: -20px;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionGridComponent__mobile-toolbar {
    display: flex;
  }
}
.CategorySelectionGridComponent__mobile-toolbar a {
  width: 36px;
  height: 100%;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}
.CategorySelectionGridComponent__mobile-toolbar img {
  width: 24px;
  height: 24px;
  display: block;
}
.CategorySelectionGridComponent__history {
  padding: var(--spacing-4xl) 0;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionGridComponent__history {
    padding-top: var(--spacing-10xl);
    padding-bottom: var(--spacing-10xl);
  }
}
.CategorySelectionGridComponent__history nav {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.CategorySelectionGridComponent__history nav a {
  display: flex;
  padding: var(--spacing-sm) var(--spacing-md);
  align-items: center;
  gap: var(--spacing-alt-xs);
  border-radius: var(--spacing-sm);
  background: var(--gray-300);
  color: var(--gray-800);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  flex-wrap: wrap;
  position: relative;
  transition: background-color 0.15s ease-in-out;
}
@media screen and (min-width: 821px) {
  .CategorySelectionGridComponent__history nav a:hover {
    background-color: var(--gray-400);
  }
}
.CategorySelectionGridComponent__history nav a span {
  color: inherit;
  white-space: nowrap;
}
.CategorySelectionGridComponent__history nav a span:first-child {
  opacity: 0.8;
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__history {
    display: none;
  }
}
.CategorySelectionGridComponent__history-mobile {
  display: none;
}
@media screen and (max-width: 820px) {
  .CategorySelectionGridComponent__history-mobile {
    display: block;
    margin-bottom: var(--spacing-2xl);
  }
}
.CategorySelectionGridComponent__history-mobile nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--spacing-sm);
  width: auto;
  max-width: none;
  margin: var(--spacing-none);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.CategorySelectionGridComponent__history-mobile nav::-webkit-scrollbar {
  display: none;
}
.CategorySelectionGridComponent__history-mobile nav a {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  box-sizing: border-box;
  padding: var(--spacing-xs) var(--spacing-alt-sm) var(--spacing-alt-xs) var(--spacing-alt-sm);
  border-radius: var(--radius-sm);
  background-color: var(--gray-300);
  color: var(--gray-800);
  font-weight: 500;
  letter-spacing: -0.26px;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}
@media (hover: hover) {
  .CategorySelectionGridComponent__history-mobile nav a:hover {
    background-color: var(--gray-400);
  }
}
.CategorySelectionGridComponent__history-mobile nav a span {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CategorySelectionGridComponent__history-mobile nav a span:first-child {
  font-size: var(--font-size-tiny);
  line-height: var(--line-height-tiny);
  opacity: 0.8;
}
.CategorySelectionGridComponent__history-mobile nav a span:last-child {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: 500;
}

@keyframes showSpanDelayed {
  0% {
    opacity: 0;
    position: absolute;
  }
  1% {
    position: static;
  }
  100% {
    position: static;
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes searchResultsReveal {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--spacing-sm)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.CategorySelectionTreeComponent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.CategorySelectionTreeComponent h1 {
  margin-top: -16px;
  margin-bottom: var(--spacing-xl);
  color: #1A1D3E;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: var(--line-height-2xl);
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent h1 {
    display: none;
  }
}
.CategorySelectionTreeComponent img {
  width: 24px;
  height: 24px;
  display: block;
}
.CategorySelectionTreeComponent span {
  font-size: inherit;
}
.CategorySelectionTreeComponent__tree {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-alt-sm);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--spacing-lg);
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__tree {
    padding: var(--spacing-md);
    padding-top: var(--spacing-xs);
  }
}
.CategorySelectionTreeComponent__tree:has(.CategorySelectionTreeComponent__level:nth-child(4) .CategorySelectionTreeComponent--active) .CategorySelectionTreeComponent__level:first-child {
  width: 44px;
}
.CategorySelectionTreeComponent__tree:has(.CategorySelectionTreeComponent__level:nth-child(4) .CategorySelectionTreeComponent--active) .CategorySelectionTreeComponent__level:first-child a {
  padding-right: var(--spacing-alt-sm);
}
.CategorySelectionTreeComponent__tree:has(.CategorySelectionTreeComponent__level:nth-child(4) .CategorySelectionTreeComponent--active) .CategorySelectionTreeComponent__level:first-child a span {
  display: none;
}
.CategorySelectionTreeComponent__tree:has(.CategorySelectionTreeComponent__level:nth-child(4) .CategorySelectionTreeComponent--active) .CategorySelectionTreeComponent__level:first-child a::after {
  display: none;
}
.CategorySelectionTreeComponent__tree nav {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__tree nav {
    gap: var(--spacing-lg);
  }
}
.CategorySelectionTreeComponent__tree nav.CategorySelectionTreeComponent--active, .CategorySelectionTreeComponent__tree nav:has(.CategorySelectionTreeComponent--active) {
  display: flex;
}
.CategorySelectionTreeComponent__tree nav a {
  width: 100%;
  display: flex;
  position: relative;
  padding: var(--spacing-alt-sm) var(--spacing-3xl) var(--spacing-alt-sm) var(--spacing-alt-sm);
  align-items: center;
  gap: var(--spacing-alt-sm);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  box-sizing: border-box;
  color: var(--gray-700);
  min-height: 44px;
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__tree nav a {
    color: var(--gray-900);
    min-height: 40px;
    font-size: 16px;
    padding: var(--spacing-sm) var(--spacing-3xl) var(--spacing-sm) var(--spacing-sm);
  }
}
.CategorySelectionTreeComponent__tree nav a::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  right: var(--spacing-alt-xs);
  top: calc(50% - 10px);
  background-image: url("/img/nav-chevron-right-dark.svg");
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.3s ease-in-out;
}
.CategorySelectionTreeComponent__tree nav a:hover {
  background: var(--gray-300);
}
.CategorySelectionTreeComponent__tree nav a:hover::after {
  right: var(--spacing-alt-xs);
  opacity: 1;
}
.CategorySelectionTreeComponent__tree nav a.CategorySelectionTreeComponent--active {
  color: var(--brand-400);
  background: var(--brand-200);
}
.CategorySelectionTreeComponent__tree nav a.CategorySelectionTreeComponent--active::after {
  opacity: 1;
  background-image: url("/img/nav-chevron-right-blue.svg");
}
.CategorySelectionTreeComponent__tree nav a.CategorySelectionTreeComponent--active img {
  filter: invert(26%) sepia(98%) saturate(4882%) hue-rotate(201deg) brightness(101%) contrast(103%);
}
.CategorySelectionTreeComponent__level {
  display: none;
  width: calc((100% - 44px - 3 * var(--spacing-alt-sm)) / 3);
}
.CategorySelectionTreeComponent__level:first-child {
  display: block;
}
.CategorySelectionTreeComponent__level:first-child nav {
  display: flex;
}
@media screen and (min-width: 821px) {
  .CategorySelectionTreeComponent__level:first-child:has(img) span {
    opacity: 0;
    position: absolute;
    left: var(--spacing-7xl);
    pointer-events: none;
    animation: showSpanDelayed 0s ease 0s forwards;
    pointer-events: auto;
  }
}
.CategorySelectionTreeComponent__level:has(.CategorySelectionTreeComponent--active) {
  display: block;
}
@media screen and (min-width: 821px) {
  .CategorySelectionTreeComponent__level:has(.CategorySelectionTreeComponent--active):not(:first-child) nav {
    animation: slideIn 0s ease;
  }
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__level {
    width: 100%;
    display: none;
  }
  .CategorySelectionTreeComponent__level:first-child {
    display: block;
  }
  .CategorySelectionTreeComponent__level:has(nav.CategorySelectionTreeComponent--active) {
    display: block;
  }
  .CategorySelectionTreeComponent__level:has(~ .CategorySelectionTreeComponent__level nav.CategorySelectionTreeComponent--active) {
    display: none;
  }
}
.CategorySelectionTreeComponent__mobile-toolbar {
  height: 36px;
  padding: 0 var(--spacing-sm);
  display: none;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__mobile-toolbar {
    display: flex;
  }
}
.CategorySelectionTreeComponent__mobile-toolbar a {
  width: 36px;
  height: 100%;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}
.CategorySelectionTreeComponent__mobile-title {
  display: none;
  padding: var(--spacing-sm) var(--spacing-xl);
  color: var(--gray-900);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-4xl);
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__mobile-title {
    display: block;
  }
}
.CategorySelectionTreeComponent__search {
  margin-bottom: var(--spacing-lg);
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__search {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    margin-bottom: var(--spacing-none);
  }
}
.CategorySelectionTreeComponent__search-results {
  position: relative;
  display: none;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--body-content-height-with-secondary-header) - 210px);
  padding-bottom: calc(70px - var(--spacing-lg));
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__search-results {
    padding-top: var(--spacing-sm);
    padding-bottom: calc(100px - var(--spacing-lg));
    min-height: calc(var(--body-content-height-with-secondary-header) - 170px);
  }
}
.CategorySelectionTreeComponent__content:has(a.CategorySelectionTreeComponent__search-result) .CategorySelectionTreeComponent__search-results, .CategorySelectionTreeComponent__content:has(.CategorySelectionTreeComponent__search-empty-state--visible) .CategorySelectionTreeComponent__search-results {
  display: block;
  animation: searchResultsReveal 0.35s ease-out both;
}
.CategorySelectionTreeComponent__content:has(a.CategorySelectionTreeComponent__search-result) .CategorySelectionTreeComponent__tree, .CategorySelectionTreeComponent__content:has(.CategorySelectionTreeComponent__search-empty-state--visible) .CategorySelectionTreeComponent__tree {
  display: none;
}
.CategorySelectionTreeComponent__search-results-title {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
  text-align: left;
}
.CategorySelectionTreeComponent__search-results-title--hidden {
  display: none;
}
.CategorySelectionTreeComponent__search-fallback-title {
  display: none;
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: -0.34px;
  text-align: left;
}
.CategorySelectionTreeComponent__search-fallback-title--visible {
  display: block;
}
.CategorySelectionTreeComponent__content:has(.CategorySelectionTreeComponent__search-empty-state--visible) .CategorySelectionTreeComponent__search-results-title,
.CategorySelectionTreeComponent__content:has(.CategorySelectionTreeComponent__search-empty-state--visible) .CategorySelectionTreeComponent__search-results-footer,
.CategorySelectionTreeComponent__content:has(.CategorySelectionTreeComponent__search-empty-state--visible) .CategorySelectionTreeComponent__search-results-nav,
.CategorySelectionTreeComponent__content:has(.CategorySelectionTreeComponent__search-empty-state--visible) .CategorySelectionTreeComponent__search-fallback-nav {
  display: none;
}
.CategorySelectionTreeComponent__search-results-nav, .CategorySelectionTreeComponent__search-fallback-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 360px;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__search-results-nav, .CategorySelectionTreeComponent__search-fallback-nav {
    max-width: 100%;
  }
}
.CategorySelectionTreeComponent__search-results-footer {
  position: absolute;
  right: 0;
  bottom: calc(var(--spacing-4xl) - var(--spacing-lg));
  left: 0;
  text-align: left;
}
.CategorySelectionTreeComponent__search-empty-state {
  display: none;
  min-height: calc(var(--body-content-height-with-secondary-header) - 240px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.CategorySelectionTreeComponent__search-empty-state--visible {
  display: flex;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__search-empty-state {
    min-height: calc(var(--body-content-height-with-secondary-header) - 190px);
    padding-bottom: var(--spacing-4xl);
  }
}
.CategorySelectionTreeComponent__search-empty-state-img {
  width: 200px;
  height: 200px;
  margin-bottom: var(--spacing-4xl);
}
.CategorySelectionTreeComponent__search-empty-state-img img {
  width: 200px;
  height: 200px;
}
@media screen and (max-width: 1024px) {
  .CategorySelectionTreeComponent__search-empty-state-img {
    width: 96px;
    height: 96px;
  }
  .CategorySelectionTreeComponent__search-empty-state-img img {
    width: 96px;
    height: 96px;
  }
}
.CategorySelectionTreeComponent__search-empty-state-title {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-md);
  margin-bottom: var(--spacing-sm);
}
.CategorySelectionTreeComponent__search-empty-state-description {
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: var(--line-height-sm);
}
.CategorySelectionTreeComponent__search-empty-state-description a {
  color: var(--brand-400);
  font-weight: 500;
  text-decoration: none;
}
.CategorySelectionTreeComponent__search-empty-state-description a:visited {
  color: var(--brand-400);
  text-decoration: none;
}
.CategorySelectionTreeComponent__search-empty-state-description-text {
  color: var(--gray-800);
}
.CategorySelectionTreeComponent__search-results-footer-prompt {
  color: var(--text-200, #3d3d46);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.CategorySelectionTreeComponent a.CategorySelectionTreeComponent__search-results-manual {
  color: var(--brand-400);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
  text-decoration: underline solid;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
  transition: color 0.2s, background-color 0.2s;
}
.CategorySelectionTreeComponent a.CategorySelectionTreeComponent__search-results-manual:visited {
  color: var(--brand-400);
  text-decoration: underline solid;
  text-decoration-color: currentColor;
}
@media (hover: hover) {
  .CategorySelectionTreeComponent a.CategorySelectionTreeComponent__search-results-manual:hover {
    color: var(--brand-500);
  }
}
.CategorySelectionTreeComponent__search-empty-state-description a.CategorySelectionTreeComponent__search-results-manual, .CategorySelectionTreeComponent__search-empty-state-description a.CategorySelectionTreeComponent__search-results-manual:visited {
  text-decoration: none;
}
.CategorySelectionTreeComponent__search-result {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-lg) 0;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0;
  text-align: left;
  border-radius: var(--spacing-none);
  border: none;
  border-bottom: 1px solid var(--gray-400);
  background: transparent;
  background-color: transparent;
  color: var(--gray-800);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  flex-wrap: wrap;
  position: relative;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}
.CategorySelectionTreeComponent__search-result:last-child {
  border-bottom-width: 0;
}
.CategorySelectionTreeComponent__search-result::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  right: 0;
  top: calc(50% - 12px);
  background-image: url("/img/nav-chevron-right-dark.svg");
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.15s ease-in-out;
}
@media (hover: hover) {
  .CategorySelectionTreeComponent__search-result:hover {
    background-color: transparent;
  }
  .CategorySelectionTreeComponent__search-result:hover::after {
    opacity: 1;
  }
}
.CategorySelectionTreeComponent__search-result:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}
.CategorySelectionTreeComponent__search-result:focus-visible::after {
  opacity: 1;
}
.CategorySelectionTreeComponent__search-result-meta, .CategorySelectionTreeComponent__search-result-name {
  color: inherit;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  align-self: flex-start;
}
.CategorySelectionTreeComponent__search-result-meta {
  color: var(--gray-600);
  font-size: var(--font-size-xxs);
  font-weight: 400;
  line-height: var(--line-height-alt-xs);
  letter-spacing: 0;
}
.CategorySelectionTreeComponent__search-result-name {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: 0;
}
.CategorySelectionTreeComponent__search-form {
  display: block;
}
.CategorySelectionTreeComponent__search-input-wrap {
  position: relative;
  margin-bottom: var(--spacing-sm);
}
.CategorySelectionTreeComponent__search-empty {
  min-height: var(--spacing-lg);
}
.CategorySelectionTreeComponent__search-empty-message {
  display: block;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(calc(-1 * var(--spacing-xs)));
  transition: max-height 0.3s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  color: var(--gray-600);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: -0.24px;
  text-indent: 3px;
}
.CategorySelectionTreeComponent__search-empty-message--visible {
  max-height: 8rem;
  opacity: 1;
  transform: translateY(0);
}
.CategorySelectionTreeComponent__search-loading {
  display: block;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--spacing-xs)));
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
  color: var(--gray-600);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: 0;
  text-indent: 3px;
}
.CategorySelectionTreeComponent__search-loading--visible {
  max-height: 2rem;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s;
}
.CategorySelectionTreeComponent__search-clear {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) translateX(var(--spacing-xs));
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
  visibility: hidden;
}
.CategorySelectionTreeComponent__search-clear img {
  width: 20px;
  height: 20px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.CategorySelectionTreeComponent__search-clear:hover {
  background: none;
}
.CategorySelectionTreeComponent__search-clear:hover img {
  opacity: 1;
}
.CategorySelectionTreeComponent .CategorySelectionTreeComponent__search-input-wrap:has(input[type=text].CategorySelectionTreeComponent__search-input:not(:placeholder-shown)) .CategorySelectionTreeComponent__search-clear {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s;
}
.CategorySelectionTreeComponent input[type=text].CategorySelectionTreeComponent__search-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: auto;
  min-height: unset;
  padding: var(--spacing-alt-md) 50px var(--spacing-alt-md) var(--spacing-lg);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--gray-300);
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: calc(var(--line-height-md) - 2px);
  letter-spacing: -0.34px;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}
.CategorySelectionTreeComponent input[type=text].CategorySelectionTreeComponent__search-input:focus, .CategorySelectionTreeComponent input[type=text].CategorySelectionTreeComponent__search-input:not(:placeholder-shown) {
  border-color: var(--gray-900);
  background: var(--gray-100);
}
.CategorySelectionTreeComponent input[type=text].CategorySelectionTreeComponent__search-input::placeholder {
  color: var(--gray-500);
}
.CategorySelectionTreeComponent--animated .CategorySelectionTreeComponent__level {
  transition: width linear 0.2s;
}
.CategorySelectionTreeComponent--animated .CategorySelectionTreeComponent__level:first-child span {
  animation-duration: 0.15s;
  animation-delay: 0.2s;
}
@media screen and (min-width: 821px) {
  .CategorySelectionTreeComponent--animated .CategorySelectionTreeComponent__level:has(.CategorySelectionTreeComponent--active):not(:first-child) nav {
    animation-duration: 0.25s;
  }
}

@media screen and (max-width: 1024px) {
  #main:has(.CategorySelectionTreeComponent) .step-widget-wrapper {
    display: none;
  }
  #main:has(.CategorySelectionTreeComponent) .step-widget-wrapper:empty {
    display: none;
  }
}

.ChatViewComponent.ChatViewComponent {
  padding-top: var(--spacing-10xl);
}

.ChatViewComponent .msg {
  position: relative;
  z-index: 0;
}

.ChatViewComponent .msg.is-reaction-picker-open,
.ChatViewComponent .msg:hover {
  z-index: 20;
}

.ChatViewComponent .msg .r .msg_b {
  -webkit-user-select: text;
  user-select: text;
}

@media (hover: none) and (pointer: coarse) {
  .ChatViewComponent .msg .r .msg_b {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}
.ChatViewComponent .chatReactionQuickBar {
  position: absolute;
  bottom: calc(100% + var(--spacing-alt-xs));
  left: auto;
  right: 0;
  z-index: 3;
  display: none;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-alt-xs) var(--spacing-alt-sm);
  border: 1px solid var(--gray-400);
  border-radius: 999px;
  background: var(--brand-100);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 28px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px) saturate(1.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}

.ChatViewComponent .chatReactionQuickBar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--spacing-md));
  left: 0;
  height: var(--spacing-md);
}

.ChatViewComponent .msg.is-reaction-quickbar-below .chatReactionQuickBar {
  top: calc(100% + var(--spacing-alt-xs));
  bottom: auto;
}

.ChatViewComponent .msg.is-reaction-quickbar-below .chatReactionQuickBar::after {
  top: calc(-1 * var(--spacing-md));
  bottom: auto;
}

.ChatViewComponent .msg.y .chatReactionQuickBar {
  left: 0;
  right: auto;
  transform: translate(0, 6px);
}

.ChatViewComponent .msg.m .chatReactionQuickBar {
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}

.ChatViewComponent .chatReactionQuickBar__button,
.chatReactionPicker__button,
.ChatViewComponent .chatMessageReactions__button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.ChatViewComponent .chatReactionQuickBar__button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border-radius: 999px;
  font-size: var(--font-size-xl);
  line-height: 1;
}

.ChatViewComponent .chatReactionQuickBar__emojiAsset {
  display: block;
  width: 27px;
  height: 27px;
  font-size: var(--font-size-xl);
  line-height: 27px;
  text-align: center;
  pointer-events: none;
}

.ChatViewComponent .chatReactionQuickBar__button:hover,
.chatReactionPicker__button:hover {
  background: transparent;
}

.ChatViewComponent .chatReactionQuickBar__button--copy {
  position: relative;
  margin-left: var(--spacing-alt-xs);
  color: var(--gray-800);
  font-size: 0;
}

.ChatViewComponent .chatReactionQuickBar__button--copy::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -7px;
  width: 1px;
  background: var(--gray-400);
}

.ChatViewComponent .chatReactionQuickBar__copyIcon {
  position: relative;
  display: block;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  pointer-events: none;
}

.ChatViewComponent .chatReactionQuickBar__copyIcon::before,
.ChatViewComponent .chatReactionQuickBar__copyIcon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 12px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
  background: var(--brand-100);
  box-sizing: border-box;
}

.ChatViewComponent .chatReactionQuickBar__copyIcon::before {
  top: 2px;
  left: 6px;
  opacity: 0.55;
}

.ChatViewComponent .chatReactionQuickBar__copyIcon::after {
  top: 5px;
  left: 3px;
}

.ChatViewComponent .chatReactionQuickBar__copyLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ChatViewComponent .chatReactionQuickBar__button--copy.is-copied {
  color: var(--success-500);
}

.ChatViewComponent .chatReactionQuickBar__button--expand {
  position: relative;
  margin-left: var(--spacing-alt-xs);
  color: var(--gray-800);
  font-size: 0;
}

.ChatViewComponent .chatReactionQuickBar__expandIcon {
  display: block;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  transform: rotate(-90deg);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .ChatViewComponent .msg .msg_flow:hover > .chatReactionQuickBar {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0);
  }
  .ChatViewComponent .msg.y .msg_flow:hover > .chatReactionQuickBar {
    transform: translate(0, 0);
  }
  .ChatViewComponent.has-reaction-picker-open .msg .msg_flow:hover > .chatReactionQuickBar,
  .ChatViewComponent .msg.is-reaction-picker-open .msg_flow:hover > .chatReactionQuickBar {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
}
.chatReactionPicker {
  position: fixed;
  overscroll-behavior: contain;
  z-index: 10000;
  width: 288px;
  max-width: min(288px, 100vw - 38px);
  max-height: min(336px, 100vh - 20px);
  padding: var(--spacing-alt-sm);
  overflow: hidden;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-2xl);
  background: var(--brand-100);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 36px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px) saturate(1.2);
  animation: chatReactionPickerIn 0.16s ease-out;
  box-sizing: border-box;
}

@keyframes chatReactionPickerIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.chatReactionPicker__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--spacing-alt-xs);
}

.chatReactionPicker__grid--default {
  flex: 0 0 auto;
  padding-bottom: var(--spacing-alt-sm);
  margin-bottom: var(--spacing-alt-sm);
  border-bottom: 1px solid var(--gray-400);
}

.chatReactionPicker__title {
  flex: 0 0 auto;
  margin: 0 0 var(--spacing-md);
  color: var(--gray-700);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--line-height-sm);
}

.chatReactionPicker__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-x: hidden;
  max-height: 192px;
  padding-right: var(--spacing-xs);
}

.chatReactionPicker__button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0 !important;
  border-radius: var(--radius-alt-sm);
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.12s ease, transform 0.12s ease;
  animation: chatReactionEmojiPop 0.18s ease-out both;
}

.chatReactionPicker__button:focus,
.chatReactionPicker__button:focus-visible {
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
}

.chatReactionPicker__emojiAsset {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

.chatReactionPicker__emojiAsset--static {
  font-size: 22px;
  line-height: 27px;
  text-align: center;
}

.chatReactionPicker__emojiAsset--custom,
.ChatViewComponent .chatMessageReactions__emojiStatic--custom {
  image-rendering: pixelated;
}

.chatReactionPicker__emojiAsset--custom.chatReactionCustomLogo,
.ChatViewComponent .chatMessageReactions__emojiStatic--custom.chatReactionCustomLogo {
  image-rendering: auto;
}

.chatReactionPicker__button .chatReactionPicker__emojiAsset--static {
  transition: none;
}

.chatReactionPicker__button.is-lottie-ready .chatReactionPicker__emojiAsset--static {
  opacity: 0;
}

.chatReactionPicker__emojiAsset--lottie {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
}

.chatReactionPicker__button.is-lottie-playing .chatReactionPicker__emojiAsset--lottie {
  opacity: 1;
}

.chatReactionPicker__emojiAsset--lottie svg {
  display: block;
  width: 27px !important;
  height: 27px !important;
}

.chatReactionPicker__button:active {
  transform: scale(0.92);
}

@media (hover: hover) and (pointer: fine) {
  .chatReactionPicker__button:hover {
    transform: scale(1.18);
  }
}
@keyframes chatReactionEmojiPop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.ChatViewComponent .chatMessageReactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
  grid-column: 1/3;
  grid-row: 2;
  justify-self: start;
  max-width: 100%;
  margin-top: var(--spacing-xs);
}

.ChatViewComponent .msg.m .chatMessageReactions {
  justify-self: end;
  justify-content: flex-end;
}

.ChatViewComponent .chatMessageReactions__button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  min-height: 19px;
  padding: 1px var(--spacing-alt-xs);
  border: 1px solid var(--brand-400);
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-500);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
}

.ChatViewComponent .chatMessageReactions__button.is-own-reaction {
  border-color: var(--brand-400);
  background: var(--brand-200);
  color: var(--brand-500);
}

.ChatViewComponent .chatMessageReactions__emojiAsset {
  display: block;
  position: relative;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  object-fit: contain;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-alt-xs);
  text-align: center;
  pointer-events: none;
}

.ChatViewComponent .chatMessageReactions__emojiStatic {
  display: block;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  object-fit: contain;
}

.ChatViewComponent .chatMessageReactions__emojiAsset.is-message-reaction-playing .chatMessageReactions__emojiStatic {
  opacity: 0;
}

.ChatViewComponent .chatMessageReactions__emojiLottie {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--spacing-lg);
  height: var(--spacing-lg);
}

.ChatViewComponent .chatMessageReactions__emojiLottie svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
}

.chatMessageCopyToast {
  position: fixed;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  left: 50%;
  z-index: 10001;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 999px;
  background: rgba(19, 19, 21, 0.92);
  color: var(--gray-100);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: var(--line-height-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.chatMessageCopyToast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

body.has-chat-reaction-full-picker-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.ChatViewComponent.has-reaction-full-picker-open {
  overflow: hidden !important;
}

body.has-chat-reaction-mobile-open {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.chatReactionMobileBackdrop {
  position: fixed;
  top: var(--chat-reaction-mobile-backdrop-top, 0);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  background: radial-gradient(circle at 78% 72%, rgba(37, 99, 235, 0.28), transparent 34%), radial-gradient(circle at 24% 48%, rgba(103, 58, 183, 0.16), transparent 36%), rgba(8, 10, 20, 0.52);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  animation: chatReactionMobileBackdropIn 0.16s ease-out both;
}

@media screen and (max-width: 1024px) {
  .ChatViewComponent.has-mobile-reaction-open::before {
    content: "";
    position: fixed;
    top: var(--chat-reaction-mobile-backdrop-top, 0);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: radial-gradient(circle at 78% 68%, rgba(37, 99, 235, 0.18), transparent 34%), radial-gradient(circle at 25% 48%, rgba(103, 58, 183, 0.1), transparent 36%), rgba(8, 10, 20, 0.22);
    pointer-events: none;
    animation: chatReactionMobileBackdropIn 0.16s ease-out both;
  }
  .ChatViewComponent .msg.is-reaction-long-pressing,
  .ChatViewComponent .msg.is-reaction-mobile-open {
    z-index: 40;
  }
  .ChatViewComponent.has-mobile-reaction-open .msg:not(.is-reaction-mobile-open) {
    pointer-events: none;
  }
  .ChatViewComponent.has-mobile-reaction-open .msg.is-reaction-mobile-open {
    pointer-events: auto;
  }
  .ChatViewComponent .msg.is-reaction-long-pressing .msg_flow {
    transform-origin: center bottom;
    animation: chatReactionLongPressPulse 0.42s cubic-bezier(0.2, 0.9, 0.2, 1) both;
    transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.16s ease;
    will-change: transform;
  }
  .ChatViewComponent .msg.is-reaction-mobile-open .msg_flow {
    transform: scale(1.025);
    animation: chatReactionMobileOpenBounce 0.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  }
  .ChatViewComponent .msg.is-reaction-mobile-open .msg_flow > .chatReactionQuickBar {
    display: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0);
    z-index: 45;
  }
  .ChatViewComponent .msg.is-reaction-mobile-open.is-reaction-mobile-positioned .msg_flow > .chatReactionQuickBar {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
  .ChatViewComponent .msg.is-reaction-mobile-open .chatReactionQuickBar {
    bottom: calc(100% + var(--spacing-alt-xs));
    max-width: calc(100vw - 24px);
  }
  .ChatViewComponent .msg.is-reaction-mobile-open.is-reaction-quickbar-below .chatReactionQuickBar {
    top: calc(100% + var(--spacing-alt-xs));
    bottom: auto;
  }
  .ChatViewComponent .msg.y.is-reaction-mobile-open .chatReactionQuickBar {
    left: 0;
    right: auto;
  }
  .ChatViewComponent .msg.m.is-reaction-mobile-open .chatReactionQuickBar {
    left: auto;
    right: 0;
  }
  .ChatViewComponent .msg.is-reaction-mobile-open .chatReactionQuickBar__button {
    touch-action: manipulation;
  }
}
@keyframes chatReactionLongPressPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.975);
  }
  72% {
    transform: scale(1.018);
  }
  100% {
    transform: scale(1.025);
  }
}
@keyframes chatReactionMobileOpenBounce {
  0% {
    transform: scale(1.025);
  }
  55% {
    transform: scale(1.045);
  }
  100% {
    transform: scale(1.025);
  }
}
@keyframes chatReactionMobileBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ChatReplyInputComponent {
  --chat-reply-textarea-min-height: var(--spacing-2xl);
  --chat-reply-textarea-max-height: calc(var(--spacing-14xl) + var(--spacing-9xl) + var(--spacing-xs));
  --chat-reply-textarea-padding-y: var(--spacing-md);
  --chat-reply-textarea-padding-x: var(--spacing-xs);
}
.ChatReplyInputComponent__composer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-xs);
  min-height: 52px;
  max-height: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 24px;
  background: var(--gray-300);
  box-sizing: border-box;
  overflow: hidden;
}
.ChatReplyInputComponent__composer.is-focused, .ChatReplyInputComponent__composer.has-attachments {
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-900) !important;
}
.ChatReplyInputComponent__composer.has-text {
  border: 1px solid var(--gray-900);
}
.ChatReplyInputComponent__composer.has-link-preview {
  min-height: 116px;
  gap: var(--spacing-sm);
  padding: var(--spacing-alt-sm) var(--spacing-xl) var(--spacing-sm);
  border: 1px solid var(--gray-900);
  background: var(--gray-100);
}
.ChatReplyInputComponent__composer-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  min-width: 0;
}
.ChatReplyInputComponent__link-preview {
  display: none;
  width: 100%;
  min-width: 0;
}
.ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__link-preview {
  display: block;
}
.ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__link-preview .ChatLinkPreviewCardComponent {
  align-items: center;
  gap: var(--spacing-lg);
  max-width: 100%;
  min-height: var(--spacing-8xl);
  padding: var(--spacing-md);
  border: 0;
  border-bottom: 1px solid var(--gray-400);
  border-radius: 0;
  background: transparent;
}
.ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__link-preview .ChatLinkPreviewCardComponent__image {
  order: -1;
  flex: 0 0 var(--spacing-8xl);
  width: var(--spacing-8xl);
  height: var(--spacing-8xl);
}
.ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__link-preview .ChatLinkPreviewCardComponent__site {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: var(--line-height-md);
}
.ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__link-preview .ChatLinkPreviewCardComponent__title {
  color: var(--gray-800);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-md);
  -webkit-line-clamp: 1;
}
.ChatReplyInputComponent__link-preview .ChatLinkPreviewCardComponent {
  max-width: 100%;
}
.ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__composer-row {
  min-height: var(--spacing-6xl);
}
.ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__input-wrap textarea, .ChatReplyInputComponent__composer.has-link-preview .ChatReplyInputComponent__input-wrap textarea.TextAreaComponent {
  white-space: pre;
  overflow-x: hidden;
}
.ChatReplyInputComponent__input-wrap {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding-right: 48px;
  box-sizing: border-box;
}
.ChatReplyInputComponent__input-wrap .textareaWrapper, .ChatReplyInputComponent__input-wrap .TextAreaComponent, .ChatReplyInputComponent__input-wrap .TextAreaFormElementNew {
  display: flex;
  align-items: center;
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 22px;
  margin: 0;
  background: transparent;
  overflow: hidden;
}
.ChatReplyInputComponent__input-wrap .textareaWrapper {
  width: auto !important;
}
.ChatReplyInputComponent__input-wrap textarea, .ChatReplyInputComponent__input-wrap textarea.TextAreaComponent {
  display: block;
  width: 100% !important;
  min-height: var(--chat-reply-textarea-min-height);
  height: auto;
  max-height: var(--chat-reply-textarea-max-height);
  box-sizing: border-box;
  padding: var(--chat-reply-textarea-padding-y) var(--chat-reply-textarea-padding-x);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  resize: none;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}
.ChatReplyInputComponent__input-wrap textarea::placeholder, .ChatReplyInputComponent__input-wrap textarea.TextAreaComponent::placeholder {
  color: var(--gray-500);
  opacity: 1;
}
.ChatReplyInputComponent__submit-button {
  display: block;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--gray-300);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  text-indent: -9999px;
  overflow: hidden;
  flex: 0 0 auto;
  position: absolute;
  top: auto;
  right: 10px;
  bottom: 10px;
  transform: none;
  z-index: 1;
}
.ChatReplyInputComponent__submit-button .ChatReplyInputComponent__submit-button-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: var(--gray-500);
  transform: translate(-50%, -50%);
  -webkit-mask: url("/img/redesign/icons/arrow-top.svg") center center/20px 20px no-repeat;
  mask: url("/img/redesign/icons/arrow-top.svg") center center/20px 20px no-repeat;
}
.ChatReplyInputComponent__submit-button:hover, .ChatReplyInputComponent__submit-button:focus, .ChatReplyInputComponent__submit-button:focus-visible {
  background: var(--gray-300);
  box-shadow: none;
  outline: none;
}
.ChatReplyInputComponent__composer.has-text .ChatReplyInputComponent__submit-button {
  background: var(--brand-400);
}
.ChatReplyInputComponent__composer.has-attachments .ChatReplyInputComponent__submit-button {
  background: var(--brand-400);
}
.ChatReplyInputComponent__composer.has-text .ChatReplyInputComponent__submit-button:hover, .ChatReplyInputComponent__composer.has-text .ChatReplyInputComponent__submit-button:focus, .ChatReplyInputComponent__composer.has-text .ChatReplyInputComponent__submit-button:focus-visible, .ChatReplyInputComponent__composer.has-attachments .ChatReplyInputComponent__submit-button:hover, .ChatReplyInputComponent__composer.has-attachments .ChatReplyInputComponent__submit-button:focus, .ChatReplyInputComponent__composer.has-attachments .ChatReplyInputComponent__submit-button:focus-visible {
  background: var(--brand-400);
}
.ChatReplyInputComponent__composer.has-text .ChatReplyInputComponent__submit-button .ChatReplyInputComponent__submit-button-icon {
  background-color: var(--gray-100);
}
.ChatReplyInputComponent__composer.has-attachments .ChatReplyInputComponent__submit-button .ChatReplyInputComponent__submit-button-icon {
  background-color: var(--gray-100);
}

.ChatTitleComponent {
  position: relative !important;
  width: 100% !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  background: var(--gray-300) !important;
  border-radius: var(--radius-alt-sm) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2xl);
  box-sizing: border-box !important;
  overflow: visible !important;
}
.ChatTitleComponent .postWrapper {
  display: none !important;
  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: var(--font-size-sm);
  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: var(--font-size-xs);
    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: none !important;
  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: var(--font-size-sm);
  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: var(--font-size-xs);
    padding: var(--spacing-alt-xs) var(--spacing-lg);
  }
}
.ChatTitleComponent .postPriceWrapper > .emptyThumb {
  width: 80px;
  display: none !important;
}
@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);
  }
}
.ChatTitleComponent.is-direct {
  min-height: 60px !important;
  padding: 10px !important;
  border: 4px solid var(--gray-100) !important;
  border-radius: var(--radius-alt-sm) !important;
}
.ChatTitleComponent.is-direct .ChatTitleComponent__card {
  align-items: center;
  min-height: 32px;
  gap: var(--spacing-lg);
  padding-right: 36px;
}
.ChatTitleComponent.is-direct .ChatTitleComponent__content {
  justify-content: center;
  gap: 0;
  padding-top: 0;
  align-self: stretch;
}
.ChatTitleComponent.is-direct .ChatTitleComponent__user-row {
  height: 100%;
}
.ChatTitleComponent.is-direct .ChatTitleComponent__user-info {
  align-items: center;
  height: 100%;
}
.ChatTitleComponent.is-direct .chatUserName {
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.3px;
}
.ChatTitleComponent.is-direct .ChatTitleComponent__menu, .ChatTitleComponent.is-direct .InlineOptionsMenuComponent, .ChatTitleComponent.is-direct .InlineOptionsMenu {
  top: 50%;
  right: var(--spacing-xs);
  transform: translateY(-50%);
}

.chatLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xxs) var(--spacing-xs);
  gap: var(--spacing-sm);
  border-radius: var(--radius-xs);
  color: var(--gray-100);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: -0.18px;
  margin-bottom: var(--spacing-xxs);
  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;
  }
}

.ChatTitleComponent > .Container, .ChatTitleComponent > .container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}
.ChatTitleComponent__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
  min-height: 66px;
  padding-right: var(--spacing-3xl);
  box-sizing: border-box;
  overflow: visible;
}
.ChatTitleComponent__media {
  position: relative;
  width: 66px;
  min-width: 66px;
  height: 66px;
}
.ChatTitleComponent__media > .l, .ChatTitleComponent__media > .l a {
  display: block;
  width: 61px;
  height: 61px;
}
.ChatTitleComponent__media > .l img {
  display: block;
  width: 61px;
  height: 61px;
  border-radius: var(--radius-alt-xs);
  object-fit: cover;
}
.ChatTitleComponent__media.is-resume > .l img {
  border-radius: var(--radius-md);
  background: var(--gray-100);
  border: 1px solid #e3e5ea;
  box-sizing: border-box;
}
.ChatTitleComponent__media.is-direct {
  width: 32px;
  min-width: 32px;
  height: 32px;
  align-self: center;
}
.ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar {
  position: static;
  width: 32px;
  height: 32px;
}
.ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar img, .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_user, .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_comp {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1.6px solid var(--gray-100);
  box-sizing: border-box;
}
.ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar img.av_user, .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_user {
  border-radius: 999px;
}
.ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar img.av_comp, .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_comp {
  border-radius: var(--radius-alt-xs);
}
.ChatTitleComponent__avatar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  width: 27px;
  height: 27px;
}
.ChatTitleComponent__avatar img, .ChatTitleComponent__avatar .uav, .ChatTitleComponent__avatar .uavatar {
  width: 27px;
  height: 27px;
  border-radius: 100px;
  border: 1.35px solid #fff;
  box-sizing: border-box;
}
.ChatTitleComponent__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xs);
  min-width: 0;
  padding-top: 0;
}
.ChatTitleComponent__user-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  margin: 0;
}
.ChatTitleComponent__user-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  flex: 1;
}
.ChatTitleComponent__user-info .icon-verified, .ChatTitleComponent__user-info .icon-company-verified {
  flex: 0 0 auto;
}
.ChatTitleComponent__user-info .icon-company-verified {
  display: block;
  width: 14px;
  height: 14px;
}
.ChatTitleComponent .chatUserName {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: 500;
  letter-spacing: -0.26px;
  color: var(--gray-900);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ChatTitleComponent .chatUserName:hover {
  color: var(--brand-400);
}
.ChatTitleComponent .chatPostLink {
  transition: color 0.2s ease;
}
.ChatTitleComponent .chatPostLink:hover {
  color: var(--brand-400);
}
.ChatTitleComponent .titleWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-alt-xs);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.ChatTitleComponent .titleWrapper a, .ChatTitleComponent .titleWrapper > div, .ChatTitleComponent .titleWrapper .inactivePost {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ChatTitleComponent .titleWrapper a {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 700;
  letter-spacing: -0.28px;
  color: var(--gray-900);
}
.ChatTitleComponent .titleWrapper .priceCell {
  display: block;
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: 600;
  letter-spacing: -0.26px;
  color: #0e0f21;
  max-width: 100%;
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow .priceCell {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow .NegotiatedPriceComponent {
  display: flex;
  align-items: flex-start;
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow:has(.priceNegotiationType) {
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: var(--spacing-xxs);
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow:has(.priceNegotiationType) .NegotiatedPriceComponent {
  display: contents;
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow:has(.priceNegotiationType) .NegotiatedPriceComponent > div {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow:has(.priceNegotiationType) .priceNegotiationType {
  order: 2;
  margin-top: 0;
}
.ChatTitleComponent .titleWrapper .chatTitleMetaRow:has(.priceNegotiationType) .NegotiatedPriceComponent > .expiry {
  order: 3;
  flex: 0 0 100%;
}
.ChatTitleComponent .titleWrapper.inactivePost {
  gap: var(--spacing-xxs);
}
.ChatTitleComponent .titleWrapper.inactivePost .inactivePostTitleRow {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.ChatTitleComponent .titleWrapper.inactivePost .inactivePostTitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.ChatTitleComponent .titleWrapper.inactivePost .priceCell {
  color: var(--gray-500);
}
.ChatTitleComponent .titleWrapper.deletedPost {
  gap: 0;
}
.ChatTitleComponent .titleWrapper > div:not(.inactivePost) a, .ChatTitleComponent .titleWrapper > div:not(.inactivePost) div {
  max-width: 100%;
}
.ChatTitleComponent .chatLabel {
  margin-top: 0;
  margin-bottom: 0;
  flex: 0 0 auto;
}
.ChatTitleComponent .chatLabel.inactiveType, .ChatTitleComponent .chatLabel.deletedType {
  margin-bottom: 0;
  padding: var(--spacing-xxs) var(--spacing-xs);
  background: var(--gray-100);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.ChatTitleComponent .chatLabel.inactiveType {
  color: var(--gray-600);
}
.ChatTitleComponent .chatLabel.deletedType {
  color: var(--error-500);
}
.ChatTitleComponent__menu, .ChatTitleComponent .InlineOptionsMenuComponent, .ChatTitleComponent .InlineOptionsMenu {
  position: absolute;
  top: var(--spacing-xxs);
  right: var(--spacing-xs);
  margin: 0;
  z-index: 3;
}
.ChatTitleComponent .InlineOptionsMenuComponent .options-container, .ChatTitleComponent .InlineOptionsMenu .options-container {
  z-index: 100;
  right: 0;
  left: auto;
  min-width: 180px;
  white-space: nowrap;
}
.ChatTitleComponent .InlineOptionsMenuComponent .options-container.open, .ChatTitleComponent .InlineOptionsMenu .options-container.open {
  right: 0;
  left: auto;
}
.ChatTitleComponent .InlineOptionsMenuComponent .option-wrapper, .ChatTitleComponent .InlineOptionsMenu .option-wrapper {
  white-space: nowrap;
}

.chatLabel.resumeType {
  background-color: var(--accent-argentinaBlue);
}

.ChatViewComponent {
  overflow: auto;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  padding-top: var(--spacing-md);
  overflow-x: hidden;
}

.chat .ChatViewComponent {
  box-sizing: border-box;
}

.ChatViewComponent .chatDateSeparator {
  margin: 0 0 var(--spacing-lg);
}

.ChatViewComponent .chatDateSeparator__label {
  background: transparent;
  color: var(--gray-800);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-sm);
  height: auto;
  padding: 0;
}

.ChatViewComponent .msg {
  display: flex;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  align-items: flex-end;
  gap: var(--spacing-sm);
}

.ChatViewComponent .msg.msg--avatar-hidden {
  margin-bottom: var(--spacing-sm);
}

.ChatViewComponent .msg .l {
  width: 32px;
  min-width: 32px;
}

.ChatViewComponent .msg .l img.av_user,
.ChatViewComponent .msg .l img.av_comp {
  width: 32px;
  height: 32px;
  border-radius: 100px;
}

.ChatViewComponent .msg .l img.av_comp {
  border-radius: 4px;
}

.ChatViewComponent .msg.msg--avatar-hidden .l {
  visibility: hidden;
}

.ChatViewComponent .msg .r {
  flex: 1;
  margin-left: 0;
  position: relative;
  display: block;
  max-width: 576px;
}

.ChatViewComponent .msg .r > .rb {
  display: flex;
  gap: var(--spacing-alt-xs);
  flex-direction: column;
  flex: 1;
}

.ChatViewComponent .msg .r .msg_u {
  display: none;
}

.ChatViewComponent .msg .r > .rb > .i > div {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  margin: var(--spacing-xxs) var(--spacing-none);
}

.ChatViewComponent .msg .r > .rb > .i > div > .new {
  font-size: var(--font-size-xxs);
  display: inline-block;
  color: var(--gray-100);
  background-color: var(--accent-electricRaspberry);
  margin-left: var(--spacing-alt-xs);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xxs) var(--spacing-alt-sm);
}

.dlmsg .att, .ChatViewComponent .msg .r > .rb > .att {
  font-size: var(--font-size-md);
  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 {
  position: absolute;
  right: var(--spacing-alt-sm);
  bottom: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  color: var(--gray-800);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.ChatViewComponent .msg.m .r .msg_d.is-read {
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  color: var(--brand-500);
}

.ChatViewComponent .msg .r .msg_d img {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-alt-sm);
}

.ChatViewComponent .msg .r .msg_d .socket-message-status {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  vertical-align: text-bottom;
}

.ChatViewComponent .msg .r .msg_d .socket-message-status.status-sent {
  background-image: url("/img/Check.svg");
}

.ChatViewComponent .msg .r .msg_d .socket-message-status.status-read {
  background-image: url("/img/Check-1.svg");
}

.ChatViewComponent .msg .r .msg_b {
  position: relative;
  font-weight: 500;
  box-sizing: border-box;
  width: fit-content;
  max-width: 360px;
  color: var(--gray-900);
  padding: var(--spacing-alt-sm) var(--spacing-9xl) var(--spacing-alt-sm) var(--spacing-md);
  line-height: var(--line-height-sm);
  border-radius: var(--radius-md);
  background: var(--gray-300);
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
}

.ChatViewComponent .msg .r .msg_b.has-link-preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-xs);
  width: 320px;
  max-width: 100%;
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.has-link-preview) {
  width: min(380px, 100%);
}

.ChatViewComponent .msg .r .msg_text {
  min-width: 0;
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.is-link-protected) {
  overflow: hidden;
  width: min(360px, 100%);
  min-height: 116px;
  padding: 0;
  border-radius: var(--radius-md);
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.is-link-protected) .msg_d {
  display: none;
}

.ChatViewComponent .msg .r .msg_b.is-link-protected {
  display: block;
  width: 360px;
  max-width: 100%;
  min-height: 116px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-radius: var(--radius-md);
}

.ChatViewComponent .msg .r .msg_b.is-link-protected .chatProtectedMessage__content {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: var(--spacing-alt-sm) var(--spacing-8xl) var(--spacing-alt-sm) var(--spacing-md);
  opacity: 0.5;
  filter: blur(12px);
  pointer-events: none;
}

.ChatViewComponent .msg .r .msg_b.is-link-protected .chatProtectedMessage__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  width: 100%;
  min-height: 116px;
  padding: var(--spacing-lg) var(--spacing-4xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.48);
  color: var(--gray-900);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: 0;
  text-align: center;
  box-sizing: border-box;
}

.ChatViewComponent .msg .r .msg_b.is-link-protected .chatProtectedMessage__overlay:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0.62) 34%, rgba(255, 255, 255, 0) 62%), linear-gradient(90deg, rgba(234, 244, 255, 0.82) 0%, rgba(255, 255, 255, 0.54) 52%, rgba(244, 244, 244, 0.8) 100%);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.ChatViewComponent .msg .r .msg_b.is-link-protected .chatProtectedMessage__paragraph {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  margin: 0;
  font-size: var(--font-size-xxs);
  font-weight: 500;
  letter-spacing: -0.24px;
  line-height: var(--line-height-alt-xs);
}

.ChatViewComponent .msg .r .msg_b.is-link-protected .chatProtectedMessage__reveal {
  color: var(--brand-400);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline;
}

.ChatViewComponent .msg .r .msg_b.is-link-revealed .chatProtectedMessage__overlay {
  display: none;
}

.ChatViewComponent .msg .r .msg_b.is-link-revealed.has-link-preview .chatProtectedMessage__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-xs);
  min-width: 0;
}

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

.ChatLinkPreviewCardComponent,
.ChatViewComponent .msg .r .msg_b .ChatLinkPreviewCardComponent {
  display: flex;
  align-items: center;
  gap: var(--spacing-alt-sm);
  width: 100%;
  max-width: 320px;
  min-height: 68px;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  border-left: 2px solid var(--brand-400);
  border-radius: var(--radius-xs);
  background: var(--gray-100);
  box-sizing: border-box;
  color: var(--gray-900);
  text-decoration: none;
  overflow: hidden;
}

.ChatLinkPreviewCardComponent:hover,
.ChatViewComponent .msg .r .msg_b .ChatLinkPreviewCardComponent:hover {
  text-decoration: none;
}

.ChatLinkPreviewCardComponent__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.ChatLinkPreviewCardComponent__site,
.ChatViewComponent .msg .r .msg_b .ChatLinkPreviewCardComponent .ChatLinkPreviewCardComponent__site {
  color: var(--brand-400);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ChatLinkPreviewCardComponent__title,
.ChatViewComponent .msg .r .msg_b .ChatLinkPreviewCardComponent .ChatLinkPreviewCardComponent__title {
  color: var(--gray-800);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.ChatLinkPreviewCardComponent__image {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  background: var(--gray-300);
}

.ChatViewComponent .msg .r .msg_b.has-link-preview:has(.ChatLinkPreviewCardComponent--internalPost) {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.ChatViewComponent .msg .r .msg_b.has-link-preview:has(.ChatLinkPreviewCardComponent--internalPost) .msg_text {
  display: none;
}

.ChatViewComponent .msg .r .msg_flow:has(.ChatLinkPreviewCardComponent--internalPost) {
  width: min(552px, 100%);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

.ChatLinkPreviewCardComponent--internalPost,
.ChatViewComponent .msg .r .msg_b .ChatLinkPreviewCardComponent--internalPost {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ChatLinkPreviewCardComponent--internalPost .ChatLinkPreviewCardComponent__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-xs);
  background: var(--accent-argentinaBlue);
  color: var(--gray-100);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: 400;
}

.ChatLinkPreviewCardComponent--internalPost .ChatLinkPreviewCardComponent__internalPostBody {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
  min-width: 0;
}

.ChatLinkPreviewCardComponent--internalPost .ChatLinkPreviewCardComponent__image {
  order: 0;
  flex: 0 0 var(--spacing-12xl);
  width: var(--spacing-12xl);
  height: 60px;
  border-radius: var(--radius-xs);
}

.ChatLinkPreviewCardComponent--internalPost .ChatLinkPreviewCardComponent__content {
  gap: 0;
  align-self: stretch;
  justify-content: center;
}

.ChatLinkPreviewCardComponent--internalPost .ChatLinkPreviewCardComponent__site {
  display: none;
}

.ChatLinkPreviewCardComponent--internalPost .ChatLinkPreviewCardComponent__title,
.ChatViewComponent .msg .r .msg_b .ChatLinkPreviewCardComponent--internalPost .ChatLinkPreviewCardComponent__title {
  color: var(--text-primary, #0E0F21);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  -webkit-line-clamp: 2;
}

.ChatLinkPreviewCardComponent--internalPostInactive .ChatLinkPreviewCardComponent__badge {
  width: auto;
  padding: 0 var(--spacing-sm);
  background: var(--gray-400);
  color: var(--gray-600);
}

.ChatLinkPreviewCardComponent--internalPostInactive .ChatLinkPreviewCardComponent__title,
.ChatViewComponent .msg .r .msg_b .ChatLinkPreviewCardComponent--internalPostInactive .ChatLinkPreviewCardComponent__title {
  color: var(--gray-600);
}

.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.m {
  justify-content: flex-end;
}

.ChatViewComponent .msg.m .l {
  order: 2;
}

.ChatViewComponent .msg.m .r {
  order: 1;
}

.ChatViewComponent .msg.m .r .rb {
  align-items: flex-end;
}

.ChatViewComponent .msg.m .r .msg_b {
  background: var(--brand-100);
}

.ChatViewComponent .msg.m .r .msg_b.has-link-preview:has(.ChatLinkPreviewCardComponent--internalPost) {
  background: transparent;
}

.ChatViewComponent .msg.m .r .msg_flow:has(.ChatLinkPreviewCardComponent--internalPost) {
  background: var(--gray-100);
}

.ChatViewComponent .msg.y .r .rb {
  align-items: flex-start;
}

.ChatViewComponent .msg.y.msg--avatar-tail .r .msg_b {
  border-bottom-left-radius: 4px;
}

.ChatViewComponent .msg.m.msg--avatar-tail .r .msg_b {
  border-bottom-right-radius: 4px;
}

.ChatViewComponent .msg.y.msg--avatar-tail .r .msg_flow:has(.msg_b.is-link-protected) {
  border-bottom-left-radius: var(--radius-xs);
}

.ChatViewComponent .msg.m.msg--avatar-tail .r .msg_flow:has(.msg_b.is-link-protected) {
  border-bottom-right-radius: var(--radius-xs);
}

.ChatViewComponent .notice {
  max-width: 360px;
}

.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--offerAccepted {
  gap: var(--spacing-sm);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted,
.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-md);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 320px;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-alt-sm);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-alt-sm);
  background-color: var(--gray-300);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div {
  width: 100%;
  max-width: 100%;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div > div {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div > div > p {
  margin: var(--spacing-none);
  max-height: var(--spacing-6xl);
  overflow: hidden;
  color: var(--gray-900);
  text-overflow: ellipsis;
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div > div > .offerView {
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted div img {
  width: var(--spacing-12xl);
  height: var(--spacing-10xl);
  flex: 0 0 var(--spacing-12xl);
  object-fit: cover;
  border-radius: 6.4px;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted a {
  display: flex;
  width: auto;
  min-height: var(--spacing-5xl);
  align-self: flex-start;
  box-sizing: border-box;
  background-color: var(--delivery-400);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  color: var(--gray-100);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  transition: background-color 0.3s ease-out;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted a:hover {
  background-color: var(--delivery-300);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted .NegotiatedPriceComponent > div {
  gap: var(--spacing-sm);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted .NegotiatedPriceComponent .suggestedPrice {
  order: 1;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: var(--line-height-sm);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted .NegotiatedPriceComponent .oldPrice {
  order: 2;
  color: var(--error-500);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
}

.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 > input.price-negotiation-action,
.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: var(--font-size-sm);
  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,
.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > input.reject.price-negotiation-action {
  background-color: var(--gray-400);
  color: var(--error-400);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > form > input.reject:hover,
.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > input.reject.price-negotiation-action:hover {
  background-color: var(--gray-400);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > input.accept.price-negotiation-action {
  background-color: var(--brand-400);
  color: var(--gray-100);
}

.ChatViewComponent .msg .r .msg_b.pricePending.s + .actions > input.accept.price-negotiation-action:hover {
  background-color: var(--brand-300);
}

.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 .rb .pricePendingWrapper--sellerActions {
  gap: var(--spacing-md);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .msg_b.pricePending.s {
  max-width: 360px;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0;
  background: var(--gray-300);
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .msg_b.pricePending.s b {
  font-weight: 700;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-left: 0;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .actions > input.price-negotiation-action,
.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .actions > a {
  display: flex;
  min-height: var(--spacing-7xl);
  padding: var(--spacing-md) var(--spacing-2xl);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-sm);
  cursor: pointer;
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .actions > input.reject.price-negotiation-action {
  background: var(--gray-300);
  color: var(--error-400);
}

.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .actions > input.accept.price-negotiation-action,
.ChatViewComponent .msg .r .rb .pricePendingWrapper--sellerActions .actions > a {
  background: var(--brand-400);
  color: var(--gray-100);
}

.ChatViewComponent .msg .r .msg_b.orderNote {
  background-color: var(--info-100);
}

.ChatViewComponent .msg .r .chat-image-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  max-width: 100%;
}

.ChatViewComponent .msg.m .r .chat-image-grid {
  justify-content: flex-end;
}

.ChatViewComponent .msg.y .r .chat-image-grid {
  justify-content: flex-start;
}

.ChatViewComponent .msg .r .chat-image-item {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gray-900);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.ChatViewComponent .msg .r .chat-image-hidden {
  display: none;
}

.ChatViewComponent .msg .r .chat-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.ChatViewComponent .msg .r .chat-image-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-100);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--line-height-md);
  background: rgba(0, 0, 0, 0.8);
}

.ChatViewComponent .msg.image-only .r .msg_flow {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.chat-reply-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.ChatReplyInputComponent .messagesReplyComposer {
  position: relative !important;
  display: block !important;
  min-height: 48px !important;
  max-height: none !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 24px !important;
  background: var(--gray-300) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ChatReplyInputComponent .messagesReplyComposer.is-focused,
.ChatReplyInputComponent .messagesReplyComposer.has-attachments {
  border-color: var(--gray-900) !important;
  background: var(--gray-100) !important;
}

.ChatReplyInputComponent .messagesReplyInputWrap {
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

.ChatReplyInputComponent .messagesReplyInputWrap .textareaWrapper,
.ChatReplyInputComponent .messagesReplyInputWrap .TextAreaComponent,
.ChatReplyInputComponent .messagesReplyInputWrap .TextAreaFormElementNew {
  order: 2 !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 22px !important;
  margin: 0 !important;
  background: transparent !important;
}

.ChatReplyInputComponent .messagesReplyInputWrap textarea,
.ChatReplyInputComponent .messagesReplyInputWrap textarea.TextAreaComponent {
  display: block !important;
  width: 100% !important;
  min-height: 24px !important;
  height: auto;
  max-height: 148px !important;
  box-sizing: border-box !important;
  padding: 12px 4px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--gray-900) !important;
  font-size: var(--font-size-md) !important;
  line-height: var(--line-height-sm) !important;
  resize: none !important;
  overflow-y: hidden;
}

.ChatReplyInputComponent .messagesReplyButton {
  position: absolute !important;
  top: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.ChatReplyInputComponent .messagesReplyButton:hover,
.ChatReplyInputComponent .messagesReplyButton:focus,
.ChatReplyInputComponent .messagesReplyButton:focus-visible {
  background: var(--gray-300) !important;
  box-shadow: none !important;
  outline: none !important;
}

.ChatReplyInputComponent .messagesReplyComposer.has-text .messagesReplyButton:hover,
.ChatReplyInputComponent .messagesReplyComposer.has-text .messagesReplyButton:focus,
.ChatReplyInputComponent .messagesReplyComposer.has-text .messagesReplyButton:focus-visible,
.ChatReplyInputComponent .messagesReplyComposer.has-attachments .messagesReplyButton:hover,
.ChatReplyInputComponent .messagesReplyComposer.has-attachments .messagesReplyButton:focus,
.ChatReplyInputComponent .messagesReplyComposer.has-attachments .messagesReplyButton:focus-visible {
  background: var(--brand-400) !important;
}

.chat-attachment-input {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.chat-attachment-file-input,
.chat-attachment-hidden-fields {
  display: none;
}

.chat-attachment-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--gray-400);
  cursor: pointer;
}

.chat-attachment-pick:hover {
  background: var(--gray-400);
}

.chat-attachment-pick:focus,
.chat-attachment-pick:focus-visible {
  background: var(--gray-400);
  box-shadow: none;
  outline: none;
}

.chat-attachment-pick-icon {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--gray-900);
  -webkit-mask: url("/img/redesign/icons/plus.svg") center center/20px 20px no-repeat;
  mask: url("/img/redesign/icons/plus.svg") center center/20px 20px no-repeat;
}

.ChatReplyInputComponent .chat-attachment-input {
  display: contents;
}

.ChatReplyInputComponent .chat-attachment-pick {
  order: 1;
  align-self: flex-end;
  margin: 10px 0 10px 10px;
  flex: 0 0 auto;
  z-index: 1;
}

.chat-attachment-preview {
  display: grid;
  grid-template-columns: repeat(5, 48px);
  gap: var(--spacing-xs);
  width: 100%;
  order: 3;
}

.chat-attachment-preview:empty {
  display: none;
}

.ChatReplyInputComponent .chat-attachment-preview {
  order: 0;
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 12px 12px 6px;
  box-sizing: border-box;
}

.ChatReplyInputComponent .chat-attachment-preview:empty {
  display: none;
}

.chat-attachment-preview-item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gray-300);
}

.ChatReplyInputComponent .chat-attachment-preview-item {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  background: var(--gray-900);
}

.chat-attachment-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ChatReplyInputComponent .chat-attachment-preview-item img {
  border-radius: 16px;
}

.chat-attachment-preview-item.is-uploading img {
  opacity: 0.45;
}

.chat-attachment-preview-item:not(.is-uploading) .chat-attachment-uploading {
  display: none;
}

.chat-attachment-uploading {
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-top-color: var(--brand-400);
  border-radius: 50%;
  animation: chat-attachment-spin 0.8s linear infinite;
}

.ChatReplyInputComponent .chat-attachment-uploading {
  inset: 38px;
}

.chat-attachment-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--gray-100);
  font-size: 12px;
  line-height: 18px;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
}

.chat-attachment-remove:hover,
.chat-attachment-remove:focus,
.chat-attachment-remove:focus-visible {
  color: var(--gray-100);
  background: rgba(0, 0, 0, 0.62);
  box-shadow: none;
  outline: none;
}

.chat-attachment-error {
  display: none;
  width: 100%;
  order: 4;
  color: var(--error-400);
  font-size: 13px;
  line-height: 18px;
}

.ChatReplyInputComponent .chat-attachment-error {
  flex: 0 0 100%;
  padding: 0 12px 10px;
  box-sizing: border-box;
}

.ChatReplyInputComponent .chat-attachment-error.is-visible {
  position: absolute;
  right: 12px;
  bottom: 52px;
  left: 12px;
  z-index: 8;
  display: block;
  width: auto;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.chat-attachment-error.is-visible {
  display: block;
}

.contact-user-chat-attachment-input {
  margin-top: var(--spacing-sm);
}

.chat-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.chat-image-viewer.is-open {
  display: flex;
}

.chat-image-viewer-image {
  max-width: calc(100vw - 112px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
}

.chat-image-viewer-close,
.chat-image-viewer-prev,
.chat-image-viewer-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--gray-100);
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.chat-image-viewer-close {
  width: 40px;
  height: 40px;
  border-radius: 100px;
}

.chat-image-viewer-close::before,
.chat-image-viewer-close::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.chat-image-viewer-close::before {
  transform: rotate(45deg);
}

.chat-image-viewer-close::after {
  transform: rotate(-45deg);
}

.chat-image-viewer-prev,
.chat-image-viewer-next {
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
}

.chat-image-viewer-prev::before,
.chat-image-viewer-next::before {
  content: "";
  width: 11px;
  height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.chat-image-viewer-prev::before {
  transform: rotate(225deg);
}

.chat-image-viewer-next::before {
  transform: rotate(45deg);
}

.chat-image-viewer-close {
  top: var(--spacing-lg);
  right: var(--spacing-lg);
}

.chat-image-viewer-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.chat-image-viewer-close:focus,
.chat-image-viewer-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  outline: none;
}

.chat-image-viewer-prev {
  left: var(--spacing-lg);
}

.chat-image-viewer-next {
  right: var(--spacing-lg);
}

.chat-image-viewer-prev:not(:disabled):hover,
.chat-image-viewer-prev:not(:disabled):focus,
.chat-image-viewer-prev:not(:disabled):focus-visible,
.chat-image-viewer-next:not(:disabled):hover,
.chat-image-viewer-next:not(:disabled):focus,
.chat-image-viewer-next:not(:disabled):focus-visible {
  color: var(--gray-100);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  outline: none;
}

.chat-image-viewer-prev:disabled,
.chat-image-viewer-next:disabled {
  width: 40px;
  height: 40px;
  color: var(--gray-600);
  background: transparent;
  opacity: 1;
  cursor: default;
}

.chat-image-viewer-prev:disabled:hover,
.chat-image-viewer-prev:disabled:focus,
.chat-image-viewer-prev:disabled:focus-visible,
.chat-image-viewer-next:disabled:hover,
.chat-image-viewer-next:disabled:focus,
.chat-image-viewer-next:disabled:focus-visible {
  color: var(--gray-600);
  background: transparent;
  box-shadow: none;
  outline: none;
}

@keyframes chat-attachment-spin {
  to {
    transform: rotate(360deg);
  }
}
.ChatViewComponent .notice {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: 480px;
  max-width: 100%;
  min-height: 98px;
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-none) var(--spacing-none);
  padding: 12px;
  color: var(--gray-700);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--spacing-none);
}

.ChatViewComponent .notice .t {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-400);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.26px;
  white-space: nowrap;
}

.ChatViewComponent .notice .t::before {
  content: "";
  flex: 0 0 auto;
  width: 15.883px;
  height: 16px;
  background-color: var(--brand-400);
  -webkit-mask: url("/img/redesign/icons/warning-from-list.svg") center/contain no-repeat;
  mask: url("/img/redesign/icons/warning-from-list.svg") center/contain no-repeat;
}

.ChatViewComponent .notice .d {
  width: 100%;
  color: var(--gray-700);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.24px;
  word-break: break-word;
}

.ChatViewComponent .msg .r > .rb > .att img {
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-xs);
}

.chat .chatReply textarea.TextAreaComponent {
  padding-left: 18px;
  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);
}

.ChatViewComponent {
  flex: 1 1 auto;
  height: auto;
  scrollbar-width: thin;
  scrollbar-color: #cfcfd6 transparent;
}

.ChatViewComponent::-webkit-scrollbar {
  width: 1px;
}

.ChatViewComponent::-webkit-scrollbar-track {
  background: transparent;
}

.ChatViewComponent::-webkit-scrollbar-thumb {
  background: #cfcfd6;
  border-radius: 999px;
}

.ChatViewComponent .msg.m {
  transform: translateX(-12px);
}

.ChatViewComponent .msg.y {
  transform: translateX(12px);
}

@media screen and (max-width: 1024px) {
  .ChatViewComponent {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .ChatViewComponent .msg img.av_user, .ChatViewComponent .msg img.av_comp {
    width: 48px;
    height: 48px;
  }
  .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: var(--font-size-md);
  }
  .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 .msg .r .chat-image-grid {
    width: min(356px, 100%);
  }
  .chat-reply-actions {
    align-items: stretch;
  }
  .chat-attachment-preview {
    grid-template-columns: repeat(5, 44px);
  }
  .ChatReplyInputComponent .chat-attachment-pick {
    margin: 10px 0 10px 10px;
  }
  .ChatReplyInputComponent .chat-attachment-preview {
    max-height: min(328px, 100dvh - 300px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 52px;
    scrollbar-width: thin;
  }
  .chat-attachment-preview-item {
    width: 44px;
    height: 44px;
  }
  .chat-image-viewer-image {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 112px);
  }
  .chat-image-viewer-prev,
  .chat-image-viewer-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .ChatViewComponent .notice {
    display: flex;
    width: min(480px, 100vw - 44px);
    max-width: 100%;
    min-height: 98px;
  }
  .ChatViewComponent .msg.y .notice {
    align-self: flex-start;
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted {
    width: 320px;
    max-width: 100%;
    padding: var(--spacing-alt-sm);
    gap: var(--spacing-md);
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted a {
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    line-height: var(--line-height-sm);
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div {
    gap: var(--spacing-md);
    max-width: 100%;
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div > div > p {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-sm);
  }
  .ChatViewComponent .msg .r .rb .pricePendingWrapper--offerAccepted .actions.offerAccepted > div img {
    width: var(--spacing-12xl);
    height: var(--spacing-10xl);
  }
  .ChatViewComponent {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 8px 12px 18px 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--gray-100);
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .ChatViewComponent .chatDateSeparator {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--spacing-md);
    padding-top: var(--spacing-xs);
  }
  .ChatViewComponent .chatDateSeparator__label {
    height: auto;
    padding: 0;
    background: transparent;
    color: var(--gray-800);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.28px;
  }
  .ChatViewComponent .msg {
    display: flex;
    align-items: flex-end;
    width: 100%;
    gap: 0;
    margin: 0 0 var(--spacing-alt-xs);
    padding: 0;
    background: transparent;
  }
  .ChatViewComponent .msg.y {
    justify-content: flex-start;
  }
  .ChatViewComponent .msg.m {
    justify-content: flex-end;
    margin-left: auto;
  }
  .ChatViewComponent :is(.msg .l,
  .msg .r .msg_u,
  .msg .r > .rb > .i) {
    display: none;
  }
  .ChatViewComponent .msg .r {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    width: auto;
    max-width: calc(100% - 32px);
    min-width: 0;
    margin: 0;
  }
  .ChatViewComponent .msg .r > .rb {
    display: inline-flex;
    flex-direction: column;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    gap: var(--spacing-xs);
  }
  .ChatViewComponent .msg .r .msg_flow {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    position: relative;
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 8px;
    row-gap: 0;
    width: fit-content;
    max-width: min(360px, 100vw - 96px);
    padding: var(--spacing-alt-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    box-sizing: border-box;
  }
  .ChatViewComponent.has-mobile-reaction-open {
    position: relative;
    z-index: 20;
  }
  .ChatViewComponent .msg.y .r > .rb,
  .ChatViewComponent .msg.y .r .msg_flow {
    justify-items: start;
  }
  .ChatViewComponent .msg.m .r > .rb,
  .ChatViewComponent .msg.m .r .msg_flow {
    justify-items: end;
  }
  .ChatViewComponent .msg.y .r .msg_flow {
    background: var(--gray-300);
  }
  .ChatViewComponent .msg.m .r .msg_flow {
    background: var(--brand-100);
  }
  .ChatViewComponent .msg .r .msg_flow:has(.ChatLinkPreviewCardComponent--internalPost) {
    background: var(--gray-100);
  }
  .ChatViewComponent .msg .r .msg_b {
    display: block;
    width: auto;
    max-width: min(280px, 100vw - 140px);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    color: var(--gray-900);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: 500;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    grid-column: 1;
    grid-row: 1;
  }
  .ChatViewComponent .msg .r .msg_b.has-link-preview {
    display: flex;
    width: min(320px, 100vw - 140px);
    max-width: 100%;
  }
  .ChatViewComponent .msg .r .msg_flow:has(.msg_b.has-link-preview) {
    width: min(380px, 100vw - 96px);
  }
  .ChatViewComponent .msg .r .msg_b.has-link-preview:has(.ChatLinkPreviewCardComponent--internalPost) {
    width: 100%;
    max-width: 100%;
  }
  .ChatViewComponent .msg .r .msg_flow:has(.ChatLinkPreviewCardComponent--internalPost) {
    width: min(360px, 100vw - 96px);
  }
  .ChatViewComponent .msg .r .msg_flow:has(.msg_b.is-link-protected) {
    width: min(360px, 100vw - 140px);
  }
  .ChatViewComponent .msg .r .msg_b.is-link-protected {
    width: min(360px, 100vw - 140px);
  }
  .ChatViewComponent .msg.y.msg--avatar-tail .r .msg_flow {
    border-bottom-left-radius: 4px;
  }
  .ChatViewComponent .msg.m.msg--avatar-tail .r .msg_flow {
    border-bottom-right-radius: 4px;
  }
  .ChatViewComponent .msg .r .msg_b p {
    margin: 0;
  }
  .ChatViewComponent .msg .r .msg_d {
    position: static;
    display: inline-flex;
    align-items: center;
    align-self: end;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--gray-600);
    font-size: 11px;
    line-height: var(--line-height-tiny);
    white-space: nowrap;
    pointer-events: none;
    flex-shrink: 0;
    grid-column: 2;
    grid-row: 1;
  }
  .ChatViewComponent .msg.m .r .msg_d {
    color: var(--gray-600);
  }
  .ChatViewComponent .msg.m .r .msg_d.is-read {
    color: var(--brand-500);
  }
  .ChatViewComponent .msg .r .msg_d .socket-message-status {
    width: 16px;
    height: 16px;
    margin-right: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
  }
}
@media screen and (min-width: 1025px) {
  .ChatViewComponent {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
  }
  .ChatViewComponent .msg .r .msg_b {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    word-break: break-word;
    grid-column: 1;
    grid-row: 1;
  }
  .ChatViewComponent .msg .r .msg_b.has-link-preview {
    display: flex !important;
    width: min(320px, 100%) !important;
    max-width: 100% !important;
  }
  .ChatViewComponent .msg .r .msg_flow:has(.msg_b.has-link-preview) {
    width: min(380px, 100%) !important;
    max-width: min(380px, 100%) !important;
  }
  .ChatViewComponent .msg .r .msg_flow:has(.msg_b.is-link-protected) {
    width: min(360px, 100%) !important;
    padding: 0 !important;
  }
  .ChatViewComponent .msg .r .msg_b.is-link-protected {
    width: min(360px, 100%) !important;
    padding: 0 !important;
  }
  .ChatViewComponent .chatDateSeparator {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 var(--spacing-lg) !important;
  }
  .ChatViewComponent .chatDateSeparator__label {
    width: auto !important;
    text-align: center !important;
  }
  .ChatViewComponent .msg .r .msg_flow {
    position: relative !important;
    display: inline-grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    column-gap: var(--spacing-sm) !important;
    row-gap: 0 !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: var(--spacing-alt-sm) var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box !important;
  }
  .ChatViewComponent .msg.y .r .msg_flow {
    background: var(--gray-300) !important;
    justify-items: start !important;
  }
  .ChatViewComponent .msg.m .r .msg_flow {
    background: var(--brand-100) !important;
    justify-items: end !important;
  }
  .ChatViewComponent .msg .r .msg_flow:has(.ChatLinkPreviewCardComponent--internalPost) {
    width: min(552px, 100%) !important;
    max-width: min(552px, 100%) !important;
    background: var(--gray-100) !important;
  }
  .ChatViewComponent .msg .r .msg_b.has-link-preview:has(.ChatLinkPreviewCardComponent--internalPost) {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ChatViewComponent .msg.y .r .msg_d {
    right: auto !important;
    left: auto !important;
    color: var(--gray-600) !important;
  }
  .ChatViewComponent .msg .r .msg_d {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    align-self: end !important;
    gap: var(--spacing-xs) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
  }
}
@media screen and (max-width: 375px) {
  .ChatViewComponent .msg .r .chat-image-item {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1270px) {
  .ChatViewComponent .msg .r {
    max-width: min(100%, 520px) !important;
  }
}
.ChatViewComponent .msg.image-only .r .msg_flow {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: var(--spacing-xs) !important;
  width: auto !important;
  max-width: min(440px, 100%) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.ChatViewComponent .msg.m.image-only .r .msg_flow {
  align-items: flex-end !important;
}

.ChatViewComponent .msg.y.image-only .r .msg_flow {
  align-items: flex-start !important;
}

.ChatViewComponent .msg.image-only .r .msg_d {
  display: none !important;
}

.ChatViewComponent .msg.image-only .r .chat-image-grid {
  max-width: min(440px, 100%) !important;
}

.ChatViewComponent .msg.image-only .r .chatMessageReactions {
  margin-top: 0 !important;
}

.ChatViewComponent .msg.m.image-only .r .chatMessageReactions {
  align-self: flex-end !important;
}

.ChatViewComponent .msg.y.image-only .r .chatMessageReactions {
  align-self: flex-start !important;
}

.ChatViewComponent .msg.has-images:not(.image-only) .r .msg_flow {
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: auto !important;
  max-width: min(360px, 100%) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.ChatViewComponent .msg.m.has-images:not(.image-only) .r .msg_flow {
  align-items: flex-end !important;
}

.ChatViewComponent .msg.y.has-images:not(.image-only) .r .msg_flow {
  align-items: flex-start !important;
}

.ChatViewComponent .msg.has-images:not(.image-only) .r .msg_text_flow {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--spacing-sm);
  width: fit-content;
  max-width: min(360px, 100%);
  padding: 10px 12px;
  border-radius: 16px;
  box-sizing: border-box;
}

.ChatViewComponent .msg.m.has-images:not(.image-only) .r .msg_text_flow {
  background: var(--brand-100);
}

.ChatViewComponent .msg.y.has-images:not(.image-only) .r .msg_text_flow {
  background: var(--gray-300);
}

.ChatViewComponent .msg.has-images:not(.image-only) .r .msg_text_flow .msg_b {
  display: block !important;
  width: auto !important;
  max-width: min(300px, 100vw - 148px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gray-900) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
  line-height: var(--line-height-sm) !important;
  grid-column: 1;
  grid-row: 1;
}

.ChatViewComponent .msg.has-images:not(.image-only) .r .msg_text_flow .msg_d {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: end !important;
  gap: var(--spacing-xs) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gray-600) !important;
  font-size: 11px !important;
  line-height: var(--line-height-tiny) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  grid-column: 2;
  grid-row: 1;
}

.ChatViewComponent .msg.m.has-images:not(.image-only) .r .msg_text_flow .msg_d.is-read {
  color: var(--brand-500) !important;
}

.ChatViewComponent .msg.has-images:not(.image-only) .r .chat-image-grid {
  max-width: min(344px, 100%) !important;
}

.ChatViewComponent .msg.m.has-images:not(.image-only) .r .chat-image-grid {
  align-self: flex-end;
}

.ChatViewComponent .msg.y.has-images:not(.image-only) .r .chat-image-grid {
  align-self: flex-start;
}

.ChatViewComponent .msg.has-images:not(.image-only) .r .chat-image-item,
.ChatViewComponent .msg.has-images:not(.image-only) .r .chat-image-item img {
  border-radius: 6px;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--offerAccepted) {
  display: inline-grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  column-gap: var(--spacing-sm) !important;
  width: fit-content !important;
  max-width: min(360px, 100%) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--offerAccepted) .pricePendingWrapper--offerAccepted {
  grid-column: 1;
  grid-row: 1;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--offerAccepted) .msg_b.priceAccepted {
  display: block !important;
  width: 235px !important;
  max-width: min(480px, 100%) !important;
  padding: var(--spacing-md) !important;
  border: 1px solid var(--gray-400) !important;
  border-radius: var(--radius-md) !important;
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
  font-size: var(--font-size-xxs) !important;
  font-weight: 500 !important;
  line-height: var(--line-height-alt-xs) !important;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--offerAccepted) .msg_b.priceAccepted::first-line {
  color: var(--brand-500);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-sm);
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--offerAccepted) .msg_d {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  align-self: end !important;
  margin: 0 !important;
  color: var(--gray-600) !important;
  grid-column: 2;
  grid-row: 1;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--sellerActions) {
  display: inline-grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  column-gap: var(--spacing-sm) !important;
  width: fit-content !important;
  max-width: min(480px, 100%) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--sellerActions) .pricePendingWrapper--sellerActions {
  grid-column: 1;
  grid-row: 1;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--sellerActions) .msg_b.pricePending.s {
  display: block !important;
  width: auto !important;
  max-width: 360px !important;
  padding: var(--spacing-lg) var(--spacing-2xl) !important;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0 !important;
  background: var(--gray-300) !important;
  color: var(--gray-900) !important;
  font-size: var(--font-size-md) !important;
  font-weight: 500 !important;
  line-height: var(--line-height-md) !important;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--sellerActions) .msg_d {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  align-self: end !important;
  margin: 0 0 var(--spacing-9xl) 0 !important;
  color: var(--gray-600) !important;
  grid-column: 2;
  grid-row: 1;
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceAccepted.s),
.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceRejected.s) {
  display: inline-grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  column-gap: var(--spacing-sm) !important;
  width: fit-content !important;
  max-width: min(480px, 100%) !important;
  padding: var(--spacing-md) !important;
  border: 1px solid var(--gray-400) !important;
  border-radius: var(--radius-md) !important;
  background: var(--gray-100) !important;
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceAccepted.s) .msg_b.priceAccepted.s,
.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceRejected.s) .msg_b.priceRejected.s {
  display: block !important;
  width: auto !important;
  max-width: min(480px, 100%) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gray-700) !important;
  font-size: var(--font-size-xxs) !important;
  font-weight: 500 !important;
  line-height: var(--line-height-alt-xs) !important;
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceAccepted.s) .msg_b.priceAccepted.s::first-line {
  color: var(--brand-500);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-sm);
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceRejected.s) .msg_b.priceRejected.s,
.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceRejected.s) .msg_b.priceRejected.s::first-line {
  color: var(--error-400) !important;
}

.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceAccepted.s) .msg_d,
.ChatViewComponent .msg .r .msg_flow:has(.msg_b.priceRejected.s) .msg_d {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  align-self: end !important;
  margin: 0 !important;
  color: var(--gray-600) !important;
  grid-column: 2;
  grid-row: 1;
}

.ChatViewComponent .msg .r .msg_flow:has(.pricePendingWrapper--offerAccepted) .actions.offerAccepted {
  border-radius: var(--radius-alt-sm) !important;
}

.CheckboxSelectComponent {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.CheckboxSelectComponent .DropdownComponent {
  width: auto;
}
.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,
.CheckboxSelectComponent .DropdownComponent.open > .l.top.sm {
  width: max-content;
  min-width: 100%;
  top: 32px;
  bottom: unset;
  display: flex;
  flex-direction: column;
}
.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;
}
.ContactUserModal .contact-user-chat-attachment-input {
  margin-top: calc(var(--spacing-sm) - 12px);
}
.ContactUserModal .contact-user-chat-attachment-input .chat-attachment-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-alt-xs);
  width: auto;
  min-width: 0;
  height: 32px;
  padding: 6px 10px 6px 8px;
  border: 0;
  border-radius: 100px;
  background: var(--brand-100);
  color: var(--brand-500);
  cursor: pointer;
}
.ContactUserModal .contact-user-chat-attachment-input .chat-attachment-pick:hover {
  background: var(--brand-200);
}
.ContactUserModal .contact-user-chat-attachment-input .chat-attachment-pick:focus, .ContactUserModal .contact-user-chat-attachment-input .chat-attachment-pick:focus-visible {
  background: var(--brand-100);
  box-shadow: none;
  outline: none;
}
.ContactUserModal .contact-user-chat-attachment-input .chat-attachment-pick-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  background: var(--brand-500);
  -webkit-mask: url("/img/redesign/icons/attach.svg") center center/20px 20px no-repeat;
  mask: url("/img/redesign/icons/attach.svg") center center/20px 20px no-repeat;
}
.ContactUserModal .contact-user-chat-attachment-input .chat-attachment-pick-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-xs);
  letter-spacing: -0.28px;
  white-space: nowrap;
}

.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 {
  position: relative;
  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:not(:has(> footer)) h2 a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.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);
}

.resume-edit .dmy-wrapper .DropdownComponent:first-child div.title-wrapper {
  width: 100%;
}

/* 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);
}
.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);
  }
}
.EmptyAdListActionButtonsComponent {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-md);
}
.EmptyAdListActionButtonsComponent > a {
  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;
}
.EmptyAdListActionButtonsComponent > a.my-posts {
  color: var(--gray-900);
  background-color: var(--gray-300);
}
.EmptyAdListActionButtonsComponent > a.post-a-new-ad {
  color: var(--gray-100);
  background-color: var(--brand-400);
}
.EmptyAdListActionButtonsComponent > a.post-a-new-ad:hover {
  background-color: var(--brand-300);
}
@media screen and (max-width: 1024px) {
  .EmptyAdListActionButtonsComponent {
    flex-direction: column;
    align-items: stretch;
  }
  .EmptyAdListActionButtonsComponent > a {
    width: auto;
    padding: var(--spacing-lg);
  }
}

#company-verify-page .verification-completion-wrapper .EmptyAdListActionButtonsComponent a,
#seller-apply-page .verification-completion-wrapper .EmptyAdListActionButtonsComponent a {
  font-size: 15px;
  padding: var(--spacing-md) var(--spacing-xl);
}

.EmptyStateComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl);
  align-items: center;
  justify-content: center;
}
.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.campaign-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-alt-sm);
}
.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;
  }
}
.ErrorInfoComponent {
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xl) var(--spacing-none);
}
.ErrorInfoComponent .c {
  color: var(--gray-100) !important;
  display: table;
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  background-color: var(--error-400);
  font-size: var(--font-size-sm);
}
.ErrorInfoComponent .c > div {
  font-size: var(--font-size-md);
  display: table-row;
  margin: var(--spacing-xs);
}
.ErrorInfoComponent .c > div > div:last-child {
  color: var(--gray-300);
  display: table-cell;
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}
.ErrorInfoComponent .c > div > div.t {
  font-weight: 600;
  color: var(--gray-100);
  display: table-cell;
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}
@media screen and (max-width: 1024px) {
  .ErrorInfoComponent {
    padding: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm) var(--spacing-none);
  }
  .ErrorInfoComponent > .c {
    display: block;
    padding: var(--spacing-alt-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    box-shadow: none;
  }
  .ErrorInfoComponent .c > div {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-alt-xs) var(--spacing-none);
  }
  .ErrorInfoComponent .c > div > div.t,
  .ErrorInfoComponent .c > div > div:last-child {
    display: block;
    padding: var(--spacing-xxs);
  }
}

.bubble .ErrorInfoComponent,
.postdlg .ErrorInfoComponent {
  padding: var(--spacing-alt-sm) var(--spacing-none);
}

@media screen and (max-width: 1024px) {
  .ui-widget-content .ErrorInfoComponent > .c {
    border-radius: var(--radius-alt-xs);
  }
}
@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: -44px -24px -24px 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);
  }
}
.FECarPartNumber {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
.FECarPartNumber__field {
  position: relative;
  width: 100%;
}
.FECarPartNumber__input {
  padding-right: 58px;
}
.FECarPartNumber__lookup-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-6xl);
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.2s;
  width: 44px;
}
.FECarPartNumber__lookup-button:hover, .FECarPartNumber__lookup-button:focus {
  background: var(--gray-400);
  outline: none;
}
.FECarPartNumber__lookup-button img {
  height: 18px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
}
.FECarPartNumber__lookup-button--loading {
  cursor: wait;
}
.FECarPartNumber__lookup-button--loading img {
  visibility: hidden;
}
.FECarPartNumber__lookup-button--loading .FECarPartNumber__lookup-loader {
  display: block;
}
.FECarPartNumber__lookup-loader {
  background: var(--gray-800);
  display: none;
  height: 18px;
  left: 50%;
  mask: url("/img/redesign/icons/loader.svg") center/contain no-repeat;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  -webkit-mask: url("/img/redesign/icons/loader.svg") center/contain no-repeat;
}

@keyframes FECarPartNumberLookupLoaderRotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.FECarPartNumber__lookup-button--loading .FECarPartNumber__lookup-loader {
  animation: FECarPartNumberLookupLoaderRotate 0.75s linear infinite;
}

#_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: flex-start;
}
.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;
  }
}

.GamePublicBadgesComponent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.GamePublicBadgesComponent.is-centered {
  justify-content: center;
}
.GamePublicBadgesComponent .badge {
  position: relative;
  display: block;
}
.GamePublicBadgesComponent .badge:before,
.GamePublicBadgesComponent .badge:after {
  position: absolute;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  transform: translateX(-50%);
  z-index: 50;
}
.GamePublicBadgesComponent .badge:before {
  content: "";
  bottom: calc(100% + 4px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--gray-900);
}
.GamePublicBadgesComponent .badge:after {
  content: attr(data-title);
  bottom: calc(100% + 11px);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  background-color: var(--gray-900);
  color: var(--gray-100);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.GamePublicBadgesComponent .badge:hover:before,
.GamePublicBadgesComponent .badge:hover:after {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 1024px) {
  .GamePublicBadgesComponent .badge:first-child:before {
    left: 14px;
    transform: none;
  }
  .GamePublicBadgesComponent .badge:first-child:after {
    left: 0;
    transform: none;
  }
  .GamePublicBadgesComponent .badge:last-child:before {
    right: 14px;
    left: auto;
    transform: none;
  }
  .GamePublicBadgesComponent .badge:last-child:after {
    right: 0;
    left: auto;
    transform: none;
  }
  .GamePublicBadgesComponent .badge:only-child:before {
    right: auto;
    left: 14px;
  }
  .GamePublicBadgesComponent .badge:only-child:after {
    right: auto;
    left: 0;
  }
}
.GamePublicBadgesComponent img {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.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;
  }
}
.HeaderBrgButtonComponent {
  order: 0;
  height: 44px;
  display: none;
}
@media screen and (max-width: 1024px) {
  .HeaderBrgButtonComponent {
    display: block;
  }
}
.HeaderBrgButtonComponent__button {
  display: none;
  width: 44px;
  height: 44px;
  background-size: 20px 20px;
  cursor: pointer;
  background-color: #DFEEFF;
  background-image: url(/img/redesign/icons/header/menu.svg);
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: var(--radius-sm);
}
@media screen and (max-width: 1024px) {
  .HeaderBrgButtonComponent__button {
    display: block;
  }
}
.HeaderBrgButtonComponent:has(.HeaderBrgButtonComponent__panel[style*="display: block"]) .HeaderBrgButtonComponent__button, .HeaderBrgButtonComponent:has(.HeaderBrgButtonComponent__panel[style*="display:block"]) .HeaderBrgButtonComponent__button {
  background-image: url(/img/redesign/icons/header/close.svg);
}
.HeaderBrgButtonComponent__panel {
  display: none;
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 0;
  max-width: 500px;
  overflow-y: scroll;
  width: 100%;
  height: 0;
  -webkit-overflow-scrolling: touch;
  background-color: var(--gray-100);
  border-top: 1px solid var(--gray-400);
  box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.06);
  top: var(--header-height-with-secondary-header);
}

@media screen and (max-width: 1024px) {
  body:has(.HeaderSearchComponent__list:hover):has(.HeaderSearchComponent__dynamic) .HeaderBrgButtonComponent .HeaderBrgButtonComponent__button,
  body:has(.HeaderSearchComponent:focus-within):has(.HeaderSearchComponent__dynamic) .HeaderBrgButtonComponent .HeaderBrgButtonComponent__button {
    background-image: url(/img/redesign/icons/header/back.svg);
    background-color: var(--gray-300);
  }
  .HeaderComponent .HeaderBrgButtonComponent.x,
  .HeaderComponent .HeaderComponent__row #st.x,
  .HeaderComponent .HeaderComponent__inx {
    background: url(/img/mbar.png) no-repeat -108px 0;
    background-size: 133px 26px;
  }
  .HeaderComponent__bottomStrip .HeaderBrgButtonComponent {
    flex-shrink: 0;
  }
}
body:has(.HeaderComponent--has-secondary) {
  padding-top: var(--header-height-with-secondary-header);
}

@media screen and (max-width: 1024px) {
  body:has(.HeaderComponent--has-secondary .HeaderComponent__row--without-search) {
    padding-top: calc(var(--header-height-with-secondary-header) - var(--spacing-10xl));
  }
}

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

.HeaderComponent {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--primary-header-height);
  background-color: var(--gray-100);
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.HeaderComponent--not-fixed {
  position: absolute !important;
}
.HeaderComponent--not-fixed.HeaderComponent--with-border {
  border: none !important;
}
.HeaderComponent--has-secondary {
  height: var(--header-height-with-secondary-header);
}
.HeaderComponent--with-border {
  border-bottom: 0;
}
.HeaderComponent__node:empty {
  display: none;
}
.HeaderComponent__row {
  display: flex;
  align-items: center;
  width: 1140px;
  max-width: 1140px;
  height: 60px;
  margin: auto !important;
  gap: var(--spacing-2xl);
}
@media screen and (max-width: 1024px) {
  .HeaderComponent__row {
    justify-content: space-between;
  }
}
.HeaderComponent__bottomStrip {
  display: contents;
}
.HeaderComponent__inx {
  display: none;
}
.HeaderComponent #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;
}
@media screen and (max-width: 1024px) {
  .HeaderComponent #l {
    background-size: 68px 32px;
    box-sizing: content-box;
    width: 68px;
    height: 32px;
    background-position: center center;
    padding: var(--spacing-lg) var(--spacing-md);
  }
}
.HeaderComponent #l img {
  width: 120px;
  height: 40px;
}
.HeaderComponent__actions {
  font-size: var(--font-size-sm);
  display: flex;
  gap: var(--spacing-alt-md);
  align-items: center;
  font-weight: normal;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .HeaderComponent__actions {
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-6xl);
    gap: var(--spacing-md);
    font-size: 0;
  }
}
@media screen and (max-width: 1024px) {
  .HeaderComponent__actions .out {
    height: 32px;
    padding: var(--spacing-alt-xs) var(--spacing-md);
    border-radius: 100px;
    background: var(--brand-400);
    color: var(--gray-100);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: var(--line-height-sm); /* 142.857% */
    letter-spacing: -0.28px;
    box-sizing: border-box;
  }
}
.HeaderComponent__actions-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
@media screen and (max-width: 1024px) {
  .HeaderComponent__actions-item {
    flex-direction: row-reverse;
    gap: var(--spacing-md);
  }
}
.HeaderComponent #sa {
  font-size: var(--font-size-tiny);
  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%);
}
.HeaderComponent #sa:hover {
  text-decoration: none;
  opacity: 1;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}
.HeaderComponent #ap {
  font-size: var(--font-size-sm);
  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;
}
@media screen and (max-width: 1024px) {
  .HeaderComponent #ap {
    color: transparent;
    font-size: 0;
    width: 32px;
    height: 32px;
    align-self: center;
    border-radius: 50%;
    background-color: var(--brand-400);
    background-image: url(/img/redesign/icons/plus-white.svg);
    transition: none;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
  }
}
.HeaderComponent #ap:hover {
  background-color: var(--brand-300);
}
.HeaderComponent .st {
  display: none;
}
@media screen and (max-width: 1024px) {
  .HeaderComponent #ap,
  .HeaderComponent .m,
  .HeaderComponent .n {
    background-repeat: no-repeat;
    background-position: center center !important;
  }
}
@media screen and (max-width: 1024px) {
  .HeaderComponent .m,
  .HeaderComponent .n {
    width: 24px;
    height: 24px;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
    background-color: transparent !important;
    background-size: 24px 24px !important;
  }
  .HeaderComponent .m div,
  .HeaderComponent .n div {
    top: -8px !important;
    left: 10px !important;
  }
}

@media screen and (min-width: 1025px) {
  .HeaderComponent__row .HeaderComponent__node {
    order: 0;
  }
  .HeaderComponent__row #l {
    order: 1;
  }
  .HeaderComponent__row #categoryMenu {
    order: 2;
  }
  .HeaderComponent__row .HeaderSearchComponent {
    order: 3;
  }
  .HeaderComponent__row .HeaderComponent__inx {
    order: 4;
  }
  .HeaderComponent__row .HeaderComponent__actions {
    order: 5;
  }
}
body:has(.HeaderComponent--has-secondary) .plogin {
  min-height: var(--body-content-height-with-secondary-header);
}

@media screen and (max-width: 1024px) {
  body:has(#ma) #ap {
    display: none;
  }
}

/* map view: offset for secondary header */
body:has(.HeaderComponent--has-secondary) #mapview #menul {
  top: 95px;
}

body:has(.HeaderComponent--has-secondary) #mapview #map {
  top: 105px;
}

body:has(.HeaderComponent--has-secondary) #mapview > .close {
  top: 115px;
}

@media screen and (max-width: 1005px) {
  .HeaderComponent .HeaderComponent__row {
    width: 1000px;
  }
}
@media only screen and (min-width: 721px) and (max-width: 1024px) and (orientation: landscape) {
  .HeaderComponent .HeaderComponent__row {
    width: 100%;
  }
}
@media screen and (max-width: 1270px) {
  .HeaderComponent .HeaderComponent__row {
    width: 1000px;
  }
  .HeaderComponent #ap {
    color: transparent;
    font-size: 0;
    width: 32px;
    height: 32px;
    align-self: center;
    border-radius: 50%;
    background-color: var(--brand-400);
    background-image: url(/img/redesign/icons/plus-white.svg);
    transition: none;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
  }
  #secondary-header-wrapper {
    padding: var(--spacing-none) var(--spacing-md);
  }
}
.HeaderComponent__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);
}

/*	Secondary header in homepage	*/
#secondary-header-wrapper {
  background-color: var(--gray-900);
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--secondary-header-height);
}

#secondary-header {
  width: 1140px;
  max-width: 1140px;
  height: var(--secondary-header-height);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1270px) {
  #secondary-header {
    width: 1000px;
  }
}
#secondary-header .HeaderComponent__secondary-group--first,
#secondary-header .HeaderComponent__secondary-group--second {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}
@media screen and (max-width: 1130px) {
  #secondary-header .HeaderComponent__secondary-group--second {
    padding-right: var(--spacing-4xl);
  }
}
#secondary-header .HeaderComponent__secondary-item {
  color: var(--gray-400);
  font-size: var(--font-size-xxs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xs);
}
#secondary-header .HeaderComponent__secondary-item:visited {
  color: var(--gray-400);
}
#secondary-header .HeaderComponent__secondary-item:hover {
  color: var(--gray-100);
  text-decoration-line: underline;
}
#secondary-header .HeaderComponent__become-seller:visited,
#secondary-header .HeaderComponent__become-seller {
  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-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(26, 29, 62, 0.1);
  transition: background 0.3s ease-in-out;
}
#secondary-header .HeaderComponent__become-seller:hover {
  background: var(--gray-700);
}
@media (hover: none) {
  #secondary-header > div > a:hover {
    color: var(--gray-100);
  }
}

/* my-posts / filter stacking vs header */
body:has(#main .my-posts) .HeaderComponent {
  z-index: 106;
}

body:has(#main .my-posts):has(.ui-widget-overlay.ui-front) .HeaderComponent,
body:has(#main .my-posts):has(.dialog-container) .HeaderComponent,
body:has(#main .PostsFilterComponent):has(.dialog-container) .HeaderComponent {
  z-index: 101;
}

body:has(#main .PostsFilterComponent):has(.dialog-container) .filter-apply-container {
  z-index: 101;
}

body:has(.HeaderComponent--has-secondary) .max-content-height {
  min-height: var(--body-content-height-with-secondary-header);
}

@media screen and (max-width: 1024px) {
  .HeaderComponent {
    min-height: 128px;
    height: auto;
    z-index: 101;
  }
  .HeaderComponent--has-secondary {
    min-height: calc(var(--secondary-header-height) + 64px + 64px);
    height: auto;
  }
  .HeaderComponent #l {
    top: 52px;
  }
  .HeaderComponent:has(.HeaderComponent__row--without-search) {
    min-height: calc(var(--secondary-header-height) + 64px);
  }
  .HeaderComponent .HeaderComponent__row,
  body.f .HeaderComponent .HeaderComponent__row {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    gap: var(--spacing-md);
  }
  .HeaderComponent .HeaderComponent__row.HeaderComponent__row--with-bottom-strip,
  body.f .HeaderComponent .HeaderComponent__row.HeaderComponent__row--with-bottom-strip {
    position: relative;
    min-height: 128px;
    padding: var(--spacing-none) var(--spacing-none) var(--spacing-10xl) var(--spacing-none);
  }
  .HeaderComponent__row .HeaderComponent__bottomStrip {
    display: flex;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    height: 64px;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-none) var(--spacing-md);
  }
  .HeaderComponent__bottomStrip .HeaderSearchComponent {
    flex: 1;
    min-width: 0;
  }
  .HeaderComponent__inx {
    display: none;
    width: 26px;
    min-width: 26px;
    height: 26px;
  }
  .HeaderComponent .HeaderComponent__row #st {
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    height: 26px;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
  }
  .HeaderComponent .HeaderComponent__row #st {
    text-indent: 99px;
    background: url(/img/mbar.png) no-repeat 0 0;
    background-size: 133px 26px;
  }
  .HeaderComponent__actions .off {
    display: none !important;
  }
  .HeaderComponent__verify-account {
    display: none;
  }
  #secondary-header .HeaderComponent__secondary-group--first {
    width: 100%;
    justify-content: space-between;
  }
  #secondary-header .HeaderComponent__secondary-group--first .HeaderComponent__delivery,
  #secondary-header .HeaderComponent__secondary-group--second {
    display: none;
  }
  #secondary-header .HeaderComponent__become-seller {
    width: auto;
  }
  .HeaderComponent--not-fixed .HeaderComponent__row {
    justify-content: center !important;
  }
  #mapview > .close {
    top: 108px;
    right: 8px;
  }
  body:has(.HeaderComponent--has-secondary) #mapview > .close {
    top: 114px;
  }
}
@media screen and (max-width: 425px) {
  #secondary-header .HeaderComponent__help-support {
    display: none;
  }
}
@media screen and (max-width: 320px) and (grid), screen and (max-width: 300px) {
  .HeaderComponent #l {
    display: none;
  }
}
.HeaderComponent .HeaderComponent__row.HeaderComponent__row--without-search {
  justify-content: space-between;
}

.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);
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent__history-clear {
    border-width: 0;
    position: absolute;
    top: 0;
    padding: var(--spacing-xs) var(--spacing-lg);
    width: auto;
    right: 0;
    text-decoration: underline;
    color: var(--gray-700);
  }
}
.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__image-upload {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  background-image: url("/img/redesign/icons/image-search.svg");
  opacity: 0.6;
}
.HeaderSearchComponent__image-upload:hover, .HeaderSearchComponent__image-upload:focus-within {
  opacity: 1;
}
.HeaderSearchComponent__form--loading .HeaderSearchComponent__image-upload {
  cursor: progress;
  pointer-events: none;
  background-image: none;
  opacity: 1;
}
.HeaderSearchComponent__form--loading .HeaderSearchComponent__image-upload::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--gray-500);
  border-top-color: transparent;
  border-radius: 50%;
  animation: HeaderSearchComponent__spinner-rotate 0.8s linear infinite;
}
.HeaderSearchComponent__item--error {
  cursor: default;
  color: var(--error-400);
}
.HeaderSearchComponent__item--error:focus, .HeaderSearchComponent__item--error:hover {
  color: var(--error-400);
}
.HeaderSearchComponent__item--coaching {
  cursor: default;
  color: var(--gray-700);
}
.HeaderSearchComponent__item--coaching:focus, .HeaderSearchComponent__item--coaching:hover {
  color: var(--gray-700);
}
.HeaderSearchComponent__preview {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border-radius: var(--radius-alt-xs);
  display: block;
  cursor: pointer;
  background: var(--gray-300);
  z-index: 2;
}
.HeaderSearchComponent__preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.HeaderSearchComponent__preview-popover {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  left: 0;
  width: 240px;
  height: 240px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  padding: var(--spacing-xs);
  box-sizing: border-box;
  display: none;
  z-index: 100;
  pointer-events: none;
}
.HeaderSearchComponent__preview:hover .HeaderSearchComponent__preview-popover, .HeaderSearchComponent__preview:focus .HeaderSearchComponent__preview-popover {
  display: block;
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent__preview-popover {
    display: none !important;
  }
}
.HeaderSearchComponent__preview-popover-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-alt-xs);
}
.HeaderSearchComponent__form--has-preview .HeaderSearchComponent__image-upload {
  display: none;
}
.HeaderSearchComponent__form.HeaderSearchComponent__form--has-preview input {
  padding-left: calc(var(--spacing-6xl) + var(--spacing-md));
}
.HeaderSearchComponent__form--loading .HeaderSearchComponent__preview {
  cursor: progress;
  pointer-events: none;
}
.HeaderSearchComponent__form--loading .HeaderSearchComponent__preview .HeaderSearchComponent__preview-thumb {
  opacity: 0.35;
}
.HeaderSearchComponent__form--loading .HeaderSearchComponent__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--gray-700);
  border-top-color: transparent;
  border-radius: 50%;
  animation: HeaderSearchComponent__spinner-rotate 0.8s linear infinite;
}
.HeaderSearchComponent__image-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.HeaderSearchComponent__form:has(.HeaderSearchComponent__image-upload) .HeaderSearchComponent__clear {
  right: 30px;
}
.HeaderSearchComponent__form:has(.HeaderSearchComponent__image-upload) input {
  padding-right: calc(var(--spacing-7xl) + 44px);
}
.HeaderSearchComponent__form--has-preview:has(.HeaderSearchComponent__image-upload) .HeaderSearchComponent__clear {
  right: 0;
}
.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__form {
  position: relative;
}
.HeaderSearchComponent__form input {
  padding-right: var(--spacing-7xl);
  box-sizing: border-box;
  outline: none;
  padding: var(--spacing-alt-xs) var(--spacing-md) var(--spacing-alt-xs) var(--spacing-6xl);
  height: 44px !important;
  background-image: url("/img/redesign/icons/search-icon-muted.svg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left 12px center;
  border-radius: var(--radius-sm);
  background-color: var(--gray-300);
}
.HeaderSearchComponent__form input::placeholder {
  color: var(--gray-500);
  font-weight: 500;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.HeaderSearchComponent__form input:focus {
  border: 1px solid var(--gray-900);
  background-color: var(--gray-100);
  background-image: url("/img/redesign/icons/search-icon.svg");
  box-shadow: none;
}
.HeaderSearchComponent form {
  position: relative;
  z-index: 51;
}
@media screen and (max-width: 1024px) {
  .HeaderSearchComponent form {
    margin: auto;
  }
}
.HeaderSearchComponent:has(.HeaderSearchComponent__input:not(:placeholder-shown)) .HeaderSearchComponent__clear {
  display: block;
}
.HeaderSearchComponent:has(.HeaderSearchComponent__item--history) .HeaderSearchComponent__history-clear {
  display: block;
}

@keyframes HeaderSearchComponent__spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
@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) .HeaderSearchComponent__list,
body:has(.HeaderSearchComponent:focus-within):has(.HeaderSearchComponent__dynamic) .HeaderSearchComponent__list {
  pointer-events: all;
  display: block;
}

.HeadingComponent {
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  white-space: normal;
  word-wrap: break-word;
  letter-spacing: -2%;
}
.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--dark {
  width: 19px;
  height: 17px;
}
.heart__content svg {
  width: 20px;
  height: 20px;
  fill: var(--accent-electricRaspberry);
  transition: fill 0.3s, stroke 0.3s;
  display: block;
}
.heart--dark .heart__content svg {
  width: 19px;
  height: 17px;
}
.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--dark .heart__float, .heart--dark .heart__broken {
  background: url("/img/redesign/icons/heart-dark-filled.svg") no-repeat center/contain;
}

.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--inactive .heart--dark .heart__content svg {
  fill: transparent;
  stroke: var(--gray-900);
}
.heart-btn--active .heart--dark .heart__content svg {
  fill: var(--accent-electricRaspberry);
  stroke: var(--accent-electricRaspberry);
}
.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;
  }
}
.HelpBodyComponent > div,
.HelpBodyComponent 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);
}
.HelpBodyComponent 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;
}
.HelpBodyComponent li {
  font-size: 16px;
  color: var(--gray-900);
  line-height: 1.6;
}
.HelpBodyComponent .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;
}
.HelpBodyComponent .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);
}
.HelpBodyComponent .num,
.HelpBodyComponent .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);
}
.HelpBodyComponent .num .l,
.HelpBodyComponent .bl .l {
  float: left;
  padding: var(--spacing-none);
}
.HelpBodyComponent .num .r {
  margin-left: var(--spacing-xl);
  padding: var(--spacing-none);
}
.HelpBodyComponent .bl .l {
  width: 35px;
  margin-left: var(--spacing-xl);
}
.HelpBodyComponent .bl .r {
  margin-left: 60px;
  padding: var(--spacing-none);
}
.HelpBodyComponent .icon,
.HelpBodyComponent .image {
  display: flex;
}
.HelpBodyComponent .icon img {
  display: block;
  width: 32px;
  height: 32px;
  margin: var(--spacing-sm) var(--spacing-xl) var(--spacing-none) var(--spacing-none);
}
.HelpBodyComponent .image img {
  display: block;
  margin: var(--spacing-sm) var(--spacing-xl) var(--spacing-none) var(--spacing-none);
}
.HelpBodyComponent .icon div,
.HelpBodyComponent .image div {
  flex: 1;
  padding: var(--spacing-none);
}
.HelpBodyComponent .topSection .title {
  font-weight: bold;
  margin-top: var(--spacing-sm);
  font-size: 19px;
}
.HelpBodyComponent .section .title {
  font-size: 16px;
  padding: var(--spacing-xs) var(--spacing-none);
}
.HelpBodyComponent .childSection .section .title.bold {
  font-weight: bold;
}
.HelpBodyComponent .sectionDiv {
  padding: var(--spacing-none);
}
.HelpBodyComponent .childSection .section .title {
  color: var(--gray-700);
}
.HelpBodyComponent .childSection .section .childSection .section .title {
  font-size: 15px;
}
.HelpBodyComponent .childSection .sectionDiv {
  margin-left: var(--spacing-xl);
}
@media screen and (max-width: 1024px) {
  .HelpBodyComponent .title {
    font-size: 20px;
  }
  .HelpBodyComponent div img {
    max-width: 50%;
  }
}

.HelpIconComponent {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-alt-xs);
}
.HelpIconComponent .icon-wrapper {
  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%;
  transition: background-color 0.2s;
}
.HelpIconComponent .icon-wrapper img {
  width: 14px;
  height: 14px;
}
.HelpIconComponent .help-text {
  font-size: var(--font-size-xl);
  color: var(--brand-400);
  margin-left: var(--spacing-sm);
  transition: all 0.2s;
}
.HelpIconComponent:hover .help-text {
  color: var(--brand-300);
}

.HelpOverviewComponent {
  display: flex;
  width: 100%;
  max-width: 1000px;
  padding: var(--spacing-xl) var(--spacing-md);
  box-sizing: border-box;
}
.HelpOverviewComponent .column {
  flex: 1;
  padding: var(--spacing-xl);
  vertical-align: top;
}
.HelpOverviewComponent .section {
  margin-bottom: var(--spacing-md);
}
.HelpOverviewComponent .group-title,
.HelpOverviewComponent .group-link {
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-900);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-xs);
  text-align: left;
}
.HelpOverviewComponent .topic-link {
  font-size: 15px;
  padding: var(--spacing-alt-xs) var(--spacing-none);
}
.HelpOverviewComponent a {
  color: var(--gray-900);
}
.HelpOverviewComponent a:hover {
  color: var(--brand-400);
}
@media screen and (max-width: 1024px) {
  .HelpOverviewComponent {
    flex-direction: column;
    padding: var(--spacing-alt-sm) var(--spacing-md);
  }
  .HelpOverviewComponent .column {
    width: auto;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
  }
  .HelpOverviewComponent .section {
    margin: var(--spacing-none);
    padding: var(--spacing-alt-sm) var(--spacing-none);
  }
  .HelpOverviewComponent .topic-link {
    font-size: 16px;
  }
  .HelpOverviewComponent .group-title,
  .HelpOverviewComponent .group-link {
    font-size: 20px;
    padding: var(--spacing-none) var(--spacing-none) 5px var(--spacing-none);
  }
}

.HelpPageContentComponent {
  width: 100%;
}
.HelpPageContentComponent.topic {
  display: flex;
  width: 1140px;
  max-width: 100%;
  padding: var(--spacing-none);
  border-radius: 8px;
  background-color: var(--gray-100);
  box-sizing: border-box;
}
.HelpPageContentComponent.overview {
  display: block;
}
@media screen and (max-width: 1024px) {
  .HelpPageContentComponent.topic {
    display: block;
    padding: var(--spacing-alt-sm) var(--spacing-md);
    border-bottom: none;
  }
}

.HelpSidebarComponent {
  font-size: 15px;
  width: 300px;
  padding: var(--spacing-xl);
  text-align: left;
}
.HelpSidebarComponent .topic-item {
  font-weight: 700;
  padding: var(--spacing-alt-xs) var(--spacing-none);
}
.HelpSidebarComponent a {
  font-size: 15px;
  font-weight: normal;
  color: var(--gray-600);
}
.HelpSidebarComponent a:hover {
  color: var(--brand-400);
}
.HelpSidebarComponent .group-title,
.HelpSidebarComponent .group-link {
  font-size: 15px;
  color: var(--gray-900);
  padding: var(--spacing-xs) var(--spacing-none) var(--spacing-sm);
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .HelpSidebarComponent {
    display: block;
    width: auto;
    margin-top: var(--spacing-none);
    padding: var(--spacing-xl) var(--spacing-none) var(--spacing-none);
    background-color: var(--gray-100);
  }
}

.HelpTopicComponent {
  line-height: 1.6;
  flex: 0 1 auto;
  min-width: 0;
  width: 760px;
  padding: var(--spacing-xl) var(--spacing-6xl) var(--spacing-xl) var(--spacing-none);
  border-right: 1px solid var(--gray-400);
}
.HelpTopicComponent 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);
}
@media screen and (max-width: 1270px) {
  .HelpTopicComponent {
    width: 640px;
    padding: var(--spacing-xl) 30px var(--spacing-xl) var(--spacing-none);
  }
}
@media screen and (max-width: 1024px) {
  .HelpTopicComponent {
    width: auto;
    max-width: none;
    padding: var(--spacing-xl) var(--spacing-none);
    border-right: none;
  }
}

/* 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.show-second-screen .form-cont {
  margin-top: 140px;
  height: unset;
  justify-content: start;
}

.ImIDModal.show-second-screen .content {
  gap: var(--spacing-none);
}

.ImIDModal.show-second-screen .imid-login-form {
  margin: var(--spacing-5xl) var(--spacing-10xl) var(--spacing-none);
}

.ImIDModal.show-second-screen form .actions {
  margin-top: var(--spacing-xl);
}

#dialog:has(.ImIDModal.show-second-screen) {
  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.show-second-screen .imid-login-form {
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
  }
  .ImIDModal.show-second-screen .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.show-second-screen .first-page .form-cont {
    display: none;
  }
  .ImIDModal.show-second-screen .wrapper-cont:not(.first-page) .info-banner-cont-wrapper {
    display: none;
  }
  .ImIDModal.show-second-screen .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__trigger {
  display: block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.InlineOptionsMenuComponent__trigger > svg {
  width: 20px;
  height: 20px;
}
.InlineOptionsMenuComponent__trigger:hover svg > path {
  fill: var(--brand-400);
}
.InlineOptionsMenuComponent__trigger-image {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: block;
}
.InlineOptionsMenuComponent:has(.open) .InlineOptionsMenuComponent__trigger > svg > path {
  fill: var(--brand-400);
}
.InlineOptionsMenuComponent .options-container {
  position: absolute;
  background: var(--gray-100);
  padding: var(--spacing-md);
  display: none;
  border-radius: var(--radius-sm);
}
.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: var(--line-height-md);
}
.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;
    margin-right: 12px;
  }
  .InlineOptionsMenuComponent:has(.open) .InlineOptionsMenuComponent__trigger > svg > path {
    fill: var(--brand-400);
  }
  .InlineOptionsMenuComponent__trigger {
    width: 20px;
    height: 20px;
  }
  .InlineOptionsMenuComponent__trigger > svg {
    width: 20px;
    height: 20px;
  }
  .InlineOptionsMenuComponent__trigger > svg > path {
    fill: var(--gray-900);
  }
  .InlineOptionsMenuComponent__trigger-image {
    width: 20px;
    height: 20px;
  }
  .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: var(--font-size-lg);
    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);
}

.LabelBadgeComponent {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxs) var(--spacing-alt-xs);
  font-size: var(--font-size-tiny);
  font-weight: 600;
  height: var(--spacing-md);
  line-height: 0.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}
.LabelBadgeComponent.primary {
  color: var(--gray-100);
  background-color: var(--brand-400);
}
.LabelBadgeComponent.secondary {
  padding: var(--spacing-xs) var(--spacing-alt-xs);
  background: var(--info-200);
  color: var(--info-500);
  border-radius: var(--radius-md);
}

.LanguagePopupComponent {
  display: none;
}
.LanguagePopupComponent__content {
  padding: var(--spacing-4xl) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
  text-align: center;
  background: var(--gray-100);
}
.LanguagePopupComponent__sheet-handle {
  display: none;
  width: 48px;
  height: 5px;
  margin: 0 auto var(--spacing-xl);
  border-radius: 999px;
  background: var(--gray-300);
}
.LanguagePopupComponent__header {
  margin-bottom: var(--spacing-5xl);
}
.LanguagePopupComponent__header h2 {
  padding: 0;
  margin: 0 0 var(--spacing-xs);
  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;
}
.LanguagePopupComponent__items {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  align-self: stretch;
  flex-direction: row;
}
.LanguagePopupComponent__item {
  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);
  border: 2px solid transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.3s ease-in-out;
}
.LanguagePopupComponent__item:hover, .LanguagePopupComponent__item:active {
  color: var(--brand-400);
  border-color: var(--brand-400);
  box-shadow: none;
}
.LanguagePopupComponent__item img {
  display: block;
  width: 40px;
  height: 40px;
}
.LanguagePopupComponent__item 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;
  text-align: center;
}
.LanguagePopupComponent__item--selected {
  background: var(--gray-100);
  border-color: var(--brand-400);
}

@media screen and (max-width: 1024px) {
  .LanguagePopupComponent {
    position: fixed;
    z-index: 106;
    inset: 0;
    display: block;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 280ms;
  }
  .LanguagePopupComponent.visible {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .LanguagePopupComponent.visible .LanguagePopupComponent__backdrop {
    opacity: 1;
  }
  .LanguagePopupComponent.visible .LanguagePopupComponent__sheet {
    transform: translateY(0);
  }
  .LanguagePopupComponent__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .LanguagePopupComponent__sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .LanguagePopupComponent__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-sm) var(--spacing-xl) 34px;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: 0 -4.39px 17.56px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
  .LanguagePopupComponent__sheet-handle {
    display: block;
    width: 32px;
    height: 4px;
    margin: var(--spacing-none);
    border-radius: 100px;
    background: var(--gray-400);
  }
  .LanguagePopupComponent__header {
    width: 100%;
    margin: var(--spacing-none);
  }
  .LanguagePopupComponent__header h2 {
    margin: var(--spacing-none);
    text-align: left;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: var(--line-height-lg);
    letter-spacing: 0;
  }
  .LanguagePopupComponent__items {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
  }
  .LanguagePopupComponent__item {
    flex: 0 0 calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
    min-width: 0;
    height: 120px;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    border-radius: var(--radius-md);
  }
  .LanguagePopupComponent__item img {
    width: 40px;
    height: 40px;
  }
  .LanguagePopupComponent__item span {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    letter-spacing: -0.34px;
  }
}
@media screen and (max-width: 360px) {
  .LanguagePopupComponent__content {
    gap: var(--spacing-lg);
  }
  .LanguagePopupComponent__header h2 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-md);
  }
  .LanguagePopupComponent__item {
    height: 100px;
  }
  .LanguagePopupComponent__item img {
    width: 32px;
    height: 32px;
  }
  .LanguagePopupComponent__item span {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    letter-spacing: -0.3px;
  }
}
/* 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;
  cursor: pointer;
}
.LinkComponent:hover {
  color: var(--brand-300);
}
.LinkComponent:focus {
  outline: none;
  border-bottom-color: var(--brand-400);
}
.LinkComponent.underline {
  text-decoration: underline;
  border-bottom: none;
}

.featured .featured-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-3xl);
}

.featured .featured-top-left {
  flex: 1 1 auto;
  min-width: 0;
}

.featured .featured-top-banner {
  flex: 0 0;
  min-height: 308px;
  width: 100%;
  aspect-ratio: 6/7;
}

.featured .featured-top-banner .list-ads-banner-link {
  display: block;
  border-radius: var(--spacing-md);
  overflow: hidden;
}

.featured .featured-top-banner .list-ads-banner-img {
  display: block;
  width: 100%;
  aspect-ratio: 6/7;
  object-fit: cover;
}

.category-list-ads .list-ads-banner-link {
  display: block;
  width: 100%;
  aspect-ratio: 4/1;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.category-list-ads .list-ads-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-view-list-ads .list-ads-banner-link {
  display: block;
  width: 100%;
  aspect-ratio: 7/1;
  border-radius: var(--spacing-md);
  overflow: hidden;
}

.post-view-list-ads .list-ads-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-ads-category-after-top {
  margin: var(--spacing-xl) var(--spacing-none);
  padding: var(--spacing-md) var(--spacing-none);
  box-sizing: border-box;
}

#main:has(.EmptyStateComponent) > #pagecol #contentr:has(.list-ads-empty-state-stack) {
  flex-direction: column;
}

.list-ads-category-after-top.cmp-mob {
  display: none;
}

.dl .gl > .list-ads-category-after-top {
  flex: 0 0 100%;
  width: 100%;
}

.dl .gl > .list-ads-category-after-top .list-ads-banner-link {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--spacing-none);
  padding: var(--spacing-none);
}

.dl .gl > .list-ads-category-after-top .list-ads-banner-img {
  width: 100%;
  height: 100%;
  margin: var(--spacing-none);
}

.list-ads-post-bottom {
  display: block;
  padding: var(--spacing-2xl) var(--spacing-none) var(--spacing-4xl);
  background: white;
}
@media screen and (max-width: 1024px) {
  .list-ads-post-bottom {
    padding: var(--spacing-4xl) var(--spacing-md);
  }
}

@media screen and (max-width: 1200px) {
  .featured .featured-top {
    gap: var(--spacing-xl);
  }
  .featured .featured-top-banner {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .featured .featured-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-none);
    margin-top: var(--spacing-lg);
  }
  .featured .featured-top-banner {
    order: 1;
    flex: 0 0 auto;
    min-height: unset;
    max-width: unset;
    aspect-ratio: 3/1;
    padding: var(--spacing-none) var(--spacing-md);
    box-sizing: border-box;
  }
  .featured .featured-top-left {
    order: 2;
    width: 100%;
  }
  .featured .featured-top-banner .list-ads-banner-link {
    display: block;
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .featured .featured-top-banner .list-ads-banner-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3/1;
    object-fit: cover;
  }
  .category-list-ads .list-ads-banner-link {
    display: block;
    width: 100%;
    aspect-ratio: 4/1;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .category-list-ads .list-ads-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .list-ads-category-after-top {
    display: none;
  }
  .list-ads-category-after-top.cmp-mob {
    display: block;
    padding: var(--spacing-md);
  }
  .dl .gl > .list-ads-category-after-top {
    flex: 0 0 100%;
    width: 100%;
  }
  .dl .gl > .list-ads-category-after-top .list-ads-banner-link {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--spacing-none);
    padding: var(--spacing-none);
  }
  .dl .gl > .list-ads-category-after-top .list-ads-banner-img {
    width: 100%;
    height: 100%;
    margin: var(--spacing-none);
  }
  .post-view-list-ads .list-ads-banner-link {
    display: block;
    width: 100%;
    aspect-ratio: 7/1;
    border-radius: var(--spacing-sm);
    overflow: hidden;
  }
  .post-view-list-ads .list-ads-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.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;
}

.ui-dialog .ui-dialog-content:has(.MapViewComponent) {
  padding-top: var(--spacing-none) !important;
}

.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 {
  display: flex;
  font-size: 16px;
  gap: var(--spacing-md);
  justify-content: flex-end;
  padding: var(--spacing-alt-sm) var(--spacing-alt-sm) 30px var(--spacing-alt-sm) !important;
}

.MapViewComponent .btns .ButtonComponent {
  width: 120px;
}

@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;
  z-index: 100;
}
.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[data-clickable-group-title]:not([data-select-group-title]) > .l > div.i:hover,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) .t.exp:hover,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) .t.nexp:hover {
  background-color: transparent;
}

.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[data-clickable-group-title]:not([data-select-group-title]) > .l > div.i.t2:not(.s):not(.selected-expandable) {
  color: var(--gray-700);
}

.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.s,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.s .title-wrapper,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.s .category-name-container,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.s .circle-symbol,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.s .category-cnt-container,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.selected-expandable,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.selected-expandable .title-wrapper,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.selected-expandable .category-name-container,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.selected-expandable .circle-symbol,
.MultiLevelDropdownComponent[data-clickable-group-title]:not([data-select-group-title]) > .l > div.selected-expandable .category-cnt-container {
  color: var(--brand-400);
}

.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;
  }
}
.MultiSelectBubbleV2Component {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.MultiSelectBubbleV2Component .label-and-reset-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xxs);
}
.MultiSelectBubbleV2Component .label-and-reset-container .label-container {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}
.MultiSelectBubbleV2Component .label-and-reset-container .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;
}
.MultiSelectBubbleV2Component .label-and-reset-container .reset-btn.hidden {
  opacity: 0;
  height: 0;
}
.MultiSelectBubbleV2Component .options-container {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.MultiSelectBubbleV2Component .options-container .option-container {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background-color: var(--gray-300);
  color: var(--gray-900);
  cursor: pointer;
  font-weight: 500;
  letter-spacing: -0.28px;
  transition: all 0.2s;
  user-select: none;
  border: 1px solid var(--gray-300);
}
.MultiSelectBubbleV2Component .options-container .option-container .option-container-icon {
  display: flex;
  align-items: center;
}
.MultiSelectBubbleV2Component .options-container .option-container .option-container-icon svg {
  display: block;
}
.MultiSelectBubbleV2Component .options-container .option-container:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.MultiSelectBubbleV2Component .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px solid var(--brand-400);
}
.MultiSelectBubbleV2Component .options-container .option-container.selected:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--size-sm .options-container .option-container {
  padding: var(--spacing-alt-xs) var(--spacing-alt-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  height: var(--spacing-4xl);
  letter-spacing: -0.28px;
  overflow: hidden;
}
.MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--size-sm .options-container .option-container .option-container-icon svg {
  max-width: var(--spacing-alt-md);
  height: var(--spacing-alt-md);
}
.MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--size-sm .options-container .option-container .option-container-icon img {
  max-width: var(--spacing-alt-md);
  height: var(--spacing-alt-md);
  width: auto;
  object-fit: contain;
}
.MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--size-lg .options-container .option-container {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  height: var(--spacing-6xl);
  letter-spacing: -0.3px;
  overflow: hidden;
}
.MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--size-lg .options-container .option-container .option-container-icon svg {
  max-width: var(--spacing-lg);
  height: var(--spacing-lg);
}
.MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--size-lg .options-container .option-container .option-container-icon img {
  max-width: var(--spacing-lg);
  height: var(--spacing-lg);
  width: auto;
  object-fit: contain;
}
.MultiSelectBubbleV2Component--img-icon-filters {
  --msb-img-icon-filter-default: none;
  --msb-img-icon-filter-on-brand: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(5660%) hue-rotate(196deg) brightness(100%) contrast(102%);
  --msb-img-icon-filter-on-light: brightness(0) saturate(100%) invert(1);
  --msb-img-icon-filter-disabled: brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(100%) hue-rotate(185deg) brightness(95%) contrast(88%);
}
.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container .option-container-icon img,
.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container .option-container-icon svg {
  display: block;
  filter: var(--msb-img-icon-filter-default);
}
.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon img,
.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon svg {
  filter: var(--msb-img-icon-filter-on-brand);
}
.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container:hover .option-container-icon img,
.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container:hover .option-container-icon svg {
  filter: var(--msb-img-icon-filter-on-light);
}
.MultiSelectBubbleV2Component.disabled {
  pointer-events: none;
}
.MultiSelectBubbleV2Component.disabled .label-and-reset-container .reset-btn {
  display: none;
}
.MultiSelectBubbleV2Component.disabled .options-container .option-container {
  cursor: default;
}
.MultiSelectBubbleV2Component.disabled .options-container .option-container:hover {
  background-color: inherit;
  color: inherit;
  border-color: inherit;
}
.MultiSelectBubbleV2Component.disabled .options-container .option-container:not(.selected) {
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  background: var(--gray-400);
  border: 1px solid var(--gray-400);
}
.MultiSelectBubbleV2Component.disabled .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px solid var(--brand-400);
}
.MultiSelectBubbleV2Component.disabled.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected) .option-container-icon img, .MultiSelectBubbleV2Component.disabled.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected) .option-container-icon svg {
  filter: var(--msb-img-icon-filter-disabled);
}
.MultiSelectBubbleV2Component.disabled.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected):hover .option-container-icon img, .MultiSelectBubbleV2Component.disabled.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected):hover .option-container-icon svg {
  filter: var(--msb-img-icon-filter-disabled);
}
.MultiSelectBubbleV2Component.disabled.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon img, .MultiSelectBubbleV2Component.disabled.MultiSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon svg {
  filter: var(--msb-img-icon-filter-on-brand);
}
.MultiSelectBubbleV2Component.felement_err {
  border: none !important;
}
.MultiSelectBubbleV2Component.felement_err .options-container .option-container {
  border: 1px solid var(--error-400);
  background-color: var(--gray-100);
}
.MultiSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.MultiSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px solid var(--brand-400);
}
.MultiSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}

@media screen and (max-width: 1024px) {
  .MultiSelectBubbleV2Component .options-container .option-container:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px solid var(--gray-300);
  }
  .MultiSelectBubbleV2Component .options-container .option-container.selected:hover {
    background-color: var(--brand-400);
    color: var(--gray-100);
    border: 1px solid var(--brand-400);
  }
  .MultiSelectBubbleV2Component.disabled .options-container .option-container:hover, .MultiSelectBubbleV2Component.disabled .options-container .option-container.selected:hover {
    background-color: inherit;
    color: inherit;
    border-color: inherit;
  }
  .MultiSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px solid var(--gray-300);
  }
  .MultiSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected:hover {
    background-color: var(--brand-400);
    color: var(--gray-100);
    border: 1px solid var(--brand-400);
  }
  .MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container:hover:not(.selected) .option-container-icon img, .MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container:hover:not(.selected) .option-container-icon svg {
    filter: var(--msb-img-icon-filter-default);
  }
  .MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container.selected:hover .option-container-icon img, .MultiSelectBubbleV2Component.MultiSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container.selected:hover .option-container-icon svg {
    filter: var(--msb-img-icon-filter-on-light);
  }
}
.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;
  border-radius: 9px;
}
.MultiSelectDropdownComponent:not(body).felement_err > .me {
  background-color: var(--gray-100);
  border-radius: 9px;
}
.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.multi-selected-option-chip {
  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.multi-selected-option-chip 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-selected-option-chip .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);
}
.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.without-republish-action .extend-section-info.auto-republish-active {
  min-width: 330px;
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section.without-republish-action .extend-section-info.auto-republish-active .until-date {
  white-space: nowrap;
}
.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.auto-republish-active {
  gap: var(--spacing-xs);
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info.auto-republish-active .until-date {
  color: var(--gray-600);
  letter-spacing: normal;
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info.auto-republish-active .days-left {
  color: var(--text-primary);
  letter-spacing: normal;
}
.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);
  display: flex;
  align-items: center;
  gap: 4px;
}
.MyAdCardComponent .ad-card-bottom-section-wrapper .bottom-section .extend-section .extend-section-info .until-date img.auto-republish-icon {
  width: 12px;
  height: 12px;
}
.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 .expire-days-and-republish-wrapper .expire-days-wrapper.auto-republish-active {
    align-items: flex-start;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper.auto-republish-active .expire-days {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    color: var(--gray-900);
    line-height: 16px;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper.auto-republish-active .auto-republish-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-alt-xs);
    color: var(--gray-600);
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper.auto-republish-active .auto-republish-icon {
    width: 16px;
    height: 16px;
  }
  .MyAdCardComponent .mobile-ad-card-info-section .info-section .expire-days-and-republish-wrapper .expire-days-wrapper.auto-republish-active .auto-republish-message {
    color: var(--gray-900);
  }
  .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);
  }
}
@keyframes chatTypingPulse {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
.MyMessagesPageComponent .messagesStandalonePage {
  max-width: 1140px;
  padding-top: var(--spacing-alt-sm);
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesWarningBanner {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--delivery-100);
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesWarningBanner__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesWarningBanner__title {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  font-weight: 700;
  letter-spacing: -0.28px;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesWarningBanner__description {
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  letter-spacing: -0.28px;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesWarningBanner--mobile {
  display: none !important;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesWarningBanner--desktop {
  display: flex !important;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesLayout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--spacing-xl);
  align-items: start;
  min-height: 843px;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesLayout__left, .MyMessagesPageComponent .messagesStandalonePage .messagesLayout__right {
  min-width: 0;
  background: var(--gray-100);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesLayout__left {
  background: transparent;
  border: none;
  border-right: 1px solid var(--gray-400);
  border-radius: 0;
  padding-right: var(--spacing-xl);
  overflow: visible;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesLayout__right {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.MyMessagesPageComponent .messagesStandalonePage #pageTabBar {
  margin: 0 0 var(--spacing-lg);
}
.MyMessagesPageComponent .messagesStandalonePage #pageTabBar > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}
.MyMessagesPageComponent .messagesStandalonePage #pageTabBar a, .MyMessagesPageComponent .messagesStandalonePage #pageTabBar span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--spacing-2xl);
  border-radius: 24px;
  background: var(--gray-300);
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.32px;
  text-decoration: none;
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage #pageTabBar span {
  background: var(--brand-200);
  color: var(--brand-400);
}
.MyMessagesPageComponent .messagesStandalonePage #pageTabBar .c {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list {
  padding-right: 0;
  overscroll-behavior: contain;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg > a.messagesListItem {
  display: block;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg > a.messagesListItem:hover {
  background: var(--gray-200);
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg > a.messagesListItem.is-active {
  background: var(--gray-300);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel {
  position: relative;
  width: 100%;
  margin: 0 0 var(--spacing-lg);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__mobileHeader {
  display: none;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__inputWrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius-md);
  background: var(--gray-300);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__input {
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 84px 0 var(--spacing-lg);
  border: 0;
  outline: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  line-height: 52px;
  letter-spacing: -0.3px;
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__input::placeholder {
  color: var(--gray-500);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__input::-webkit-search-cancel-button, .MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__input::-webkit-search-decoration {
  display: none;
  appearance: none;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__clear {
  position: absolute;
  top: 50%;
  right: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gray-600);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__input:placeholder-shown + .messagesSearchPanel__clear {
  display: none;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterButton {
  position: absolute;
  top: 50%;
  right: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterButton:hover {
  background: var(--gray-300);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterButton.is-active, .MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterButton.is-active:hover {
  background: transparent;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterButton.is-active .messagesSearchPanel__filterIcon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(5660%) hue-rotate(196deg) brightness(100%) contrast(102%);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterIcon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterMenu {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  right: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 220px;
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1019607843);
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchPanel__filterMenu.is-open {
  display: flex;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesFilterOption {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  padding: 0 var(--spacing-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-xs);
  font-weight: 500;
  letter-spacing: -0.28px;
  text-align: left;
  cursor: pointer;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesFilterOption:hover {
  background: var(--gray-300);
  color: var(--gray-900);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesFilterOption.is-active {
  background: var(--brand-200);
  color: var(--brand-400);
  font-weight: 600;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesFilterOption.is-active:hover {
  background: var(--brand-200);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesSearchHighlight {
  padding: 0 1px;
  border-radius: 3px;
  background: #fff1a8;
  color: inherit;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesLayout__left {
  padding-top: 2px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadRow {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--spacing-xl);
  align-items: start;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadMedia {
  position: relative;
  width: 78px;
  min-width: 78px;
  height: 78px;
  margin: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadPreviewImage {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-alt-xs);
  object-fit: cover;
  background: var(--gray-300);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadPreviewImage.is-direct {
  display: block;
  object-position: center;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadPreviewImage.is-direct.av_user {
  border-radius: 999px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadPreviewImage.is-direct.av_comp {
  border-radius: var(--radius-alt-xs);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar {
  position: absolute;
  width: 32px;
  height: 32px;
  right: 0;
  bottom: 0;
  border: 1.6px solid var(--gray-100);
  overflow: hidden;
  background: var(--gray-100);
  border-radius: 999px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar.is-business {
  border-radius: 4px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar img, .MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar .av_user, .MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar .av_comp {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: transparent;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar img.av_user, .MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar .av_user {
  border-radius: 999px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar.is-business img, .MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar.is-business img.av_comp, .MyMessagesPageComponent .messagesStandalonePage .msgThreadAvatar.is-business .av_comp {
  border-radius: 4px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadBody {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-width: 0;
  gap: var(--spacing-xs);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadTop, .MyMessagesPageComponent .messagesStandalonePage .msgThreadMiddle, .MyMessagesPageComponent .messagesStandalonePage .msgThreadBottom {
  display: flex;
  align-items: center;
  min-height: 20px;
  gap: var(--spacing-sm);
  min-width: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadLabelRow {
  display: flex;
  align-items: flex-start;
  min-height: 20px;
  justify-content: space-between;
  gap: var(--spacing-md);
  height: 20px;
  margin-bottom: 2px;
  width: 100%;
  min-width: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadTop {
  width: 100%;
  min-width: 0;
  min-height: 20px;
  align-items: baseline;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadMiddle {
  min-width: 0;
  min-height: 24px;
  overflow: hidden;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadName {
  flex: 1 1 auto;
  display: block;
  width: 0;
  min-width: 0;
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-height-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.28px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadDate {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  color: var(--gray-700);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadPreview {
  flex: 1 1 0;
  width: 0;
  max-width: 100%;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: -0.15px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadMiddle > .msgThreadPreview, .MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg > a.messagesListItem .msgThreadMiddle > .msgThreadPreview {
  display: block;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadTypingIndicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--line-height-md);
  vertical-align: middle;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadTypingIndicator__dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--gray-700);
  animation: chatTypingPulse 1.2s infinite ease-in-out;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadTypingIndicator__dot:nth-child(2) {
  animation-delay: 0.15s;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadTypingIndicator__dot:nth-child(3) {
  animation-delay: 0.3s;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: var(--spacing-xxs) 0;
  border-radius: 100px;
  background: var(--brand-400);
  color: var(--gray-100);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: 12px;
  letter-spacing: -0.24px;
  text-align: center;
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadSecondary, .MyMessagesPageComponent .messagesStandalonePage .msgThreadState {
  color: var(--gray-700);
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadSecondary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list a.messagesListItem .msgThreadSecondary, .MyMessagesPageComponent .messagesStandalonePage #msg_list a.messagesListItem .messagesListItem__secondary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadBottom .chatLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 20px;
  padding: 2px 4px;
  border-radius: var(--radius-alt-xs);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  line-height: var(--line-height-alt-xs);
  letter-spacing: -0.24px;
  white-space: nowrap;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadBottom .chatLabel.inactiveType {
  background: var(--gray-400);
  color: var(--gray-600);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadBottom .chatLabel.deletedType {
  background: var(--error-100);
  color: var(--error-400);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadName, .MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadDate, .MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadPreview, .MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadSecondary {
  color: var(--gray-600);
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadDate, .MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadPreview, .MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadSecondary {
  font-weight: 500;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadDate, .MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadSecondary {
  letter-spacing: -0.24px;
}
.MyMessagesPageComponent .messagesStandalonePage .msgThreadRow.is-inactive .msgThreadPreview {
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg > a.messagesListItem > .msgThreadRow {
  width: auto;
  height: auto;
  align-items: inherit;
  margin-right: 0;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg > a.messagesListItem .msgThreadMedia {
  margin-right: 0;
  flex: none;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list .dlmsg > a.messagesListItem .msgThreadBody {
  width: auto;
  flex: 1 1 auto;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody #msg_list .dlmsg:first-child {
  margin-top: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__row {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__media {
  position: relative;
  width: 78px;
  min-width: 78px;
  height: 78px;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__previewImage {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-alt-xs);
  background: var(--gray-300);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__previewImage.is-direct {
  object-fit: contain;
  padding: var(--spacing-sm);
  background: var(--gray-200);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__avatar {
  width: 32px;
  height: 32px;
  right: 0;
  bottom: 0;
  border: 2px solid var(--gray-100);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 72px;
  justify-content: center;
  gap: var(--spacing-xs);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__top, .MyMessagesPageComponent .messagesStandalonePage .messagesListItem__bottom {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__top {
  justify-content: space-between;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__middle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__name, .MyMessagesPageComponent .messagesStandalonePage .messagesListItem__preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-height-sm);
  color: var(--gray-900);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__name.is-unread, .MyMessagesPageComponent .messagesStandalonePage .messagesListItem__preview.is-unread {
  font-weight: 700;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__preview {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--gray-900);
  flex: 1;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__date, .MyMessagesPageComponent .messagesStandalonePage .messagesListItem__state {
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  color: var(--gray-700);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__bottom {
  align-items: flex-start;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__badge {
  min-width: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: var(--font-size-tiny);
  line-height: var(--line-height-tiny);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-400);
  color: var(--gray-100);
  font-weight: 700;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesListItem__row.is-inactive .messagesListItem__previewImage, .MyMessagesPageComponent .messagesStandalonePage .messagesListItem__row.is-deleted .messagesListItem__previewImage {
  opacity: 0.6;
  filter: grayscale(1);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyChatState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 738px;
  border-radius: 0;
  text-align: center;
  color: var(--gray-700);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesLayout__right--chat.messagesEmptyChatState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
  padding: var(--spacing-xl);
  text-align: center;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyChatState__title, .MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__title, .MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--line-height-md);
  color: var(--gray-900);
  letter-spacing: -0.34px;
  margin: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyChatState__description, .MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__description, .MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  color: var(--gray-700);
  letter-spacing: -0.3px;
  margin: 0;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody .messagesLayout__right--chat.messagesEmptyChatState {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyChatState__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyChatState__icon {
  width: 160px;
  height: 160px;
  margin: 0 0 8px;
  background: url("/img/redesign/icons/message-letter.svg") center center/contain no-repeat;
  flex: 0 0 auto;
  object-fit: contain;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyChatState__title {
  width: 100%;
  max-width: 420px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-weight: 700;
  letter-spacing: -0.34px;
  color: var(--gray-900);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyChatState__description {
  width: 100%;
  max-width: 420px;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 400;
  letter-spacing: -0.3px;
  color: var(--gray-900);
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-5xl) 40px;
  text-align: center;
  color: var(--gray-900);
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__title {
  width: 100%;
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-weight: 700;
  letter-spacing: -0.34px;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__description {
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 400;
  letter-spacing: -0.3px;
  text-align: center;
  text-overflow: ellipsis;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__descriptionContent, .MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__queryLine, .MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__textLine {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__queryLine {
  max-width: 320px;
  margin: 0 auto;
  white-space: nowrap;
}
.MyMessagesPageComponent .messagesStandalonePage .messagesEmptyState__query {
  display: inline-block;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.MyMessagesPageComponent .messagesStandalonePage .ChatTitleComponent, .MyMessagesPageComponent .messagesStandalonePage .chat, .MyMessagesPageComponent .messagesStandalonePage .chatAppShell {
  margin: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .chatAppShell--conversation {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage .chatAppShell__header, .MyMessagesPageComponent .messagesStandalonePage .chatAppShell__alerts {
  flex: 0 0 auto;
  width: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage .chatAppShell__alerts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-height: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .chatAppShell__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage .chatAppShell__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage .chatAppShell__messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator {
  display: none;
  margin-bottom: var(--spacing-lg);
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator.is-visible {
  display: flex;
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator .r > .rb {
  align-items: flex-start;
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator__bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: 16px;
  padding: 5px 9px;
  border-radius: 14px;
  background: var(--gray-300);
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator .l img.av_user, .MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator .l img.av_comp {
  width: 32px;
  height: 32px;
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator__dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--gray-700);
  animation: chatTypingPulse 1.2s infinite ease-in-out;
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator__dot:nth-child(2) {
  animation-delay: 0.15s;
}
.MyMessagesPageComponent .messagesStandalonePage .chatTypingIndicator__dot:nth-child(3) {
  animation-delay: 0.3s;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedView {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedView__mobileHeader {
  display: none;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 766px;
  text-align: center;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 640px;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__icon {
  width: 160px;
  height: 160px;
  margin-bottom: 0;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 0 40px 12px;
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__title {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-weight: 700;
  letter-spacing: -0.34px;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__body {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 400;
  letter-spacing: -0.3px;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  justify-content: center;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  color: var(--gray-800);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__button--delete {
  background: var(--gray-300);
  color: var(--gray-800);
}
.MyMessagesPageComponent .messagesStandalonePage .chatBlockedState__button--unblock {
  background: var(--brand-100);
  color: var(--brand-400);
}
.MyMessagesPageComponent .messagesStandalonePage .chatMobileBackBar {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-md);
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list {
  scrollbar-width: thin;
  scrollbar-color: #cfcfd6 transparent;
  overscroll-behavior: contain;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list::-webkit-scrollbar {
  width: 1px;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list::-webkit-scrollbar-track {
  background: transparent;
}
.MyMessagesPageComponent .messagesStandalonePage #msg_list::-webkit-scrollbar-thumb {
  background: #cfcfd6;
  border-radius: 999px;
}
.MyMessagesPageComponent .messagesStandalonePage.chatPageTabBody .chat, .MyMessagesPageComponent .messagesStandalonePage.chatPageTabBody .chatAppShell--conversation {
  width: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage.chatPageTabBody .chatReply {
  margin-top: var(--spacing-xl);
  padding-top: 0;
  border-top: 0;
  background: transparent;
}
.MyMessagesPageComponent .messagesStandalonePage.chatPageTabBody .chatReply form {
  display: block;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesLayout--emptyInbox {
  display: block;
  min-height: 738px;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesLayout__left--full {
  width: 100%;
  max-width: 100%;
  min-height: 738px;
  border-right: 0;
  padding-right: 0;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesInboxEmptyState {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 660px;
  padding: var(--spacing-4xl) var(--spacing-2xl) var(--spacing-8xl);
  box-sizing: border-box;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesInboxEmptyState__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 704px;
  text-align: center;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesInboxEmptyState__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin: 0 0 var(--spacing-2xl);
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesInboxEmptyState__iconImage {
  display: block;
  width: 100%;
  height: 100%;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesInboxEmptyState__title {
  margin: 0 0 var(--spacing-md);
  color: var(--gray-900);
  font-size: 17px;
  line-height: var(--line-height-lg);
  font-weight: 700;
  letter-spacing: -0.64px;
}
.MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesInboxEmptyState__description {
  margin: 0;
  color: var(--gray-800);
  max-width: 704px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 400;
  letter-spacing: -0.16px;
}
.MyMessagesPageComponent .messagesPageHeading {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: fit-content;
  margin: 0 0 var(--spacing-lg);
  cursor: pointer;
}
.MyMessagesPageComponent .messagesPageHeading .current-section {
  color: var(--gray-900);
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.MyMessagesPageComponent .messagesPageHeading img {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-out;
}
.MyMessagesPageComponent .messagesPageHeading img.up {
  transform: rotate(-180deg);
}
.MyMessagesPageComponent .messagesMobileAccountMenu, .MyMessagesPageComponent .messagesMobileAccountOverlay {
  display: none;
}
.MyMessagesPageComponent [data-role=messages-top-tabs] .UserPageHorizontalTabComponent {
  padding: var(--spacing-none);
}
.MyMessagesPageComponent [data-role=messages-top-tabs] .UserPageHorizontalTabComponent .option-container {
  gap: var(--spacing-sm);
  max-height: 40px;
}
.MyMessagesPageComponent [data-role=messages-top-tabs] .UserPageHorizontalTabComponent .c {
  margin-left: 0;
}

body:has(.MyMessagesPageComponent .messagesStandalonePage) #pfooter {
  display: none !important;
}

@media screen and (min-width: 1025px) {
  body:has(.MyMessagesPageComponent .messagesStandalonePage) #pfooter {
    display: contents !important;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage) #pfooter > .c {
    display: contents;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage) #pfooter > .c > .l,
  body:has(.MyMessagesPageComponent .messagesStandalonePage) #pfooter > .c > .r {
    display: none;
  }
}
body:has(.MyMessagesPageComponent .messagesStandalonePage) {
  padding-bottom: 0 !important;
}

.tipsy.chatUserTooltip .tipsy-inner {
  max-width: 360px;
  white-space: pre-line;
}

@media screen and (max-width: 1024px) {
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPage--list) {
    margin-bottom: 0 !important;
  }
  body:has(.MyMessagesPageComponent .messagesPage) #pfooter {
    display: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage {
    padding: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesLayout__left, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesLayout__right--chat {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: var(--gray-100);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesLayout__left, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesLayout__right--chat {
    padding-left: 0;
    padding-right: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list > .messagesWarningBanner--desktop, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat > .messagesWarningBanner--desktop {
    display: none !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesWarningBanner--mobile {
    display: flex !important;
    margin-bottom: 16px;
    width: 100%;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .messagesWarningBanner--mobile {
    display: none !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedView__mobileHeader {
    display: block;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg) 0;
    box-sizing: border-box;
    background: var(--gray-100);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedView__mobileHeader .chatMobileBackBar {
    margin-bottom: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState {
    min-height: calc(var(--window-inner-height, 100dvh) - 276px);
    padding: var(--spacing-2xl) var(--spacing-lg);
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState__icon {
    width: 132px;
    height: 132px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState__actions {
    width: 100%;
    max-width: 420px;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState__button {
    width: 100%;
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesLayout__left {
    display: block !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list.messagesPage--empty-inbox .messagesLayout__left--full {
    padding: var(--spacing-2xl) var(--spacing-lg);
    min-height: auto;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list.messagesPage--empty-inbox .messagesInboxEmptyState {
    min-height: calc(var(--window-inner-height, 100dvh) - var(--header-height-with-secondary-header) - 160px);
    padding: var(--spacing-2xl) var(--spacing-sm) var(--spacing-6xl);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list.messagesPage--empty-inbox .messagesInboxEmptyState__content {
    max-width: 280px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list.messagesPage--empty-inbox .messagesInboxEmptyState__icon {
    width: 160px;
    height: 160px;
    margin-bottom: var(--spacing-xl);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesLayout__left {
    position: relative;
    display: flex !important;
    flex-direction: column;
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu {
    display: none;
    position: absolute;
    z-index: 3;
    top: 68px;
    left: var(--spacing-lg);
    width: auto;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--gray-100);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > span, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: auto;
    padding: var(--spacing-md) var(--spacing-none);
    text-decoration: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > span > div {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-none);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > span > div > span, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a > span {
    color: var(--gray-900);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.3px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > span > div > span, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a:hover > span:not(.cnt) {
    color: var(--brand-400);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > span > div > img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a > img {
    width: 20px;
    height: 20px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a:hover > img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a > img + img {
    display: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a:hover > img + img {
    display: block;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > span > div .cnt, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu > a .cnt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10px;
    width: fit-content;
    height: 20px;
    padding: var(--spacing-none) 5px;
    border-radius: 10px;
    background-color: var(--accent-malachite);
    color: var(--gray-100);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountMenu .dot:after {
    top: 0;
    right: -8px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesMobileAccountOverlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesLayout__right--chat {
    display: none;
    width: 0;
    height: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list [data-role=messages-top-tabs] {
    order: 2;
    margin: 0 0 var(--spacing-sm);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel {
    order: 1;
    margin: 0 0 var(--spacing-sm);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
    min-height: 48px;
    padding: var(--spacing-sm) 4px;
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileTitle {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--gray-900);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-xl);
    font-weight: 700;
    letter-spacing: -0.44px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media screen and (max-width: 1024px) and (max-width: 450px) {
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileTitle {
    font-size: clamp(16px, 16px + (100vw - 320px) * 0.077, var(--font-size-2xl));
    line-height: 1.15;
  }
}
@media screen and (max-width: 1024px) {
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileActions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 0 0 auto;
    height: 32px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileIconButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileFilterButton.is-active, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileFilterButton.is-active:hover {
    background: transparent;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileFilterButton.is-active .messagesSearchPanel__mobileFilterIcon {
    filter: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(5660%) hue-rotate(196deg) brightness(100%) contrast(102%);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileSearchIcon {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__mobileFilterIcon {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__inputWrap {
    display: none;
    min-height: 44px;
    margin-top: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel.is-search-open .messagesSearchPanel__inputWrap {
    display: flex;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__input {
    height: 44px;
    min-height: 44px;
    padding: 0 44px 0 var(--spacing-lg);
    font-size: var(--font-size-md);
    line-height: 44px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__inputWrap > .messagesSearchPanel__filterButton {
    display: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__clear {
    right: var(--spacing-sm);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesSearchPanel__filterMenu {
    min-width: 220px;
    max-width: calc(100vw - 64px);
    padding: var(--spacing-sm);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list {
    order: 3;
    display: block;
    min-height: 0;
    height: auto;
    max-height: none !important;
    overflow: visible !important;
    flex: none !important;
    padding: var(--spacing-alt-sm) 0 0;
    background: var(--gray-100);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg {
    margin: 0;
    background: var(--gray-100);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg + .dlmsg {
    margin-top: var(--spacing-2xl);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem {
    display: block;
    min-height: 102px;
    margin: 0;
    padding: var(--spacing-md) 0;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem.has-label-row {
    min-height: 122px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem:hover, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem.is-active, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow > .msgThreadBody {
    background: transparent;
    box-shadow: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow {
    display: grid;
    column-gap: var(--spacing-lg);
    align-items: start;
    min-height: 78px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.has-label {
    min-height: 98px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow > div {
    float: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadName, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadPreview, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadSecondary, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadDate, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadState {
    min-width: 0;
    width: auto;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadName {
    flex: 1 1 auto;
    color: var(--gray-900);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: 700;
    letter-spacing: -0.28px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadPreview {
    flex: 1 1 auto;
    color: var(--gray-800);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    font-weight: 500;
    letter-spacing: -0.3px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadDate {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    color: var(--gray-800);
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-alt-xs);
    font-weight: 500;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadSecondary, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadState {
    color: var(--gray-800);
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-alt-xs);
    font-weight: 500;
    letter-spacing: -0.24px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadSecondary {
    color: var(--gray-800);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadBadge {
    width: 20px;
    min-width: 20px;
    height: 20px;
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-sm);
    font-weight: 500;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadAvatar img.av_comp, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .msgThreadAvatar img.av_user, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .messagesListItem__avatar img.av_comp, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem .messagesListItem__avatar img.av_user {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadMedia {
    position: relative;
    width: 78px;
    min-width: 78px;
    height: 78px;
    margin: 0;
    align-self: start;
    overflow: visible;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadPreviewImage, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesListItem__previewImage {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-alt-xs);
    object-fit: cover;
    object-position: center;
    background: transparent;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesListItem__avatar {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1.5px solid var(--gray-100);
    background: transparent;
    box-shadow: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar img.av_user {
    border-radius: 999px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar.is-business, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar.is-business img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar img.av_comp {
    border-radius: 4px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar .av_user, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadAvatar .av_comp {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesListItem__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadBody {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 0;
    min-height: 72px;
    height: 72px;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    align-self: start;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem.has-label-row .msgThreadBody {
    min-height: 98px;
    height: 98px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadLabelRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-alt-sm);
    min-height: 20px;
    margin: 0 0 var(--spacing-xs);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadLabelRow .chatLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    margin: 0;
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-alt-xs);
    color: var(--gray-100);
    font-size: var(--font-size-tiny);
    line-height: var(--line-height-tiny);
    font-weight: 600;
    letter-spacing: -0.2px;
    white-space: nowrap;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadLabelRow .chatLabel.orderType {
    background: var(--delivery-300);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadLabelRow .chatLabel.resumeType {
    background: var(--accent-argentinaBlue);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadLabelRow .chatLabel.priceNegotiationType {
    background: var(--accent-blue);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadMeta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadTop, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadMiddle {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
    margin: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadTop {
    align-items: baseline;
    min-height: 20px;
    margin-bottom: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadMiddle {
    min-height: 24px;
    margin-bottom: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadBottom {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    min-height: 16px;
    margin: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .msgThreadBadge {
    justify-self: end;
    align-self: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    font-size: var(--font-size-tiny);
    line-height: var(--line-height-sm);
    flex-shrink: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadName, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadDate, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadPreview, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadSecondary {
    color: var(--gray-600);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadDate, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadPreview, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadSecondary {
    font-weight: 500;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadDate, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadSecondary {
    letter-spacing: -0.24px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list #msg_list .dlmsg > a.messagesListItem > .msgThreadRow.is-inactive .msgThreadPreview {
    line-height: var(--line-height-md);
    letter-spacing: -0.3px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: calc(var(--chat-mobile-viewport-height, var(--window-inner-height, 100dvh)) - (var(--header-height-with-secondary-header) - var(--spacing-10xl)));
    height: calc(var(--chat-mobile-viewport-height, var(--window-inner-height, 100dvh)) - (var(--header-height-with-secondary-header) - var(--spacing-10xl)));
    overflow: hidden;
    padding-top: 0;
    background: var(--gray-100);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .messagesLayout__right--chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout__right--chat {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .messagesLayout__right--chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout__right--chat {
    position: relative;
    padding: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .messagesLayout__left, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout__left {
    display: none;
    width: 0;
    height: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileHeader, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileHeader {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--gray-100);
    flex: 0 0 auto;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-lg) 0;
    background: var(--gray-100);
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar .hdr, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu .InlineOptionsMenuComponent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu .InlineOptionsMenu, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar .hdr, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu .InlineOptionsMenuComponent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu .InlineOptionsMenu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    position: static;
    flex: 0 0 auto;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu {
    margin-left: auto;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar .hdr, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar .hdr {
    font-size: 0;
    line-height: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar .hdr span, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar .hdr .txt, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar .hdr span, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar .hdr .txt {
    display: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar .hdr img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar .hdr img {
    display: block;
    width: 28px;
    height: 28px;
    transform: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu .InlineOptionsMenuComponent > img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu .InlineOptionsMenuComponent > svg, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu .InlineOptionsMenuComponent > img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu .InlineOptionsMenuComponent > svg {
    display: block;
    width: 28px;
    height: 28px;
    transform: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu .InlineOptionsMenuComponent .inline-menu-overlay, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu .InlineOptionsMenuComponent .inline-menu-overlay {
    z-index: 50;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatMobileBackBar__menu .InlineOptionsMenuComponent > .options-container.open, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatMobileBackBar__menu .InlineOptionsMenuComponent > .options-container.open {
    z-index: 60;
    background: var(--gray-100);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatReply, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell--conversation, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__body, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__content, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__messages, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatReply, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell--conversation, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__body, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__content, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__messages {
    width: 100%;
    max-width: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    margin: 0;
    padding: var(--spacing-md) 0 var(--spacing-alt-md);
    background: var(--gray-100) !important;
    border-bottom: 1px solid #e8e8ec;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
    z-index: 12;
    flex: 0 0 auto;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent > .Container, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent > .container, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent > .Container, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent > .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatHeaderCard, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatHeaderCard {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 66px minmax(0, 1fr);
    column-gap: var(--spacing-lg);
    align-items: start;
    margin-bottom: 0;
    padding: 0 var(--spacing-lg);
    box-sizing: border-box;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatHeaderMenu, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .InlineOptionsMenuComponent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .InlineOptionsMenu, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatHeaderMenu, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .InlineOptionsMenuComponent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .InlineOptionsMenu {
    display: none;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatHeaderMedia, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatHeaderMedia {
    width: 66px;
    min-width: 66px;
    height: 66px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatHeaderMedia > .l, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatHeaderMedia > .l a, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatHeaderMedia > .l img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatHeaderMedia > .l, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatHeaderMedia > .l a, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatHeaderMedia > .l img {
    width: 60px;
    height: 60px;
    border-radius: 5px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatHeaderContent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatUserRow, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatUserInfo, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatHeaderContent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatUserRow, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatUserInfo, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatUserName, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper a, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatUserName, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper a {
    line-height: var(--line-height-sm);
    font-weight: 500;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .chatUserName, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .chatUserName {
    font-size: var(--font-size-xxs);
    line-height: var(--line-height-alt-xs);
    letter-spacing: -0.24px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper a, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper .priceCell, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper a, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper .priceCell {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0e0f21;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper a, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper a {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: -0.28px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper .priceCell, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper .priceCell {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-sm);
    font-weight: 600;
    letter-spacing: -0.26px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper.inactivePost .inactivePostTitle, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper.inactivePost .priceCell, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper.inactivePost .inactivePostTitle, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper.inactivePost .priceCell {
    color: var(--gray-500);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper.inactivePost .chatLabel.inactiveType, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper.inactivePost .chatLabel.inactiveType {
    background: var(--gray-300);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper.deletedPost, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper.deletedPost {
    display: flex;
    width: fit-content;
    max-width: 100%;
    overflow: visible;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent .titleWrapper.deletedPost .chatLabel.deletedType, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper.deletedPost .chatLabel.deletedType {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    background: var(--error-100);
    color: var(--error-500);
    line-height: var(--line-height-alt-xs);
    white-space: nowrap;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .chatHeaderCard, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .chatHeaderCard {
    grid-template-columns: 66px minmax(0, 1fr);
    align-items: center;
    min-height: 66px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .chatHeaderMedia, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .chatHeaderMedia {
    width: 66px;
    min-width: 66px;
    height: 66px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__avatar, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__avatar {
    position: static;
    width: 60px;
    height: 60px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__avatar img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__avatar .av_user, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__avatar .av_comp, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__avatar img, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__avatar .av_user, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__avatar .av_comp {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .chatHeaderContent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .chatUserRow, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .chatUserInfo, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .chatHeaderContent, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .chatUserRow, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .chatUserInfo {
    display: flex;
    align-items: center;
    height: 60px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .ChatTitleComponent.is-direct .chatUserName, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .chatUserName {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    letter-spacing: -0.28px;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__body, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__content, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__messages, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__body, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__content, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__messages {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__body > .chatAppShell__content, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__body > .chatAppShell__content {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__body > .chatAppShell__composer, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__body > .chatAppShell__composer {
    flex: 0 0 auto;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell--conversation, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell--conversation {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatAppShell__alerts, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatAppShell__alerts {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatReply, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatReply {
    position: relative;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 11;
    margin: 0;
    padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--gray-100);
    border-top: 0;
    flex: 0 0 auto;
    overflow: hidden;
    contain: layout paint;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatReply form, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatReply form {
    display: block;
    padding: 0 var(--spacing-md);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatReply input[type=button], .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatReply input[type=button] {
    grid-column: 2;
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--gray-300) url("/img/redesign/icons/arrow-top.svg") center center/28px 28px no-repeat;
    box-shadow: none;
    text-indent: -9999px;
    overflow: hidden;
    align-self: center;
    justify-self: center;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 0;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout__left {
    display: none !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .messagesLayout__right--chat {
    position: fixed !important;
    top: calc(var(--header-height-with-secondary-header) - var(--spacing-10xl));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    margin: 0;
    padding: 0 !important;
    background: var(--gray-100);
    border: 0;
    box-sizing: border-box;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open.messagesPage--chat-slide-enter .messagesLayout__right--chat {
    transform: translate3d(100%, 0, 0);
    box-shadow: -18px 0 32px rgba(18, 25, 38, 0.16);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open.messagesPage--chat-slide-enter-active .messagesLayout__right--chat {
    transform: translate3d(0, 0, 0);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
    will-change: transform;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list) #main, body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list) .mainContainer, body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list) .tabbody {
    display: block;
    min-height: auto;
    height: auto;
    overflow: visible;
  }
  html:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat),
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat),
  html:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open),
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open) {
    height: 100%;
    overflow: hidden;
  }
  html:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState),
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState) {
    height: auto;
    overflow: auto;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) {
    margin: 0;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) #main, body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) .mainContainer, body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) .tabbody {
    min-height: 0;
    height: auto;
    overflow: visible;
    background: transparent;
    border-top: 0;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat {
    position: fixed;
    top: calc(var(--header-height-with-secondary-header) - var(--spacing-10xl));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    min-height: auto;
    height: auto;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat.messagesPage--chat-slide-enter {
    transform: translate3d(100%, 0, 0);
    box-shadow: -18px 0 32px rgba(18, 25, 38, 0.16);
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat.messagesPage--chat-slide-enter-active {
    transform: translate3d(0, 0, 0);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
    will-change: transform;
  }
  .messagesMobileChatSlideSnapshot {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 19;
    overflow: hidden;
    background: var(--gray-100);
    pointer-events: none;
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease;
    will-change: transform, opacity;
  }
  .messagesMobileChatSlideSnapshot--exit-active {
    transform: translate3d(-32%, 0, 0);
    opacity: 0.94;
  }
  .messagesMobileChatSlideSnapshot__content {
    width: 100%;
    min-height: 100%;
    will-change: transform;
    overflow: visible;
  }
  .messagesMobileChatSlideSnapshot__content .messagesStandalonePage {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: var(--spacing-alt-sm);
    background: var(--gray-100);
    box-sizing: border-box;
  }
  .messagesMobileChatSlideSnapshot__content .messagesLayout, .messagesMobileChatSlideSnapshot__content .messagesLayout__left {
    display: block !important;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    background: var(--gray-100);
    box-sizing: border-box;
  }
  .messagesMobileChatSlideSnapshot__content .messagesLayout {
    min-height: auto;
  }
  .messagesMobileChatBackSnapshot {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 21;
    overflow: hidden;
    background: var(--gray-100);
    pointer-events: none;
    box-sizing: border-box;
    transform: translate3d(0, 0, 0);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
    will-change: transform;
    box-shadow: -18px 0 32px rgba(18, 25, 38, 0.12);
  }
  .messagesMobileChatBackSnapshot--exit-active {
    transform: translate3d(100%, 0, 0);
    box-shadow: none;
  }
  .messagesMobileChatBackSnapshot__content {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--gray-100);
  }
  .messagesMobileChatBackSnapshot__content .messagesLayout__right, .messagesMobileChatBackSnapshot__content .messagesLayout__right--chat {
    position: static !important;
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list.messagesPage--list-back-enter {
    transform: translate3d(-32%, 0, 0);
    opacity: 0.96;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list.messagesPage--list-back-enter-active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
    will-change: transform, opacity;
  }
}
@media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat.messagesPage--chat-slide-enter, body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat) .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat.messagesPage--chat-slide-enter-active {
    transform: none;
    transition: none;
    box-shadow: none;
  }
  .messagesMobileChatSlideSnapshot,
  .messagesMobileChatSlideSnapshot--exit-active,
  .messagesMobileChatBackSnapshot,
  .messagesMobileChatBackSnapshot--exit-active,
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list.messagesPage--list-back-enter,
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list.messagesPage--list-back-enter-active {
    transform: none;
    transition: none;
    opacity: 1;
    box-shadow: none;
  }
}
@media screen and (max-width: 1024px) {
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState {
    min-height: 100%;
    padding: 0;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState__icon {
    width: 160px;
    height: 160px;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState__actions {
    display: flex;
    flex-direction: row;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState__button {
    width: auto;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatBlockedView {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatBlockedView__mobileHeader {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg) 0;
    box-sizing: border-box;
    background: var(--gray-100);
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatBlockedView__mobileHeader .chatMobileBackBar {
    margin-bottom: 0;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatBlockedState {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--spacing-2xl) var(--spacing-lg);
    box-sizing: border-box;
    overflow: auto;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatBlockedState__icon {
    width: 132px;
    height: 132px;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatBlockedState__actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    padding: 0;
    box-sizing: border-box;
  }
  .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--mobile-chat-open .chatBlockedState__button {
    width: 100%;
    box-sizing: border-box;
  }
}
@media screen and (min-width: 1025px) {
  .MyMessagesPageComponent .messagesPageHeading {
    display: none;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody) {
    height: 100%;
    overflow: hidden;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody) #main {
    display: flex !important;
    flex-direction: column !important;
    height: var(--messages-desktop-page-height, calc(100dvh - var(--header-height-with-secondary-header))) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody) #main,
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody) .mainContainer,
  body:has(.MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody) .tabbody {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .MyMessagesPageComponent {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .MyMessagesPageComponent > :not(.messagesStandalonePage):not(.messagesPageShell), .MyMessagesPageComponent .messagesPageShell > :not(.messagesStandalonePage) {
    flex: 0 0 auto !important;
  }
  .MyMessagesPageComponent .messagesPageShell {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: var(--messages-desktop-page-height, 100%) !important;
    overflow: hidden !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody > :not(.messagesLayout), .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody > :not(.messagesLayout) {
    flex: 0 0 auto !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody .messagesLayout--chat {
    align-items: stretch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: var(--messages-desktop-layout-height, calc(100dvh - var(--header-height-with-secondary-header) - 104px)) !important;
    max-height: var(--messages-desktop-layout-height, none) !important;
    overflow: hidden !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .messagesLayout__left, .MyMessagesPageComponent .messagesStandalonePage .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage .messagesLayout__right--chat {
    align-self: stretch !important;
    min-height: 0 !important;
    height: var(--messages-desktop-layout-height, calc(100dvh - var(--header-height-with-secondary-header) - 104px)) !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody .messagesLayout__left, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody .messagesLayout__left {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid var(--gray-400) !important;
    padding-right: var(--spacing-xl) !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody .messagesLayout__right--chat, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody .messagesLayout__right--chat {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .chatBlockedState__content {
    position: absolute;
    top: calc(50% - 20px);
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list .messagesLayout__right--chat.messagesEmptyChatState {
    min-height: var(--messages-desktop-layout-height, calc(100dvh - var(--header-height-with-secondary-header) - 104px)) !important;
    height: var(--messages-desktop-layout-height, calc(100dvh - var(--header-height-with-secondary-header) - 104px)) !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage #msg_list {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    margin-right: -12px;
    padding-right: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .MyMessagesPageComponent .messagesStandalonePage #msg_list:has(.messagesEmptyState) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .MyMessagesPageComponent .messagesStandalonePage #msg_list:has(.messagesEmptyState) .messagesEmptyState {
    padding: 0 40px;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chat, .MyMessagesPageComponent .messagesStandalonePage .chatAppShell, .MyMessagesPageComponent .messagesStandalonePage .chatAppShell--conversation, .MyMessagesPageComponent .messagesStandalonePage .chatAppShell__body, .MyMessagesPageComponent .messagesStandalonePage .chatAppShell__content, .MyMessagesPageComponent .messagesStandalonePage .chatAppShell__messages {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatAppShell__body > .chatAppShell__content {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatAppShell__body > .chatAppShell__composer {
    flex: 0 0 auto !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatMobileBackBar {
    display: none !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .ChatViewComponent {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatReply, .MyMessagesPageComponent .messagesStandalonePage.chatPageTabBody .chatReply {
    margin-top: auto !important;
    margin-bottom: var(--spacing-xl) !important;
    flex: 0 0 auto !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatReply form, .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatInputComponent, .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatReplyInputComponent, .MyMessagesPageComponent .messagesStandalonePage .chatReply .messagesReplyComposer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatInputComponent textarea.TextAreaComponent, .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatReplyInputComponent textarea.TextAreaComponent {
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--gray-600) var(--gray-300);
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatInputComponent textarea.TextAreaComponent::-webkit-scrollbar, .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatReplyInputComponent textarea.TextAreaComponent::-webkit-scrollbar {
    width: 8px;
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatInputComponent textarea.TextAreaComponent::-webkit-scrollbar-track, .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatReplyInputComponent textarea.TextAreaComponent::-webkit-scrollbar-track {
    background: var(--gray-300);
    border-radius: var(--radius-sm);
  }
  .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatInputComponent textarea.TextAreaComponent::-webkit-scrollbar-thumb, .MyMessagesPageComponent .messagesStandalonePage .chatReply .ChatReplyInputComponent textarea.TextAreaComponent::-webkit-scrollbar-thumb {
    background: var(--gray-600);
    border-radius: var(--radius-sm);
  }
}
@media screen and (min-width: 1025px) and (max-width: 1270px) {
  .MyMessagesPageComponent .messagesStandalonePage .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage .messagesLayout--empty, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody .messagesLayout, .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody .messagesLayout--chat {
    grid-template-columns: 430px minmax(0, 1fr) !important;
    gap: var(--spacing-lg) !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .messagesLayout__right, .MyMessagesPageComponent .messagesStandalonePage .messagesLayout__right--chat {
    min-width: 0 !important;
    width: 100% !important;
  }
  .MyMessagesPageComponent .messagesStandalonePage .ChatTitleComponent, .MyMessagesPageComponent .messagesStandalonePage .chat, .MyMessagesPageComponent .messagesStandalonePage .chatReply, .MyMessagesPageComponent .messagesStandalonePage .chatReply form, .MyMessagesPageComponent .messagesStandalonePage .chatReply .messagesReplyComposer {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media screen and (max-width: 1024px) {
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list #msg_list:has(.messagesEmptyState) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list #msg_list:has(.messagesEmptyState) .dlmsg {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list #msg_list:has(.messagesEmptyState) .messagesEmptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list #msg_list:has(.messagesEmptyState) .messagesEmptyState::before {
    content: "";
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 0 var(--spacing-xl);
    background: url("/img/redesign/icons/message-letter.svg") center center/contain no-repeat;
    flex: 0 0 auto;
  }
  .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list .messagesEmptyState__queryLine {
    max-width: 100%;
  }
}
body.chatWidgetFramePage {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
body.chatWidgetFramePage #mainoverlay,
body.chatWidgetFramePage #ph,
body.chatWidgetFramePage #pfooter,
body.chatWidgetFramePage .AppDownloadBannerComponent,
body.chatWidgetFramePage .messagesWarningBanner,
body.chatWidgetFramePage .messagesTopTabs,
body.chatWidgetFramePage .messagesSearchPanel,
body.chatWidgetFramePage #pageTabBar {
  display: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesWarningBanner,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list .messagesWarningBanner--mobile,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--list > .messagesWarningBanner--desktop,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat .messagesWarningBanner--mobile,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage--chat > .messagesWarningBanner--desktop,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesTopTabs,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage .messagesSearchPanel {
  display: none !important;
}
body.chatWidgetFramePage #main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage #main > .cb {
  display: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  font-family: List, Arial, sans-serif !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage .messagesLayout {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list .messagesLayout__left,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesLayout__left,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPage--empty-inbox .messagesLayout__left--full {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPage--list .messagesLayout__right--chat.messagesEmptyChatState {
  display: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .dlmsg {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .messagesListItem {
  display: block !important;
  width: 100% !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .messagesListItem:hover,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .messagesListItem:focus,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .messagesListItem.is-active {
  background: #fff !important;
  color: inherit !important;
  text-decoration: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadRow {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: 68px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .messagesListItem.has-label-row .msgThreadRow {
  min-height: 92px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMedia {
  position: relative !important;
  flex: 0 0 68px !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage img,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage .av_user,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage .av_comp,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage .uav,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage .uavatar {
  display: block !important;
  width: 62.769px !important;
  height: 62.769px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage.is-direct,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage.is-direct img,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage.is-direct .av_user,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage.is-direct .uav,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage.is-direct .uavatar {
  border-radius: 100px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreviewImage.is-placeholder {
  border: 0.872px solid #e6e6e9 !important;
  background: #fff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadAvatar {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 27.897px !important;
  height: 27.897px !important;
  border: 1.395px solid #fff !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #fff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadAvatar.is-business {
  border-radius: 4px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadAvatar img,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadAvatar .av_user,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadAvatar .av_comp,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadAvatar .uav,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadAvatar .uavatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadBody {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  align-self: stretch !important;
  gap: 4px !important;
  min-width: 0 !important;
  height: 68px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .messagesListItem.has-label-row .msgThreadBody {
  height: 92px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadTop,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMiddle,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadBottom,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadLabelRow {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 20px !important;
  min-height: 20px !important;
  min-width: 0 !important;
  line-height: 20px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadTop,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadLabelRow {
  gap: 16px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMiddle {
  gap: 12px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadBottom {
  gap: 8px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMeta {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 20px !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMeta .chatLabel,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadBottom .chatLabel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.24px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMeta .chatLabel.priceNegotiationType {
  background: #5b57ff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMeta .chatLabel.resumeType {
  background: #64aeff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadMeta .chatLabel.orderType {
  background: #ff6a00 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadBottom .chatLabel.inactiveType,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadBottom .chatLabel.deletedType {
  background: #f4f4f4 !important;
  color: #7a7a81 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadName,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreview,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadSecondary,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadDate {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-style: normal !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadName {
  flex: 1 1 auto !important;
  color: #131315 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.28px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadDate {
  flex: 0 0 auto !important;
  color: #3d3d46 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.24px !important;
  text-align: right !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreview {
  flex: 1 1 auto !important;
  color: #3d3d46 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.28px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadPreview.is-unread,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadName.is-unread {
  color: #131315 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadSecondary {
  width: 100% !important;
  color: #5a5a62 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.24px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadRow.is-inactive .msgThreadName,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadRow.is-inactive .msgThreadDate,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadRow.is-inactive .msgThreadPreview,
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadRow.is-inactive .msgThreadSecondary {
  color: #7a7a81 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent #msg_list .msgThreadBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border-radius: 100px !important;
  background: #0078f9 !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .messagesLayout__left,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .messagesLayout__left {
  display: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .messagesLayout__right--chat,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .messagesLayout__right--chat {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatMobileHeader,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatMobileHeader {
  display: flex !important;
  flex: 0 0 auto !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .chatAppShell,
body.chatWidgetFramePage .MyMessagesPageComponent .chatAppShell--conversation,
body.chatWidgetFramePage .MyMessagesPageComponent .chatAppShell__body,
body.chatWidgetFramePage .MyMessagesPageComponent .chatAppShell__content,
body.chatWidgetFramePage .MyMessagesPageComponent .chatAppShell__messages {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .chatAppShell__body > .chatAppShell__content {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .chatAppShell__body > .chatAppShell__composer {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer form,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer form,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .ChatReplyInputComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .ChatReplyInputComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .messagesReplyComposer,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .messagesReplyComposer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .messagesReplyComposer,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .messagesReplyComposer {
  display: flex !important;
  flex-direction: column !important;
  min-height: 56px !important;
  padding: 0 !important;
  border: 4px solid #fff !important;
  border-radius: 24px !important;
  background: #f4f4f4 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .ChatReplyInputComponent__composer-row,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .ChatReplyInputComponent__composer-row {
  min-height: 48px !important;
  gap: 4px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .ChatReplyInputComponent__input-wrap,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .ChatReplyInputComponent__input-wrap {
  align-items: center !important;
  min-height: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .textareaWrapper,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .textareaWrapper,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .TextAreaFormElementNew,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .TextAreaFormElementNew {
  min-height: 48px !important;
  margin: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer textarea.TextAreaComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer textarea.TextAreaComponent {
  min-height: 48px !important;
  padding: 12px 0 !important;
  color: #131315 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.3px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .chat-attachment-pick,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .chat-attachment-pick,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .ChatReplyInputComponent__submit-button,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .ChatReplyInputComponent__submit-button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .chat-attachment-pick,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .chat-attachment-pick {
  margin: 10px 0 10px 10px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .chatReply.chatAppShell__composer .ChatReplyInputComponent__submit-button,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .chatReply.chatAppShell__composer .ChatReplyInputComponent__submit-button {
  right: 10px !important;
  bottom: 10px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .ChatViewComponent {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .ChatViewComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open [data-role=chat-view],
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .ChatViewComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat [data-role=chat-view] {
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .ChatViewComponent .chatDateSeparator,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .ChatViewComponent .chatDateSeparator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 29px !important;
  min-height: 29px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .ChatViewComponent .chatDateSeparator__label,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .ChatViewComponent .chatDateSeparator__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 29px !important;
  padding: 0 !important;
  background: #fff !important;
  color: #3d3d46 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.28px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .ChatViewComponent .msg,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .ChatViewComponent .msg {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--mobile-chat-open .ChatViewComponent .msg .r,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesPage--chat .ChatViewComponent .msg .r {
  max-width: calc(100% - 40px) !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesInboxEmptyState {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 32px 24px !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--list:not(.messagesPage--mobile-chat-open):not(.messagesPage--chat),
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--list:not(.messagesPage--mobile-chat-open):not(.messagesPage--chat) .messagesLayout,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--list:not(.messagesPage--mobile-chat-open):not(.messagesPage--chat) .messagesLayout__left {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--list:not(.messagesPage--mobile-chat-open):not(.messagesPage--chat) #msg_list {
  display: block !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout {
  position: static !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout__right,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout__right--chat,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout__right,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout__right--chat {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout__left,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout__left {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatMobileHeader,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatMobileHeader {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatAppShell__composer,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatAppShell__composer {
  width: 100% !important;
  box-sizing: border-box !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatViewComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open [data-role=chat-view],
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatViewComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat [data-role=chat-view] {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatAppShell__header,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatAppShell__header {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: #fff !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatMobileBackBar,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatMobileBackBar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 72px 0 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  overflow: visible !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatMobileBackBar__menu,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatHeaderMenu,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__menu,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatMobileBackBar__menu,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatHeaderMenu,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__menu {
  display: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatMobileBackBar .hdr,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatMobileBackBar .hdr {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 0 !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #131315 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: List, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.3px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatMobileBackBar .hdr:hover,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatMobileBackBar .hdr:focus,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatMobileBackBar .hdr:hover,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatMobileBackBar .hdr:focus {
  color: #131315 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatMobileBackBar__icon,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatMobileBackBar__icon {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent {
  display: flex !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: #f4f4f4 !important;
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__card,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__card {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__card,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__card {
  align-items: center !important;
  justify-content: flex-start !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media.is-direct,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media.is-direct {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media > .l,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media > .l a,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media > .l img,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media > .l,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media > .l a,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media > .l img {
  display: block !important;
  width: 41px !important;
  height: 41px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__avatar,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__avatar img,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__avatar .uav,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__avatar .uavatar,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__avatar,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__avatar img,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__avatar .uav,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__avatar .uavatar {
  width: 18px !important;
  height: 18px !important;
  border-width: 1px !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar img,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_user,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_comp,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .uav,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .uavatar,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar img,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_user,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .av_comp,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .uav,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__media.is-direct .ChatTitleComponent__avatar .uavatar {
  position: static !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  border-width: 1px !important;
  object-fit: cover !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent__content,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent__content {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding-top: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__content,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__content {
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__user-row,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__user-row,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent.is-direct .ChatTitleComponent__user-info,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent.is-direct .ChatTitleComponent__user-info {
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .chatUserName,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .chatUserName {
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.26px !important;
  color: #131315 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent .titleWrapper,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent .titleWrapper {
  gap: 0 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent .chatPostLink,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent .inactivePostTitle,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent .chatPostLink,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent .inactivePostTitle {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.28px !important;
  color: #131315 !important;
}
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .ChatTitleComponent .chatTitleMetaRow,
body.chatWidgetFramePage .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .ChatTitleComponent .chatTitleMetaRow {
  display: none !important;
}
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__card,
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__card {
  align-items: center !important;
  justify-content: flex-start !important;
}
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__content,
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: left !important;
}
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__user-row,
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__user-row,
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__user-info,
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .ChatTitleComponent__user-info {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--mobile-chat-open .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .chatUserName,
body.chatWidgetFramePage html body .MyMessagesPageComponent .messagesStandalonePage.messagesPageTabBody.chatPageTabBody.messagesPage.messagesPage--chat .messagesLayout .messagesLayout__right .chatAppShell .chatAppShell__header .ChatTitleComponent.ChatTitleComponent.is-direct .chatUserName {
  display: inline-flex !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}
body.chatWidgetFramePage .messagesPage--chat-slide-enter,
body.chatWidgetFramePage .messagesPage--chat-slide-enter-active,
body.chatWidgetFramePage .messagesMobileChatSlideSnapshot,
body.chatWidgetFramePage .messagesMobileChatSlideSnapshot--exit-active,
body.chatWidgetFramePage .messagesMobileChatBackSnapshot,
body.chatWidgetFramePage .messagesMobileChatBackSnapshot--exit-active {
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}
body.chatWidgetFramePage .tipsy.chatWidgetTooltip {
  z-index: 2147483647 !important;
  pointer-events: none !important;
  max-width: calc(100vw - 16px) !important;
}
body.chatWidgetFramePage .tipsy.chatWidgetTooltip .tipsy-inner {
  max-width: calc(100vw - 32px) !important;
  padding: 8px 12px !important;
  text-align: left !important;
  font-size: 14px !important;
  line-height: 20px !important;
  white-space: normal !important;
}

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

.NewCarLabelComponent {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  background-color: var(--brand-400);
  padding: var(--spacing-xs) var(--spacing-alt-sm);
  border-radius: var(--radius-alt-xs);
  font-size: var(--font-size-xs);
  color: var(--gray-100);
}
.NewCarLabelComponent img {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xxs);
}

@media screen and (max-width: 1024px) {
  .NewCarLabelComponent {
    font-weight: 500;
    font-size: var(--font-size-xxs);
  }
}
.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;
}

.odl .inf > .OrderPlacementDetailsTableComponent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.odl .inf > .OrderPlacementDetailsTableComponent .placedInfo,
.odl .inf > .OrderPlacementDetailsTableComponent .totalInfo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-alt-xs);
}
.odl .inf > .OrderPlacementDetailsTableComponent .placedInfo p,
.odl .inf > .OrderPlacementDetailsTableComponent .totalInfo 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 > .OrderPlacementDetailsTableComponent .placedInfo > .placedTitle,
.odl .inf > .OrderPlacementDetailsTableComponent .totalInfo > .totalTitle {
  background-size: 16px 16px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  padding-left: 22px;
  margin: var(--spacing-none);
}
.odl .inf > .OrderPlacementDetailsTableComponent .placedInfo > .placedTitle {
  background-image: url("/img/redesign/icons/calendar.svg");
}
.odl .inf > .OrderPlacementDetailsTableComponent .totalInfo > .totalTitle {
  background-image: url("/img/redesign/icons/price.svg");
}

@media screen and (max-width: 1024px) {
  .odl .inf > .OrderPlacementDetailsTableComponent {
    gap: var(--spacing-sm);
  }
  .odl .inf > .OrderPlacementDetailsTableComponent .placedInfo p,
  .odl .inf > .OrderPlacementDetailsTableComponent .totalInfo p {
    font-size: 13px;
    line-height: 20px;
    white-space: pre;
  }
  .odl .inf > .OrderPlacementDetailsTableComponent .placedInfo > .placedTitle,
  .odl .inf > .OrderPlacementDetailsTableComponent .totalInfo > .totalTitle {
    box-sizing: border-box;
  }
}
.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);
}

.OrdersTabEmptyStateComponent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-6xl);
  padding: var(--spacing-none) var(--spacing-8xl);
  height: 50vh;
}
.OrdersTabEmptyStateComponent img {
  height: 120px;
}
.OrdersTabEmptyStateComponent > div > h3 {
  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;
}
.OrdersTabEmptyStateComponent > div > 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;
}
@media screen and (max-width: 1024px) {
  .OrdersTabEmptyStateComponent {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-none);
  }
}

.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-dark);
}
.OrderStatusTrackerComponent .circle.pending.currentStatus::after {
  background-color: var(--accent-malachite-dark);
}
.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 .circle.text-black.circle.currentStatus > p {
  color: var(--gray-900);
}
.OrderStatusTrackerComponent .circle.text-black.circle.currentStatus > p > span {
  color: var(--gray-600);
}
.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);
}

.odl .inf > .upperInf > .OrderTitleComponent {
  margin: var(--spacing-none);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}
.odl .inf > .upperInf > .OrderTitleComponent .orderNumberLink {
  font-size: 17px;
  font-style: normal;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.16px;
  color: var(--gray-900);
}
.odl .inf > .upperInf > .OrderTitleComponent .orderNumberLink:hover {
  color: var(--brand-400);
}
.odl .inf > .upperInf > .OrderTitleComponent .statusLabel {
  margin: var(--spacing-none);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  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 > .OrderTitleComponent .statusPlaced {
  background-color: var(--accent-malachite-light);
  color: var(--accent-malachite-dark);
}
.odl .inf > .upperInf > .OrderTitleComponent .statusFulfilled {
  background-color: var(--accent-electricBlue-light);
  color: var(--accent-electricBlue-dark);
}
.odl .inf > .upperInf > .OrderTitleComponent .statusOnItsWay {
  background-color: var(--accent-lime-light);
  color: var(--accent-lime-dark);
}
.odl .inf > .upperInf > .OrderTitleComponent .statusDelivered {
  background-color: var(--accent-tropicalIndigo-light);
  color: var(--accent-tropicalIndigo-dark);
}
.odl .inf > .upperInf > .OrderTitleComponent .statusCompleted {
  background-color: var(--accent-argentinaBlue-light);
  color: var(--accent-argentinaBlue-dark);
}
.odl .inf > .upperInf > .OrderTitleComponent .statusRejected {
  background-color: var(--accent-electricRaspberry-light);
  color: var(--accent-electricRaspberry-dark);
}
.odl .inf > .upperInf > .OrderTitleComponent .statusCancelled {
  background-color: var(--accent-aerospaceOrange-light);
  color: var(--accent-aerospaceOrange-dark);
}

@media screen and (max-width: 1024px) {
  .odl .inf > .upperInf > .OrderTitleComponent {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .odl .inf > .upperInf > .OrderTitleComponent .statusLabel {
    margin-left: var(--spacing-none);
  }
  .odl .inf > .upperInf > .OrderTitleComponent .orderNumberLink {
    font-size: 17px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -0.17px;
  }
  .odl .inf > .upperInf > .OrderTitleComponent .orderNumberLink:hover {
    color: var(--gray-900);
  }
}
.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;
  }
}
.PayUserCardViewComponent {
  margin-left: var(--spacing-alt-sm);
}
.PayUserCardViewComponent > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}
.PayUserCardViewComponent img {
  width: 42px;
  height: 24px;
  object-fit: contain;
  object-position: center;
}
.PayUserCardViewComponent .details > span {
  margin: var(--spacing-none);
}

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

.favorite-poi-marker {
  position: absolute;
  left: -14px;
  top: -14px;
  display: flex;
  align-items: center;
  width: 202px;
  height: 28px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.favorite-poi-marker__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.favorite-poi-marker__icon--hover {
  display: none;
}
.favorite-poi-marker:hover .favorite-poi-marker__icon--default, .favorite-poi-marker--hover .favorite-poi-marker__icon--default {
  display: none;
}
.favorite-poi-marker:hover .favorite-poi-marker__icon--hover, .favorite-poi-marker--hover .favorite-poi-marker__icon--hover {
  display: block;
}
.favorite-poi-marker__price {
  color: #000;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 27px;
  max-width: 188px;
  margin-left: -14px;
  padding: 0 8px 0 16px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 5px;
  box-sizing: border-box;
  pointer-events: 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 a {
  color: var(--brand-400);
}
.PostActionModal a:hover {
  color: var(--accent-argentinaBlue-dark);
  cursor: pointer;
}
.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 {
  color: var(--gray-900);
  font-size: var(--font-size-xl);
  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 .autorepublish-pay-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  border-radius: var(--radius-md);
}
.PostActionModal .autorepublish-pay-info .pay-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}
.PostActionModal .autorepublish-pay-info .pay-info-row.toggle-open {
  flex-wrap: wrap;
  cursor: pointer;
}
.PostActionModal .autorepublish-pay-info .pay-info-row .l {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
}
.PostActionModal .autorepublish-pay-info .pay-info-row .v {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 700;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.15px;
}
.PostActionModal .autorepublish-pay-info .pay-info-row .toggleable {
  width: 100%;
}
.PostActionModal .autorepublish-pay-info .pay-info-row .toggleable .schedule-rows-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  width: 100%;
  margin-top: var(--spacing-xs);
}
.PostActionModal .autorepublish-pay-info .pay-info-row .toggleable .schedule-rows-container .item {
  display: flex;
  padding: var(--spacing-xs) var(--spacing-sm);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-none);
  border-radius: 4px;
  background: var(--gray-300);
  font-size: 14px;
  line-height: var(--line-height-sm);
  font-weight: 500;
  color: var(--gray-600);
  width: auto;
  min-width: 0;
}
.PostActionModal .autorepublish-pay-info .pay-info-row .toggleable .schedule-rows-container .item img {
  display: none;
}
.PostActionModal .autorepublish-pay-info .pay-info-row.toggle-open {
  user-select: none;
}
.PostActionModal .autorepublish-pay-info .pay-info-row.toggle-open .v .hide {
  display: none;
}
.PostActionModal .autorepublish-pay-info .pay-info-row.toggle-open.open svg {
  transform: rotateZ(180deg);
}
.PostActionModal .autorepublish-pay-info .pay-info-row.toggle-open.open .v {
  color: var(--gray-900);
}
.PostActionModal .autorepublish-pay-info .pay-info-row.toggle-open.open .v .hide {
  display: inline;
}
.PostActionModal .autorepublish-pay-info .pay-info-row.toggle-open.open .v .show {
  display: none;
}
.PostActionModal #schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--gray-300);
  padding: var(--spacing-xl);
}
.PostActionModal #schedule .schedule-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.PostActionModal #schedule .schedule-info .schedule-info-label {
  gap: var(--spacing-sm);
}
.PostActionModal #schedule .schedule-info .value {
  border-radius: 8px;
  background: var(--gray-100);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PostActionModal #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;
}
.PostActionModal #schedule .schedule-info.repeat .switch-value {
  background: transparent;
}
.PostActionModal #schedule .schedule-info.republish-count .count-value {
  min-width: 64px;
  justify-content: flex-end;
}
.PostActionModal #schedule .schedule-info.republish-count .DropdownComponent > .me > span {
  display: none !important;
}
.PostActionModal #schedule .schedule-info.republish-message {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxs);
}
.PostActionModal #schedule .separator {
  background: var(--gray-400);
  height: 1px;
  width: 100%;
}
.PostActionModal #schedule a {
  font-size: 15px;
}
.PostActionModal #schedule .schedule-info-label,
.PostActionModal #schedule .schedule-info-label > span,
.PostActionModal #schedule .dropdown .me,
.PostActionModal #schedule .dropdown .me * {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--spacing-2xl);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
}
.PostActionModal #schedule .dropdown .me {
  width: 64px !important;
  min-width: 64px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  min-height: 44px;
  padding: var(--spacing-alt-sm) var(--spacing-md);
  justify-content: space-between;
}
.PostActionModal #schedule .dropdown .me,
.PostActionModal #schedule .dropdown .me * {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--line-height-md);
  letter-spacing: 0;
}
.PostActionModal #schedule .dropdown .me .t {
  flex: 1;
}
.PostActionModal .rgroup {
  display: flex;
  flex-direction: column;
}
.PostActionModal .rgroup input[type=radio].felement_err {
  border-color: var(--gray-500) !important;
  box-shadow: none !important;
}
.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 .summary-divider {
  width: 100%;
  height: 1px;
  background-color: var(--gray-400);
}
.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 {
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}
.PostActionModal .main-section .price-info-wrapper .info-item .item-value {
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.15px;
  text-align: right;
}
.PostActionModal .main-section .price-info-wrapper .info-item .item-value .InlineHintComponent {
  margin-right: var(--spacing-sm);
  vertical-align: middle;
}
.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 .price-info-wrapper .autorepublish-pay-info + .info-item {
  margin-top: calc(var(--spacing-none) - var(--spacing-xs));
}
.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;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--spacing-md);
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > .republish-submit-btn {
  padding: var(--spacing-lg) var(--spacing-2xl);
  width: 100%;
  border-radius: 12px;
  background-color: var(--brand-400);
  color: var(--gray-100);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > .republish-submit-btn:hover {
  background-color: var(--brand-300);
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > .republish-submit-btn.ownership-secondary-action {
  min-height: 44px;
  padding: 12px 24px;
  background: #f4f4f4;
  color: var(--gray-800);
  border-radius: 10px;
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > .republish-submit-btn.ownership-secondary-action:hover {
  background: #f4f4f4;
}
.PostActionModal .main-section .republish-form-wrapper > form > .republish-submit-btn-wrapper > .republish-submit-btn: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 > .republish-submit-btn {
  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);
  }
}
.PostCardPreviewComponent .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-top: var(--spacing-md);
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-icon-wrapper {
  height: 22px;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-icon-wrapper > img {
  height: 100%;
  width: auto;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper {
  display: flex;
  gap: var(--spacing-xl);
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty,
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview {
  width: calc((100% - 40px) / 3);
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview {
  border-radius: 8px;
  padding: var(--spacing-sm);
  margin: -8px -8px var(--spacing-none) -8px;
  transition: background-color 0.3s ease-out;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-img > img {
  width: 100%;
  max-width: 100%;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.17px;
  margin: var(--spacing-xxs) 0 var(--spacing-xs);
  transition: all 0.3s ease-out;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-label {
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-label > * {
  display: none;
  transform: scale(0.8);
  transform-origin: left top;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-label > *.show {
  display: block;
  max-width: 100%;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-label .preview-multi-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-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;
  text-align: start;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-empty-img {
  width: 100%;
  max-width: 100%;
  height: 120px;
  background-color: var(--gray-300);
  border-radius: 8px;
  margin-bottom: var(--spacing-md);
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-empty-title,
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-empty-info {
  border-radius: 2px;
  background-color: var(--gray-300);
  height: 11px;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-empty-title {
  background-color: var(--gray-500);
  height: 14px;
  width: 55%;
  margin-bottom: var(--spacing-alt-xs);
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-empty-info {
  width: 90%;
}
.PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-empty-info:last-child {
  width: 80%;
  margin-top: 3px;
}

.PostCardPreviewComponent.skip-property-verification-preview > .HeadingComponent {
  display: none;
}
.PostCardPreviewComponent.skip-property-verification-preview .combo-preview-wrapper {
  margin-top: 0;
  max-width: none;
}
.PostCardPreviewComponent.skip-property-verification-preview .combo-preview-ads-wrapper .preview-empty,
.PostCardPreviewComponent.skip-property-verification-preview .combo-preview-ads-wrapper .preview-preview {
  width: calc((100% - var(--spacing-xl)) / 2);
}

@media screen and (max-width: 1024px) {
  .PostCardPreviewComponent .combo-preview-wrapper {
    margin-top: var(--spacing-md);
    border: 2px solid var(--gray-900);
    border-radius: 12px;
    padding: var(--spacing-lg);
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper {
    flex-direction: column;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty:nth-child(3),
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty:nth-child(4) {
    display: none;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview {
    display: flex;
    gap: var(--spacing-md);
    width: 100%;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-label,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-label {
    margin: 0;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-empty-img,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-img,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .preview-img img,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-empty-img,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-img,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .preview-img img {
    min-width: 100px;
    min-height: 80px;
    width: min-content;
    height: min-content;
    flex-shrink: 0;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .wrapper,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .wrapper {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .wrapper .preview-title,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .wrapper .preview-title {
    order: 1;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .wrapper .preview-price,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .wrapper .preview-price {
    order: 2;
  }
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-empty .wrapper .preview-label,
  .PostCardPreviewComponent .combo-preview-wrapper .combo-preview-ads-wrapper .preview-preview .wrapper .preview-label {
    order: 3;
  }
  .PostCardPreviewComponent.skip-property-verification-preview .combo-preview-wrapper {
    margin-top: 0;
  }
  .PostCardPreviewComponent.skip-property-verification-preview .combo-preview-ads-wrapper .preview-empty:nth-child(3),
  .PostCardPreviewComponent.skip-property-verification-preview .combo-preview-ads-wrapper .preview-empty:nth-child(4) {
    display: none;
  }
}
.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;
  /* 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;
  min-width: 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;
  align-items: flex-start;
  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;
  }
}
.PostPropertyVerificationModal {
  color: var(--gray-900);
}
.PostPropertyVerificationModal .modal-content {
  padding: 0;
}
.PostPropertyVerificationModal .summary-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-4xl) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
  background: white;
  border-radius: var(--radius-md);
}
.PostPropertyVerificationModal .summary-panel.has-footer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.PostPropertyVerificationModal .PropertyVerificationLabelComponent {
  margin-bottom: 0;
}
.PostPropertyVerificationModal h3 {
  margin-bottom: 0;
}
.PostPropertyVerificationModal .verification-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.PostPropertyVerificationModal .verification-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 12px;
  background: var(--gray-200);
}
.PostPropertyVerificationModal .verification-card-icon {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin-top: 2px;
}
.PostPropertyVerificationModal .verification-card-icon img,
.PostPropertyVerificationModal .verification-card-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}
.PostPropertyVerificationModal .verification-card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.PostPropertyVerificationModal .verification-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--gray-900);
}
.PostPropertyVerificationModal .verification-card-title svg {
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 10px;
  flex: 0 0 auto;
}
.PostPropertyVerificationModal .verification-card-description {
  color: var(--gray-600);
}
.PostPropertyVerificationModal .verification-disclaimer {
  margin-top: var(--spacing-xs);
}
.PostPropertyVerificationModal .footer-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: var(--spacing-2xl) var(--spacing-4xl);
  margin: 0 calc(var(--spacing-2xl) * -1) calc(var(--spacing-2xl) * -1);
  background: var(--gray-300);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.PostPropertyVerificationModal .footer-description {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
}
.PostPropertyVerificationModal .footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--brand-400);
  color: var(--gray-100);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-weight: 500;
  letter-spacing: -0.26px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.PostPropertyVerificationModal .footer-button:hover {
  background: var(--brand-300);
}

@media screen and (max-width: 1024px) {
  .PostPropertyVerificationModal .summary-panel {
    padding: var(--spacing-4xl) var(--spacing-xl);
  }
  .PostPropertyVerificationModal .footer-bar {
    padding: var(--spacing-3xl) var(--spacing-xl);
  }
}
.PostPropertyVerificationNoticeComponent {
  background: var(--gray-200);
  display: flex;
  gap: var(--spacing-md);
  justify-content: space-between;
  padding: var(--spacing-md);
}
.PostPropertyVerificationNoticeComponent:last-child {
  border-radius: 0 0 8px 8px;
}
.PostPropertyVerificationNoticeComponent .reason-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.PostPropertyVerificationNoticeComponent .reason-text-wrap p {
  line-height: var(--line-height-sm) !important;
}
.PostPropertyVerificationNoticeComponent .reason-message {
  display: block;
}
.PostPropertyVerificationNoticeComponent .reason-message-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xs);
  vertical-align: middle;
  margin-bottom: 2px;
}
.PostPropertyVerificationNoticeComponent .reason-details {
  display: none;
  margin-top: var(--spacing-xs);
}
.PostPropertyVerificationNoticeComponent .toggle-reasons-btn {
  color: var(--gray-900);
  display: inline-block;
  margin-top: var(--spacing-xs);
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.PostPropertyVerificationNoticeComponent .toggle-reasons-btn:hover {
  color: var(--gray-900);
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.PostPropertyVerificationNoticeComponent .toggle-reasons-btn .TextComponent {
  color: inherit;
}
.PostPropertyVerificationNoticeComponent .resubmit-btn {
  display: none;
  margin-top: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-alt-sm);
  background-color: var(--brand-400);
  border-radius: var(--radius-alt-xs);
  text-decoration: none;
}
.PostPropertyVerificationNoticeComponent .resubmit-btn:hover {
  background-color: var(--brand-300);
}
.PostPropertyVerificationNoticeComponent .dismiss-reasons-btn {
  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;
}
.PostPropertyVerificationNoticeComponent .dismiss-reasons-btn:hover {
  opacity: 0.7;
}
.PostPropertyVerificationNoticeComponent.expanded .reason-details {
  display: block;
}
.PostPropertyVerificationNoticeComponent.expanded .resubmit-btn {
  display: block;
}

.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 .unseen-ads-filter {
  display: flex;
  align-items: center;
}
.PostsFilterComponent .filter-section .unseen-ads-filter .SwitchComponent .switch-text {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0;
}
.PostsFilterComponent .filter-section .label-and-reset-container .label-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  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 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  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 .suitable-for-section .suitable-for-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
.PostsFilterComponent .suitable-for-section .suitable-for-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 0;
  border-radius: 8px;
  background: var(--gray-300);
  color: var(--gray-700);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
  cursor: pointer;
}
.PostsFilterComponent .suitable-for-section .suitable-for-tabs .tab-btn.active {
  background: var(--brand-100);
  color: var(--brand-500);
}
.PostsFilterComponent .suitable-for-section .suitable-for-tab-body {
  display: none;
}
.PostsFilterComponent .suitable-for-section .suitable-for-tab-body.active {
  display: block;
}
.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) 0;
  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: 26px;
  visibility: hidden;
  opacity: 0;
  width: 20px;
  height: 20px;
  display: block;
  transition: opacity 0.3s, visibility 0.3s;
}
.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;
  transition: opacity 0.3s, visibility 0.3s;
  opacity: 1;
  visibility: visible;
}
.PostsFilterComponent .filter-apply-container.sticky .filter-apply-btn .btn-text.hidden {
  visibility: hidden;
  opacity: 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 > .unseen-ads-filter-section {
    max-width: 720px;
    margin: var(--spacing-alt-sm) var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid #efefef;
    background-color: var(--gray-100);
    border-radius: 12px;
  }
  .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;
  }
}

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

.ProductPriceNegotiationSuggestModal .button-container {
  bottom: 0;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.ProductPriceNegotiationSuggestModal .negotiation-phone-required-message {
  font-size: var(--font-size-md);
  padding: var(--spacing-none) var(--spacing-none) var(--spacing-lg) var(--spacing-none);
}
.ProductPriceNegotiationSuggestModal .bblink {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-2xl);
  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);
}

.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: space-between;
  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 .skip {
  cursor: pointer;
}

.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: stretch;
  }
  .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);
  }
  .promotion-combo-widget-wrapper .promotion-combo-buttons .skip {
    order: 1;
  }
}
.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);
  }
}
.PropertyCertificateExampleModal {
  padding: var(--spacing-8xl) var(--spacing-sm) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.PropertyCertificateExampleModal .content {
  width: 100%;
}
.PropertyCertificateExampleModal .content img {
  width: 100%;
}

.PropertyVerificationBulletComponent {
  display: flex;
  align-items: start;
  justify-content: start;
  gap: var(--spacing-alt-sm);
  width: 100%;
}
.PropertyVerificationBulletComponent.checked > .bullet-content > .title {
  color: var(--success-500);
}
.PropertyVerificationBulletComponent.checked .icon {
  background-image: url(/img/redesign/icons/bullet-green.svg);
}
.PropertyVerificationBulletComponent .icon {
  width: 12px;
  min-width: 12px;
  height: 12px;
  margin-top: var(--spacing-xxs);
  background: center/contain no-repeat url(/img/redesign/icons/bullet-point.svg);
}
.PropertyVerificationBulletComponent > .bullet-content {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--spacing-md);
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.PropertyVerificationBulletComponent > .bullet-content svg {
  width: 36px;
  height: 11px;
}
.PropertyVerificationBulletComponent > .bullet-content > img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: auto;
}
.PropertyVerificationBulletComponent .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gray-300);
  color: var(--gray-700);
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.PropertyVerificationBulletComponent .badge > img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.PropertyVerificationBulletComponent .badge.warning {
  padding-left: 2px;
  border-radius: 1000px;
  background: var(--info-200);
  color: var(--gray-900);
}
.PropertyVerificationBulletComponent .badge.rejected {
  gap: 4px;
  padding-left: 2px;
  border-radius: 1000px;
  background: var(--gray-100);
  color: var(--gray-900);
}
.PropertyVerificationBulletComponent .badge.brand {
  background: var(--success-100);
  color: var(--success-500);
}

@media screen and (max-width: 1024px) {
  .PropertyVerificationBulletComponent .icon {
    width: 14px;
    height: 14px;
  }
  .PropertyVerificationBulletComponent > .bullet-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    width: 100%;
  }
}
#main:has(.PropertyVerificationComponent) > .step-widget-wrapper {
  margin-bottom: 0;
}
#main:has(.PropertyVerificationComponent) > .step-widget-wrapper .step-title {
  display: none;
}

.PropertyVerificationComponent {
  margin-top: var(--spacing-md);
}
.PropertyVerificationComponent.show-second-screen .screen-descriptions .first-screen-title {
  display: none;
}
.PropertyVerificationComponent.show-second-screen .screen-descriptions .second-screen-title {
  display: block;
}
.PropertyVerificationComponent.show-second-screen .screen-descriptions .first-screen-description {
  display: none;
}
.PropertyVerificationComponent.show-second-screen .screen-descriptions .second-screen-description {
  display: block;
}
.PropertyVerificationComponent.show-second-screen .first-screen {
  display: none;
}
.PropertyVerificationComponent.show-second-screen .second-screen {
  display: flex;
}
.PropertyVerificationComponent .actions {
  display: flex;
  justify-content: start;
  padding: var(--spacing-md) 0 var(--spacing-4xl) 0;
  gap: var(--spacing-lg);
}
.PropertyVerificationComponent .actions .cancel-btn {
  margin-right: auto;
  background-color: var(--gray-300);
  color: var(--gray-700);
}
.PropertyVerificationComponent .actions .cancel-btn:hover {
  background-color: var(--gray-400);
  color: var(--gray-900);
}
.PropertyVerificationComponent .actions .secondary {
  background-color: var(--brand-100);
  color: var(--brand-400);
}
.PropertyVerificationComponent .actions .secondary:hover {
  background-color: var(--brand-200);
}
.PropertyVerificationComponent .actions .ajax-submit {
  background-color: var(--brand-400);
  color: var(--gray-100);
}
.PropertyVerificationComponent .actions .ajax-submit:hover {
  background-color: var(--brand-300);
}
.PropertyVerificationComponent .actions .ajax-submit.disabled, .PropertyVerificationComponent .actions .ajax-submit:disabled {
  background-color: var(--gray-400);
  color: var(--gray-600);
  cursor: default;
}
.PropertyVerificationComponent .privacy-policy-consent .l {
  visibility: hidden;
}
.PropertyVerificationComponent .privacy-policy-consent .cbox {
  align-items: flex-start;
}
.PropertyVerificationComponent .privacy-policy-consent .cbox a {
  color: var(--brand-400);
}
.PropertyVerificationComponent #document-upload-container [id^=html5] {
  display: none;
}
.PropertyVerificationComponent .document-upload-info-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
}
.PropertyVerificationComponent .document-upload-info-content > img {
  display: none;
}
.PropertyVerificationComponent #upload-doc-inside-container-img > img {
  width: 32px;
  height: 32px;
}
.PropertyVerificationComponent .screen-descriptions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: 0;
}
.PropertyVerificationComponent .screen-descriptions .screen-description {
  margin-bottom: var(--spacing-2xl);
}
.PropertyVerificationComponent .screen-descriptions .second-screen-title {
  display: none;
}
.PropertyVerificationComponent .screen-descriptions .second-screen-title > div {
  display: none;
}
.PropertyVerificationComponent .screen-descriptions .second-screen-title > div.selected {
  display: block;
}
.PropertyVerificationComponent .screen-descriptions .second-screen-description {
  display: none;
  margin-bottom: var(--spacing-md);
}
.PropertyVerificationComponent .screen-descriptions .second-screen-description > div {
  display: none;
}
.PropertyVerificationComponent .screen-descriptions .second-screen-description > div.selected {
  display: block;
}
.PropertyVerificationComponent:not(.mv) .options .option-wrapper:not(.disabled):not(.selected):hover {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}
.PropertyVerificationComponent:not(.mv) .options .option-wrapper.selected:not(.disabled):hover {
  background: var(--gray-100);
  border-color: var(--brand-400);
}
.PropertyVerificationComponent .first-screen {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PropertyVerificationComponent .first-screen .options {
  display: flex;
  padding: 0;
  align-items: center;
  align-self: stretch;
  gap: 13px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper {
  display: flex;
  padding: 24px 24px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--radius-lg);
  justify-content: flex-start;
  cursor: pointer;
  background: var(--gray-200);
  border: 1.2px solid var(--gray-300);
}
.PropertyVerificationComponent .first-screen .options .option-wrapper:only-child {
  cursor: default;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.disabled {
  pointer-events: none;
  cursor: default;
  background: var(--gray-200);
  border-color: var(--gray-300);
  opacity: 0.4;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.selected {
  background: var(--gray-100);
  border-color: var(--brand-400);
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.selected .visible-radio .radio-icon {
  background-image: url(/img/redesign/icons/radio-icon.svg);
  border: none;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card {
  padding: 24px;
  gap: 20px;
  border-radius: 20px;
  background: var(--gray-300);
  border-color: transparent;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card:not(.disabled):not(.selected):hover, .PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card.selected:not(.disabled):hover {
  background: var(--gray-300);
  border-color: transparent;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card.selected {
  background: var(--gray-300);
  border-color: transparent;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option {
  gap: 20px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .content {
  gap: 4px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .content .title-row .visible-radio {
  display: none;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .content .title-row .header > * {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-lg);
  letter-spacing: -0.4px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .content .body > * {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: -0.26px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option > .PropertyVerificationLabelComponent {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .bullets-section {
  gap: 8px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .bullets-section > .mobile-body-bullets-title > p {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  letter-spacing: -0.26px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .bullets {
  gap: 8px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .PropertyVerificationBulletComponent {
  gap: 10px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .PropertyVerificationBulletComponent .icon {
  margin-top: 4px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .PropertyVerificationBulletComponent > .bullet-content {
  gap: 8px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .PropertyVerificationBulletComponent .badge:not(.brand) {
  gap: 4px;
  background: var(--gray-100);
  border-radius: 1000px;
  padding: 2px 6px 2px 2px;
  color: var(--gray-900);
  font-weight: 400;
  line-height: 14px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option .content {
  display: flex;
  flex-flow: column;
  gap: 4px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option .content .mobile-body-bullets-title {
  display: none;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option .content .header > * {
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: var(--line-height-lg);
  letter-spacing: -0.4px;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option .content .title-row {
  display: flex;
  align-items: start;
  gap: var(--spacing-md);
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option .bullets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option .bullets > .TextComponent > p {
  color: var(--gray-900);
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .option .bullets-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .visible-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: var(--spacing-xs);
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .visible-radio > p {
  display: none;
}
.PropertyVerificationComponent .first-screen .options .option-wrapper .visible-radio .radio-icon {
  width: 20px;
  height: 20px;
  display: block;
  border-radius: var(--radius-4xl);
  background-image: url(/img/redesign/icons/radio-empty.svg);
  background-position: center;
  background-size: contain;
}
.PropertyVerificationComponent .first-screen .mobile-bullets {
  display: none;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: calc(var(--spacing-md) * -1);
}
.PropertyVerificationComponent .first-screen .mobile-bullets .mobile-bullets-group {
  display: none;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.PropertyVerificationComponent .first-screen .mobile-bullets .mobile-bullets-group.selected {
  display: flex;
}
.PropertyVerificationComponent .limit-reached-banner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  background-color: var(--gray-100);
  border: 1.2px solid var(--gray-400);
  overflow: hidden;
}
.PropertyVerificationComponent .limit-reached-banner .limit-reached-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}
.PropertyVerificationComponent .limit-reached-banner .limit-reached-action {
  display: inline-flex;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-alt-xs);
  background-color: var(--brand-100);
  cursor: pointer;
  align-self: flex-start;
  text-decoration: none;
}
.PropertyVerificationComponent .limit-reached-banner .limit-reached-action:hover {
  background-color: var(--brand-200);
}
.PropertyVerificationComponent .second-screen {
  display: none;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PropertyVerificationComponent .second-screen form .frow .l .TextComponent {
  color: var(--gray-900);
}
.PropertyVerificationComponent .second-screen form .frow.with-hint > .l {
  display: block;
}
.PropertyVerificationComponent .second-screen form .frow.with-hint > .l .certificate-number-label .InlineHintComponent {
  vertical-align: middle;
}
.PropertyVerificationComponent .second-screen form .fsec-prop-verif {
  margin-bottom: var(--spacing-2xl);
  padding: 0;
}
.PropertyVerificationComponent .second-screen form .fsec-prop-verif .fsec {
  padding: 0;
}
.PropertyVerificationComponent .second-screen form .fsec-prop-verif .fsec .frow {
  padding: 0;
}
.PropertyVerificationComponent .second-screen .cadastre-link {
  text-decoration: underline !important;
  color: inherit;
}
.PropertyVerificationComponent .second-screen .InputComponent.felement_err + .err {
  margin: 0;
}
.PropertyVerificationComponent .second-screen:has(.preview_box) {
  flex-direction: column;
}
.PropertyVerificationComponent .buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  justify-content: start;
  align-items: center;
  margin-bottom: var(--spacing-4xl);
}
.PropertyVerificationComponent .buttons .skip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-alt-sm);
  background-color: var(--brand-100);
  cursor: pointer;
}
.PropertyVerificationComponent .buttons .skip p {
  color: var(--brand-400);
}
.PropertyVerificationComponent .buttons .skip:not(.disabled):hover {
  background-color: var(--brand-200);
}
.PropertyVerificationComponent .buttons .skip.disabled {
  background-color: var(--gray-300);
  color: var(--gray-500);
  cursor: default;
  pointer-events: none;
}
.PropertyVerificationComponent .buttons .skip.disabled p {
  color: var(--gray-500);
}
.PropertyVerificationComponent .buttons .button {
  padding: var(--spacing-md) var(--spacing-2xl);
  background-color: var(--gray-300);
  color: var(--gray-700);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PropertyVerificationComponent .buttons .button.disabled {
  opacity: 0.3;
}
.PropertyVerificationComponent .buttons .button:not(.disabled):hover {
  background-color: var(--gray-400);
  color: var(--gray-900);
}
.PropertyVerificationComponent .buttons .button.verify {
  background-color: var(--brand-400);
}
.PropertyVerificationComponent .buttons .button.verify > p {
  color: var(--gray-100) !important;
}
.PropertyVerificationComponent .buttons .button.verify:not(.disabled):hover {
  background-color: var(--brand-300);
}
.PropertyVerificationComponent .buttons .button.agency-company-cta {
  background-color: var(--brand-400);
}
.PropertyVerificationComponent .buttons .button.agency-company-cta > p {
  color: var(--gray-100) !important;
}
.PropertyVerificationComponent .buttons .button.agency-company-cta:not(.disabled):hover {
  background-color: var(--brand-300);
}

@media screen and (max-width: 1024px) {
  #main:has(.PropertyVerificationComponent) > .step-widget-wrapper {
    margin-bottom: var(--spacing-sm);
    padding-top: 0;
  }
  .PropertyVerificationComponent {
    margin: 0 var(--spacing-md) var(--spacing-md);
  }
  .PropertyVerificationComponent .screen-descriptions {
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-2xl);
  }
  .PropertyVerificationComponent .screen-descriptions .screen-description {
    margin: 0;
  }
  .PropertyVerificationComponent .actions {
    flex-direction: column;
  }
  .PropertyVerificationComponent .actions > button {
    width: -webkit-fill-available;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-2xl);
    border-radius: var(--radius-md);
  }
  .PropertyVerificationComponent .actions .ajax-submit {
    order: 1;
  }
  .PropertyVerificationComponent .actions .secondary {
    order: 2;
  }
  .PropertyVerificationComponent .actions .cancel-btn {
    order: 3;
    margin-right: 0;
  }
  .PropertyVerificationComponent .second-screen form .privacy-policy-consent {
    flex-direction: column;
    align-items: stretch;
  }
  .PropertyVerificationComponent .second-screen form .privacy-policy-consent > .l {
    display: none;
  }
  .PropertyVerificationComponent .second-screen form .privacy-policy-consent > .e {
    width: 100%;
    margin-left: 0;
  }
  .PropertyVerificationComponent .second-screen form .frow.with-hint {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }
  .PropertyVerificationComponent .second-screen form .frow.with-hint > .l,
  .PropertyVerificationComponent .second-screen form .frow.with-hint > .e {
    width: 100%;
  }
  .PropertyVerificationComponent .second-screen form .frow.with-hint > .e {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .PropertyVerificationComponent .second-screen form .frow.with-hint .InputComponent {
    width: 100%;
  }
  .PropertyVerificationComponent .second-screen form .frow.with-hint .InputComponent.felement_err + .err {
    margin-top: 0;
  }
  .PropertyVerificationComponent .first-screen:has(.option-wrapper.agency-card) .mobile-bullets {
    display: none;
  }
  .PropertyVerificationComponent .first-screen .options {
    flex-direction: column;
    padding: 0;
    gap: var(--spacing-sm);
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper {
    padding: var(--spacing-lg);
    gap: 12px;
    border-radius: var(--radius-md);
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper .header > * {
    font-size: var(--font-size-lg);
    font-weight: 500;
    line-height: var(--line-height-md);
    letter-spacing: -0.34px;
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper .visible-radio .radio-icon {
    width: 16px;
    height: 16px;
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper .option {
    gap: var(--spacing-md);
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper .option .content {
    gap: var(--spacing-alt-xs);
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper .option .bullets-section {
    display: none;
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper .option .bullets-section > .mobile-body-bullets-title {
    display: none;
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card {
    padding: 16px;
    gap: 12px;
    border-radius: var(--radius-lg);
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option {
    gap: 12px;
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .content .body > * {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .option .bullets-section {
    display: flex;
    gap: 6px;
  }
  .PropertyVerificationComponent .first-screen .options .option-wrapper.agency-card .PropertyVerificationBulletComponent > .bullet-content {
    gap: 6px;
  }
  .PropertyVerificationComponent .first-screen .mobile-bullets {
    display: flex;
    padding: var(--spacing-xs);
  }
  .PropertyVerificationComponent .first-screen .buttons {
    flex-direction: column;
    margin-top: 0;
  }
  .PropertyVerificationComponent .first-screen .buttons > * {
    width: -webkit-fill-available;
    justify-content: center;
    order: 3;
  }
  .PropertyVerificationComponent .first-screen .buttons > *.verify {
    order: 1;
  }
  .PropertyVerificationComponent .first-screen .buttons > *.skip {
    padding: var(--spacing-md) var(--spacing-2xl);
    box-sizing: border-box;
    order: 2;
  }
}
.PropertyVerificationLabelComponent {
  padding: var(--spacing-alt-xs) var(--spacing-sm);
  border-radius: var(--radius-alt-xs);
  display: flex;
  align-items: center;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  gap: var(--spacing-alt-xs);
  width: max-content;
  max-width: unset;
  box-sizing: border-box;
}
.PropertyVerificationLabelComponent.clickable {
  cursor: pointer;
}
.PropertyVerificationLabelComponent img {
  width: 14px !important;
  height: 14px !important;
  min-width: initial !important;
  vertical-align: middle;
}

.PropertyVerificationOptionApprovalModal {
  color: var(--gray-900);
}
.PropertyVerificationOptionApprovalModal .modal-content {
  position: relative;
  padding: var(--spacing-4xl) var(--spacing-sm) var(--spacing-lg);
}
.PropertyVerificationOptionApprovalModal .content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.PropertyVerificationOptionApprovalModal .text-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.PropertyVerificationOptionApprovalModal .option-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.PropertyVerificationOptionApprovalModal .option-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--gray-300);
  background: var(--gray-200);
}
.PropertyVerificationOptionApprovalModal .option-card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.PropertyVerificationOptionApprovalModal .option-card-icon.icon-x-circle-gray {
  background-image: url(/img/redesign/icons/x-circle-gray.svg);
}
.PropertyVerificationOptionApprovalModal .option-card-icon.icon-check-circle {
  background-image: url(/img/redesign/icons/check-circle-green.svg);
}
.PropertyVerificationOptionApprovalModal .option-card-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.PropertyVerificationOptionApprovalModal .option-card-title {
  color: var(--gray-900);
}
.PropertyVerificationOptionApprovalModal .option-card-description {
  color: var(--gray-700);
}
.PropertyVerificationOptionApprovalModal .actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.PropertyVerificationOptionApprovalModal .button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  flex-wrap: wrap;
}
.PropertyVerificationOptionApprovalModal .button-icon {
  display: inline-flex;
  vertical-align: middle;
  width: 34px;
  height: 10px;
  overflow: hidden;
}
.PropertyVerificationOptionApprovalModal .button-icon svg,
.PropertyVerificationOptionApprovalModal .button-icon img {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
}
.PropertyVerificationOptionApprovalModal .primary-action,
.PropertyVerificationOptionApprovalModal .secondary-action {
  width: 100%;
  border: none;
  background: transparent;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.PropertyVerificationOptionApprovalModal .primary-action {
  font-weight: 600;
  background: var(--brand-400);
  color: var(--gray-100);
  display: flex;
  justify-content: center;
}
.PropertyVerificationOptionApprovalModal .primary-action:hover {
  background: var(--brand-300);
}
.PropertyVerificationOptionApprovalModal .secondary-action {
  color: var(--brand-400);
  font-weight: 500;
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}
.PropertyVerificationOptionApprovalModal .ownership-primary-action,
.PropertyVerificationOptionApprovalModal .cadastre-listed-by-action {
  min-height: 44px;
  padding: 12px 12px 12px 16px;
  background: #072f31;
  color: var(--gray-100);
  border-radius: 12px;
  box-shadow: none;
}
.PropertyVerificationOptionApprovalModal .ownership-primary-action:hover,
.PropertyVerificationOptionApprovalModal .cadastre-listed-by-action:hover {
  background: #0a393b;
}
.PropertyVerificationOptionApprovalModal .ownership-secondary-action,
.PropertyVerificationOptionApprovalModal .cadastre-secondary-action {
  min-height: 44px;
  padding: 12px 24px;
  background: #f4f4f4;
  color: var(--gray-800);
  border-radius: 10px;
  display: flex;
  justify-content: center;
}
.PropertyVerificationOptionApprovalModal .ownership-secondary-action > p,
.PropertyVerificationOptionApprovalModal .cadastre-secondary-action > p {
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .PropertyVerificationOptionApprovalModal .modal-content {
    padding: var(--spacing-2xl) var(--spacing-sm);
  }
  .PropertyVerificationOptionApprovalModal .primary-action,
  .PropertyVerificationOptionApprovalModal .secondary-action {
    padding: var(--spacing-md) var(--spacing-2xl);
  }
  .PropertyVerificationOptionApprovalModal .ownership-primary-action,
  .PropertyVerificationOptionApprovalModal .cadastre-listed-by-action {
    padding: 12px 12px 12px 16px;
  }
  .PropertyVerificationOptionApprovalModal .ownership-secondary-action,
  .PropertyVerificationOptionApprovalModal .cadastre-secondary-action {
    padding: 12px 24px;
  }
}
#main:has(.PropertyVerificationSubmittedStatusComponent) > .step-widget-wrapper {
  margin-bottom: 0;
}
#main:has(.PropertyVerificationSubmittedStatusComponent) > .step-widget-wrapper .step-title {
  display: none;
}

#main:not(:has(> .step-widget-wrapper)) .PropertyVerificationSubmittedStatusComponent:not(.skipped) {
  padding-top: var(--spacing-2xl);
}

.PropertyVerificationSubmittedStatusComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}
.PropertyVerificationSubmittedStatusComponent .header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.PropertyVerificationSubmittedStatusComponent .status-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-xs);
}
.PropertyVerificationSubmittedStatusComponent .actions {
  display: flex;
}
.PropertyVerificationSubmittedStatusComponent.skipped {
  gap: var(--spacing-4xl);
  padding-top: var(--spacing-xl);
}
.PropertyVerificationSubmittedStatusComponent.skipped .header {
  gap: var(--spacing-lg);
}
.PropertyVerificationSubmittedStatusComponent.skipped .actions .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-alt-sm);
  background-color: var(--brand-400);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s;
}
.PropertyVerificationSubmittedStatusComponent.skipped .actions .primary-action .TextComponent {
  margin: 0;
}
.PropertyVerificationSubmittedStatusComponent.skipped .actions .primary-action:hover {
  background-color: var(--brand-300);
}

@media screen and (max-width: 1024px) {
  .PropertyVerificationSubmittedStatusComponent {
    padding: 0 var(--spacing-md);
  }
  .PropertyVerificationSubmittedStatusComponent.skipped {
    max-width: 100%;
    gap: var(--spacing-4xl);
    padding-top: 0;
  }
  .padded:has(.PropertyVerificationSubmittedStatusComponent) {
    margin: 0;
    padding: 0;
    border: none;
  }
  #main:has(.PropertyVerificationSubmittedStatusComponent) > .step-widget-wrapper {
    display: none;
  }
}
.PurchasesTabEmptyStateComponent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-6xl);
  padding: var(--spacing-none) var(--spacing-8xl);
  height: 50vh;
}
.PurchasesTabEmptyStateComponent img {
  height: 120px;
}
.PurchasesTabEmptyStateComponent > div > .purchases-empty-state-title {
  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;
}
.PurchasesTabEmptyStateComponent > div > span {
  display: block;
  margin-bottom: var(--spacing-2xl);
  color: var(--gray-900);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 1024px) {
  .PurchasesTabEmptyStateComponent {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-none);
  }
}

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

.RatingsSummaryComponent {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: var(--spacing-md) var(--spacing-none);
}
.RatingsSummaryComponent .summary-block {
  text-align: center;
  margin: var(--spacing-none) var(--spacing-6xl) var(--spacing-none) var(--spacing-none);
}
.RatingsSummaryComponent .summary-title {
  font-size: 16px;
  margin-top: var(--spacing-alt-sm);
  color: var(--gray-700);
  font-weight: bold;
}
.RatingsSummaryComponent .review-count {
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
  color: var(--gray-600);
}
.RatingsSummaryComponent .breakdown {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.RatingsSummaryComponent .breakdown-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: var(--spacing-alt-sm);
}
.RatingsSummaryComponent .rating-stars {
  margin-right: var(--spacing-alt-sm);
}
.RatingsSummaryComponent .progress-bar {
  width: 100%;
  height: 10px;
  position: relative;
  background-color: var(--gray-400);
  border-radius: var(--radius-alt-sm);
}
.RatingsSummaryComponent .progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 10px;
  border-radius: var(--radius-alt-sm);
  background-color: var(--info-400);
}
.RatingsSummaryComponent .percentage-label {
  width: 50px;
  min-width: 50px;
  margin-left: var(--spacing-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}
@media screen and (max-width: 1024px) {
  .RatingsSummaryComponent {
    flex-direction: column;
    align-items: normal;
    max-width: 600px;
    margin: var(--spacing-xl) var(--spacing-md);
  }
  .RatingsSummaryComponent .summary-block {
    margin: var(--spacing-none);
  }
  .RatingsSummaryComponent .breakdown {
    margin-top: var(--spacing-xl);
  }
  .RatingsSummaryComponent .breakdown-row {
    margin-bottom: var(--spacing-sm);
  }
  .RatingsSummaryComponent .percentage-label {
    width: 68px;
    min-width: 68px;
  }
}

.RealEstateMortgageCalculatorComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-2xl);
  padding: var(--spacing-xl) var(--spacing-none) var(--spacing-none);
}
.RealEstateMortgageCalculatorComponent .header {
  display: flex;
  flex-direction: column;
}
.RealEstateMortgageCalculatorComponent .title {
  color: var(--gray-900);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: normal;
}
.RealEstateMortgageCalculatorComponent .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-2xl) var(--spacing-2xl);
}
.RealEstateMortgageCalculatorComponent .field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-xs);
}
.RealEstateMortgageCalculatorComponent .field-label {
  color: var(--gray-800);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-xs);
  letter-spacing: -0.26px;
  margin-bottom: var(--spacing-xxs);
}
.RealEstateMortgageCalculatorComponent .input-surface,
.RealEstateMortgageCalculatorComponent .slider-surface {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.RealEstateMortgageCalculatorComponent .input-surface {
  justify-content: center;
}
.RealEstateMortgageCalculatorComponent .input-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-none);
  width: 100%;
  min-width: var(--spacing-none);
  min-height: 50px;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
  cursor: text;
  transition: background-color 0.2s, border-color 0.2s;
  box-sizing: border-box;
}
.RealEstateMortgageCalculatorComponent .input-content:has(.value-input:not([readonly])):hover {
  border-color: var(--gray-400);
}
.RealEstateMortgageCalculatorComponent .input-content:has(.value-input:not([readonly])):focus-within {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.RealEstateMortgageCalculatorComponent .input-content:has(.value-input[readonly]) {
  cursor: default;
}
.RealEstateMortgageCalculatorComponent .value-input,
.RealEstateMortgageCalculatorComponent .value-input[type=text] {
  all: unset;
  display: block;
  flex: 0 1 auto;
  width: auto !important;
  height: auto !important;
  min-width: 1ch;
  max-width: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--spacing-none) !important;
  padding: var(--spacing-none) !important;
  margin: var(--spacing-none) !important;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  field-sizing: content;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.RealEstateMortgageCalculatorComponent .value-input:focus,
.RealEstateMortgageCalculatorComponent .value-input:active {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.RealEstateMortgageCalculatorComponent .value-input[readonly] {
  color: var(--gray-500);
  -webkit-text-fill-color: var(--gray-500);
  opacity: 1;
  cursor: default;
}
.RealEstateMortgageCalculatorComponent .input-inline-suffix {
  color: var(--gray-700);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}
.RealEstateMortgageCalculatorComponent .input-surface-with-action .input-inline-suffix {
  color: var(--gray-500);
}
.RealEstateMortgageCalculatorComponent .icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-2xl);
  min-width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  margin-left: auto;
  border: none;
  background: transparent;
  padding: var(--spacing-none);
  cursor: pointer;
}
.RealEstateMortgageCalculatorComponent .icon-button .hidden {
  display: none;
}
.RealEstateMortgageCalculatorComponent .icon-button svg {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
}
.RealEstateMortgageCalculatorComponent .helper-text {
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 400;
  line-height: var(--line-height-xs);
}
.RealEstateMortgageCalculatorComponent .slider-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.RealEstateMortgageCalculatorComponent .slider-value-input-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-none);
  flex: 1 1 auto;
  min-width: 0;
  cursor: text;
}
.RealEstateMortgageCalculatorComponent .slider-value-input,
.RealEstateMortgageCalculatorComponent .slider-value-input[type=text] {
  all: unset;
  display: block;
  flex: 0 1 auto;
  width: auto !important;
  min-width: 1ch;
  max-width: 100%;
  color: var(--gray-900);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  field-sizing: content;
  cursor: text;
}
.RealEstateMortgageCalculatorComponent .slider-value-suffix {
  color: var(--gray-700);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}
.RealEstateMortgageCalculatorComponent .slider-secondary-value {
  color: var(--gray-700);
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: var(--line-height-md);
}
.RealEstateMortgageCalculatorComponent .slider-surface {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: var(--gray-300);
  transition: background-color 0.2s, border-color 0.2s;
}
.RealEstateMortgageCalculatorComponent .slider-surface:hover {
  border-color: var(--gray-400);
}
.RealEstateMortgageCalculatorComponent .slider-surface:focus-within {
  background-color: var(--gray-100);
  border-color: var(--gray-900);
}
.RealEstateMortgageCalculatorComponent .slider-secondary-value.muted {
  color: var(--gray-500);
}
.RealEstateMortgageCalculatorComponent .slider-input {
  width: 100%;
  height: var(--spacing-alt-md);
  margin: var(--spacing-none);
  padding: var(--spacing-none);
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  --slider-progress: 0%;
}
.RealEstateMortgageCalculatorComponent .slider-input::-webkit-slider-runnable-track {
  height: 2.5px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--gray-900) 0 var(--slider-progress), var(--gray-400) var(--slider-progress) 100%);
}
.RealEstateMortgageCalculatorComponent .slider-input::-moz-range-track {
  height: 2.5px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--gray-900) 0 var(--slider-progress), var(--gray-400) var(--slider-progress) 100%);
}
.RealEstateMortgageCalculatorComponent .slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--spacing-alt-md);
  height: var(--spacing-alt-md);
  margin-top: -5.75px;
  border: none;
  border-radius: 50%;
  background-color: var(--gray-900);
}
.RealEstateMortgageCalculatorComponent .slider-input::-moz-range-thumb {
  width: var(--spacing-alt-md);
  height: var(--spacing-alt-md);
  border: none;
  border-radius: 50%;
  background-color: var(--gray-900);
}
.RealEstateMortgageCalculatorComponent .preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}
.RealEstateMortgageCalculatorComponent .preset-button {
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--spacing-10xl);
  background-color: var(--gray-300);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--spacing-xl);
  letter-spacing: -0.28px;
  transition: all 0.2s;
  cursor: pointer;
}
.RealEstateMortgageCalculatorComponent .preset-button:hover {
  border-color: var(--brand-400);
  background-color: var(--brand-100);
  color: var(--brand-400);
}
.RealEstateMortgageCalculatorComponent .preset-button.selected {
  border-color: var(--brand-400);
  background-color: var(--brand-100);
  color: var(--brand-400);
}
.RealEstateMortgageCalculatorComponent .summary-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-alt-sm);
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-radius: var(--radius-lg);
  background-color: var(--brand-100);
}
.RealEstateMortgageCalculatorComponent .summary-panel-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.RealEstateMortgageCalculatorComponent .summary-panel-label,
.RealEstateMortgageCalculatorComponent .summary-metric-label {
  color: var(--gray-700);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-md);
}
.RealEstateMortgageCalculatorComponent .summary-panel-value {
  color: var(--brand-400);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.RealEstateMortgageCalculatorComponent .summary-panel-side {
  display: flex;
  gap: var(--spacing-8xl);
  justify-content: flex-end;
  align-items: end;
}
.RealEstateMortgageCalculatorComponent .summary-metric {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: max-content;
}
.RealEstateMortgageCalculatorComponent .summary-metric-value {
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media screen and (max-width: 1024px) {
  .RealEstateMortgageCalculatorComponent {
    gap: var(--spacing-2xl);
    margin: var(--spacing-none);
    padding: var(--spacing-lg);
  }
  .RealEstateMortgageCalculatorComponent .grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  .RealEstateMortgageCalculatorComponent .title {
    font-size: 16px;
  }
  .RealEstateMortgageCalculatorComponent .slider-surface {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .RealEstateMortgageCalculatorComponent .summary-panel {
    padding: var(--spacing-lg);
  }
  .RealEstateMortgageCalculatorComponent .value-input,
  .RealEstateMortgageCalculatorComponent .slider-value-input {
    font-size: 16px;
  }
  .RealEstateMortgageCalculatorComponent .input-inline-suffix {
    font-size: 16px;
  }
  .RealEstateMortgageCalculatorComponent .summary-panel {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  .RealEstateMortgageCalculatorComponent .summary-panel-value {
    font-size: 30px;
  }
  .RealEstateMortgageCalculatorComponent .summary-panel-side {
    gap: var(--spacing-2xl);
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .RealEstateMortgageCalculatorComponent .summary-metric-value {
    font-size: var(--font-size-lg);
  }
}
.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;
}

.ui-dialog:has(.RevealMessageModal) {
  width: min(480px, 100vw - var(--spacing-4xl)) !important;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  background: var(--gray-100) !important;
  box-shadow: none !important;
  max-height: calc(100dvh - var(--spacing-4xl)) !important;
}

.ui-dialog .ui-dialog-content:has(.RevealMessageModal),
.dialog-container #dialog:has(.RevealMessageModal) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 108px) !important;
  padding: 0 var(--spacing-2xl) var(--spacing-2xl) !important;
  border: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: transparent !important;
}

.RevealMessageModal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  background: var(--gray-100);
  color: var(--gray-900);
}

.RevealMessageModal,
.RevealMessageModal * {
  box-sizing: border-box;
}

.RevealMessageModal .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}

.RevealMessageModal .description,
.RevealMessageModal .strongNote,
.RevealMessageModal .protectionTitle,
.RevealMessageModal .bulletText {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}

.RevealMessageModal .description {
  color: var(--gray-800);
  font-weight: 400;
}

.RevealMessageModal .protectionBlock {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-sm);
  width: 100%;
  padding-top: var(--spacing-xs);
}

.RevealMessageModal .protectionTitle,
.RevealMessageModal .strongNote,
.RevealMessageModal strong {
  color: var(--gray-900);
  font-weight: 700;
}

.RevealMessageModal .bulletRow {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
}

.RevealMessageModal .bulletIcon {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 24px;
}

.RevealMessageModal .bulletIcon:before {
  content: "";
  position: absolute;
  top: var(--spacing-xs);
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--brand-400);
  clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%);
}

.RevealMessageModal .bulletText {
  min-width: 0;
  color: var(--gray-900);
  font-weight: 400;
}

.RevealMessageModal .strongNote {
  color: var(--gray-900);
  font-weight: 700;
}

.RevealMessageModal .finalDescription {
  color: var(--gray-900);
}

.RevealMessageModal .actions {
  display: flex;
  gap: var(--spacing-md);
  width: 100%;
  margin-top: var(--spacing-sm);
}

.RevealMessageModal .actionButton {
  display: inline-flex !important;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--spacing-8xl) !important;
  margin: 0 !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border: 0 !important;
  border-radius: var(--radius-alt-sm);
  box-shadow: none !important;
  font-family: inherit;
  font-size: var(--font-size-sm) !important;
  font-weight: 400;
  line-height: var(--line-height-sm) !important;
  letter-spacing: -0.28px;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.RevealMessageModal .cancelButton {
  background: var(--gray-300) !important;
  color: var(--gray-800) !important;
}

.RevealMessageModal .openButton {
  background: var(--brand-100) !important;
  color: var(--brand-400) !important;
}

@media (max-width: 640px) {
  .ui-dialog:has(.RevealMessageModal) {
    width: calc(100vw - var(--spacing-2xl)) !important;
    max-height: calc(100dvh - var(--spacing-2xl)) !important;
  }
  .ui-dialog .ui-dialog-content:has(.RevealMessageModal),
  .dialog-container #dialog:has(.RevealMessageModal) {
    max-height: calc(100dvh - 96px) !important;
    padding: 0 var(--spacing-xl) var(--spacing-xl) !important;
  }
  .RevealMessageModal .content {
    gap: var(--spacing-md);
  }
  .RevealMessageModal .description,
  .RevealMessageModal .strongNote,
  .RevealMessageModal .protectionTitle,
  .RevealMessageModal .bulletText {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
  .RevealMessageModal .actions {
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
  }
  .RevealMessageModal .actionButton {
    height: 52px !important;
    font-size: var(--font-size-sm) !important;
    line-height: var(--line-height-sm) !important;
  }
}
.ReviewStatusModal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-6xl) var(--spacing-6xl);
  color: var(--gray-900);
  box-sizing: border-box;
}
.ReviewStatusModal__icon {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-2xl);
}
.ReviewStatusModal__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.ReviewStatusModal__title {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
  color: var(--gray-900);
  text-align: center;
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: 0;
}
.ReviewStatusModal__description {
  margin: var(--spacing-none);
  color: var(--gray-800);
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: 0;
}

.ui-dialog:has(.ReviewStatusModal) {
  width: 480px !important;
  max-width: calc(100vw - var(--spacing-4xl));
  box-sizing: border-box;
}
.ui-dialog:has(.ReviewStatusModal) .ui-dialog-titlebar {
  position: absolute;
  top: var(--spacing-2xl);
  right: var(--spacing-2xl);
  z-index: 103;
  padding: var(--spacing-none);
}
.ui-dialog:has(.ReviewStatusModal) .ui-dialog-title {
  display: none;
}
.ui-dialog:has(.ReviewStatusModal) .ui-dialog-titlebar-close {
  padding: var(--spacing-none);
}
.ui-dialog:has(.ReviewStatusModal) .ui-icon-closethick:hover {
  background-color: transparent;
}

#dialog:has(.ReviewStatusModal) {
  padding: var(--spacing-none);
}

@media screen and (max-width: 1024px) {
  .ui-dialog:has(.ReviewStatusModal) {
    width: calc(100vw - var(--spacing-4xl)) !important;
  }
  .ui-dialog:has(.ReviewStatusModal) .ui-dialog-titlebar {
    right: var(--spacing-md);
  }
  #dialog:has(.ReviewStatusModal) {
    padding: var(--spacing-none);
  }
  .ReviewStatusModal {
    padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-4xl);
  }
  .ReviewStatusModal__icon {
    width: 200px;
    height: 200px;
  }
  .ReviewStatusModal__title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
  }
  .ReviewStatusModal__description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
}
.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;
  }
}
.SellerApplyButtonComponent#start-selling-btn {
  width: fit-content;
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  background-color: var(--delivery-400);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--gray-100);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  transition: background-color 0.3s ease-out;
}
.SellerApplyButtonComponent#start-selling-btn:hover {
  background-color: var(--delivery-300);
  color: var(--gray-100);
}

.SellerApplyButtonComponent#self-serve-landing-cta {
  padding: var(--spacing-xl) var(--spacing-6xl);
  width: fit-content;
  border-radius: var(--radius-lg);
  background: var(--delivery-400);
  color: var(--gray-100) !important;
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  line-height: var(--line-height-lg);
  letter-spacing: 0.4px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
.SellerApplyButtonComponent#self-serve-landing-cta:hover {
  background-color: var(--delivery-300);
}
@media screen and (max-width: 1024px) {
  .SellerApplyButtonComponent#self-serve-landing-cta {
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-alt-md) var(--spacing-6xl);
    font-size: var(--font-size-sm);
    letter-spacing: 0.28px;
  }
}

.SellerApplyButtonComponent#purchases-empty-state-shop-now-link {
  display: inline-block;
  width: fit-content;
  margin-right: var(--spacing-lg);
  padding: var(--spacing-alt-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  color: var(--gray-100);
  background-color: var(--delivery-400);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  transition: background-color 0.3s ease-out;
  text-align: center;
  cursor: pointer;
}
.SellerApplyButtonComponent#purchases-empty-state-shop-now-link:hover {
  background-color: var(--delivery-300);
}

@media (hover: none) {
  .SellerApplyButtonComponent#self-serve-landing-cta:hover {
    background-color: var(--delivery-400);
  }
}
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section {
  box-sizing: border-box;
  display: flex;
  gap: var(--spacing-2xl);
}

.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one,
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two,
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three {
  width: 33%;
  height: 100%;
}

.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one > div,
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two > div,
.SellerBusinessBenefitSectionComponent .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: var(--radius-2xl);
}

.SellerBusinessBenefitSectionComponent .self-serve-benefit-section h4 {
  margin: var(--spacing-none) var(--spacing-none) var(--spacing-alt-sm);
  color: var(--gray-900);
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 800;
  line-height: var(--line-height-md);
  letter-spacing: -0.17px;
}

.SellerBusinessBenefitSectionComponent .self-serve-benefit-section span {
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.14px;
}

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

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

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

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

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

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

.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one > div::before,
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two > div::before,
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three > div::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: var(--radius-2xl);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: black;
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease-out;
}

.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one > div:hover::before,
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two > div:hover::before,
.SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three > div:hover::before {
  opacity: 20%;
}

@media (hover: none) {
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one > div:hover::before,
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two > div:hover::before,
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three > div:hover::before {
    opacity: 0;
  }
}
@media screen and (max-width: 1024px) {
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section {
    height: 420px;
    overflow-x: scroll;
    scrollbar-width: none;
    overflow-y: hidden;
    gap: var(--spacing-lg);
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one,
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two,
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three {
    display: flex;
    width: fit-content;
    height: 100%;
    gap: var(--spacing-lg);
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two {
    flex-direction: row-reverse;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one > div,
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two > div,
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three > div {
    margin-bottom: var(--spacing-none);
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-none);
    min-height: 420px;
    max-height: 100%;
    min-width: 340px;
    width: 100%;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section h4 {
    margin: var(--spacing-none) var(--spacing-none) var(--spacing-sm);
    font-size: var(--font-size-sm);
    letter-spacing: -0.14px;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section span {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one > div:first-of-type {
    background: url("/img/redesign/icons/sellers_self_service/benefit-brand-awareness-mob.jpg") no-repeat center/cover;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-one > div:last-of-type {
    background: url("/img/redesign/icons/sellers_self_service/benefit-promotional-tools-mob.jpg") no-repeat center/cover;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two > div:first-of-type {
    background: url("/img/redesign/icons/sellers_self_service/benefit-secure-transactions-mob.jpg") no-repeat center/cover;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-two > div:last-of-type {
    background: url("/img/redesign/icons/sellers_self_service/benefit-cost-effectiveness-mob.jpg") no-repeat center/cover;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three > div:first-of-type {
    background: url("/img/redesign/icons/sellers_self_service/benefit-increased-sales-mob.jpg") no-repeat center/cover;
  }
  .SellerBusinessBenefitSectionComponent .self-serve-benefit-section .benefit-col-three > div:last-of-type {
    margin-right: var(--spacing-lg);
    background: url("/img/redesign/icons/sellers_self_service/benefit-sales-management-and-analytical-tools-mob.jpg") no-repeat center/cover;
  }
}
.SellerBuyWithDeliveryStepsDesktopComponent {
  height: 60vh;
  width: 1048px;
  display: grid;
  grid-template-columns: repeat(4, 25%);
}
.SellerBuyWithDeliveryStepsDesktopComponent .steps {
  height: fit-content;
  border-radius: var(--radius-2xl);
  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;
}
.SellerBuyWithDeliveryStepsDesktopComponent .flow-cell {
  position: relative;
}
.SellerBuyWithDeliveryStepsDesktopComponent .steps span {
  color: var(--gray-900);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-md);
  letter-spacing: -0.36px;
}
.SellerBuyWithDeliveryStepsDesktopComponent .step-one {
  width: 179px;
}
.SellerBuyWithDeliveryStepsDesktopComponent .step-two {
  width: 260px;
}
.SellerBuyWithDeliveryStepsDesktopComponent .step-three {
  width: 227px;
}
.SellerBuyWithDeliveryStepsDesktopComponent .step-four {
  width: 308px;
}
.SellerBuyWithDeliveryStepsDesktopComponent .step-five {
  width: 335px;
}
@media screen and (max-width: 1440px) {
  .SellerBuyWithDeliveryStepsDesktopComponent {
    transform: scale(1.02);
    will-change: transform;
  }
}
@media screen and (max-width: 1130px) {
  .SellerBuyWithDeliveryStepsDesktopComponent {
    transform: scale(0.95);
    will-change: transform;
  }
}
@media screen and (max-width: 1024px) {
  .SellerBuyWithDeliveryStepsDesktopComponent {
    display: grid;
    width: 90vw;
    height: 55vh;
    transform: scale(0.95);
    will-change: transform;
  }
  .SellerBuyWithDeliveryStepsDesktopComponent .arrows {
    transform: scale(0.8);
  }
  .SellerBuyWithDeliveryStepsDesktopComponent .steps {
    transform: scale(0.8);
  }
  .SellerBuyWithDeliveryStepsDesktopComponent .step-five {
    left: -50% !important;
  }
  .SellerBuyWithDeliveryStepsDesktopComponent .step-four {
    right: 25% !important;
  }
}
@media screen and (max-width: 768px) {
  .SellerBuyWithDeliveryStepsDesktopComponent {
    display: none;
  }
}

.SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile {
  display: none;
}

@media (min-width: 425px) and (max-width: 768px) {
  .SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    will-change: transform;
  }
  .SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile .arrows {
    transform: scale(1.15);
  }
  .SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile .step-five-mb {
    backdrop-filter: unset;
  }
}
@media screen and (max-width: 425px) {
  .SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile {
    display: block;
    width: 100%;
    height: 84vh;
    position: relative;
    will-change: transform;
  }
}
.SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile .steps {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px 0 rgba(129, 106, 91, 0.15);
  backdrop-filter: blur(12.5px);
  box-sizing: border-box;
  position: absolute;
}

.SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile .arrows {
  position: absolute;
  z-index: 10;
}

.SellerBuyWithDeliveryStepsMobileComponent.delivery-flow-steps-mobile .steps > span {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  font-weight: 500;
}

.SellerBuyWithDeliveryStepsMobileComponent .step-one-mb {
  top: 5%;
  left: 2%;
}

.SellerBuyWithDeliveryStepsMobileComponent .arrow-step-one-mb {
  right: 7%;
  top: 8%;
}

.SellerBuyWithDeliveryStepsMobileComponent .step-two-mb {
  width: 183px;
  top: 18%;
  right: 0;
}

.SellerBuyWithDeliveryStepsMobileComponent .arrow-step-two-mb {
  top: 34%;
  right: 5%;
}

.SellerBuyWithDeliveryStepsMobileComponent .step-three-mb {
  width: 130px;
  top: 50%;
  right: 0;
}

.SellerBuyWithDeliveryStepsMobileComponent .arrow-step-three-mb {
  top: 62%;
  right: 5%;
}

.SellerBuyWithDeliveryStepsMobileComponent .step-four-mb {
  width: 205px;
  left: 0;
  top: 67%;
}

.SellerBuyWithDeliveryStepsMobileComponent .arrow-step-four-mb {
  top: 75%;
  right: 8%;
}

.SellerBuyWithDeliveryStepsMobileComponent .step-five-mb {
  width: 100%;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 425px) {
  .SellerBuyWithDeliveryStepsMobileComponent .arrow-step-one-mb {
    right: 15%;
  }
  .SellerBuyWithDeliveryStepsMobileComponent .arrow-step-three-mb {
    top: 65%;
    right: 12%;
  }
  .SellerBuyWithDeliveryStepsMobileComponent .step-four-mb {
    top: 73%;
  }
  .SellerBuyWithDeliveryStepsMobileComponent .arrow-step-four-mb {
    top: 78%;
    right: 12%;
  }
  .SellerBuyWithDeliveryStepsMobileComponent .step-five-mb {
    backdrop-filter: unset;
  }
}
.SellerBuyWithDeliveryStepsSectionComponent {
  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;
}

.SellerBuyWithDeliveryStepsSectionComponent .self-serve-instructions-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.SellerBuyWithDeliveryStepsSectionComponent img {
  width: 50%;
  border-radius: 64px;
  position: absolute;
  bottom: 0;
  left: 0;
}

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

.SellerBuyWithDeliveryStepsSectionComponent > div {
  position: relative;
  width: 100%;
  height: 100%;
}

.SellerBuyWithDeliveryStepsSectionComponent .arrows {
  position: absolute;
  z-index: 10;
}

.SellerBuyWithDeliveryStepsSectionComponent .arrow-step-one svg path,
.SellerBuyWithDeliveryStepsSectionComponent .arrow-step-two svg path,
.SellerBuyWithDeliveryStepsSectionComponent .arrow-step-three svg path,
.SellerBuyWithDeliveryStepsSectionComponent .arrow-step-four svg path {
  transition: fill 300ms ease-out;
}

.SellerBuyWithDeliveryStepsSectionComponent .self-serve-instructions-section:hover svg > path {
  fill: var(--brand-400);
}

@media (hover: none) {
  .SellerBuyWithDeliveryStepsSectionComponent .self-serve-instructions-section:hover svg > path {
    fill: black;
  }
}
@media screen and (max-width: 1920px) {
  .SellerBuyWithDeliveryStepsSectionComponent .self-serve-instructions-section img {
    transform: translateY(-15%);
  }
}
@media screen and (max-width: 1130px) {
  .SellerBuyWithDeliveryStepsSectionComponent {
    margin: var(--spacing-none) var(--spacing-md) 52px;
  }
}
@media screen and (max-width: 1024px) {
  .SellerBuyWithDeliveryStepsSectionComponent {
    margin: var(--spacing-none) var(--spacing-md) 52px;
    padding-top: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    height: auto;
  }
  .SellerBuyWithDeliveryStepsSectionComponent .self-serve-instructions-section {
    display: block;
    padding-bottom: var(--spacing-2xl);
    align-items: flex-start;
  }
  .SellerBuyWithDeliveryStepsSectionComponent .self-serve-instructions-section img {
    width: 75%;
    bottom: unset;
    top: 0;
    transform: translateX(-10%) translateY(10%);
  }
  .SellerBuyWithDeliveryStepsSectionComponent > h1 {
    font-size: 22px;
    line-height: var(--line-height-xl);
    letter-spacing: -0.44px;
    margin-bottom: var(--spacing-none);
  }
  .SellerBuyWithDeliveryStepsSectionComponent > div {
    width: auto;
    margin: var(--spacing-none) var(--spacing-md);
    box-sizing: border-box;
  }
  .SellerBuyWithDeliveryStepsSectionComponent .arrows svg {
    transform: scale(0.8);
  }
}
@media (min-width: 425px) and (max-width: 768px) {
  .SellerBuyWithDeliveryStepsSectionComponent {
    height: calc(100vh - 24px);
    margin: var(--spacing-none) var(--spacing-md) 52px;
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-none);
  }
  .SellerBuyWithDeliveryStepsSectionComponent h1 {
    font-size: 22px;
    line-height: var(--line-height-xl);
    letter-spacing: -0.44px;
  }
  .SellerBuyWithDeliveryStepsSectionComponent > div {
    width: 95%;
  }
  .SellerBuyWithDeliveryStepsSectionComponent img {
    width: 90%;
    bottom: unset;
    left: unset;
    transform: translateX(-10%) translateY(15%);
  }
}
@media screen and (max-width: 425px) {
  .SellerBuyWithDeliveryStepsSectionComponent {
    height: calc(100vh - 24px);
    margin: var(--spacing-none) var(--spacing-md) 52px;
    padding-top: var(--spacing-2xl);
  }
  .SellerBuyWithDeliveryStepsSectionComponent > div {
    width: auto;
  }
  .SellerBuyWithDeliveryStepsSectionComponent h1 {
    font-size: 22px;
    line-height: var(--line-height-xl);
    letter-spacing: -0.44px;
    margin-bottom: var(--spacing-none);
    width: calc(100% - 24px);
    align-self: center;
  }
  .SellerBuyWithDeliveryStepsSectionComponent .self-serve-instructions-section {
    padding-bottom: var(--spacing-2xl);
  }
  .SellerBuyWithDeliveryStepsSectionComponent img {
    width: 130%;
    bottom: unset;
    top: unset;
    left: unset;
    transform: translate(-10%, 15%);
  }
}
.SellerLandingPageMainSectionComponent {
  width: 100%;
  height: calc(100vh - var(--spacing-11xl));
  overflow-x: visible;
}

.SellerLandingPageMainSectionComponent .self-serve-main-section {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-10xl);
  position: relative;
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .info-section .hero-wrapper {
  display: none;
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .info-section {
  width: 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-4xl);
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > h1,
.SellerLandingPageMainSectionComponent .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;
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > h1 {
  position: relative;
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > h1 span {
  color: var(--brand-400);
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .info-section .delivery-notice {
  color: var(--gray-700);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
  letter-spacing: 0.32px;
  margin-bottom: var(--spacing-none);
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > span {
  color: var(--gray-900);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
  line-height: var(--line-height-xl);
  letter-spacing: -0.4px;
  margin-bottom: var(--spacing-md);
}

.SellerLandingPageMainSectionComponent .self-serve-main-section .hero-wrapper {
  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 screen and (max-width: 1270px) {
  .SellerLandingPageMainSectionComponent {
    margin-left: auto;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section {
    width: 100%;
    gap: 88px;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .hero-wrapper {
    height: 500px;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section {
    width: 50%;
    gap: var(--spacing-2xl);
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section h1,
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section h1 span {
    font-size: 42px;
    letter-spacing: -0.84px;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > span {
    width: auto;
    font-size: 22px;
    letter-spacing: -0.44px;
  }
}
@media screen and (max-width: 1130px) {
  .SellerLandingPageMainSectionComponent {
    width: 1000px;
    margin-left: unset;
  }
}
@media screen and (max-width: 1024px) {
  .SellerLandingPageMainSectionComponent {
    width: 100%;
    height: unset;
    margin-top: var(--spacing-4xl);
    margin-bottom: 52px;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--spacing-none) var(--spacing-md);
    box-sizing: border-box;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section {
    gap: var(--spacing-xl);
    min-width: 100%;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section h1,
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section h1 span {
    text-align: center;
    font-size: 28px;
    line-height: var(--line-height-2xl);
    letter-spacing: -0.56px;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > span,
  .SellerLandingPageMainSectionComponent .self-serve-main-section .hero-wrapper {
    width: 100%;
    box-sizing: border-box;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > span {
    font-size: 16px;
    line-height: var(--line-height-md);
    letter-spacing: -0.32px;
    text-align: center;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section > .delivery-notice {
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: var(--line-height-sm);
    letter-spacing: -0.26px;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .hero-wrapper {
    display: none;
    background: none;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section .hero-wrapper {
    background-image: url("/img/redesign/icons/sellers_self_service/main-section-hero-mobile.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 320px;
    display: block;
    text-align: center;
    border-radius: var(--radius-md);
    position: relative;
  }
  .SellerLandingPageMainSectionComponent .self-serve-main-section .info-section .hero-wrapper img {
    width: 100%;
  }
}
.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;
  }
}
.SingleSelectBubbleV2Component {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.SingleSelectBubbleV2Component .label-and-reset-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-xxs);
}
.SingleSelectBubbleV2Component .label-and-reset-container .label-container {
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: var(--spacing-xl);
  letter-spacing: -0.14px;
}
.SingleSelectBubbleV2Component .label-and-reset-container .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;
}
.SingleSelectBubbleV2Component .label-and-reset-container .reset-btn.hidden {
  opacity: 0;
  height: 0;
}
.SingleSelectBubbleV2Component .options-container {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.SingleSelectBubbleV2Component .options-container .option-container {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  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: var(--font-size-sm);
  line-height: var(--spacing-2xl);
  letter-spacing: -0.28px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: none;
  border: 1px solid var(--gray-300);
}
.SingleSelectBubbleV2Component .options-container .option-container .option-container-icon {
  display: flex;
  align-items: center;
}
.SingleSelectBubbleV2Component .options-container .option-container .option-container-icon svg {
  display: block;
}
.SingleSelectBubbleV2Component .options-container .option-container:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.SingleSelectBubbleV2Component .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px solid var(--brand-400);
}
.SingleSelectBubbleV2Component .options-container .option-container.selected:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.SingleSelectBubbleV2Component .options-container .option-container.selected:hover .c {
  color: var(--gray-100);
}
.SingleSelectBubbleV2Component .options-container .option-container.not-selected {
  background: var(--gray-300);
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
}
.SingleSelectBubbleV2Component .options-container .option-container.not-selected:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.SingleSelectBubbleV2Component .options-container .option-container.disabled, .SingleSelectBubbleV2Component .options-container .option-container[aria-disabled=true] {
  border-color: var(--gray-300);
  background-color: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 0.7;
}
.SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--size-sm .options-container .option-container {
  padding: var(--spacing-alt-xs) var(--spacing-alt-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
}
.SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--size-sm .options-container .option-container .option-container-icon svg {
  max-width: var(--spacing-alt-md);
  height: var(--spacing-alt-md);
}
.SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--size-sm .options-container .option-container .option-container-icon img {
  max-width: var(--spacing-alt-md);
  height: var(--spacing-alt-md);
  width: auto;
  object-fit: contain;
}
.SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--size-lg .options-container .option-container {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: -0.3px;
}
.SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--size-lg .options-container .option-container .option-container-icon svg {
  max-width: var(--spacing-lg);
  height: var(--spacing-lg);
}
.SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--size-lg .options-container .option-container .option-container-icon img {
  max-width: var(--spacing-lg);
  height: var(--spacing-lg);
  width: auto;
  object-fit: contain;
}
.SingleSelectBubbleV2Component--img-icon-filters {
  --ssb-img-icon-filter-default: none;
  --ssb-img-icon-filter-on-brand: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(5660%) hue-rotate(196deg) brightness(100%) contrast(102%);
  --ssb-img-icon-filter-on-light: brightness(0) saturate(100%) invert(1);
  --ssb-img-icon-filter-not-selected: brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(100%) hue-rotate(185deg) brightness(95%) contrast(88%);
  --ssb-img-icon-filter-disabled: brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(100%) hue-rotate(185deg) brightness(95%) contrast(88%);
}
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container .option-container-icon img,
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container .option-container-icon svg {
  display: block;
  filter: var(--ssb-img-icon-filter-default);
}
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container.not-selected .option-container-icon img,
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container.not-selected .option-container-icon svg {
  filter: var(--ssb-img-icon-filter-not-selected);
}
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon img,
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon svg {
  filter: var(--ssb-img-icon-filter-on-brand);
}
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container:hover .option-container-icon img,
.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container:hover .option-container-icon svg {
  filter: var(--ssb-img-icon-filter-on-light);
}
.SingleSelectBubbleV2Component.disabled {
  pointer-events: none;
}
.SingleSelectBubbleV2Component.disabled .label-and-reset-container .reset-btn {
  display: none;
}
.SingleSelectBubbleV2Component.disabled .options-container .option-container {
  cursor: default;
}
.SingleSelectBubbleV2Component.disabled .options-container .option-container:hover {
  background-color: inherit;
  color: inherit;
  border-color: inherit;
}
.SingleSelectBubbleV2Component.disabled .options-container .option-container:not(.selected) {
  color: var(--gray-500);
  border-radius: var(--spacing-10xl);
  background: var(--gray-400);
  border: 1px solid var(--gray-400);
}
.SingleSelectBubbleV2Component.disabled .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px solid var(--brand-400);
}
.SingleSelectBubbleV2Component.disabled.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected) .option-container-icon img, .SingleSelectBubbleV2Component.disabled.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected) .option-container-icon svg {
  filter: var(--ssb-img-icon-filter-disabled);
}
.SingleSelectBubbleV2Component.disabled.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected):hover .option-container-icon img, .SingleSelectBubbleV2Component.disabled.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container:not(.selected):hover .option-container-icon svg {
  filter: var(--ssb-img-icon-filter-disabled);
}
.SingleSelectBubbleV2Component.disabled.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon img, .SingleSelectBubbleV2Component.disabled.SingleSelectBubbleV2Component--img-icon-filters .options-container .option-container.selected .option-container-icon svg {
  filter: var(--ssb-img-icon-filter-on-brand);
}
.SingleSelectBubbleV2Component.felement_err {
  border: none !important;
}
.SingleSelectBubbleV2Component.felement_err .options-container .option-container {
  border: 1px solid var(--error-400);
  background-color: var(--gray-100);
}
.SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected {
  color: var(--brand-400);
  background-color: var(--brand-100);
  border: 1px solid var(--brand-400);
}
.SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}
.SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected:hover .c {
  color: var(--gray-100);
}
.SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.not-selected:hover {
  background-color: var(--brand-400);
  color: var(--gray-100);
  border-color: var(--brand-400);
}

.irt .SingleSelectBubbleV2Component .option-container {
  padding: var(--spacing-alt-sm) var(--spacing-lg);
}

@media screen and (max-width: 1024px) {
  .SingleSelectBubbleV2Component .options-container .option-container:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px solid var(--gray-300);
  }
  .SingleSelectBubbleV2Component .options-container .option-container.selected:hover {
    background-color: var(--brand-400);
    color: var(--gray-100);
    border: 1px solid var(--brand-400);
  }
  .SingleSelectBubbleV2Component.disabled .options-container .option-container:hover, .SingleSelectBubbleV2Component.disabled .options-container .option-container.selected:hover {
    background-color: inherit;
    color: inherit;
    border-color: inherit;
  }
  .SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px solid var(--gray-300);
  }
  .SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected:hover {
    background-color: var(--brand-400);
    color: var(--gray-100);
    border: 1px solid var(--brand-400);
  }
  .SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.selected:hover .c {
    color: var(--gray-100);
  }
  .SingleSelectBubbleV2Component.felement_err:not(.disabled) .options-container .option-container.not-selected:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
    border: 1px solid var(--gray-300);
  }
  .SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container:hover:not(.selected):not(.not-selected) .option-container-icon img, .SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container:hover:not(.selected):not(.not-selected) .option-container-icon svg {
    filter: var(--ssb-img-icon-filter-default);
  }
  .SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container.selected:hover .option-container-icon img, .SingleSelectBubbleV2Component.SingleSelectBubbleV2Component--img-icon-filters:not(.disabled) .options-container .option-container.selected:hover .option-container-icon svg {
    filter: var(--ssb-img-icon-filter-on-light);
  }
}
.SkipPropertyVerificationModal {
  color: var(--gray-900);
}
.SkipPropertyVerificationModal .modal-content {
  position: relative;
  padding: var(--spacing-5xl) var(--spacing-md) var(--spacing-xs);
}
.SkipPropertyVerificationModal .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.SkipPropertyVerificationModal .actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-alt-xs);
}
.SkipPropertyVerificationModal .primary-action,
.SkipPropertyVerificationModal .secondary-action {
  width: 100%;
  border: none;
  background: transparent;
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  letter-spacing: -0.28px;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.SkipPropertyVerificationModal .primary-action {
  background: var(--brand-400);
  color: var(--gray-100);
  font-weight: 600;
}
.SkipPropertyVerificationModal .primary-action:hover {
  background: var(--brand-300);
}
.SkipPropertyVerificationModal .secondary-action {
  color: var(--brand-400);
  font-weight: 500;
}

@media screen and (max-width: 1024px) {
  .SkipPropertyVerificationModal .modal-content {
    padding: var(--spacing-4xl) var(--spacing-xs) var(--spacing-lg);
  }
  .SkipPropertyVerificationModal .primary-action,
  .SkipPropertyVerificationModal .secondary-action {
    padding: var(--spacing-md) var(--spacing-2xl);
  }
}
@media screen and (max-width: 1024px) {
  .SkipPropertyVerificationModal .actions .secondary-action {
    margin-top: var(--spacing-xl);
  }
}
.SocialLoginButtonsComponent {
  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);
}
.SocialLoginButtonsComponent a {
  transition: all 0.2s;
}
.SocialLoginButtonsComponent a:hover {
  -webkit-filter: brightness(110%);
}
.SocialLoginButtonsComponent a img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
@media screen and (max-width: 1024px) {
  .SocialLoginButtonsComponent {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-8xl);
  }
  .SocialLoginButtonsComponent a {
    margin: var(--spacing-none) var(--spacing-sm);
  }
  .SocialLoginButtonsComponent a:first-child {
    margin-left: var(--spacing-none);
  }
  .SocialLoginButtonsComponent a:last-child {
    margin-right: var(--spacing-none);
  }
}
@media screen and (max-width: 320px) {
  .SocialLoginButtonsComponent a {
    margin: var(--spacing-none) var(--spacing-xs);
  }
  .SocialLoginButtonsComponent a img {
    width: 40px;
    height: 40px;
  }
}

.SortingComponent {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}
.SortingComponent__trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: var(--spacing-none);
  border: none;
  background: none;
  color: var(--gray-900);
  cursor: pointer;
}
.SortingComponent__trigger:hover {
  background: none;
  color: var(--brand-400);
}
.SortingComponent__trigger:hover .SortingComponent__sort-icon {
  background-image: url(/img/redesign/icons/sort_blue.svg);
}
.SortingComponent__trigger:hover .SortingComponent__chevron {
  background-image: url(/img/redesign/icons/chevron-down-hover-16.svg);
}
.SortingComponent.open .SortingComponent__trigger {
  color: var(--brand-400);
}
.SortingComponent.open .SortingComponent__sort-icon {
  background-image: url(/img/redesign/icons/sort_blue.svg);
}
.SortingComponent.open .SortingComponent__chevron {
  background-image: url(/img/redesign/icons/chevron-up-active-16.svg);
}
.SortingComponent__sort-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-image: url(/img/redesign/icons/sort.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.SortingComponent__chevron {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-image: url(/img/redesign/icons/chevron-down-16.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.SortingComponent__value {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.SortingComponent__menu {
  position: absolute;
  z-index: 105;
  top: 32px;
  left: 0;
  display: none;
  box-sizing: border-box;
  padding: var(--spacing-xs) var(--spacing-md);
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
}
.SortingComponent.open .SortingComponent__menu {
  display: flex;
  flex-direction: column;
}
.SortingComponent__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-none);
  color: var(--gray-900);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-md);
  white-space: nowrap;
  cursor: pointer;
}
.SortingComponent__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.SortingComponent__radio {
  display: block;
  align-self: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  box-sizing: border-box;
  border: 2px solid var(--gray-400);
  border-radius: var(--radius-4xl);
  background-color: var(--gray-100);
}
.SortingComponent__option input:checked + .SortingComponent__radio {
  border-color: var(--brand-400);
  background: radial-gradient(circle, var(--brand-400) 0 4px, transparent 4px);
}
.SortingComponent__label {
  display: block;
  line-height: var(--line-height-sm);
}
@media screen and (max-width: 1024px) {
  .SortingComponent {
    padding: var(--spacing-sm) var(--spacing-none) var(--spacing-none) var(--spacing-md);
    margin-top: var(--spacing-none);
  }
  .SortingComponent__menu {
    position: fixed;
    z-index: 1101;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    max-height: calc(100% - 100px);
    min-width: auto;
    padding: var(--spacing-lg);
    margin: var(--spacing-none);
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1000000px;
  }
  .SortingComponent__option {
    gap: var(--spacing-sm);
    padding: var(--spacing-alt-sm) var(--spacing-sm);
    font-size: 18px;
    line-height: var(--line-height-md);
  }
  .SortingComponent__label {
    line-height: var(--line-height-md);
  }
}

.SortingComponentWrapper {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.dlbar-action-container .view-options:has(.sort.SortingComponent) {
  display: flex;
}

.filter-view-type-container .BoxComponent.SortingComponent,
.filter-view-type-container .sort.SortingComponent {
  padding: var(--spacing-none);
}

@media screen and (max-width: 1024px) {
  #main:has(.dlrev) .SortingComponent__menu {
    top: 110px;
  }
}
/*noinspection CssUnresolvedCustomProperty*/
.StarRatingComponent {
  --star-shape-mask: url("/img/redesign/icons/star-mask.svg");
  display: inline-flex;
  align-items: center;
  gap: calc(var(--star-rating-size) * 0.2857);
  line-height: 1;
}

.StarRatingComponent .star-rating-star {
  display: block;
  position: relative;
  width: var(--star-rating-size);
  height: var(--star-rating-size);
}

.StarRatingComponent .star-rating-star-shape {
  position: absolute;
  inset: 0;
  mask: var(--star-shape-mask) center/contain no-repeat;
  -webkit-mask: var(--star-shape-mask) center/contain no-repeat;
}

.StarRatingComponent .star-rating-star-empty {
  background: var(--gray-400);
}

.StarRatingComponent .star-rating-star-filled {
  width: var(--star-rating-fill);
  overflow: hidden;
  mask: none;
  -webkit-mask: none;
}

.StarRatingComponent .star-rating-star-filled::before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--star-rating-size);
  height: var(--star-rating-size);
  background: var(--info-400);
  mask: var(--star-shape-mask) center/contain no-repeat;
  -webkit-mask: var(--star-shape-mask) center/contain no-repeat;
}

.dlrev > div.x .StarRatingComponent .star-rating-star-filled::before {
  background: var(--gray-700);
}

.StarRatingComponent > span {
  flex: 0 0 auto;
}

#uinfo .r .StarRatingComponent.h {
  line-height: 1;
}

#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;
  }
}
.StepComponent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  padding-top: var(--spacing-lg);
}
.StepComponent .step-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.64px;
}
.StepComponent .steps-wrapper {
  display: flex;
  gap: var(--spacing-2xl);
}
.StepComponent .steps-wrapper .step-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-sm);
  letter-spacing: -0.26px;
  color: var(--gray-500);
}
.StepComponent .steps-wrapper .step-wrapper.completed {
  color: var(--gray-900);
}
.StepComponent .steps-wrapper .step-wrapper.current {
  color: var(--brand-400);
}
.StepComponent .steps-wrapper .step-wrapper .circle {
  display: flex;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 1px solid var(--gray-400);
  font-size: var(--font-size-xxs);
  font-weight: 600;
  line-height: var(--line-height-alt-xs);
}
.StepComponent .steps-wrapper .step-wrapper .circle > img {
  display: none;
}
.StepComponent .steps-wrapper .step-wrapper.completed .circle {
  color: var(--gray-100);
  background-color: var(--accent-malachite);
  border: none;
}
.StepComponent .steps-wrapper .step-wrapper.completed .circle > img {
  display: block;
  width: var(--font-size-xxs);
  height: var(--font-size-xxs);
}
.StepComponent .steps-wrapper .step-wrapper.current .circle {
  color: var(--gray-100);
  background-color: var(--brand-400);
  border: none;
}
@media screen and (max-width: 1024px) {
  .StepComponent {
    padding-top: var(--spacing-md);
    margin-bottom: var(--spacing-alt-md);
  }
  .StepComponent:has(+ .postdlg .category-page) {
    display: none;
  }
  .StepComponent:has(+ .postdlg .category-selector) {
    padding-top: var(--spacing-none);
  }
  .StepComponent .steps-wrapper {
    display: none;
  }
  .StepComponent .step-title {
    font-size: var(--font-size-xl);
    line-height: 30px;
    padding: var(--spacing-none) var(--spacing-md);
  }
}

.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-400);
  -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.medium-plus-switch {
  gap: var(--spacing-md);
}
.SwitchComponent.medium-plus-switch .switch {
  width: 40px;
  height: 24px;
}
.SwitchComponent.medium-plus-switch .switch:before {
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
}
.SwitchComponent.medium-plus-switch input[type=checkbox]:checked + .switch:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}
.SwitchComponent.medium-plus-switch .switch-text {
  font-size: 16px;
  font-weight: 400;
  line-height: var(--line-height-md);
  letter-spacing: 0;
}
.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;
}

.TabSwitcherComponent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-lg);
  width: 100%;
}
.TabSwitcherComponent .tab-container {
  width: 100%;
}
.TabSwitcherComponent .tab-container > * {
  display: none;
}
.TabSwitcherComponent:has(.SingleSelectBubbleComponent .option-container:nth-child(1).selected) .tab-container > :nth-child(1),
.TabSwitcherComponent:has(.SingleSelectBubbleComponent .option-container:nth-child(1).selected) .tab-container > :nth-child(2),
.TabSwitcherComponent:has(.SingleSelectBubbleComponent .option-container:nth-child(1).selected) .tab-container > :nth-child(3),
.TabSwitcherComponent:has(.SingleSelectBubbleComponent .option-container:nth-child(1).selected) .tab-container > :nth-child(4) {
  display: block;
}

.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;
  letter-spacing: -2%;
}
.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;
  }
}
.UnifiedChatWidgetComponent {
  --chat-widget-base-bottom: 24px;
  --chat-widget-bottom: var(--chat-widget-base-bottom);
  --chat-widget-mobile-viewport-height: 100dvh;
  --chat-widget-mobile-viewport-offset-top: 0px;
  position: fixed;
  right: 32px;
  bottom: var(--chat-widget-bottom, 24px);
  z-index: 1200;
  font-family: var(--font-family-base, List, Arial, sans-serif);
}

.UnifiedChatWidgetComponent[data-position-pending="1"] {
  opacity: 0;
  pointer-events: none;
}

.UnifiedChatWidgetComponent__launcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  padding: 12px;
  border: 0;
  border-radius: 1000px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 2px 24px #daebff;
  cursor: pointer;
  font-family: inherit;
  color: #131315;
  overflow: visible;
  isolation: isolate;
  transition: transform 140ms cubic-bezier(0.21, 0.61, 0.35, 1), box-shadow 140ms cubic-bezier(0.21, 0.61, 0.35, 1), background-color 140ms ease;
  will-change: transform;
}

.UnifiedChatWidgetComponent.has-unread.is-position-ready.is-unread-pulse:not(.is-open) .UnifiedChatWidgetComponent__launcher::before,
.UnifiedChatWidgetComponent.has-unread.is-position-ready.is-unread-pulse:not(.is-open) .UnifiedChatWidgetComponent__launcher::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(218, 235, 255, 0.72);
  box-shadow: 0 0 30px rgba(218, 235, 255, 0.9);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.72);
  animation-name: chat-widget-launcher-ripple;
  animation-duration: 1800ms;
  animation-timing-function: cubic-bezier(0.21, 0.61, 0.35, 1);
  animation-iteration-count: 2;
}

.UnifiedChatWidgetComponent.has-unread.is-position-ready.is-unread-pulse:not(.is-open) .UnifiedChatWidgetComponent__launcher::after {
  inset: -22px;
  animation-delay: 180ms;
}

.UnifiedChatWidgetComponent.is-launcher-hover-restored:not(.is-open) .UnifiedChatWidgetComponent__launcher,
.UnifiedChatWidgetComponent__launcher:hover,
.UnifiedChatWidgetComponent__launcher:focus,
.UnifiedChatWidgetComponent__launcher:active {
  background: #fff !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08), 0 4px 30px rgba(218, 235, 255, 0.95) !important;
  color: #131315 !important;
  outline: none;
  transform: translateY(-2px) scale(1.04) !important;
}

.UnifiedChatWidgetComponent__launcher:active {
  transform: translateY(0) scale(0.98) !important;
}

.UnifiedChatWidgetComponent__launcher:focus-visible {
  outline: 2px solid #0078f9;
  outline-offset: 4px;
}

.UnifiedChatWidgetComponent__launcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform 140ms cubic-bezier(0.21, 0.61, 0.35, 1);
}

.UnifiedChatWidgetComponent.is-launcher-hover-restored:not(.is-open) .UnifiedChatWidgetComponent__launcher-icon,
.UnifiedChatWidgetComponent__launcher:hover .UnifiedChatWidgetComponent__launcher-icon,
.UnifiedChatWidgetComponent__launcher:focus .UnifiedChatWidgetComponent__launcher-icon,
.UnifiedChatWidgetComponent__launcher:active .UnifiedChatWidgetComponent__launcher-icon {
  background: #fff !important;
}

.UnifiedChatWidgetComponent.is-launcher-hover-restored:not(.is-open) .UnifiedChatWidgetComponent__launcher-icon,
.UnifiedChatWidgetComponent__launcher:hover .UnifiedChatWidgetComponent__launcher-icon,
.UnifiedChatWidgetComponent__launcher:focus .UnifiedChatWidgetComponent__launcher-icon {
  transform: scale(1.08);
}

.UnifiedChatWidgetComponent__launcher-icon-svg {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.UnifiedChatWidgetComponent__launcher-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: 4px;
  border-radius: 100px;
  background: #0078f9;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.UnifiedChatWidgetComponent__launcher-badge.is-hidden {
  display: none;
}

@keyframes chat-widget-launcher-ripple {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  18% {
    opacity: 0.72;
  }
  72% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}
.UnifiedChatWidgetComponent__popover {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 440px;
  height: 560px;
  box-sizing: border-box;
  padding: 16px;
  gap: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity 90ms ease-out, visibility 0s linear 90ms;
}

.UnifiedChatWidgetComponent.is-open .UnifiedChatWidgetComponent__launcher {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.UnifiedChatWidgetComponent.is-open .UnifiedChatWidgetComponent__popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.UnifiedChatWidgetComponent.is-open-chat .UnifiedChatWidgetComponent__popover {
  gap: 0;
}

.UnifiedChatWidgetComponent__popover[hidden] {
  display: flex;
}

.UnifiedChatWidgetComponent__header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.UnifiedChatWidgetComponent.is-open-chat .UnifiedChatWidgetComponent__header {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  height: 24px;
  justify-content: flex-end;
  pointer-events: none;
}

.UnifiedChatWidgetComponent__title {
  flex: 1 1 auto;
  font-size: 17px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.34px;
  color: #131315;
}

.UnifiedChatWidgetComponent.is-open-chat .UnifiedChatWidgetComponent__title {
  display: none;
}

.UnifiedChatWidgetComponent__headerActions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.UnifiedChatWidgetComponent.is-open-chat .UnifiedChatWidgetComponent__headerActions {
  pointer-events: auto;
}

.UnifiedChatWidgetComponent__openCurrent {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #131315;
  text-decoration: none;
}

.UnifiedChatWidgetComponent.is-open-chat .UnifiedChatWidgetComponent__openCurrent {
  display: flex;
}

.UnifiedChatWidgetComponent__openCurrentIcon {
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("/img/redesign/icons/chat-open-current.svg") center/24px 24px no-repeat;
  mask: url("/img/redesign/icons/chat-open-current.svg") center/24px 24px no-repeat;
}

.UnifiedChatWidgetComponent__close {
  position: relative;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #131315;
  font-family: inherit;
  font-size: 0;
  line-height: 24px;
  cursor: pointer;
}

.UnifiedChatWidgetComponent__close::before,
.UnifiedChatWidgetComponent__close::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.UnifiedChatWidgetComponent__close::before {
  transform: rotate(45deg);
}

.UnifiedChatWidgetComponent__close::after {
  transform: rotate(-45deg);
}

.UnifiedChatWidgetComponent__openCurrent:hover,
.UnifiedChatWidgetComponent__openCurrent:focus,
.UnifiedChatWidgetComponent__openCurrent:active,
.UnifiedChatWidgetComponent__close:hover,
.UnifiedChatWidgetComponent__close:focus,
.UnifiedChatWidgetComponent__close:active {
  background: transparent !important;
  box-shadow: none !important;
  color: #131315 !important;
  outline: none;
}

.UnifiedChatWidgetComponent__openCurrent:focus-visible,
.UnifiedChatWidgetComponent__close:focus-visible {
  outline: 2px solid #0078f9;
  outline-offset: 2px;
}

.UnifiedChatWidgetComponent.is-open-chat .UnifiedChatWidgetComponent__close {
  font-weight: 300;
}

.UnifiedChatWidgetComponent__list {
  min-height: 0;
  overflow-y: auto;
}

.UnifiedChatWidgetComponent__list #chat_widget_msg_list,
.UnifiedChatWidgetComponent__list .dlmsg {
  width: 100%;
}

.UnifiedChatWidgetComponent__list .dlmsg {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.UnifiedChatWidgetComponent__list .messagesListItem {
  display: block;
  min-height: 68px;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.UnifiedChatWidgetComponent__list .msgThreadRow {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-height: 68px;
  padding: 0;
}

.UnifiedChatWidgetComponent__list .msgThreadMedia {
  position: relative;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
}

.UnifiedChatWidgetComponent__list .msgThreadPreviewImage {
  width: 62.769px;
  height: 62.769px;
  border-radius: 6px;
  object-fit: cover;
}

.UnifiedChatWidgetComponent__list .msgThreadAvatar {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27.897px;
  height: 27.897px;
  border: 1.395px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}

.UnifiedChatWidgetComponent__list .msgThreadBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.UnifiedChatWidgetComponent__list .msgThreadTop,
.UnifiedChatWidgetComponent__list .msgThreadMiddle,
.UnifiedChatWidgetComponent__list .msgThreadBottom,
.UnifiedChatWidgetComponent__list .msgThreadLabelRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.UnifiedChatWidgetComponent__list .msgThreadName {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.28px;
  color: #131315;
}

.UnifiedChatWidgetComponent__list .msgThreadDate {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: #5a5a62;
}

.UnifiedChatWidgetComponent__list .msgThreadPreview {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #45454a;
}

.UnifiedChatWidgetComponent__list .msgThreadSecondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: #5a5a62;
}

.UnifiedChatWidgetComponent__list .msgThreadBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 1000px;
  background: #0078f9;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  font-weight: 600;
}

.UnifiedChatWidgetComponent__skeleton-row {
  display: flex;
  gap: 12px;
  min-height: 68px;
  margin-bottom: 12px;
}

.UnifiedChatWidgetComponent__skeleton-media,
.UnifiedChatWidgetComponent__skeleton-line {
  background: #f4f4f4;
}

.UnifiedChatWidgetComponent__skeleton-media {
  width: 68px;
  height: 68px;
  border-radius: 6px;
}

.UnifiedChatWidgetComponent__skeleton-body {
  flex: 1 1 auto;
  padding-top: 4px;
}

.UnifiedChatWidgetComponent__skeleton-line {
  height: 12px;
  margin-bottom: 10px;
  border-radius: 1000px;
}

.UnifiedChatWidgetComponent__skeleton-line--wide {
  width: 80%;
}

.UnifiedChatWidgetComponent__skeleton-line--short {
  width: 45%;
}

.UnifiedChatWidgetComponent__loadingLabel,
.UnifiedChatWidgetComponent__error,
.UnifiedChatWidgetComponent__list .messagesEmptyState {
  padding: 24px 12px;
  text-align: center;
  color: #75757a;
  font-size: 14px;
  line-height: 20px;
}

.UnifiedChatWidgetComponent__retry {
  margin-top: 12px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 1000px;
  background: #0078f9;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .UnifiedChatWidgetComponent {
    --chat-widget-base-bottom: 16px;
    right: 16px;
  }
  .UnifiedChatWidgetComponent.is-open {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 2147483000;
  }
  .UnifiedChatWidgetComponent__popover {
    right: 0;
    bottom: 0;
    width: min(440px, 100vw - 32px);
    height: min(560px, 100dvh - 96px);
    max-height: calc(100dvh - 96px);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.24);
  }
  .UnifiedChatWidgetComponent.is-open .UnifiedChatWidgetComponent__frameShell {
    border-radius: 12px;
  }
}
.UnifiedChatWidgetComponent__frameShell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  contain: layout paint style;
  transform: translateZ(0);
}

.UnifiedChatWidgetComponent__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 1;
  transition: none;
  background: #fff;
}

.UnifiedChatWidgetComponent[data-loaded="1"] .UnifiedChatWidgetComponent__skeleton,
.UnifiedChatWidgetComponent[data-load-error="1"] .UnifiedChatWidgetComponent__skeleton {
  display: none;
}

.UnifiedChatWidgetComponent__frameShell .UnifiedChatWidgetComponent__error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #fff;
}

.UnifiedChatWidgetComponent__frameShell .UnifiedChatWidgetComponent__skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .UnifiedChatWidgetComponent.has-unread.is-position-ready.is-unread-pulse:not(.is-open) .UnifiedChatWidgetComponent__launcher::before,
  .UnifiedChatWidgetComponent.has-unread.is-position-ready.is-unread-pulse:not(.is-open) .UnifiedChatWidgetComponent__launcher::after {
    animation: none;
  }
  .UnifiedChatWidgetComponent__popover {
    transition: none;
  }
}
/* @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));
  }
}

.UserBlockModal > form .block-user-modal-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
}
.UserBlockModal > form .block-user-modal-wrapper .rgroup {
  flex-direction: column;
  gap: var(--spacing-md);
}
.UserBlockModal > form .block-user-modal-wrapper .rgroup span input {
  margin-right: var(--spacing-none);
}
.UserBlockModal > form .block-user-modal-wrapper .rgroup label {
  color: var(--gray-900);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: 500;
  letter-spacing: -0.3px;
  padding-left: var(--spacing-md);
}
.UserBlockModal > form .block-user-modal-wrapper > input {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: var(--spacing-lg) var(--spacing-none);
  border-radius: var(--radius-md);
  background-color: var(--error-400);
  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;
}
.UserBlockModal > form .block-user-modal-wrapper__reasons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.UserBlockModal > form .block-user-modal-wrapper__reasons .rgroup:has(input[value="4"]:checked) + .textareaWrapper {
  max-height: 220px;
  opacity: 1;
  padding-top: var(--spacing-md);
  pointer-events: auto;
}
.UserBlockModal > form .block-user-modal-wrapper__reasons .textareaWrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  pointer-events: none;
  transition: max-height 0.4s ease, opacity 0.5s ease, padding-top 0.3s ease;
  width: 100%;
}

.UserEditResumeComponent .resume-container {
  display: none;
}

.UserEmployerInfoComponent.resume.emp .header > .l > img {
  width: 64px;
  height: 64px;
}

.postdlg .UserEmployerInfoComponent.resume.emp {
  margin: var(--spacing-md) var(--spacing-lg) var(--spacing-none);
}

.post-form-employer-information .UserEmployerInfoComponent.resume.emp {
  margin: 0;
}
.post-form-employer-information .UserEmployerInfoComponent.resume.emp .header {
  margin: 0;
  display: block;
}

.vi .UserEmployerInfoComponent.resume.emp {
  margin: var(--spacing-xl) var(--spacing-lg);
}

#main:has(.EmptyStateComponent) > .tabbody > div > #tabcontent > .UserEmployerInfoComponent.resume.emp {
  height: calc(100% - 57px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 1024px) {
  #tabcontent .UserEmployerInfoComponent.resume.emp {
    background-color: var(--gray-100);
    padding-left: var(--spacing-md);
    margin: auto;
  }
  #tabcontent .UserEmployerInfoComponent.resume.emp .header {
    margin-left: var(--spacing-none);
  }
  .vi .UserEmployerInfoComponent.resume.emp {
    background-color: var(--gray-100);
    margin: var(--spacing-xl) var(--spacing-lg);
  }
  .vi .UserEmployerInfoComponent.resume.emp .header {
    margin: var(--spacing-none);
  }
  #main:has(.EmptyStateComponent) > .tabbody > div > #tabcontent:has(.UserEmployerInfoComponent.resume.emp) {
    display: flex;
    flex-direction: column;
  }
}
.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);
  top: 100%;
}

@media screen and (max-width: 1024px) {
  .UserMenuComponent > div {
    top: calc(var(--header-height-with-secondary-header) - var(--spacing-10xl));
  }
}
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 .HeaderComponent__row #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 .HeaderComponent__row #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;
}

.UserPageHorizontalTabComponent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: var(--spacing-md) var(--spacing-none) var(--spacing-2xl) var(--spacing-none);
}
.UserPageHorizontalTabComponent::-webkit-scrollbar {
  display: none;
}
.UserPageHorizontalTabComponent .SingleSelectBubbleComponent {
  flex-direction: row;
}
.UserPageHorizontalTabComponent .SingleSelectBubbleComponent .options-container {
  gap: var(--spacing-sm);
}
.UserPageHorizontalTabComponent .SingleSelectBubbleComponent .option-container {
  padding: var(--spacing-sm) var(--spacing-lg);
  line-height: var(--line-height-sm);
}
.UserPageHorizontalTabComponent .r {
  flex: 1;
  margin-right: var(--spacing-sm);
  text-align: right;
}
.UserPageHorizontalTabComponent .c {
  font-size: var(--font-size-sm);
  font-weight: 500;
  float: none;
  padding: var(--spacing-none);
}
.UserPageHorizontalTabComponent .selected .c {
  color: var(--brand-400);
}

.bundlesTabActions {
  margin: -2px var(--spacing-none) var(--spacing-xs) var(--spacing-none);
}
@media screen and (max-width: 1024px) {
  .bundlesTabActions {
    margin: -2px var(--spacing-none) var(--spacing-xs) var(--spacing-md);
  }
}

.bundleTabWrapper {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.bundleTabWrapper > div {
  width: 100%;
}
.bundleTabWrapper .dlbundles {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bundleTabWrapper .dlbundles > .dlf {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl);
  border-top: 1px solid var(--gray-300);
}
.bundleTabWrapper .dlbundles > .dlf > a {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}
.bundleTabWrapper .dlbundles > .EmptyStateComponent {
  flex: 1;
}

.bundleAddButton {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-alt-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gray-100) !important;
  margin: var(--spacing-none);
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: var(--radius-sm);
  background-color: var(--brand-400);
  transition: background-color 0.2s;
}
.bundleAddButton svg,
.bundleAddButton img {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.bundleAddButton span {
  line-height: var(--line-height-xs);
}
.bundleAddButton:hover {
  background-color: var(--brand-300);
}

@media screen and (max-width: 1024px) {
  .UserPageHorizontalTabComponent {
    overflow: scroll;
    padding: var(--spacing-none) var(--spacing-md);
    background-color: var(--gray-100);
    border-bottom: none;
  }
  .UserPageHorizontalTabComponent-tabs {
    margin: var(--spacing-md);
    flex-wrap: nowrap;
  }
  .UserPageHorizontalTabComponent .SingleSelectBubbleComponent .options-container {
    flex-wrap: nowrap;
  }
  .UserPageHorizontalTabComponent .SingleSelectBubbleComponent .option-container {
    font-size: var(--font-size-sm);
    margin: var(--spacing-none);
    white-space: nowrap;
  }
  .UserPageHorizontalTabComponent .SingleSelectBubbleComponent .option-container.not-selected:hover .c {
    color: var(--gray-900);
  }
  .bundleAddButton {
    justify-content: center;
  }
}
#main:has(.EmptyStateComponent) > .tabbody:has(.EmptyStateComponent) > div:not(.UserPageHorizontalTabComponentProps, .info) {
  display: flex;
  flex-direction: column;
}

#main:has(.EmptyStateComponent) > .tabbody:has(.EmptyStateComponent) > div:not(#pageTabBar):not(.rev_sugg, .info) {
  flex: 1;
}

#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 .tab-title-wrapper,
.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 .tab-title-wrapper,
.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 .tab-title-wrapper,
.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.nested-business-tabs > .tab-title-wrapper {
  width: fit-content;
  padding-right: var(--spacing-none);
  align-content: flex-start;
}
@media screen and (max-width: 1024px) {
  .UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs > .tab-title-wrapper {
    width: 248px;
  }
}

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

.UserPageVerticalTabComponent .tab-title-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.UserPageVerticalTabComponent a.tab-title-wrapper {
  gap: var(--spacing-sm);
}

.UserPageVerticalTabComponent div.tab-title-wrapper {
  color: var(--brand-400);
}

.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs .tab-title-text-anchor {
  position: relative;
  display: inline-block;
  width: auto;
}

.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs .tab-title-text {
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.3px;
}

.UserPageVerticalTabComponent > span.business-tab > div.nested-business-tabs .tab-title-badge {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: var(--spacing-sm);
}

@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;
  }
}
.UserUnblockModal > form .unblock-user-modal-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
}
.UserUnblockModal > form .unblock-user-modal-wrapper > input {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: var(--spacing-lg) var(--spacing-none);
  border-radius: var(--radius-md);
  background-color: var(--success-400);
  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;
}

.VerifiedCompanyBadgeComponent {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-xs) var(--spacing-alt-sm) var(--spacing-xs) var(--spacing-xs);
  background-color: rgb(from var(--accent-tropicalIndigo) r g b/0.19);
  border-radius: var(--radius-xs);
  cursor: default;
  color: var(--gray-900);
  vertical-align: middle;
}
.VerifiedCompanyBadgeComponent.narrow {
  padding: var(--spacing-xs) var(--spacing-alt-sm) var(--spacing-xs) var(--spacing-xs);
}
.VerifiedCompanyBadgeComponent.narrow > img {
  width: 14px;
  height: 14px;
}
.VerifiedCompanyBadgeComponent.narrow > .label {
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
}
.VerifiedCompanyBadgeComponent > img {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.VerifiedCompanyBadgeComponent > .label {
  min-width: 0;
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-alt-xs);
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.VerifiedCompanyBadgeComponent.button {
  cursor: pointer;
}
.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.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;
}