/* buttons
------------------------------------------------*/

/* standard button */
.btn,
button.btn {
    transition: background-color 100ms ease-out;
    display: block;
    border-radius: 4px;
    float: left;
    background-repeat: no-repeat;
    position: relative;
}
.text-center .btn,
.text-center button.btn {
    float: none;
    display: inline-block;
}
/*.btn span { killing other styling */
/*    display: block;*/
/*    font-size: 11px;*/
/*    padding: 0 0 0 15px;*/
/*}*/
.btn span.jsCompareCount {
    display: inline;
    font-size: inherit;
    padding: 0 0 0 5px;
}
.btn:focus,
button:focus,
.btn:hover,
button:hover {
    text-decoration: none;
}

/* size */
.btn.btn-r-icon-only {
    padding: 17px 19px;
}
.btn.btn-l {
    padding: 11px 24px;
    display: flex;
    align-items: center;
}
.btn.btn-l.text-center {
    justify-content: center;
}
.btn.btn-m {
    padding: 10px 44px;
}
.btn.btn-r {
    padding: 10px 24px;
    display: flex;
    align-items: center;
}
.btn.btn-r.text-center,
button.text-center {
    justify-content: center;
}
button.btn.btn-r {
    line-height: 1.1em;
}
.btn.btn-s {
    padding: 3px 15px;
    display: flex;
    align-items: center;
}
.btn.btn-s.text-center {
    justify-content: center;
}
.btn.btn-xs {
    padding: 5px 13px;
    line-height: 1.3em;
    display: flex;
    align-items: center;
}
.btn.btn-xs.text-center {
    justify-content: center;
}

@media only screen and (max-width: 640px) {
    .btn.btn-l {
        padding: 11px 24px;
    }
    .btn.btn-m {
        padding: 10px 44px;
    }
    .btn.btn-r {
        padding: 4px 12px;
    }
    .btn.btn-s {
        padding: 2px 10px;
    }
    .btn.btn-xs {
        padding: 5px 13px;
    }
}

@media only screen and (min-width: 641px) and (max-width: 900px) {
    .btn.btn-l {
        padding: 11px 24px;
    }
    .btn.btn-m {
        padding: 10px 44px;
    }
    .btn.btn-r {
        padding: 7px 17px;
    }
    .btn.btn-s {
        padding: 2px 10px;
    }
    .btn.btn-xs {
        padding: 5px 13px;
    }
}

.full-width {
    width: 100%;
}

/* style */
.btn.solid:before,
.btn.solid:after {
    filter: invert(100%);
}
.btn.outline,
.btn.outline-accent {
    background-color: var(--color-ui-1);
    border: 1px solid var(--color-ui-200);
}
.btn.outline:hover:before,
.btn.outline-accent:hover:before,
.btn.outline:hover:after,
.btn.outline-accent:hover:after {
    filter: invert(100%);
}
.btn.colour-outline,
.btn.colour-outline-accent {
    background-color: var(--color-ui-1);
    border: 1px solid var(--color-ui-200);
    color: var(--color-ui-200);
}

.btn.colour-outline:hover:before,
.btn.colour-outline-accent:hover:before {
    filter: invert(100%);
}
/* outline hover =======================*/
.btn.outline-hover {
    color: var(--color-ui-500);
    border: 1px solid transparent;
}
.btn.outline-hover:before,
.btn.outline-hover:after {
    filter: var(--filter-ui-500);
}
.btn.outline-hover:hover {
    color: var(--color-ui-800);
    background: var(--outline-hover-button-hover);
    border: 1px solid var(--outline-hover-button-hover);
    border-color: var(--outline-hover-button-hover);
}
.btn.outline-hover:hover:before,
.btn.outline-hover:hover:after {
    filter: var(--filter-ui-800);
}

.btn.ico-left:before {
    content: " ";
    display: inline-block;
    height: 22px;
    width: 14px;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
}
.btn.ico-right:after {
    content: " ";
    display: inline-block;
    height: 22px;
    width: 14px;
    margin-left: 10px;
    vertical-align: middle;
    position: relative;
}
.btn.btn-s.ico-left:before {
    margin-right: 6px;
}
.btn.btn-s.ico-right:after {
    margin-left: 6px;
}

@media only screen and (max-width: 640px) {
    .btn.ico-left:before {
        margin-right: 6px;
    }
    .btn.ico-right:after {
        margin-left: 6px;
    }
}

.btn.but-link {
    background: inherit;
    border: none;
    color: var(--color-ui-500);
}
.btn.but-link:before {
    filter: var(--filter-ui-500);
}
.btn.but-link:hover {
    background: inherit;
    border: none;
    color: var(--color-ui-800);
}
.btn.but-link:hover:before {
    filter: var(--filter-ui-800);
}

.btn.but-link.btn-l {
    padding: 11px 0;
}
.btn.but-link.btn-r {
    padding: 7px 0;
}
.btn.but-link.btn-s {
    padding: 3px 0;
}

/* down arrow button -------------------------*/
.btn.btn-arrow-down:before,
.btn.btn-arrow-down:after {
    background: url(/resources/images/buttons/down-arrow.svg) 0 50% no-repeat;
    width: 12px;
}
.btn.btn-s.btn-arrow-down:before,
.btn.btn-s.btn-arrow-down:after {
    background-size: auto 8px;
}

/* right arrow button -------------------------*/
.btn.btn-arrow-right:before,
.btn.btn-arrow-right:after {
    background: url(/resources/images/buttons/next-arrow.svg) 0 50% no-repeat;
    width: 8px;
    background-size: auto 12px;
}

.btn.btn-s.btn-arrow-right:before,
.btn.btn-s.btn-arrow-right:after {
    background-size: auto 10px;
    width: 6px;
}

/* left arrow button -----------------------*/
.btn.btn-arrow-left:before,
.btn.btn-arrow-left:after {
    background: url(/resources/images/buttons/back-arrow.svg) 0 50% no-repeat;
    width: 8px;
    background-size: auto 12px;
}
.btn.btn-s.btn-arrow-left:before,
.btn.btn-s.btn-arrow-left:after {
    background-size: auto 10px;
    width: 6px;
}

.btn.btn-toggle-nav-left:before,
.btn.btn-toggle-nav-left:after {
    background: url(/resources/images/icons/sub-nav-more.svg) 0 0 no-repeat;
    background-size: auto 14px;
    height: 14px;
    width: 9px;
    margin-top: -7px;
}
.btn.btn-toggle-nav-left.ico-left {
    padding-left: 31px;
    color: var(--color-brand-700);
}
.btn-toggle-nav-left .closed {
    display: none;
}
.btn-toggle-nav-left.toggled .closed {
    display: block;
}
.btn-toggle-nav-left.toggled .open {
    display: none;
}

/* camera button -----------------------*/
.btn.btn-camera:before,
.btn.btn-camera:after {
    background: url(/resources/images/buttons/camera.svg) 0 50% no-repeat;
    width: 18px;
}
.btn.btn-s.btn-camera:before,
.btn.btn-s.btn-camera:after {
    background-size: 12px auto;
    width: 12px;
}

/* button cross ---------------------------*/
.btn.btn-cross:before,
.btn.btn-cross:after {
    background: url(../images/buttons/cross.svg) 0 50% no-repeat;
    width: 12px;
}
.btn.btn-s.btn-cross:before,
.btn.btn-s.btn-cross:after {
    width: 10px;
    background-size: auto 10px;
}

/* tick --------------------*/
.btn.btn-tick:before,
.btn.btn-tick:after {
    background: url(/resources/images/buttons/save-search-tick.svg) 0 50% no-repeat;
    width: 14px;
}
.btn.btn-s.btn-tick:before,
.btn.btn-s.btn-tick:after {
    width: 12px;
    background-size: auto 10px;
}

/* button add ----------------------*/
.btn.btn-add:before,
.btn.btn-add:after {
    background: url(/resources/images/buttons/add.svg) 0 50% no-repeat;
    width: 14px;
    top: -1px;
}
.btn.btn-s.btn-add:before,
.btn.btn-s.btn-add:after {
    background-size: auto 10px;
    width: 10px;
}

@media only screen and (max-width: 640px) {
    .btn.btn-add:before,
    .btn.btn-add:after {
        background-size: auto 10px;
        width: 10px;
    }
}

@media screen and (min-width: 641px) and (max-width: 900px) {
    .btn.btn-add:before,
    .btn.btn-add:after {
        background-size: auto 12px;
        width: 12px;
    }
}

/* remove button ----------------------*/
.btn.btn-remove:before,
.btn.btn-remove:after {
    background: url(/resources/images/buttons/remove.svg) 0 50% no-repeat;
    width: 14px;
}
.btn.btn-s.btn-remove:before,
.btn.btn-s.btn-remove:after {
    width: 10px;
}

/* button view --------------------------*/
.btn.btn-view:before,
.btn.btn-view:after {
    background: url(/resources/images/buttons/view.svg) 0 50% no-repeat;
    width: 19px;
    background-size: auto 18px;
}
.btn.btn-s.btn-view:before,
.btn.btn-s.btn-view:after {
    width: 18px;
    background-size: auto 16px;
}

@media screen and (max-width: 640px) {
    .btn.btn-view:before,
    .btn.btn-view:after {
        width: 15px;
        background-size: auto 14px;
    }
}

/* button edit -------------------------------*/
.btn.btn-edit:before,
.btn.btn-edit:after {
    background: url(/resources/images/buttons/edit.svg) 0 50% no-repeat;
    width: 12px;
}
.btn.btn-s.btn-edit:before,
.btn.btn-s.btn-edit:after {
    width: 11px;
    background-size: auto 10px;
}

/* compare button ---------------------------*/
.btn.btn-compare:before,
.btn.btn-compare:after {
    background: url(../images/buttons/compare.svg) 0 50% no-repeat;
    width: 18px;
}

.btn.btn-s.btn-compare:before,
.btn.btn-s.btn-compare:after {
    width: 14px;
    background-size: auto 14px;
}

/* save button ---------------------*/
.btn.btn-save:before,
.btn.btn-save:after {
    background: url(../images/buttons/save-search-icon.svg) 0 50% no-repeat;
    width: 14px;
    background-size: auto 18px;
}
.btn.btn-s.btn-save:before,
.btn.btn-s.btn-save:after {
    width: 12px;
    background-size: auto 10px;
}
/* to make the button green add the class .btn-save-green colour in the theme */

/* save button icon only */
.btn.btn-r.btn-save-search {
    padding: 7px 12px;
}
.btn.btn-save-search:before,
.btn.btn-save-search:after {
    background: url(../images/buttons/save-search-icon.svg) 0 50% no-repeat;
    width: 12px;
    margin-right: 0;
    background-size: auto 16px;
    display: block;
}

/* shortlist button -------*/
.btn.btn-shortlist:before,
.btn.btn-shortlist:after {
    background: url(../images/buttons/shortlist.svg) 0 50% no-repeat;
    width: 16px;
}

.btn.btn-shortlist.btn-s:before,
.btn.btn-shortlist.btn-s:after {
    background-size: auto 12px;
    width: 12px;
}

/* shortlit new ---------------------*/
.btn.btn-shortlist-new:before,
.btn.btn-shortlist-new:after {
    background: url("/resources/images/icons/header-favorites.svg") 0 50% no-repeat;
    width: 20px;
    background-size: 18px auto;
}
.btn.btn-shortlist-new:before {
    margin-right: 6px;
}

.btn.btn-shortlist-new.btn-s:before,
.btn.btn-shortlist-new.btn-s:after {
    background: url("/resources/images/icons/header-favorites.svg") 0 50% no-repeat;
    width: 14px;
    background-size: auto 12px;
}

/* download button -------*/
.btn.btn-download:before,
.btn.btn-download:after {
    background: url(../images/buttons/download.svg) 0 50% no-repeat;
    width: 12px;
}
.btn.btn-download.btn-s:before,
.btn.btn-download.btn-s:after {
    background-size: auto 10px;
    width: 10px;
}

/* upload button -------*/
.btn.btn-upload:before,
.btn.btn-upload:after {
    background: url(/resources/images/buttons/upload.svg) 0 50% no-repeat;
    width: 12px;
}
.btn.btn-s.btn-upload:before,
.btn.btn-s.btn-upload:after {
    background-size: auto 12px;
    width: 12px;
}

/* expand --------------------*/
.btn.btn-expand:before,
.btn.btn-expand:after {
    background: url(/resources/images/buttons/expand.svg?v=2) 0 50% no-repeat;
    width: 16px;
}

/* compress --------------------*/
.btn.btn-compress:before,
.btn.btn-compress:after {
    background: url(/resources/images/buttons/compress.svg) 0 50% no-repeat;
    width: 16px;
}

/* search button -------*/
.btn.btn-search:before,
.btn.btn-search:after {
    background: url(/resources/images/buttons/search.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-s.btn-search:before,
.btn.btn-s.btn-search:after {
    width: 12px;
    background-size: auto 12px;
}

/* advanced search button -------*/
.btn.btn-search-advanced:before,
.btn.btn-search-advanced:after {
    background: url(/resources/images/buttons/advanced-search.svg) 0 50% no-repeat;
    width: 18px;
}
.btn.btn-s.btn-search-advanced:before,
.btn.btn-s.btn-search-advanced:after {
    width: 12px;
    background-size: auto 12px;
}

/* duplicate shortlist button -------*/
.btn.btn-duplicate:before,
.btn.btn-duplicate:after {
    background: url(../images/buttons/duplicate.svg) 0 50% no-repeat;
    width: 15px;
}
.btn.btn-s.btn-duplicate:before,
.btn.btn-s.btn-duplicate:after {
    background-size: auto 12px;
    width: 12px;
}

/* broker button -------*/
.btn.btn-broker:after,
.btn.btn-broker:before {
    background: url(../images/buttons/broker.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-s.btn-broker:after,
.btn.btn-s.btn-broker:before {
    background-size: auto 10px;
    width: 10px;
}
@media only screen and (max-width: 640px) {
    .btn.btn-broker:after,
    .btn.btn-broker:before {
        background-size: auto 12px;
        width: 13px;
    }
}

/* pdf button -------*/
.btn.btn-pdf:before,
.btn.btn-pdf:after {
    background: url(../images/buttons/download-pdf.svg) 0 50% no-repeat;
    width: 15px;
}
.btn.btn-s.btn-pdf:before,
.btn.btn-s.btn-pdf:after {
    width: 11px;
    background-size: auto 12px;
}

/* download PDF button -------*/
.btn.btn-download-pdf:before,
.btn.btn-download-pdf:after {
    background: url(../images/buttons/download-pdf.svg) 0 50% no-repeat;
    width: 16px;
}

/* update --------------------*/
.btn.btn-update:before {
    background: url(../images/buttons/news-refresh.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-update.btn-s:before,
.btn.btn-update.btn-s:after {
    background-size: auto 12px;
    width: 12px;
}

/* external links --------------*/
.btn.btn-external:before,
.btn.btn-external:after {
    background: url("/resources/images/buttons/external-link-filled.svg") 0 50% no-repeat;
    width: 14px;
}
.btn.btn-xs.btn-external:before,
.btn.btn-xs.btn-external:after {
    background-size: auto 12px;
}
.btn.btn-external.btn-s:before,
.btn.btn-external.btn-s:after {
    background-size: auto 12px;
    width: 12px;
}

/* import -------*/
.btn.btn-import:before,
.btn.btn-import:after {
    background: url(../images/buttons/import.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-import.btn-s:before,
.btn.btn-import.btn-s:after {
    background-size: auto 10px;
    width: 11px;
}

/* email & webapp -------*/
.btn.btn-webapp:before,
.btn.btn-webapp:after {
    background: url(../images/buttons/email-app.svg) 0 50% no-repeat;
    width: 14px;
}
.btn.btn-s.btn-webapp:before,
.btn.btn-s.btn-webapp:after {
    width: 11px;
    background-size: auto 12px;
}

/* load -------*/
.btn.btn-load:before,
.btn.btn-load:after {
    background: url(../images/buttons/load.svg) 0 50% no-repeat;
    width: 14px;
}
.btn.btn-s.btn-load:before,
.btn.btn-s.btn-load:after {
    width: 10px;
    background-size: auto 12px;
}

/* apply / load & apply  -------*/
.btn.btn-apply:before,
.btn.btn-apply:after {
    background: url(../images/buttons/apply.svg) 0 50% no-repeat;
    width: 18px;
}

.btn.btn-s.btn-apply:before,
.btn.btn-s.btn-apply:after {
    background-size: auto 12px;
    width: 12px;
}

/* copy link  -------*/
.btn.btn-link:before,
.btn.btn-link:after {
    background: url(../images/buttons/copy-link.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-s.btn-link:before,
.btn.btn-s.btn-link:after {
    width: 12px;
    background-size: auto 12px;
}

/* email -------*/
.btn.btn-email:before,
.btn.btn-email:after {
    background: url(../images/buttons/email.svg) 0 50% no-repeat;
    width: 18px;
}
.btn.btn-s.btn-email:before,
.btn.btn-s.btn-email:after {
    width: 14px;
    background-size: auto 14px;
}

/* phone -------*/
.btn.btn-phone:before,
.btn.btn-phone:after {
    background: url(../images/buttons/phone.svg) 0 50% no-repeat;
    width: 18px;
}
.btn.btn-s.btn-phone:before,
.btn.btn-s.btn-phone:after {
    width: 12px;
    background-size: auto 12px;
}

/* meeting -------*/
.btn.btn-meeting:before,
.btn.btn-meeting:after {
    background: url(../images/buttons/meeting.svg) 0 50% no-repeat;
    width: 18px;
}
.btn.btn-s.btn-meeting:before,
.btn.btn-s.btn-meeting:after {
    width: 12px;
    background-size: auto 12px;
}

/* Share -------*/
.btn.btn-share:before,
.btn.btn-share:after {
    background: url(../images/buttons/share.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-s.btn-share:before,
.btn.btn-s.btn-share:after {
    background-size: auto 12px;
    width: 12px;
}

/* 2fa -------*/
.btn.btn-2fa:before,
.btn.btn-2fa:after {
    background: url(../images/buttons/two-fa.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-s.btn-2fa:before,
.btn.btn-s.btn-2fa:after {
    background-size: auto 12px;
    width: 12px;
}

/* fleet button -------*/
.btn.btn-fleet:before,
.btn.btn-fleet:after {
    background: url(../images/buttons/fleet.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-s.btn-fleet:before,
.btn.bts-s.btn-fleet:after {
    width: 13px;
    background-size: auto 14px;
}
@media only screen and (max-width: 640px) {
    .btn.btn-fleet:before,
    .btn.btn-fleet:after {
        width: 12px;
        background-size: auto 14px;
    }
}

/* model button -------*/
.btn.btn-model:before,
.btn.btn-model:after {
    background: url(../images/buttons/models.svg) 0 50% no-repeat;
    width: 14px;
}
.btn.btn-s.btn-model:before,
.btn.btn-s.btn-model:after {
    width: 12px;
    background-size: auto 14px;
}

@media only screen and (max-width: 640px) {
    .btn.btn-model:before,
    .btn.btn-model:after {
        width: 12px;
        background-size: auto 14px;
    }
}

/* historic button -------*/
.btn.btn-history:before,
.btn.btn-history:after {
    background: url(../images/buttons/historic.svg) 0 50% no-repeat;
    width: 15px;
}
.btn.btn-s.btn-history:before,
.btn.btn-s.btn-history:after {
    width: 11px;
    background-size: auto 12px;
}

@media only screen and (max-width: 640px) {
    .btn.btn-history:before,
    .btn.btn-history:after {
        width: 13px;
        background-size: auto 14px;
    }
}

/* statistics button -------*/
.btn.btn-statistics:before,
.btn.btn-statistics:after {
    background: url(../images/buttons/statistics.svg) 0 50% no-repeat;
    width: 17px;
}
.btn.btn-s.btn-statistics:before,
.btn.btn-s.btn-statistics:after {
    width: 13px;
    background-size: auto 12px;
}

/* contact button -------*/
.btn.btn-contact:before,
.btn.btn-contact:after {
    background: url(../images/buttons/contact.svg) 0 50% no-repeat;
    width: 17px;
}
.btn.btn-s.btn-contact:before,
.btn.btn-s.btn-contact:after {
    width: 14px;
    background-size: auto 12px;
}

/* facts --------------------*/
.btn.btn-facts:before,
.btn.btn-facts:after {
    background: url(../images/buttons/facts.svg) 0 50% no-repeat;
    width: 14px;
}
.btn.btn-s.btn-facts:before,
.btn.btn-s.btn-facts:after {
    width: 12px;
    background-size: auto 10px;
}

/* contact refresh ---------------*/
.btn.btn-refresh:before,
.btn.btn-refresh:after {
    background: url(../images/buttons/news-refresh.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-s.btn-refresh:before,
.btn.btn-s.btn-refresh:after {
    width: 15px;
    background-size: auto 12px;
}

/* generate ai  -------*/
.btn.btn-generate:before,
.btn.btn-generate:after {
    background: url(../images/buttons/generate.svg) 0 50% no-repeat;
    width: 21px;
}
.btn.btn-s.btn-generate:before,
.btn.btn-s.btn-generate:after {
    width: 15px;
    background-size: auto 12px;
}

/* generate ai copy -------*/
.btn.btn-generate-copy:before,
.btn.btn-generate-copy:after {
    background: url(../images/buttons/generate-text.svg) 0 50% no-repeat;
    width: 21px;
}

/* view website -------*/
.btn.btn-website:before,
.btn.btn-website:after {
    background: url(../images/buttons/website.svg) 0 50% no-repeat;
    width: 16px;
}
.btn.btn-website:before,
.btn.btn-website:after {
    width: 12px;
    background-size: auto 12px;
}

/* facebook -------*/
.btn.btn-facebook:before,
.btn.btn-facebook:after {
    background: url(../images/buttons/facebook.svg) 0 50% no-repeat;
    width: 9px;
}

/* X (previously twitter) -------*/
.btn.btn-twitter:before,
.btn.btn-twitter:after {
    background: url(../images/buttons/x.svg) 0 50% no-repeat;
    width: 18px;
}

/* wikipedia -------*/
.btn.btn-wikipedia:before,
.btn.btn-wikipedia:after {
    background: url(../images/buttons/wikipedia.svg) 0 50% no-repeat;
    width: 28px;
}

/* zillow -------*/
.btn.btn-zillow:before,
.btn.btn-zillow:after {
    background: url(../images/buttons/zillow.svg) 0 50% no-repeat;
    width: 18px;
}

/* forbes -------*/
.btn.btn-forbes:before,
.btn.btn-forbes:after {
    background: url(../images/buttons/forbes.svg) 0 50% no-repeat;
    width: 18px;
}

/* instagram -------*/
.btn.btn-instagram:before,
.btn.btn-instagram:after {
    background: url(../images/buttons/intsagram.svg) 0 50% no-repeat;
    width: 18px;
}

/* flickr -------*/
.btn.btn-flickr:before,
.btn.btn-flickr:after {
    background: url(../images/buttons/flickr.svg) 0 50% no-repeat;
    width: 18px;
}

/* linkedin -------*/
.btn.btn-linkedin:before,
.btn.btn-linkedin:after {
    background: url(../images/buttons/linkedin.svg) 0 50% no-repeat;
    width: 18px;
}

/* vimeo -------*/
.btn.btn-vimeo:before {
    background: url(../images/buttons/vimeo.svg) 0 50% no-repeat;
    width: 23px;
}

/* youTube -------*/
.btn.btn-youtube:before,
.btn.btn-youtube:after {
    background: url(../images/buttons/youtube.svg) 0 50% no-repeat;
    width: 26px;
}

/* tiktok -------*/
.btn.btn-tiktok:before,
.btn.btn-tiktok:after {
    background: url(../images/buttons/tiktok.svg) 0 50% no-repeat;
    width: 16px;
}

/* save changes button ------*/
button {
    cursor: pointer;
}
.saveButton span {
    height: 35px;
    line-height: 35px;
    display: block;
    background-image: url(/resources/images/buttons/save-search-tick-green.svg);
    background-position: 10px 0;
    background-repeat: no-repeat;
    padding: 0 0 0 37px;
}
.saveButton:hover span {
    background-position: 10px -35px;
}

/* search button ------------*/
.search-button {
    background-image: url(/resources/images/button_ico-search.svg);
    background-position: 12px 50%;
    padding-left: 40px;
}
.search-button:hover {
    background-position: 12px 50%;
}

/* advanced search --------*/
.advanced-search {
    position: relative;
    padding-left: 44px;
}
.advanced-search:before {
    background: url(/resources/images/icons/button_advanced-search.svg) 0 0 no-repeat;
    display: block;
    content: "";
    height: 18px;
    width: 18px;
    position: absolute;
    top: 8px;
    left: 16px;
}
.advanced-search:hover:before {
    background-position: 0 -18px;
}

/* add note button ------*/
.addNoteButton {
}

/* add notes small ---------*/
.buttonAddNoteS span {
    background: url(/resources/images/button_ico-notes-hover-sm.svg) 0 0 no-repeat;
    padding: 0 0 0 18px;
    margin: 0 0 0 10px;
}
.buttonAddNoteS:hover span {
    background-position: 0 -22px;
}

/* tick button -----*/
.btn.outline.tick-button {
    background: url(../images/icons/button-select-icon.svg) 16px 5px no-repeat #fff;
    padding-left: 37px;
}
.btn.outline.tick-button:hover,
.btn.outline.tick-button.active,
.btn.outline.tick-button.active:hover {
    background: url(../images/icons/button-select-icon.svg) 16px -20px no-repeat #0093ee;
    color: #fff;
    border: 1px solid #0093ee;
}

.btn.outline.tick-button.tick-small {
    line-height: 28px;
    padding-left: 33px;
    background-position: 13px 1px;
}
.btn.outline.tick-button.tick-small:hover,
.btn.outline.tick-button.tick-small.active,
.btn.outline.tick-button.tick-small.active:hover {
    background-position: 13px -24px;
}

.section-ourphotos .add-button,
.section-myphotos .add-button,
.section-photo-yachtshow .add-button,
.section-photo-shortlist .add-button {
    margin: 20px 0 0 0;
}

.section-ourphotos .btn.view-button,
.section-myphotos .btn.view-button {
    margin: 20px 0 0 0;
}

.btn.edit-button.bookmark-edit,
.btn.edit-button.contacts-edit {
    float: right;
    margin: 16px 20px 0 0;
}
.btn.right-aligned {
    float: right;
}

.btn.pdf-button,
.btn.doc-button,
.btn.ocx-button,
.btn.xsl-button,
.btn.lsx-button,
.btn.ods-button,
.btn.odt-button {
    font-size: 13px;
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: #0093ee;
    padding: 0 16px 0 36px;
    position: relative;
    border: 1px solid #e2eaef;
    line-height: 34px;
    background: #fff;
}
.btn.pdf-button:before {
    content: "";
    background: url(/resources/images/icons/pdf.svg) no-repeat;
    width: 15px;
    height: 16px;
    position: absolute;
    top: 9px;
    left: 13px;
    background-size: 43px auto;
}
.btn.doc-button:before,
.btn.ocx-button:before {
    /*docx*/
    content: "";
    background: url(/resources/images/icons/doc.svg) no-repeat;
    width: 18px;
    height: 21px;
    position: absolute;
    top: 7px;
    left: 11px;
    background-size: 58px auto;
}

.btn.xsl-button:before {
    content: "";
    background: url(/resources/images/icons/xsl.svg) no-repeat;
    width: 18px;
    height: 21px;
    position: absolute;
    top: 7px;
    left: 11px;
    background-size: 58px auto;
}

.btn.lsx-button:before {
    /*xlsx*/
    content: "";
    background: url(/resources/images/icons/xlsx.svg) no-repeat;
    width: 18px;
    height: 21px;
    position: absolute;
    top: 7px;
    left: 11px;
    background-size: 58px auto;
}

.btn.pdf-button:hover,
.btn.doc-button:hover,
.btn.ocx-button:hover,
.btn.xsl-button:hover,
.btn.lsx-button:hover,
.btn.ods-button:hover,
.btn.odt-button:hover {
    color: #fff;
    border: 1px solid #0093ee;
    background-color: #0093ee;
}
.btn.pdf-button:hover:before {
    background-position: -25px 0;
}
.btn.doc-button:hover:before,
.btn.ocx-button:hover:before,
.btn.xsl-button:hover:before,
.btn.lsx-button:hover:before,
.btn.ods-button:hover:before,
.btn.odt-button:hover:before {
    background-position: -34px 0;
}

/* visit website
--------------------------------------------------------*/
.visit-website {
    font-weight: 500;
    position: relative;
    padding-left: 42px;
}
.visit-website:before {
    display: block;
    content: "";
    width: 46px;
    height: 23px;
    background: url(/resources/images/icons/button_show-site.svg) 0 0 no-repeat;
    top: 9px;
    left: 12px;
    position: absolute;
}
.visit-website:hover:before {
    background-position: 0 -35px;
}

/* shortlist all ---------*/
.shortlist-all {
    position: relative;
    padding-left: 40px;
}
.shortlist-all:before {
    background: url(../images/icons/button-create-shortlist.svg) 0 -9px no-repeat;
    top: 8px;
    left: 14px;
    position: absolute;
    display: block;
    content: "";
    height: 20px;
    width: 20px;
}
.shortlist-all:hover:before {
    background-position: 0 -44px;
}

/*.notifications-btn
------------------------------------------------*/
.apps-btn,
.favourites-btn {
    width: 50px;
    height: 50px;
    float: right;
    cursor: pointer;
    transition: opacity 100ms linear;
    margin-right: 5px;
    margin-top: 10px;
}
/*.notifications-btn {*/
/*    background: url(/resources/images/icons/bell.svg) 50% 50% no-repeat;*/
/*    background-size: 18px auto;*/
/*}*/
.apps-btn {
    background: url(/resources/images/icons/apps.svg) 50% 50% no-repeat;
    background-size: 20px auto;
}
.favourites-btn {
    background: url(/resources/images-maby/heart-white.svg) 50% 50% no-repeat;
    background-size: 20px auto;
}
@media screen and (max-width: 640px) {
    header .favourites-btn {
        background: none;
    }
}

/*.notifications-btn:hover,*/
.apps-btn:hover {
    opacity: 0.8;
}

/* delete button */
.btn.button-delete {
    position: relative;
    padding-left: 34px;
}
.btn.button-delete:before {
    content: "";
    display: block;
    background: url(/resources/images/buttons/delete.svg) 0 0 no-repeat;
    height: 12px;
    width: 12px;
    position: absolute;
    top: 50%;
    left: 16px;
    margin-top: -5px;
    background-size: 10px auto;
}

/* profile buttons
----------------------------------------------*/
.profile-btn {
    float: right;
    cursor: pointer;
    transition: opacity 100ms linear;
    margin: 10px 5px 0 10px;
    display: flex;
    /*max-width: 165px;*/
    position: relative;
    width: 94px;
    border: 1px solid #fff;
    border-radius: 40px;
}
.profile-btn .menu-icon-rhs {
    flex: 0 0 50px;
    height: 48px;
    background: url(/resources/images/main-menu/menu-icon-rhs.svg?v=3) 17px 14px no-repeat;
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 0;
    border: 0;
    transition: opacity 75ms linear;
    background-color: transparent;
    background-size: 22px auto;
}
.profile-btn:hover .menu-icon-rhs {
    opacity: 0.8;
}
.profile-btn .image-profile {
    flex: 0 0 36px;
    overflow: hidden;
    border-radius: 100%;
    border: 2px solid #fff;
    width: 36px;
    height: 36px;
    margin: 6px 0 0 0;
}
.profile-btn .profile-name {
    flex: 0 1 auto;
    color: #fff;
    font-size: 14px;
    line-height: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 125px;
    padding: 9px 24px 0 10px;
    position: relative;
}
.profile-btn .profile-name:after {
    content: "";
    position: absolute;
    top: 9px;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(/resources/images/forms/drop-arrow-light.svg) 50% 50% no-repeat;
    background-size: 12px auto;
}

.profile-btn .notification-count {
    position: absolute;
    top: 0;
    right: -6px;
    background: #ff3300;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 100%;
    display: none;
}
.profile-btn.has-notification .notification-count {
    display: block;
}

.map-container {
    position: relative;
}
.full-view-map-btn {
    position: absolute !important;
    top: -5px;
    left: 21px;
    z-index: 100;
    box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.16);
}
.full-view-map-btn:not(.map-expanded) .expanded {
    display: none;
}
.full-view-map-btn.map-expanded .minified {
    display: none;
}

/* buttons on the dashboard graphs */
.btn.outline.inline-doughnut-label:hover {
    color: #fff;
}
.btn.outline.inline-doughnut-label:hover a:hover {
    color: #fff;
}
.btn.btn-loading {
    padding-left: 40px;
}
.btn.btn-loading:before {
    content: "";
    position: absolute;
    border-radius: 100%;
    right: 6px;
    top: 50%;
    width: 0px;
    height: 0px;
    margin-top: -2px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-left-color: #000;
    border-top-color: #000;
    animation:
        btn-loading-spin 0.6s infinite linear,
        btn-loading-grow 0.3s forwards ease-out;
}
@keyframes btn-loading-spin {
    to {
        transform: rotate(359deg);
    }
}
@keyframes btn-loading-grow {
    to {
        width: 14px;
        height: 14px;
        margin-top: -8px;
        right: 13px;
    }
}

[class*="width-"] {
    padding-left: 0;
    padding-right: 0;
}

.width-s1 {
}
.width-s4 {
}
.width-s5 {
}
.width-s6 {
}
.width-s7 {
}
.width-s8 {
}
.width-s9 {
}
.width-s10,
.btn.width-s10 {
    width: 50px;
    padding-left: 0;
    padding-right: 0;
}
.width-s11. .btn.width-s11 {
    width: 55px;
    padding-left: 0;
    padding-right: 0;
}
.width-s12,
.btn.width-s12 {
    width: 60px;
    padding-left: 0;
    padding-right: 0;
}
.width-s13,
.btn.width-s13 {
    width: 65px;
    padding-left: 0;
    padding-right: 0;
}
.width-s14,
.btn.width-s14 {
    width: 70px;
    padding-left: 0;
    padding-right: 0;
}
.width-s15,
.btn.width-s15 {
    width: 75px;
    padding-left: 0;
    padding-right: 0;
}
.width-s16,
.btn.width-s16 {
    width: 80px;
    padding-left: 0;
    padding-right: 0;
}
.width-s17,
.btn.width-s17 {
    width: 85px;
    padding-left: 0;
    padding-right: 0;
}
.width-s18,
.btn.width-s18 {
    width: 90px;
    padding-left: 0;
    padding-right: 0;
}
.width-s19,
.btn.width-s19 {
    width: 95px;
    padding-left: 0;
    padding-right: 0;
}
.width-s20,
.btn.width-s20 {
    width: 100px;
    padding-left: 0;
    padding-right: 0;
}
.width-s21,
.btn.width-s21 {
    width: 105px;
    padding-left: 0;
    padding-right: 0;
}
.width-s22,
.btn.width-s22 {
    width: 110px;
    padding-left: 0;
    padding-right: 0;
}
.width-s23,
.btn.width-s23 {
    width: 115px;
    padding-left: 0;
    padding-right: 0;
}
.width-s24,
.btn.width-s24 {
    width: 120px;
    padding-left: 0;
    padding-right: 0;
}
.width-s25,
.btn .width-s25 {
    width: 125px;
    padding-left: 0;
    padding-right: 0;
}
.width-s26,
.btn.width-s26 {
    width: 130px;
    padding-left: 0;
    padding-right: 0;
}
.width-s27,
.btn.width-s27 {
    width: 135px;
    padding-left: 0;
    padding-right: 0;
}
.width-s28,
.btn.width-s28 {
    width: 140px;
    padding-left: 0;
    padding-right: 0;
}
.width-s29,
.btn.width-s29 {
    width: 145px;
    padding-left: 0;
    padding-right: 0;
}
.width-s30,
.btn.width-s30 {
    width: 150px;
    padding-left: 0;
    padding-right: 0;
}
.width-s31,
.btn.width-s31 {
    width: 155px;
    padding-left: 0;
    padding-right: 0;
}
.width-s32,
.btn.width-s32 {
    width: 160px;
    padding-left: 0;
    padding-right: 0;
}
.width-s33,
.btn.width-s33 {
    width: 165px;
    padding-left: 0;
    padding-right: 0;
}
.width-s34,
.btn.width-s34 {
    width: 170px;
    padding-left: 0;
    padding-right: 0;
}
.width-s35,
.btn.width-s35 {
    width: 180px;
    padding-left: 0;
    padding-right: 0;
}
.width-s36,
.btn.width-s36 {
    width: 185px;
    padding-left: 0;
    padding-right: 0;
}
.width-s37,
.btn.width-s37 {
    width: 190px;
    padding-left: 0;
    padding-right: 0;
}
.width-s38,
.btn.width-s38 {
    width: 195px;
    padding-left: 0;
    padding-right: 0;
}
.width-s39,
.btn.width-s39 {
    width: 200px;
    padding-left: 0;
    padding-right: 0;
}
.width-s100,
.btn.width-s100,
button.width-S100 {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}