/* ASIDE */


.classifiedsTPListing aside label input[type="radio"] {display: none;}

.classifiedsTPListing aside label.selected {font-weight:bold; color:var(--linkHover); padding-left:8px}
.classifiedsTPListing aside label.selected::after{content:">"; margin-left:6px}

.classifiedsTPListing aside #subsubcategory {border-top: 1px solid var(--lightGrey); margin: 18px 0 var(--gapSmall) 0; padding: 12px 0 12px 12px;}
.classifiedsTPListing aside #subsubcategory label {font-size: var(--fontSizeSmall);}


/* FILTER */

.classFilter h6,.classFilter select,.classFilter .area {display: inline-block; margin: 0;}
.classFilter select {margin-left: 8px; max-width: 180px;}
.classFilter .continent-header {background: var(--lightestGrey); font-weight: bold; color: black}
.classFilter .classFilterArea {display: flex; align-items: center; justify-content: flex-end;}
.classFilter .select__flag {width: 26px; height: 18px; display: inline-block; background-repeat: no-repeat; background-size: 100% 100%;; border: 1px solid rgba(0,0,0,0.3); margin: auto 0 auto 8px; vertical-align: middle;}


.classifiedsListingWrap {display: flex; flex-wrap: wrap; container-name: classifiedsListingWrap; container-type: inline-size;}
.classifiedsListingWrap .bannerWrap {margin-top: 0}
.classifiedsListingWrap .classifiedsRow {display: flex; margin: 0 0 var(--gapLarge) 0; width: 100%; align-items: stretch; align-content: space-between; overflow: hidden;}
.classifiedsListingWrap .classifiedsRow .classifiedsLeft {flex: 0 0 250px; display: flex;}
.classifiedsListingWrap .classifiedsRow .classifiedsLeft a {width: 100%; height: 100%}
.classifiedsListingWrap .classifiedsRow .classifiedsMainImg {width: 250px; height: 100%; max-height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden;}
.classifiedsListingWrap .classifiedsRow .classifiedsMainImg.noImage {background-size: 160px;}
.classifiedsListingWrap .classifiedsRow .classifiedsMainImg.noImage img {width: 230px; height: auto;}

.classifiedsListingWrap .classifiedsRow .classifiedsMiddle {flex: 1; display: flex; padding: var(--gapSmall); background: var(--lightBrown);}
.classifiedsListingWrap .classifiedsRow .classifiedsMiddle .classifiedsTextGradient {background: linear-gradient(180deg, rgba(255,255,255,0) 40%, var(--lightBrown) 100%); position: absolute; top:0; right:0; left:0; bottom:0; display: flex; justify-content: center; align-items: flex-end; font-size: var(--fontSizeLarge); text-shadow: 0 0 6px white; font-weight: bold;}

.classifiedsListingWrap .classifiedsRow .classifieds {flex: 1; display: flex; flex-direction: column}
.classifiedsListingWrap .classifiedsRow .classifieds h3 {margin-bottom: 10px; line-height: 1;}
.classifiedsListingWrap .classifiedsRow .classifieds h3 a {font-size: calc(var(--fontSizeLarge)); font-weight: bold;}
.classifiedsListingWrap .classifiedsRow .classifieds h4 {font-size: var(--fontSize); font-weight: bold; margin-bottom: 10px;}

.classifiedsListingWrap .classifiedsRow .classifiedsText {margin-bottom: 16px; flex-grow: 1; line-height: 1.45; position: relative; overflow: hidden; height: auto; word-wrap: break-word; white-space: normal;}
.classifiedsListingWrap .classifiedsRow .classifiedsText ul {margin: 0}
.classifiedsListingWrap .classifiedsRow .classifiedsText ul li,.classifiedsListingWrap .classifiedsRow .classifiedsText ul li * {font-size: var(--fontSizeSmall)}
.classifiedsListingWrap .classifiedsRow .classifiedsText ul li {margin-block: 2px; text-align: left;}

.classifiedsListingWrap .classifiedsRow .classifiedsPrice {background: var(--lightestGrey); flex:0; padding: 8px 16px; margin: 16px 0; width: max-content;}
.classifiedsListingWrap .classifiedsRow .classifiedsPrice:has(b:empty) {display: none;}

.classifiedsListingWrap .classifiedsRow .classifiedsAdditionInfo {display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: var(--fontSizeSmall)}
.classifiedsListingWrap .classifiedsRow .classifiedsActions {align-self: end; display: flex; gap: 12px}

.classifiedsListingWrap .classifiedsRow .actionButton {background: var(--link)}
.classifiedsListingWrap .classifiedsRow .actionButton:hover {background: var(--linkHover)}
.classifiedsListingWrap .classifiedsRow .actionButton svg {height: 20px; width: 20px; vertical-align: middle; margin-right: 8px;}
.classifiedsListingWrap .classifiedsRow .actionButton.button2 {background: orange; padding: 12px;}
.classifiedsListingWrap .classifiedsRow .actionButton.button2:hover {background: #ff8000}
.classifiedsListingWrap .classifiedsRow .actionButton.button2.favourite {background: red; padding: 12px;}
.classifiedsListingWrap .classifiedsRow .actionButton.button2 svg {height: 18px; width: 18px; margin: auto}

.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser {display: flex; flex-direction: column; width: 340px; background: var(--softBrown); padding: var(--gapSmall);}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .advertiserLogo:empty {display: none;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser h4 {color: var(--darkGrey); font-size: var(--fontSizeLarge)}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser h5 {}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p {margin-bottom: 4px;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p a {padding: 4px 6px 4px 0}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p a span {color: var(--link); display: inline-block;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p a:hover span {text-decoration: underline; color: var(--linkHover)}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p svg {width: 16px; height: 16px; fill: var(--darkGrey); margin: 0 14px 0 0; vertical-align: middle;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p:has(span:empty) {display: none;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p a.location svg {fill: var(--link);}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser h5 a,.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser h5 {font-size: calc(var(--fontSizeLarge) - 1px)}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser h5,.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .advertiserAddress {margin-bottom: 8px;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .flag {margin-left: 4px}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .advertiserLanguages {display: inline-block; margin: auto 0 auto 6px; vertical-align: middle;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .advertiserLanguages img {width: 18px; height: 14px; display: inline-block; border: 1px solid rgba(0,0,0,0.2)}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .advertiserIM {text-align: center; margin-top: 4px}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .advertiserIM:empty,.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .im span {display: none;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser .advertiserIM a {font-size: var(--fontSizeSmall); display: inline-block}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser p.warnClass {font-size: var(--fontSizeSmall); color: red; font-weight: bold;}


.classifiedsListing .classifiedsText {max-height: 250px}


/* No Ad for Country */
.noAdsForCountry {text-align: center; margin: var(--gapSmall) auto;

}
.noAdsForCountry h3 {font-weight: normal;}
.noAdsForCountry h3 b {font-size: calc(var(--fontSizeXLarge) + 0.2rem);}
.noAdsForCountry h3 img {display: inline-block; border: 1px solid var(--lightGrey); margin: 0 0 0 8px; width: 32px; height: 22px;}

.noAdsForCountry a {margin: var(--gapSmall) auto;}

.noAdsForCountry .languageWarning {background: red; width: fit-content; padding: 8px 12px; margin: 12px auto; color: white;}
.noAdsForCountry .languageWarning * {color: white}
.noAdsForCountry .languageWarning svg {height: 16px; width: 16px; fill: white; margin: 0 8px 0 0; display: inline-block;}


@container classifiedsListingWrap (max-width: 900px) {
.classifiedsRow {flex-wrap: wrap;}
.classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser {width: 100%; flex-grow: 1; flex-direction: row;}
}


@container content (min-width: 2200px) {
.classifiedsListingWrap {gap: var(--gapLarge)}
.classifiedsListingWrap .classifiedsRow {width: calc(50% - var(--gapLarge)); flex-grow: 1;}
}


#floatingButton {transform: scale(1.1); transform-origin: center;}
#floatingButton * {color: white;}
#floatingButton p {font-size: calc(var(--fontSizeSmall) - 0.3rem);}


#internationalClassifieds.firstVisit {display: block;}


/* FREE OFFER  */

.classifiedsFreeOffer .asideRight .warn * {color: red;}

.classifiedsFreeOffer .asideRight li {margin: 16px 0}
.classifiedsFreeOffer .asideRight li a {padding: 0}

.classifiedsFreeOffer label.gdprLabel {display: block; width: 100%; max-width: var(--formWidth); font-size: var(--fontSizeSmall); text-align: center; margin: var(--gap) auto;}


/* FREE OFFER PREVIEW */

.freeAdPreview {max-width: var(--formWidth); margin: 0 auto;}
.freeAdPreview > div {display: flex; flex-direction: column; gap: 12px;}
.freeAdPreview > div > div {line-height: 1.4}
.freeAdPreview > div b {display: block; color: var(--darkGrey); margin-bottom: 2px;}
.freeAdPreview > div .spotlight-group:empty {display: none}
.freeAdPreview > div .spotlight-group {display: flex; flex-wrap: wrap; margin: 12px auto; gap: 12px; justify-content: center;}
.freeAdPreview > div .spotlight-group img {width: auto; max-width: 120px; max-height: 120px; border: 1px solid transparent;}
.freeAdPreview > div .spotlight-group a:hover img {border: 1px solid var(--linkHover);}


/* PRICE PART */

.offerPrice div {border: 1px solid transparent; position: relative; display: flex; gap: 6px; align-items: center;}
.offerPrice div b {border-radius: 100%; background: red; padding: 3px; color: white; font-weight: bold; position: absolute; font-size: 13px; z-index: 100; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; top: -24px; left: -2px; transition: .5s; opacity: 0;}
.offerPrice div:hover b {opacity: 1}

.offerPrice div :is(input,select) {display: inline-block !important}
.offerPrice div .priceOfferPrice {width: auto; flex-grow: 1; min-width: 120px;}
.offerPrice div .priceOfferCurrency {width: 90px}
.offerPrice div .priceOfferUnit {width: 140px}


#message_exists {font-weight: bold; color: red; font-size: 13px; text-align: left;}


/* ATTACHMENTS - already uploaded */


.offerTextNew .attachments {display: flex; justify-content: center; gap: 4px; margin: var(--gap) auto var(--gap) auto; flex-wrap: wrap;

}
.offerTextNew .attachments div {display: flex; flex-direction: column; width: auto; padding: 12px 14px; border-radius: 7px; border: 1px solid transparent; transition: 0.7s; justify-content: flex-end;}
.offerTextNew .attachments div a {display: block; margin: 6px auto; font-weight: bold; font-size: var(--fontSizeSmall); float: none;}
.offerTextNew .attachments div a img {display: block; max-width: 118px; max-height: 100px; border: 1px solid transparent; transition: 0.4s;}
.offerTextNew .attachments div a:hover img {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow)}

.offerTextNew .attachments div:first-child {border: 2px dashed orange; background-color: #fff8f0;}


@media screen and (max-width: 1380px) {


:is(.classifiedsListing,.classifiedsTPListing) .content {padding-top: 0}

:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap {flex-direction: row; gap: var(--gap);}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow {flex: 1 0 350px; flex-direction: column; justify-content: center; align-items: flex-start; align-content: space-between; gap: var(--gapSmall); border: 1.5px solid #ddd; border-radius: var(--borderRadius); padding: 0;}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow * {text-wrap: pretty}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsLeft,:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsMiddle,:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser,:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifieds {width: 100%; text-align: center; margin-inline: auto; flex: 1;}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsMiddle {background: none;}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsMiddle .classifiedsTextGradient {background: linear-gradient(180deg, rgba(255,255,255,0) 40%, white 100%);}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsPrice {margin-inline: auto}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsMainImg {width: 100%; min-height: 300px}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsMainImg.noImage {display: none}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifieds {margin: 0}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsText {max-height: 350px}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsAdditionInfo {flex-direction: column; justify-content: center; gap: var(--gapSmall); align-self: center;}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .classifiedsAdvertiser {flex-direction: column; width: 100%;}
:is(.classifiedsListing,.classifiedsTPListing) .classifiedsListingWrap .classifiedsRow .advertiserIM a svg {height: 46px; width: 46px}


:is(.classifiedsListing,.classifiedsTPListing) .classFilter {margin: 0 auto var(--gap) auto; flex-direction: row; justify-content: center; overflow-x: auto; padding-inline: 0;}
:is(.classifiedsListing,.classifiedsTPListing) .classFilter h6 {display: none;}
:is(.classifiedsListing,.classifiedsTPListing) .classFilter .classFilterType,:is(.classifiedsListing,.classifiedsTPListing) .classFilter .classFilterType select {margin: 0;}

:is(.classifiedsListing,.classifiedsTPListing) #gdpr_alert {top: -22px; left: 60px; width: 100%; max-width: 250px;}
:is(.classifiedsListing,.classifiedsTPListing) #gdpr_alert svg {display: block; left: -30px; top: 17px; transform: scaleX(-1);}


}


@media screen and (max-width: 768px) {

:is(.classifiedsListing,.classifiedsTPListing) .classFilter {justify-content: flex-start;}
:is(.classifiedsListing,.classifiedsTPListing) .classFilter .area {display: none;}

.classifiedsListingWrap .classifiedsText ul {list-style:none}

}


/* CLASSIFIEDS OPEN */

.classifiedOpen {display: flex; gap: var(--gap); overflow: hidden;

}
.classifiedOpen .classifiedImages {display: flex; flex-direction: column; justify-content: flex-start; max-width: 300px; gap: 16px; position: relative;}
.classifiedOpen .classifiedImages img {border: 1px solid transparent; transition: .4s;}
.classifiedOpen .classifiedImages a:hover img {border: 1px solid var(--link); box-shadow: var(--materialShadow)}
.classifiedOpen .classifiedImages .arrowScrollLink {display: block; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: none;}
.classifiedOpen .classifiedImages .arrowScrollLink svg {fill: #fff; background: var(--link); width: 38px; height: 38px; border-radius: 50px; padding: 6px}
.noImage:is(.classifiedOpen .classifiedImages) {display: none}

.classifiedOpen .classifiedMainImage a {display: block; width: 300px; height: 300px;}
.classifiedOpen .classifiedMainImage picture img {width: 100%; height: 100%; object-fit: cover; object-position: center}

.classifiedOpen .classifiedOtherImages {display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;}
.classifiedOpen .classifiedOtherImages a {display: block; width: calc(33% - 5px); height: 100px;}
.classifiedOpen .classifiedOtherImages picture img {width: 100%; height: 100%; object-fit: cover; object-position: center}

.classifiedOpen .classifiedOtherImages:empty {display: none}

.classifiedOpen .classified {flex: 1; display: flex; flex-direction: column;}
.classifiedOpen .classified h2 {margin-bottom: 16px; line-height: 1; font-size: calc(var(--fontSizeLarge) + 0.4rem); font-weight: bold;}
.classifiedOpen .classified h3 {color: var(--darkGrey); font-weight: bold; margin-bottom: 16px;}
.classifiedOpen .classified h3,.classifiedOpen .classified h3 * {font-size: calc(var(--fontSize) + 0.1rem)}
.classifiedOpen .classifiedText {margin-bottom: var(--gap); line-height: 1.45; position: relative; overflow: hidden; max-height: none; height: auto; word-wrap: break-word; white-space: normal}
.classifiedOpen .classifiedPrice {background: var(--lighterGrey); flex-grow: 0; padding: 16px; margin: 24px 0; width: max-content;}
.classifiedOpen .classifiedPrice:has(b.priceValue:empty) {display: none;}
.classifiedOpen .classifiedAdditionInfo {display: flex; flex-direction: row; align-items: center; justify-content: space-between}
.classifiedOpen .classifiedActions {align-self: end; display: flex; gap: 12px}
.classifiedOpen .actionButton {background: var(--link)}
.classifiedOpen .actionButton:hover {background: var(--linkHover)}
.classifiedOpen .actionButton svg {height: 24px; width: 24px; vertical-align: middle; margin-right: 12px;}
.classifiedOpen .actionButton.button2 {background: orange; padding: 12px;}
.classifiedOpen .actionButton.button2:hover {background: #ff8000}
.classifiedOpen .actionButton.button2.favourite {background: red; padding: 12px;}
.classifiedOpen .actionButton.button2 svg {height: 18px; width: 18px; margin: auto}

.classifiedOpen .classifiedAdvertiser {display: flex; flex-direction: column; width: 340px; background: #faf3ec; padding: var(--gapSmall); align-self: flex-start;}
.classifiedOpen .classifiedAdvertiser .advertiserLogo {margin: 0 0 16px 0;}
.classifiedOpen .classifiedAdvertiser .advertiserLogo img {display: block; max-height: 100px; max-width: 100px;}
.classifiedOpen .classifiedAdvertiser .advertiserLogo:empty {display: none;}
.classifiedOpen .classifiedAdvertiser h4 {color: var(--darkGrey); font-size: var(--fontSizeLarge)}
.classifiedOpen .classifiedAdvertiser p {margin-bottom: 6px;}
.classifiedOpen .classifiedAdvertiser p a {padding: 4px 6px 4px 0}
.classifiedOpen .classifiedAdvertiser p a span {color: var(--link); display: inline-block;}
.classifiedOpen .classifiedAdvertiser p a:hover span {color: var(--linkHover); text-decoration: underline}
.classifiedOpen .classifiedAdvertiser p svg {width: 16px; height: 16px; margin: 0 14px 0 0; vertical-align: middle;}
.classifiedOpen .classifiedAdvertiser p:has(span:empty) {display: none;}
.classifiedOpen .classifiedAdvertiser h5,.classifiedOpen .classifiedAdvertiser .advertiserAddress {margin-bottom: 8px;}
.classifiedOpen .classifiedAdvertiser h5,.classifiedOpen .classifiedAdvertiser h5 a {font-size: calc(var(--fontSizeLarge) - 0.2rem)}
.classifiedOpen .classifiedAdvertiser .advertiserLanguages {display: inline-block; margin: auto 0 auto 6px; vertical-align: middle;}
.classifiedOpen .classifiedAdvertiser .advertiserLanguages img {width: 18px; height: 14px; display: inline-block; border: 1px solid rgba(0,0,0,0.2); margin-inline: 1px}
.classifiedOpen .classifiedAdvertiser .advertiserIM {text-align: center; margin-top: 4px}
.classifiedOpen .classifiedAdvertiser .advertiserIM:empty,.classifiedOpen .classifiedAdvertiser .im span {display: none;}
.classifiedOpen .classifiedAdvertiser .advertiserIM a {font-size: var(--fontSmall); display: inline-block}


.classifiedsTPVideo {margin: var(--gapSmall) auto; text-align: center; overflow: hidden; max-width: 500px;}


/* =========== RELATED / USER ADS LISTING in AD VIEW ========= */
/* USED AT MORE PAGES - CLASSIFIED TEXT, TIMBER, COMPANY DETAIL*/


.classifiedsRelated h4 a {font-size: inherit; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.classifiedsRelated .classifiedsRelatedAds {display: flex; flex-wrap: wrap; gap: var(--gap); margin: var(--gapSmall) 0; justify-content: center; align-items: stretch;

}
.classifiedsRelated .classifiedsRelatedAds > div {flex: 1 0 240px; max-width: 260px; display: flex; gap: 6px; flex-direction: column; align-items: flex-start; justify-content: flex-start; border: 1px solid var(--lightGrey); transition: .5s; overflow: hidden;}
.classifiedsRelated .classifiedsRelatedAds > div * {align-self: center; text-align: center;}
.classifiedsRelated .classifiedsRelatedAds > div a.linkImg,.classifiedsRelated .classifiedsRelatedAds > div picture {width: 100%; height: 200px; display: block; overflow: hidden;}
:is(.classifiedsRelated .classifiedsRelatedAds > div a.linkImg,.classifiedsRelated .classifiedsRelatedAds > div picture) img {width: 100%; height: 100%; object-fit: cover; object-position: center}
.classifiedsRelated .classifiedsRelatedAds > div a.linkImg {margin: 0 0 8px 0}
.classifiedsRelated .classifiedsRelatedAds > div picture.defaultImage {display: flex; align-items: center; justify-content: center;}
.classifiedsRelated .classifiedsRelatedAds > div picture.defaultImage img {width: 120px; height: 120px;}
.classifiedsRelated .classifiedsRelatedAds > div h5 {margin: 0 auto; display: block;}
.classifiedsRelated .classifiedsRelatedAds > div h5 a {line-height: 1.25; color: var(--link)}
.classifiedsRelated .classifiedsRelatedAds > div h6 {margin: 0 auto; font-size: var(--fontSizeSmall)}
.classifiedsRelated .classifiedsRelatedAds > div a {display: block;}
.classifiedsRelated .classifiedsRelatedAds > div p {font-size: var(--fontSizeSmall); display: block; flex-grow: 1}
.classifiedsRelated .classifiedsRelatedAds > div h5 a,.classifiedsRelated .classifiedsRelatedAds > div h6,.classifiedsRelated .classifiedsRelatedAds > div p {padding-inline: 8px; line-height: 1.2}
.classifiedsRelated .classifiedsRelatedAds > div price {background: var(--lightestGrey); padding: 6px 8px; margin-top: 12px; display: block; text-align: center; width: 100%}
.classifiedsRelated .classifiedsRelatedAds > div price,.classifiedsRelated .classifiedsRelatedAds > div pricevalue b {font-size: var(--fontSizeSmall)}

.classifiedsRelated .classifiedsRelatedAds > div:hover {border: 1px solid var(--linkHover); box-shadow: var(--materialShadow);}


.classifiedTextDetail .classifiedsRelated > div {padding: 0 0 18px 0;}
.relatedAdTxt {padding: 0 0 18px 0;}

.classifiedsTPView .classifiedsRelated > div,.classifiedsTPView .classifiedsRelated .relatedAdTP {padding: 0;}
.relatedAdTP {padding: 0 0 18px 0;}


@media screen and (max-width: 1280px) {

.classifiedTextDetail .content {padding-top: 0}

.titleBlock .addButton {display: none}

.classifiedOpen {flex-direction: column; justify-content: center; margin: 0; gap: var(--gap);

}
.classifiedOpen .classifiedImages {flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: none; gap: 12px;

}
.classifiedOpen .classifiedImages .classifiedOtherImages {display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center;}
.classifiedOpen .classifiedImages .classifiedOtherImages a {display: block; width: 300px; height: 300px;}
.classifiedOpen .classifiedImages .classifiedOtherImages picture img {width: 100%; height: 100%; object-fit: cover; object-position: center}


.classifiedOpen .classifiedImages.onlyOneAtt .classifiedMainImage {justify-content: center; width: 100%;}
.classifiedOpen .classifiedImages.onlyOneAtt .classifiedMainImage a {display: block; width: auto; margin: 0 auto;}
.classifiedOpen .classifiedImages.onlyOneAtt .classifiedOtherImages {display: none}


.classifiedOpen .classifiedImages.showArrowToScroll .arrowScrollLink {display: block}

.classifiedOpen .classified {margin: 0 auto;}
.classifiedOpen .classified .classifiedText {margin-bottom: var(--gapSmall);}
.classifiedOpen .classified .classifiedPrice {margin-inline: auto}
.classifiedOpen .classified .classifiedAdditionInfo {flex-direction: column; gap: 12px;}
.classifiedOpen .classified .classifiedAdditionInfo .classifiedActions {justify-content: center; align-self: auto;}
.classifiedOpen .classifiedAdvertiser {width: 100%; flex: 1; align-self: center; margin: var(--gap) 0}


}


@media screen and (max-width: 768px) {

.classifiedsRelated .classifiedsRelatedAds {gap: var(--gapXLarge); align-items: flex-start; flex-direction: column;}
.classifiedsRelated .classifiedsRelatedAds > div {flex: 1; max-width: none; width: 100%}

}


/* TIMBERPOLIS CLASSIFIEDS - first visit top banner /classifieds-timberpolis */

.classifiedFirstVisitAd {background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: center; justify-content: center; gap: var(--gap); animation: parallaxMove 32s ease-in-out infinite;

}
.classifiedFirstVisitAd * {color: white;}
.classifiedFirstVisitAd b {display: block;}
.classifiedFirstVisitAd > div {padding: var(--gapSmall) var(--gap);}
.classifiedFirstVisitAd div.div1st {background: rgba(0,0,0,0.4); height: 100%; min-width: 30%;  display: flex; align-items: center; justify-content: center; animation: colorCycle 6s ease-in-out infinite; position: relative; overflow: hidden; clip-path: url(#wave-clip);}
.classifiedFirstVisitAd div.div1st div {font-size: var(--fontSizeLarge); font-weight: 300; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;}
.classifiedFirstVisitAd div.div1st div .typing-text {font-size: var(--fontSizeLarge); font-weight: 300; display: inline-block; overflow: hidden; white-space: nowrap; border-right: 3px solid rgba(255,255,255,0.9); animation: typing 2s steps(8, end) forwards,blinkCursor 0.75s step-end 2s, hideCursor 0s 2s forwards; max-width: 0;}
.classifiedFirstVisitAd div.div1st b {font-size: calc(var(--fontSizeXXLarge) + 0.2rem); font-weight: bolder; display: inline-block;overflow: hidden; white-space: nowrap; border-right: 4px solid rgba(255,200,100,0.9); max-width: 0; opacity: 0; animation: showElement 0s 2.5s forwards, typingBold 2.5s steps(11, end) 2.5s forwards,    blinkCursorBold 0.75s step-end 2.5s 3.33, hideCursorBold 0s 5s forwards, textGlowBold 3s ease-in-out 5s infinite; text-shadow: 0 0 10px rgba(255,255,255,0.3), 0 0 20px rgba(255,255,255,0.2), 2px 2px 4px rgba(0,0,0,0.8);}

.classifiedFirstVisitAd div.div2nd {flex: 1;}
.classifiedFirstVisitAd div.div2nd b {font-size: var(--fontSizeXLarge); margin-block: 0px; backdrop-filter: blur(2px); padding: 4px 12px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(0, 0, 0, 0.0); text-shadow: 2px 2px 3px rgba(0,0,0,0.6)}


.mainActivity .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2.webp")}
.mainActivity1 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_1.webp")}
.mainActivity5 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2.webp")}
.mainActivity10 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_3.webp")}
.mainActivity12 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_4.webp")}
.mainActivity15 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_5.webp")}
.mainActivity20 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_6.webp")}


@media screen and (max-width: 1024px) {
.classifiedFirstVisitAd {gap: var(--gapSmall);}
.classifiedFirstVisitAd > div {padding: var(--gapSmall);}
}


@media screen and (max-width: 768px) {

.classifiedFirstVisitAd {gap: 0; flex-direction: column; animation: parallaxMove 24s ease-in-out infinite;

}
.classifiedFirstVisitAd div {padding: var(--gapSmall)}
.classifiedFirstVisitAd div.div1st {height: auto; width: 100%; display: block; text-align: center; padding: 0; clip-path: url(#wave-clip-mobile);}
.classifiedFirstVisitAd div.div2nd {text-align: center;}
.classifiedFirstVisitAd div.div2nd b {font-size: var(--fontSizeLarge); padding: 4px 0}


.mainActivity .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2_small.webp")}
.mainActivity1 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_1_small.webp")}
.mainActivity5 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_2_small.webp")}
.mainActivity10 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_3_small.webp")}
.mainActivity12 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_4_small.webp")}
.mainActivity15 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_5_small.webp")}
.mainActivity20 .classifiedFirstVisitAd {background-image: url("../images/classifieds/parallax_6_small.webp")}

}


@keyframes parallaxMove {
0%, 100% {
background-position: center top;}
50% {
background-position: center bottom;}
}


@keyframes colorCycle {
0% {
background: rgba(0,0,0,0.4); /* Dark Black */
}
50% {
background: rgba(101,67,33,0.4); /* Dark Brown */
}
100% {
background: rgba(0,0,0,0.4); /* Back to Black */
}
}


@keyframes typing {
from {
max-width: 0;}
to {
max-width: 100%;}
}

@keyframes typingBold {
from {
max-width: 0;}
to {
max-width: 100%;}
}

@keyframes showElement {
to {
opacity: 1;}
}

@keyframes blinkCursor {
0%, 50% {
border-right-color: rgba(255,255,255,0.9);}
51%, 100% {
border-right-color: transparent;}
}

@keyframes blinkCursorBold {
0%, 50% {
border-right-color: rgba(255,200,100,0.9);}
51%, 100% {
border-right-color: transparent;}
}

@keyframes hideCursor {
to {
border-right-color: transparent;}
}

@keyframes hideCursorBold {
to {
border-right-color: transparent;}
}

@keyframes textGlowBold {
0%, 100% {
text-shadow:
0 0 10px rgba(255,255,255,0.3),
0 0 20px rgba(255,255,255,0.2),
2px 2px 4px rgba(0,0,0,0.8);}
50% {
text-shadow:
0 0 20px rgba(255,255,255,0.6),
0 0 40px rgba(255,200,100,0.4),
0 0 60px rgba(255,200,100,0.2),
2px 2px 8px rgba(0,0,0,0.9);}
}


.hint-pulse {
animation: translationPulse 0.5s ease-in-out 18;
animation-delay: 0.5s;}

@keyframes translationPulse {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 0px transparent);
background: orange;}
50% {
transform: scale(1.25);
filter: drop-shadow(0 0 6px var(--color-accent, #ff0000));
background: red;}
}


/* CLASSIFIED AD REQUEST */
/* ===================== */


.classfiedsRequest .formLoginWrap {text-align: center;}
.classfiedsRequest .formLoginWrap .form {width: 100%; max-width: 400px; margin: 0 auto;}
.classfiedsRequest .formLoginWrap .loginFooter a {padding: 6px; display: block; width: fit-content; margin: 0 auto; text-align: center;}

.classfiedsRequest .messagePart {max-width: 1000px; width: 100%; margin: var(--gap) auto; gap: var(--gap); display: flex; flex-direction: row; flex-wrap: wrap;}
.classfiedsRequest .messagePart > div {flex: 1;}

.classfiedsRequest .classifiedPart {max-width: 1000px; width: 100%; margin: var(--gap) auto;

}
.classfiedsRequest .classifiedPart h3 {font-size: var(--fontSizeLarge); color: black;}
.classfiedsRequest .classifiedPart .classifiedCategory {margin: 0 0 12px 0; color: var(--darkGrey); font-weight: bold;}