:root {
    /*Colours used in Sellers pages*/
    --main-blue: #3A79B0;
    --light-blue: #E4F3FF;
    --light-grey: #F5F5F5;
    --dark-grey: #333333;
    --main-red: #AD261F;
    --dark-grey-text: #4f4f4f;
    --hyperlink-text: #991B1B;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

body {
    background: #fafafa;
}

/* -------------------------------------------------------------------------------------
Modern Styles
 ------------------------------------------------------------------------------------ */
.d-flex {
    display: flex;
}
.justify-center, .justify-content-center {
    justify-content: center;
}
.justify-space-between, .justify-content-between {
    justify-content: space-between;
}
.justify-space-around, .justify-content-around {
    justify-content: space-around;
}
.justify-content-end {
    justify-content: flex-end;
}
.align-items-center {
    align-items: center;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap-sm {
    flex-wrap: wrap;
}
.flex-row-reverse {
    flex-flow: row-reverse;
}
.flex-column {
    flex-direction: column;
}
.flex-grow-0 {
    flex-grow: 0;
}
.flex-grow-1 {
    flex-grow: 1;
}
.flex-shrink-0 {
    flex-shrink: 0;
}
.flex-shrink-1 {
    flex-shrink: 1;
}
.overflow-hidden {
    overflow: hidden;
}
.collapse.in > div.row{
    display: flex !important;
    flex-wrap: wrap;
}
.h-100 {
    height: 100%;
}
.w-100 {
    width: 100%;
}
.ml-auto {
    margin-left: auto;
}
.mt-0 {
    margin-top: 0 !important;
}
.mt-1 {
    margin-top: calc(1rem * 0.25) !important;
}
.mt-2 {
    margin-top: calc(1rem * 0.5) !important;
}
.mt-3 {
    margin-top: 1rem !important;
}
.mt-4 {
    margin-top: calc(1rem * 1.5) !important;
}
.mt-5 {
    margin-top: calc(1rem * 3) !important;
}
.mr-1 {
    margin-right: calc(1rem * 0.25) !important;
}
.mr-2 {
    margin-right: calc(1rem * 0.5) !important;
}
.mr-3 {
    margin-right: 1rem !important;
}
.mr-4 {
    margin-right: calc(1rem * 1.5) !important;
}
.mr-5 {
    margin-right: calc(1rem * 3) !important;
}
.ml-1 {
    margin-left: calc(1rem * 0.25) !important;
}
.ml-2 {
    margin-left: calc(1rem * 0.5) !important;
}
.ml-3 {
    margin-left: 1rem !important;
}
.ml-4 {
    margin-left: calc(1rem * 1.5) !important;
}
.ml-5 {
    margin-left: calc(1rem * 3) !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.mb-1 {
    margin-bottom: calc(1rem * 0.25) !important;
}
.mb-2 {
    margin-bottom: calc(1rem * 0.5) !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
.mb-4 {
    margin-bottom: calc(1rem * 1.5) !important;
}
.mb-5 {
    margin-bottom: calc(1rem * 3) !important;
}
.pt-1 {
    padding-top: calc(1rem * 0.25) !important;
}
.pt-2 {
    padding-top: calc(1rem * 0.5) !important;
}
.pt-3 {
    padding-top: 1rem !important;
}
.pt-4 {
    padding-top: calc(1rem * 1.5) !important;
}
.pt-5 {
    padding-top: calc(1rem * 3) !important;
}
.pb-1 {
    padding-bottom: calc(1rem * 0.25) !important;
}
.pb-2 {
    padding-bottom: calc(1rem * 0.5) !important;
}
.pb-3 {
    padding-bottom: 1rem !important;
}
.pb-4 {
    padding-bottom: calc(1rem * 1.5) !important;
}
.pb-5 {
    padding-bottom: calc(1rem * 3) !important;
}
.pl-0 {
    padding-left: 0;
}
.pl-1 {
    padding-left: calc(1rem * 0.25) !important;
}
.pl-2 {
    padding-left: calc(1rem * 0.5) !important;
}
.pl-3 {
    padding-left: 1rem !important;
}
.pl-4 {
    padding-left: calc(1rem * 1.5) !important;
}
.pl-5 {
    padding-left: calc(1rem * 3) !important;
}
.pr-0 {
    padding-right: 0;
}
.pr-1 {
    padding-right: calc(1rem * 0.25) !important;
}
.pr-2 {
    padding-right: calc(1rem * 0.5) !important;
}
.pr-3 {
    padding-right: 1rem !important;
}
.pr-4 {
    padding-right: calc(1rem * 1.5) !important;
}
.pr-5 {
    padding-right: calc(1rem * 3) !important;
}
.order-sm-0 {
    order: 0;
}
.order-sm-1 {
    order: 1;
}
.order-sm-2 {
    order: 2;
}
.gap-0 {
    gap: 0;
}
.gap-1 {
    gap: calc(1rem * 0.25) !important;
}

.gap-2 {
    gap: calc(1rem * 0.5) !important;
}

.gap-3 {
    gap: calc(1rem * 0.75) !important;
}

.gap-4 {
    gap: calc(1rem * 1) !important;
}
.gap-5 {
    gap: calc(1rem * 1.25) !important;
}
.gap-6 {
    gap: calc(1rem * 1.5) !important;
}
.gap-7 {
    gap: calc(1rem * 1.75) !important;
}
.gap-8{
    gap: calc(1rem * 2) !important;
}

.text-decoration-underline {
    text-decoration: underline;
}

.text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

@media (min-width: 768px) {
    .order-sm-0, .order-sm-1, .order-sm-2 {
        order: unset;
    }
}

/*  ------------------------------------------------------------------------------------
General
------------------------------------------------------------------------------------  */
.advanced-search-container {
    display: none;
}
article {
    min-height: 300px;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #ccc !important;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #ccc !important;
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ccc !important;
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #ccc !important;
}

.site-feedback {
    position: fixed;
    bottom: 0px;
    left: 25px;
    z-index: 99;
}

/* remove backdrop when opening dropdown menu content mobile touchscreen */
.dropdown-backdrop {
    position: static;
}

/***** Typography *****/

.right-word {
    margin-left: 0.2em;
}

hr {
    border-color: #ddd;
}

hr.thicker {
    border-top: 2px dashed #999;
}
/***** End Typography *****/

/***** Background Images ******/

.metal-bg {
    background: #111 url(/images/layout/metal-01.jpg);
}

.shade-bg {
    background: url(/images/111111-0.75.png);
}

.brick-bg {
    background: #111 url(/images/layout/dark_brick_wall.png);
}
/***** End Background Images ******/


/***** Colours *****/

.fa-grey {
    position: relative;
    bottom: -3px;
    left: 4px;
}

.error-color {
    color: #a94442;
}

.blueback {
    background-color: #b3ccff;
}

.bg-tpi-red-hover:hover {
    background-color: #e82c1d !important;
    color: #fff;
}

.bg-darker-hover:hover {
    background-color: #dddddd !important;
}

.text-dark {
    color: #333;
}
/***** End Colours *****/

/***** Buttons
 Used in Sell Parts, Marketplace Advertising, and Plans & Pricing page

*****/

a.btn-rounded {
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
}

a.btn-rounded:hover {
    cursor: pointer;
}

a.btn-rounded-white {
    color: #3A79B0;
}

a.btn-rounded-red,
a.btn-rounded-blue,
a.btn-rounded-grey {
    color: #fff;
}

a.btn-rounded-red:hover,
a.btn-rounded-blue:hover,
a.btn-rounded-grey:hover,
a.btn-rounded-white:hover {
    color: #fff;
    text-decoration: none;
}

a.btn-rounded-red {
    background-color: var(--main-red);
}

a.btn-rounded-blue {
    background-color: #3A79B0;
    border: 2px solid #3A79B0;
}

a.btn-rounded-blue:hover {
    background-color: #2b70ab;
}

a.btn-rounded-grey {
    background-color: #444;
}

a.btn-rounded-grey:hover {
    background-color: #222;
}

a.btn-rounded-white {
    background-color: #fff;
    border: 1px solid var(--main-blue);
}

a.btn-rounded-white:hover {
    background-color: #3A79B0;
}
/***** End Buttons *****/

/*Bootstrap*/
.d-none {
    display: none;
}
.d-block {
    display: block;
}
.d-inline-flex {
    display: inline-flex;
}
.w-100 {
    width: 100%;
}

.text-whitespace {
    white-space: normal;
}

.image-cover {
    background: url(/images/111111-0.75.png);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.ui-autocomplete-loading {
    background: white url('/images/ajax-loader.gif') right center no-repeat;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.item-information-video {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0px;
    display: block;
    color: #e82c1d;
    z-index: 4;

}

/*  ------------------------------------------------------------------------------------
Header
------------------------------------------------------------------------------------  */
.sellers-header {
    background-color: black;
}

#header-wrapper {
    background: #111 url(/images/layout/metal-01.jpg);
    padding: 10px 0px;
    position: relative;
    color: #fff;
}

.sellers-header #header-wrapper {
    background: url(/images/layout/header-bg-sellers.png);
    padding: 10px 0px;
}

#header-logo {
    max-width: 100%;
    display: none;
}

.sellers-header #header-logo {
    display: block;
    margin: 0 auto;
}

.buyers-header #header-wrapper {
    background: url(/images/layout/header-bg-buyers.png);
}

.admin-header #header-wrapper {
    background: url(/images/layout/header-bg-admin.png);
    padding: 10px 0px;
}

.logo-wrapper {
    text-align: center;
}

#nav-logo {
    margin: 0 0 10px 15px;
}


/*  ------------------------------------------------------------------------------------
Main Menu
------------------------------------------------------------------------------------  */
.navbar-right {
    display: none;
}
div:has(> .top-wrapper) {
    padding: 0;
}
.top-wrapper .navbar-right > li > a:not(.btn-rounded-blue):not(.dropdown-item) {
    background-color: initial;
    color: #fff;
}

.top-wrapper .navbar-right > li > a:hover:not(.btn-rounded-blue):not(.dropdown-item) {
    background-color: initial;
    color: #fff;
}

.nav .open>a.dropdown-toggle.btn-rounded-blue {
    background-color: #3a79b0;
}

.main-nav-bar {
    border: none;
    min-height: initial;
}

.top-wrapper .main-nav-bar,
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover,
.login-toggle {
    background-color: initial;
}

/*Logo and hamburger icon positioning on mobile*/
.main-nav-bar .navbar-header {
    display: flex;
}

/*Hamburger Menu Button*/
.navbar-toggle-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border: none;
}

.main-nav-bar .navbar-toggle .fa-bars {
    font-size: 32px;
}

.user-circle-icon.fa {
    font-size: 20px;
    color: #111;
    background-color: #fff;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Login Menu Toggle*/
.login-toggle {
    font-size: 24px;
}

.login-toggle .user-icon :hover {
    cursor: pointer;
}

.login-toggle label {
    margin: 0;
}

/*hamburger toggle*/
.navbar-toggle-container button {
    border: none;
    &:focus {
        box-shadow: none;
    }
}

.hamburger-icon .show-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 22px;
    left: auto;
    cursor: pointer;
    position: relative;
    margin-bottom: 0;
}
.hamburger-icon .show-menu span, .hamburger-icon .show-menu:before, .hamburger-icon .show-menu:after {
    width: 100%;
    height: 5px;
    background: #fff;
    border-radius: 3px;
}
.hamburger-icon .show-menu:before, .hamburger-icon .show-menu:after {
    content: "";
    left: 0;
    position: absolute;
    transition: all 0.3s ease;
}
.hamburger-icon .show-menu:before {
    top: 0;
}
.hamburger-icon .show-menu:after {
    top: 18px;
}
.navbar-toggle-container button .navbar-toggler {
    left: 10px;
    top: 10px;
    opacity: 0;
    position: absolute;
}
.navbar-toggle[aria-expanded="true"] .hamburger-icon .navbar-toggler + .show-menu span {
    background: transparent;
}
.navbar-toggle[aria-expanded="true"] .hamburger-icon .navbar-toggler + .show-menu:after {
    top: 9px;
    transform: rotate(45deg);
}
.navbar-toggle[aria-expanded="true"] .hamburger-icon .navbar-toggler + .show-menu:before {
    top: 9px;
    transform: rotate(-45deg);
}
.navbar-toggle[aria-expanded="true"] .hamburger-icon .navbar-toggler ~ .nav {
    display: block;
    transform: translateX(0);
}

/*End hamburger icon*/
/*Menu*/
.main-nav-bar .navbar-collapse  {
    background-color: #F5F5F5;
    position: absolute;
    /*Refine search button on part listings has z-index of 999*/
    z-index: 1001;
    width: 100%;
    right: 0;
    left: 0;
    margin: 0;
    padding: 20px 0;
}

.nav-bottom-wrapper {
    background-color: #111;
}

.navbar.main-nav-bar li {
    border-bottom: 1px solid #d3d3d3;
}

.navbar.main-nav-bar li:last-of-type {
    border-bottom: none;
}

.navbar.main-nav-bar .navbar-nav a {
    font-size: 18px;
    color: #333;
    display: block;
    text-align: left;
}
.navbar.main-nav-bar .navbar-nav .nav-item > .nav-link {
     padding: 15px 10px;
 }

.navbar.main-nav-bar .navbar-nav a:hover {
    background-color: initial;
    color: #333;
}

/*Main Menu Dropdown Items*/
.main-navigation .dropdown-menu {
    padding-left: 20px; 
}

.dropdown-button {
    outline: none;
    border: none;
    border-radius: 2px;
    line-height: 20px;
    background: unset;
    color: var(--dark-grey);
    font-size: 18px;
    width: 100%

}
    .dropdown-button:focus-visible {
        outline: 1px solid white;
    }
    .main-navigation .dropdown-item {
        margin: 10px 0;
    }

.main-navigation .dropdown-toggle span {
    display: flex;
    justify-content: space-between;
}

.main-navigation .dropdown-toggle span .fa {
    margin-left: 5px;
}

.main-navigation .dropdown-toggle .fa-chevron-down {
    transition: 0.4s;
}

.main-navigation .dropdown.open .dropdown-toggle .fa-chevron-down {
    transform: rotate(-180deg);
}
/*Login Dropdown Menu*/
#login-menu li h3 {
    color: #333;
    margin-top: 0;
    background-color: #E5E5E5;
    padding: 10px;
}

#login-menu a > .fa {
    margin-right: 5px;
}


#login-menu-toggle,
#login-menu {
    padding: 15px 20px;
    align-items: center;
    white-space: nowrap;
}

#login-menu-toggle:focus-visible {
    outline: 2px solid white;
}
.login-wrap h3 {
    color: #333;
    font-weight: normal;
    font-size: 18px;
}

.login-wrap .dropdown-menu .row {
    margin: 0;
}

.login-wrap .dropdown-menu .btn-rounded-blue {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.login-wrap .dropdown-menu div.col-xs-12 ul {
    padding-left: 10px;
}

.login-wrap .dropdown-menu div.col-xs-12 ul li {
    margin-bottom: 5px;
}

.buyers-dp-menu {
    border-right: 1px solid #e5e5e5;
}

.login-wrap .dropdown-menu  li > a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
}

.login-wrap .dropdown-menu li > a:hover {
    text-decoration: none;
    background-color: #f5f5f5;
    transition: 0.3s ease-in-out;
}

.nav-item > a .fa.fa-user {
    margin-left: -4px;
}

.header-info {
    line-height: 1.15em;
}

.header-info div {
    font-size: 0.9em;
}

.header-info a {
    color: #fff;
    text-decoration: none;
}

.header-info a:hover {
    color: #e82c1d;
}

.header-link {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    z-index: 999;
}

.header-link a {
    display: block;
}

/*EndLogin Dropdown Menu*/

.profile-nav-item {
    display: block;
    text-align: right;
    margin-bottom: 5px;
    color: #333;
}

.profile-nav-item:hover {
    color: #333;
    text-decoration: none;
}

.header-group {
    width: 100%;
}

.header-group .selectpicker {
    width: 40%;
}

/***** search form *****/
#search-keywords {
    height: 50px;
}
#search-keywords.header-group {
    width: calc(100% - 30px) !important;
}
.search-keywords-container {
    width: calc(100% - 30px)!important;
}
/*Searchbar Input*/

#search-keywords #s {
    height: 100%;
    font-size: 1em;
    border-radius: 7px 0 0 7px;
}

    #search-keywords #s:focus {
        outline: 2px solid #3b82f6;
        box-shadow: none;
        outline-offset: 1px;
    }

.header-search .dropdowns select, #find {
    border-radius: 0;
}

.header-search .dropdowns select:first-child,
.header-search .dropdowns select + select {
    margin-bottom: 0.2em;
}
/*Search button icon*/
#find {
    margin-right: -0.5px;
    height: 100%;
    border-radius: 0 7px 7px 0;
}

.header-search {
    position: relative;
}

.header-group #s {
    width: 100%;
}

/*CLEAR SEARCH*/
.dropdown-wrapper {
    position: relative;
    width: 100%;
}

.dropdown-wrapper, .form-control {
    float: none !important;
}


.clear-search {
    position: absolute;
    top: 7px;
    display: inline-block;
    right: 30px;
    z-index: 9999;
    color: #111;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    transition: all ease-in-out 0.2s;
}

#search-keywords #clear-keyword {
    right: 125px;
}


/*Search History Autocomplete*/
.s-autocomplete-container {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28);
    z-index: 1002;
    width: 98.88%;
    display: none;
}

.s-autocomplete-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .s-autocomplete-item:hover {
        background-color: #f1f3f4;
    }

.s-autocomplete-item-remove {
    margin-left: auto;
    color: #70757a;
    opacity: 0;
    font-size: 17px;
}

.s-autocomplete-item:hover .s-autocomplete-item-remove {
    opacity: 1;
}

.s-autocomplete-item-text {
    color: #202124;
    font-size: 16px;
}

.clear-s-autocomplete-history {
    text-align: center;
    padding: 12px 16px;
    color: #4285f4;
    cursor: pointer;
    border-top: 1px solid #f1f1f1;
    border-radius: 0 0 7px 7px;
}

    .clear-s-autocomplete-history:hover {
        background-color: #f1f3f4;
    }

/***** end search form *****/

.sellers-header-company {
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: left;
    padding-top: 1px;
}

/***** System Notifications *****/
#system-notification {
    display: block;
    padding: 10px;
    background: #0559B5;
    color: #fff;
    font-weight: bold;
}

#system-notification a {
    color: #fff;
    text-decoration: underline;
}

#system-notification .close {
    margin-left: 20px;
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

/***** End System Notifications *****/

/* Suggestion search */
.search-suggestion {
    position: absolute;
    color: black;
    background: white;
    height: 40px;
    z-index: 999;
    left: 0;
    top: 40px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 12px;
    font-size: 1.2em;
    border-radius: 2px;
}

.tag-categories {
    max-height: 200px;
    overflow: scroll;
    overflow-x: hidden;
    color: black;
    background: white;
    cursor: pointer;
    position: absolute;
    z-index: 900;
    width: 100%;
    font-size: 1.2em;
}

.tag-categories.tag-categories-list {
    border: 1px solid black;
}

.search-tag {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 6px 0px 6px 12px;
}

.search-tag:hover {
    background-color: grey;
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    -o-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
}

.tag-categories .search-tag span {
    float: right;
    margin-right: 20px;
    padding: 7px 7px 7px 7px;
}

/*End suggestion search*/

/*  ------------------------------------------------------------------------------------
Find it
------------------------------------------------------------------------------------  */

.find-it, .find-it:hover {
    width: 134px;
    height: 53px;
    background: url(/images/findit.png) no-repeat 0px 0px;
    display: inline-block;
    text-decoration: none;
}

.find-it:hover {
    background-position: 0px -54px;
}

.find-it.dark {
    background-position: 0px -53px;
}

/*  ------------------------------------------------------------------------------------
Footer
------------------------------------------------------------------------------------  */
footer {
    margin: 0px;
    padding: 0px;
}

#footer-wrapper {
    background: #222;
    padding: 20px 0 50px;
    color: #fff;
    font-family: var(--body-font);
    font-weight: normal;
    color: #777;
    text-align: center;
}

#footer-wrapper .container {
    width: calc(100vw - 30px);
    margin: 0px;
}

#footer-wrapper .row {
    padding-top: 2em;
}

#footer-wrapper a {
    color: unset;
}

.footer-menu {
    display: inline-block;
    vertical-align: top;
    padding: 0px;
}

.footer-menu > li.footer-lead {
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
}

.footer-menu > li {
    transition: color ease-in 2s;
    text-align: left;
    color: #b2b2b2;
    display: block;
    border-right: 0px;
    margin-bottom: 1.5rem;
}

.footer-menu > li > a {
    padding: 1rem 0;
}

.footer-menu > li > a:hover {
    text-decoration: none;
    color: #e82c1d;
}

.footer-copy {
    color: #b2b2b2;
    font-size: 0.8em;
}


/*  ------------------------------------------------------------------------------------
Home page
------------------------------------------------------------------------------------  */
.top-help {
    display: inline-block;
    color: #fff;
    font-size: 1.25em;
}

/*  ------------------------------------------------------------------------------------
Left menu
------------------------------------------------------------------------------------  */
.tpi-list-group {
    /*border: 1px solid #e82c1d;*/
    /*background: #fafafa;*/
    border-radius: 3px;
    font-size: 1em;
}

.tpi-list-group .tpi-list-section {
    /*border: 1px solid #e82c1d;*/
    padding-bottom: 10px;
}

.tpi-list-group .tpi-list-section:first-child {
    border-top: 0px;
}

.tpi-list-group .tpi-list-section:last-child {
    border-bottom: 0px;
}

.tpi-list-section + .tpi-list-section {
    border-top: 0px;
    border-bottom: 0px;
}

.tpi-list-group .tpi-list-title {
    background: #d7d7d7;
    color: #111;
    font-weight: bold;
    padding: 5px 5px !important;
    margin: 0px 0px 5px 0px;
    font-size: 1.15em;
    border-radius: 2px;
}

.tpi-list-group .tpi-list-subtitle {
    font-weight: bold;
    padding: 5px 5px !important;
    color: #555;
}

.tpi-list-group .tpi-list-item {
    display: block;
    padding: 2px 5px;
    clear: both;
}

.tpi-list-group .tpi-list-item.active {
    font-weight: bold;
}

.tpi-list-group .tpi-list-item-selected {
    border: 1px solid #d5d5d5;
    border-radius: 1px;
    padding: 3px 6px 3px 4px;
    margin: 2px 0px;
    background: #f1f1f1;
}

.tpi-list-group .tpi-list-item-selected a {
    font-weight: normal;
    line-height: 1.1em;
    /*color: #000;*/
}

.tpi-list-group .tpi-list-indent-1 {
    padding-left: 5px;
}

.tpi-list-group .tpi-list-indent-2 {
    padding-left: 20px;
}

.tpi-list-group .tpi-list-indent-3 {
    padding-left: 35px;
}

.tpi-list-group .tpi-list-indent-4 {
    padding-left: 50px;
}

.tpi-list-group .badge {
    float: right;
    background: #6B6B6B;
}

.tpi-list-group table {
    width: 100%;
}

/*  ------------------------------------------------------------------------------------
Arrows
------------------------------------------------------------------------------------  */
.arrow-view {
    font-family: var(--body-font);
    position: absolute;
    top: -9999px;
    left: -9999px;
    font-size: 1.25em;
}

#arrow-contact p,
#arrow-refine p {
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    margin-left: -20px;
    -webkit-transform: rotate(345deg);
    -moz-transform: rotate(345deg);
    -ms-transform: rotate(345deg);
    -o-transform: rotate(345deg);
    transform: rotate(355deg);
}

#arrow-more-info p {
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    margin-left: 20px;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
}

/*  ------------------------------------------------------------------------------------
Part listing
------------------------------------------------------------------------------------  */
.price-display {
    font-size: 1.15em;
}

.part-grid .table > thead > tr > th,
.part-grid .table > tbody > tr > th,
.part-grid .table > tfoot > tr > th,
.part-grid .table > thead > tr > td,
.part-grid .table > tbody > tr > td,
.part-grid .table > tfoot > tr > td {
    border-top: 1px solid #7a7a7a;
}

.part-list-item, .part-list-item:hover {
    text-decoration: none;
}

.well-hover:hover {
    background: #eaeaea;
}

.noUi-connect {
    background: #f00 !important;
}

.part-viewed {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 0.9em;
    background: #6B6B6B;
    padding: 0px 5px;
    color: #fff;
    border-radius: 3px;
}

.item-container:hover {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 9%, #eeeeee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(9%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 9%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 9%,#eeeeee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 9%,#eeeeee 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 9%,#eeeeee 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

#back-to-top {
    position: fixed;
    text-align: center;
    font-size: 8px;
    padding: 5px;
    z-index: 999;
    bottom: 30px;
    right: 10px;
    background: #bfbfbf;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
    border-radius: 5px;
    color: #000;
    text-decoration: none;
}

#back-to-top:hover {
    filter: alpha(opacity=100);
    opacity: 1;
}

.text-seller:not(.listings-text):not(.truck-listings-text) {
    color: #3b9b3b !important;
}

/**** part listings part items ****/
.container.listings-container{
    max-width: 1400px;
    width: 100%;
}
.listings-part-item-title {
    font-size: 1.8rem;
    width: 100%;
}

.listings-part-item-info {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.listings-part-item-phone {
    align-self: flex-end;
}

div > .listings-part-item-btns *{
    font-size: 1.5rem;
}

/**** Company Page Links ****/
h2 a.company-page-link {
    font-family: var(--heading-font);
    font-weight: 700;
    margin-bottom: 10px;
}

/**** Facet list search ****/
.pt-filter-search-form .pt-list-search-icon,
.facet-filter-search-form .facet-list-search-icon {
    position: absolute;
    color: #3a79b0;
}

.pt-filter-search-form .pt-list-search-reset,
.facet-filter-search-form .facet-list-search-reset {
    background-color: unset;
    border: unset;
    color: #dd2b1a;
    position: absolute;
    right: 25px;
    font-size: 1.7rem;
    display: none;
}

.pt-filter-search-form .pt-filter-search,
.facet-filter-search-form .facet-filter-search {
    width: 100%;
    border: 1px solid #ccc;
    padding-left: 22px;
    padding-right: 18px;
}


.filter-sort-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 10px
}

.filter-sort-container .align-md-r {
    margin-left: auto;
    text-align: right;
}

@media (max-width: 991px) {
    .filter-sort-container {
        flex-direction: column;
        align-items: stretch;
    }

        .filter-sort-container .public-listings-paging .pagination-sm {
            margin-bottom: 10px;
        }

        .filter-sort-container .align-md-r {
            margin-left: 0;
            text-align: left;
        }
}
/**** switch sliders ****/
.listings-switch {
    cursor: pointer;
    display: inline-block;
    margin-bottom: unset;
}

.toggle-round {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    width: 37px;
    height: 19px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.toggle-round:before, .toggle-round:after {
    content: "";
}

.toggle-round:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 15px;
    height: 15px;
    position: absolute;
    top: 1.7px;
    left: 3px;
    transition: left 0.25s;
}

.listings-switch:hover .toggle-round:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.listings-switch-input:checked + .toggle-round {
    background: #2196F3;
}

.listings-switch-input:checked + .toggle-round:before {
    left: 20.5px;
}

.listings-switch-input {
    position: absolute;
    visibility: hidden;
}

.show-closest-toggle-label {
    font-size: 12px;
    display: inline-block;
}

/**** Sellers Overview Modal ****/
.seller-overview-modal-btn {
    font-size: 14px;
}

.sellers-overview-modal-content {
    display: flex;
    justify-content: space-between;
}

.sellers-overview-modal-content > div:first-child {
    width: 40%;
}

.sellers-overview-modal-content > div:last-child {
    width: 50%;
}

.sellers-overview-modal-divider {
    border-left: 2px solid black;
}

/*  ------------------------------------------------------------------------------------
Parts
------------------------------------------------------------------------------------  */
.media-link img {
    max-width: 100%;
}

.video-play-symbol {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -35px;
    margin-top: -35px;
}

.video-play-symbol:hover {
    color: #e82c1d;
}

.video-play-thumbnail-symbol {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -6px;
    margin-top: -6px;
}

.most-recent-box {
    border-left: 1px solid #ddd;
}

@media (max-width: 991px) {
    .most-recent-box {
        border-left: 0px;
    }
}

.media-link, .media-link:hover, .media-disclaimer {
    display: block;
    color: #aaa;
    text-align: center;
    text-decoration: none !important;
    font-size: 0.8em;
}


/*  ------------------------------------------------------------------------------------
Part map
------------------------------------------------------------------------------------  */
.map-wrapper {
    width: 100%;
    min-height: 500px;
    position: relative;
}

.map-wrapper.map-smaller {
    min-height: 300px;
}

/*  ------------------------------------------------------------------------------------
Part photo management
------------------------------------------------------------------------------------  */
#current-media {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#current-media li {
    position: relative;
    padding: 0px;
    list-style: none;
    display: inline-block;
    width: 272px;
    margin: 5px;
    margin-bottom: 25px;
}

#current-media img {
    max-width: 100%;
    margin-bottom: 5px;
}

#current-media.current-media-videos img {
    max-height: 210px;
}

#current-media .current-media-placeholder {
    background: #e1e1e1;
}

#current-media .options {
    text-align: right;
}

#current-media .options i {
    background: #fff;
    padding: 3px 3px;
    width: 30px;
    border-radius: 1px;
    font-size: 1.25em;
    border: 1px solid #aaa;
    margin: 0px 0px 0px 10px;
    text-align: center;
}

#current-media .options i:hover {
    background: #ddd;
}

#current-media .option-remove {
    cursor: pointer;
}

#current-media .option-order {
    cursor: move;
}

/*  ------------------------------------------------------------------------------------
Corner ribbon
------------------------------------------------------------------------------------  */
.ribbon {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 999;
    text-align: center;
    font-size: 0.8em;
    text-transform: uppercase;
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    cursor: context-menu;
}

.ribbon div {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    padding: 2px 0;
    right: -22px;
    top: 15px;
    width: 100px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon div:before, .ribbon div:after {
    content: "";
    position: absolute;
    bottom: -3px;
}

.ribbon div:before {
    left: 0;
}

.ribbon div:after {
    right: 0;
}

.ribbon-red {
    color: #fff;
    background-color: #cc0000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#990000), to(#cc0000));
    background-image: -webkit-linear-gradient(top, #990000, #cc0000);
    background-image: -moz-linear-gradient(top, #990000, #cc0000);
    background-image: -ms-linear-gradient(top, #990000, #cc0000);
    background-image: -o-linear-gradient(top, #990000, #cc0000);
}

.ribbon-red:before, .ribbon-red:after {
    border-top: 3px solid #900;
}

.ribbon-yellow {
    color: #000;
    background-color: #C6C623;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#959926), to(#C6C623));
    background-image: -webkit-linear-gradient(top, #959926, #C6C623);
    background-image: -moz-linear-gradient(top, #959926, #C6C623);
    background-image: -ms-linear-gradient(top, #959926, #C6C623);
    background-image: -o-linear-gradient(top, #959926, #C6C623);
}

.ribbon-yellow:before, .ribbon-yellow:after {
    border-top: 3px solid #959926;
}

.ribbon-blue {
    color: #fff;
    background-color: #1471CC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#095EB3), to(#1471CC));
    background-image: -webkit-linear-gradient(top, #095EB3, #1471CC);
    background-image: -moz-linear-gradient(top, #095EB3, #1471CC);
    background-image: -ms-linear-gradient(top, #095EB3, #1471CC);
    background-image: -o-linear-gradient(top, #095EB3, #1471CC);
}

.ribbon-blue:before, .ribbon-blue:after {
    border-top: 3px solid #095EB3;
}

.ribbon-new {
    color: #fff;
    background-color: #81A81B;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#81A81B), to(#648115));
    background-image: -webkit-linear-gradient(top, #81A81B, #648115);
    background-image: -moz-linear-gradient(top, #81A81B, #648115);
    background-image: -ms-linear-gradient(top, #81A81B, #648115);
    background-image: -o-linear-gradient(top, #81A81B, #648115);
}

.ribbon-new:before, .ribbon-new:after {
    border-top: 3px solid #81A81B;
}

.ribbon-core {
    color: #fff;
    background-color: #A11E11;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#A11E11), to(#590F07));
    background-image: -webkit-linear-gradient(top, #A11E11, #590F07);
    background-image: -moz-linear-gradient(top, #A11E11, #590F07);
    background-image: -ms-linear-gradient(top, #A11E11, #590F07);
    background-image: -o-linear-gradient(top, #A11E11, #590F07);
}

.ribbon-core:before, .ribbon-core:after {
    border-top: 3px solid #A11E11;
}

.ribbon-rebuilt {
    color: #fff;
    background-color: #2773dc;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2773dc), to(#1558b5));
    background-image: -webkit-linear-gradient(top, #2773dc, #1558b5);
    background-image: -moz-linear-gradient(top, #2773dc, #1558b5);
    background-image: -ms-linear-gradient(top, #2773dc, #1558b5);
    background-image: -o-linear-gradient(top, #2773dc, #1558b5);
}

.ribbon-rebuilt:before, .ribbon-rebuilt:after {
    border-top: 3px solid #2773dc;
}

.ribbon-remanufactured {
    color: #fff;
    background-color: #30a4d7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#30a4d7), to(#228fbf));
    background-image: -webkit-linear-gradient(top, #30a4d7, #228fbf);
    background-image: -moz-linear-gradient(top, #30a4d7, #228fbf);
    background-image: -ms-linear-gradient(top, #30a4d7, #228fbf);
    background-image: -o-linear-gradient(top, #30a4d7, #228fbf);
}

.ribbon-remanufactured:before, .ribbon-remanufactured:after {
    border-top: 3px solid #30a4d7;
}

.ribbon-reconditioned {
    color: #fff;
    background-color: #e9bd43;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e9bd43), to(#cb9e20));
    background-image: -webkit-linear-gradient(top, #e9bd43, #cb9e20);
    background-image: -moz-linear-gradient(top, #e9bd43, #cb9e20);
    background-image: -ms-linear-gradient(top, #e9bd43, #cb9e20);
    background-image: -o-linear-gradient(top, #e9bd43, #cb9e20);
}

.ribbon-reconditioned:before, .ribbon-reconditioned:after {
    border-top: 3px solid #e9bd43;
}

.ribbon-aftermarket {
    color: #fff;
    background-color: #7115B5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7115B5), to(#4A057C));
    background-image: -webkit-linear-gradient(top, #7115B5, #4A057C);
    background-image: -moz-linear-gradient(top, #7115B5, #4A057C);
    background-image: -ms-linear-gradient(top, #7115B5, #4A057C);
    background-image: -o-linear-gradient(top, #7115B5, #4A057C);
}

.ribbon-aftermarket:before, .ribbon-aftermarket:after {
    border-top: 3px solid #7115B5;
}


.ribbon-forparts {
    color: #fff;
    background-color: #FF4000;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FF4000), to(#CC3300));
    background-image: -webkit-linear-gradient(top, #FF4000, #CC3300);
    background-image: -moz-linear-gradient(top, #FF4000, #CC3300);
    background-image: -ms-linear-gradient(top, #FF4000, #CC3300);
    background-image: -o-linear-gradient(top, #FF4000, #CC3300);
}

.ribbon-forparts:before, .ribbon-forparts:after {
    border-top: 3px solid #FF4000;
}

.ribbon-sold {
    color: #fff;
    background-color: #A11E11;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#A11E11), to(#590F07));
    background-image: -webkit-linear-gradient(top, #A11E11, #590F07);
    background-image: -moz-linear-gradient(top, #A11E11, #590F07);
    background-image: -ms-linear-gradient(top, #A11E11, #590F07);
    background-image: -o-linear-gradient(top, #A11E11, #590F07);
}

.ribbon-sold:before, .ribbon-sold:after {
    border-top: 3px solid #A11E11;
}

.ribbon-deleted {
    color: #fff;
    background-color: #2773dc;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2773dc), to(#1558b5));
    background-image: -webkit-linear-gradient(top, #2773dc, #1558b5);
    background-image: -moz-linear-gradient(top, #2773dc, #1558b5);
    background-image: -ms-linear-gradient(top, #2773dc, #1558b5);
    background-image: -o-linear-gradient(top, #2773dc, #1558b5);
}

.ribbon-deleted:before, .ribbon-deleted:after {
    border-top: 3px solid #2773dc;
}

.ribbon-refurbished {
    color: #fff;
    background-color: #e021c0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e021c0), to(#a21b8b));
    background-image: -webkit-linear-gradient(top, #e021c0, #a21b8b);
    background-image: -moz-linear-gradient(top, #e021c0, #a21b8b);
    background-image: -ms-linear-gradient(top, #e021c0, #a21b8b);
    background-image: -o-linear-gradient(top, #e021c0, #a21b8b);
}

.ribbon-refurbished:before, .ribbon-refurbished:after {
    border-top: 3px solid #a21b8b;
}

.ribbon-bearingsealed{
    color: #fff;
    background-color: #00bf88;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#00bf88), to(#00A97EFF));
    background-image: -webkit-linear-gradient(top, #00bf88, #00A97EFF);
    background-image: -moz-linear-gradient(top,  #00bf88, #00A97EFF);
    background-image: -ms-linear-gradient(top,  #00bf88, #00A97EFF);
    background-image: -o-linear-gradient(top,  #00bf88, #00A97EFF);
}
.ribbon-bearingsealed:before, .ribbon-bearingsealed:after{
    border-top: 3px solid #a21b8b;
}
#CostQuantityPanel {
    max-height: 300px;
    overflow-y: auto;
}

.cursornotallowed {
    cursor: not-allowed;
}

.help-page pre.wrapped {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
}

.help-page .warning-message-container {
    margin-top: 20px;
    padding: 0 10px;
    color: #525252;
    background: #EFDCA9;
    border: 1px solid #CCCCCC;
}

.help-page-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin: 0px 0px 20px 0px;
    border-top: 1px solid #D4D4D4;
}

.help-page-table th {
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #D4D4D4;
    padding: 5px 6px 5px 6px;
}

.help-page-table td {
    border-bottom: 1px solid #D4D4D4;
    padding: 10px 8px 10px 8px;
    vertical-align: top;
}

.help-page-table pre,
.help-page-table p {
    margin: 0px;
    padding: 0px;
    font-family: inherit;
    font-size: 100%;
}

.help-page-table tbody tr:hover td {
    background-color: #F3F3F3;
}

.help-page a:hover {
    background-color: transparent;
}

.help-page .sample-header {
    border: 2px solid #D4D4D4;
    background: #00497E;
    color: #FFFFFF;
    padding: 8px 15px;
    border-bottom: none;
    display: inline-block;
    margin: 10px 0px 0px 0px;
}

.help-page .sample-content {
    display: block;
    border-width: 0;
    padding: 15px 20px;
    background: #FFFFFF;
    border: 2px solid #D4D4D4;
    margin: 0px 0px 10px 0px;
}

.help-page .api-name {
    width: 40%;
}

.help-page .api-documentation {
    width: 60%;
}

.help-page .parameter-name {
    width: 20%;
}

.help-page .parameter-documentation {
    width: 40%;
}

.help-page .parameter-type {
    width: 20%;
}

.help-page .parameter-annotations {
    width: 20%;
}

#body.help-page {
    font-size: 14px;
    line-height: 143%;
    color: #333;
}

.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
    border: none;
}

.ng-radio-button {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

/*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
 */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.company-name-change,
.sms-number-change,
.phone-number-change {
    cursor: pointer;
}
.account-sms-info {
    cursor: pointer;
}

tbody .sms-media {
    display: flex;
}


/***** RECENTLY VIEWED PARTS *****/
.recent-parts-btn {
    display: none;
    padding: 6px 16px;
    min-width: 64px;
    box-sizing: border-box;
    transition: all 400ms ease-in-out;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.02857em;
    text-transform: uppercase;
    border-radius: 4px 4px 0 0;
    text-transform: uppercase;
    width: 197px;
    position: fixed;
    z-index: 15000;
    cursor: pointer;
    font-weight: bold;
    bottom: 0;
    right: 183px;
    font-weight: bold;
    cursor: pointer;
    max-height: 90%;
}

#recently-viewed-parts-desktop {
    position: fixed;
    right: 15%;
    width: 300px;
    z-index: 9999;
    max-height: 90%;
    overflow: auto;
    transition: all 400ms ease-in-out;
}

    #recently-viewed-parts-desktop .panel {
        margin-bottom: 0;
    }

    #recently-viewed-parts-desktop .rv-part-name {
        margin-bottom: 0;
    }

    #recently-viewed-parts-desktop img {
        height: 150px;
        object-fit: cover;
        width: 100%;
    }

@media (max-width: 767px) {
    #recently-viewed-parts-desktop {
        display: none;
    }
}

.recently-viewed-parts .item-container {
    border-radius: 0;
}

/***** END RECENTLY VIEWED PARTS *****/

#finance-link {
    color: black;
}

/* GTMs tap targetting issue fix */
a.btn-primary *, button.btn-primary *, .carousel-list a *, button.btn-icon *, a.btn-icon *, a.enabled-tooltips *, #recently-viewed-parts-mobile a *, #recently-viewed-parts-desktop a *, .breadcrumb a *, .accordion-container button.accordion * {
    pointer-events: none;
}

.photo-holder a {
    display: block;
}

@media (max-width: 767px) {
    #current-media li {
        width: 30%;
        margin: 1%;
    }
    .nav.navbar-nav {
        padding: 10px 0;
    }
    .navbar-collapse.in {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    footer {
        /*padding: 2em 4em;*/
    }

    #footer-wrapper {
        padding: 0;
        margin-top: 0;
    }

    #footer-wrapper .align-xs-l {
        text-align: unset !important;
        text-align: left;
    }

    #footer-wrapper .container {
        width: 100%;
    }

    .footer-menu {
        float: left;
    }

    .footer-row > div:first-child {
        margin-left: 0px;
    }

    ul.footer-menu {
        width: 100%;
    }

    ul.footer-menu > li {
        text-align: center;
    }
    .sellers-header-company {
        text-align: center;
    }

    .header-link {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        margin-left: auto;
        text-align: center;
        margin-bottom: 10px;
    }

    .site-feedback {
        display: none;
    }
}
.page-content {
    overflow-x: hidden;
}
@media(min-width: 768px) {
    .d-md-none {
        display: none !important;
    }
    /*override bootstrap display block*/
    #login-menu.navbar-collapse.collapse {
        display: none !important;
    }
    .main-navigation.navbar-collapse {
        background-color: #313131;
    }
    .top-wrapper {
        display: flex;
        align-items: center;
    }

    .top-wrapper .navbar {
        display: none;
    }

    .top-wrapper .d-md-block {
        display: block;
    }

    .logo-wrapper, .header-info {
        height: 100% !important;
        text-align: left;
    }

    #header-logo {
        display: block !important;
    }
    #nav-logo {
        display: none;
    }

    .header-info {
        height: 100%;
        display: flex;
        align-items: center;
        /*font-size: 1.2em;*/
    }

    .header-group .dropdowns {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .header-group .form-control {
        width: 99%;
    }

    .main-navigation.navbar-collapse {
        position: relative;
        padding: 0;
        border: none;
    }

    .navbar-toggle-container button {
        display: none;
    }

    .navbar.main-nav-bar li {
        border-bottom: none;
    }

    .navbar.main-nav-bar .navbar-nav .nav-item > a {
        color: #eee;
    }
    .navbar.main-nav-bar .navbar-nav .nav-item > button {
        color: #eee;
    }

    .navbar.main-nav-bar .open > a,
    .navbar.main-nav-bar .open > a:focus,
    .navbar.main-nav-bar .open > a:hover,
    .nav>li>a:focus, .nav>li>a:hover {
        background-color: initial;
    }

    .navbar.main-nav-bar .navbar-nav .nav-item > .nav-link:hover {
        background-color: #404040;
    }

    .main-navigation .dropdown-menu,
    #login-menu .dropdown-menu {
        padding-left: 20px;
        min-width: 200px;
    }
    /*Login dropdown menu*/
    .login-wrap .dropdown-menu {
        width: 350px;
    }

    .nav-bottom-wrapper {
        display: block;
    }
    .main-nav-bar .navbar-inverse {
        background-color: initial;
    }

    #search-keywords #s {
        font-size: 1.3em;
    }

    .header-group #find {
        width: 50px;
    }

    #header-logo {
        /*max-height: 45px;*/
        height: 100%;
        padding-bottom: 2px;
    }

    .main-navigation .navbar-nav > li > a,
    .main-navigation .navbar-nav > li > a:hover,
    #login-menu .navbar-nav > li > a,
    #login-menu .navbar-nav > li > a:hover{
        color: #eee;
    }
    #login-menu-toggle {
        display: flex;
    }
    .navbar-right {
        display: flex;
        align-items: center;
        margin-left: auto;
    }
    .login-wrap .navbar-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    .login-wrap .navbar-nav li {
        width: 50%;
    }
    .login-wrap .navbar-nav li:nth-of-type(3) {
        width: 100%;
    }
    .login-wrap .dropdown-menu {
        min-width: 170px !important;
        padding: 15px;
    }
    .login-wrap .dropdown-menu  li > a {
        padding: 5px 10px;
        margin: 5px 0;
    }
    .login-wrap .dropdown-menu  li.nav-item > a .fa {
        margin-right: 5px;
    }
    .user-circle-icon.fa {
        width: 15px;
        height: 15px;
        font-size: 10px;
        margin-right: 5px;
    }
    #login-menu-toggle .fa-caret-down {
        margin-left: 3px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #current-media li {
        width: 166px;
    }
    .header-info div {
        display: inline-block;
        margin-top: 10px;
    }
    .main-navigation .navbar-nav > li > a,
    #login-menu .navbar-nav > li > a {
        color: #eee;
    }
}


@media (min-width:900px) {
    #recently-viewed-parts-desktop {
        right: 183px;
    }
}

@media(max-width: 991px){
    .listings-part-item-btns .btn {
        margin-top: 12px;
        padding: 15px 10px;
    }
    .phone-seller-button {
        width: 100%;
        margin-right: 0;
    }
    .two-buttons{
        width: 48%;
    }
    .three-buttons {
        width: 30%;
    }
    .listings-cta-spacing {
        display: flex;
        justify-content: space-between;
    }
    .listings-part-item-info {
        justify-content: flex-start;
    }
}

@media(max-width:450px){
    .listings-part-item-btns .btn {
        width: 100%;
        margin-top: 8px;
        padding: 15px;

    }
    .listings-cta-spacing {
        display: block;
    }
}

@media(min-width: 1200px) {
    /**** sort filters ****/
    .public-listings-paging {
        align-self: unset;
    }
    
    .listings-switches-container {
        margin-top: 3px;
    }

    .listings-switches-container,
    .listings-sort-dropdowns {
        padding-left: unset;
        padding-right: unset;
    }

    /**** part listings part items ****/
    .listings-part-item-info-container {
        padding-left: 0px;
    }

    .listings-part-item-info {
        align-items: center;
    }

    .listings-part-item-phone {
        align-self: unset;
    }

}

/*Part Request*/
.part-request-testimonial {
    color: #545454;
}

/*Cookie Banner*/
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #e5e5e5;
    z-index: 1000;
    display: none; 
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

#cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

#cookie-banner-text {
    max-width: 720px;
}

#cookie-banner-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8px;
}

#cookie-banner-text p {
    font-size: 14px;
    color: #666666;
    margin: 0 0 12px 0;
    line-height: 1.6;
}

#terms-conditions-wrapper a {
    font-size: 14px;
    color: #0073e6;
    text-decoration: none;
}

    #terms-conditions-wrapper a:hover {
        text-decoration: underline;
    }

#cookie-banner-actions {
    display: flex;
    gap: 16px;
    white-space: nowrap;
}


#accept-all {
    padding: 10px 18px;
    background-color: #333333;
    color: #ffffff;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

    #accept-all:hover {
        background-color: #000000;
    }

#reject-all {
    padding: 10px 18px;
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #cccccc;
    font-size: 14px;
    cursor: pointer;
}

#reject-all:hover {
    background-color: #f5f5f5;
}

/*Unsupported browser notice*/
.unsupported-browser #browser-warning {
    display:block !important;
}

/*Listings Card*/
.listing-card {
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}
.listing-card .listing-photo {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.listing-card .listing-image {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-card .listing-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
}

.listing-card .listing-content {
    display: flex;
    flex-direction: column;
}

.listing-card .listings-part-item-title,
.listing-breadcrumb,
.listing-location,
.listing-price,
.listing-info
{
    text-align: left;
}

.listing-seller{
    flex: none;
    padding-top: 15px;
    text-align: center;
    min-height: 90px;
}

.listing-card .listing-info {
    flex: none;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    min-height: 170px;
    overflow: hidden;
}

.listing-card .listing-cta-wrapper {
    margin-top: auto;
    padding: 5px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.listing-card .listing-cta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.listing-card .listing-cta-stack .btn,
.listing-card .listing-cta-stack button.btn {
    width: 100%;
    max-width: 320px;
}
.listing-results .listing-card {
    height: 100%;
}
@media (max-width:768px) {
    .listing-card .listing-cta-stack .btn,
    .listing-card .listing-cta-stack button.btn {
        max-width: 100%;
    }
}
.truck.item-container.card.element-relative.listing-card{
    min-height: 770px;
}
.parts-listing-page.container-fluid,
.trucks-listing-page.container-fluid {
    max-width: 1800px;
    padding-left: clamp(2.5rem, 5vw, 6rem);
    padding-right: clamp(2.5rem, 5vw, 6rem);
}

.listing-photo {
    height: 260px;
    min-height: 260px;
    max-height: 260px;
    overflow: hidden;
}

.trucks-listing-page .listing-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trucks-listing-page .listing-content {
    flex: 1;
    overflow: hidden;
    padding: 12px 16px;
}

.trucks-listing-page .listing-info {
    flex-grow: 1;
    max-height: 260px;
    overflow: hidden;
}

.trucks-listing-page .listing-cta-wrapper {
    margin-top: auto;
}
.listing-results:has(.template2-card) {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-bottom: 20px;
}
@media (max-width: 1024px) {
    .listing-results:has(.template2-card) {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .listing-results:has(.template2-card) {
        grid-template-columns: 1fr;
    }

    .parts-listing-page.container-fluid,
    .trucks-listing-page.container-fluid {
        padding-top: 2em;
    }
}