/*
.search-results-page {
    max-width: 750px;
    margin: auto;
}
*/
body {
    background-color: #f5f7f7;
}
.body-content {
    width: 100%;
}
.header2 .header-content {
    max-width: none;
}

.search-results-main {

}

h1 {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 20px;
    color: #444;
}
.h1-extra,
.white-panel {
    border: 1px solid #ececec;
    background-color: white;
    border-radius: 2px;
    color: black;
    /*margin-top: -10px;
    margin-bottom: 20px;
    font-size: 13px;*/
}

.subcategory-links {
    margin: 0 0 30px;
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.3em;
    overflow: auto;
}
.subcategory-links > div {
    margin-bottom: 3px;
}
.subcategory-links a {
    max-width: 180px;
    display: inline-block;
}
.subcategory-links a em {
    font-style: normal;
}
.subcategory-links .count {
    display: inline-block;
    color: #8a8a8a;
    font-size: 11px;
    margin-left: 5px;
    vertical-align: bottom;
    padding-bottom: 2px;
}

.results-status {
    margin: 0 0 15px;
    /* clearfix equivalent */
    display: inline-block;
    width: 100%;
}
.results-status .btn-show-filters {
    display: none;
    padding-left: 16px; /*more narrow*/
    padding-right: 16px;
}
.results-status .btn-show-filters .fa {
    margin-top: 0;
}
.results-status .btn-show-filters .filters-count {

}
.results-status .count {
    float: left;
    font-weight: bold;
    margin-top: 10px;
    font-size: 1.2em;
    color: #555;
}
.results-status .sorting {
    float: right;
    margin-top: 12px;
}
.results-status:not(.with-sorting) .sorting {
    display: none;
}
.results-status .sorting a span {
    text-decoration: underline;
    text-decoration-style: dotted;
}
.results-status .sorting .fa {
    margin-left: 4px;
    font-size: 18px;
}
.search-results-content.busy::before {
    /*background-position: center 20vh;
    background-color: rgba(255, 255, 255, 0.25);*/
    /* hide preloader animation */
    background: rgba(255, 255, 255, 0.25);
}

.btn-show-map {
    display: block;
    width: 100%;
    background: white url(/img/search/map-button.png) no-repeat center center !important;
    background-size: cover !important;
    text-shadow: 0 0 3px white, 0 0 7px white, 0 0 20px white !important;
    color: #019CDE !important;
    border: 1px solid #019CDE;
    /* increase height and font */
    font-size: 15px;
    margin: 0 0 15px;
    /*padding: 12px 22px;*/
    line-height: 36px;
}
.subcategory-links + .btn-show-map {
    margin-top: -15px;
}
.btn-show-map .fa {
    font-size: 36px;
}

.price-slider {
    margin: 10px auto 20px auto;
    padding: 0 14px 0 19px;
}
/* make it larger */
.price-slider .irs-grid-text {
    font-size: 11px;
    line-height: 11px;
    bottom: 10px;
    color: #737373;
}

/******* Booking Filters Panel ********/
.booking-filters {
    background-color: #ffc31e;
    padding: 10px 12px;
    margin: 20px 0 30px;
    border-radius: 6px;
    box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
    position: relative;
}
.booking-filters > * {
    display: inline-block;
}
.booking-filters .form-control {
    height: 38px;
    padding: 3px 8px;
    border: none;
    /*box-shadow: none;
    -webkit-box-shadow: none;*/
    box-shadow: 0 0 0 1px #eab31c;
    -webkit-box-shadow: 0 0 0 1px #eab31c;
    color: #333;
    cursor: pointer;
}
.booking-filters .date {
    margin-right: 10px;
}
.booking-filters .date input {
    width: 190px;
    position: relative;
    background: white url(/img/custom-inputs/calendar-icon.png) 94% center no-repeat no-repeat;
    background-size: 16px;
    /*background-position: right 13px center;*/
}
.booking-filters .date input.atten {
    background-color: #ff4848;
    color: white;
}
.booking-filters .date.focus input {
    box-shadow: 0 0 0 3px #00a3f4;
}
/*.booking-filters .date input::after {
    content: '';
    position: absolute;
    right: 5px;
    background: white url(/img/custom-inputs/calendar-icon.svg) right center no-repeat no-repeat;
    background-size: 16px;
    opacity: 0.6;
}*/
.booking-filters .guests {
    width: 130px;
    margin-right: 16px;
}
.booking-filters .checkboxes {
}
.booking-filters .checkboxes .chk {
    display: inline-block;
    color: #4e3d00;
    margin-bottom: 0;
    margin-right: 14px;
}
.booking-filters .checkboxes .chk label {
    padding-left: 26px;
}
.booking-filters .chk input[type=checkbox] ~ label:before {
    border-color: #b1b1b1;
}
.booking-filters .btn-search {
    float: right;
    font-size: 15px;
    text-transform: uppercase;
    padding-left: 35px;
    padding-right: 35px;
    margin: -1px 0;
    height: 40px;
    outline: none;
    background-color: #00AEFF;
    background-image: linear-gradient(to top, #0098e9 0%, #00AEFF 100%);
}
.booking-filters .btn-search:hover {
    background-image: linear-gradient(to top, #008ddf 0%, #00a4f5 100%);
}
.booking-filters .btn-search:active {
    margin-top: 0;
}
.booking-filters .btn-search.blinking {
    animation: btn-blinker 0.2s linear 2;
}
@keyframes btn-blinker {
    0% {}
    50% {
        background-color: #00da28;
        background-image: none;
    }
}
/*@keyframes btn-blinker {
    0% {opacity: 1}
    50% {opacity: 0.3;}
}*/

@media (max-width: 1000px), (min-width: 1201px) and (max-width: 1650px) {
/* more compact */
    .booking-filters .date input {
        width: 140px;
    }
    .booking-filters .checkboxes {
        vertical-align: top;
        height: 38px;
    }
    .booking-filters .checkboxes .chk {
        display: block;
        margin: 0;
        /*zoom: 0.85; not supported by FF*/
        height: 20px;
        font-size: 15px;
        transform: scale(0.85);
        transform-origin: top left;
    }
    .booking-filters .checkboxes .chk + .chk {
        margin-top: 1px;
    }
    .booking-filters .checkboxes .chk label {
        line-height: 18px;
        vertical-align: top;
    }
    .booking-filters .guests {
        width: 105px;
    }
}

/******* Booking Filters: calendar popup customizations ********/
.booking-filters .my-calendar-popup {
    display: none;
}


/******* Booking Filters: common ********/
.booking-filters-m .inner-panel,
.booking-filters-edit .inner-panel {
    background-color: white;
    border-radius: 3px;
    box-shadow: 0 1px 3px #e5a91e;
    border: 1px solid #ecb41b;
    overflow: hidden;
    cursor: pointer;
}
.booking-filters-m .gray-row,
.booking-filters-edit .gray-row {
    /*height: 36px;*/
    background-color: #F3F3F3;
    border-top: 1px solid #dbdbdb;
    font-size: 13px;
    padding: 6px 10px 7px;
    background-image: linear-gradient(to bottom, #eeeeee, #F3F3F3 3px);
}
/******* Booking Filters: Mobile View Panel ********/
.booking-filters-m {
    display: none;
    padding: 14px 14px;
    margin: -8px 0 18px;
    background-color: #ffc31e;
}
.booking-filters-m .inner-panel {

}
.booking-filters-m .dates {
    color: #333;
    font-size: 14px;
    height: 44px;
    line-height: 42px;
}
.booking-filters-m .dates > * {
    vertical-align: middle;
}
.booking-filters-m .cal-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(/img/custom-inputs/calendar-icon.png);
    background-size: 16px 16px;
    margin: 0 5px 0 10px;
}
.booking-filters-m .in,
.booking-filters-m .out {
    font-weight: bold;
}
.booking-filters-m .dates .nights {
    margin-left: 4px;
    display: none;
}
.booking-filters-m .dates .atten {
    margin-left: 4px;
    /*color: #ff0000;
    font-weight: bold;*/
    color: #8c8c8c;
}
/* if 'selected' assigned, show nights instead of warning */
.booking-filters-m .dates.selected .nights {
    display: inline-block;
}
.booking-filters-m .dates.selected .atten {
    display: none;
}
.booking-filters-m .extra {

}
.booking-filters-m .extra > * {
    display: inline-block;
}
.booking-filters-m .extra .guests {
    /*line-height: 1.2;*/
    /*width: 35%;*/
    font-weight: bold;
}
.booking-filters-m .extra .guests em {
    font-style: normal;
    /*font-size: 14px;*/
    /*display: block;*/
}
.booking-filters-m .extra .sep {
    color: gray;
    margin: 0 8px;
}
.booking-filters-m .extra .children.selected,
.booking-filters-m .extra .animals.selected {
    font-weight: bold;
}
.booking-filters-m.loading * { /* hide text to prevent blinking */
    color: transparent !important;
}
/*.booking-filters-m .extra .sep {
    width: 1px;
    margin: 10px 0;
    background-color: #c3c3c3;
    height: 34px;
    vertical-align: top;
}*/
/*.booking-filters-m .extra .options {
    padding: 8px 8px;
    width: 60%;
}*/
@media (max-width: 359px) {
    .booking-filters-m .extra .sep {
        margin: 0 4px;
    }
}

/* toggle desktop/mobile */
@media (max-width: 750px) {
    .booking-filters {
        display: none;
    }
    .booking-filters-m {
        display: block;
    }
}

/******* Booking Filters: Mobile Edit Panel ********/
.booking-filters-edit {
    display: none;
    padding: 14px 14px 1px;
    margin: -8px 0 100px;
    background-color: #ffc31e;
}
.booking-filters-edit .inner-panel {
    margin-bottom: 15px;
    padding: 10px 6px;
}
.booking-filters-edit .dates {
    padding: 0;
    position: relative;
    overflow: unset;
}
.booking-filters-edit .dates .in-out {
    font-size: 0;
}
.booking-filters-edit .dates .in-out > * {
    display: inline-block;
    width: 49.6%;
    padding: 8px 6px;
    font-size: 13px;
    /*color: black;*/
}
.booking-filters-edit .dates .in-out .out {
    border-left: 1px solid #dedede;
    padding-left: 5px;
}
.booking-filters-edit .dates .in-out em {
    font-style: normal;
    font-weight: bold;
    display: block;
    font-size: 15px;
}
.booking-filters-edit .dates .status-row {
    text-align: center;
    position: relative;
    border-radius: 0 0 3px 3px; /*duplicate due to overflow and triangle*/
}
.booking-filters-edit .dates .nights,
.booking-filters-edit .dates .clear {
    display: none;
}
.booking-filters-edit .dates .status {
    display: inline-block;
    font-weight: bold;
}
.booking-filters-edit .dates.selected .nights {
    display: inline-block;
}
.booking-filters-edit .dates.selected .status {
    display: none;
}
.booking-filters-edit .dates.selected .clear {
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
    color: #afafaf;
    text-decoration: underline !important;
}
.booking-filters-edit .calendar-wrapper {
    padding-top: 0;
}
.booking-filters-edit .my-calendar .status {
    display: none;
}
.booking-filters-edit .extra {
    padding-right: 1px;
}
.booking-filters-edit .extra > div {
    display: inline-block;
    /*width: 31%;*/
    white-space: nowrap;

}
.booking-filters-edit .extra .sep {
    /*display: inline-block;
    width: 1px;
    height: 30px;
    background-color: #e4e4e4;
    vertical-align: top;*/
}
.booking-filters-edit .extra select {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-weight: bold;
    max-width: 92px;
    font-size: 15px;
}
.booking-filters-edit .extra .chk {
    margin-left: 7px;
    margin-bottom: 0;
}
.booking-filters-edit .extra .chk label {
    padding-left: 24px;
}
.booking-filters-edit .extra .chk label:before {
    background: #F3F3F3;
}
.booking-filters-edit .buttons {
    margin: 25px 0 25px;
}
.booking-filters-edit .buttons .btn-flat {
    width: 100%;
    height: 48px;
    font-size: 14px;
    box-shadow: 0 2px 3px #e5a91e;
}
/*triangle*/
.booking-filters-edit .dates:before,
.booking-filters-edit .dates:after {
    content: "";
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    width: 0;
}
.booking-filters-edit .dates:before {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 9px solid #ecb41b;
    margin-left: -12px;
    bottom: -10px;
    z-index: 4;
}
.booking-filters-edit .dates:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 9px solid #F3F3F3;
    margin-left: -10px;
    bottom: -9px;
    z-index: 5;
}

/******* Filters Panel ********/

.filters {
    float: left;
    width: 245px;
    /*background-color: #F4F5F6;
    background-color: #edeff3;*/
    background-color: #ECF0F1;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
}
.filters .filters-header {
    text-align: left;
    padding: 0 18px;
    text-transform: uppercase;
    color: white;
    background-color: #009EE2;
    font-size: 15px;
    font-weight: bold;
    height: 45px;
    line-height: 45px;
}
.filters .filters-header .icon-gear {
    margin-right: 12px;
    position: relative;
    top: -1px;
}
.filters .filters-header .overlay-control,
.btn-view-results.overlay-control {
    display: none;
}
.filters .filters-header .btn-subscribe {
    float: right;
    display: inline-block;
    color: white;
    margin-right: -7px;
    border-radius: 3px;
    padding: 5px;
    line-height: 20px;
    margin-top: 6px;
}
.filters .filters-header .btn-subscribe i {
    font-size: 22px;
    margin: 0 0 1px 0;
}
.filters .filters-header .btn-subscribe:hover {
    color: white;
    background-color: rgba(255,255,255,0.6);
}
.filters > .content {
    padding: 2px 15px 1px;
    border: 1px solid #d6d6d6;
    border-top: none;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.filter {
    padding: 14px 0 19px;
}
.filter:not(:last-child) {
    border-bottom: 1px solid #d6d6d6;
}
.filter.no-ui {
    display: none !important;
}
.filter > label {
    width: 100%;
    font-weight: bold;
    color: #2d2d2d;
    margin-bottom: 5px;
    cursor: pointer;
}
.filter > label i {
    float: right;
    color: #8E9394;
    padding: 0 2px;
    margin-bottom: -2px;
    cursor: pointer;
}
.filter > label:hover,
.filter > label:hover i {
    color: #009EE2;
}
.filter > label i:before {
    content: "\f106";
}
.filter.collapsed > label i:before {
    content: "\f107";
}
.filter fieldset {
    padding-top: 2px;
}
.filter.collapsed:not(.sliding-now) fieldset {
    display: none;
}
.filter.collapsed:not(.sliding-now) {
    padding-bottom: 14px; /* set equal to top padding */
}
.filter.collapsed:not(.sliding-now) label {
    margin-bottom: 0;
}

/* custom controls: for now keep them here */
.filter select,
.filter input[type=text],
.filter input[type=number] {
    border-radius: 3px;
    height: 36px;
}
.filter select:not(:focus),
.filter input:not(:focus)[type=text],
.filter input:not(:focus)[type=number] {
    box-shadow: none;
    -webkit-box-shadow: none;
}
.filter fieldset .form-control-inline {
    padding: 2px 2px;
    height: 26px;
}
.filter > label .form-control-inline {
    color: black !important;
    background-color: #DBECF4;
    height: 20px;
    width: 33px; /*initial, for $ */
    border: none;
    padding: 0 2px 0 4px;
    font-size: 13px;
    font-weight: normal;
    margin-left: 3px;
}
.filter > label .form-control-inline option {
    background-color: white;
}
.filter > label .form-control-inline:focus {
    outline: none;
    box-shadow: none;
}
.filter abbr {
    display: inline-block;
    border: none;
    width: 11px;
    height: 11px;
    background: transparent url(/img/hint-question-mark.png) no-repeat 0 0;
    background-size: 11px 11px;
    margin-left: 2px;
    position: relative;
    top: 1px;
}

.filter .with-apply-button {
    width: 100%;
}
.filter .with-apply-button input[type=number] {
    padding-left: 8px;
    padding-right: 8px;
}
.filter .with-apply-button button {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    border: none;
    padding: 0;
    margin: 0 0 0 10px;
    background: #009EE2 url(/img/custom-inputs/btn-arrow-white.png) no-repeat 9px 10px;
    background-size: 19px 15px;
}
.filter .with-apply-button button:disabled {
    border: 2px solid #E1E2E3;
    background: transparent url(/img/custom-inputs/btn-arrow-gray.png) no-repeat 9px 10px;
    background-size: 19px 15px;
    background-origin: border-box; /*compensate border*/
}
.filter .with-apply-button button:not(:disabled):hover {
    background-color: #0090ca;
}

/* range-inputs */
/* columns with inputs */
.filter .range-inputs td:nth-child(1),
.filter .range-inputs td:nth-child(3) {
    width: 50%;
}
/* dash */
.filter .range-inputs td:nth-child(2) {
    padding: 0 5px;
}
.filter .range-inputs + .chk {
    margin-top: 10px;
}
.filter .chk:last-child {
    margin-bottom: 0;
}

/* single-input */
/* column with input */
.filter .single-input td:nth-child(1) {
    width: 95%;
}

.filter .indent {
    margin-left: 28px;
}
.filter select.indent {
    width: calc(100% - 28px);
    margin-top: -2px;
    padding-left: 6px !important;
}
.filter-novostroyType .chk label > span {
    position: relative;
    top: -3px;
}

.filter .irs-with-grid {
    margin-bottom: -10px;
}
.filter .irs-single {
    /* decrease padding to fit to fit 'Любое' */
    padding: 1px 3px;
}
.filter .walk-label {
    display: none;
    font-size: 11px;
    font-style: italic;
    margin: 5px 0 -5px;
}

.filter-area ul {
    list-style-type: none;
    padding-left: 1px;
    margin: 0;
}
.filter-area ul li {
    margin-bottom: 4px;
    position: relative;
}
.filter-area ul a.capitalized {
    display: inline-block;
}
.filter-area ul a.capitalized:first-letter {
    text-transform: uppercase;
}
.filter-area ul .delete-icon {
    color: red;
    font-size: 16px;
    position: absolute;
    top: 2px;
    right: 4px;
    cursor: pointer;
    opacity: 0.7;
}
.filter-area ul .delete-icon:hover {
    opacity: 1;
}
.filter-area .add-radius {
    margin-top: 6px;
    font-size: 0.9em;
}

.btn-view-results {
    display: none;
}

/******* Filter Chain ********/

.filter-chain {
    margin: 0;
    padding: 0;
}
.filters .filter-chain {
    display: none;
    border-bottom: 1px solid #E8E9E9;
    padding: 15px 15px 7px;
}
.filter-chain li {
    background: #DCF4FF;
    color: #555;
    /*color: #0071B3;*/
    font-size: 13px;
    line-height: 1.85;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    padding: 0 0 0 8px;
    margin: 0 7px 2px 0;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
.filter-chain li:not(.reset):hover {
    color: #009EE2 !important;
}
.filter-chain li.reset {
    background-color: white;
    border: 1px solid #FBD6D3;
    padding-right: 8px;
}
.filter-chain li.reset:hover {
    /*background-color: #FFE6E6;*/
    color: #ffaba4;
}
.filter-chain li:not(.reset):after {
    content: "\f00d"; /* close icon */
    display: inline-block;
    font: normal normal normal 14px/1.85 FontAwesome;
    font-size: inherit;
    padding: 0 5px 0 4px;
    margin-left: 8px;
    color: #009EE2;
    border-left: 1px solid #B7E0F4;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/******* Search Results Panel ********/
.search-results {
    margin-left: 265px;
}

.first-visit-panel {
    border-color: #5bc700;
}
.first-visit-panel.black {
    border-color: black;
    background-color: black;
    color: white;
    padding-bottom: 25px;
}
.first-visit-panel .title {
    font-weight: bold;
    font-size: 1.3em;
}
.first-visit-panel ul {
    list-style: none;
    margin: 20px 0 35px;
    padding-left: 45px;
    font-size: 1.1em;
    line-height: 1.1;
}
.first-visit-panel ul li {
    margin-bottom: 14px;
    position: relative;
}
.first-visit-panel ul li:before {
    font: normal normal normal 18px/1 FontAwesome;
    content: '\f00c';
    color: #00e800;
    position: absolute;
    left: -28px;
}
.first-visit-panel a {
    color: #6cd2ff;
}

/******** Panorama *********/
.panorama {
    margin-bottom: 15px;
    box-shadow: 7px 7px 11px rgba(0,0,0,0.1);
    position: relative;
}
.panorama img {
    max-width: 100%;
    max-height: 300px;
    border: 0;
    cursor: pointer;
}
.panorama:after {
    content: 'Случайное фото Черноморска';
    position: absolute;
    bottom: 7px;
    right: 12px;
    color: white;
    font-size: 11px;
    /*font-weight: bold;*/
    text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    opacity: 0.7;
}

/******** Ad *********/

.ad {
    display: table;
    width: 100%;
    position: relative;
    /*border: 1px solid #e5e5e5;*/
    /* border-radius: 3px; */
    margin-bottom: 20px;
    box-shadow: 0 1px 1px #a6a8ab;
    -webkit-box-shadow: 0 1px 1px #a6a8ab;
    /*border-collapse: separate;*/
    -webkit-transition: opacity 0.8s ease;
    transition: opacity 0.8s ease;
    overflow: hidden;
}

.ad .top-label {
    display: block;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 90px;
    background-size: 100%;
    background-image: url(/img/search/top/top-label.png);
}
.ad .top-label-2 { /*bottom*/
    display: block;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 87px;
    height: 29px;
    background-size: 100%;
    background-image: url(/img/search/top/top-label-2.png);
}

.ad .photo-container {
    display: table-cell;
    width: 44%;
    height: 280px;
    /*default image*/
    background: no-repeat scroll center center white;
    background-size: cover;
    position: relative;
    cursor: pointer;
}

.ad .photo-container .caption {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    background-color: rgba(255,255,255,0.7);
    padding: 8px 0;
    position: absolute;
    bottom: 0;
    /* center */
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 80px;
    text-align: center;
}

/* also see .ad-search-preview in ad-create.css */
.ad .photo-container.no-photo {
    background-image: url(/img/no-photo.png);
    background-color: #ececec;
    border-right: 1px solid gainsboro;
}
.ad .photo-container .alt-photo {
    position: absolute;
    right: 1px;
    bottom: 1px;
    max-width: 100px;
    max-height: 90px;
    border: 1px solid white;
    box-shadow: 0 0 4px black;
}
.ad .photo-container .alt-photo.flat {
    right: 0;
    bottom: 0;
    border-width: 1px 0 0 1px;
    box-shadow: -1px -1px 1px rgba(0,0,0,0.4);
    box-shadow: none;
}

/*
.ad .no-photo {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0.8;
    background-color: white;
    text-align: center;
    font-size: 20px;
    color: #b5b5b5;
}
*/

.ad .content {
    display: table-cell;
    height: 100%;
    padding: 18px 18px 55px 24px; /* 55px due to absolute pos. button */
    background-color: white;
    line-height: 1.6em;
    position: relative;
    vertical-align: top;
    border-top: 1px solid #ebebeb;
}

.ad .realtor-badge {
    background-color: #ffa600;
    color: white;
    position: absolute;
    top: 5px;
    right: 15px;
    padding: 2px 6px 3px;
    font-size: 11px;
}
.ad .realtor-badge .fa {
    font-size: inherit;
    color: white;
    margin-right: 3px;
}

.ad .realtor-spacer {
    height: 3px;
}

.ad .type-label {
    color: #a7a7a7;
    font-size: 13px;
    margin: -9px 0 -2px;
}
.ad .type-label.bottom {
    margin: -2px 0 -5px;
}
.ad .type-label .fa {
    font-size: 14px;
    color: #bbbbbb;
}

.ad .location,
.ad .what {
    font-weight: bold;
    font-size: 15px;
    /*color: #4a4e4f;*/
    color: #18759c;
}
.ad .what {
    font-size: 17px;
}
.ad .location:hover,
.ad .what:hover {
    /*color: black;*/
    color: #0095d4;
}

.ad.GARAZH .location,
.ad.DACHA .location {
    /*long, koop.*/
    font-size: 15px;
}
.ad.KOMMER .location,
.ad.NOMER .location,
.ad.HOSTEL .location,
.ad.KOMNATA.DAILY_RENT .location {
    font-size: 14px;
    color: #717171;
    font-weight: normal;
}

.ad .location .megapolis-arrow {
    font-size: 16px;
    position: relative;
    top: -1px;
    margin: 0 3px;
}

.ad .rayon {
    font-size: 11px;
    font-weight: bold;
    margin-left: 7px;
    color: gray;
    position: relative;
    top: -1px;
}

.ad .price-row {
    margin: 20px 0 25px 0;
}
.ad .price-row .price {
    font-weight: 900;
    font-size: 30px;
    color: #31c702;
    white-space: nowrap;
    /* top padding needed when moved on new line */
    padding-top: 5px;
    display: inline-block;
}
.ad .price-row .square-total {
    font-size: 22px;
    font-weight: normal;
    color: black;
    margin-right: 30px;
}
.ad.GARAZH .price-row .square-total {
    font-size: 20px;
}
.ad .with-price-hint .price-row .square-total,
.ad.GARAZH .price-row .square-total {
    margin-right: 20px;
}
.ad .price-row .square-total .units {
    margin-left: 4px;
}
.ad .price-row .square-total .x {
    margin: 0 1px;
}
.ad .price-row .square-total img.garazh-car-type {
    top: -2px;
    margin-right: 15px;
    cursor: help;
}
.ad .price-row .square-total .garazh-size .about {
    font-size: 22px; /* '~' char looks bad on 20px size */
}
.ad .price-row .price-hint {
    position: relative;
    top: -5px;
    margin-left: 5px;
    cursor: help;
}
.ad .price-row .min-rent-days-hint {
    margin-left: 15px;
    top: -4px;
}
.ad .price-row .min-rent-days-hint.suppressed {
    text-decoration: line-through;
}
.ad .price-row .extra-payments-hint .heater-icon {
    width: 18px;
    height: 12px;
    background-image: url(/img/rent/heater-black-icon.png);
    display: inline-block;
    background-size: 18px 12px;
    position: relative;
    top: 2px;
    margin-left: 2px;
}
.ad .price-row .label-default {
    color: #41484e;
    background-color: #f0f2f4;
}
.ad .price-row .price-per-square-hint {
    margin-left: 18px;
}
.ad.RENT .price-row .price-per-square-hint {
    margin-left: 5px;
    top: -3px;
}
.ad .price-row .price-per-square-hint span {
    margin-left: 3px;
}

.ad .square em {
    margin-left: 5px;
}
.ad .square em .s-sep {
    padding: 0 2px;
}

.ad em {
    font-weight: bold;
    font-style: normal;
}

.ad .room-params > * {
    display: inline-block;
}
.ad .room-params > *:not(:last-child) {
    margin-right: 20px;
}

.ad .floor em {
    display: inline-block;
    vertical-align: bottom;
}
.ad .floor em .floor-sep-short {
    display: none;
}

.ad .sea-distance em {
    position: relative;
    margin-left: 3px;
}
.ad .distance-text {

}
.ad .distance-indicator {
    width: 45px;
    height: 3px;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -1px;
}
.ad .distance-indicator.solid {
    background-color: #EFEFEF;
}
.ad .distance-indicator.solid span {
    display: block;
    height: 3px;
    min-width: 2px;
}
.ad .distance-indicator.solid.ZONE_1 span {
    background-color: #00C613;
}
.ad .distance-indicator.solid.ZONE_2 span {
    background-color: #FFD800;
}
.ad .distance-indicator.solid.ZONE_3 span {
    background-color: #ffa546; /*a bit fade*/
}

/*
.ad .distance-indicator.seg3 span {
    float: left;
    width: 13px;
    height: 3px;
    margin-right: 2px;
    background-color: #EFEFEF;
}
.ad .distance-indicator.seg3.ZONE_1 span.z1 {
    background-color: #00C613;
}
.ad .distance-indicator.seg3.ZONE_2 span.z1,
.ad .distance-indicator.seg3.ZONE_2 span.z2 {
    background-color: #FFD800;
}
.ad .distance-indicator.seg3.ZONE_3 span.z1,
.ad .distance-indicator.seg3.ZONE_3 span.z2,
.ad .distance-indicator.seg3.ZONE_3 span.z3 {
    background-color: #FF8300;
}
*/


.ad .garazh-badge {
    margin: 0 8px 0 0;
    display: inline-block;
    padding: 0 7px;
    border: 1px solid #0a5600;
    border-radius: 10px;
    font-size: 0.9em;
    line-height: 1.5;
}
.ad .garazh-badge:before {
    content: "\f00c";
    font: normal normal normal 16px FontAwesome;
    color: #14a214;
    margin-right: 4px;
}
.ad .garazh-badge-2 {
    display: inline-block;
    line-height: 14px;
}
.ad .garazh-badge-2:before {
    content: "\f00c";
    font: normal normal normal 12px FontAwesome;
    color: white;
    margin-right: 4px;
}

.ad .comfort {
    margin: 5px 0 5px;
}
/*.ad .comfort .inner {
    border: 1px dashed #808080;
    padding: 1px;
}*/
.ad .comfort img {
    max-width: 24px;
    max-height: 24px;
    margin-right: 3px;
    cursor: help;
}

.ad .description {
    margin: 20px 0 20px 0;
    /*padding-left: 14px;
    border-left: 3px solid #04c0e8;*/
}

.ad .description .fa {
    float: left;
    cursor: default;
    color: #3cb6f1;
    font-size: 20px;
}
/*.ad .description i {
    color: #6bbee6;
    font-size: 35px;
    float: left;
    font-weight: bold;
}*/
.ad .description span {
    margin-left: 26px;
    display: block;
    line-height: 1.4;
}
.ad .description .duration {
    font-style: normal;
    font-size: 12px;
    font-weight: bold;
    color: #00af7c;
}
.ad .description .duration.until-summer {
    color: #af0000;
}

.ad .free-dates {
    font-size: 12px;
    font-weight: bold;
    margin: -12px 0 8px;
}
.ad .free-dates .fa {
    font-size: 14px;
    margin-right: 1px;
    position: relative;
    top: -1px;
}
.ad .free-dates .red {
    color: orangered;
}
.ad .free-dates .green {
    color: #00b700;
}
.ad .free-dates .gray {
    color: #c7c7c7;
}


.ad .btn-details {
    position: absolute;
    left: 24px;
    bottom: 18px;
}
.ad .btn-details .fa {
    font-size: 16px;
    position: relative;
    top: 6px;
}

.ad .no-agencies-hint {
    padding: 3px 5px;
    color: white;
    background-color: #00a500;
    font-size: 11px;
    display: inline-block;
    position: absolute;
    bottom: 17px;
    left: 200px;
    line-height: 1.1em;
    font-weight: bold;
}

.ad .ad-btns {
    position: absolute;
    right: 18px;
    bottom: 16px;
}
.ad .ad-btns a {
    margin-left: 12px;
}
.ad .ad-btns .edit-link,
.ad .ad-btns .btn-zoom-to-pin {
    color: #b9b9b9;
    vertical-align: middle;
}
.ad .ad-btns .edit-link .fa {
    font-size: 22px;
}
.ad .ad-btns .edit-link.for-owner .fa {
    /*color: #4c5355;*/
    color: orange;
    font-size: 2em !important;
}
.btn-map {
    display: none;
}
.btn-map2 {
    display: none;
}
.btn-map3 {
    display: none;
}

.user-note-placeholder {
    height: 8px;
}
.user-note {
    position: absolute;
    top: 8px;
    width: 100%;
}
.user-note .rating-stars {
    float: left;
    position: relative;
    top: -1px;
}
.user-note-text {
    display: inline-block;
    max-width: 91%;
    font-size: 11px;
    font-weight: bold;
    background-color: yellow;
    line-height: 1.3em;
    color: #333;
}
.user-note.with-rating .user-note-text {
    float: left;
    margin-left: 5px;
    max-width: calc(91% - 95px);
}

.no-ads-found {
    margin: 50px auto 50px;
    text-align: center;
}

.realtor-ads-separator {
    margin: 30px auto 15px;
}
.realtor-ads-separator .ads-count {
    font-weight: bold;
    margin-top: 13px;
}
.realtor-ads-separator .stripes {
    height: 14px;
    background: url(/img/search/realtors-red-stripes.png) repeat-x ;
    background-size: 34px 14px;
}

.subscribe-panel {
    position: relative;
    margin: 55px 0 55px;
    font-size: 13px;
    background-color: white;
    padding: 12px 10px 15px;
    border-top: 1px solid #ebebeb;
    border-left: 3px solid #5BC0DE;
    box-shadow: 0 1px 1px #a6a8ab;
    -webkit-box-shadow: 0 1px 1px #a6a8ab;
}
.subscribe-panel > img {
    position: absolute;
    left: 20px;
    width: 55px;
}
.subscribe-panel .panel-content {
    margin-left: 84px;
}
.subscribe-panel .title {
    font-weight: bold;
    margin-bottom: 4px;
}
.subscribe-panel .subscribe-link .fa {
    font-size: 13px;
    position: relative;
    top: -1px;
    margin: 0 2px 0 0;
}
.subscribe-panel .btn-close-x {
    color: #d6d6d6;
    top: 7px;
}

.subscribe-panel.large {
    font-size: 14px;
    min-height: 135px;
}
.subscribe-panel.large > img {
    position: absolute;
    width: auto;
}
.subscribe-panel.large.v1 > img {
    left: 20px;
    max-width: 90px;
}
.subscribe-panel.large.v2 > img {
    left: 25px;
    max-width: 50px;
}
.subscribe-panel.large .title {
    margin-bottom: 8px;
}
.subscribe-panel.large.v1 .panel-content {
    margin-left: 125px;
}
.subscribe-panel.large.v2 .panel-content {
    margin-left: 80px;
}
.subscribe-panel .radar-text {
    display: none;
}
.subscribe-panel img.radar {
    max-width: 18px;
    margin-top: -3px;
    cursor: pointer;
    /*animation: spin 3s linear infinite;*/
}
.subscribe-panel.large .subscribe-link {
    margin-top: 15px;
    line-height: 26px;
}
.subscribe-panel.large .subscribe-link .fa {
    font-size: 18px;
}
@media (min-width: 1201px) {
    .subscribe-panel .switch-to-map {
        color: #333 !important; /* shown as plain text when map is visible */
        cursor: text;
    }
    .subscribe-panel .radar-text {
        display: inline;
    }
}

/* Tg promotion, with post example */
.subscribe-panel-tg-post-sample {
    position: relative;
    margin: 45px auto 55px;
    max-width: 550px;
    padding: 0 10px;
    font-size: 14px;
    cursor: text;
}
.subscribe-panel-tg-post-sample .panel-content {
    margin-left: 0 !important;
}
.subscribe-panel-tg-post-sample .title {
    margin-bottom: 8px;
    margin-right: 17px;
    font-weight: normal;
}
.subscribe-panel-tg-post-sample .tg-city-channels {
   padding-top: 15px;
}
.subscribe-panel-tg-post-sample .btn-close-x {
    color: #d6d6d6;
    top: 0;
}
@media (max-width: 420px) {
    .subscribe-panel-tg-post-sample .title,
    .subscribe-panel-tg-post-sample .all-tg-channels {
        /*margin-left: 10px;*/
    }
}

/* Telegram city channels (deprecated, v1) */
.subscribe-panel-tg-channels {
    position: relative;
    margin: 45px 0 55px;
    font-size: 14px;
    cursor: text;
}
.subscribe-panel-tg-channels .panel-content {
    margin-left: 0 !important;
}
.subscribe-panel-tg-channels .title {
    margin-bottom: 8px;
    font-weight: normal;
}
.subscribe-panel-tg-channels .tg-header {
    height: 57px;
    max-width: 450px;
    width: auto;
    overflow-x: hidden;
    background: url(/img/search/sub-panel/tg-channels/tg-header.png) left center no-repeat;
    background-size: cover;
    position: relative;
}
.subscribe-panel-tg-channels .btn-close-x {
    color: #d6d6d6;
    top: 16px;
    right: 18px;
}
.tg-channel {
    color: black !important;
    padding: 12px;
    display: block;
    border: 1px solid #e8e8e8;
    /*border-width: 1px 0;*/
    background-color: white;
    max-width: 450px;
    position: relative;
    font-size: 14px;
}
.tg-channel + .tg-channel {
    border-top: none;
}
.tg-channel > img:first-child {
    position: absolute;
    left: 12px;
    top: 18px;
    width: auto;
    max-width: 40px;
}
.tg-channel > img:last-child {
    position: absolute;
    right: 8px;
    top: 22px;
    width: auto;
    max-width: 24px;
}
.tg-channel .tg-body {
    margin-left: 50px;
    margin-right: 28px;
}
.tg-channel .tg-name {
    font-weight: bold;
    margin-bottom: 3px;
}
.tg-channel:hover .tg-name {
    color: #0089e2;
}
.tg-channel .tg-post {
    color: #929292;
}
.tg-channel:hover .tg-post {
    color: #487aa1;
}
.tg-channel .tg-post em {
    background-image: url(/img/search/sub-panel/tg-channels/tg-emoji-sprite-56px.png);
    background-size: 208px 16px; /* 3.5x */
    background-position-y: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: baseline;
}
.tg-channel .tg-post em.house {
    background-position-x: 0;
}
.tg-channel .tg-post em.check {
    background-position-x: -64px;
}
.tg-channel .tg-post em.skyscraper {
    background-position-x: -96px;
}
.tg-channel .tg-post em.ok {
    background-position-x: -112px;
}
.tg-channel .tg-post em.good {
    background-position-x: -128px;
}
.tg-channel .tg-post em.door {
    background-position-x: -160px;
}
.tg-channel .tg-post em.bed {
    background-position-x: -176px;
}
.tg-channel .tg-post em.key {
    background-position-x: -192px;
}
.subscribe-panel-tg-channels .all-tg-channels {
    display: inline-block;
    margin: 5px 0 10px;
    font-size: 14px;
}
@media (max-width: 1024px) {
    .tg-channel {
        font-size: 15px;
    }
}
@media (max-width: 420px) {
    .subscribe-panel-tg-channels .tg-channel {
        border-left: 0;
        border-right: 0;
    }
    .subscribe-panel-tg-channels .title,
    .subscribe-panel-tg-channels .all-tg-channels {
        margin-left: 10px;
    }
}

/*AB tests*/
.subscribe-to-new-ads { /*deprecated*/
    margin: -10px 0 60px;
    font-size: 13px;
    text-align: center;
}
/*.subscribe-to-new-ads > .fa {
    color: #009EE2;
    font-size: 18px;
    margin: -2px 3px 0 0;
}*/
.subscribe-to-new-ads .btn {
    min-width: 300px;
}
.subscribe-to-new-ads .btn > .fa {
    font-size: 18px;
    margin: -2px 3px 0 0;
}
.subscribe-to-new-ads > div {
    display: inline-block;
    font-size: 13px;
    font-style: italic;
    margin: 5px 10px 0;
    max-width: 550px;
}
@media (max-width: 400px) {
    .subscribe-to-new-ads .btn {
        width: 91%;
    }
}

.btn-to-top {
    margin-bottom: 30px;
}

/* now we show subs. panel, so spacing was decreased */
.search-results-footer-spacer {
    height: 50px;
}
/*
.search-results-footer-spacer.count-0 {
    height: 100px;
}
.search-results-footer-spacer.count-1 {
    height: 250px;
}
.search-results-footer-spacer.count-2 {
    height: 150px;
}
*/

.search-results-footer {
    font-size: 13px;
    margin-bottom: 40px;
    min-height: 20px; /* space needed for paginator 'more' menu */
}

.search-results-footer .footer-large-text {
    font-size: 13px;
    color: #555;
}
.search-results-footer .footer-large-text h2 {
    font-weight: bold;
    font-size: 15px;
}
.search-results-footer .footer-table {
    width: 100%;
    /*max-width: 700px;*/
    font-size: 13px;
    margin: 20px auto 30px;
    background-color: white;
    border: 1px solid gray;
}
.search-results-footer .footer-table th,
.search-results-footer .footer-table td {
    padding: 5px 10px;
    border: 1px solid #f2f2f2;
}
.search-results-footer .footer-table th {
    background-color: white;
    /*color: white;*/
    font-size: 14px;
}
.search-results-footer .footer-table th:nth-child(1) {
    width: 40%;
}
.search-results-footer .footer-table td {
    /*background-color: white;*/
}
.search-results-footer .garazh-koop-list th:nth-child(1) {
    width: 43%;
}
.search-results-footer h2 {
    font-size: 18px;
}
.search-results-footer h3 {
    font-weight: bold;
    font-size: 13px;
}
.search-results-footer .edit-link {
    float: right;
    margin-top: -33px;
    color: #b9b9b9;
}
.search-results-footer .edit-link .fa {
   font-size: 18px;
}
.search-results-footer li {
    margin-bottom: 6px;
}

.also-searched {
    margin-bottom: 30px;
    background-color: white;
    border: 1px solid #ececec;
    padding: 8px 10px;
}
.also-searched .item:not(:last-child)::after {
    content: ', ';
    padding-right: 2px;
}

/******* Search Map ********/

.search-map {
    /*background-color: #F7F5E9;*/
    background:  #F7F5E9 url(/img/3rdparty/2gis.png) center 40% no-repeat;
    /*background-size: 79px 38px;*/
    background-size: 53px 25px;
    /*border: 1px solid grey;*/
    /*border: 1px solid #c1c0b7;*/
    border: 1px solid #efede2;
    position: relative;
    float: right;
    margin-right: 0;
    margin-left: 15px;
    width: 400px; /*fallback*/
    width: calc(100% - 995px);
    height: 800px;
}
.search-map.fixed {
    position: fixed;
    top: 0;
    right: 10px;
    width: calc(100% - 995px - 20px); /* compensate body-content padding */
}

.search-map > .alert {
    display: none;
    position: absolute;
    top: 45%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    border-radius: 2px;
    background-color: white;
    -webkit-box-shadow: 1px 1px 1px #525252;
    -moz-box-shadow: 1px 1px 1px #525252;
    box-shadow: 1px 1px 1px #525252;
}
.search-map .current-page-note {
    display: none;
    position: absolute;
    left: 8px;
    bottom: 10px;
    color: black;
    font-weight: bold;
    text-shadow: 0 0 3px white;
    font-size: 12px;
}
.search-map .btn-close-map {
    display: none;
    position: absolute;
    bottom: 21px;
    left: 10px;
}
.search-map .btn-close-map .fa {
    margin-top: 0;
    font-size: 24px;
}

.search-map .marker {
    /*override 2gis styles*/
    width: auto !important;
    height: auto !important;
    background-color: transparent;
    border: 0;
    /*match to pointer*/
    margin-left: -8px !important;
    margin-top: -25px !important;
    font-size: 11px;
}
.search-map .marker.current {
    z-index: 2001 !important;
}
.search-map .marker > div {
    display: block;
    position: relative;
    min-width: 20px;
    padding: 0 3px;
    margin: 0;
    font-weight: bold;
    color: white;
    background: #009EE2;
    border: 1px solid white;
    border-radius: 5px;
    white-space: nowrap;
    /*transition: background-color 0.3s, border-color 0.3s;*/
}
/*.search-map .marker.current > div {
    color: #009EE2;
    background: white;
    border-color: #009EE2;
}*/
.search-map .marker.top > div {
    color: black;
    background: #fff900;
}
.search-map .marker.realtor > div {
    background: #257ea5;
}
.search-map .marker.current:not(.blinking) > div {
    color: white;
    background: #ff4d4d;
}
.search-map .marker > div:before {
    content: ' ';
    position: absolute;
    left: 7px;
    top: 16px;
    width: 0;
    height: 0;
    border: solid;
    border-width: 5px 3px 5px 3px;
    border-color: #009EE2 transparent transparent #009EE2;
    /*transition: border-color 0.3s;*/
}
.search-map .marker.top > div:before {
    border-color: #fff000 transparent transparent #fff000;
}
.search-map .marker.realtor > div:before {
    border-color: #257ea5 transparent transparent #257ea5;
}
.search-map .marker.current:not(.blinking) > div:before {
    border-color: #ff4d4d transparent transparent #ff4d4d;
}

/*price sep.*/
.search-map .s-1k {
    margin-left: 2px;
}
.search-map .s-cur {
    margin-left: 2px;
}
.search-map .s-cur.UAH {
    margin-left: 1px;
    font-size: 0.7em;
}

/* overlap fix */
/* 1 step is 10px, -25px is zero point */
.search-map .marker.shift-y-1 {
    margin-top: -35px !important;
}
.search-map .marker.shift-y-2 {
    margin-top: -45px !important;
}
.search-map .marker.shift-y-3 {
    margin-top: -55px !important;
}
.search-map .marker.shift-y-4 {
    margin-top: -65px !important;
}
/* 5px base width */
.search-map .marker.shift-y-1 > div:before {
    border-width: 10px 3px 10px 3px;
}
.search-map .marker.shift-y-2 > div:before {
    border-width: 15px 3px 15px 3px;
}
.search-map .marker.shift-y-3 > div:before {
    border-width: 20px 3px 20px 3px;
}
.search-map .marker.shift-y-4 > div:before {
    border-width: 25px 3px 25px 3px;
}
/* AB test */
.search-map .btn-draw-on-map {
    position: absolute;
    top: 10px;
    left: 64px;
    /*color: black;
    border-color: #009ee2;
    background-color: #dff5ff;*/
    box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
    border: 2px solid #484848;
    background-color: white;
    color: #0a2a38;
}
.search-map .btn-draw-on-map img {
    margin: -4px 0 -2px;
}

/* draw circle */
.search-map .area-edit-marker {
    background-color: orange;
    /*background-color: #d6d6d6;*/
    width: auto !important;
    height: auto !important;
    padding: 1px 2px 0;
    border: 1px solid white;
    border-radius: 6px;
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
    margin-left: 0 !important;
    margin-top: -16px !important;
    border-bottom-left-radius: 2px;
}
.search-map .area-edit-marker .fa {
    font-size: 11px;
    margin: 0 2px 0 1px;
    position: relative;
    top: -1px;
}
.search-map .draw-buttons {
    display: none;
    position: absolute;
    top: 10px;
    left: 64px;
}
.search-map .draw-buttons .draw-circle {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    background: white url(/img/geo/draw-circle.png);
    background-size: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: none;
}
.search-map .draw-buttons .draw-circle-2 {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    background: white url(/img/geo/draw-circle-2.png);
    background-size: 50px;
    background-origin: border-box;
    border: 3px solid #009EE2;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*.search-map .draw-buttons .draw-circle-2 {
    transform: rotate(10deg);
    transition: transform 0.4s;
}*/
.search-map .draw-overlay {
    display: none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    /*background-color: rgba(0,0,0,0.1);*/
    overflow: hidden;
}
.search-map .draw-overlay.CIRCLE_CENTER,
.search-map .draw-overlay.CIRCLE_RADIUS {
    cursor: crosshair;
}
.search-map .draw-overlay-controls {
    width: 100%;
    text-align: center;
    margin-top: 12px;
    position: absolute;
    cursor: default;
}
.search-map .draw-overlay-controls.bg {
    margin-top: 0;
    /*background-color: #F7F5E9;*/
    background-color: white;
    padding: 15px 0 20px;
    border-bottom: 1px solid #d6d6d6;
}
.search-map .draw-overlay-controls .overlay-message {
    text-align: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: green;
}
.search-map .draw-overlay-controls .overlay-message .walk-label {
    font-weight: normal;
    font-style: italic;
    font-size: 0.9em;
}
.search-map .draw-overlay-controls.bg .overlay-message {
    font-size: 14px;
    color: #333;
}
.search-map .draw-overlay-controls .overlay-message > span {
    font-weight: bold;
    background-color: white;
    padding: 1px 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.search-map .draw-overlay-controls.bg .overlay-message > span {
    box-shadow: none;
    background-color: transparent;
}
.search-map .draw-overlay-controls .overlay-buttons {
    padding: 0 20px;
}
.search-map .draw-overlay-controls .btn-flat {
    min-width: 130px;
    box-shadow: 2px 2px 5px rgba(100,100,100,0.3);
}
.search-map .draw-overlay-controls .btn-delete {
    float: left;
    color: #d00202;
    /*background: #ffefef;*/
    background: transparent;
    border: 1px solid #ffeaea;
    width: auto;
    min-width: unset !important;
    margin-right: -30px;
    /*padding: 8px 14px;*/
    box-shadow: none;
    padding: 6px 14px 7px;
    margin-top: 1px;
}
.search-map .draw-overlay-controls .btn-delete:hover {
    background: #ffefef;
}
.search-map .draw-overlay-controls .btn-delete .fa {
    font-size: 18px;
}
.search-map .draw-overlay .hole {
    display: none;
    position: absolute;
    left: 400px;
    top: 500px;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    border: 1px solid #5d5d5d;
    box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.55);
}
.search-map .draw-overlay .hole.alt-color {
    border-color: #ffa354;
}
.search-map .draw-overlay .hole.ios {
    /* iPad/iOS fix: shadow does not appear for large radius until blur radius is set. Don't set to non-iOS, as Windows Chrome becomes very slow */
    -webkit-box-shadow: 0 0 9999px 9999px rgba(255, 255, 255, 0.55);
}
.search-map .draw-overlay.CIRCLE_EDIT .hole {
    cursor: move;
}
.search-map .draw-overlay .border-dragger {
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #009EE2;
    /* Prevent the text contents of draggable elements from being selectable.
       This fixes bug in Chrome, when native text drag-n-drop activated: it reproduced only on first mousemove event,
       in case if mouse position was outside of this element during previous drag */
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    /*-khtml-user-drag: element;*/
    /*-webkit-user-drag: element;*/
}
.search-map .draw-overlay .border-dragger.left {left: -4px; top: 50%; top: calc(50% - 3px) !important;}
.search-map .draw-overlay .border-dragger.top {left: 50%; left: calc(50% - 3px) !important; top: -4px;}
.search-map .draw-overlay .border-dragger.right {right: -4px; top: 50%; top: calc(50% - 3px) !important;}
.search-map .draw-overlay .border-dragger.bottom:not(.mobile) {left: 50%; left: calc(50% - 3px) !important; bottom: -4px;}

.search-map .draw-overlay.CIRCLE_EDIT .border-dragger {
    cursor: ns-resize;
}
.search-map .draw-overlay.CIRCLE_EDIT .border-dragger.left,
.search-map .draw-overlay.CIRCLE_EDIT .border-dragger.right {
    cursor: ew-resize;
}
.search-map .draw-overlay .hole.alt-color .border-dragger {
    background-color: #c06000;
}
/* large mobile-friendly knob, similar to slider */
.search-map .draw-overlay .border-dragger.mobile {
    width: 32px;
    height: 32px;
    border: 1px solid #AAA;
    background: #DDD;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%);
    border-radius: 32px;
    -moz-border-radius: 32px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    cursor: grab;
    text-align: center;
}
.search-map .draw-overlay .border-dragger.mobile.bottom {left: 50%; left: calc(50% - 17px) !important; bottom: -17px;}
/*.search-map .draw-overlay .border-dragger.mobile .fa {
    color: gray;
    top: 4px;
    position: relative;
    font-size: 16px;
}*/

.search-map.drawing .draw-overlay {
    display: block;
}
.search-map.drawing .draw-buttons,
.search-map.drawing .current-page-note,
.search-map.drawing .btn-close-map {
    display: none !important;
}

.search-map .draw-overlay .crossed {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* make it odd w/h */
    /*border: solid transparent;
    border-width: 1px 0 0 1px;*/
}

.search-map .draw-overlay .crossed::before {
    content: ' ';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    background-color: #009EE2;
    height: 2px;
}
.search-map .draw-overlay .crossed::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    height: 100%;
    background-color: #009EE2;
    width: 2px;
}
.search-map .draw-overlay .hole.alt-color .crossed::before,
.search-map .draw-overlay .hole.alt-color .crossed::after {
    background-color: #c06000;
}



/* Search Map breakpoints */
/* left: fixed-width listing, variable-width map on the right */
@media (max-width: 1650px) {
    .search-map {
        width: 400px; /*fallback*/
        width: calc(100% - 730px);
    }
    .search-map.fixed {
        position: fixed !important; /*! to override 2gis style*/
        top: 0;
        right: 10px;
        width: calc(100% - 730px - 20px); /* compensate body-content padding */
    }
    .search-results {
        margin-left: 20px;
    }
}

/****** MOBILE version of map ******/
@media (max-width: 1200px) {
    .search-map {
        /*display: none;*/
        position: fixed;
        top: 0; bottom: 0; right: auto;
        /*right: 0; left: 0;*/
        /* shown but out of screen, so that map is fully rendered in advance and slides more smoothly*/
        left: 100%;
        margin: 0;
        width: 100% !important;
        border: 0;
    }
    .search-map.shown-on-mobile {
        display: block;
        height: 100%;
        z-index: 1; /* over TOP div */
    }
    .search-map.shown-on-mobile.fully-shown {
        left: 0;
    }
    .search-map .btn-close-map {
        display: block;
    }
    .search-map .current-page-note {
        /*top: 10px; bottom: auto;
        left: 20%; right: 20%;
        text-align: center;*/
        font-weight: normal;
        left: 10px;
        bottom: 4px;
    }
    .search-results {
        margin-left: 265px;
    }
    .btn-map {
        display: inline-block;
    }
    .btn-map img {
        max-width: 40px;
        max-height: 40px;
    }
    .btn-map2 {
        display: inline-block;
        width: 44px;
        height: 38px;
        text-align: center;
        padding: 5px 0;
    }
    .btn-map2 .fa {
        font-size: 26px;
    }
    .btn-map3 {
        display: inline-block;
        height: 38px;
        text-align: center;
        padding: 7px 10px;
        background-color: transparent !important;
        color: #4c5355 !important;
        border: 1px solid #4c5355;
    }
    .btn-map3 .fa {
        margin-top: 0;
    }
    .ad .ad-btns .btn-zoom-to-pin {
        display: none;
    }
    .ad.current .attention-rect {
        border-width: 5px;
    }
    .search-map .draw-overlay-controls.bg {
        background-color: white;
    }
    .search-map .draw-overlay-controls .overlay-message > span {
        /*display: inline-block;
        max-width: 220px;
        line-height: 1.2;*/
    }
    .search-map .draw-overlay .hole {
        border: 2px solid #989898;
    }
}
/*when map is not shown*/
@media (min-width: 1201px) {
    .btn-show-map {
        display: none;
    }
    .search-results-main {
        width: 715px;
        float: left;
    }
    /* show hover effect only if map is shown */
    .ad {
    }
    .ad.hover {
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        /*box-shadow: 0 0 0 3px #c1cedd;*/
        /* initial + hover shadow */
        /* blue shadow: #7dbdd8 */
        -webkit-box-shadow: 0 0 0 2px #babcbf, 0 1px 1px #a6a8ab;
        -moz-box-shadow: 0 0 0 2px #babcbf, 0 1px 1px #a6a8ab;
        box-shadow: 0 0 0 2px #babcbf, 0 1px 1px #a6a8ab;
        transition: box-shadow 0.15s ease-in;
    }
    .ad.current:not(.blinking) {
        box-shadow: 0 0 0 4px #7dbdd8;
        -webkit-box-shadow: 0 0 0 4px #7dbdd8;
        border-radius: 4px;
    }
    /*align comfort icons at bottom when map is shown (when 'Show map' button is hidden), to prevent photo height increase*/
    .ad .comfort {
        position: absolute;
        left: 20px;
        bottom: 16px;
    }
    .ad .comfort img {
        margin-right: -1px;
    }
    .ad .comfort img.narrow3 {
        margin: 0 -3px;
    }
    .ad .comfort img.narrow2 {
        margin: 0 -2px;
    }
    .ad.DAILY_RENT .btn-details {
        left: auto !important;
        right: 20px;
    }
    .ad.DAILY_RENT .btn-details .fa {
        display: none;
    }
    .ad.DAILY_RENT .ad-btns {
        top: 5px;
        right: 8px;
    }
    /*align free dates at bottom when map is shown*/
    .ad .free-dates {
        position: absolute;
        left: 20px;
        font-size: 11px;
        bottom: 0;
        margin: 0;
    }
}

/* map draw custom breakpoint, mobile */
@media (max-width: 500px) {
    .search-map .draw-overlay-controls .overlay-buttons {
        padding: 0 15px;
    }
    .search-map .draw-overlay-controls .btn-delete {
        padding: 2px 8px 4px;
        margin-top: 5px;

    }
    .search-map .draw-overlay-controls .btn-flat {
        min-width: 110px;
    }
    .search-map .area-edit-marker {
        font-size: 11px;
        margin-top: -18px !important;
    }
}

@media (min-width: 1651px) {
    .search-results-main {
        width: 980px;
    }
}

/****** Media: Status line  *******/

@media (min-width: 1001px) and (max-width: 1200px), (min-width: 1651px) {
    /* count is on new line, filters button is hidden */
    .results-status {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    .results-status .count {
        font-size: 1.1em;
        margin-top: 0;
    }
    .results-status .sorting {
        margin-top: 0;
    }
    /* not status line, but same rules */
    .favorites-page h1 {
        margin-bottom: 25px;
    }
}
@media (max-width: 400px) {
    /* button and count label do not fit in one line on 360px */
    .results-status .count {
        font-size: 1.1em;
    }
}

/* feature testing */
@media (max-width: 1000px) and (min-width: 600px) {
    .results-status.with-sorting .count {
        float: left;
        margin-left: 10px;
    }
}
@media (max-width: 600px) {
    .results-status .sorting {
        display: none;
    }
}

/* subcategory links: mobile */
@media (max-width: 500px) {
    .subcategory-links {
        font-size: 15px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .subcategory-links.ROOMS {
        font-size: 1.3em;
    }
    .subcategory-links .col-xs-6 {
        width: 99%;
    }
    .subcategory-links a {
        max-width: none;
    }
    .subcategory-links a em {
        font-weight: bold;
    }
    .subcategory-links .count {
        font-size: 11px;
        padding-bottom: 4px;
    }
    /* collapsed mode */
    .subcategory-links.collapsed .collapsed {
        display: none;
    }
    .subcategory-links.collapsed .show-all {
        display: block !important;
    }
}

/* subcategory links: mobile */
@media (max-width: 500px) {
    .btn-show-map {
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
    }
}


/****** Filters panel: hidden, slides out, sticks to the left  *******/

/* Styles for slide out/hidden. Shown as fixed left panel in ranges: [1000-1200] and [1650+] */
@media (max-width: 1000px), (min-width: 1201px) and (max-width: 1650px) {
    html.f-no-scroll {
        overflow: hidden;
        height: 100%; /*needed for Safari*/
        position: relative;
    }
    body.f-no-scroll {
        overflow: hidden;
        height: 100%; /*needed for Safari*/
    }
    .search-results {
        margin-left: 0;
    }
    .search-results .filter-chain {
        display: none;
    }
    .search-results .attached-photos {
        margin-top: -10px;
    }
    .results-status .btn-show-filters {
        display: inline-block;
    }
    .results-status .count {
        float: right;
    }
    .filters {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 350px;
        min-height: 100%;
        margin-bottom: 0;
        padding-bottom: 70px; /* space search button */
        z-index: 2;
        border-radius: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 -8px 0 0 #e7f1f5, 2px 0 10px 1px rgba(0,0,0,0.2);
        /*sliding*/
        webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform .3s ease;
        transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
        transition: transform .3s ease, -webkit-transform .3s ease;
        -webkit-overflow-scrolling: touch;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .f-overlay-shown .filters {
        display: block;
        webkit-transform: translateX(0);
        transform: translateX(0);
    }
    .filters .filters-header  {
        /*
        background-color: white;
        color: black;
        */
        padding: 0 15px;
        height: 50px;
        line-height: 50px;
    }
    .filters .filters-header .overlay-control {
        display: inline-block;
    }
    .filters .filters-header .icon-gear,
    .filters .filters-header .btn-close-filters {
        /*color: #009EE2;*/
    }
    .filters .filters-header .btn-subscribe {
        float: right;
        display: inline-block;
        padding: 0 17px;
        line-height: inherit;
        margin: 0;
        border-radius: 0;
        border-left: 1px solid #87c7e0;
    }
    .filters .filters-header .btn-subscribe i {
        font-size: 22px;
        margin: 0 0 1px 0;
    }
    .filters .filters-header .btn-subscribe:hover {
        background-color: transparent;
        color: #ddd;
    }
    .filters .filters-header .btn-close-filters {
        float: right;
        position: static;
        font-weight: bold;
        border-left: 1px solid #87c7e0;
        padding: 0 4px;
    }
    .filters .filters-header .btn-close-filters i {
        font-size: 20px;
        margin: 0 7px 1px;
        /*position: relative;
        top: -2px;*/
    }
    .filters .filters-header .btn-close-filters:hover {
        /*color: #0090ca;*/
    }
    .filters .filter-chain {
        display: block;
        background-color: #fafafa;
    }
    .filters .filter-chain li {
        font-size: 14px;
    }
    .filters .content {
        border: 0;
    }
    .filters .range-inputs .btn-filter-apply {
        display: none;
    }

    .btn-view-results {
        display: block !important;
        visibility: hidden;
        position: fixed;
        left: 15px;
        right: 15px;
        bottom: 10px;
        width: 300px;
        z-index: 5;
        /*sliding from below*/
        -webkit-transform: translateY(60px);
        transform: translateY(60px);
        -webkit-transition: -webkit-transform .3s ease;
        transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
        transition: transform .3s ease, -webkit-transform .3s ease;
    }
    .f-overlay-shown .btn-view-results {
        display: block;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    body.f-overlay-shown:before {
        display: block;
        content: '';
        position: absolute;
        /*background-color: rgba(255,255,255,0.8);*/
        background-color: rgba(0,0,0,0.3);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
}
@media (max-width: 450px) {
    .filters {
        width: 100%;
    }
    .btn-view-results {
        width: 100%;
        width: calc(100% - 35px);
    }
}

/****** Media: Ad *******/

/* decrease margins (1st time). Note: we show filters on 1000+ */
@media (max-width: 850px), (min-width: 1001px) {
    .ad .photo-container {
        height: 225px;
    }
    .ad .content {
        padding: 16px 16px 47px 20px;
    }
    .ad .price-row {
        margin: 9px 0 11px;
    }
    .ad.NOMER .price-row,
    .ad.HOSTEL .price-row {
        margin: 5px 0 7px; /* decrease, we show 'what' */
    }
    .ad .room-params > *:not(:last-child) {
        margin-right: 10px;
    }
    .ad .room-params > .garazh-badge-2:not(:last-child) {
        margin-right: 7px; /* a little tight, decrease */
    }
    .ad .floor em {
        max-width: 65px;
    }
    .ad .description {
        margin: 9px 0 13px;
    }
    .ad .btn-details {
        /*same as content padding left*/
        left: 20px;
        bottom: 16px;
    }
}

/* decrease margins (2nd time) */
@media (max-width: 750px) {
    .ad .photo-container {
        height: 220px;
    }
    .ad .content {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ad .btn-details {
        /*same as content padding left*/
        left: 18px;
    }
    .ad .price-row {
        margin: 10px 0 12px;
    }
    .ad .price-row .square-total {
        font-size: 20px;
    }
    .ad .price-row .price {
        font-size: 24px;
    }
    .ad .description {
        margin: 12px 0 15px;
        max-height: 3em;
        overflow: hidden;
    }
    .ad .no-agencies-hint {
        left: 180px;
    }
}

@media (max-width: 630px) {
    .ad .photo-container {
        display: block;
        width: 100%;
        height: 260px;
    }
    .ad .content {
        display: block;
        border-top: none;
    }
    /* for vertical layout show bottom border instead of right border */
    .ad .photo-container.no-photo {
        border-right: 0;
        border-bottom: 1px solid gainsboro;
    }
    .ad .fav-icon .fa {
        font-size: 42px;
    }
    .ad .garazh-badge-2,
    .ad .price-row .min-rent-days-hint,
    .ad .price-row .price-per-square-hint {
        /*looks bad on mobile w/o it*/
        padding: 3px .6em 3px;
    }
    .ad .description {
        max-height: none;
    }
    /* fixed spacer height - now photos are vertically stacked */
    .search-results-footer-spacer {
        height: 50px !important;
    }
}

/* TODO: make it more compact for mobile, hide some fields */
@media (max-width: 420px) {
    .body-content {
        padding: 1px 0 1px;
    }
    .breadcrumbs,
    .results-status,
    h1 {
        padding-left: 10px;
        padding-right: 10px;
    }
    .price-slider {
        margin-left: 10px;
        margin-right: 10px;
    }
    .h1-extra {
        margin-left: 10px;
        margin-right: 10px;
    }
    .breadcrumbs {
        line-height: 1.5;
     }
    /*.breadcrumbs {
        font-size: 13px;
    }
    .breadcrumbs .chain-spacer {
        font-size: 15px;
    }*/
    h1 {
        font-size: 17px;
    }
    .ad {
        border: 0;
        /*border-top: 1px solid #8b8b8b;*/
        /*border-bottom: 1px solid #c9c9c9;*/
        margin-bottom: 28px;
    }
    .ad .photo-container {
        height: 230px;
    }
    .ad .content {
        padding-left: 16px;
        padding-right: 10px;
        padding-top: 12px;
    }
    .ad .realtor-spacer {
        height: 6px;
    }
    .ad .square em {
        margin-left: 0;
    }
    .ad .square em .s-sep {
        padding: 0 1px;
    }
    .ad .price-row {
        margin: 6px 0 8px;
    }
    .ad .price-row .square-total {
        margin-right: 20px;
    }
    .ad .with-price-hint .price-row .square-total {
        margin-right: 12px;
    }
    .ad .price-row .square-total img.garazh-car-type {
        margin-right: 10px;
    }
    .ad .floor em .floor-sep-long {
        display: none;
    }
    .ad .floor em .floor-sep-short {
        display: inline;
        padding: 0 1px;
    }
    .ad .description {
        margin-top: 8px;
    }
    .ad .description span {
        margin-left: 23px;
    }
    .ad .btn-details {
        left: 16px;
    }
    .realtor-ads-separator .ads-count {
        text-align: center;
    }
    .subscribe-panel.v1 {
        margin-right: 10px;
        margin-left: 10px;
    }
    .subscribe-panel.v1 > img {
        left: 18px;
    }
    .subscribe-panel.v1 .panel-content {
        margin-left: 78px;
    }
    .subscribe-panel.v2 {
        margin-right: 10px;
        margin-left: 10px;
    }
    .subscribe-panel.v2 > img {
        left: 18px;
    }
    .subscribe-panel.v2 .panel-content {
        margin-left: 78px;
    }
    .search-results-footer,
    .search-results-footer + .box-hide-link {
        padding: 0 10px;
    }
    .subscribe-panel.large {

    }
    .subscribe-panel.large.v1 > img {
        width: 72px;
    }
    .subscribe-panel.large.v2 > img {
        width: 50px;
        left: 25px;
    }
    .subscribe-panel.large.v1 .panel-content {
        margin-left: 100px;
    }
    .subscribe-panel.large.v2 .panel-content {
        margin-left: 90px;
    }
    .subscribe-panel ul {
        padding-left: 17px;
    }
    .subscribe-panel.large .subscribe-link {
        margin-top: 10px;
    }
}

/* A/B test, class is assigned to .search-results-page div */
@media (min-width: 1001px) {
    .ab-small-adv-height .ad {
        margin-bottom: 15px;
    }
    .ab-small-adv-height .ad .photo-container {
        height: 180px;
        width: 37%;
    }
    .ab-small-adv-height .ad .photo-container .caption {
        width: 70px;
        padding: 5px 0;
        font-size: 13px;
    }
    .ab-small-adv-height .ad .photo-container .alt-photo {
        max-width: 85px;
        max-height: 75px;
    }
    .ab-small-adv-height .ad .content {
        padding: 6px 12px 45px 16px;
    }
    .ab-small-adv-height .ad .location {
        font-size: 16px;
    }
    .ab-small-adv-height .ad .price-row {
        margin: 3px 0 6px;
    }
    .ab-small-adv-height .ad .price-row .square-total {
        font-size: 16px;
        margin-right: 20px;
    }
    .ab-small-adv-height .ad .price-row .price {
        font-size: 20px;
        /*color: #34da00;*/
    }
    .ab-small-adv-height .ad .description {
        margin: 5px 0 7px;
    }
    .ab-small-adv-height .ad .btn-details {
        padding: 4px 12px;
        left: 16px;
        bottom: 13px;
        font-size: 12px;
    }
    .ab-small-adv-height .ad .btn-details .fa {
        margin-left: 6px !important;
        font-size: 14px !important;
    }
}

/* scrollbar has similar color with bg, change its color */
body::-webkit-scrollbar {width: 16px;}
body::-moz-scrollbar {width: 16px;}
body::scrollbar {width: 16px;}
body::-moz-scrollbar-track{background: #bcc1c1;}
body::-webkit-scrollbar-track{background:#bcc1c1;}
body::scrollbar-track{background:#bcc1c1;}
body::-moz-scrollbar-thumb{background:#bcc1c1;}
body::-webkit-scrollbar-thumb{background:#bcc1c1;}
body::scrollbar-thumb{background:#bcc1c1;}
body::-moz-scrollbar-track-piece{background:#E6E6E6;}
body::-webkit-scrollbar-track-piece{background:#E6E6E6;}
body::scrollbar-track-piece{background:#E6E6E6;}

/* override colors for gray bg */
.box-hide:before {
    background: -moz-linear-gradient(top,rgba(245,247,247,0) 0,#f5f7f7 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(245,247,247,0)),color-stop(100%,#f5f7f7));
    background: -webkit-linear-gradient(top,rgba(245,247,247,0) 0,#f5f7f7 100%);
    background: -o-linear-gradient(top,rgba(245,247,247,0) 0,#f5f7f7 100%);
    background: -ms-linear-gradient(top,rgba(245,247,247,0) 0,#f5f7f7 100%);
    background: linear-gradient(top,rgba(245,247,247,0) 0,#f5f7f7 100%);
}