:root {
    /*Colours used in Sellers pages*/
    --main-blue: #3A79B0;
    --light-blue: #E4F3FF;
    --light-grey: #F1F1F1;
    --dark-grey: #333333;
    --main-red: #AD261F;
    --light-grey-text: #D3D3D3;

    --border-radius-10: 10px;
    --card-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.15);
    --box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);

    --staffing-scroll-delay: 0;
}

/* --------------- General --------------- */

body {
    background-color: #fff;
}

/***** Layout *****/
.spacer-sm {
    padding: 25px 0;
}

.spacer {
    padding: 50px 0;
}

/*****Background Colours*****/

/*Red bkg*/
.red-hero-bkg {
    background-color: var(--main-red);
}
/*Light grey bkg*/
.lt-grey-bkg {
    background-color: var(--light-grey);
}
/*Light blue bkg*/
.lt-blue-bkg {
    background-color: var(--light-blue);
}

/*White bkg*/
.white-bkg {
    background-color: #fff;
}

/*****End Background Colours*****/


/*Buttons*/

.btn-wrap {
    display: flex;
    flex-wrap: wrap;
}

.btn-wrap-centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-wrap a {
    margin: 5px;
}

a.btn-rounded-blue,
a.btn-rounded-grey,
a.btn-rounded-white {
    display: block;
    width: fit-content;
}

/*Typography*/
.sell-page h1,
.sell-page h2,
.sell-page h3,
.sell-page h4,
.sell-page p,
.sell-page li,
.sell-page span {
    font-family: var(--body-font);
}

.red-text {
    color: var(--main-red);
}

.blue-text {
    color: var(--main-blue);
}

/*End Typography*/

/* --------------- End General --------------- */

/* --------------- Hero --------------- */

.sell-on-tpi .banner {
    background-color: #101010;
    background-image: url('/Images/sellers/sell-parts/sell-parts-on-tpi/black-tread-bkg.webp');
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.6);
}

.banner h1,
.banner p {
    color: #fff;
}

.banner h1 {
    margin: 20px 0;
}

.banner p {
    font-size: 18px;
}

/*Hero Buttons*/
.banner .btn-wrap {
    margin: 50px 0 0;
}
/* --------------- End Hero --------------- */

/***** Page Navigation Section *****/

.page-nav-container >div:first-of-type {
    padding: 0;
}

.navbar-default {
    background-color: initial;
    border: none;
    padding: 0;
    margin: 0;
}

.navbar-header button.d-flex {
    align-items: center;
    float: left;
}

.navbar-header .section-heading {
    margin: 0;
}

.navbar-default .navbar-toggle {
    border: none;
}

.navbar-default .navbar-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(-180deg);
    transition: all 0.3s linear;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus {
    background-color: initial;
}

.navbar-toggle > div {
    padding: 9px 10px;
    width: fit-content;
}

.page-navigation .navbar-collapse {
    padding: 0;
    position: initial;
}


/*Makes the nav sticky on scroll and un-stick when you scroll back to top*/
.sell-page .page-navigation {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 5px 0;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
    background-color: var(--light-blue);
}

.sell-page .page-navigation ul.nav {
    padding: 0;
}

.sell-page .page-navigation .nav-item {
    position: relative;
}

.sell-page .page-navigation .nav-link {
    color: var(--dark-grey);
    font-weight: bold;
}

.sell-page .page-navigation .nav-link .fa {
    font-weight: 100;
    font-size: 14px;
}

.sell-page .page-navigation .nav-link:hover {
    background-color: initial;
}

.sell-page .page-navigation .btn-rounded {
    font-size: 18px;
}

/*The page navigation row for mobile only*/

.sell-page .page-navigation .row.hidden-md.hidden-lg {
    display: flex;
    align-items: center;
}

/*Align icon to the right*/
.sell-page .page-navigation .page-nav-icon-wrap {
    display: flex;
    justify-content: flex-end;
}
/*Make hamburger icon larger*/
.sell-page .page-navigation .fa-bars {
    font-size: 24px;
    display: block;
}

.sell-page .page-navigation .fa-bars:hover {
    cursor: pointer;
}

/*Hide blue btn on mobile*/
.page-nav-cta {
    display: none;
}

/***** End Page Navigation Section *****/

div:has(> .blue-header-card) {
    margin: 10px 0;
}

.blue-header-card {
    display: grid;
    grid-template-rows: 80px 1fr;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    margin: 10px 0;
    height: 100%;
}

.blue-header-card > div {
    padding: 0 5%;
}

.blue-header-card .card-header {
    background-color: #E4F3FF;
    display: flex;
    align-items: center;
}

.blue-header-card .card-header h3 {
    margin: 0;
}

.blue-header-card .card-body {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

/*  ------------------------------------------------------------------------------------
Effects & Transitions
------------------------------------------------------------------------------------  */

/***** Underline effect for page navigation links on hover *****/
.page-navigation .nav li a.nav-link {
    display: inline-block;
    padding: 15px 30px;
    width: 100%;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
}

.sell-page .page-navigation .nav-link.nav--current {
    background-color: var(--main-blue);
    color: #fff;
}

.nav-link.nav--current:before {
    right: 0;
}

/***** End Underline effect for page navigation links on hover *****/

/***** Card Layout Section *****/
.heading-accent {
    position: relative;
}

.heading-accent:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    width: 8%;
    height: 3px;
    background-color: var(--main-blue);
    margin: 0 auto;
}

.card-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.card-wrapper {
    display: flex;
}

.card-container {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-10);
    padding: 3% 5%;
    margin: 10px 0;
    width: 100%;
    -webkit-box-shadow: var(--card-box-shadow);
    box-shadow: var(--card-box-shadow);
}

.icon-wrap {
    background-color: var(--main-blue);
    /*Make circle*/
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /*Center the icon*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.icon-wrap .fa {
    color: #fff;
    font-size: 18px;
}
/***** End Card Layout Section *****/

/***** Full Width Card Item Section Section *****/
/*
Sections using this styling:
- Premium Tools
- Business Reports
- Not a Seller Yet?
*/

.container.fw-card-item {
    max-width: 90%;
    border-radius: var(--border-radius-10);
    -webkit-box-shadow: var(--card-box-shadow);
    box-shadow: var(--card-box-shadow);
    padding: 3%;
    overflow: hidden;
}

.container.fw-card-item .row {
    display: flex;
    flex-direction: column-reverse;
}

.container.fw-card-item .btn-wrap {
    margin-top: 20px;
}

/***** End Full Width Card Item Section Section *****/

/***** Not a Seller Yet? Section *****/
.not-a-seller-yet .container.fw-card-item {
    padding: 0;
}

.not-a-seller-yet .container.fw-card-item > .row > div:first-of-type div {
    padding: 5% 3%;
}

.not-a-seller-yet h2 {
    font-size: 24px;
}

.not-a-seller-yet img {
    height: 100%;
    object-fit: cover;
}

/***** End Not a Seller Yet? Section *****/


/*  ------------------------------------------------------------------------------------
End Effects & Transitions
------------------------------------------------------------------------------------  */
.section-blue-lead,
p.section-blue-lead {
    font-weight: bold;
    color: var(--main-blue);
    letter-spacing: 1px;
    margin-bottom: 0;
}

.section-blue-lead + h2 {
    margin-top: 5px;
}

/* --------------- Testimonials Section --------------- */

.reviews h2 {
    font-weight: 100;
    margin-bottom: 30px;
}

.reviews .card-header img {
    width: 100%;
    max-width: 100px;
}

.reviews .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.reviews .card-body {
    padding: 3% 5%;
}

.review-rating {
    margin-bottom: 10px;
}

.review-rating .fa {
    color: var(--main-blue);
    font-size: 24px;
}

.reviewer-info h3 {
    font-size: 18px;
}

.reviewer-info p {
    font-size: 16px;
    margin: 0;
}

.reviewer-info h3,
.reviewer-info p {
    text-align: right;
}
/* --------------- End Testimonials Section --------------- */

/*  ------------------------------------------------------------------------------------
Media Queries
------------------------------------------------------------------------------------  */

@media only screen and (min-width: 768px) {
    .d-md-flex {
        display: -ms-flexbox;
        display: flex;
    }
    .sell-page p,
    .sell-page li,
    .sell-page td {
        font-size: 18px;
    }
    .section-blue-lead {
        font-size: 18px;
    }
    /***** Page Navigation *****/
    .navbar-header {
        display: none;
    }

    .page-navigation .nav li a.nav-link {
        padding: 15px 10px;
    }

    .sell-page .page-navigation .nav-link.nav--current {
        background-color: initial;
        color: initial;
        padding: 15px 10px;
    }
    /* Underline on .nav-link */
    .page-navigation .nav-link:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 100%;
        bottom: 0;
        background: var(--main-blue);
        height: 4px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    /*Show the nav-link on hover*/
    .page-navigation .nav-link:hover:before {
        right: 0;
    }
    /***** End Page Navigation *****/

    /***** Full Width Card Item Section *****/
    .container.fw-card-item .row {
        flex-direction: row-reverse;
    }
    .register-questions .container.fw-card-item .row {
        flex-direction: row;
    }
    /***** End Full Width Card Item Section *****/

    /***** Card Section *****/
    .card-container {
        padding: 10% 5%;
    }
    /***** End Card Section *****/

    /***** Not a Seller Yet? Section *****/
    .not-a-seller-yet .container.fw-card-item > .row {
        flex-direction: row;
    }
    .not-a-seller-yet .container.fw-card-item > .row > div:first-of-type div {
        padding: 3% 5%;
    }

    /***** End Not a Seller Yet? Section *****/


    .reviews h2 {
        font-size: 32px;
    }
    .row:has(.blue-header-card) {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
     }
}

@media only screen and (min-width: 992px) {
    /***** Page Navigation *****/

    .sell-page .page-navigation .nav {
        display: flex;
    }
    /*Add border right*/
    .sell-page .page-navigation .nav-item:after {
        content: "";
        background: var(--light-grey-text);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: 50%;
        width: 1px;
    }
    /*Remove border right for last item*/
    .sell-page .page-navigation .nav-item:last-of-type:after {
        content: revert;
    }
    .page-nav-cta {
        display: block;
    }
    /***** Page Navigation *****/
}

@media only screen and (min-width: 1200px) {

    .spacer-lg {
        padding: 100px 0;
    }

    .not-a-seller-yet h2 {
        font-size: 30px;
    }
    .reviews h2 {
        font-size: 36px;
    }
}

/*  ------------------------------------------------------------------------------------
End Media Queries
------------------------------------------------------------------------------------  */