/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
	display: block;
}
body{
    /* for footer always on bottom */
    display: flex;
    flex-direction: column;

    line-height: 1;
}

/* for footer always on bottom */
html, body {
    height: 100%;
}

:root{
    --headerHeight: 50px;
    --siteSpace: 10px;
    --fontColor: #111;
    --linkColor: #FF6A00;
    --activeLinkColor: #ff6347;/* #ff6347 - tomato (czerwony) */
    --buttonColor: #FF6A00;
    --helperColor: #b0b0b0;
    --standardBorderColor: #ddd;
    --standardGrayBg: #f1f1f1;
    --standardGrayFont: #b7b7b7b;
    --maxWidthOnMobile: 600px;
    --mobileFormElementHeight: 44px;
    --slideFooterButtonHeight: 50px;
}

::placeholder{
    text-overflow: ellipsis;
    color: darkgray;
    opacity: 1;
}
input:focus::placeholder {
    color: transparent;
}

img{  
    max-width: 100%;
    height: auto;
}

input,
.mobileQueryTrigger .likeInput, /* for mobile */
textarea{
    border: none;
    background-color: #fff;
    font-size: 14rem;
    text-overflow: ellipsis;
}
    .mobileQueryTrigger .likeInput,
    input,
    textarea{
        border: 1px solid var(--standardBorderColor);
    }
    input:not([type="checkbox"]):not([type="radio"]),
    select{
        height: 32px;
    }
    textarea{
        padding: 10px;
    }
    .mobileQueryTrigger .likeInput{
        display: block;
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        font-size: 14rem;
        color: var( --fontColor );
        text-decoration: none;
    }


ol, ul{
	list-style: none;
}
ul.bullet{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 20px;
}
    ul.bullet li{
        display: list-item;
    }
blockquote, q{
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
	content: '';
	content: none;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
a,
.filters .js-buttonX,
.filters .js-prompter li .theCleaner,
.mobileQueryTrigger .clearX{
    text-decoration: none;
    cursor: pointer;
}
    a{
        color: var( --linkColor );
    }
    a:hover{
        text-decoration: underline;
    }
    .filters .js-buttonX,
    .slider .js-clearX,
    .mobileQueryTrigger .clearX
     {
        font-size: 20rem;
        color: var( --activeLinkColor );
    }

h1, h2, h3, h4{
    line-height: 1.3
}

h1{
    margin: 0 0 10px 0;
    font-size: 21rem;
    font-weight: 600;
    text-align: center;
    color: #000;
}

h2{
    margin: 0 0 10px 0;
    font-size: 19rem;
    font-weight: 600;
}

p{
    margin: 0 0 5rem 0;
}

b, strong{
    font-weight: 600;
}
i{
  font-style: italic;  
}

*,
*::before,
*::after{
    box-sizing: border-box;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

input[type=number]{
    -moz-appearance:textfield;
}


/*
    typography.css
*/
html{ 
   font-size: 1px;/*for using REM units*/
}
body{
   font-family:'DejaVu Sans ', Helvetica, Arial, sans-serif;
   font-size: 14rem;
   font-weight: 400;
   line-height: 1.3;
   color: var( --fontColor );
}

.breadcrumb{
    margin-bottom: 15px;
}
    .breadcrumb ol {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: hidden;
    }

        .breadcrumb li{
            color: #999;
            font-size: 12rem;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
            .breadcrumb li:first-child,
            .breadcrumb li:last-child{
                overflow: visible; /*for mobile*/
            }
            .breadcrumb li:first-child:before{
                margin-left: 0;   
            }
        .breadcrumb li:before{
            content: "/";
            margin: 0 10px;
        }
        .breadcrumb li:last-child,
        .breadcrumb li:last-child a {
            color: var( --fontColor );
        }
        .breadcrumb li:first-child:before {
            content: "";
            margin: 0;
        }
        .breadcrumb li.homeIcon {
            min-width: 18px;
        }
            .breadcrumb li.homeIcon img{
                display: none;
            }
        .breadcrumb li a {
            color: #999;
        }

.content{
    flex: 1 0 auto;
}

.button,
.submit{
    display: inline-flex; /* for vertical centering icon and text in buttons */
    justify-content: center;
    align-items: center;

    padding: 0 15px;
    border-radius: 5px;
    border: none; /* for inputs type="button" / "submit" */
    cursor: pointer;
    line-height: 35px;
}
    .submit-search{
        padding: 0 15px 0 45px;
        font-size: 14rem;
        background-image: url();
        background-position: center left 15px;
        background-repeat: no-repeat;
    }
    .button-white{
        border: 1px solid #ccc;
        background: #fff;
        color: var( --linkColor );
    }

    .button-color,
    .submit-color{
        background-color: var( --buttonColor );
        color: #fff;
        font-weight: 600;
    }

    .button span {
        margin-left: 10px;
    }


/*
    MAX width of site on PC with some space from left and right
*/
.site-PC{
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-right: var( --siteSpace );
    padding-left: var( --siteSpace );
}
/*
    MAX width of site on MOBILE without space from left and right     - - -- - - - - --- -- - - -- - -- - - -- - - --- -- - - -- - - -- - --  Czy to potrzebne????
*/
.site-MOBILE{
}

header,
#window .header{
    /* shadow on bottom */
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.39);
}
    header{
        margin-bottom: 20px;
        background: url('img/header_image.webp');
        background-repeat: no-repeat;
        background-position: calc(50% - 100px) center;
    }
footer{
    padding-bottom: var( --headerHeight ); /*need this (margin or padding) because on mobile I have contact buttons ( email / phone) height as header with position fixed. Buttons overlay footer links without this space */
    background: var( --standardGrayBg );
    
    flex-shrink: 0;
}
#window .footer,
.filters .slideFooter,
.filters .sliderFooter{
    /* shadow on top */
    box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.29);
}

header .wrapper,
#window .header .wrapper,
#window .footer .wrapper,
#filters .header .wrapper,
#filters .footer .wrapper{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    height: var( --headerHeight );
}
    header .wrapper,
    #window .header .wrapper,
    #filters .header .wrapper{
        justify-content: space-between;
    }
    #window .footer .wrapper,
    #filters .footer .wrapper{
        justify-content: center;
    }

header .logo{
    text-decoration: none;
    color: #333;
}
    /* domain */
    header .logo span:nth-child(1){
        font-size: 22rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    /* .pl */
    header .logo span:nth-child(2){
        font-size: 11rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    /* domain slogan */
    header .logo div{
        font-size: 11rem;
    }

header .user{
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: var( --headerHeight );
}

header .user a{
    position: relative; /* for counter in icons */
    margin-left: 10px;
    margin-right: 10px;
    font-size: 11rem;
    color: var( --linkColor );
}
    header .user a.add{
        margin-right: 0;
    }
    header .user a.add.onlyMOBILE{
        display: none;
        color: #fff;
        font-weight: bold;
    }

    header .user a.add.onlyPC{
        /* flex just for vertical centering text in add button */
        display: flex;
        align-items: center;
    }
        header .user a.add.onlyPC > div{
            padding: 0 30px 0 55px;
        }
            header .user a.add.onlyPC div div:nth-child(1){
                text-transform: uppercase;
                font-size: 17rem;
                font-weight: 600;
                color: #fff;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
            }
            header .user a.add.onlyPC div div:nth-child(2){
                font-size: 11rem;
                color: #d0dff4;
            }
/* icons */
header .user a{
    padding-top: 32px;
    background-repeat: no-repeat;
    background-position: center top 7px;
}
header .user a.add{
    background-image: url();
    background-color: var( --buttonColor );
}
    header a.add.onlyPC{
        margin: 0 0 0 10px;
        padding-top: 0;
        background-position: left 17px center;
    }
    header a.add.onlyMOBILE {
        padding-left: 10px;
        padding-right: 10px;
    }

header .user .account {
    background-image: url();
}
header .user .favorites {
    background-image: url();
}
header .user .message {
    background-image: url();
}

/*counters in icons*/
header .user a span{
    position: absolute;
    top: 1px;
    width: 22px;
    height: 22px;
    line-height: 22px;/* for vertical centering */
    border-radius: 50%;
    text-align: center;
    background: var( --activeLinkColor );
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}
    header .user a.favorites span{
        left: 20px;
    }
    header .user a.message span {
        left: 30px;
    }




/*
    Main layout START
    To keep together .sidebar and main content
*/
.container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
    .addClassified .container{
        justify-content: center;
    }

    body.homepage .sidebar,
    body.category .sidebar,
    body.classified .sidebar,
    body.addClassified .sidebar,
    body.report .sidebar,
    body.profile .sidebar {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 24%;
        max-width: 24%;
    }
        /* on left */
        body.homepage .sidebar{
            order: 1;
        }
        /* on right */
        body.category .sidebar,
        body.classified .sidebar,
        body.addClassified .sidebar,
        body.report .sidebar,
        body.profile .sidebar { 
            order: 3;
        }

    main{ 
        order: 2; /* main has always order=2, sidebar can has order=1 or 2 so it will display on left or on right side */
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: calc(76% - 2.67%); /* 2.67% == 30px from 1120px*/
        max-width: calc(76% - 2.67%);
        
        /* don't add overflow: hidden here - it cut shadow in galeryX */
    }
    body.fullPage main{
        flex-basis: auto;
        max-width: none;
    }

/*
*   Main layout END
*/


/*
*   Filters START
*/

/*
    Just for mobile and modal window
*/


.filters,
.mobileQueryTrigger{
    margin: 0 0 20px 0;
    background: var( --standardGrayBg );
    border-radius: 5px;
    padding: 15px;
}
    .mobileQueryTrigger{
        display: none;
    }

.filters .js-hide{
    display: none !important;
}
.filters .js-show{
    display: block !important;
}

.filters input, 
.filters select {
    width: 100%;
}
.filters input{
    font-size: 12rem;
}
        /* Homepage */
        body.homepage .filters .search .js-fakeInput,       /* icon in filters in input  */
            body.homepage .filters .submit{       /* icon in filters in input  */
            height: 46px;
            font-size: 14px;
        }

/*
    For PC
*/
.filters .queryStructure {
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    grid-template-columns: repeat(12, 1fr);
}
.filters .queryStructure .attributes{
    /*
        For keeping together elements as single or range
    */
    display: flex;
    flex-wrap: wrap;
}
/*
    12 -> full width
*/
.filters .span-12{
    grid-column: span 12;
}
.filters .span-11{
    grid-column: span 11;
}
.filters .span-10{
    grid-column: span 10;
}
.filters .span-9{
    grid-column: span 9;
}
.filters .span-8{
    grid-column: span 8;
}
.filters .span-7{
    grid-column: span 7;
}
/*
    6 -> 50% 50%
*/
.filters .span-6{
    grid-column: span 6;
}
.filters .span-5{
    grid-column: span 5;
}
/*
    4 -> 33% 33% 33%
*/
.filters .span-4{
    grid-column: span 4;
}
.filters .span-3{
    grid-column: span 3;
}
.filters .span-2{
    grid-column: span 2;
}
.filters .span-1{
    grid-column: span 1;
}


.filters .slideHeader{
    /* full width for this element */
    flex-basis: 100%;

    /* 
        position relative and absolute in:
        .back 
        .title 
        .close
        .closeSlider
        to have text in .title centered
    */
    position: relative;
}
.filters .attributes .footer{
    display: none; /* hide on PC - show on MOBILE */
}

    .filters .slideHeader .title,
    .filters .slideHeader .back,
    .filters .slideHeader .close,
    .filters .slideHeader .closeSlider{
        line-height: normal;
    }
        .filters .slideHeader .title{
            font-size: 12rem;
        }
        /*
            Positioned absolute to have "title" always centered when icons on left are set or not
        */
        .filters .slideHeader .back,
        .filters .slideHeader .close,
        .filters .slideHeader .closeSlider,
        .filters .slideFooter,
        .filters .sliderFooter{
            display: none;
        }

.filters .attribute{
    flex-grow: 1;
    flex-shrink: 1;
}

.filters .mobileSetButton{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
}

.filters .attribute,
.filters .inputs{
    /* .filters .attribute -> for .js-suggestion and .js-prompter */
    /* .filters .inputs -> for .bottonX and arrow (vertical centering) */
    position: relative;
}

/*
    hide by js
*/
.filters .attribute .js-fakeInput{
    display: block;
}
.filters .attribute .js-realInputHasValue{
    border: 1px solid var(--activeLinkColor);
    color: var( --fontColor );
}

.filters .attribute input:focus{
    background-color: yellow;
}


/*  
    ========================== Z-INDEX MOBILE VALUE ==========================

    Construction of .js-suggestion and .js-prompter
    Need this construction to have scroll in element positioned absolute in nested tree!

    <div .box (position RELATIVE)>                                  <-- keeper of .js-suggestion
        <div .js-suggestion (position: ABSOLUTE) #js-suggestionIsActive (display BLOCK) >                      <-- to show suggestion under Input
            <ul .js-prompter (OVERFLOW: auto/hidden)>               <-- to have scroll if necessary
                <li></li>                                           <-- can't have position = relative here!!!
                <li>
                    <div .js-suggestion (position: ABSOLUTE)>       <-- for positionig sub menu
                        <ul .js-prompter (OVERFLOW: auto)>          <-- for scroll
                            <li></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    1. .js-suggestion should be over header and over #window - check on mobile!!!
    greater than: 
        - #window .header
        - #window .footer
        - #window

    2. .hs-suggestion box is ONLY for "position absolute" and define "appirance" of box
    Don't add here overflow!

    3. .js-prompter has normal position (static), but have overflow.

    4. Don't add position relative / absolute for LI element !!! It will destroy menu.

        
*/
.filters .js-suggestion{
    display: none;/* change it on MOBILE*/
    
    position: absolute;/* for display list under or above input by JS */
    z-index: 201;
    left: 0;

    /* as long as parent */
    min-width: 100%;
    width: auto;

    border: 1px solid var(--standardBorderColor);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.36);
    background: #fff;
}

.filters #js-suggestionIsActive{
    display: block;/*show prompter*/
}


.filters ul.js-prompter{
    padding-top: 5px;
    overflow-x: hidden;
}
    .filters .js-suggestion ul.js-prompter{
        overflow-y: auto;
    }

.filters .js-prompter li{
    /* for .theHolder and .theIcon */
    display: flex;
    flex-direction: row;
}
    .filters .js-prompter li .theHolder{
        flex-grow: 1;
        flex-shrink: 1;
        margin: 6px 5px;
    }
    .filters .js-prompter li .theIcon{
        /* need for vertica centering .theCleaner */
        display: flex;
    }
/*
    .filters .js-prompter li:hover (gray)
    is used to highlight path in filter location / category when location/category tree is expanded
    
    .filters ul.js-prompter li.hoverFromKeyboard
    is used to highlight active (from mouse or keyboard) item
*/
.filters ul.js-prompter li.hoverFromKeyboard {
    background-color: var( --buttonColor );
    border-radius: 2px;
}
.filters .js-prompter li:hover{
    background-color: var( --standardGrayBg );
    cursor: pointer;
    border-radius: 2px;
}
    .filters ul.js-prompter li.hoverFromKeyboard > .theHolder,
    .filters ul.js-prompter li.hoverFromKeyboard .theArrow,
    .filters ul.js-prompter li.hoverFromKeyboard .theCleaner{
        color: #fff;
    }
/*
    submenu on PC
    2 level (subSuggestion)
*/
.filters .js-prompter li:hover > .js-suggestion{
    display: block;
    /* calculating left position in JS  */
}


/* checkbox and radiobutton - unChecked / checked */
.filters .js-prompter.multiChoice li .theHolder,
.filters .js-prompter.multiChoice li.checked .theHolder,
.filters .js-prompter.singleChoice li .theHolder,
.filters .js-prompter.singleChoice li.checked .theHolder{
    background-repeat: no-repeat;
    background-position: left 2px center;
}
    /* for text */
    .filters .js-prompter.multiChoice li .theHolder,
    .filters .js-prompter.singleChoice li .theHolder{
        padding-left: 25px;
    }
    .filters .js-prompter.multiChoice li .theHolder{
        /*checkbox off*/
        background-image: url();
    }
    .filters .js-prompter.multiChoice li.checked .theHolder{
        /*checkbox on*/
        background-image: url();
    }
    .filters .js-prompter.singleChoice li .theHolder{
        /*radio off*/
        background-image: url();
    }
    .filters .js-prompter.singleChoice li.checked .theHolder{
        /*radio on*/
        background-image: url();
    }
        /* 
            subChoice is used on MOBILE
            in location and category ( in sub categories or sub locations)
        */
        .filters .js-prompter.singleChoice li.subChoice .theHolder,
        .filters .js-prompter.singleChoice li.checked.subChoice .theHolder{
            background-position: left 22px center;
        }
        .filters .js-prompter.singleChoice li.subChoice .theHolder{
            padding-left: 47px;
        }


.filters .js-prompter li .theHolder .theValue{
    white-space: nowrap;
}

/*
    .theHelper contain e.g. category name / location description
    .theHelper is only in prompter:
        - search field - your last searches from cookie
        - search field - autocomplete
        - location field - your last locations from cookie
*/
.filters .js-prompter li .theHolder .theHelper{
    color: var( --helperColor );
    font-size: 12rem;
}


.filters .js-prompter li .theCounter{
    font-size: 10px;
}
    .filters .js-prompter li .theCounter span{
        padding: 2px 4px;
        background: #eee;
        border-radius: 4px;
    }
.filters .js-prompter li .theArrow{
    visibility: hidden;
}
    /*  for arrow "More" on PC   */
    .filters .js-prompter li.hasChilds > .theIcon .theArrow{ /* arrows only for first level */
        visibility: visible;
    }

.filters .js-arrow,
.filters .js-buttonX {
    position: absolute;
    /* vertical centering whole element */
    top: 50%;
    transform: translateY(-50%);
    right: 1px;
    z-index: 199;
    
    /* centering "X" or ">" element*/
    display: flex;
    justify-content: center;/* horizontal center "X" or ">" */
    align-items: center;    /* vertical center "X" or ">" */
        
    /* height as parent - 2px for borders (if parent have) */
    height: calc(100% - 2px);
    text-align: center;
    cursor: pointer;
}
    .filters .js-arrow,
    .filters .js-buttonX{
        background: #fff;
        width: 20rem;
    }
        .filters .js-arrow,
        .mobileQueryTrigger .arrow{
            font-size: 12rem;
            color: var( --standardGrayFont );
        }


.filters .js-prompter li .theCleaner,
.filters .js-prompter li .theCounter,
.filters .js-prompter li .theArrow{
    display: flex;
    align-items: center;    /* vertical centering */
    justify-content: center;/* horizontal centering */
    text-align: center;
}
    .filters .js-prompter li .theCleaner{
        width: 30rem;
        font-size: 20rem;
    }
    .filters .js-prompter li.hoverFromKeyboard .theCleaner:hover{
        background-color: var( --standardGrayBg );
        color: var( --activeLinkColor );
    }
    .filters .js-prompter li .theArrow{
        width: 20rem;
    }


/*
    last location from cookie
*/
.filters .js-prompterCookie li,
.filters .js-autocomplete li{
    border-bottom: 1px solid var( --standardBorderColor )
}
.filters .js-prompterCookie li:last-child,
.filters .js-autocomplete li:last-child{
    border-bottom: none;
}

.filters .js-prompterCookie:before{
    content: 'Ostatnio szukane:';
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
    
    font-weight: bold;
}


/*
*   Filters END
*/

.categoryMenu .buttons{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    border-bottom: 1px solid var( --standardBorderColor );
}

.categoryMenu ul.fromWho,
.categoryMenu ul.sortAndViewAs{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}
    .categoryMenu .fromWho li{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end; /* to bottom */

        margin-right: 25px;
    }
    .categoryMenu .fromWho li:last-child{
        margin-right: 0;
        margin-left: auto;
    }
    .categoryMenu .fromWho .active{
        font-weight: bold;
        border-bottom: 2px solid var( --activeLinkColor );
    }

.categoryMenu .subCategories{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 15px;
    margin-bottom: 20px;
}
.categoryMenu .subCategories li{
    flex-basis: 33%; /* make 3 columns */
    padding: 5px 0;
}
.categoryMenu .subCategories li.counter{
    font-size: 10rem;
    color: #999999;
}











.menuPC{
}

    .menuPC > ul {
        margin-bottom: 50px;
    }

    .menuPC ul li{
        position: relative;
    }
    
    /* onMouseOut */
    .menuPC:not(:hover) div.subPosition {
        transition: all 0.1s;
        transition-delay: 0.5s;
    }
    /* do: */
    .menuPC ul div.subPosition{
        visibility: hidden;
        position: absolute;
        z-index: 999;/* menu over filters */
        top: 0;
        left: -9999px;
        max-height: 90vh;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.33);
        background: #fff;
        column-count: 2;    /* divide menu to 2 columns */
    }

    .menuPC ul li:hover div.subPosition,
    .menuPC ul div.js-active {
        visibility: visible;
        left: calc(100% - 70px );
    }

    /* 
        CSS for flat free!
        hide on start all LI with lvl > 1 
        JS scipt change it to display: block;
    */
    .menuPC .level-2 {
        display: none;
    }
     
    .menuPC .wrapper{
        position: relative; /* for counter */
    }
        .menuPC .wrapper a{
            position: relative;     /* for :after element */
            display: block;
            padding-right: 60px;    /* for cunter */
            padding-left: 10px;     /* space for background */

            font-size: 14rem;
            white-space: nowrap;

            color: var( --fontColor );
        }
            /*
                add this to .level-1 to easy mouse move from first level to group
                change background to red to see what happens
            */
            .menuPC li.level-1:hover > .wrapper a:after{
                z-index: 1;
                position: absolute;
                top: -20px;
                transform: rotate(45deg);
                
                /*                box    width*/
                left: calc(100% - 120px - 10px );
                width: 120px;
                height: 120px;
                content: '';
                background: transparent;
                /* background: red; */
            }
  
                
        .menuPC .wrapper .counter{
            position: absolute;
            top: 0;
            right: 0px;
            padding-right: 10px;

            font-size: 10rem;
            color: #999999;
            font-weight: normal;
            margin-left: 20px;
        }
            .menuPC .wrapper .counter,
            .menuPC .wrapper a{
                line-height: 37rem; /* font vertical center */
            }

  


        .menuPC ul li:hover > .wrapper a,
        .menuPC ul li:hover > .wrapper span{
            color: #fff;
        }
            .menuPC ul li:hover > .wrapper a{
                background-color: var( --buttonColor );
                border-radius: 2px;
            }
  


    .menuPC .seeAll{
        margin-bottom: 10px;
        border-bottom: 1px solid var( --standardGrayBg );
        column-span: all; /* span columns into one */
        color: var( --standardGrayFont ); /* todo wyszarzyć kategorię */
        color: red;
    }
        .menuPC .seeAll .wrapper a span{
            font-weight: 600;
        }





.filters .search .js-fakeInput,       /* icon in filters in input  */
.filters .location .js-fakeInput,     /* icon in filters in input  */
.filters .category .js-fakeInput,     /* icon in filters in input  */
.mobileQueryTrigger .likeInput          
{
    padding-left: 35px;
    background-position: left 5px center;
    background-repeat: no-repeat;
}

    .mobileQueryTrigger .likeInput,
    .filters .slider .search .label,
    .filters .search .js-fakeInput {
        background-image: url();
    }
    .filters .slider .location .label,
    .filters .location .js-fakeInput {
        background-image: url();
    }
    .filters .slider .category .all,
    .filters .category .js-fakeInput {
        background-image: url();
    }

      
      
        


/* Main PC menu on index site on left*/
.menuPC .services > .wrapper a,
.menuPC .estate > .wrapper a,
.menuPC .job > .wrapper a,
.menuPC .cars > .wrapper a,
.menuPC .friends > .wrapper a,
/* 
	Icons in filters in prompter - ONLY for first level on PC
	Need selector ">" because on PC category tree is nested
*/
.filters .js-prompter .services > .theHolder,
.filters .js-prompter .estate > .theHolder,
.filters .js-prompter .job > .theHolder,
.filters .js-prompter .cars > .theHolder,
.filters .js-prompter .friends > .theHolder{
    text-transform: uppercase;
    font-weight: 600;
}

    /* space for icon */
    .menuPC > ul > li > .wrapper a{
        padding-left: 40px;
        background-position: left 10px center;
        background-repeat: no-repeat;
    }
    /* space for icon */
    .mobileStartCategories .menu li a{
        padding-top: 40px;
        background-position: center top 5px;
        background-repeat: no-repeat;
    }
    /* 
        ACHTUNG!!!
        Categories Icons overwrite Icons radioButtons set by .singleChoice
        Only for LI width icons (first level LI) 
    */
    .filters .js-prompter li.hasIcon > .theHolder {
        padding-left: 30px;                                     /* space for icon */
        background-position: left center;
        background-repeat: no-repeat;
    }
        .likeInput.all,                                               /* on mobile - icon LOOK LIKE input in filters category  */
        .filters .inputs .all,                                          /* on pc - icon in INPUT in filters category */
        .menuPC .all > .wrapper a                                       /* on pc - in menu on left */
        {   
            /* "all category" */
            background-image: url();
        }
        .likeInput.antique,
        .mobileStartCategories .menu .antique a,
        .filters .inputs .antique,
        .filters .js-prompter li.antique > .theHolder,                 /* set icon for .hasIcon elements */
        .menuPC .antique > .wrapper a{
            background-image: url();
        }
        .likeInput.forChildren,
        .mobileStartCategories .menu .forChildren a,
        .filters .inputs .forChildren,              
        .filters .js-prompter li.forChildren > .theHolder,             /* set icon for .hasIcon elements */
        .menuPC .forChildren > .wrapper a{
            background-image: url();
        }
        .likeInput.houseAndGarden,
        .mobileStartCategories .menu .houseAndGarden a,
        .filters .inputs .houseAndGarden,              
        .filters .js-prompter li.houseAndGarden > .theHolder,          /* set icon for .hasIcon elements */
        .menuPC .houseAndGarden > .wrapper a{
            background-image: url();
        }
        .likeInput.electronics,
        .mobileStartCategories .menu .electronics a,
        .filters .inputs .electronics,              
        .filters .js-prompter li.electronics > .theHolder,             /* set icon for .hasIcon elements */
        .menuPC .electronics > .wrapper a{
            background-image: url();
        }
        .likeInput.machineIndustry,
        .mobileStartCategories .menu .machineIndustry a,
        .filters .inputs .machineIndustry,              
        .filters .js-prompter li.machineIndustry > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .machineIndustry > .wrapper a{
            background-image: url();
        }
        .likeInput.fashion,
        .mobileStartCategories .menu .fashion a,
        .filters .inputs .fashion,              
        .filters .js-prompter li.fashion > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .fashion > .wrapper a{
            background-image: url();
        }
        .likeInput.learnAndMusic,
        .mobileStartCategories .menu .learnAndMusic a,
        .filters .inputs .learnAndMusic,              
        .filters .js-prompter li.learnAndMusic > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .learnAndMusic > .wrapper a{
            background-image: url();
        }

        .likeInput.farmingFood,
        .mobileStartCategories .menu .farmingFood a,
        .filters .inputs .farmingFood,              
        .filters .js-prompter li.farmingFood > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .farmingFood > .wrapper a{
            background-image: url();
        }
        .likeInput.sport,
        .mobileStartCategories .menu .sport a,
        .filters .inputs .sport,              
        .filters .js-prompter li.sport > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .sport > .wrapper a{
            background-image: url();
        }
        .likeInput.wedding,
        .mobileStartCategories .menu .wedding a,
        .filters .inputs .wedding,
        .filters .js-prompter li.wedding > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .wedding > .wrapper a{
            background-image: url();
        }

        .likeInput.forFree,
        .mobileStartCategories .menu .forFree a,
        .filters .inputs .forFree,
        .filters .js-prompter li.forFree > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .forFree > .wrapper a{
            background-image: url();
        }
        .likeInput.animals,
        .mobileStartCategories .menu .animals a,
        .filters .inputs .animals,
        .filters .js-prompter li.animals > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .animals > .wrapper a{
            background-image: url();
        }
        .likeInput.estate,
        .mobileStartCategories .menu .estate a,
        .filters .inputs .estate,  
        .filters .js-prompter li.estate > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .estate > .wrapper a{
            background-image: url();
        }
        .likeInput.cars,
        .mobileStartCategories .menu .cars a,
        .filters .inputs .cars,
        .filters .js-prompter li.cars > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .cars > .wrapper a{
            background-image: url();
        }
        .likeInput.services,
        .mobileStartCategories .menu .services a,
        .filters .inputs .services,
        .filters .js-prompter li.services > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .services > .wrapper a{
            background-image: url();
        }
        .likeInput.job,
        .mobileStartCategories .menu .job a,
        .filters .inputs .job,
        .filters .js-prompter li.job > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .job > .wrapper a{
            background-image: url();
        }

        .likeInput.friends,
        .mobileStartCategories .menu .friends a,
        .filters .inputs .friends,
        .filters .js-prompter li.friends > .theHolder,         /* set icon for .hasIcon elements */
        .menuPC .friends > .wrapper a{
            background-image: url();
        }

body.homepage h1,
body.category h1{

}

.siteDescription-top,
.siteDescription-top{
    margin: 0 0 20px 0;
    font-size: 11rem;
    color: #999;
}
.siteDescription-top p,
.siteDescription-top p{

}
.siteDescription-bottom,
.siteDescription-bottom{
    font-size: 11rem;
    color: #999;
}






.mobileStartCategories{
    display: none; /* not on PC */
    margin-bottom: 25px;
}

.mobileStartCategories .menu{
    display: grid;
    grid-template-columns: repeat(20, 100px);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-column-gap: 5px;
    grid-row-gap: 5px;

    overflow-x: auto;
}

.mobileStartCategories .menu li{
    padding: 10px 5px;
    border-radius: 4px;
    background-color: var( --standardGrayBg );
}

.mobileStartCategories .menu li a{
    display: block;
    /* don't add "padding" here because there are icons */
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobileQueryTrigger{
    margin-bottom: 20px;
}













ul.listing{
    margin: 0 0 40px 0;
}


ul.listing li{
    background: #fff;
}


ul.listing li.spec,
ul.listing li.prest,
ul.listing li.galaxy{
    background: #fff6d9;
}

/* listX / galeryX / Jobx- setting grid areas */
ul.listing a.swipe{
    grid-area: image;
}
ul.listing .title{
    grid-area: title;
}
ul.listing .excerpt{
    grid-area: excerpt;
}
ul.listing .category{
    grid-area: category;
}
ul.listing .location{
    grid-area: location;
}
ul.listing .price{
    grid-area: price;
}
ul.listing .attributes{
    grid-area: attributes;
}
ul.listing .date{
    grid-area: date;
}
ul.listing .observe{
    grid-area: observe;
}

/* Don't show swipe dots on PC */
ul.listing .swipe .js-dots{
    display: none;
}


/* ========================== Positioning elements when display as .listX ==========================
*/

    ul.listing.listX .item{
        display: grid;
        grid-template-columns: 210px auto auto 1fr minmax(auto, 30px); /* width of image | content | star (favorite) */
        grid-template-rows: auto auto auto 1fr auto;
        align-content: start;   /* grid position in containter */
        align-items: start;     /* element position in grid (to top) */
        grid-row-gap: 0;
        grid-column-gap: 10px;
        grid-template-areas: 
        "image      title       title       title       observe"
        "image      price       price       price       ."
        "image      attributes  attributes  attributes  ."
        "image      excerpt     excerpt     excerpt     ."
        "image      date        location    category    .";
    }
    ul.listing.listX li.galaxy .item{
        grid-template-columns: 230px auto auto 1fr minmax(auto, 50px); /* width of image | content | star (favorite) */
    }

        ul.listing.listX li{
            padding-top: 15px;
            padding-bottom: 15px;
            border-top: 1px solid var( --standardGrayBg );
        }

        /* listX - item settings */
        ul.listing.listX .observe{
            justify-self: center;   /* horizontal */
            align-self: center;     /* vertical */
        }


        
/* ========================== END
*/





/* ========================== Positioning elements when display as .galeryX - 4 elements ==========================

        galeryX body.homepage
            - on PC display PROMOTED ads bigger than rest
            - on MOBILE display 2 COLUMNS

        galeryX body.category
            - on PC display PROMOTED ads bigger than rest
            - on MOBILE display 1 COLUMN
        

*/
    ul.listing.galeryX{
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: repeat(12, 1fr);
        grid-row-gap: 15px;
        grid-column-gap: 15px;
        margin: 0 0 40px 0;
    }
    /*
        To make bigger promoted clasiifieds by spannig grid
    */
    ul.listing.galeryX li{
        grid-column: span 3;
        box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
    }
        ul.listing.galeryX li.galaxy{
            grid-column: span 6;
            grid-row: span 2;
        }

    ul.listing.galeryX .item {
        /* for elements INSIDE .item -> image, price, .title... */
        display: grid;
        grid-template-columns: auto 1fr auto;                       /* 1fr to have observe align to right */
        grid-template-rows: auto auto auto auto auto auto 1fr auto; /*  */
        align-items: start;                                         /* element position in grid (to top) */
        grid-template-areas: 
        "image      image       image"
        "title      title       title"
        "price      price       observe"
        "attributes attributes  attributes"
        "excerpt    excerpt     excerpt"
        "category   category    category"
        "date       location    location";
    }

        /* listX - item settings */
        ul.listing.galeryX .observe{
            justify-self: end;   /* horizontal */
            align-self: center;     /* vertical */
        }

        /* don't show excerpt */
        ul.listing.galeryX .excerpt {
            display: none;
        }

        /* don't show date on HOMEPAGE */
        .homepage ul.listing.galeryX .attributes,
        .homepage ul.listing.galeryX .location,
        .homepage ul.listing.galeryX .date,
        .homepage ul.listing.galeryX .category{
            display: none;
        }


/* ========================== END
*/






/* 
    OCCASION!
*/
ul.listing li.occasion .title a:before {
    margin-right: 5px;
    vertical-align: middle;
    content: url();
}

ul.listing .title,
ul.listing .category,
ul.listing .price,
ul.listing .location,
ul.listing .attributes{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

ul.listing.galeryX .title,
ul.listing.galeryX .excerpt,
ul.listing.galeryX .category,
ul.listing.galeryX .price,
ul.listing.galeryX .observe,
ul.listing.galeryX .location,
ul.listing.galeryX .attributes,
ul.listing.galeryX .date{
    margin: 0px 8px 5px 8px;
}

ul.listing a.swipe{
    /* for icon "promo" | "prest" | "galaxy" */
    /* for Swipe - js galery rotator (I add by JS dots for swipe in each .swipe item) */
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}
ul.listing a.swipe .swipe-wrap{
    /* for image vertical centering if image is smaller than image place */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;        /* vertical center */
    justify-content: center;    /* horizontal center */
    background: var( --standardGrayBg );

    /* for "swipe" */
    overflow: hidden;
    position: relative;
}
    ul.listing a.swipe .swipe-wrap{
        height: 124px;              /* img inherit this */
        max-height: 124px;          /* img inherit this */
    }
        ul.listing.galeryX li.galaxy a.swipe .swipe-wrap{
            height: 276px;
            max-height: 276px;
        }
        
    ul.listing.listX a.swipe .swipe-wrap{
        height: 160px;              /* img inherit this */
        max-height: 160px;          /* img inherit this */
    }
        ul.listing.listX li.galaxy a.swipe .swipe-wrap{
            height: 170px;
            max-height: 170px;
        }

/* inscription width promotion level  "promo" | "prest" | "galaxy" */
ul.listing li.spec a.swipe:before,
ul.listing li.prest a.swipe:before,
ul.listing li.galaxy a.swipe:before{
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
}
    ul.listing li.spec a.swipe:before{
        content: url("img/promo-spec.png");
    }
    ul.listing li.prest a.swipe:before{
        content: url("img/promo-prest.png");
    }
    ul.listing li.galaxy a.swipe:before{
        content: url("img/promo-galaxy.png");
    }

ul.listing a.swipe img{
    display: block;
    height: auto;
    max-height: inherit;    /* get from parent .swipe-wrap */
}
    ul.listing a.swipe img{
        /*required*/
        max-width: 100%;

        /* for "swipe" */
        display: block;
        position: relative;
        overflow: hidden; 
        float: left;
        margin: 0; 
        /* don't add: border, padding, margin here (!) it will broke everything */
    }

    /* 
        On start show only first img - hide rest 
        Rest images are shown on mobile only when listing is shown as galeryX.
    */
    ul.listing a.swipe img:not(:first-child){
        display: none;
    }
    

ul.listing.listX .title,
ul.listing.galeryX li.galaxy .title{
    /* 
        2 lines for title in:
        - listX ( all )
        - galeryX (only GALAXY) because it take too much place
    */
    /* ??????????? 2 linie na str gł dać tylko do GALAXY w galeryX - reszta 1 linia bo zajmuje mniej miejsca*/
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-weight: 600;
    font-size: 16rem;
}
    ul.listing.listX .title{
        margin-top: 5px;
        margin-bottom: 3px;
        font-size: 16rem;
    }
        ul.listing.listX .title a{
            display: block;
        }
    ul.listing.galeryX .title{
        font-size: 14rem;
    }

ul.listing .excerpt{
    overflow: hidden;
    font-size: 13rem;  
}

ul.listing .attributes,
ul.listing .category,
ul.listing .date,
ul.listing .location{
    font-size: 12rem;
}
    ul.listing .category,
    ul.listing .date,
    ul.listing .location{
        color: var( --standardGrayFont );
    }
    ul.listing.listX .attributes{
        color: var( --standardGrayFont );
    }
    ul.listing .attributes span,
    ul.listing .category span{
        font-size: inherit;
        color: inherit;
    }
    ul.listing .attributes span:not(:last-child):after,
    ul.listing .category span:not(:last-child):after{
        margin: 0 8px;
        color: #ccc;
        
    }
        ul.listing .attributes span:not(:last-child):after{
            content: "•";
            font-weight: normal;/* for price */
        }
    
ul.listing.listX .attributes,
ul.listing.listX .price{
    margin-bottom: 7px;
}

ul.listing .price{
    color: #000;
    font-size: 14rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    ul.listing.galeryX li.galaxy .price{
        font-size: 16rem;
    }
    
/*
    tooltip element is made by javascript
    it has #tooltip id
*/
ul.listing .observe{
    position: relative; /* for mouse over cloud */
    width: 16px;        /* width of background image */
    min-height: 15px;   /* height of background image */
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url();
}
    ul.listing .observe.on{
        background-image: url();
    }

ul.listing .observe #tooltip{
    position: absolute;
    z-index: 1;
    bottom: calc(100% + 5px);
    padding: 3px 10px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-size: 11rem;
}

ul.listing #tooltip:after{
	content: '';
	position: absolute;
	bottom: -4px;
	left: calc(50% - 4px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 4px 0 4px;
    border-color: #000 transparent transparent transparent;
}










.classified .mainPhoto{
    /* for image "promo" | "prest" | "galaxy" */
    position: relative;
    padding: 3px 0; /* some space from top and bottom - look like border */
    background: var( --standardGrayBg );
    box-shadow: 0px 4px 6px -7px rgba(0,0,0,0.86);
}
    .classified .mainPhoto img{
        display: block;
        max-height: 45vh;
        max-width: 100%;

        margin: 0 auto;
    }

.classified .order{
    /* Just for order elements: 
        1. IMG, 
        2. H1 title, 
        3. Attributes 
        4. Descripton, 
        5. Detail, 
        6. User Actions 
    */
    display: flex;
    flex-direction: column;
}
.classified .actions{
    order: 1;
}
.classified .order h1{
    order: 2
}
.classified .order .attributes{
    order: 3;
}
.classified .order .description{
    order: 4;
}
.classified .order .details{
    order: 5;
}
.classified .order .sendMailToUserBox{
    order: 6;
}

.classified .actions{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

}
    .classified .actions a{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        padding: 8px 8px;
        margin-right: 5px;
        margin-bottom: 25px;
        font-size: 12rem;
        border-radius: 0px 0px 5px 5px;
        border: 1px solid var(--standardBorderColor);
        border-top: none; 
    }
    .classified .actions a:last-child{
        margin-right: 0;
        margin-left: auto;
    }
    .classified .actions a img{
        padding-right: 5px;
        flex-shrink: 0;
    }

.classified h1{
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
    .classified h1:before{
        margin: 0 5px 0 0;
        content: url('');
    }

.classified .details{
    margin-bottom: 45px;
    padding-top: 10px;
    border-top: 1px solid var(--standardBorderColor);
    color: #999;
    font-size: 11rem;
}
    .classified .details span{
        margin-right: 10px;
        white-space: nowrap;
    }

.classified .description{
    margin-bottom: 30px;
    line-height: 1.8;
}

.classified .attributes{
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    overflow: visible;
    margin-bottom: 20px;
}
    .classified .attributes dt{
        flex: 0 0 30%;
        line-height: 1.6;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #999;
    }
    .classified .attributes  dd {
        flex: 0 0 70%;
        line-height: 1.6;
        margin-left: auto;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .classified .price{
        font-size: 20rem;
    }

.classified .mobileContactButtons{
    display: none;
}

/*
    need this construction
    on mobile
    .user element is takent to modalWindow and shadow or border is unnecessary
*/
.classified .userTemplate,
.profile .userTemplate{
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid var(--standardBorderColor);
    background-color: #fff;
    box-shadow: 0px 0px 5px -4px rgba(0,0,0,0.75)
}

    .classified .userPrice,
    .profile .contact{
        text-align: center;
        font-size: 18rem;
    }

.classified .user .location,
.profile .user .location{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    
    margin-bottom: 20px;
}
    
    .classified .user .location img,
    .profile .user .location img,
    .profile .user .site img{
        margin-right: 10px;
    }

    .classified .user .location .city span,
    .profile .user .location .city span{
        display: block;
        font-size: 11rem;
        color: #999;
    }
    
.classified .user .icon,
.profile .user .icon,
.profile .user .logo{
    display: flex; /* for image centering */
    justify-content: center;
    align-items: center;
    margin: 0 auto 10px auto; 
}
    .classified .user .icon img,
    .profile .user .icon img{
        height: 65px;
        width: 65px;
        border: 1px solid #ccc;
        object-fit: cover;
        overflow: hidden;
        border-radius: 50%;
        background-color: #fff;
    }
    .profile .user .logo img{
        max-width: 100%;
        max-height: 80px;
    }

.classified .user .name,
.classified .user .phoneNr,
.profile .user .name{
    margin-bottom: 20px;
    text-align: center;
    color: #000;
}
    .classified .user .name div,
    .classified .user .phoneNr div,
    .profile .user .name div{
        font-size: 21rem;
    }
        .classified .user .phoneNr div{
            font-weight: bold;
        }
    .classified .user .name span,
    .profile .user .name span{
        color: #999;
        font-size: 11rem;
    }
/*
    Show contact nr and SMS only by JS
*/
.classified .user .contactButtons,
.profile .user .contactButtons{
    display: flex; /* display: flex; - change by JS */
    
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.classified .user .button-phone,
.classified .user .button-sms,
.classified .user .button-mail,
.classified .user .button-cancel,
.profile .user .button-phone,
.profile .user .button-sms,
.profile .user .button-mail{
    margin-bottom: 10px;
}
    .classified .user .js-showPhone,
    .profile .user .js-showPhone{
        font-size: 11rem;
    }

.classified .user .linkToprofile,
.profile .user .linkToprofile{
    display: block;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}

.classified .userTemplate .___hideOnPC{
    display: none;
}


.profile .user .site{
    display: block;
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */
    text-overflow: ellipsis; /* to do what you want. */

    margin-bottom: 20px;
    font-size: 12rem;
}

.profile .user .about{
    max-height: 90px;
    position: relative;
    overflow: hidden;
}

.profile .user .about .read-more{
    display: block;
    position: absolute; 
    bottom: 0; 
    left: 0;
    width: 100%;
    text-align: center; 
    margin: 0;
      
    /* "transparent" only works here because == rgba(0,0,0,0) */
    background: linear-gradient(360deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
}
  
.profile .user .about .read-more a{
    border-radius: 5px;
}





/*
    Main form template: Add classified, Contact to user, Contact to admin, Login
*/

.mainFormTemplate .fieldset .legend{
    margin-bottom: 20px;
    font-size: 20rem;
    font-weight: 600;
}

/*
    Based on global settings for .containter change view to center
    Form centering
*/

.mainFormTemplate .fieldRow {
    position: relative; /* for helper or validator info */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
    .mainFormTemplate .fieldRow > label{
        flex-basis: 20%;
        margin-top: 5px;
        padding-right: 20px;
        text-align: right;
        font-size: 13rem;
        font-weight: bold;
    }
    .mainFormTemplate .fieldRow .element,
    .mainFormTemplate .fieldRow .elementSubmit{
        position: relative; /* for .helper */
        flex-basis: 80%;
        vertical-align: baseline;
    }
        .mainFormTemplate .fieldRow .elementSubmit{
            padding-right: 30px;
            text-align: right;
        }


        body.login .elementSubmit{
            display: flex;/* for "pass recovery" && submit*/
            justify-content: space-between;
            align-items: center;
        }
    

.mainFormTemplate .fieldRow .long,
.mainFormTemplate .fieldRow .middle,
.mainFormTemplate .fieldRow .short{
    width: calc(100% - 30px); /* 30px - width of OK or ERROR img */
}
    .mainFormTemplate .fieldRow .long{
        max-width: 700px;
    }
    .mainFormTemplate .fieldRow .middle{
        max-width: 200px;
    }
    .mainFormTemplate .fieldRow .short,
    .mainFormTemplate .fieldRow .priceShort{
        max-width: 70px;
    }

/* Required field */
.mainFormTemplate .fieldRow > label span{
    margin-left: 1px;
    font-weight: 600;
    color: red;
}

.mainFormTemplate .fieldRow .counter{
    font-size: 12rem;
    color: #999;
}

/* vertical position text and radio || checkboxes, e.g. in price "sell, for free, negotation"*/
.mainFormTemplate input{
    vertical-align: baseline;
}

/* textarea height */
.mainFormTemplate .fieldRow #content{
    height: 25vh;
    min-height: 150px;
    vertical-align: top; /* for icon validator */
}

/* select list */
.mainFormTemplate .fieldRow select {
    padding: 2px 10px 2px 2px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    background: #fff; 
    font-size: 14rem;
}

.mainFormTemplate .fieldRow .agreementButton{
    position: absolute;
    left: -30px;
}
.mainFormTemplate .fieldRow .agreementLabel{
    display: block;
    position: relative;
    margin-left: 30px;
}

.mainFormTemplate .fieldRow .helper{
    position: absolute;
    top: 0px;
    background: tomato;
    display: none;
}




.slider{
    /*
		don't show on PC (only MOBILE)
        need margin at the bottom (height of button + some space) because at the bottom is button with position fixed! 
    */
	display: none;/*change it on MOBILE*/
    margin-bottom: calc( var( --slideFooterButtonHeight ) + 20px );
}
.slider ul li:not(:last-child){
    border-bottom: 1px solid var(--standardBorderColor);
}
    .slider ul li.item{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: stretch;   /* to have click area as height as possible */
        min-height: 55px;
    }

.slider ul li.item .label,
.slider ul li.item .js-icon{
    /*for text in label and .value*/
    display: flex;
    flex-wrap: nowrap;
    align-items: center;    /* vertical align  */

    /* for icons in category or location */
    background-repeat: no-repeat;
    background-position: left;
}
    .slider ul li.item .label{
        justify-content: space-between;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
    }
    .slider ul li.item .js-icon{
        justify-content: center;
        flex-grow: 0;
        flex-shrink: 0;
        width: 40px;
    }
        /* display the same as .js-icon - for vertical centering */
        .slider .js-clearX,
        .slider .js-arrowX{
            display: flex; /* default value for JS */
        }
    
    /* for icons */
    .filters .slider .search .label,
    .filters .slider .location .label,
    .filters .slider .category .label{
        padding-left: 25px;
    }
    .slider ul li.item .value{
        padding-left: 10px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        text-align: right;
        color: var(--standardGrayFont);
    }
.slider ul li.choice{
    padding: 15px 0 0 0;
}
.slider ul li.choice .buttons {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;

    overflow: hidden;
    border: 1px solid var(--standardBorderColor);
    border-radius: 5px;
}

/* only for central elements */
.slider ul li.choice .buttons div:not(:first-child):not(:last-child){
    border-left: 1px solid var(--standardBorderColor);
    border-right: 1px solid var(--standardBorderColor);
}

.slider ul li.choice .buttons div{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;

    padding: 10px 7px;
    text-align: center;
}

.slider ul li.choice .buttons div.isActive{
    font-weight: bold;
    background: var( --activeLinkColor );
    color: #fff;
}


/* 
    Tabs display "as tabs" only on mobile 
    On PC it display as normal site elements
*/
body.login .easyTabs{
        
}
body.login .easyTabs .tabs,
body.login .easyTabs .panels{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* vertical centering */
}
    body.login .easyTabs .tabs > li,
    body.login .easyTabs .panels > div{
        flex-shrink: 0;
        flex-grow: 1;
        flex-basis: 50%;
    }
        body.login .easyTabs .tabs > li{
            text-align: center;
        }
        body.login .easyTabs .panels > div:first-child{
            padding-right: 50px;
            border-right: 1px solid var( --standardBorderColor );
        }



.test{
    border-bottom: 1px solid var( --standardBorderColor );
}

body.login {

}