convert this html and css with the tailwind CSS class I will provide you:

tailwind classes:

/* Based on TailwindCSS recommendations, consider using classes instead of the `@apply` directive @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction*//* START CSS Normalize */*,::after,::before { @apply transition-all duration-[0.1s] box-border;}h1,h2,h3,h4,h5,h6 { @apply font-[inherit] text-[inherit] m-auto;}html { @apply scroll-smooth leading-[1.4]; text-size-adjust: 100%;}main { @apply block;}h1 { @apply text-[2em] mx-0 my-[0.67em];}hr { @apply box-content h-0 overflow-visible w-full border-[color:var(--light-2-5)] border-solid border-[0.01px];}pre { @apply text-[1em]; font-family: monospace, monospace;}a { @apply bg-transparent no-underline underline-offset-2 text-inherit cursor-pointer hover:underline;}abbr[title] { @apply underline border-b-[none]; text-decoration: underline dotted;}b,strong { @apply font-[bold];}code,kbd,samp { @apply text-[1em]; font-family: monospace, monospace;}small { @apply text-[80%];}sub,sup { @apply text-[75%] leading-[0] relative align-baseline;}sub { @apply bottom-[-0.25em];}sup { @apply top-[-0.5em];}img { @apply border-none;}img,video,audio { @apply max-w-full;}button,input,optgroup,select,textarea { @apply text-[100%] m-0; font-family: inherit;}textarea { @apply resize-y h-60 overflow-auto;}button,input { @apply overflow-visible;}button,select { @apply capitalize;}button,[type="button"],[type="reset"],[type="submit"] { appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { @apply p-0 border-none;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}fieldset { @apply pt-[0.35em] pb-[0.625em] px-[0.75em];}legend { @apply text-inherit table max-w-full whitespace-normal p-0;}progress { @apply align-baseline;}[type="checkbox"],[type="radio"] { @apply p-0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { @apply h-auto;}[type="search"] { @apply -outline-offset-2; appearance: textfield;}[type="search"]::-webkit-search-decoration { appearance: none;}::-webkit-file-uplolisten-button { font: inherit; appearance: button;}details { @apply block;}summary { @apply list-item;}template { @apply hidden;}[hidden] { @apply hidden;}/* END CSS css Normalize */@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } body { color-scheme: initial; }}:root { --main-color: #000; --white: white; --black: black; --primary-color: #18242e; --blue: rgb(0 98 255); --blue-simple: rgb(225 232 255); --green: rgb(127 255 127); --gray-1: #111; --gray-2: #222; --gray-3: #333; --gray-4: #444; --gray-5: #555; --gray-6: #666; --gray-7: #777; --gray-8: #888; --gray-9: #999; --light-1: hsl(0deg 0% 70%); --light-1-5: hsl(0deg 0% 75%); --light-2: hsl(0deg 0% 80%); --light-2-5: hsl(0deg 0% 85%); --light-3: hsl(0deg 0% 90%); --light-3-5: hsl(0deg 0% 95%); --yellow: rgb(255 255 75 / 50%);}/* START CSS Loader */#loader,noscript { @apply w-screen h-screen bg-[color:var(--light-3-5)] z-[1000000] fixed left-0 top-0;}noscript { @apply flex justify-center items-center;}.loader-span { @apply w-20 h-20 border-[color:var(--gray-8)] absolute -translate-x-2/4 -translate-y-2/4 animate-[ease-in-out_loader_infinite_1s_alternate] rounded-[50%] border-t-[0.75rem] border-solid left-2/4 top-2/4;}@keyframes loader { to { @apply -translate-x-2/4 -translate-y-2/4 rotate-[360deg]; }}/* END CSS css Loader *//* START CSS Global Styles */body { @apply bg-[color:var(--light-3-5)] overflow-x-hidden capitalize relative min-h-screen w-full text-[color:var(--gray-1)] flex flex-col m-0; font-family: Arial, Helvetica, sans-serif, Tahoma, system-ui;}body ::-webkit-scrollbar { @apply w-[9px] h-[9px];}body ::-webkit-scrollbar-thumb { @apply bg-[color:var(--light-1)] rounded-[10px] hover:bg-[color:var(--gray-9)] active:bg-[color:var(--gray-8)];}body ::-webkit-scrollbar-corner { @apply bg-transparent;}iframe { @apply hidden invisible;}[onclick] { @apply cursor-pointer; /* transition: opacity 0.1s; */}span[onclick]:hover { @apply opacity-90;}span[onclick]:active { @apply opacity-80;}/* ::selection {color: var(--white);background-color: var(--gray-1);} */button,input[type="checkbox"],input[type="radio"],input[type="checkbox"] + label,input[type="radio"] + label,input[type="submit"],.submit { @apply cursor-pointer;}input:read-only:focus { outline: none;}option { @apply bg-[color:var(--light-3-5)] text-[color:var(--gray-1)];}svg,img { @apply align-middle;}button { @apply bg-transparent border-[none];}@keyframes top { from { @apply -translate-y-full; }}@keyframes top-ha { from { @apply -translate-y-full; }}@keyframes down-left { from { @apply -translate-x-2/4 translate-y-full; }}@keyframes down { from { @apply translate-y-full translate-y-full; }}@keyframes down-ha { from { @apply translate-y-2/4; }}@keyframes open-down { from { @apply h-0; }}@keyframes right { from { @apply translate-x-full; }}@keyframes left { from { @apply -translate-x-full; }}@keyframes right-ha { from { @apply translate-x-2/4; } to { @apply translate-x-0; }}@keyframes left-ha { from { @apply -translate-x-2/4; } to { @apply translate-x-0; }}select { @apply appearance-none pl-2 pr-7; appearance: none !important; background: url("/icons/drop-down.svg") no-repeat calc(100% - 10px);}select.invert-sel { @apply bg-[url("/icons/drop-down-dark.svg")];}li { list-style: none;}ul { @apply mx-0 my-2 px-2 py-0;}ul ul { @apply mx-0 my-2;}input[type="number"] { @apply w-[12ch] border-b-[color:var(--gray-6)] border-b-4 border-solid;}input[type="radio"],input[type="checkbox"] { @apply w-4 h-4 align-text-top sepia saturate-[5600%] hue-rotate-[220deg] brightness-[150%] ml-0 mr-2 my-0.5;}[dir="rtl"] input[type="radio"],[dir="rtl"] [type="checkbox"] { @apply ml-2 mr-0 my-0.5;}.textClick { @apply text-[color:var(--blue)] cursor-pointer text-[0.95rem];}.show-more { @apply max-h-[188px] overflow-y-hidden;}p a { @apply text-[color:var(--blue)];}p { @apply mx-0 my-3;}select,datalist,input[type="password"],input[type="text"],input[type="search"],input[type="tel"],input[type="email"],input[type="number"],input[type="submit"],.submit,textarea,.sign-in-form input[type="button"] { @apply w-full bg-[color:var(--light-3-5)] p-3 rounded-md;}.submit { @apply block text-center font-[bold] mt-2;}input[type="password"]:valid,input[type="tel"]:valid,input[type="email"]:valid { @apply border-[color:var(--blue)];}/* input[type="password"]:invalid,input[type="tel"]:invalid,input[type="email"]:invalid {border-color: red;} */label ~ input[type="password"],label ~ input[type="text"],label ~ input[type="search"],label ~ input[type="tel"],label ~ input[type="email"] { @apply mb-0.5;}input[type="file"] { @apply hidden;}input:focus-visible,input:focus-within,input:focus { @apply outline-black border-black;}input[type="submit"],.submit,.sign-in-form input[type="button"] { @apply bg-[color:var(--blue)] text-[color:var(--white)] border-t-[color:var(--gray-7)] border-b-[color:var(--gray-7)] border-y-2 border-0 border-solid; /* transition: border 0.05s; */}input[type="submit"]:active,.submit:active { @apply border-0;}label:has(button),label:has(input[type="submit"]),label:has(input[type="checkbox"]),label:has(input[type="radio"]) { @apply cursor-pointer relative;}label { align-self: self-start; text-align: initial;}a[href*="mailto:"] { @apply text-[color:var(--blue)] font-[bold];}a[href="#"]:hover { @apply no-underline;}/* END CSS css global styles *//* START CSS Library */.btn { @apply min-w-max no-underline bg-[color:var(--light-2)] text-black font-[bold] cursor-pointer text-[1.1rem] text-center tracking-[0.5px] border-[color:var(--gray-6)] will-change-contents px-4 py-2 rounded-md border-[0px_0_2px_0] border-solid; /* transition: border 0.05s; */}.btn img { @apply align-sub;}.btn:hover,.submit:hover { @apply opacity-95 no-underline; /* transition: opacity 0.1s; */}.btn:active,.submit:active { @apply border-0;}.outline-btn { @apply font-[bold] font-[bold] no-underline text-inherit text-center px-4 py-2 rounded-md border-2 border-[solid]; /* transition: background-color 0.1s, color 0.1s; */}.border-bottom { @apply border-[color:var(--gray-6)] rounded border-[0px_0_2px_0] border-solid;}.border-y-dark { @apply border-[color:var(--gray-6)] rounded-[0_0_8px_8px] border-[2px_0] border-solid;}fw { @apply right-[-22px] absolute;}a fw,label fw { @apply right-[30px];}[dir="rtl"] a fw,[dir="rtl"] label fw { @apply left-[30px] right-[initial];}img,fw,ri { @apply select-none;}fw,ri { @apply pointer-events-none;}a:hover fw,label:hover fw { @apply right-5; /* transition: right 0.2s; */}[dir="rtl"] a:hover fw,[dir="rtl"] label:hover fw { @apply left-5 right-[initial]; /* transition: left 0.2s; */}ri { @apply ml-2 mr-0 my-0; /* transition: 0.1s; */}[dir="rtl"] ri { @apply ml-0 mr-2 my-0; /* transition: 0.1s; */}a:hover ri,label:hover ri,li:hover ri { @apply ml-4 mr-0 my-0;}[dir="rtl"] a:hover ri,[dir="rtl"] label:hover ri,[dir="rtl"] li:hover ri { @apply ml-0 mr-4 my-0;}input:checked + label fw { @apply right-5;}input:checked + [dir="rtl"] label fw { @apply left-5 right-[initial];}.listen-chat span + .listen-message-to::before,.listen-message-to + .listen-message-from::before,.arrow-top::before { @apply content-[""] border-[transparent_transparent_var(--light-2-5)_transparent] absolute top-[-15px] border-8 border-solid;}.hover-show { @apply absolute hidden;}.parent-hover:hover .hover-show,.parent-hover:hover + .hover-show { @apply block z-[10000];}.rotate { @apply rotate-180;}bl { @apply block;}[src*="/icons/x.svg"] { @apply w-[46px] h-[46px] select-none pointer-events-none;}span:has([src*="/icons/x.svg"]) { @apply self-start justify-self-start;}span[onclick*="undo()"] { @apply underline underline-offset-[6px];}[src*="/icons/"]:not([src*="drop-down.svg"]) { @apply min-w-[1.25rem] min-h-[1.25rem] pointer-events-none;}[src*="drop-down.svg"] { @apply w-[0.88rem];}.invert { @apply invert-[1];}.blue { @apply text-[color:var(--blue)] border-[color:var(--blue)];}.blue img,.blue-on { @apply invert-[22%] sepia-[68%] saturate-[5592%] hue-rotate-[218deg] brightness-[100%] contrast-[111%];}.red-on { @apply invert-[12%] sepia-[90%] saturate-[6532%] hue-rotate-[359deg] brightness-[110%] contrast-[114%];}[disabled] { @apply opacity-50 cursor-default pointer-events-none hover:bg-inherit;}/* END CSS css Library *//* START CSS Component */.seller { @apply bg-[color:var(--light-2-5)] w-[72px] h-auto mr-2 p-4 rounded-[25%];}.no-result { @apply hidden flex-col items-center text-[1.75rem] font-[bold] contrast-50 text-center mt-[76px] mb-[120px] mx-4;}body > div,body > main { @apply flex-1;}.no-result img { @apply w-6/12 max-w-[240px] mb-8;}.alert { @apply fixed -translate-x-2/4 -translate-y-2/4 bg-[rgb(255_0_0)] text-[color:var(--white)] font-[bold] shadow-[0_0_12px_rgb(0_0_0_/_50%)] cursor-pointer text-center animate-[ease-in-out_top_0.5s] z-10 hidden p-2 rounded-md left-2/4 top-[10%];}.thanks { @apply fixed shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] -translate-x-2/4 -translate-y-2/4 z-[12] text-center text-xl animate-[ease-in-out_down-left_0.5s] cursor-pointer p-6 rounded-lg left-2/4 top-2/4; background: linear-gradient(-45deg, var(--green), var(--light-3));}.sign-in-form { @apply fixed z-[99] hidden items-center text-xl w-full h-full bg-[color:var(--light-3-5)] text-[color:var(--gray-1)] text-center gap-4 leading-normal overflow-x-hidden overflow-y-auto animate-[ease-in-out_down_0.5s] shadow-[0_-16px_16px_rgba(0,0,0,0.5)] p-4 left-0 top-0; flex-flow: column;}.sign-in-form a { @apply w-full font-[normal];}.sign-in-form > span:first-of-type { @apply absolute;}.sign-in-form label { @apply w-full;}hr.or::after { @apply content-["or"] bg-[color:var(--light-3-5)] -translate-x-3.5 translate-y-[-17px] absolute px-1 py-0;}hr.vr { @apply inline w-0 h-8 ml-2;}.sign-in-form div { @apply mt-0 mb-4 mx-0;}.sign-in-form p { @apply m-1;}.sign-in-form a img { @apply w-8 h-8 ml-0 mr-2 my-0;}.sign-in-form .outline-btn { @apply border-[color:var(--blue)] hover:bg-[color:var(--blue-simple)];}.directory { @apply text-[color:var(--gray-2)] text-[1.1rem] m-2;}.directory a,.directory span { @apply mx-2 my-0;}.directory a:not(:last-of-type)::after,.directory span:not(:last-of-type)::after { @apply content-["/"] absolute mx-1.5 my-0;}span[id*="inv"],.inv { @apply text-[red] text-[0.93rem] block mx-2 my-1;}.red-c { @apply text-[red];}.small-color { @apply text-[color:var(--gray-5)];}span[id*="hint"],span[class*="hint"] { @apply text-[0.93rem] text-[color:var(--gray-5)] block ml-2 mr-0 my-1.5;}.datalist { @apply hidden flex-col gap-1 bg-[color:var(--light-3-5)] border-[color:var(--gray-9)] animate-[ease-in-out_down-ha_0.5s] mt-3 mb-0 mx-0 p-3 rounded-lg border-2;}.datalist div { @apply flex flex-col gap-1;}.datalist input { @apply hidden;}.datalist label { @apply bg-[color:var(--light-3)] w-full px-4 py-2 rounded-lg hover:bg-[color:var(--light-2-5)] active:bg-[color:var(--light-2)]; /* transition: background-color 0.05s; */}.datalist-head { @apply cursor-pointer select-none border-[color:var(--gray-9)] mx-0 my-1 p-3 rounded-lg border-2; background: url("/icons/drop-down-dark.svg") no-repeat center right 24px;}[dir="rtl"] .datalist-head { background: url("/icons/drop-down-dark.svg") no-repeat center left 24px;}label.fill-check { @apply bg-[color:var(--blue-simple)] border border-[color:var(--blue)] px-3 py-2.5 rounded-md border-solid; white-space: wrap;}/* END CSS css Component */header { @apply z-[9] w-full sticky top-[-55px] md:top-0;}.header { @apply flex justify-between items-center flex-wrap text-[color:var(--white)] bg-[color:var(--main-color)] transition-[top] duration-[0.25s] p-2;}.header > div:first-child { @apply whitespace-nowrap items-baseline m-0;}.location-header { @apply z-[100] flex justify-evenly cursor-pointer flex-[0_1_100px] ml-1.5 mr-0 my-0;}[dir="rtl"] .location-header { @apply ml-0 mr-1.5 my-0;}.location-header a { @apply block bg-[color:var(--light-3)] border-b-[color:var(--light-1)] rounded text-[initial] m-px p-2 border-b-[solid] hover:bg-[color:var(--light-2-5)] hover:no-underline;}.location-header input:checked + label { @apply bg-[color:var(--light-1-5)];}.location-header a:hover { /* transition: background-color 0.1s; */}.header-hamburger { @apply flex items-center h-0 md:order-3;}.header-hamburger a ~ span { @apply text-[3.5rem] cursor-pointer mx-2 my-0;}.hamburger-menu { @apply font-[bold] overflow-x-hidden overflow-y-auto hidden fixed text-[color:var(--gray-1)] bg-[color:var(--light-3-5)] h-screen z-[100] animate-[ease-in-out_right_0.4s] shadow-[0_0_42px_16px_rgba(0,0,0,0.5)] will-change-scroll p-4 right-0 top-0;}.hamburger-menu button { @apply font-[bold];}[dir="rtl"] .hamburger-menu { @apply animate-[ease-in-out_left_0.4s] left-0 right-[initial];}.hamburger-menu > a:not(.btn):hover,.hamburger-menu > label:hover { @apply bg-[color:var(--light-3)] rounded; /* transition: background-color 0.1s; */}.hamburger-menu > a:not(.btn):active,.hamburger-menu > label:active { @apply bg-[color:var(--light-2-5)];}.hamburger-menu .listen-seller { @apply mt-2 mb-6 mx-0; flex-wrap: initial;}.hamburger-menu .listen-seller a { @apply p-0;}.hamburger-menu a,.hamburger-menu label { @apply flex items-center no-underline p-2;}.hamburger-menu input { @apply hidden;}.hamburger-menu img { @apply w-[1.6rem] h-[1.6rem] ml-0 mr-3 my-0;}[dir="rtl"] .hamburger-menu img { @apply ml-3 mr-0 my-0;}.hamburger-menu .btn { @apply bg-[color:var(--blue)] text-[color:var(--white)] justify-center mt-6 p-2.5;}.hamburger-menu a:last-child { @apply text-[color:var(--blue)] mt-2;}.location-header > div { @apply select-none relative;}.search-top { @apply flex items-center justify-evenly w-full bg-[color:var(--gray-3)] mt-1.5 mb-0 mx-0 p-1 rounded-lg md:flex-[1_0] md:order-2 md:mx-4 md:my-0;}.selectCategory { @apply min-w-[76px] max-w-[27.5vw] w-[42px] text-[color:var(--white)] bg-inherit cursor-pointer px-0 py-2 border-[none]; outline: none;}.search-header { @apply h-[42px] shadow-[inset_0_0_1px_1px_var(--black)] text-[1.2rem] rounded-lg;}.search-result { @apply hidden bg-[color:var(--light-3-5)] absolute indent-[4px] rounded shadow-[0px_50vh_10px_50vh_rgba(0,0,0,0.5)] w-full z-[1] p-1 top-[15px] top-[42px];}.search-result a { @apply block bg-[color:var(--light-3)] border-b-[color:var(--light-1)] rounded text-[initial] relative m-px p-2 border-b-[solid];}.trend-result a { @apply pl-8 before:content-[""] before:absolute before:w-5 before:h-5 before:ml-2 before:left-0 before:top-1/4;}.trend-result a::before { background: url("/icons/arrow-trend-up.svg") no-repeat;}.search-result a:hover,.search-result .active { @apply bg-[color:var(--light-2-5)]; /* transition: background-color 0.1s; */}.search-header-res { @apply flex-[1_100%] relative;}.search-result svg { @apply align-bottom pr-1;}.bi-search { @apply ml-1;}div.header-map { @apply animate-[ease-in-out_open-down_0.4s] h-60 w-[186px] translate-x-[-27.5%] translate-y-[7.5%] overflow-x-hidden cursor-default shadow-[0px_4px_6px_0px_rgba(0,0,0,0.25)] bg-[color:var(--light-3-5)] absolute hidden z-[99] p-2 rounded-lg top-5;}[dir="rtl"] div.header-map { @apply translate-x-[27.5%] translate-y-[7.5%];}span.header-map { @apply absolute hidden border-[transparent_transparent_var(--light-3-5)_transparent] border-[10px] border-solid right-0.5 top-5;}div.header-map label { @apply block bg-[color:var(--light-3)] border-b-[color:var(--light-1)] rounded text-[initial] m-px p-[9px] border-b-[solid];}.header-map input { @apply hidden;}.my-chat { @apply relative;}.my-chat span,.chat-ico-act { @apply text-center absolute w-[22px] bg-[red] text-[color:var(--white)] font-[bold] text-[0.88rem] h-[22px] p-px rounded-[50%] -left-0.5 -top-0.5;}/* START CSS Footer */.footer-to-top { @apply absolute no-underline top-[-16%] text-center bg-[color:var(--gray-3)] w-full p-2;}footer { @apply flex justify-center items-center w-full bg-[color:var(--main-color)] text-[color:var(--white)] relative mt-20 p-4; flex-flow: wrap;}.footer-about { @apply flex justify-between w-full bg-[color:var(--gray-1)] border-[length:var(--gray-3)] z-[1] mx-0 my-4 p-2 rounded-lg border-[solid];}.footer-about a { @apply block p-2;}footer hr { @apply border-[length:var(--gray-3)] border-[solid];}.footer-one { @apply w-full flex justify-between pt-4 pb-0 px-1;}.footer-copy { @apply flex gap-4 whitespace-nowrap w-max w-full text-center m-auto; flex-flow: wrap column;}.footer-download { @apply flex items-center gap-[1.5vw] px-0 py-8;}.footer-download a:last-child img { @apply rounded max-h-[38px] border-[1.5px] border-[solid];}.footer-follow { @apply flex gap-4 items-center; flex-flow: wrap;}.footer-follow a { @apply inline;}/* END CSS css Footer */@media screen and (width >= 992px) { .header { @apply gap-4 px-8; } .search-top { @apply m-0; } .header-hamburger { @apply order-4; } .hamburger-menu { @apply text-[1.1rem] w-[24%] max-w-[460px]; } .sign-in-header { @apply hidden; } .sign-in, .btn.sell { @apply block order-3; } .location-header { @apply ml-2 mr-0 my-0; } [dir="rtl"] .location-header { @apply ml-0 mr-2 my-0; } .sell-on-fly { @apply hidden; }}.sign-in-header { @apply hidden;}@media screen and (width <= 308px) { .ads-filter > a:first-child { @apply mb-1.5; }}@media screen and (width >= 308px) { .sign-in-header { @apply flex items-center no-underline; }}@media screen and (width <= 300px) { ul { @apply px-0.5 py-0; } .home-card { @apply min-w-[240px]; }}@media screen and (width >= 600px) { .sign-in-form { @apply max-w-[460px] h-min max-h-screen -translate-x-2/4 -translate-y-2/4 animate-[ease-in-out_down-left_0.5s] shadow-[0_0_16px_50vw_rgba(0,0,0,0.6)] p-6 rounded-lg left-2/4 top-2/4; }}@media screen and (width <= 992px) { body ::-webkit-scrollbar { @apply w-1 h-1; } header .sign-in, header .sell { @apply hidden; }}/* START CSS home *//* START CSS image-slide */.home { @apply w-full flex content-center flex-wrap flex-col;}.sell-on-fly { @apply fixed -translate-x-2/4 translate-y-[-150%] shadow-[0_0_2px_2px_var(--gray-5)] bg-[color:var(--light-3)] left-2/4 top-full;}.sell-on-fly img { @apply w-6 h-6;}.home .listen-image { @apply h-[324px] max-w-[1400px] w-[96%] flex-[initial] mt-3 mb-0 mx-2;}.home .listen-images-in { @apply w-full p-0;}.home .listen-images-in a { @apply hidden w-full;}.home .listen-images-in a.active { @apply block;}.home .listen-images-in img { @apply w-full h-full;}/* END CSS css image-slide *//* START CSS sell-cards */.home a { @apply no-underline;}.home .card-layer { @apply w-min;}.card-layer { @apply bg-[color:var(--light-2-5)] max-w-[96vw] flex flex-col justify-between mx-2 my-4 rounded-lg; /* */}.cards { @apply max-w-[1400px] flex flex-wrap justify-center; /* */}.cards-row { @apply flex overflow-x-scroll overflow-y-hidden gap-2 p-2;}.cards-category { @apply font-[bold] text-2xl tracking-[0.75px] pt-4 pb-1 px-6;}.cards-category h2 { @apply mt-0 mb-[18px] mx-0;}.listen-card { @apply min-w-[201px] max-w-[280px] block leading-[1.2] border-[color:var(--gray-9)] relative bg-[color:var(--light-3-5)] flex-1 rounded-lg border-2 border-solid md:max-w-[280px] md:min-w-[252px] flex block max-w-[216px];}.listen-card a { @apply no-underline max-w-[44%];}.card-info { @apply flex items-center justify-between flex-col h-[196px] p-2 md:p-3;}.card-info div:last-of-type:not(ul + div) { align-self: self-start;}.card-info .price { @apply self-baseline;}[dir="rtl"] .card-info .price { @apply self-end;}#ad .price,.card-info .price { @apply font-[bold] text-xl;}input.card-fav,input.card-fav-fill { @apply h-[1.6rem] absolute bg-transparent text-transparent w-7 border-[none] right-3 bottom-[161px];}.card-fav { background: url("/icons/heart.svg") no-repeat;}.card-fav-fill { background: url("/icons/heart-fill.svg") no-repeat;}.card-fav:hover,.card-fav-fill:hover { @apply translate-x-0 translate-y-[-7.5%]; /* transition: transform 0.2s; */}.listen-title { @apply text-[1.2rem] normal-case self-baseline mx-0 my-2; word-break: break-word;}.listen-location,.date { @apply text-[color:var(--gray-3)] whitespace-nowrap w-full;}.date { @apply w-fit mt-1 mb-0 mx-0;}.listen-cards a:not(.add-things a) { @apply no-underline;}.listen-card img:not(.card-info img) { @apply object-cover h-[196px] w-full rounded-md border-b-[color:var(--gray-9)] max-w-[initial] border-r-0 border-b border-solid;}.listen-card a img[src*="ad.svg"] { @apply bg-[color:var(--light-3)] object-contain p-3;}@media screen and (width >= 992px) { .cards-row { @apply gap-3 px-3 py-1; }}@media screen and (width >= 1200px) { .card { @apply max-w-[330px]; }}/* END CSS css home *//* START CSS sitemap */.map main { @apply overflow-x-hidden max-w-[1920px] m-auto pt-4 pb-8 px-[10vw];}.map main h1 { @apply font-bold w-full pt-0 pb-3 px-0 border-b border-solid;}.list { @apply w-full;}.list,.list a { @apply inline-block;}.list a { @apply text-[1.1rem] min-w-[27%] mx-7 my-2;}.bold-line,.list:not(.list .list:last-of-type) + a { @apply w-full font-bold;}.list + a:last-of-type,main > .list:not(main > .list:first-of-type) > a:first-child { @apply font-bold w-full mt-7;}main > .list > a:first-child { @apply text-xl font-bold mx-0 my-4;}.list .list { @apply mt-2.5 mb-4 mx-7;}/* END CSS css sitemap *//* START CSS user */#u .listen-share::before { @apply right-2;}#u main .listen-seller { @apply mt-3 mb-0 mx-0;}#u .cards-row { @apply flex-wrap justify-center;}#u .card-layer { @apply bg-[initial];}#u .listen-card { @apply flex-[1_48%];}#u .listen-view { @apply flex-nowrap;}#u main .seller + div { @apply flex justify-between flex-1 pr-2;}/* END CSS css user *//* START CSS contact us */.contact-us input { @apply mx-0 my-2;}.contact-us > input:last-of-type { @apply text-xl font-[bold];}.contact-us { @apply mt-4 mb-[46px] mx-auto px-2 py-0;}.contact-us textarea { @apply mt-0 mb-2 mx-0;}.contact-us a { @apply text-[color:var(--blue)];}/* END CSS css contact us *//* START CSS privacy */.privacy { @apply w-[95%] bg-white shadow-[0_0_10px_rgba(0,0,0,0.1)] text-[1.2rem] mx-auto my-2.5 px-[5%] py-4;}.privacy h1,.privacy h2,.privacy h3 { @apply text-[#0056b3];}.privacy p { @apply mb-5;}.privacy ul { @apply mb-5;}.privacy li { @apply mb-1.5; list-style: inside;}/* END CSS css privacy *//* START CSS help */#help li { @apply relative pl-8 before:content-["✔️"] before:absolute before:left-0; list-style: none;}/* END CSS help *//* START CSS about us *//* .founder img {max-width: 240px;aspect-ratio: 5/6;object-fit: cover;border-radius: 16px;filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.5));margin: 4px;display: block;}.founder {margin: 40px auto;max-width: max-content;text-align: center;border: 1px solid var(--gray-9);border-radius: 12px;background-color: var(--light-3);filter: drop-shadow(2px 4px 4px rgb(0 0 0 / 0.5));} *//* END CSS about us *//* START CSS sell */#sell #nav { @apply flex-wrap flex-col overflow-y-auto overflow-x-hidden max-w-[920px] w-[90%] text-[1.15rem] mx-auto my-4 p-1.5;}#nav div label { @apply p-[9px];}#sell nav > div,#sell .nav-links > div { @apply flex-[initial] h-[125px] cursor-pointer pt-0 pb-1 px-0;}#sell .nav-links > div { @apply flex-[1_100%];}#sell nav > div:last-child { @apply flex-1 flex-wrap m-0;}#sell nav > div > a::before,#sell .nav-links > div > a::before { @apply w-[4.5rem] h-[4.5rem] top-[42.5%];}#sell nav .click-show a,#sell .nav-links div div a { @apply block text-base rounded bg-[color:var(--light-2-5)] m-1 p-2.5;}#sell nav .click-show a:first-child,#sell .nav-links > div > div > a:first-child { @apply w-auto;}#sell nav .click-show a:hover,#sell nav > div:not(:last-child):hover,#sell .nav-links div a:hover,#sell .nav-links > div:hover { @apply bg-[color:var(--light-2)]; /* transition: background-color 0.1s; */}#sell #nav * { @apply text-center text-[1.2rem];}#sell a:hover { @apply no-underline;}#sell nav .click-show a:active,#sell nav > div:not(:last-child):active,#sell .nav-links div a:not(:first-child):active { @apply bg-[color:var(--light-1)];}#sell nav > div:hover .click-show,#sell .nav-links > div:hover div { @apply hidden;}.categ > h3 { @apply text-2xl font-[bold] w-[90%] max-w-[860px] mx-auto my-4;}.sell-top { @apply flex items-center gap-4 bg-[color:var(--light-2-5)] text-[1.4rem] sticky w-full z-[2] shadow-[0_2px_2px_rgb(0_0_0_/_25%)] font-[bold] px-6 py-3 left-0 top-0 flex items-center gap-4 bg-[color:var(--light-2-5)] text-[1.4rem] sticky w-full shadow-[0_2px_2px_rgb(0_0_0_/_25%)] font-[bold] px-6 py-3 left-0 top-0;}.categ { @apply animate-[ease-in-out_left-ha_0.5s];}.categ nav label { @apply w-[26vw] flex items-center justify-center px-0 py-[9px];}.categ a label { @apply w-full;}#sell .click-show a,#sell .nav-links div div a { @apply p-0;}#sell .parent-click > a > label,#sell .nav-links > div > a label { @apply flex z-[1] relative w-[86vw] max-w-[906px] h-[120px] items-end justify-center;}.categ input { @apply hidden;}.sell-form { @apply bg-[color:var(--light-3-5)] text-xl animate-[ease-in-out_right-ha_0.5s] hidden;}#sell .directory { @apply self-start ml-4 mr-0 mt-4 mb-1;}label[for="input-listen-images"] { @apply flex justify-center gap-2 bg-[color:var(--light-3)] flex-col items-center cursor-pointer text-center mx-auto my-4 p-2 rounded-md;}label[for="input-listen-images"] img { @apply w-2/5 max-w-[120px];}#sell input[type="number"] { @apply w-full;}.sell-form > div:last-child { @apply max-w-[860px] mt-0 mb-[46px] mx-auto px-4 py-0;}.sell-form .btn { @apply w-full bg-[color:var(--blue)] text-[color:var(--white)] p-3.5;}.change-phone-number { @apply fixed -translate-x-2/4 -translate-y-2/4 bg-[color:var(--light-3)] shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] text-[1.1rem] hidden items-center justify-evenly text-center gap-3 animate-[ease-in-out_down-left_0.5s] w-full h-full z-[5] overflow-auto p-4 rounded-md left-2/4 top-2/4; flex-flow: column;}.change-phone-number p { @apply bg-[color:var(--yellow)] text-start flex flex-col gap-3 shadow-[0_0_2px] p-4 rounded-md;}.change-phone-number p span { @apply font-[bold];}.change-phone-number span:nth-child(2) { @apply text-[1.4rem];}@media screen and (width >= 600px) { .change-phone-number { @apply w-[360px] h-fit z-20; }}.seller-in { @apply flex flex-wrap gap-3 mx-0 my-3;}.seller-in img { @apply flex-[0_84px];}.seller-in div { @apply flex-1;}.sell h3,.sell h2,.sell h1 { @apply text-[1.4rem];}.sell-form input,.sell-form textarea { @apply mx-0 my-1;}.contact-method label:not(:first-child) { @apply bg-[color:var(--blue-simple)] inline-block text-center border border-[color:var(--blue)] mx-0 my-3 px-[18px] py-2.5 rounded-md border-solid;}.listen-images { @apply flex flex-wrap justify-center items-center bg-[color:var(--light-3)] gap-2 p-2 rounded-md;}.type { @apply z-[1100];}.price { @apply flex items-baseline gap-[10px_16px] flex-wrap;}.listen-images img { @apply w-28 aspect-[1/1] object-cover rounded-lg;}.listen-images input { @apply hidden;}.listen-images input:checked + img { @apply border-[color:var(--blue)] border-2 border-double;}.listen-images :has(input:checked)::after { @apply content-["ad_image"] absolute bg-[color:var(--blue)] text-[color:var(--white)] text-[0.88rem] px-2 py-1 rounded-[8px_8px_0_0] left-[17.5%] bottom-0;}.sell-form .directory a::after { @apply content-[""];}.sell-form .directory a { @apply content-[""] underline underline-offset-[6px] text-[color:var(--blue)] ml-4;}/* END CSS css sell *//* START CSS saved searches */.searches .card-fav,.searches .card-fav-fill { @apply right-2 top-2;}.fav .card-fav::after,.fav .card-fav-fill::after { @apply top-[-12.5px] left-[-25px];}.saved main { @apply m-2;}@media screen and (width >= 992px) { .saved main { @apply m-4; }}.saved main hr { @apply mx-0 my-4;}.saved-top { @apply flex justify-evenly items-center text-center gap-1.5 whitespace-nowrap text-xl mt-4;}.saved-top a { @apply bg-[color:var(--light-3)] flex-1 border-[color:var(--light-2)] underline-offset-4 no-underline p-4 rounded-md border-[0.0001px] border-solid hover:bg-[color:var(--light-2-5)]; /* transition: 0.1s background-color; */}.saved-top a.active { @apply border-b-[color:var(--blue)] mt-[3px] border-b-4 border-solid;}.saved-search { @apply border border-[color:var(--gray-9)] max-w-max relative pl-3 pr-[26px] py-3 rounded-md border-solid;}.saved-search-top { @apply font-[bold] pl-0 pr-9 pt-0 pb-3;}.saved-search-top span:last-of-type { @apply w-6;}.saved-search div:not(:first-of-type) { @apply flex min-w-[164px] justify-between mx-3 my-1.5;}.saved-search div:not(:first-of-type) span:first-child { @apply flex-[0_36%];}.saved-search div:not(:first-of-type) span:last-of-type { @apply font-[bold];}.saved-searches { @apply flex flex-wrap gap-4 justify-center;}.saved-searches a { @apply no-underline hover:text-[color:var(--gray-1)];}/* END CSS css saved searches *//* START CSS settings */#settings .sell-form { @apply block animate-[unset];}/* END CSS css settings *//* START CSS myads */.myads main { @apply m-2;}@media screen and (width >= 992px) { .myads main { @apply m-4; }}.dash-over-view { @apply items-center border border-[color:var(--light-1)] flex justify-center text-center flex-wrap gap-4 bg-[color:var(--light-3)] text-[0.95rem] mx-0 my-4 p-4 rounded-lg border-solid;}.myads .date { @apply flex justify-center w-full;}.myads .card-info { @apply h-[242px] pb-2;}.delete-ad input { @apply hidden;}.delete { @apply flex justify-center;}.myads [src*="pencil.svg"] { @apply mx-3 my-0;}.sort > span { @apply text-[1.2rem] flex justify-center items-center border max-w-[800px] font-[bold] mx-auto my-6 p-2 rounded-lg border-solid;}.sort > span img { @apply w-4 mx-2 my-0;}.dash-over-view div,.dash-over-view a { @apply bg-[color:var(--light-3-5)] flex border border-[color:var(--light-1)] max-w-[155px] flex-[46%_1] justify-center gap-1 items-center p-4 rounded-lg border-solid; flex-flow: column;}.dash-over-view > a[href*="chat"] { @apply bg-[color:var(--blue)] text-[color:var(--white)] no-underline;}.dash-over-view div span,.dash-over-view a span { @apply text-2xl font-[bold];}.dash-over-view > span { @apply flex-[100%] font-[bold] text-[1.2rem];}.dash-over-view img { @apply w-12;}#dash-cards { @apply flex flex-wrap gap-4 justify-center mx-0 my-4;}.myads .listen-card input { @apply absolute bg-transparent text-transparent w-0 border-[none] scale-150 right-11 bottom-[177px]; background: url("/icons/pencil.svg") no-repeat;}[dir="rtl"] .myads .listen-card input { @apply left-[58px] right-[initial];}.myads .card-info > div:first-of-type { @apply w-full flex justify-between;}.myads .my-card-info { @apply flex justify-evenly w-full text-center items-center gap-2 mt-1;}.myads .my-card-info li { @apply flex flex-col font-[bold] items-center;}.myads .listen-card div img,.myads .listen-card div [type="image"] { @apply w-[1.6rem];}/* .myads .blue { *//* padding: 8px;border: 1px solid;border-radius: 6px;margin-top: 16px;text-align: center;font-size: 1.2rem;font-weight: bold; *//* } *//* .myads .blue img { *//* width: 20px; *//* } */.delete-ad { @apply fixed flex-col -translate-x-2/4 -translate-y-2/4 z-[12] shadow-[0_0_32px_75vw_rgba(0,0,0,0.5)] bg-[color:var(--light-3-5)] font-[bold] text-[1.1rem] hidden animate-[ease-in-out_down-left_0.5s] w-[92%] max-w-max text-center p-4 rounded-md left-2/4 top-2/4; white-space: wrap;}.delete-ad :not(p) { @apply w-[calc(50%_-_19px)] text-[color:var(--white)] inline-block text-center font-[bold] mt-2 mb-0 mx-2 p-3 rounded-md;}.delete-ad div { @apply w-[372px] max-w-full;}.delete-ad button { @apply bg-[red];}.delete-ad span:last-of-type { @apply bg-[color:var(--blue)];}/* END CSS css myads *//* START CSS chat */.listen-chat-view { @apply overflow-x-hidden overflow-y-auto h-screen w-full flex flex-col justify-between;}.listen-chat-head { @apply sticky w-full bg-[color:var(--light-3-5)] z-[1] top-0;}.listen-chat-top { @apply font-[bold] pt-2;}.chat-ico { @apply relative;}.chat-ico img { @apply w-6 ml-2;}.chat-ico-act { @apply content-[""] left-[unset] -right-2 -top-2;}.listen-chat-top,.listen-chat-header { @apply px-4;}[dir="rtl"] img[src*="chevron.svg"]:not(.rotate) { @apply rotate-180;}.listen-chat-top,.listen-chat-header,.listen-chat-top div,.listen-chat-top div a { @apply flex justify-between items-center;}.listen-chat-top div div { @apply gap-2;}.listen-chat-top .seller { @apply w-12 h-12 ml-3 mr-2 my-0 p-1.5;}.listen-chat-header img { @apply max-w-[3rem] aspect-[1/1] mx-1.5 my-0 rounded-lg first-of-type:object-cover;}.listen-chat-header div { @apply relative w-full h-10 ml-2 mr-0 my-0;}.listen-chat-header div p { @apply text-ellipsis overflow-hidden whitespace-nowrap absolute w-full m-0 -top-1.5;}.listen-chat-header div b { @apply absolute -bottom-1.5;}#listen-chat { @apply flex w-full gap-2 relative p-3; flex-flow: column;}#listen-chat p { @apply m-0;}#listen-chat > span { @apply text-[color:var(--gray-4)] text-[0.88rem] mx-auto my-2;}#listen-chat img.active { @apply fixed z-20 -translate-x-2/4 -translate-y-2/4 shadow-[0_0_32px_50vw_rgba(0,0,0,0.9)] max-w-full animate-[ease-in-out_down-left_0.5s] max-h-full bg-[color:var(--light-3-5)] left-2/4 top-2/4;}.listen-message-to,.listen-message-from { @apply w-fit max-w-[80%] relative flex gap-1 flex-col items-end m-0 px-2.5 py-2 rounded-md; word-break: break-word;}.listen-message-gallery { @apply max-w-[18rem];}.messageIn a { @apply block max-w-[6rem];}.listen-message-gallery div { @apply flex gap-1.5; flex-flow: column;}.listen-message-gallery div:not(:last-of-type) span { @apply pb-4;}.listen-message-to { @apply text-[white] before:border-[transparent_transparent_var(--blue)] before:left-1; background: linear-gradient(-18deg, rgb(0 62 255), rgb(0 90 255 / 75%));}.listen-message-from { @apply bg-[color:var(--light-2-5)] self-end before:right-1;}.listen-message-from span { @apply text-[color:var(--gray-4)];}.listen-message-to span { @apply text-[rgba(255,255,255,0.8)];}.listen-message-to span,.listen-message-from span { @apply text-[0.94rem] order-6 pl-0 pr-5 py-0;}[dir="rtl"] .listen-message-to span,[dir="rtl"] .listen-message-from span { @apply pl-5 pr-0 py-0;}.listen-message-to img[src*="icons"],.listen-message-to ::after { @apply invert-[1];}.message-seen::after,.message-check::after { @apply content-[""] absolute w-4 h-4 ml-1;}.message-check::after { background: url("/icons/check2.svg") no-repeat;}.message-seen::after { background: url("/icons/check2-all.svg") no-repeat;}.listen-chat-bottom { @apply flex items-end w-full bg-[color:var(--light-3)] border-t-[color:var(--gray-9)] sticky z-[9] pt-1 pb-0 px-2 border-t border-solid bottom-0;}.listen-chat-bottom textarea { @apply min-h-[36px] h-9 max-h-40 px-9 py-[7.5px];}[dir="rtl"] .listen-chat-bottom textarea { @apply px-9 py-0;}.listen-chat-bottom > label:not(:first-of-type),.listen-chat-bottom > button { @apply cursor-pointer p-1 rounded-md; /* transition: background-color 0.1s; */}.listen-chat-bottom > label:not(:first-of-type):hover,.listen-chat-bottom > button:hover { @apply bg-[color:var(--light-2-5)];}.emojis { @apply relative self-center w-full select-none mr-1;}.emojis > span { @apply text-[38px] absolute cursor-pointer bottom-0;}.emojis-in { @apply hidden absolute top-[-45px] bg-[color:var(--light-3-5)] border border-[color:var(--gray-9)] text-[1.4rem] cursor-pointer animate-[ease-in-out_down_0.25s] rounded-md border-solid;}.emojis-in span { @apply p-1.5 rounded-md hover:bg-[color:var(--light-3)];}.emojis-in span:hover { /* transition: background-color 0.1s; */}#submit-listen-chat { @apply absolute w-9 right-2 bottom-[5px] rotate-180 left-2 right-[initial] bottom-[initial];}.send-attachment { @apply z-[2252] fixed -translate-x-2/4 -translate-y-2/4 bg-[color:var(--light-3)] shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] animate-[ease-in-out_down-left_0.5s] z-[1] w-[360px] max-w-[92vw] min-h-[420px] text-xl hidden flex-wrap p-8 rounded-lg left-2/4 top-2/4;}.send-voice { @apply mt-0 mb-0.5 mx-0;}.send-attachment label,.send-attachment button { @apply flex-[1_0_50%] flex justify-center items-center flex-col cursor-pointer px-0.5 py-0 rounded-md; /* transition: background-color 0.1s; */ align-self: initial;}.send-attachment label:hover,.send-attachment button:hover { @apply bg-[color:var(--light-2-5)];}.send-attachment label img,.send-attachment button img { @apply w-[3.6rem] h-[3.6rem] mb-1;}#listen-chat img[src*="icons"] { @apply w-24 p-2;}#listen-chat video,#listen-chat img { @apply cursor-pointer rounded-md; pointer-events: all;}#listen-chat > div > a { @apply w-24 flex flex-col;}#listen-chat > div a span:last-child { @apply text-[0.88rem] mt-1;}.listen-chat-bottom > label:not(.emojis),.listen-chat-bottom > button { @apply mb-[9px];}.chat { @apply fixed w-screen h-screen bg-[color:var(--light-3-5)] z-10 overflow-auto hidden animate-[ease-in-out_right_0.5s] shadow-[0_0_8px] left-0 top-0;}.chat-top { @apply border-b-[color:var(--light-1)] font-[bold] text-[1.2rem] bg-inherit sticky z-[5] p-4 border-b border-solid top-0;}.chat-type,.chat-status { @apply flex w-full justify-between text-center gap-2;}.chat-type span,.chat-status span { @apply flex-[100%] border border-[color:var(--light-1)] cursor-pointer p-2 rounded-md border-solid; /* transition: background-color 0.1s; */}.chat-type span:hover,.chat-status span:hover { @apply bg-[color:var(--light-2-5)];}.chat-type span.active,.chat-status span.active { @apply border-b-[color:var(--blue)] border-b-4 border-solid;}.chat-status { @apply whitespace-nowrap w-full border-b-[color:var(--light-1)] pt-0 pb-3 px-1 border-b border-solid;}.chat-in { @apply flex flex-col gap-3 p-3;}.chat-in p { @apply overflow-hidden whitespace-nowrap text-ellipsis m-0 first-of-type:font-[bold] first-of-type:text-[1.1rem] last-of-type:text-[color:var(--gray-2)];}.chat-in a { @apply flex flex-col gap-1 bg-[color:var(--light-3)] border border-[color:var(--light-1)] relative no-underline p-3 rounded-md border-solid;}.chat-in a.active,.chat-in a.now { @apply bg-[color:var(--blue-simple)] border border-[color:var(--blue)] font-[bold] border-solid;}.chat-in a.active span:nth-child(2) { @apply text-center bg-[color:var(--blue)] absolute text-[color:var(--white)] text-[0.88rem] px-2.5 py-1 rounded-[53px] -right-2 -top-2;}.chat-in a span { @apply text-end w-[unset] text-[0.88rem] text-[color:var(--gray-5)];}.chat-in a img { @apply w-[46px] h-[46px] object-cover ml-0 mr-3 mt-0 mb-0.5 rounded-lg;}#delete-ico { @apply mr-1;}@media screen and (width >= 768px) { .listen-chat-bottom img { @apply min-w-[1.4rem]; }}@media screen and (width >= 992px) { .listen-chat-top div div { @apply hidden; } .listen-chat-view { @apply flex-[66.66%]; } .chat { @apply block sticky flex-[33.33%] border-l-[color:var(--gray-9)] shadow-none z-[2] border-l border-solid bottom-0; } [dir="rtl"] .chat { @apply border-r-[color:var(--gray-9)] border-l-[initial] border-r border-solid; } .chat-top { @apply px-4 py-5; } .chat-top > span { @apply hidden; } #chat main { @apply flex items-center; }}/* END CSS css chat *//* START CSS ads */.ads { @apply mt-0 mb-16 mx-1.5;}.listen-cards { @apply flex justify-center flex-col gap-3;}.sort-by,.filters { @apply fixed bg-[color:var(--light-3-5)] z-[99] hidden p-4 rounded-lg left-0;}.sort-by { @apply -translate-x-2/4 -translate-y-2/4 shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] w-max animate-[ease-in-out_down-left_0.5s] left-2/4 top-2/4;}.subcategory,.type { @apply whitespace-normal;}.sort-by span { @apply absolute translate-x-0 translate-y-[-72px];}.filters { @apply animate-[ease-in-out_down_0.5s] shadow-[0_-50vh_32px_40vh_rgba(0,0,0,0.5)] whitespace-nowrap shadow-[0_-16px_32px_rgba(0,0,0,0.5)] w-full h-full overflow-x-hidden rounded-none bottom-0;}.filters > div:last-of-type div,.filter-location { white-space: initial;}.filters-top { @apply flex items-center justify-between;}.filter-location { @apply border-[color:var(--gray-9)] shadow-[0_0_2px_var(--black)] text-center text-[1.1rem] mx-0 my-4 pt-4 pb-0 px-0 rounded-md border-2 border-solid;}.filter-location > hr { @apply m-1.5 border-transparent;}.filter-location-in { @apply border-[color:var(--gray-9)] h-[360px] overflow-x-hidden overflow-y-auto hidden animate-[ease-in-out_open-down_0.5s] relative will-change-[content] m-0 p-2 rounded-md border-2 border-solid; text-align: initial;}.filter-location-in div { @apply block cursor-pointer rounded m-1 first-of-type:border-[color:var(--gray-9)] first-of-type:border-[0.1px] first-of-type:border-solid;}.filter-location a { @apply block rounded p-2; /* transition: background-color 0.05s; */}.filter-location a:hover,.filter-location label:hover { @apply bg-[color:var(--light-3)];}.filter-location-in div ul { @apply hidden;}.filter-location-in div:hover ul { @apply block;}.filter-location-in label { @apply cursor-pointer w-full block rounded p-2; /* transition: background-color 0.05s; */}.filter-location-in input[type="checkbox"] { @apply hidden;}.filter-location-in :checked + label { @apply bg-[color:var(--light-2-5)];}.search-location-res { @apply pt-1 pb-0 px-1;}.filter-location-in div:first-child input:checked ~ label { @apply bg-[color:var(--blue)] text-[color:var(--white)];}.filter-location-in input:checked ~ label img { @apply invert-[1];}.filter-price { @apply flex justify-center flex-[1_100%] font-[bold];}.filter-price input { @apply w-[12ch];}.filters > label,.sort-by a { @apply px-0 py-2;}.sort-by a { @apply block;}.sort-by a,.filters li:not(.btn) { @apply rounded p-2; /* transition: background-color 0.1s; */}.sort-by a:hover,.filters li:not(.btn):hover { @apply bg-[color:var(--light-3)] no-underline;}.sort-by a:active,.filters li:not(.btn):active { @apply bg-[color:var(--light-2-5)];}.ads-filter > a:first-child,.ads-filter > div:first-of-type a { @apply text-[color:var(--blue)] border rounded px-2 py-2.5 border-[solid];}.ads-filter a img,.ads-filter .card-fav::after { @apply invert-[22%] sepia-[68%] saturate-[5592%] hue-rotate-[218deg] brightness-[100%] contrast-[111%];}.ads-filter > a:first-child { @apply max-w-[88px] w-full flex justify-between px-3 py-[7px];}.ads-filter .card-fav::after { @apply top-[-3px] left-[-30px];}.filter-result { @apply flex justify-center;}.ads-filter { @apply flex justify-between items-center flex-wrap gap-2 p-2;}.ads-filter a img { @apply w-6 h-6 mr-1.5;}#ads .directory { @apply -mt-1.5 mb-2 mx-0;}.add-things { @apply w-full flex justify-center items-center text-center flex-col bg-[color:var(--blue-simple)] text-[1.2rem] border border-[color:var(--gray-9)] p-4 rounded-lg border-solid;}.add-things a { @apply text-[color:var(--blue)] mt-6 mb-0 mx-0;}.add-things p { @apply m-2;}.add-things :nth-child(1) { @apply font-[bold];}.toggle-pages { @apply flex justify-center select-none text-xl m-6;}.toggle-pages a { @apply border-[color:var(--light-2-5)] px-3 py-2 border-[2px_2px_2px_0] border-solid; /* transition: background-color 0.1s; */}.toggle-pages :hover { @apply bg-[color:var(--light-3)] no-underline;}.toggle-pages :not([disabled]):active,.toggle-pages .active { @apply border-b-[color:var(--gray-3)] border-b-[2.5px] border-solid;}.toggle-pages :first-child { @apply rounded-[6px_0_0_6px] border-[2px_1px_2.5px_2px];}.toggle-pages :last-child { @apply rounded-[0_6px_6px_0];}.trend-searches { @apply flex flex-wrap text-[1.1rem] bg-[color:var(--light-3)] leading-normal gap-2 mx-0 my-6 p-4 rounded-lg;}.trend-searches :first-child { @apply text-[color:var(--blue)];}.trend-searches li { @apply border px-2 py-0 rounded-md border-[solid];}@media screen and (width <= 480px) { .listen-card:not(.vert-card .listen-card) { @apply max-w-[initial]; } .myads .listen-card input { @apply top-[19px]; } input.card-fav:not(.vert-card .card-fav), input.card-fav-fill:not(.vert-card .card-fav-fill) { @apply right-2 top-2; } .listen-card:not(.vert-card .listen-card) a { @apply flex max-w-[initial]; } .listen-card:not(.vert-card .listen-card) img:not(.card-info img) { @apply border-r-[color:var(--gray-9)] min-w-[38%] w-[38%] border-b-0 border-r border-solid; } .listen-card:not(.vert-card .listen-card) a img[src*="ad.svg"] { @apply max-h-[initial]; }}@media screen and (width >= 480px) { #delete-ico { @apply mr-4; } #delete-ico span { display: initial; } .ads { @apply mt-0 mb-16 mx-4; } .listen-cards { @apply flex flex-wrap flex-row gap-4; }}@media screen and (width >= 992px) { .ads { @apply flex mt-4; } .ads-filter { @apply flex-[0] border border-[color:var(--gray-9)] h-fit max-w-[25%] rounded-lg border-solid; } .ads-filter > hr { @apply hidden; } .ads-filter > div:first-of-type a:last-child { @apply hidden; } .ads-filter > div { @apply mt-1.5 -mb-1.5 mx-2; } .ads-filter > a:first-child { @apply mt-1.5 mb-0 mx-1.5; } .filters-top > span { @apply hidden; } .ads-result-right { @apply flex-1 pl-4; } [dir="rtl"] .ads-result-right { @apply pl-[initial] pr-4; } .filters { @apply max-w-max block shadow-none z-[1]; position: initial; } .filters > label { @apply pr-[60%]; } #ads .directory { @apply mt-0 mb-2 mx-0; }}/* END CSS css ads *//* START CSS ad */.listen-image { @apply flex justify-center relative flex-1 bg-[color:var(--light-2)] m-1 rounded-lg md:self-stretch md:max-h-[680px] md:m-1; flex-flow: wrap;}[dir="rtl"] .listen-image { direction: initial;}.listen-images-in img { @apply hidden rounded-lg;}.listen-images-in { @apply cursor-zoom-in h-full flex justify-center px-0 py-2;}.listen-images-in .active { @apply block animate-[ease-in-out_fade_0.25s] object-cover;}@keyframes fade { from { @apply opacity-80; } to { @apply opacity-100; }}.open-slide img { @apply object-contain;}.open-slide #listen-small-image { @apply bottom-8;}.close-up-right { @apply fixed invert-[1] hidden right-4 top-4;}.listen-image-number { @apply absolute bg-[rgba(255,255,255,0.5)] invert-[1] rounded px-2 py-1 left-2 top-2;}#listen-small-image { @apply absolute -translate-x-2/4 flex flex-wrap justify-center bg-[rgba(0,0,0,0.5)] gap-1 rounded text-[color:var(--white)] w-max max-w-full p-1 left-2/4 bottom-2;}#listen-small-image img { @apply w-[46px] min-w-[46px] object-cover rounded cursor-pointer h-[46px];}#listen-small-image .active { @apply brightness-125 border-[color:var(--gray-8)] border-2 border-solid;}#prevButton,#nextButton { @apply text-[color:var(--white)] text-[1.75rem] bg-[rgba(0,0,0,0.5)] cursor-pointer absolute translate-x-0 -translate-y-2/4 select-none pt-3 pb-4 px-3 top-2/4;}#prevButton { @apply rounded-[0_8px_8px_0] left-0;}#nextButton { @apply rounded-[8px_0_0_8px] right-0;}.listen-price > div { @apply relative;}.listen-share { @apply hidden justify-center items-center bg-[color:var(--light-2-5)] gap-2 shadow-[4px_4px_4px_rgba(0,0,0,0.5)] absolute w-max animate-[ease-in-out_down_0.4s] p-2 rounded-lg right-0 top-[34px] before:right-[60px];}.listen-share img { @apply w-8 h-8; filter: drop-shadow(0 0 2px var(--black));}.listen-content { @apply mx-2 my-4 md:max-w-[33.33%] md:flex md:flex-col md:self-start;}.listen-content input { @apply right-0 -top-0.5;}.listen-content > div:first-child { @apply mx-1 my-0;}.listen-content > p { @apply text-[1.2rem];}.listen-price { @apply flex justify-between;}.listen-price > span { @apply text-xl font-[bold];}.listen-price .share { @apply mr-[46px];}.listen-price div span { @apply top-2;}.listen-content .location-in { @apply text-[color:var(--gray-3)] text-[0.95rem] flex justify-between items-center;}.listen-details { @apply bg-[color:var(--light-3)] whitespace-nowrap flex justify-center gap-2 border mt-4 p-3 rounded-lg border-[solid]; flex-flow: wrap;}.listen-details > b { @apply w-full;}.listen-details > div { @apply flex justify-between basis-full mx-4 my-0 md:basis-[44%];}.listen-details div span { @apply font-[bold];}.listen-description { @apply border mt-4 pt-4 p-3 rounded-lg border-[solid];}.listen-description > p { @apply text-[1.1rem]; word-break: break-word;}.listen-seller { @apply flex items-center gap-2 flex-wrap mx-0 my-6;}.listen-seller a { @apply text-[color:var(--blue)] font-[bold];}.listen-seller > div > span { @apply block -mb-3.5;}.listen-seller .btn { @apply bg-[color:var(--blue)] w-full text-[color:var(--white)] mt-3;}.listen-seller .outline-btn { @apply w-full border-[color:var(--blue)];}.listen-report { @apply flex justify-between mx-0 my-4;}.listen-info { @apply w-full pt-0 pb-1 px-2;}.listen-contact { @apply flex justify-between bg-[color:var(--light-3)] fixed gap-[2%] w-full p-2 border-t-2 border-t-[rgba(0,0,0,0.5)] border-solid left-0 bottom-0 md:hidden;}.listen-contact a { @apply text-[white] bg-[color:var(--blue)] no-underline flex items-center gap-1 font-[bold] text-[1.12rem] justify-center flex-1 px-0 py-4 rounded-lg;}#ad .date { @apply flex-[0];}#ad img[src="/uploads/ad.svg"] { @apply h-[72%] mt-[68px];}#ad .show-more { @apply max-h-[146px];}.listen-contact a img { @apply invert-[1];}.listen-form-report { @apply bg-[color:var(--light-3)] fixed -translate-x-2/4 -translate-y-2/4 shadow-[0_0_32px_100vh_rgba(0,0,0,0.5)] z-10 hidden animate-[ease-in-out_down-left_0.5s] gap-3 w-full h-full p-4 left-2/4 top-2/4 md:w-[360px] md:h-max md:rounded-lg; flex-flow: column nowrap;}.listen-form-report .btn { @apply bg-[color:var(--blue)] text-[color:var(--white)];}.listen-form-report h3 { @apply text-xl font-[bold] m-auto;}.listen-form-report span { @apply absolute right-1 top-1;}.favorite-num { @apply flex gap-2 border border-[color:var(--blue)] text-center items-center font-[bold] justify-evenly w-full text-[1.2rem] mt-3 mb-auto mx-auto p-2 rounded-md border-solid;}.favorite-num img { @apply w-7 mx-2 my-0;}.favorite-num span { @apply flex items-center mx-[18px] my-0;}.vr { @apply relative;}.vr:not(hr.vr)::after { @apply content-[""] w-px h-5 absolute translate-x-0 -translate-y-2/4 pr-[88px] border-r border-solid left-2/4 top-2/4;}.listen-view { @apply flex flex-col justify-center items-center md:flex-wrap md:mx-2 md:my-0;}@media screen and (width >= 768px) { .listen-view { flex-direction: initial; } #u .listen-content { @apply max-w-[420px]; }}.open-slide { @apply fixed h-full z-30 min-w-full shadow-[0_-16px_16px_5vw_rgba(0,0,0)] animate-[ease-in-out_down_0.8s] cursor-auto overflow-auto justify-center content-center max-h-[initial] rounded-none -left-1 -top-1; object-fit: initial; background: linear-gradient(to bottom, rgb(0 0 0 / 50%), var(--black)), linear-gradient(to top, rgb(0 0 0 / 50%), var(--black));}/* END CSS css ad */.hidden { @apply invisible;}.none { @apply hidden;}.block { @apply block;}.flex { @apply flex;}.v-none { @apply hidden;}.visible { @apply visible;}


HTML:
convert this html and css with the tailwind CSS class I will provide you:

tailwind classes:

/* Based on TailwindCSS recommendations, consider using classes instead of the `@apply` directive @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction*//* START CSS Normalize */*,::after,::before { @apply transition-all duration-[0.1s] box-border;}h1,h2,h3,h4,h5,h6 { @apply font-[inherit] text-[inherit] m-auto;}html { @apply scroll-smooth leading-[1.4]; text-size-adjust: 100%;}main { @apply block;}h1 { @apply text-[2em] mx-0 my-[0.67em];}hr { @apply box-content h-0 overflow-visible w-full border-[color:var(--light-2-5)] border-solid border-[0.01px];}pre { @apply text-[1em]; font-family: monospace, monospace;}a { @apply bg-transparent no-underline underline-offset-2 text-inherit cursor-pointer hover:underline;}abbr[title] { @apply underline border-b-[none]; text-decoration: underline dotted;}b,strong { @apply font-[bold];}code,kbd,samp { @apply text-[1em]; font-family: monospace, monospace;}small { @apply text-[80%];}sub,sup { @apply text-[75%] leading-[0] relative align-baseline;}sub { @apply bottom-[-0.25em];}sup { @apply top-[-0.5em];}img { @apply border-none;}img,video,audio { @apply max-w-full;}button,input,optgroup,select,textarea { @apply text-[100%] m-0; font-family: inherit;}textarea { @apply resize-y h-60 overflow-auto;}button,input { @apply overflow-visible;}button,select { @apply capitalize;}button,[type="button"],[type="reset"],[type="submit"] { appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { @apply p-0 border-none;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}fieldset { @apply pt-[0.35em] pb-[0.625em] px-[0.75em];}legend { @apply text-inherit table max-w-full whitespace-normal p-0;}progress { @apply align-baseline;}[type="checkbox"],[type="radio"] { @apply p-0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { @apply h-auto;}[type="search"] { @apply -outline-offset-2; appearance: textfield;}[type="search"]::-webkit-search-decoration { appearance: none;}::-webkit-file-uplolisten-button { font: inherit; appearance: button;}details { @apply block;}summary { @apply list-item;}template { @apply hidden;}[hidden] { @apply hidden;}/* END CSS css Normalize */@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } body { color-scheme: initial; }}:root { --main-color: #000; --white: white; --black: black; --primary-color: #18242e; --blue: rgb(0 98 255); --blue-simple: rgb(225 232 255); --green: rgb(127 255 127); --gray-1: #111; --gray-2: #222; --gray-3: #333; --gray-4: #444; --gray-5: #555; --gray-6: #666; --gray-7: #777; --gray-8: #888; --gray-9: #999; --light-1: hsl(0deg 0% 70%); --light-1-5: hsl(0deg 0% 75%); --light-2: hsl(0deg 0% 80%); --light-2-5: hsl(0deg 0% 85%); --light-3: hsl(0deg 0% 90%); --light-3-5: hsl(0deg 0% 95%); --yellow: rgb(255 255 75 / 50%);}/* START CSS Loader */#loader,noscript { @apply w-screen h-screen bg-[color:var(--light-3-5)] z-[1000000] fixed left-0 top-0;}noscript { @apply flex justify-center items-center;}.loader-span { @apply w-20 h-20 border-[color:var(--gray-8)] absolute -translate-x-2/4 -translate-y-2/4 animate-[ease-in-out_loader_infinite_1s_alternate] rounded-[50%] border-t-[0.75rem] border-solid left-2/4 top-2/4;}@keyframes loader { to { @apply -translate-x-2/4 -translate-y-2/4 rotate-[360deg]; }}/* END CSS css Loader *//* START CSS Global Styles */body { @apply bg-[color:var(--light-3-5)] overflow-x-hidden capitalize relative min-h-screen w-full text-[color:var(--gray-1)] flex flex-col m-0; font-family: Arial, Helvetica, sans-serif, Tahoma, system-ui;}body ::-webkit-scrollbar { @apply w-[9px] h-[9px];}body ::-webkit-scrollbar-thumb { @apply bg-[color:var(--light-1)] rounded-[10px] hover:bg-[color:var(--gray-9)] active:bg-[color:var(--gray-8)];}body ::-webkit-scrollbar-corner { @apply bg-transparent;}iframe { @apply hidden invisible;}[onclick] { @apply cursor-pointer; /* transition: opacity 0.1s; */}span[onclick]:hover { @apply opacity-90;}span[onclick]:active { @apply opacity-80;}/* ::selection {color: var(--white);background-color: var(--gray-1);} */button,input[type="checkbox"],input[type="radio"],input[type="checkbox"] + label,input[type="radio"] + label,input[type="submit"],.submit { @apply cursor-pointer;}input:read-only:focus { outline: none;}option { @apply bg-[color:var(--light-3-5)] text-[color:var(--gray-1)];}svg,img { @apply align-middle;}button { @apply bg-transparent border-[none];}@keyframes top { from { @apply -translate-y-full; }}@keyframes top-ha { from { @apply -translate-y-full; }}@keyframes down-left { from { @apply -translate-x-2/4 translate-y-full; }}@keyframes down { from { @apply translate-y-full translate-y-full; }}@keyframes down-ha { from { @apply translate-y-2/4; }}@keyframes open-down { from { @apply h-0; }}@keyframes right { from { @apply translate-x-full; }}@keyframes left { from { @apply -translate-x-full; }}@keyframes right-ha { from { @apply translate-x-2/4; } to { @apply translate-x-0; }}@keyframes left-ha { from { @apply -translate-x-2/4; } to { @apply translate-x-0; }}select { @apply appearance-none pl-2 pr-7; appearance: none !important; background: url("/icons/drop-down.svg") no-repeat calc(100% - 10px);}select.invert-sel { @apply bg-[url("/icons/drop-down-dark.svg")];}li { list-style: none;}ul { @apply mx-0 my-2 px-2 py-0;}ul ul { @apply mx-0 my-2;}input[type="number"] { @apply w-[12ch] border-b-[color:var(--gray-6)] border-b-4 border-solid;}input[type="radio"],input[type="checkbox"] { @apply w-4 h-4 align-text-top sepia saturate-[5600%] hue-rotate-[220deg] brightness-[150%] ml-0 mr-2 my-0.5;}[dir="rtl"] input[type="radio"],[dir="rtl"] [type="checkbox"] { @apply ml-2 mr-0 my-0.5;}.textClick { @apply text-[color:var(--blue)] cursor-pointer text-[0.95rem];}.show-more { @apply max-h-[188px] overflow-y-hidden;}p a { @apply text-[color:var(--blue)];}p { @apply mx-0 my-3;}select,datalist,input[type="password"],input[type="text"],input[type="search"],input[type="tel"],input[type="email"],input[type="number"],input[type="submit"],.submit,textarea,.sign-in-form input[type="button"] { @apply w-full bg-[color:var(--light-3-5)] p-3 rounded-md;}.submit { @apply block text-center font-[bold] mt-2;}input[type="password"]:valid,input[type="tel"]:valid,input[type="email"]:valid { @apply border-[color:var(--blue)];}/* input[type="password"]:invalid,input[type="tel"]:invalid,input[type="email"]:invalid {border-color: red;} */label ~ input[type="password"],label ~ input[type="text"],label ~ input[type="search"],label ~ input[type="tel"],label ~ input[type="email"] { @apply mb-0.5;}input[type="file"] { @apply hidden;}input:focus-visible,input:focus-within,input:focus { @apply outline-black border-black;}input[type="submit"],.submit,.sign-in-form input[type="button"] { @apply bg-[color:var(--blue)] text-[color:var(--white)] border-t-[color:var(--gray-7)] border-b-[color:var(--gray-7)] border-y-2 border-0 border-solid; /* transition: border 0.05s; */}input[type="submit"]:active,.submit:active { @apply border-0;}label:has(button),label:has(input[type="submit"]),label:has(input[type="checkbox"]),label:has(input[type="radio"]) { @apply cursor-pointer relative;}label { align-self: self-start; text-align: initial;}a[href*="mailto:"] { @apply text-[color:var(--blue)] font-[bold];}a[href="#"]:hover { @apply no-underline;}/* END CSS css global styles *//* START CSS Library */.btn { @apply min-w-max no-underline bg-[color:var(--light-2)] text-black font-[bold] cursor-pointer text-[1.1rem] text-center tracking-[0.5px] border-[color:var(--gray-6)] will-change-contents px-4 py-2 rounded-md border-[0px_0_2px_0] border-solid; /* transition: border 0.05s; */}.btn img { @apply align-sub;}.btn:hover,.submit:hover { @apply opacity-95 no-underline; /* transition: opacity 0.1s; */}.btn:active,.submit:active { @apply border-0;}.outline-btn { @apply font-[bold] font-[bold] no-underline text-inherit text-center px-4 py-2 rounded-md border-2 border-[solid]; /* transition: background-color 0.1s, color 0.1s; */}.border-bottom { @apply border-[color:var(--gray-6)] rounded border-[0px_0_2px_0] border-solid;}.border-y-dark { @apply border-[color:var(--gray-6)] rounded-[0_0_8px_8px] border-[2px_0] border-solid;}fw { @apply right-[-22px] absolute;}a fw,label fw { @apply right-[30px];}[dir="rtl"] a fw,[dir="rtl"] label fw { @apply left-[30px] right-[initial];}img,fw,ri { @apply select-none;}fw,ri { @apply pointer-events-none;}a:hover fw,label:hover fw { @apply right-5; /* transition: right 0.2s; */}[dir="rtl"] a:hover fw,[dir="rtl"] label:hover fw { @apply left-5 right-[initial]; /* transition: left 0.2s; */}ri { @apply ml-2 mr-0 my-0; /* transition: 0.1s; */}[dir="rtl"] ri { @apply ml-0 mr-2 my-0; /* transition: 0.1s; */}a:hover ri,label:hover ri,li:hover ri { @apply ml-4 mr-0 my-0;}[dir="rtl"] a:hover ri,[dir="rtl"] label:hover ri,[dir="rtl"] li:hover ri { @apply ml-0 mr-4 my-0;}input:checked + label fw { @apply right-5;}input:checked + [dir="rtl"] label fw { @apply left-5 right-[initial];}.listen-chat span + .listen-message-to::before,.listen-message-to + .listen-message-from::before,.arrow-top::before { @apply content-[""] border-[transparent_transparent_var(--light-2-5)_transparent] absolute top-[-15px] border-8 border-solid;}.hover-show { @apply absolute hidden;}.parent-hover:hover .hover-show,.parent-hover:hover + .hover-show { @apply block z-[10000];}.rotate { @apply rotate-180;}bl { @apply block;}[src*="/icons/x.svg"] { @apply w-[46px] h-[46px] select-none pointer-events-none;}span:has([src*="/icons/x.svg"]) { @apply self-start justify-self-start;}span[onclick*="undo()"] { @apply underline underline-offset-[6px];}[src*="/icons/"]:not([src*="drop-down.svg"]) { @apply min-w-[1.25rem] min-h-[1.25rem] pointer-events-none;}[src*="drop-down.svg"] { @apply w-[0.88rem];}.invert { @apply invert-[1];}.blue { @apply text-[color:var(--blue)] border-[color:var(--blue)];}.blue img,.blue-on { @apply invert-[22%] sepia-[68%] saturate-[5592%] hue-rotate-[218deg] brightness-[100%] contrast-[111%];}.red-on { @apply invert-[12%] sepia-[90%] saturate-[6532%] hue-rotate-[359deg] brightness-[110%] contrast-[114%];}[disabled] { @apply opacity-50 cursor-default pointer-events-none hover:bg-inherit;}/* END CSS css Library *//* START CSS Component */.seller { @apply bg-[color:var(--light-2-5)] w-[72px] h-auto mr-2 p-4 rounded-[25%];}.no-result { @apply hidden flex-col items-center text-[1.75rem] font-[bold] contrast-50 text-center mt-[76px] mb-[120px] mx-4;}body > div,body > main { @apply flex-1;}.no-result img { @apply w-6/12 max-w-[240px] mb-8;}.alert { @apply fixed -translate-x-2/4 -translate-y-2/4 bg-[rgb(255_0_0)] text-[color:var(--white)] font-[bold] shadow-[0_0_12px_rgb(0_0_0_/_50%)] cursor-pointer text-center animate-[ease-in-out_top_0.5s] z-10 hidden p-2 rounded-md left-2/4 top-[10%];}.thanks { @apply fixed shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] -translate-x-2/4 -translate-y-2/4 z-[12] text-center text-xl animate-[ease-in-out_down-left_0.5s] cursor-pointer p-6 rounded-lg left-2/4 top-2/4; background: linear-gradient(-45deg, var(--green), var(--light-3));}.sign-in-form { @apply fixed z-[99] hidden items-center text-xl w-full h-full bg-[color:var(--light-3-5)] text-[color:var(--gray-1)] text-center gap-4 leading-normal overflow-x-hidden overflow-y-auto animate-[ease-in-out_down_0.5s] shadow-[0_-16px_16px_rgba(0,0,0,0.5)] p-4 left-0 top-0; flex-flow: column;}.sign-in-form a { @apply w-full font-[normal];}.sign-in-form > span:first-of-type { @apply absolute;}.sign-in-form label { @apply w-full;}hr.or::after { @apply content-["or"] bg-[color:var(--light-3-5)] -translate-x-3.5 translate-y-[-17px] absolute px-1 py-0;}hr.vr { @apply inline w-0 h-8 ml-2;}.sign-in-form div { @apply mt-0 mb-4 mx-0;}.sign-in-form p { @apply m-1;}.sign-in-form a img { @apply w-8 h-8 ml-0 mr-2 my-0;}.sign-in-form .outline-btn { @apply border-[color:var(--blue)] hover:bg-[color:var(--blue-simple)];}.directory { @apply text-[color:var(--gray-2)] text-[1.1rem] m-2;}.directory a,.directory span { @apply mx-2 my-0;}.directory a:not(:last-of-type)::after,.directory span:not(:last-of-type)::after { @apply content-["/"] absolute mx-1.5 my-0;}span[id*="inv"],.inv { @apply text-[red] text-[0.93rem] block mx-2 my-1;}.red-c { @apply text-[red];}.small-color { @apply text-[color:var(--gray-5)];}span[id*="hint"],span[class*="hint"] { @apply text-[0.93rem] text-[color:var(--gray-5)] block ml-2 mr-0 my-1.5;}.datalist { @apply hidden flex-col gap-1 bg-[color:var(--light-3-5)] border-[color:var(--gray-9)] animate-[ease-in-out_down-ha_0.5s] mt-3 mb-0 mx-0 p-3 rounded-lg border-2;}.datalist div { @apply flex flex-col gap-1;}.datalist input { @apply hidden;}.datalist label { @apply bg-[color:var(--light-3)] w-full px-4 py-2 rounded-lg hover:bg-[color:var(--light-2-5)] active:bg-[color:var(--light-2)]; /* transition: background-color 0.05s; */}.datalist-head { @apply cursor-pointer select-none border-[color:var(--gray-9)] mx-0 my-1 p-3 rounded-lg border-2; background: url("/icons/drop-down-dark.svg") no-repeat center right 24px;}[dir="rtl"] .datalist-head { background: url("/icons/drop-down-dark.svg") no-repeat center left 24px;}label.fill-check { @apply bg-[color:var(--blue-simple)] border border-[color:var(--blue)] px-3 py-2.5 rounded-md border-solid; white-space: wrap;}/* END CSS css Component */header { @apply z-[9] w-full sticky top-[-55px] md:top-0;}.header { @apply flex justify-between items-center flex-wrap text-[color:var(--white)] bg-[color:var(--main-color)] transition-[top] duration-[0.25s] p-2;}.header > div:first-child { @apply whitespace-nowrap items-baseline m-0;}.location-header { @apply z-[100] flex justify-evenly cursor-pointer flex-[0_1_100px] ml-1.5 mr-0 my-0;}[dir="rtl"] .location-header { @apply ml-0 mr-1.5 my-0;}.location-header a { @apply block bg-[color:var(--light-3)] border-b-[color:var(--light-1)] rounded text-[initial] m-px p-2 border-b-[solid] hover:bg-[color:var(--light-2-5)] hover:no-underline;}.location-header input:checked + label { @apply bg-[color:var(--light-1-5)];}.location-header a:hover { /* transition: background-color 0.1s; */}.header-hamburger { @apply flex items-center h-0 md:order-3;}.header-hamburger a ~ span { @apply text-[3.5rem] cursor-pointer mx-2 my-0;}.hamburger-menu { @apply font-[bold] overflow-x-hidden overflow-y-auto hidden fixed text-[color:var(--gray-1)] bg-[color:var(--light-3-5)] h-screen z-[100] animate-[ease-in-out_right_0.4s] shadow-[0_0_42px_16px_rgba(0,0,0,0.5)] will-change-scroll p-4 right-0 top-0;}.hamburger-menu button { @apply font-[bold];}[dir="rtl"] .hamburger-menu { @apply animate-[ease-in-out_left_0.4s] left-0 right-[initial];}.hamburger-menu > a:not(.btn):hover,.hamburger-menu > label:hover { @apply bg-[color:var(--light-3)] rounded; /* transition: background-color 0.1s; */}.hamburger-menu > a:not(.btn):active,.hamburger-menu > label:active { @apply bg-[color:var(--light-2-5)];}.hamburger-menu .listen-seller { @apply mt-2 mb-6 mx-0; flex-wrap: initial;}.hamburger-menu .listen-seller a { @apply p-0;}.hamburger-menu a,.hamburger-menu label { @apply flex items-center no-underline p-2;}.hamburger-menu input { @apply hidden;}.hamburger-menu img { @apply w-[1.6rem] h-[1.6rem] ml-0 mr-3 my-0;}[dir="rtl"] .hamburger-menu img { @apply ml-3 mr-0 my-0;}.hamburger-menu .btn { @apply bg-[color:var(--blue)] text-[color:var(--white)] justify-center mt-6 p-2.5;}.hamburger-menu a:last-child { @apply text-[color:var(--blue)] mt-2;}.location-header > div { @apply select-none relative;}.search-top { @apply flex items-center justify-evenly w-full bg-[color:var(--gray-3)] mt-1.5 mb-0 mx-0 p-1 rounded-lg md:flex-[1_0] md:order-2 md:mx-4 md:my-0;}.selectCategory { @apply min-w-[76px] max-w-[27.5vw] w-[42px] text-[color:var(--white)] bg-inherit cursor-pointer px-0 py-2 border-[none]; outline: none;}.search-header { @apply h-[42px] shadow-[inset_0_0_1px_1px_var(--black)] text-[1.2rem] rounded-lg;}.search-result { @apply hidden bg-[color:var(--light-3-5)] absolute indent-[4px] rounded shadow-[0px_50vh_10px_50vh_rgba(0,0,0,0.5)] w-full z-[1] p-1 top-[15px] top-[42px];}.search-result a { @apply block bg-[color:var(--light-3)] border-b-[color:var(--light-1)] rounded text-[initial] relative m-px p-2 border-b-[solid];}.trend-result a { @apply pl-8 before:content-[""] before:absolute before:w-5 before:h-5 before:ml-2 before:left-0 before:top-1/4;}.trend-result a::before { background: url("/icons/arrow-trend-up.svg") no-repeat;}.search-result a:hover,.search-result .active { @apply bg-[color:var(--light-2-5)]; /* transition: background-color 0.1s; */}.search-header-res { @apply flex-[1_100%] relative;}.search-result svg { @apply align-bottom pr-1;}.bi-search { @apply ml-1;}div.header-map { @apply animate-[ease-in-out_open-down_0.4s] h-60 w-[186px] translate-x-[-27.5%] translate-y-[7.5%] overflow-x-hidden cursor-default shadow-[0px_4px_6px_0px_rgba(0,0,0,0.25)] bg-[color:var(--light-3-5)] absolute hidden z-[99] p-2 rounded-lg top-5;}[dir="rtl"] div.header-map { @apply translate-x-[27.5%] translate-y-[7.5%];}span.header-map { @apply absolute hidden border-[transparent_transparent_var(--light-3-5)_transparent] border-[10px] border-solid right-0.5 top-5;}div.header-map label { @apply block bg-[color:var(--light-3)] border-b-[color:var(--light-1)] rounded text-[initial] m-px p-[9px] border-b-[solid];}.header-map input { @apply hidden;}.my-chat { @apply relative;}.my-chat span,.chat-ico-act { @apply text-center absolute w-[22px] bg-[red] text-[color:var(--white)] font-[bold] text-[0.88rem] h-[22px] p-px rounded-[50%] -left-0.5 -top-0.5;}/* START CSS Footer */.footer-to-top { @apply absolute no-underline top-[-16%] text-center bg-[color:var(--gray-3)] w-full p-2;}footer { @apply flex justify-center items-center w-full bg-[color:var(--main-color)] text-[color:var(--white)] relative mt-20 p-4; flex-flow: wrap;}.footer-about { @apply flex justify-between w-full bg-[color:var(--gray-1)] border-[length:var(--gray-3)] z-[1] mx-0 my-4 p-2 rounded-lg border-[solid];}.footer-about a { @apply block p-2;}footer hr { @apply border-[length:var(--gray-3)] border-[solid];}.footer-one { @apply w-full flex justify-between pt-4 pb-0 px-1;}.footer-copy { @apply flex gap-4 whitespace-nowrap w-max w-full text-center m-auto; flex-flow: wrap column;}.footer-download { @apply flex items-center gap-[1.5vw] px-0 py-8;}.footer-download a:last-child img { @apply rounded max-h-[38px] border-[1.5px] border-[solid];}.footer-follow { @apply flex gap-4 items-center; flex-flow: wrap;}.footer-follow a { @apply inline;}/* END CSS css Footer */@media screen and (width >= 992px) { .header { @apply gap-4 px-8; } .search-top { @apply m-0; } .header-hamburger { @apply order-4; } .hamburger-menu { @apply text-[1.1rem] w-[24%] max-w-[460px]; } .sign-in-header { @apply hidden; } .sign-in, .btn.sell { @apply block order-3; } .location-header { @apply ml-2 mr-0 my-0; } [dir="rtl"] .location-header { @apply ml-0 mr-2 my-0; } .sell-on-fly { @apply hidden; }}.sign-in-header { @apply hidden;}@media screen and (width <= 308px) { .ads-filter > a:first-child { @apply mb-1.5; }}@media screen and (width >= 308px) { .sign-in-header { @apply flex items-center no-underline; }}@media screen and (width <= 300px) { ul { @apply px-0.5 py-0; } .home-card { @apply min-w-[240px]; }}@media screen and (width >= 600px) { .sign-in-form { @apply max-w-[460px] h-min max-h-screen -translate-x-2/4 -translate-y-2/4 animate-[ease-in-out_down-left_0.5s] shadow-[0_0_16px_50vw_rgba(0,0,0,0.6)] p-6 rounded-lg left-2/4 top-2/4; }}@media screen and (width <= 992px) { body ::-webkit-scrollbar { @apply w-1 h-1; } header .sign-in, header .sell { @apply hidden; }}/* START CSS home *//* START CSS image-slide */.home { @apply w-full flex content-center flex-wrap flex-col;}.sell-on-fly { @apply fixed -translate-x-2/4 translate-y-[-150%] shadow-[0_0_2px_2px_var(--gray-5)] bg-[color:var(--light-3)] left-2/4 top-full;}.sell-on-fly img { @apply w-6 h-6;}.home .listen-image { @apply h-[324px] max-w-[1400px] w-[96%] flex-[initial] mt-3 mb-0 mx-2;}.home .listen-images-in { @apply w-full p-0;}.home .listen-images-in a { @apply hidden w-full;}.home .listen-images-in a.active { @apply block;}.home .listen-images-in img { @apply w-full h-full;}/* END CSS css image-slide *//* START CSS sell-cards */.home a { @apply no-underline;}.home .card-layer { @apply w-min;}.card-layer { @apply bg-[color:var(--light-2-5)] max-w-[96vw] flex flex-col justify-between mx-2 my-4 rounded-lg; /* */}.cards { @apply max-w-[1400px] flex flex-wrap justify-center; /* */}.cards-row { @apply flex overflow-x-scroll overflow-y-hidden gap-2 p-2;}.cards-category { @apply font-[bold] text-2xl tracking-[0.75px] pt-4 pb-1 px-6;}.cards-category h2 { @apply mt-0 mb-[18px] mx-0;}.listen-card { @apply min-w-[201px] max-w-[280px] block leading-[1.2] border-[color:var(--gray-9)] relative bg-[color:var(--light-3-5)] flex-1 rounded-lg border-2 border-solid md:max-w-[280px] md:min-w-[252px] flex block max-w-[216px];}.listen-card a { @apply no-underline max-w-[44%];}.card-info { @apply flex items-center justify-between flex-col h-[196px] p-2 md:p-3;}.card-info div:last-of-type:not(ul + div) { align-self: self-start;}.card-info .price { @apply self-baseline;}[dir="rtl"] .card-info .price { @apply self-end;}#ad .price,.card-info .price { @apply font-[bold] text-xl;}input.card-fav,input.card-fav-fill { @apply h-[1.6rem] absolute bg-transparent text-transparent w-7 border-[none] right-3 bottom-[161px];}.card-fav { background: url("/icons/heart.svg") no-repeat;}.card-fav-fill { background: url("/icons/heart-fill.svg") no-repeat;}.card-fav:hover,.card-fav-fill:hover { @apply translate-x-0 translate-y-[-7.5%]; /* transition: transform 0.2s; */}.listen-title { @apply text-[1.2rem] normal-case self-baseline mx-0 my-2; word-break: break-word;}.listen-location,.date { @apply text-[color:var(--gray-3)] whitespace-nowrap w-full;}.date { @apply w-fit mt-1 mb-0 mx-0;}.listen-cards a:not(.add-things a) { @apply no-underline;}.listen-card img:not(.card-info img) { @apply object-cover h-[196px] w-full rounded-md border-b-[color:var(--gray-9)] max-w-[initial] border-r-0 border-b border-solid;}.listen-card a img[src*="ad.svg"] { @apply bg-[color:var(--light-3)] object-contain p-3;}@media screen and (width >= 992px) { .cards-row { @apply gap-3 px-3 py-1; }}@media screen and (width >= 1200px) { .card { @apply max-w-[330px]; }}/* END CSS css home *//* START CSS sitemap */.map main { @apply overflow-x-hidden max-w-[1920px] m-auto pt-4 pb-8 px-[10vw];}.map main h1 { @apply font-bold w-full pt-0 pb-3 px-0 border-b border-solid;}.list { @apply w-full;}.list,.list a { @apply inline-block;}.list a { @apply text-[1.1rem] min-w-[27%] mx-7 my-2;}.bold-line,.list:not(.list .list:last-of-type) + a { @apply w-full font-bold;}.list + a:last-of-type,main > .list:not(main > .list:first-of-type) > a:first-child { @apply font-bold w-full mt-7;}main > .list > a:first-child { @apply text-xl font-bold mx-0 my-4;}.list .list { @apply mt-2.5 mb-4 mx-7;}/* END CSS css sitemap *//* START CSS user */#u .listen-share::before { @apply right-2;}#u main .listen-seller { @apply mt-3 mb-0 mx-0;}#u .cards-row { @apply flex-wrap justify-center;}#u .card-layer { @apply bg-[initial];}#u .listen-card { @apply flex-[1_48%];}#u .listen-view { @apply flex-nowrap;}#u main .seller + div { @apply flex justify-between flex-1 pr-2;}/* END CSS css user *//* START CSS contact us */.contact-us input { @apply mx-0 my-2;}.contact-us > input:last-of-type { @apply text-xl font-[bold];}.contact-us { @apply mt-4 mb-[46px] mx-auto px-2 py-0;}.contact-us textarea { @apply mt-0 mb-2 mx-0;}.contact-us a { @apply text-[color:var(--blue)];}/* END CSS css contact us *//* START CSS privacy */.privacy { @apply w-[95%] bg-white shadow-[0_0_10px_rgba(0,0,0,0.1)] text-[1.2rem] mx-auto my-2.5 px-[5%] py-4;}.privacy h1,.privacy h2,.privacy h3 { @apply text-[#0056b3];}.privacy p { @apply mb-5;}.privacy ul { @apply mb-5;}.privacy li { @apply mb-1.5; list-style: inside;}/* END CSS css privacy *//* START CSS help */#help li { @apply relative pl-8 before:content-["✔️"] before:absolute before:left-0; list-style: none;}/* END CSS help *//* START CSS about us *//* .founder img {max-width: 240px;aspect-ratio: 5/6;object-fit: cover;border-radius: 16px;filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.5));margin: 4px;display: block;}.founder {margin: 40px auto;max-width: max-content;text-align: center;border: 1px solid var(--gray-9);border-radius: 12px;background-color: var(--light-3);filter: drop-shadow(2px 4px 4px rgb(0 0 0 / 0.5));} *//* END CSS about us *//* START CSS sell */#sell #nav { @apply flex-wrap flex-col overflow-y-auto overflow-x-hidden max-w-[920px] w-[90%] text-[1.15rem] mx-auto my-4 p-1.5;}#nav div label { @apply p-[9px];}#sell nav > div,#sell .nav-links > div { @apply flex-[initial] h-[125px] cursor-pointer pt-0 pb-1 px-0;}#sell .nav-links > div { @apply flex-[1_100%];}#sell nav > div:last-child { @apply flex-1 flex-wrap m-0;}#sell nav > div > a::before,#sell .nav-links > div > a::before { @apply w-[4.5rem] h-[4.5rem] top-[42.5%];}#sell nav .click-show a,#sell .nav-links div div a { @apply block text-base rounded bg-[color:var(--light-2-5)] m-1 p-2.5;}#sell nav .click-show a:first-child,#sell .nav-links > div > div > a:first-child { @apply w-auto;}#sell nav .click-show a:hover,#sell nav > div:not(:last-child):hover,#sell .nav-links div a:hover,#sell .nav-links > div:hover { @apply bg-[color:var(--light-2)]; /* transition: background-color 0.1s; */}#sell #nav * { @apply text-center text-[1.2rem];}#sell a:hover { @apply no-underline;}#sell nav .click-show a:active,#sell nav > div:not(:last-child):active,#sell .nav-links div a:not(:first-child):active { @apply bg-[color:var(--light-1)];}#sell nav > div:hover .click-show,#sell .nav-links > div:hover div { @apply hidden;}.categ > h3 { @apply text-2xl font-[bold] w-[90%] max-w-[860px] mx-auto my-4;}.sell-top { @apply flex items-center gap-4 bg-[color:var(--light-2-5)] text-[1.4rem] sticky w-full z-[2] shadow-[0_2px_2px_rgb(0_0_0_/_25%)] font-[bold] px-6 py-3 left-0 top-0 flex items-center gap-4 bg-[color:var(--light-2-5)] text-[1.4rem] sticky w-full shadow-[0_2px_2px_rgb(0_0_0_/_25%)] font-[bold] px-6 py-3 left-0 top-0;}.categ { @apply animate-[ease-in-out_left-ha_0.5s];}.categ nav label { @apply w-[26vw] flex items-center justify-center px-0 py-[9px];}.categ a label { @apply w-full;}#sell .click-show a,#sell .nav-links div div a { @apply p-0;}#sell .parent-click > a > label,#sell .nav-links > div > a label { @apply flex z-[1] relative w-[86vw] max-w-[906px] h-[120px] items-end justify-center;}.categ input { @apply hidden;}.sell-form { @apply bg-[color:var(--light-3-5)] text-xl animate-[ease-in-out_right-ha_0.5s] hidden;}#sell .directory { @apply self-start ml-4 mr-0 mt-4 mb-1;}label[for="input-listen-images"] { @apply flex justify-center gap-2 bg-[color:var(--light-3)] flex-col items-center cursor-pointer text-center mx-auto my-4 p-2 rounded-md;}label[for="input-listen-images"] img { @apply w-2/5 max-w-[120px];}#sell input[type="number"] { @apply w-full;}.sell-form > div:last-child { @apply max-w-[860px] mt-0 mb-[46px] mx-auto px-4 py-0;}.sell-form .btn { @apply w-full bg-[color:var(--blue)] text-[color:var(--white)] p-3.5;}.change-phone-number { @apply fixed -translate-x-2/4 -translate-y-2/4 bg-[color:var(--light-3)] shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] text-[1.1rem] hidden items-center justify-evenly text-center gap-3 animate-[ease-in-out_down-left_0.5s] w-full h-full z-[5] overflow-auto p-4 rounded-md left-2/4 top-2/4; flex-flow: column;}.change-phone-number p { @apply bg-[color:var(--yellow)] text-start flex flex-col gap-3 shadow-[0_0_2px] p-4 rounded-md;}.change-phone-number p span { @apply font-[bold];}.change-phone-number span:nth-child(2) { @apply text-[1.4rem];}@media screen and (width >= 600px) { .change-phone-number { @apply w-[360px] h-fit z-20; }}.seller-in { @apply flex flex-wrap gap-3 mx-0 my-3;}.seller-in img { @apply flex-[0_84px];}.seller-in div { @apply flex-1;}.sell h3,.sell h2,.sell h1 { @apply text-[1.4rem];}.sell-form input,.sell-form textarea { @apply mx-0 my-1;}.contact-method label:not(:first-child) { @apply bg-[color:var(--blue-simple)] inline-block text-center border border-[color:var(--blue)] mx-0 my-3 px-[18px] py-2.5 rounded-md border-solid;}.listen-images { @apply flex flex-wrap justify-center items-center bg-[color:var(--light-3)] gap-2 p-2 rounded-md;}.type { @apply z-[1100];}.price { @apply flex items-baseline gap-[10px_16px] flex-wrap;}.listen-images img { @apply w-28 aspect-[1/1] object-cover rounded-lg;}.listen-images input { @apply hidden;}.listen-images input:checked + img { @apply border-[color:var(--blue)] border-2 border-double;}.listen-images :has(input:checked)::after { @apply content-["ad_image"] absolute bg-[color:var(--blue)] text-[color:var(--white)] text-[0.88rem] px-2 py-1 rounded-[8px_8px_0_0] left-[17.5%] bottom-0;}.sell-form .directory a::after { @apply content-[""];}.sell-form .directory a { @apply content-[""] underline underline-offset-[6px] text-[color:var(--blue)] ml-4;}/* END CSS css sell *//* START CSS saved searches */.searches .card-fav,.searches .card-fav-fill { @apply right-2 top-2;}.fav .card-fav::after,.fav .card-fav-fill::after { @apply top-[-12.5px] left-[-25px];}.saved main { @apply m-2;}@media screen and (width >= 992px) { .saved main { @apply m-4; }}.saved main hr { @apply mx-0 my-4;}.saved-top { @apply flex justify-evenly items-center text-center gap-1.5 whitespace-nowrap text-xl mt-4;}.saved-top a { @apply bg-[color:var(--light-3)] flex-1 border-[color:var(--light-2)] underline-offset-4 no-underline p-4 rounded-md border-[0.0001px] border-solid hover:bg-[color:var(--light-2-5)]; /* transition: 0.1s background-color; */}.saved-top a.active { @apply border-b-[color:var(--blue)] mt-[3px] border-b-4 border-solid;}.saved-search { @apply border border-[color:var(--gray-9)] max-w-max relative pl-3 pr-[26px] py-3 rounded-md border-solid;}.saved-search-top { @apply font-[bold] pl-0 pr-9 pt-0 pb-3;}.saved-search-top span:last-of-type { @apply w-6;}.saved-search div:not(:first-of-type) { @apply flex min-w-[164px] justify-between mx-3 my-1.5;}.saved-search div:not(:first-of-type) span:first-child { @apply flex-[0_36%];}.saved-search div:not(:first-of-type) span:last-of-type { @apply font-[bold];}.saved-searches { @apply flex flex-wrap gap-4 justify-center;}.saved-searches a { @apply no-underline hover:text-[color:var(--gray-1)];}/* END CSS css saved searches *//* START CSS settings */#settings .sell-form { @apply block animate-[unset];}/* END CSS css settings *//* START CSS myads */.myads main { @apply m-2;}@media screen and (width >= 992px) { .myads main { @apply m-4; }}.dash-over-view { @apply items-center border border-[color:var(--light-1)] flex justify-center text-center flex-wrap gap-4 bg-[color:var(--light-3)] text-[0.95rem] mx-0 my-4 p-4 rounded-lg border-solid;}.myads .date { @apply flex justify-center w-full;}.myads .card-info { @apply h-[242px] pb-2;}.delete-ad input { @apply hidden;}.delete { @apply flex justify-center;}.myads [src*="pencil.svg"] { @apply mx-3 my-0;}.sort > span { @apply text-[1.2rem] flex justify-center items-center border max-w-[800px] font-[bold] mx-auto my-6 p-2 rounded-lg border-solid;}.sort > span img { @apply w-4 mx-2 my-0;}.dash-over-view div,.dash-over-view a { @apply bg-[color:var(--light-3-5)] flex border border-[color:var(--light-1)] max-w-[155px] flex-[46%_1] justify-center gap-1 items-center p-4 rounded-lg border-solid; flex-flow: column;}.dash-over-view > a[href*="chat"] { @apply bg-[color:var(--blue)] text-[color:var(--white)] no-underline;}.dash-over-view div span,.dash-over-view a span { @apply text-2xl font-[bold];}.dash-over-view > span { @apply flex-[100%] font-[bold] text-[1.2rem];}.dash-over-view img { @apply w-12;}#dash-cards { @apply flex flex-wrap gap-4 justify-center mx-0 my-4;}.myads .listen-card input { @apply absolute bg-transparent text-transparent w-0 border-[none] scale-150 right-11 bottom-[177px]; background: url("/icons/pencil.svg") no-repeat;}[dir="rtl"] .myads .listen-card input { @apply left-[58px] right-[initial];}.myads .card-info > div:first-of-type { @apply w-full flex justify-between;}.myads .my-card-info { @apply flex justify-evenly w-full text-center items-center gap-2 mt-1;}.myads .my-card-info li { @apply flex flex-col font-[bold] items-center;}.myads .listen-card div img,.myads .listen-card div [type="image"] { @apply w-[1.6rem];}/* .myads .blue { *//* padding: 8px;border: 1px solid;border-radius: 6px;margin-top: 16px;text-align: center;font-size: 1.2rem;font-weight: bold; *//* } *//* .myads .blue img { *//* width: 20px; *//* } */.delete-ad { @apply fixed flex-col -translate-x-2/4 -translate-y-2/4 z-[12] shadow-[0_0_32px_75vw_rgba(0,0,0,0.5)] bg-[color:var(--light-3-5)] font-[bold] text-[1.1rem] hidden animate-[ease-in-out_down-left_0.5s] w-[92%] max-w-max text-center p-4 rounded-md left-2/4 top-2/4; white-space: wrap;}.delete-ad :not(p) { @apply w-[calc(50%_-_19px)] text-[color:var(--white)] inline-block text-center font-[bold] mt-2 mb-0 mx-2 p-3 rounded-md;}.delete-ad div { @apply w-[372px] max-w-full;}.delete-ad button { @apply bg-[red];}.delete-ad span:last-of-type { @apply bg-[color:var(--blue)];}/* END CSS css myads *//* START CSS chat */.listen-chat-view { @apply overflow-x-hidden overflow-y-auto h-screen w-full flex flex-col justify-between;}.listen-chat-head { @apply sticky w-full bg-[color:var(--light-3-5)] z-[1] top-0;}.listen-chat-top { @apply font-[bold] pt-2;}.chat-ico { @apply relative;}.chat-ico img { @apply w-6 ml-2;}.chat-ico-act { @apply content-[""] left-[unset] -right-2 -top-2;}.listen-chat-top,.listen-chat-header { @apply px-4;}[dir="rtl"] img[src*="chevron.svg"]:not(.rotate) { @apply rotate-180;}.listen-chat-top,.listen-chat-header,.listen-chat-top div,.listen-chat-top div a { @apply flex justify-between items-center;}.listen-chat-top div div { @apply gap-2;}.listen-chat-top .seller { @apply w-12 h-12 ml-3 mr-2 my-0 p-1.5;}.listen-chat-header img { @apply max-w-[3rem] aspect-[1/1] mx-1.5 my-0 rounded-lg first-of-type:object-cover;}.listen-chat-header div { @apply relative w-full h-10 ml-2 mr-0 my-0;}.listen-chat-header div p { @apply text-ellipsis overflow-hidden whitespace-nowrap absolute w-full m-0 -top-1.5;}.listen-chat-header div b { @apply absolute -bottom-1.5;}#listen-chat { @apply flex w-full gap-2 relative p-3; flex-flow: column;}#listen-chat p { @apply m-0;}#listen-chat > span { @apply text-[color:var(--gray-4)] text-[0.88rem] mx-auto my-2;}#listen-chat img.active { @apply fixed z-20 -translate-x-2/4 -translate-y-2/4 shadow-[0_0_32px_50vw_rgba(0,0,0,0.9)] max-w-full animate-[ease-in-out_down-left_0.5s] max-h-full bg-[color:var(--light-3-5)] left-2/4 top-2/4;}.listen-message-to,.listen-message-from { @apply w-fit max-w-[80%] relative flex gap-1 flex-col items-end m-0 px-2.5 py-2 rounded-md; word-break: break-word;}.listen-message-gallery { @apply max-w-[18rem];}.messageIn a { @apply block max-w-[6rem];}.listen-message-gallery div { @apply flex gap-1.5; flex-flow: column;}.listen-message-gallery div:not(:last-of-type) span { @apply pb-4;}.listen-message-to { @apply text-[white] before:border-[transparent_transparent_var(--blue)] before:left-1; background: linear-gradient(-18deg, rgb(0 62 255), rgb(0 90 255 / 75%));}.listen-message-from { @apply bg-[color:var(--light-2-5)] self-end before:right-1;}.listen-message-from span { @apply text-[color:var(--gray-4)];}.listen-message-to span { @apply text-[rgba(255,255,255,0.8)];}.listen-message-to span,.listen-message-from span { @apply text-[0.94rem] order-6 pl-0 pr-5 py-0;}[dir="rtl"] .listen-message-to span,[dir="rtl"] .listen-message-from span { @apply pl-5 pr-0 py-0;}.listen-message-to img[src*="icons"],.listen-message-to ::after { @apply invert-[1];}.message-seen::after,.message-check::after { @apply content-[""] absolute w-4 h-4 ml-1;}.message-check::after { background: url("/icons/check2.svg") no-repeat;}.message-seen::after { background: url("/icons/check2-all.svg") no-repeat;}.listen-chat-bottom { @apply flex items-end w-full bg-[color:var(--light-3)] border-t-[color:var(--gray-9)] sticky z-[9] pt-1 pb-0 px-2 border-t border-solid bottom-0;}.listen-chat-bottom textarea { @apply min-h-[36px] h-9 max-h-40 px-9 py-[7.5px];}[dir="rtl"] .listen-chat-bottom textarea { @apply px-9 py-0;}.listen-chat-bottom > label:not(:first-of-type),.listen-chat-bottom > button { @apply cursor-pointer p-1 rounded-md; /* transition: background-color 0.1s; */}.listen-chat-bottom > label:not(:first-of-type):hover,.listen-chat-bottom > button:hover { @apply bg-[color:var(--light-2-5)];}.emojis { @apply relative self-center w-full select-none mr-1;}.emojis > span { @apply text-[38px] absolute cursor-pointer bottom-0;}.emojis-in { @apply hidden absolute top-[-45px] bg-[color:var(--light-3-5)] border border-[color:var(--gray-9)] text-[1.4rem] cursor-pointer animate-[ease-in-out_down_0.25s] rounded-md border-solid;}.emojis-in span { @apply p-1.5 rounded-md hover:bg-[color:var(--light-3)];}.emojis-in span:hover { /* transition: background-color 0.1s; */}#submit-listen-chat { @apply absolute w-9 right-2 bottom-[5px] rotate-180 left-2 right-[initial] bottom-[initial];}.send-attachment { @apply z-[2252] fixed -translate-x-2/4 -translate-y-2/4 bg-[color:var(--light-3)] shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] animate-[ease-in-out_down-left_0.5s] z-[1] w-[360px] max-w-[92vw] min-h-[420px] text-xl hidden flex-wrap p-8 rounded-lg left-2/4 top-2/4;}.send-voice { @apply mt-0 mb-0.5 mx-0;}.send-attachment label,.send-attachment button { @apply flex-[1_0_50%] flex justify-center items-center flex-col cursor-pointer px-0.5 py-0 rounded-md; /* transition: background-color 0.1s; */ align-self: initial;}.send-attachment label:hover,.send-attachment button:hover { @apply bg-[color:var(--light-2-5)];}.send-attachment label img,.send-attachment button img { @apply w-[3.6rem] h-[3.6rem] mb-1;}#listen-chat img[src*="icons"] { @apply w-24 p-2;}#listen-chat video,#listen-chat img { @apply cursor-pointer rounded-md; pointer-events: all;}#listen-chat > div > a { @apply w-24 flex flex-col;}#listen-chat > div a span:last-child { @apply text-[0.88rem] mt-1;}.listen-chat-bottom > label:not(.emojis),.listen-chat-bottom > button { @apply mb-[9px];}.chat { @apply fixed w-screen h-screen bg-[color:var(--light-3-5)] z-10 overflow-auto hidden animate-[ease-in-out_right_0.5s] shadow-[0_0_8px] left-0 top-0;}.chat-top { @apply border-b-[color:var(--light-1)] font-[bold] text-[1.2rem] bg-inherit sticky z-[5] p-4 border-b border-solid top-0;}.chat-type,.chat-status { @apply flex w-full justify-between text-center gap-2;}.chat-type span,.chat-status span { @apply flex-[100%] border border-[color:var(--light-1)] cursor-pointer p-2 rounded-md border-solid; /* transition: background-color 0.1s; */}.chat-type span:hover,.chat-status span:hover { @apply bg-[color:var(--light-2-5)];}.chat-type span.active,.chat-status span.active { @apply border-b-[color:var(--blue)] border-b-4 border-solid;}.chat-status { @apply whitespace-nowrap w-full border-b-[color:var(--light-1)] pt-0 pb-3 px-1 border-b border-solid;}.chat-in { @apply flex flex-col gap-3 p-3;}.chat-in p { @apply overflow-hidden whitespace-nowrap text-ellipsis m-0 first-of-type:font-[bold] first-of-type:text-[1.1rem] last-of-type:text-[color:var(--gray-2)];}.chat-in a { @apply flex flex-col gap-1 bg-[color:var(--light-3)] border border-[color:var(--light-1)] relative no-underline p-3 rounded-md border-solid;}.chat-in a.active,.chat-in a.now { @apply bg-[color:var(--blue-simple)] border border-[color:var(--blue)] font-[bold] border-solid;}.chat-in a.active span:nth-child(2) { @apply text-center bg-[color:var(--blue)] absolute text-[color:var(--white)] text-[0.88rem] px-2.5 py-1 rounded-[53px] -right-2 -top-2;}.chat-in a span { @apply text-end w-[unset] text-[0.88rem] text-[color:var(--gray-5)];}.chat-in a img { @apply w-[46px] h-[46px] object-cover ml-0 mr-3 mt-0 mb-0.5 rounded-lg;}#delete-ico { @apply mr-1;}@media screen and (width >= 768px) { .listen-chat-bottom img { @apply min-w-[1.4rem]; }}@media screen and (width >= 992px) { .listen-chat-top div div { @apply hidden; } .listen-chat-view { @apply flex-[66.66%]; } .chat { @apply block sticky flex-[33.33%] border-l-[color:var(--gray-9)] shadow-none z-[2] border-l border-solid bottom-0; } [dir="rtl"] .chat { @apply border-r-[color:var(--gray-9)] border-l-[initial] border-r border-solid; } .chat-top { @apply px-4 py-5; } .chat-top > span { @apply hidden; } #chat main { @apply flex items-center; }}/* END CSS css chat *//* START CSS ads */.ads { @apply mt-0 mb-16 mx-1.5;}.listen-cards { @apply flex justify-center flex-col gap-3;}.sort-by,.filters { @apply fixed bg-[color:var(--light-3-5)] z-[99] hidden p-4 rounded-lg left-0;}.sort-by { @apply -translate-x-2/4 -translate-y-2/4 shadow-[0_0_32px_50vw_rgba(0,0,0,0.5)] w-max animate-[ease-in-out_down-left_0.5s] left-2/4 top-2/4;}.subcategory,.type { @apply whitespace-normal;}.sort-by span { @apply absolute translate-x-0 translate-y-[-72px];}.filters { @apply animate-[ease-in-out_down_0.5s] shadow-[0_-50vh_32px_40vh_rgba(0,0,0,0.5)] whitespace-nowrap shadow-[0_-16px_32px_rgba(0,0,0,0.5)] w-full h-full overflow-x-hidden rounded-none bottom-0;}.filters > div:last-of-type div,.filter-location { white-space: initial;}.filters-top { @apply flex items-center justify-between;}.filter-location { @apply border-[color:var(--gray-9)] shadow-[0_0_2px_var(--black)] text-center text-[1.1rem] mx-0 my-4 pt-4 pb-0 px-0 rounded-md border-2 border-solid;}.filter-location > hr { @apply m-1.5 border-transparent;}.filter-location-in { @apply border-[color:var(--gray-9)] h-[360px] overflow-x-hidden overflow-y-auto hidden animate-[ease-in-out_open-down_0.5s] relative will-change-[content] m-0 p-2 rounded-md border-2 border-solid; text-align: initial;}.filter-location-in div { @apply block cursor-pointer rounded m-1 first-of-type:border-[color:var(--gray-9)] first-of-type:border-[0.1px] first-of-type:border-solid;}.filter-location a { @apply block rounded p-2; /* transition: background-color 0.05s; */}.filter-location a:hover,.filter-location label:hover { @apply bg-[color:var(--light-3)];}.filter-location-in div ul { @apply hidden;}.filter-location-in div:hover ul { @apply block;}.filter-location-in label { @apply cursor-pointer w-full block rounded p-2; /* transition: background-color 0.05s; */}.filter-location-in input[type="checkbox"] { @apply hidden;}.filter-location-in :checked + label { @apply bg-[color:var(--light-2-5)];}.search-location-res { @apply pt-1 pb-0 px-1;}.filter-location-in div:first-child input:checked ~ label { @apply bg-[color:var(--blue)] text-[color:var(--white)];}.filter-location-in input:checked ~ label img { @apply invert-[1];}.filter-price { @apply flex justify-center flex-[1_100%] font-[bold];}.filter-price input { @apply w-[12ch];}.filters > label,.sort-by a { @apply px-0 py-2;}.sort-by a { @apply block;}.sort-by a,.filters li:not(.btn) { @apply rounded p-2; /* transition: background-color 0.1s; */}.sort-by a:hover,.filters li:not(.btn):hover { @apply bg-[color:var(--light-3)] no-underline;}.sort-by a:active,.filters li:not(.btn):active { @apply bg-[color:var(--light-2-5)];}.ads-filter > a:first-child,.ads-filter > div:first-of-type a { @apply text-[color:var(--blue)] border rounded px-2 py-2.5 border-[solid];}.ads-filter a img,.ads-filter .card-fav::after { @apply invert-[22%] sepia-[68%] saturate-[5592%] hue-rotate-[218deg] brightness-[100%] contrast-[111%];}.ads-filter > a:first-child { @apply max-w-[88px] w-full flex justify-between px-3 py-[7px];}.ads-filter .card-fav::after { @apply top-[-3px] left-[-30px];}.filter-result { @apply flex justify-center;}.ads-filter { @apply flex justify-between items-center flex-wrap gap-2 p-2;}.ads-filter a img { @apply w-6 h-6 mr-1.5;}#ads .directory { @apply -mt-1.5 mb-2 mx-0;}.add-things { @apply w-full flex justify-center items-center text-center flex-col bg-[color:var(--blue-simple)] text-[1.2rem] border border-[color:var(--gray-9)] p-4 rounded-lg border-solid;}.add-things a { @apply text-[color:var(--blue)] mt-6 mb-0 mx-0;}.add-things p { @apply m-2;}.add-things :nth-child(1) { @apply font-[bold];}.toggle-pages { @apply flex justify-center select-none text-xl m-6;}.toggle-pages a { @apply border-[color:var(--light-2-5)] px-3 py-2 border-[2px_2px_2px_0] border-solid; /* transition: background-color 0.1s; */}.toggle-pages :hover { @apply bg-[color:var(--light-3)] no-underline;}.toggle-pages :not([disabled]):active,.toggle-pages .active { @apply border-b-[color:var(--gray-3)] border-b-[2.5px] border-solid;}.toggle-pages :first-child { @apply rounded-[6px_0_0_6px] border-[2px_1px_2.5px_2px];}.toggle-pages :last-child { @apply rounded-[0_6px_6px_0];}.trend-searches { @apply flex flex-wrap text-[1.1rem] bg-[color:var(--light-3)] leading-normal gap-2 mx-0 my-6 p-4 rounded-lg;}.trend-searches :first-child { @apply text-[color:var(--blue)];}.trend-searches li { @apply border px-2 py-0 rounded-md border-[solid];}@media screen and (width <= 480px) { .listen-card:not(.vert-card .listen-card) { @apply max-w-[initial]; } .myads .listen-card input { @apply top-[19px]; } input.card-fav:not(.vert-card .card-fav), input.card-fav-fill:not(.vert-card .card-fav-fill) { @apply right-2 top-2; } .listen-card:not(.vert-card .listen-card) a { @apply flex max-w-[initial]; } .listen-card:not(.vert-card .listen-card) img:not(.card-info img) { @apply border-r-[color:var(--gray-9)] min-w-[38%] w-[38%] border-b-0 border-r border-solid; } .listen-card:not(.vert-card .listen-card) a img[src*="ad.svg"] { @apply max-h-[initial]; }}@media screen and (width >= 480px) { #delete-ico { @apply mr-4; } #delete-ico span { display: initial; } .ads { @apply mt-0 mb-16 mx-4; } .listen-cards { @apply flex flex-wrap flex-row gap-4; }}@media screen and (width >= 992px) { .ads { @apply flex mt-4; } .ads-filter { @apply flex-[0] border border-[color:var(--gray-9)] h-fit max-w-[25%] rounded-lg border-solid; } .ads-filter > hr { @apply hidden; } .ads-filter > div:first-of-type a:last-child { @apply hidden; } .ads-filter > div { @apply mt-1.5 -mb-1.5 mx-2; } .ads-filter > a:first-child { @apply mt-1.5 mb-0 mx-1.5; } .filters-top > span { @apply hidden; } .ads-result-right { @apply flex-1 pl-4; } [dir="rtl"] .ads-result-right { @apply pl-[initial] pr-4; } .filters { @apply max-w-max block shadow-none z-[1]; position: initial; } .filters > label { @apply pr-[60%]; } #ads .directory { @apply mt-0 mb-2 mx-0; }}/* END CSS css ads *//* START CSS ad */.listen-image { @apply flex justify-center relative flex-1 bg-[color:var(--light-2)] m-1 rounded-lg md:self-stretch md:max-h-[680px] md:m-1; flex-flow: wrap;}[dir="rtl"] .listen-image { direction: initial;}.listen-images-in img { @apply hidden rounded-lg;}.listen-images-in { @apply cursor-zoom-in h-full flex justify-center px-0 py-2;}.listen-images-in .active { @apply block animate-[ease-in-out_fade_0.25s] object-cover;}@keyframes fade { from { @apply opacity-80; } to { @apply opacity-100; }}.open-slide img { @apply object-contain;}.open-slide #listen-small-image { @apply bottom-8;}.close-up-right { @apply fixed invert-[1] hidden right-4 top-4;}.listen-image-number { @apply absolute bg-[rgba(255,255,255,0.5)] invert-[1] rounded px-2 py-1 left-2 top-2;}#listen-small-image { @apply absolute -translate-x-2/4 flex flex-wrap justify-center bg-[rgba(0,0,0,0.5)] gap-1 rounded text-[color:var(--white)] w-max max-w-full p-1 left-2/4 bottom-2;}#listen-small-image img { @apply w-[46px] min-w-[46px] object-cover rounded cursor-pointer h-[46px];}#listen-small-image .active { @apply brightness-125 border-[color:var(--gray-8)] border-2 border-solid;}#prevButton,#nextButton { @apply text-[color:var(--white)] text-[1.75rem] bg-[rgba(0,0,0,0.5)] cursor-pointer absolute translate-x-0 -translate-y-2/4 select-none pt-3 pb-4 px-3 top-2/4;}#prevButton { @apply rounded-[0_8px_8px_0] left-0;}#nextButton { @apply rounded-[8px_0_0_8px] right-0;}.listen-price > div { @apply relative;}.listen-share { @apply hidden justify-center items-center bg-[color:var(--light-2-5)] gap-2 shadow-[4px_4px_4px_rgba(0,0,0,0.5)] absolute w-max animate-[ease-in-out_down_0.4s] p-2 rounded-lg right-0 top-[34px] before:right-[60px];}.listen-share img { @apply w-8 h-8; filter: drop-shadow(0 0 2px var(--black));}.listen-content { @apply mx-2 my-4 md:max-w-[33.33%] md:flex md:flex-col md:self-start;}.listen-content input { @apply right-0 -top-0.5;}.listen-content > div:first-child { @apply mx-1 my-0;}.listen-content > p { @apply text-[1.2rem];}.listen-price { @apply flex justify-between;}.listen-price > span { @apply text-xl font-[bold];}.listen-price .share { @apply mr-[46px];}.listen-price div span { @apply top-2;}.listen-content .location-in { @apply text-[color:var(--gray-3)] text-[0.95rem] flex justify-between items-center;}.listen-details { @apply bg-[color:var(--light-3)] whitespace-nowrap flex justify-center gap-2 border mt-4 p-3 rounded-lg border-[solid]; flex-flow: wrap;}.listen-details > b { @apply w-full;}.listen-details > div { @apply flex justify-between basis-full mx-4 my-0 md:basis-[44%];}.listen-details div span { @apply font-[bold];}.listen-description { @apply border mt-4 pt-4 p-3 rounded-lg border-[solid];}.listen-description > p { @apply text-[1.1rem]; word-break: break-word;}.listen-seller { @apply flex items-center gap-2 flex-wrap mx-0 my-6;}.listen-seller a { @apply text-[color:var(--blue)] font-[bold];}.listen-seller > div > span { @apply block -mb-3.5;}.listen-seller .btn { @apply bg-[color:var(--blue)] w-full text-[color:var(--white)] mt-3;}.listen-seller .outline-btn { @apply w-full border-[color:var(--blue)];}.listen-report { @apply flex justify-between mx-0 my-4;}.listen-info { @apply w-full pt-0 pb-1 px-2;}.listen-contact { @apply flex justify-between bg-[color:var(--light-3)] fixed gap-[2%] w-full p-2 border-t-2 border-t-[rgba(0,0,0,0.5)] border-solid left-0 bottom-0 md:hidden;}.listen-contact a { @apply text-[white] bg-[color:var(--blue)] no-underline flex items-center gap-1 font-[bold] text-[1.12rem] justify-center flex-1 px-0 py-4 rounded-lg;}#ad .date { @apply flex-[0];}#ad img[src="/uploads/ad.svg"] { @apply h-[72%] mt-[68px];}#ad .show-more { @apply max-h-[146px];}.listen-contact a img { @apply invert-[1];}.listen-form-report { @apply bg-[color:var(--light-3)] fixed -translate-x-2/4 -translate-y-2/4 shadow-[0_0_32px_100vh_rgba(0,0,0,0.5)] z-10 hidden animate-[ease-in-out_down-left_0.5s] gap-3 w-full h-full p-4 left-2/4 top-2/4 md:w-[360px] md:h-max md:rounded-lg; flex-flow: column nowrap;}.listen-form-report .btn { @apply bg-[color:var(--blue)] text-[color:var(--white)];}.listen-form-report h3 { @apply text-xl font-[bold] m-auto;}.listen-form-report span { @apply absolute right-1 top-1;}.favorite-num { @apply flex gap-2 border border-[color:var(--blue)] text-center items-center font-[bold] justify-evenly w-full text-[1.2rem] mt-3 mb-auto mx-auto p-2 rounded-md border-solid;}.favorite-num img { @apply w-7 mx-2 my-0;}.favorite-num span { @apply flex items-center mx-[18px] my-0;}.vr { @apply relative;}.vr:not(hr.vr)::after { @apply content-[""] w-px h-5 absolute translate-x-0 -translate-y-2/4 pr-[88px] border-r border-solid left-2/4 top-2/4;}.listen-view { @apply flex flex-col justify-center items-center md:flex-wrap md:mx-2 md:my-0;}@media screen and (width >= 768px) { .listen-view { flex-direction: initial; } #u .listen-content { @apply max-w-[420px]; }}.open-slide { @apply fixed h-full z-30 min-w-full shadow-[0_-16px_16px_5vw_rgba(0,0,0)] animate-[ease-in-out_down_0.8s] cursor-auto overflow-auto justify-center content-center max-h-[initial] rounded-none -left-1 -top-1; object-fit: initial; background: linear-gradient(to bottom, rgb(0 0 0 / 50%), var(--black)), linear-gradient(to top, rgb(0 0 0 / 50%), var(--black));}/* END CSS css ad */.hidden { @apply invisible;}.none { @apply hidden;}.block { @apply block;}.flex { @apply flex;}.v-none { @apply hidden;}.visible { @apply visible;}


HTML:
<html lang="en-US"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Buy &amp; Sell Your Stuff | Exxeer - Home</title><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMZDGTLT" height="0" width="0" style="display: none; visibility: hidden"></iframe><div class="no-result flex"><img data-src="/icons/ban.svg" alt="" />
Oh no, your browser doesn't support JavaScript!
</div></noscript><div><div id="loader" class="none"><div class="loader-span"></div></div><header class="header"><div class="flex"><a href="/"><img alt="Home" width="46" src="/images/android-chrome-192x192.png"></a><div title="Pick a Spot" onclick="toggle('.header-map','block');" class="location-header"><div><img alt="" width="24" class="invert" src="/icons/location-ico.svg"><span>Egypt</span><img alt="" src="/icons/drop-down.svg"><span class="header-map"></span><div class="header-map"><a id="cairo" href="/ads/?location=cairo">Cairo<fw>❭</fw></a></div></div></div></div><div onmouseleave="remove('.hamburger-menu', 'block');add('.hamburger-menu', 'none')" class="header-hamburger"><a onclick="toggle('.log', 'flex')" href="#" class="sign-in-header none"><span>Sign In ›</span><img alt="" data-src="/icons/pngkey.com-user-png-729670.svg" class="invert" width="36"></a><span onclick="toggle('.hamburger-menu', 'block')">≡</span><form method="POST" class="hamburger-menu"><div class="listen-seller"><img alt="" data-src="/icons/pngkey.com-user-png-729670.svg" class="seller"><div><b>Welcome<span id="welName"></span>.</b><a href="/mysettings/">My Settings<ri>❭</ri></a></div></div><hr><a href="/sell"><img alt="" data-src="/icons/camera.svg">
Sell Now
</a><a href="/myfavorites"><img alt="" data-src="/icons/heart.svg">
My Favorites
</a><a href="/mysearches"><img alt="" data-src="/icons/search.svg">
My Searches
</a><a href="/myads"><img alt="" data-src="/icons/rectangle-list.svg">
My Ads
</a><a href="/chat" class="my-chat"><img alt="" data-src="/icons/chat-square-dots.svg">
My Chats
</a><a href="/help"><img alt="" data-src="/icons/info-circle.svg">
Help
</a><hr><a id="lang" href="?lang=%7B%7B-lang%27-%3D%3D%3D-%27ar%27-%3F-%27en%27-%3A-%27ar%27-%3F%3E"><img data-src="/icons/globe.svg" alt="Language"><b>{{ lang') === 'AR' ? 'EN' : 'AR' ?&gt;</b></a><hr><!--?= $logIn ?--></form></div><div class="search-top"><select title="Pick a Category" class="selectCategory"><option value="all">All</option><option value="vehicles">Vehicles</option><option value="properties">Properties</option><option value="mobiles-tablets">Phones &amp; Tablets</option><option value="electronics-appliances">
Electronics &amp; Appliances
</option><option value="furniture-decor">Furniture &amp; Home Decor</option><option value="business-industrial-agriculture">
Business, Industrial &amp; Farming
</option><option value="books-sports-hobbies">Books, Sports &amp; Hobbies</option><option value="pets-accessories">Pets &amp; Accessories</option><option value="kids-babies">Kids &amp; Babies</option><option value="fashion-beauty">Phones &amp; Tablets</option><option value="services">Services</option><option value="jobs">Jobs</option></select><div class="search-header-res"><input type="search" name="search" placeholder="Looking for something?" autocomplete="off" class="search-header"><div class="search-result trend-result"></div></div><button type="submit" id="search" title="Search"><img width="32" class="invert" alt="Search" style="max-width: 28px" src="/icons/search.svg"></button></div><!--?= $error ?--><!--?= $signIn ?--><!--?= $sell ?--></header><nav id="nav" style="top: 65px;"><div onclick="toggle('.nav-links', 'flex');"><a>☰ More</a></div><div class="parent-click"><a href="/ads/?category=vehicles">Vehicles</a><div class="click-show"><a href="/ads/?category=vehicles">All In Vehicles<ri>»</ri></a><a href="/ads/?category=vehicles&amp;subcategory=cars-for-sale">Cars for Sale</a><a href="/ads/?category=vehicles&amp;subcategory=cars-for-rent">Cars for Rent</a><a href="/ads/?category=vehicles&amp;subcategory=cars-spare-parts">Car Parts</a><a href="/ads/?category=vehicles&amp;subcategory=tires-batteries-oils-accessories">Tires, Batteries, Oils &amp; Accessories</a><a href="/ads/?category=vehicles&amp;subcategory=motorcycles-accessories">Motorcycles &amp; Accessories</a><a href="/ads/?category=vehicles&amp;subcategory=boats-watercraft">Boats &amp; Watercraft</a><a href="/ads/?category=vehicles&amp;subcategory=heavy-trucks-buses-other-vehicles">Heavy Trucks, Buses &amp; Other Vehicles</a></div></div><div class="parent-click"><a href="/ads/?category=properties">Properties</a><div class="click-show"><a href="/ads/?category=properties">All In Properties<ri>»</ri></a><a href="/ads/?category=properties&amp;subcategory=apartments-for-sale">Apartments for Sale</a></div></div><div class="parent-click"><a href="/ads/?category=mobiles-tablets">Phones &amp; Tablets</a><div class="click-show"><a href="/ads/?category=mobiles-tablets">All In Phones &amp; Tablets<ri>»</ri></a></div></div><div class="parent-click"><a href="/ads/?category=electronics-appliances">Electronics &amp; Appliances</a><div class="click-show"><a href="/ads/?category=electronics-appliances">All In Electronics &amp; Appliances<ri>»</ri></a></div></div><div class="parent-click"><a href="/ads/?category=furniture-decor">Furniture &amp; Home Decor</a><div class="click-show"><a href="/ads/?category=furniture-decor">All In Furniture &amp; Home Decor<ri>»</ri></a></div></div><div class="parent-click"><a href="/ads/?category=business-industrial-agriculture">Business, Industrial &amp; Farming</a><div class="click-show"><a href="/ads/?category=business-industrial-agriculture">All In Business, Industrial &amp; Farming
<ri>»</ri></a><a href="/ads/?category=business-industrial-agriculture&amp;subcategory=industrial-equipment">Industrial Equipment</a></div></div><div class="jobs parent-click"><a href="/ads/?category=jobs">Jobs</a><div class="click-show border-bottom"><a href="/ads/?category=jobs">All In Jobs<ri>»</ri></a></div></div><div class="nav-links border-y top block-a"><div><a href="/ads/?category=fashion-beauty">Fashion &amp; Beauty</a><div><a href="/ads/?category=fashion-beauty">All In Fashion &amp; Beauty<ri>»</ri></a></div></div><div><a href="/ads/?category=pets-accessories">Pets &amp; Accessories</a><div><a href="/ads/?category=pets-accessories">All In Pets &amp; Accessories<ri>»</ri></a></div></div><div><a href="/ads/?category=kids-babies">Kids &amp; Babies</a><div><a href="/ads/?category=kids-babies">All In Kids &amp; Babies<ri>»</ri></a></div></div><div><a href="/ads/?category=services">Services</a><div><a href="/ads/?category=services">All In Services<ri>»</ri></a></div></div><div><a href="/ads/?category=books-sports-hobbies">Books, Sports &amp; Hobbies</a><div><a href="/ads/?category=books-sports-hobbies">All In Books, Sports &amp; Hobbies<ri>»</ri></a></div></div></div></nav></div><main class="home vert-card"><section class="listen-image"><article class="listen-images-in"><a href="/ads/" class=""><img alt="Exxeer: Buy &amp; Sell Anything" class="" src="/images/home.jpeg" data-first-enter-image="true"></a><a href="/ads/?category=vehicles" class=""><img alt="Cars &amp; Trucks" class="" src="/images/vehicles.jpeg"></a></article><div class="listen-image-number"><img alt="Photos" src="/icons/camera.svg"><span id="listen-image-numbers">7 / 13</span></div><span id="prevButton">❮</span><span id="nextButton">❯</span></section><section class="cards"><article class="card-layer"><article class="cards-category"><a href="/ads/?category=properties">Properties<ri>❭</ri></a></article><article class="cards-row"><article class="listen-card"><a><img alt="" data-src="image1.jpg,image2.jpg"><div class="card-info"><span class="price">250000.00</span><h4 class="listen-title">Modern Apartment for Sale</h4><div><div class="listen-location">Manhattan, New York, NY.</div><div class="date">2024-10-20T04:55:59.766672Z</div></div></div></a><input class="card-fav" type="submit" name="id" value="1"></article></article></article></section></main><a class="sell-on-fly btn" href="/sell"><img alt="" data-src="/icons/camera.svg">
Sell Now
</a><script src="/js/index.js"></script><footer><a onclick="backTop()" class="footer-to-top"><img alt="" data-src="/icons/drop-down.svg" class="rotate"><br>Back to Top
</a><div class="footer-one"><a href="/"><img data-src="/images/android-chrome-192x192.png" alt="Home" width="50"></a><div class="footer-follow">
Follow Us:
<a href="https://www.facebook.com/ExxeerCom"><img data-src="/icons/facebook-logo.svg" width="36" alt="Facebook"></a><a href="https://x.com/Exxeer_com"><img data-src="/icons/twitter.svg" width="48" alt="Twitter"></a></div></div><nav class="footer-about"><bl><a href="/aboutus/">About Us</a><a href="/contactus/">Contact Us</a></bl><bl style="text-align: end"><a href="/sitemap/">Site Map</a><a href="/help/">Help</a></bl></nav><article class="footer-download"><a href=""><img data-src="/icons/icon_app_store_en.svg" width="128" alt="App Store"></a><a href=""><img data-src="/icons/icon_google_play_en.svg" width="128" alt="Google Play"></a><a href=""><img data-src="/icons/icon_app_gallery.svg" width="128" alt="App Gallery"></a></article><article class="footer-copy"><div><a href="/useconditions/">Terms of Use</a> |
<a href="/privacy/">Privacy Policy</a></div><div>© 2024 Exxeer.com. All rights reserved.</div></article></footer><form method="POST" class="sign-in-form log  <?=$logErr?>"><div><p>Sign in or <a onclick="toggle(&quot;.create-acc&quot;, &quot;flex&quot;)">create an account</a></p></div><label>
Your Email or Phone Number:<input minlength="9" required="" class="phoneOrEmail" type="text" autocomplete="email" name="log" placeholder="Enter your phone number or email"><span class="inv"></span></label><label>Your Password:<input name="log-password" required="" minlength="6" type="password"></label><label><input type="checkbox" name="remember">Remember Me</label><!--?=$valAcc?--><input type="submit" value="Sign In"><a onclick="toggle('.create-acc', 'flex')" class="blue">Create an Account</a></form><form method="POST" class="sign-in-form create-acc  <?=$createErr?>"><h3>Create an Account</h3><label>Your Name:<input type="text" minlength="2" maxlength="24" name="name" required="" placeholder="First and Last Name"></label><label>Phone Number:<input minlength="9" maxlength="16" type="tel" name="phone" required="" placeholder="Enter your phone number"><span class="inv"></span></label><label>Email (optional):<input type="email" name="email" placeholder="Enter your email"><span class="inv"></span></label><hr><label>Password:<input id="new-password" type="password" minlength="6" required="" placeholder="At least 6 characters"><span class="inv"></span></label><label>Re-enter Password:<input id="retype-password" minlength="6" name="password" type="password" required=""><span class="inv"></span></label><input type="submit" value="Create"><!--?=$duplicate?--></form><script defer="" src="/js/script.js"></script></body></html>