/*Hello Friends - message from BF. Reduce the risk of catastrophic syntax errors, place your custom css here whenever possible.
The loadorder of this file is after the other css files, so you won't need to use !important tags on anything unless it too has them or is using advanced selectors. */

:root {
    --tt-grey: rgba(34, 38, 39, 1);
    --tt-blue: rgba(5, 131, 242, 1);
    --tt-orange: rgba(255, 98, 51, 1);
}

/*Fix to prevent horizontal scrolling of the whole webpage on safari - BF*/

html {
  overflow-x: hidden;
}
body, html {
  width: 100%;
}

/*Additional bootstrap-esque font-weight 600 - BF */
/*.font-weight-medium {*/
/*    font-weight: 600!important;*/
/*}*/
/*Border/ box shadow on click form color changes - BF*/

#stloc_selector_cysel:focus, 
#stloc_state_sel:focus, 
#suburb_sl:focus, 
._itmspec_opt:focus, 
.form-control:focus, 
.n-wrapper-form-control select:focus {
    border-color: var(--tt-blue);
    box-shadow: 0 0 0 .2rem rgba(5, 131, 242, .25);
}

/*For full width map section - BF*/
.map-desc {
    color: white;
    padding: 100px 30px 100px 10px;
}
.map-desc > div > h3 {
    color: white;
    font-weight: 600;
    font-size: 2.5rem;
}
.map-wide-columns {
    background-color: var(--tt-blue);
    margin-bottom: -6px;
    display: table;
    width: 100%;
}
@media screen and (min-width:1250px) {
    .page-header.categorybanner h1{
        max-width: 50%;
        transform: translate(50%)
}
    .adjust-for-form-nw {
        max-width: 70%;
    }
}
@media screen and (max-width:1249px) {
    .form-nw-background {
        display: none;
}
}
    @media (min-width: 768px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 750px) /2);
        }
    }
    @media (min-width: 992px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 970px) /2);
            width: calc(50% - ((100vw - 970px) /2));
        }
    }
    @media (min-width: 1200px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 1170px) /2);
            width: calc(50% - ((100vw - 1170px) /2));
        }
        .map-desc {
            padding: 100px 100px 0px 30px;
        }
    }
    @media (min-width:1350px) {
        .map-desc:first-child {
            margin-left: calc((100vw - 1350px) /2);
            width: calc(50% - ((100vw - 1350px) /2));
        }
	}

hr {
    margin-top: 0px;
    margin-bottom: 0px;
}


/*Change the style of the file upload boxes to drag and drop compatible - BF*/
input[type="file"] {
	position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
	width: 100%;
    padding: 30px;
	outline: none!important;
    text-align: center;
    transition: background 0.3s ease-in-out;
	transition: border-color 0.6s ease-in-out;
    border: 1px solid darkgrey;
	}
input[type="file"]:hover {
	background: rgba(0,0,0,0.06);
}

/*Product Page Zoomed Image Fix - no more overlapping transparent product images BF*/
.zoomImg {
     background-color: white;
}

/*remove black ring around hovered links -bf*/
a:hover, a:focus, .card-category .card-title a:hover {
    outline: none;
    text-decoration: none!important; /* This important is regrettable, please try to work around it */
    color: var(--tt-orange);
}
.h7 {
    position: relative;
    padding-bottom: 10px;
    color: #fff;
    font-size: 1.2rem;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji /*{headers-font-family}*/;
}

/* Contacts Top Row - BF*/
.top-row {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--tt-grey);
    color: #fff;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
}
.top-row > div {
    flex: 1 1 0; /* 4 items per row, auto-adjust if 5th added */
    padding: 6px;
	white-space: nowrap;
    box-sizing: border-box;
}
.top-row a {
    text-decoration: none;
    color: #fff;
}
.top-row a:hover {
    color: var(--tt-orange);
}
@media (max-width: 1290px) {
    .top-row > div {
        display: none;
    }
}
/*remove funny border from button clicks - this doesn't remove the correctly set border using the border property - BF*/
.btn.focus,
.btn:focus {
    box-shadow: none;
}

/*Social Icons in header - BF*/
.wrapper-header .list-social a {
    font-size: 1.5rem;
    padding: 0 .5rem;
}
.wrapper-header a:not(.btn), .btn-icon {
    color: #fff;
}
@media (min-width: 992px) {
    .wrapper-header a:not(.btn), .btn-icon {
        color: var(--tt-blue);
    }
    .wrapper-header .top-row a:not(.btn) {
        color: #fff;
    } 
}

/*Changing header & footer links orange - BF*/
.wrapper-header .btn:hover, .wrapper-header a:not(.btn):hover, .wrapper-footer a:not(.btn):hover {
    color: var(--tt-orange);
}
.wrapper-footer .h6::after, .wrapper-footer h4::after {
        background-color: var(--tt-blue);
}
/*Adjust form field in search bar dropdown to fit page width - BF*/
.mobile-search .container form {
    position: relative;
}
.mobile-search .btn {
    top: 0;
    bottom: 0;
}
@media (max-width: 991.98px) {
    .wrapper-header .navbar .navbar-nav>.nav-item>.nav-link:not(.btn) {
        color: var(--tt-grey);
    }
}
/*Because the collect chat developers though such a big number was funny, this ensures the menu dropdown overlaps the collect chat buttons on mobile - BF*/
@media (max-width: 991.98px) {
    .wrapper-header {
    z-index: 2147483000;
    }
}
/*Bigger logo on desktop and make the header work on smaller screens - BF*/
.topbar-logo img {
    height: 80px;
}
@media (max-width: 330px) {
    .topbar-logo img, .wrapper-logo .logo {
        height: 30px;
    }
}
@media (max-width: 290px) {
    .wrapper-header.sticky-top .navbar-right.d-lg-none {
        display: none;
    }
}
@media (max-width: 256px) {
header .btn.btn-icon[data-toggle="search"] {
        display: none;
    }
}

/*Theme sets child element colors seperately to parent colour (WHY? -idk), this overrides those overrides - BF*/

li.nav-item.dropdown-item > a.nav-link, li.nav-item.dropdown-item > a.nav-link:hover {
    color: inherit;
}
.dropdown-item > .nav-link {
    text-wrap: auto;
}

/*Homepage USP's Icons - BF*/
.usps-item .fa, .usps-item .far, .usps-item .fas {
    font-size: 3rem
}

.usps-item h4, .usps p {
    text-align: center;
}
/*Homepage home-map image instead image "cover" not "stretch", height match map - BF*/
.home-map-img {
    height: 700px;
    min-width: 100%;
    object-fit: cover;
}
.home-map:before {
    padding-top: 700px;
}

/*Contact Page*/
.contact-layout {
align-items: flex-start;
}

@media (min-width: 992px) and (min-height: 850px) {
    body .contact-sidebar-sticky {
        position: sticky;
        top: 250px;
    }
}

@media (max-width: 992px) {
    body .contact-sidebar-sticky {
        position: static;
        top: auto;
        margin-bottom: 1.5rem;
    }
}

/*List Icons used on the contact page - replace the default bullet point where their class tag is assigned, made it so you can apply directly to the <li> or parent <ul> or <ol> - BF*/
.fa-list-clock li::marker,
li.fa-list-clock::marker {
    content: "\f017" " ";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
}
.fa-list-email li::marker,
li.fa-list-email::marker {
    content: "\f0e0" " ";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
}
.fa-list-phone li::marker,
li.fa-list-phone::marker {
    content: "\f095" " ";
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /*"solid" icon range need bold */
}
.fa-list-pin li::marker,
li.fa-list-pin::marker {
    content: "\f3c5" " ";
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /*"solid" icon range need bold */
}

/*Narbar shadow inset*/
/*.navbar, .scrolled .wrapper-header .navbar {*/
/*    box-shadow: 0 6px 6px -6px #000 inset, 0 -6px 6px -6px #000 inset, 0 2px 4px rgba(0, 0, 0, .05);*/
/*}*/

.card-img-overlay p {
    text-align: left;
}
/*Take the edge off floating homepage elements very slightly - BF */
/*Note: MBs Sweet spot for border-radius is between 1-5px, depending on nested elements. The sharper the better but not too sharp that it cuts. */

.card > .card-img-wrap, 
.card.card-tile > .card-img, 
.card > .card-img-overlay, 
.carousel-caption {
border-radius: 2px;
}
.card.card-tile {
    border: none;
}
.slick-dots li.slick-active button {
    background-color: var(--tt-blue);
}
.slick-dots li button:focus, .slick-dots li button:hover {
    background-color: var(--tt-orange);
}
/*Translation app customisations - BF*/
.gt_switcher .gt_option {
    position: absolute!important; 
    border: 0px solid var(--tt-blue)!important;
    border-top: revert!important;
    background-color: white!important;
    border-radius: 0 0 2px 2px!important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.gt_switcher .gt_option a:hover {
    color: var(--tt-orange)!important;
}
.gt_switcher .gt_selected a {
    border: 0px solid var(--tt-blue)!important;
    color: var(--tt-grey)!important;
}
.gt_switcher .gt_selected a:hover {
    color: var(--tt-orange)!important;
}
.gt_switcher .gt_selected {
    background: none!important;
}
.gtranslate_wrapper:not(.navbar-collapse) {
    justify-self: end;
}
.navbar-collapse .gtranslate_wrapper {
    top: 30px!important;
    left: 20px!important;
    justify-self: start;
}
/*gap bootstrap-like style for mobile. Should probably assign like g-sm-1 but I already assigned the g-3 tags on buttons - BF*/
@media(max-width: 767px) {
    .g-1 {
        gap: 0.25rem;
    }
    .g-2 {
        gap: 0.5rem;
    }
    .g-3 {
        gap: 1rem;
    }
    .g-4 {
        gap: 1.5rem;
    }
    .g-5 {
        gap: 3rem;
    }
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--tt-grey);
}
/*fix spacing on dropdown items so they match the source theme -  BF*/
.nav .dropdown-item {
    padding-left: 0px;
    padding-right: 0px;
}

#chat-bot-launcher-container.chat-bot-avatar-launcher, #chat-bot-launcher-container.chat-bot-launcher-notext {
    /*bottom: 14px!important;*/
}

#chat-bot-frame-container, #chat-bot-message-container{
    /*bottom: 14px!important;*/
    /*right: 95px!important;*/
}

/*Add gap to selling points on product page - BF */
.selling-point-item {
    gap: 10px;
}
/*Fix positioning of text inside of product page dropdowns -BF */
.n-wrapper-form-control select {
    padding: 0 0 0 6px;
}

/*item specific units used on filters and spec tab on product pages - bf*/
#tr-spec-2 > td:nth-child(2)::after, #filter-spec-flowrate h4 a::after  {
    content:" (m³/hr)";
    text-transform: none;
}
#tr-spec-3 > td:nth-child(2)::after, #filter-spec-motor h4 a::after {
    content:" (kW)";
    text-transform: none;
}
/*restrict thumbnail titles to 3 lines - BF*/
p.card-title {
    max-height: 3.5625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.card-blog .card-body h4 {
    height: 2.5em;
}
/*Product Information Tabs Changed to Orange - BF*/
.tabbable .nav-tabs .nav-link {
    color: var(--tt-orange);
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    background-color: var(--tt-orange);
    border-color: var(--tt-orange);
}
.btn-outline-primary {
    color: var(--tt-orange);
    border-color: var(--tt-orange);
}
.btn-outline-primary:hover {
    background-color: var(--tt-orange);
    border-color: var(--tt-orange);
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 98, 51, .5)
}
.category-product-thumbs {
    margin-top: 20px;
}
#clist_11_1 > option:after {
    content: " m3/hr";
}
#clist_11_3 > option:after {
    content: " kW";
}