/* =SHARED
-------------------------------------------------------------------------------------------------------------------- */

div.notice {
    padding:            1.5em;
    border-radius:      3px;
    background-color:   #8a9e9d;
    color:              white;
    font-weight:        300;
    font-size:          1.1rem;
    margin-bottom:      1.5em;
}
div.notice.info {
    background-color:   #d55404;
}
.hidden-submit {
    display:                none;
}



/* =SIMPLE AD + REVIEW FORM
-------------------------------------------------------------------------------------------------------------------- */

form.squelch-form {
    display: flex;
    flex-wrap: wrap;
    border-bottom: none;
}

.squelch-form .row {
    display: flex;
    margin-left: 0;
    margin-right: 0;
}

.squelch-form label {
    display: block;
    width: 100%;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.squelch-form label span.info > em {
    font-weight: 400;
}

.squelch-form .row div.half input,
.squelch-form label {
    display: block;
}

.squelch-form textarea,
.squelch-form input,
.squelch-form input[type=url],
.squelch-form input[type=tel],
.squelch-form input[type=email],
.squelch-form input[type=text],
.squelch-form select {
    box-sizing: border-box;
    background-color: #eee;
    border: none;
    padding: 1em;
    color: #668a7f;
    border-radius: 3px;
    margin-bottom: 1.5em;
    font-style: italic;
    font-weight: 500;
}

.squelch-form select {
    height: 54px;
    opacity: 1;
    font-weight: 500;
}

.squelch-form select.bfsfilter {
    height: auto;
}

.squelch-form select > option {
    background-color: white;
    color: black;
}

.squelch-form input[type=file] {
    background-color: transparent;
}

.squelch-form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color:          #ccc;
    font-style:     italic;
    opacity:        0.7;
    font-weight:    400;
    font-size:      0.8125rem;
}
.squelch-form ::-moz-placeholder { /* Firefox 19+ */
    color:          #ccc;
    font-style:     italic;
    opacity:        0.7;
    font-weight:    400;
    font-size:      0.8125rem;
}
.squelch-form :-ms-input-placeholder { /* IE 10+ */
    color:          #ccc;
    font-style:     italic;
    opacity:        0.7;
    font-weight:    400;
    font-size:      0.8125rem;
}
.squelch-form :-moz-placeholder { /* Firefox 18- */
    color:          #ccc;
    font-style:     italic;
    opacity:        0.7;
    font-weight:    400;
    font-size:      0.8125rem;
}

.squelch-form .subheader {
    flex-basis: 100%;
}

#primary .squelch-form .subheader h3 {
    padding-bottom: 7px;
    border-bottom: 1px solid #2f4f4f;
}

.squelch-form textarea,
.squelch-form input,
.squelch-form select {
    min-width: 100%;
}

.squelch-form textarea {
    height:     15em;
}

.squelch-form input[type=checkbox] {
    min-width: 0;
    margin-right:   0.75em;
}

.squelch-form .bfs-categories-list {
    box-sizing:     border-box;
    padding:        1em;
    border:         1px solid #ccc;
    height:         10rem;
    overflow-y:     scroll;
    margin-bottom:  1.5em;
}
.squelch-form .bfs-categories-list > label {
    margin-bottom:  0;
}

.squelch-form .row div.half + div.half {
    margin-left: 1.1em;
}

.squelch-form .row > div {
    flex-basis: 100%;
}

.squelch-form .row div.half {
    flex-basis: 50%;
}

.squelch-form > div.buttons,
.squelch-form > div > div.buttons {
    display: flex;
    flex-basis: 100%;
    justify-content: flex-end;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    padding-top: 0.75em;
    padding-bottom: 0.95em;
    margin-top: 2em;
}

.squelch-form .simple-listing div.details div.buttons {
    margin-top: 1em;
}

.squelch-form div.buttons > .fw-button + .fw-button {
    margin-left: 1em;
}

.squelch-form div.buttons > a.button.left {
    margin-right: auto;
}

.squelch-form span.fw-button > label.submit,
.squelch-form span.fw-button > input[type=submit] {
    box-sizing:     border-box;
    background-color: #d55404;
    color: #fff;
    border-radius: 2px;
    text-transform: uppercase;
    padding: .5em 0.65em;
    font-weight: 700;
    display: inline-block;
    width: auto;
    border: 1px solid #d55404;
}

.squelch-form span.fw-button > label.submit,
.squelch-form span.fw-button > input[type=submit]:hover {
    cursor: pointer;
}

.squelch-form span.fw-button.outline > label.submit,
.squelch-form span.fw-button.outline > input[type=submit] {
    color: #d55404;
    background-color: #fff;
    border: 1px solid #d55404;
}

.bfs-navigation {
    flex-basis: 100%;
    display: flex;
}

.bfs-navigation > span {
    flex-basis: 25%;
    position: relative;
    overflow: visible;
}

.bfs-navigation > span > input {
    background-color:       #fff;
    border:                 2px solid #668a7f;
    color:                  #668a7f;
    text-transform:         uppercase;
    font-weight:            600;
    border-right:           none;
    position:               relative;
    z-index:                998;
    font-style:             normal;
}
.bfs-navigation > span > input:not([disabled]) {
    cursor:                 pointer;
}

.bfs-navigation > span:after {
    content:                '';
    position:               absolute;
    right:                  -20px;
    top:                    9px;
    width:                  38px;
    height:                 38px;
    background-color:       #fff;
    transform:              rotate(45deg);
    border:                 2px solid #668a7f;
    z-index:                999;
    border-bottom:          none;
    border-left:            none;
}
.bfs-navigation > span > input:active,
.bfs-navigation > span:active:after {
    color:                  white;
    background-color:       #1e7057;
}

.bfs-navigation > span.current:after {
    background-color: #668a7f;
}

.bfs-navigation > span:last-child:after {
    width: 0;
    height: 0;
}
.bfs-navigation > span:first-child {
    flex-basis: 23%;
}

.bfs-navigation > span:last-child {
    flex-basis: 26%;
}

.bfs-navigation > span:first-child > input {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.bfs-navigation > span:last-child > input {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: 2px solid #668a7f;
}

.bfs-navigation > span > input[disabled=disabled] {
    background-color: #668a7f;
    color: #fff;
}

form.squelch-form .bfs-navigation {
    flex-basis: 100%;
    overflow: hidden;
}

form.squelch-form .main-form {
    flex-basis: 66.6%;
}

.squelch-form .help-text {
    position:                       absolute;
    right:                          0;
    width:                          300px;
}

form.squelch-form .simple-listing-form .sqf-preview-wrap > .sqf-preview-image {
    width: 100%;
}

form.squelch-form .simple-preview {
    border-bottom:                  1px solid #d1d1d1;
    margin-bottom:                  2em;
    margin-top:                     2em;
    width:                          100%;
}

form.squelch-form .complete-preview {
    margin-top: 2em;
}



/* =FLOATING "SELL YOUR BOAT" BUTTON
-------------------------------------------------------------------------------------------------------------------- */

.wb-floating-sell-button {
    position:               fixed;
    bottom:                 0;
    right:                  0;
    width:                  auto;
    z-index:                999;
}
.wb-floating-sell-button .sell-button {
    background-color:       #d55404;
    display:                block;
    color:                  #fff;
    padding:                1em 2em;
    border-radius:          30px;
    margin-bottom:          10px;
    margin-right:           10px;
    text-align:             center;
}



/* =AD ARCHIVES *OUTSIDE OF A VERTICAL TAB* (see below for rules for inside vertical tabs)
-------------------------------------------------------------------------------------------------------------------- */

.wb-ads-shortcode {
    box-sizing:             border-box;

    width:                  100vw;
    padding:                1.5rem 0 0 0;
    margin:                 0 0 1.5rem calc( 50% - 50vw );
}

/* The title above the shortcode
   Unpleasant selector due to specificity of rules that need to be overridden */

#primary .wb-ads-shortcode > h2 {
    color:                  #000;
    text-align:             center;
    font-size:              1rem;
    margin:                 0 0 0.8125rem 0;
    padding:                1.5rem 0 1.5rem 0;
    font-weight:            bold;
    text-transform:         uppercase;
}

.wb-ads-shortcode .wb-ads-shortcode-wrapper {
    max-width:              1000px;
    margin-left:            auto;
    margin-right:           auto;

    display:                flex;
    flex-flow:              row wrap;
    justify-content:        left;
    align-items:            stretch;
    align-content:          space-around;
}
@media screen and ( max-width: 1152px ) {
    .wb-ads-shortcode .wb-ads-shortcode-wrapper {
        max-width:              calc( 100% - 32px );
        margin-left:            auto;
        margin-right:           auto;
    }
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs {
    flex-basis:             calc( 33.333% - 1rem );
    margin:                 0 1.5rem 1.5rem 0;
    position:               relative;

    border:                 0;

    background-color:       #ebebeb;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs.sold {
    opacity:                0.5;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(3n) {
    margin-right:           0;
}
/* 2-col for tablets */
@media screen and ( max-width: 768px ) {
    .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs {
        flex-basis:             calc( 50% - 0.75rem );
    }
    .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(3n) {
        margin-right:           1.5rem;
    }
    .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(2n) {
        margin-right:           0;
    }
}
/* 1-col for phones */
@media screen and ( max-width: 425px ) {
    .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs > .entry-content {
        padding-top:            0;
    }
    .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs {
        flex-basis:             100%;
        margin:                 0 0 1.5rem 0;
    }
    .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(3n) {
        margin-right:           0;
    }
    .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(2n) {
        margin-right:           0;
    }
}

.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .crop-img-wrap {
    display:                block;
    width:                  100%;
    padding-bottom:         66%;

    background-repeat:      no-repeat;
    background-size:        cover;
    background-position:    center center;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .crop-img-wrap > img {
    display:                none;
}

.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details {
    padding:                1rem;
    overflow-wrap:          anywhere;
}


/* Unpleasant selector due to specificity of rules that need to be overridden */

#primary .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > h3 {

    min-height:             3.25rem;

    color:                  #2f4f4f;
    text-align:             left;
    font-size:              1rem;
    margin:                 0 0 1rem 0;
    padding:                0;
    font-weight:            500;
}

.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .region {
    color:                  #d55404;
    font-weight:            300;
    display:                block;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .location {
    color:                  #d55404;
    font-weight:            300;
    display:                block;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .tagline {

    min-height:             3rem;

    color:                  #000;
    font-weight:            600;
    margin-bottom:          1.18rem;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .short-description {
    color:                  #000;
    font-weight:            300;
    margin-bottom:          3.25rem;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .buttons {
    position:               absolute;
    bottom:                 1rem;
    left:                   1rem;
    right:                  1rem;
    text-align:             right;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .buttons > .fw-button > a {
    font-size:              14px;
    color:                  #d55404;
    background-color:       #fff;
    border:                 1px solid var( --fw-orange );
    padding:                0.2625rem 0.7rem;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .buttons > .fw-button > a:hover {
    color:                  #fff;
    background-color:       #d55404;
    background-color:       var( --fw-orange );
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .buttons > .fw-button.contact-email > a,
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .buttons > .fw-button.contact-view-listing > a {
    color:                  #fff;
    background-color:       #d55404;
    background-color:       var( --fw-orange );
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .buttons > .fw-button.contact-email > a:hover,
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs .details > .buttons > .fw-button.contact-view-listing > a:hover {
    background-color:       #8c4113;
    background-color:       #d55404;
}


/* Special rules for the preview version of an ad: */

.wb-ads-shortcode > p.preview-explainer {
    max-width:              1000px;
    margin:                 1rem auto 2rem auto;
    text-align:             center;
    font-style:             italic;
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs.blurred-preview {
    filter:                 blur(4px);
    opacity:                0.5;
}


/* The "SOLD!" flash that is shown inside of an ad once marked as sold */

.wb-ads-shortcode .wb-ads-shortcode-wrapper .crop-img-wrap > .offer-disc {
    font-size: 0.8rem;
    position: absolute;
    top: 1em;
    right: 1em;
    width: 5em;
    height: 5em;
    padding: 0.5em;
    border-radius: 3em;
    background-color: #d95404;
    text-align: center;
    color: white;
    line-height: 6em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 2px rgba(0,0,0, 0.5);
}
.wb-ads-shortcode .wb-ads-shortcode-wrapper .crop-img-wrap > .offer-disc > .offer-block-text {
    font-family: 'Merriweather', serif;
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1;
    display: block;
    transform: rotate(-3deg);
}

.wb-ads-shortcode .wb-ads-shortcode-wrapper h3.for-sale span.price.sold {
    text-decoration:    line-through;
}




/* =AD ARCHIVES _INSIDE_ OF A VERTICAL TAB
-------------------------------------------------------------------------------------------------------------------- */

.squelch-vt-tab-contents .wb-ads-shortcode {
    width:                  100%;
    padding:                0;
    margin:                 0;
}

.squelch-vt-tab-contents .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs {
    flex-basis:             calc( 50% - 1rem );
}
.squelch-vt-tab-contents .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(3n) {
    margin-right:           1.5rem;
}
.squelch-vt-tab-contents .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(2n) {
    margin-right:           0;
}
/* 1-col for tablets and phones */
@media screen and ( max-width: 768px ) {
    .squelch-vt-tab-contents .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs > .entry-content {
        padding-top:            0;
    }
    .squelch-vt-tab-contents .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs {
        flex-basis:             100%;
        margin:                 0 0 1.5rem 0;
    }
    .squelch-vt-tab-contents .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(3n) {
        margin-right:           0;
    }
    .squelch-vt-tab-contents .wb-ads-shortcode .wb-ads-shortcode-wrapper > article.fw-bfs:nth-child(2n) {
        margin-right:           0;
    }
}



/* =PAGINATION BARS
-------------------------------------------------------------------------------------------------------------------- */

.pagination-bar {

    margin-top:             1em;
    margin-bottom:          1em;

    box-sizing:             border-box;

    display:                flex;
    justify-content:        center;

}

.pagination-bar > .page-numbers {

    width:                  50px;
    height:                 50px;
    line-height:            50px;
    vertical-align:         middle;

    color:                  white;
    background-color:       var( --fw-orange );
    border-radius:          3px;

    text-align:             center;
    font-weight:            normal;

    margin:                 5px;

}
.pagination-bar > a.page-numbers:hover {
    background-color:       #d55404;
    text-decoration:        none;
}

.pagination-bar > .page-numbers.current {
    font-weight:            bold;
}

.pagination-bar > .page-numbers.prev,
.pagination-bar > .page-numbers.next {
    font-size:              0;
}

.pagination-bar > .page-numbers.prev:before,
.pagination-bar > .page-numbers.next:before {


    font-size:              2rem;
    vertical-align:         middle;

    font-weight:            900;
    font-family:            "Font Awesome 5 Free";
    -moz-osx-font-smoothing:grayscale;
    font-style:             normal;
    font-variant:           normal;
    text-rendering:         auto;
    line-height:            1;
    text-indent:            0;

    position:               relative;

}

.pagination-bar > .page-numbers.prev:before {
    content:                "\f0d9";
    left:                   -3px;
}
.pagination-bar > .page-numbers.next:before {
    content:                "\f0da";
    left:                   3px;
}



/* =SINGLE ADS
-------------------------------------------------------------------------------------------------------------------- */

.complete-listing .row {
    display:                flex;
    align-items:            stretch;
    /*flex-wrap:              wrap;*/
    width:                  100%;
}

.complete-listing .row .image-column,
.complete-listing .row .short-details {
    width:                  50%;
    box-sizing:             border-box;
}
.complete-listing .row .image-column {
    display:                flex;
    flex-direction:         column;
    justify-content:        space-between;
}


.complete-listing .row .short-details {
    padding:                0 2em;
}

#content .complete-listing .row .details h2.for-sale > span.sold {
    color:                  #ff0000;
}

#content .complete-listing .row .short-details h2.for-sale {
    font-size:              1.5em;
    color:                  #668a7f;
    font-weight:            700;
    text-transform:         uppercase;
    margin-bottom:          0.3em;
}

#content .complete-listing .row .short-details h2.for-sale span.price {
    font-size:              1.5em;
    color:                  #d95404;
    display:                block;
    margin-top:             0.25em;
}

#primary .complete-listing h3.for-sale {
    font-size:              1.4rem;
}
#main #content .complete-listing .row .short-details p.tagline {
    font-size:              1.1rem;
}

#content .squelch-form .fw-button.black-bg > label,
.fw-button.black-bg > a {
    background-color:       #333;
    border-color:           #333;
}

.complete-listing div.disclaimer > p {
    text-align:             center;
}

#main #content .complete-listing div.disclaimer > p {
    margin-top:             2em;
    padding-top:            2em;
    border-top:             1px solid #efefef;
    font-size:              0.7em;
}

.complete-listing table.details,
.complete-listing table.details td {
    border:                 none;
}

.complete-listing table.details td {
    font-size:              0.95em;
}

.complete-listing table.details th,
.complete-listing table.details td {
    padding:                3px 0 3px;
    line-height:            1.1em;
    font-size:              14px;
    letter-spacing:         0;
}

.complete-listing table.details th {
    text-transform:         none;
    width:                  125px;
}

.complete-listing table.details th strong {
    color:                  #333;
}

.complete-listing div.contact {
    margin-bottom:          2em;
}

.complete-listing #boat-meta {
    overflow:               hidden;
    margin-bottom:          2rem;
}

.complete-listing #boat-meta ul#boat-meta-attributes li {
    width:                  100%;
}

.single-fw-bfs .short-details .buttons {
    padding:                1rem;
    background-color:       var( --fw-light-gray );
    overflow:               hidden;
    border-radius:          0.25rem;
    margin-bottom:          2rem;
}


@media screen and (max-width: 768px) {
    .complete-listing .row {
        flex-wrap:          wrap;
    }
    .complete-listing .row .image-column,
    .complete-listing .row .short-details {
        flex-basis:         100%;
        padding-left:       0;
        padding-right:      0;
    }
}
/* Old break point for media selector above
@media screen and (max-width: 425px) {
}
*/



/* =BOATSHED CTA
-------------------------------------------------------------------------------------------------------------------- */

.complete-listing .row .image-column .fw-bfs-boatshed-cta {
    box-sizing:             border-box;
    padding:                1rem;
    background-color:       #f5f5f5;
}



/* =SINGLE - IMAGES
-------------------------------------------------------------------------------------------------------------------- */

.single-fw-bfs .sect-cover.cover {
    padding-bottom: 6.6%;
    background-position: bottom;
    box-sizing: border-box;
    min-height: 127px;
}

.simple-listing-form,
.complete-listing-form {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}


.complete-listing-form .sqf-preview-image .fwbfs-thumb {
    display:                        block;
    padding:                        0 0.5rem;
    text-align:                     center;
    color:                          #d55404;
    position:                       relative;
    font-size:                      0.875rem;
}

.complete-listing-form .sqf-preview-image .fwbfs-thumb:hover {
    cursor:                         pointer;
}

.complete-listing-form .sqf-preview-image .fwbfs-thumb:after {
    font-family:                    "Font Awesome 5 Free";
    font-weight:                    600;
    content:                        "";

    font-size:                      0.875rem;

    display:                        block;

    margin-left:                    auto;
    margin-right:                   auto;
}

.complete-listing-form .sqf-preview-image .fwbfs-thumb.selected {
    color:                          #aaa;
    cursor:                         default;
    text-decoration:                none !important;    /* MTL: Disables underlining in :hover, should be safe usage */
}
.complete-listing-form .sqf-preview-image .fwbfs-thumb.selected:after {
    content:                        "\f00c";
}

.squelch-form .complete-listing-form .sqf-preview-wrap {
    width:                          100%;
    margin-top:                     4.4rem;
    align-items:                    flex-start;
}

.squelch-form .complete-listing-form .thumb-and-banner {
    width:                          100%;
}

.squelch-form .complete-listing-form .thumb-and-banner .thumb {
    text-align:                     center;
}

.squelch-form .complete-listing-form .thumb-and-banner .thumb h3 {
    text-align: center;
    color: #668a7f;
}

.squelch-form .complete-listing-form .thumb-and-banner .thumb img {
    width:                          100%;
    height:                         auto;
    max-width:                      147px;
    padding:                        0;
}

.squelch-form .complete-listing-form .image_upload {
    display: flex;
    flex-wrap: wrap;
}

.squelch-form .simple-listing-form .sqf-preview-wrap {
    width: auto;
    flex-basis: 200px;
    margin-left: 1em;
}

a.sqf-delete {
    color: red;
    position: absolute;
    top: 0;
    right: -5px;
}

.complete-listing-form div.thumb-and-banner {
    display: none;
}

.squelch-form > .buttons input[type=submit],
.squelch-form input[type=submit].revieworder_edit_ad,
.squelch-form input[type=submit].revieworder_delete_ad,
.squelch-form input[type=submit].myads_edit_ad,
.squelch-form input[type=submit].myads_delete_ad,
.squelch-form input[type=submit].myads_view_ad,
.squelch-form input[type=submit].myads_renew_ad,
.squelch-form input[type=submit].myads_sold_ad,
.simple-listing-form   input[type=submit],
.simple-listing-form   input[type=file],
.complete-listing-form input[type=submit],
.complete-listing-form input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    min-width: 0;
}

.squelch-form > .buttons label.submit,
.simple-listing-form     label.submit,
.simple-listing-form     label.file-input-button,
.complete-listing-form   label.submit,
.complete-listing-form   label.file-input-button {
    box-sizing:     border-box;

    background-color: #262a2e;
    color: #fff;
    border-radius: 2px;
    text-transform: uppercase;
    padding: .5em 2em .5em 1em;
    font-weight: 700;
    display: inline-block;
    width: auto;
    border: 1px solid #262a2e;
    cursor: pointer;
    height: 43px;
    margin-top: 3px;
}

.complete-listing-form label.submit {
    box-sizing:     border-box;

    background-color: #d95404;
    border-color: #d95404;
}

.simple-listing-form   div.price,
.complete-listing-form div.price {
    position: relative;
}

.simple-listing-form   div.price:before,
.complete-listing-form div.price:before {
    content: '\20AC';
    position: absolute;
    top: 47px;
    left: 15px;
    color: #668a7f;
}

.simple-listing-form div.price   > input,
.complete-listing-form div.price > input {
    padding-left: 2em;
}

.simple-listing-form label.file-input-button   > i,
.complete-listing-form label.file-input-button > i {
    color: #668a7f;
    padding-right: 0.5em;
}

.complete-listing-form .fw-button label.submit > i {
    color: #fff;
    padding-right: 0.5em;
}

.complete-listing-form .fw-button.outline label.submit > i {
    color: #d95404;
}

.complete-listing-form p.file-input-label {
    padding-left: 2em;
    width: 54%;
}

.sqf-error {
    border: 1px solid red;
    padding: 10px 15px;
    color: red;
    margin-bottom: 2em;
    display: block;
}

.complete-preview .complete-details {
    margin-top: 2em;
}

@media screen and (max-width: 768px) {
    .single-fw-bfs .sect-cover.cover {
        padding-bottom: 0;
        min-height: 0;
        height: 0;
    }
}


/* END COMPLETE AD */



/* =SINGLE - CONTACT FORM
-------------------------------------------------------------------------------------------------------------------- */

.wb-bfs-contact-form-placeholder,
.wb-bfs-contact-form-placeholder * {
    box-sizing:                 border-box;
}
.wb-bfs-contact-form-placeholder {
    display:                    none;
    margin:                     6rem 0;
    padding:                    4rem;
    overflow:                   hidden;
    background-color:           #fafafa;
    border-radius:              2px;
}
.wb-bfs-contact-form-placeholder label {
    display:                    block;
    margin:                     1.5rem 0 0.75rem 0;
}
.wb-bfs-contact-form-placeholder input[type=text],
.wb-bfs-contact-form-placeholder input[type=email],
.wb-bfs-contact-form-placeholder textarea {
    width:                      100%;
    background-color:           #fff;
    border-radius:              2px;
}
.wb-bfs-contact-form-placeholder input[type=text].error,
.wb-bfs-contact-form-placeholder input[type=email].error,
.wb-bfs-contact-form-placeholder textarea.error {
    border-color:               red;
    background-color:           #fee;
}
.wb-bfs-contact-form-placeholder textarea {
    padding:                    1rem;
    height:                     15rem;
}
.wb-bfs-contact-form-placeholder input[type=submit] {
    display:                    block;
    margin:                     2rem 0 0 auto;
    border:                     0;
    background-color:           #d55404;
    color:                      #fff;
    border-radius:              2px;
    text-transform:             uppercase;
    padding:                    0.5rem 2rem;
    font-weight:                bold;
    cursor:                     pointer;
}
.wb-bfs-contact-form-placeholder input[type=submit].disabled {
    background-color:           #aaa;
    cursor:                     wait;
}

.wb-bfs-contact-form-placeholder > div.msg {
    padding:                    0.5rem;
    border:                     1px solid #aaa;
    border-left:                5px solid #aaa;
}



/* =SIMPLE AD
-------------------------------------------------------------------------------------------------------------------- */

.bfs nav#nav-above,
.page-template-template-fw-bfs-home nav#nav-above,
.post-type-archive-fw-bfs nav#nav-above {
    padding-bottom: 4em;
}

.complete-listing-form .images,
.simple-listing-form .images {
    display: flex;
    flex-basis: 66%;
    align-items: flex-end;
    justify-content: space-between;
}

@media screen and (max-width: 1024px) {
    .simple-listing .buttons > .fw-button > a {
        padding-left: 1.75em;
        padding-right: 1.75em;
    }
}


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

    .bfs .fw-button.black-bg,
    .page-template-template-fw-bfs-home .fw-button.black-bg,
    .post-type-archive-fw-bfs .fw-button.black-bg {
        display: inline-block;
        margin-bottom: 1em;
    }

    .simple-listing .buttons > .fw-button > a {
        padding-left: 1.5em;
        padding-right: 1.5em;
        font-size: 13px;
    }
}

@media screen and (max-width: 425px) {
    .simple-listing .row {
        flex-wrap: wrap;
    }

    .simple-listing .row .image-column,
    .simple-listing .row .details {
        flex-basis: 100%;
    }

    .simple-listing .row .image-column img.thumbnail,
    .simple-listing .row .image-column {
        margin-bottom: 0;
    }

    .simple-listing .row .details {
        padding: 2em 0;
    }

    #content .simple-listing .row .details h2.for-sale {
        font-size: 1.4em;
    }

    div.call-to-action.small {
        display: block;
        padding-top: 1.5em;
    }

    .simple-listing .row .image-column img.thumbnail {
        width: 100%;
        height: auto;
    }

    .bfs #content,
    .page-template-template-fw-bfs-home #content,
    .post-type-archive-fw-bfs #content {
        margin-top: 1.25em;
    }

    .simple-listing .buttons > .fw-button > a {
        padding-left: 1.65em;
        padding-right: 1.65em;
    }
}

@media screen and (max-width: 375px) {
    .simple-listing .buttons > .fw-button > a {
        font-size: 12px;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: 0.75em;
        padding-bottom: 0.75em;
    }
}

@media screen and (max-width: 320px) {
    #content .simple-listing .row .details h2.for-sale {
        font-size: 1.5em;
    }

    #main div.call-to-action > h3 {
        font-size: 17px;
    }
}

@media screen and (max-width: 768px) {
    form.squelch-form .help {
        display: none;
    }

    form.squelch-form .main-form {
        flex-basis: 100%;
    }
}



/* =REVIEW ORDER / MY ADS
-------------------------------------------------------------------------------------------------------------------- */

.squelch-form.fwbfs-my-ads tr.my-ads-button-row td,
.squelch-form.fwbfs-my-ads tr.my-ads-incomplete-ads-row td,
.squelch-form.fwbfs-my-ads tr.my-ads-live-ads-row td {
    border-top:         0;
}

.squelch-form.fwbfs-my-ads tr.my-ads-button-row td {
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
}

.squelch-form.fwbfs-my-ads table tr td,
.squelch-form.fwbfs-my-ads table tr,
.squelch-form.fwbfs-my-ads table,
.squelch-form.review-order table tr td,
.squelch-form.review-order table tr,
.squelch-form.review-order table {
    vertical-align:         top;
    padding-top:            1.15em;
    padding-bottom:         1.15em;
    overflow-wrap:          anywhere;
}
.squelch-form.fwbfs-my-ads table tr td.price,
.squelch-form.review-order table tr td.price {
    overflow-wrap:          break-word;
}

.squelch-form.fwbfs-my-ads table tr.sold {
    opacity:        0.5;
}


.squelch-form.fwbfs-my-ads table {
    padding-bottom: 0;
}

.squelch-form.fwbfs-my-ads td.thumb,
.squelch-form.fwbfs-my-ads td.thumb > img,
.squelch-form.review-order td.thumb,
.squelch-form.review-order td.thumb > img {
    width: 65px;
}

.squelch-form.fwbfs-my-ads td.make,
.squelch-form.review-order td.make {
    width: 300px;
    color: #668a7f;
    text-transform: uppercase;
    font-weight: 700;
    padding-left: 0.4em;
    font-size: 12px;
}
.squelch-form.fwbfs-my-ads td.make > span.new-expiry-date,
.squelch-form.review-order td.make > span.new-expiry-date {
    color:          black;
}

.squelch-form.fwbfs-my-ads td.expiry,
.squelch-form.fwbfs-my-ads td.contact-name,
.squelch-form.fwbfs-my-ads td.region,
.squelch-form.review-order td.contact-name,
.squelch-form.review-order td.region {
    color:                  #333;
    font-size:              12px;
    font-weight:            600;
    width:                  20%;
}

.squelch-form.fwbfs-my-ads td.button-column,
.squelch-form.review-order td.button-column {
    width: 321px;
}

.squelch-form td.button-column > label.submit {
    box-sizing:     border-box;
    display: inline;
    color: red;
    font-size: 12px;
}

.squelch-form td.button-column > .fw-button > label.submit {
    box-sizing:     border-box;

    background-color: #333;
    border-color: #333;
    font-size: 12px;

    margin-bottom: 0;
}

.squelch-form td.button-column > label.submit:hover {
    cursor: pointer;
}

.delete {
    color:              red;
    margin-left:        1em;
    margin-right:       1em;
}

.bfs-thankyou {
    margin-bottom: 2em;
}

.bfs-thankyou span.message,
.bfs-thankyou span.message > strong {
    color: #2f4f4f;
}

.bfs-thankyou span.message {
    border: 1px solid #2f4f4f;
    padding: 1em 2em;
    width: 100%;
    display: inline-block;
}
.squelch-form.review-order td.price,
.squelch-form.review-order td.subtotal-label {
    text-align: right;
}

form.sorting {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    margin-top: 2.7em;
}

form.sorting select {
    height: 30px;
    padding: 5px;
    font-size: 13px;
    margin-right:   1em;
}

form.sorting input[type=submit],
form.sorting select {
    min-width: auto;
    margin-bottom: 0;
}

.bfs input.button {
    flex-basis: auto;
    display: inline-block;
    padding: .3em .7em;
    background-color: var( --fw-orange );
    color: white!important;
    font-weight: bold;
    border-radius: 3px;
    text-align: center;
    margin-left: 0.5em;
    font-style: normal;
    font-size: 13px;
}

.bfs input.button.green {
    background-color: #668a7f;

}

.bfs input.button.green:hover {
    background-color: #4d6960;
}

.bfs a.button.tiny {
    font-size: 12px;
}


.bfs #primary input.button.tiny.orange.sold,
.bfs #primary a.button.tiny.orange.sold {
    background-color: #666;
}

.bfs #primary input.button.tiny.red,
.bfs #primary a.button.tiny.red {
    background-color: red;
}

.bfs #primary input.red,
.bfs #primary a.red {
    color: red;
}

.bfs #primary input.button.tiny.blue,
.bfs #primary a.button.tiny.blue {
    background-color: #3E4E79;
}

.bfs #primary a.my-ads-link {
    margin: 0;
    font-weight: 600;
    position: relative;
    padding: 8px 20px;
    display: block;
    font-size: 14px;
}

.bfs #primary a.my-ads-link:hover {
    text-decoration: none;
    background-color: #f1f1f1;
}

.bfs #primary a.my-ads-link i.fas {
    width: 15px;
    text-align: center;
}

.my-ads-button-row {
    border-collapse: separate;

    border-spacing: 2em;
}

.myads-incomplete-ads {
    margin-bottom: 1.5em;
}

#primary .myads-header-title   > h2,
#primary .myads-incomplete-ads > h2 {
    line-height: 1.625;
    font-weight: 900;
    font-size: 22px;
    color: darkslategray;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 12px;
}

#primary .myads-header-title   > h2::after,
#primary .myads-incomplete-ads > h2::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 40%;
    padding-top: 15px;
    border-bottom: 1px solid black;
    margin-bottom: 15px;
}

#main #primary div.myads-header > p,
#main #primary div.myads-incomplete-ads > p {
    text-align: center;
    max-width: 82.393%;
    margin: 0 auto 30px;
}


/* Button for actions menu */

.my-ads-data-row td.actions a.open-action {
    position: relative;
    float: right;
    z-index: 0;
    cursor: pointer;
    background-color: var( --fw-orange );
    color: #fff;
    border: 1px solid var( --fw-orange );
    padding: 0.3em 0.7em;

    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.my-ads-data-row td.actions a.open-action:hover {
    background-color: #fff;
    color: var( --fw-orange );
}


/* Actions are in the button-column row of the table */

.button-column .buttons-outer-wrapper {
    /* Set to position absolute to remove from page flow, gets changed to relative via JS on click */
    position:                               absolute;
    opacity:                                0;
    z-index:                                0;
    width:                                  100%;
}

.button-column .buttons-outer-wrapper .buttons-inner-wrapper {
    position:                               absolute;
    right:                                  0;
    top:                                    0;

    background-color:                       #fff;
    width:                                  0;
    height:                                 0;
    padding:                                0;
    border:                                 1px solid #c7c7c7;
    z-index:                                10;
}

.button-column .buttons-outer-wrapper .buttons-inner-wrapper::before {
    content:                                "";
    display:                                block;
    width:                                  15px;
    height:                                 15px;
    transform:                              rotate(45deg);
    -webkit-transform:                      rotate(45deg);
    -moz-transform:                         rotate(45deg);
    -o-transform:                           rotate(45deg);
    position:                               absolute;
    top:                                    -8px;
    right:                                  9px;
    background-color:                       #fff;
    border-top:                             1px solid #c7c7c7;
    border-left:                            1px solid #c7c7c7;
}

.button-column .buttons-outer-wrapper .buttons-inner-wrapper > a.my-ads-link {
    opacity:                                0;
    visibility:                             hidden;
    display:                                block;
    width:                                  100%;
}

.button-column .buttons-outer-wrapper .buttons-inner-wrapper > a.my-ads-link > i.fas {
    margin-right:                           0.5rem;
}

.button-column .transparent-overlay {
    content: "";
    display: block;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    visibility: hidden;
    z-index: 9;
}

.squelch-form.fwbfs-my-ads td.make > a {
    color: #668a7f;
}



/* =LOGIN/REGISTER/LOSTPASS PAGES
-------------------------------------------------------------------------------------------------------------------- */

.wb .wb-login-form-wrapper {
    box-sizing:         border-box;
    width:              100%;
    max-width:          600px;
    margin:             0 auto 2rem auto;
    padding:            2rem 3rem 2rem 3rem;
    background-color:   #f4f4f4;
    border-radius:      2px;
}

.wb .tml:after {
    content:            "";
    display:            table;
    clear:              both;
}

.wb .tml ul.tml-links {
    list-style:         none;
    margin:             0;
}

/* Hide register links and login links on lostpassword form */

.wb .tml .tml-register-link,
.wb .tml.tml-lostpassword .tml-login-link {
    display:            none;
}

.wb .tml .tml-lostpassword-link a {
    font-weight:        600;
    color:              #999;
    color:              #d55404;
}

.wb .tml input[type="text"],
.wb .tml input[type="password"],
.wb .tml input[type="email"],
.wb .tml textarea {
    background-color:   #fff;
}

.wb .tml .tml-button {
    padding:            0.5rem 2rem;
    background-color:   #d55404;
    color:              #fff;
    border:             0;
    border-radius:      2px;
    text-transform:     uppercase;
    font-size:          15px;
    font-weight:        bold;
    display:            inline-block;
    float:              right;
    cursor:             pointer;
}

.wb .tml .tml-button:hover {
    background-color:   #8c4113;
}


/* Fix ugly use of capitals in field names by TML */

.wb .tml .tml-label {
    text-transform:     lowercase;
}
.wb .tml .tml-label:first-letter {
    text-transform:     uppercase;
}

/* Doesn't work on the "Remember Me" link due to being display: inline, so disable there */

.wb .tml .tml-checkbox + .tml-label {
    text-transform:     initial;
    cursor:             pointer;
}

.wb-login-form-register-col {
    box-sizing:         border-box;
    padding:            7.2rem;
    background-color:   #f4f4f4;
    border-radius:      2px;
    text-align:         center;
}



/* ="NEW BOATS"
-------------------------------------------------------------------------------------------------------------------- */

div[class^="grid-"] img.fw-hb-logo {
    float:              right;
    max-width:          110px;
    margin-left:        1rem;
    margin-bottom:      1rem;
}



/* ="NEW BOATS" LISTINGS
-------------------------------------------------------------------------------------------------------------------- */

.wb-for-sale-listing {
    overflow:           hidden;
    margin-bottom:      2rem;
}
.wb-for-sale-listing:hover {
    background-color:   #f8f8f8;
}

.wb-for-sale-listing .wb-for-sale-listing-aag {
    overflow:           hidden;
    margin-bottom:      1rem;
}

#content .wb-for-sale-listing h2 {                  /* #content needed to override wb-jdn.css :-( */
    font-size:          1.15rem;
    color:              #668a7f;
    font-weight:        700;
    text-transform:     uppercase;
    margin-top:         0;
    padding-top:        0;
}
#content .wb-for-sale-listing h2 > a {              /* #content needed to override wb-jdn.css :-( */
    color:              inherit;
}
#content .wb-for-sale-listing h2 > a:hover {        /* #content needed to override wb-jdn.css :-( */
    text-decoration:    none;
}
.wb-for-sale-listing .fw-hb-featimg {
    margin-top:         5px;
}
.wb #content .wb-for-sale-listing p > a {           /* .wb #content needed to override wb-jdn.css :-( */
    display:            block;
    font-size:          initial;
    font-weight:        initial;
    color:              #373737;
}
.wb #content .wb-for-sale-listing p > a:hover {     /* .wb #content needed to override wb-jdn.css :-( */
    text-decoration:    none;
}



/* =FLEX SLIDER ENHANCEMENTS
-------------------------------------------------------------------------------------------------------------------- */

/* MTL20200724: Fix for navigation arrows being clipped in sliders
 */
.flex-direction-nav a {
    line-height:                    1;
}

/* MTL20220811: Make slider navigation more obvious and less janky
 */
.wb .flex-direction-nav .flex-next {
    opacity:                        1;
    right:                          10px;
    text-shadow:                    none;
    overflow:                       visible;
    color:                          rgba(0,0,0,0);
}
.wb .flex-direction-nav .flex-prev {
    opacity:                        1;
    left:                           10px;
    text-shadow:                    none;
    overflow:                       visible;
    color:                          rgba(0,0,0,0);
}
.wb .flex-direction-nav a:before {
    color:                          #fff;
    text-shadow:                    0 0 10px rgba(0,0,0,0.5);
}
.wb .flexslider:hover .flex-direction-nav .flex-next,
.wb .flexslider:hover .flex-direction-nav .flex-prev {
    opacity:                        1;
}

.wb #carousel .slides > li {
    box-sizing:                     border-box;
    opacity:                        0.6;
    border:                         3px solid white;
    transition:                     border .3s, opacity .3s;
}
.wb #carousel .slides > li.flex-active-slide {
    border:                         3px solid #1e7057;
    opacity:                        1;
}