

#invapp {
    text-align: left;
}

#invapp p {
    margin: 1em 0;
}

#invapp .raised {
    background: #fff;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
}

#inv-container .inv-results {
    font-size: 1em;
    /* padding: 1em 0; */
    text-transform: uppercase;
}

/* MEDIUM AND HIGHER */
@media print, screen and (min-width: 40em) {
    #inv-container .inv-results {
        font-size: 1.3em;
    }
}

#inv-container .inv-results .inv-totals {
    font-weight: 600;
}

#inv-container .inv-results .inv-totals > li {
    margin-bottom: 0;
}

#inv-container .inv-results .inv-totals > li::after {
    margin: 0 0 0 1rem;
    content: '';
    border-left: 1px var(--color-medium-gray) solid;
}

#inv-container .inv-results .inv-totals > li:last-of-type::after {
    border-left: none;
}

#inv-container .inv-results select {
    margin-bottom: 0;
}

#inv-container .inv-results .inv-totals .count {
    /* color: var(--color-red); */
}

#inv-container #minisearch {
    /* margin-top: .3em;
    padding-top: .3em;
    border-top: 1px #808285 solid; */
    /* font-size: .9em; */
    text-transform: uppercase;
}

#inv-container #minisearch label {
    display: block;
    font-weight: 600;
    /* font-size: .9em; */
}

#inv-container #minisearch input, #inv-container #minisearch select {
    width: 100%;
    /* font-size: .9em; */
    /* border: 1px #394141 solid; */
    /* padding: .4em; */
}

#inv-container .inv-results .inv-page {
    /* margin-left: 1em;
    padding-left: 1em;

    border-left: 1px #808285 solid; */
}

#inv-container .inv-results .clearfilter {
    margin-left: .5rem;
}

/* MEDIUM AND HIGHER */
@media print, screen and (min-width: 40em) {
    #inv-container .inv-results .clearfilter {
        margin-left: 1rem;
    }
}

#inv-container .inv-results .sort-cont {
    text-align: right;
}

#inv-container .inv-results .sort-cont select {
    /* display: inline-block;
    width: auto; */
}

#inv-container .inv-results select {
    
}

#inv-container .inv-results select {
    
}

#invapp .ss-button {
    background: var(--blue);
}

.listing {
    position: relative;
    background: #fff;
    box-shadow: 0 0 15px 0 rgba(0,0,0,.1);
    /* transition: box-shadow 0.5s ease-in-out; */
    padding-bottom: 2rem
}

.listing:hover {
    /* box-shadow: 0 0 15px 0 rgba(0,0,0,.2); */

}

.listing .actions {
    position: absolute;
    bottom: 0;
}

.listing .ss-button {
    padding: .5em 1em;
    text-transform: uppercase;
    font-weight: normal;
    font-size: .9em;
}

.listing .button .fa {
    opacity: .75;
    margin-right: 5px;
}

.listing-header {
    text-transform: uppercase;;
}

.listing .listing-header .listing-title{
    display: block;
    margin: 5px 0 5px 0;
    color: var(--blue);
    font-weight: bold;
    font-size: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.listing .listing-header .listing-subtitle {
    /* font-size: .9em; */
}

.listing-header .pricing {
    text-align: right;
}

.listing-header .pricing .price-label {
    font-size: .8em;
    font-style: normal;
}

.listing-header .pricing .price {
    font-weight: bold;
    font-size: 1.2em;
    color: var(--color-red);
}

.listing .thumb {
    width: 100%;

    max-height: 250px;
    object-fit: cover;
}

.listing .thumb-cell {
    position: relative;
}

.listing .thumb-cell ul.decorators {
    list-style: none;
    position: absolute;
    left: 5px;
    top: 5px;
    margin: 0;
    padding: 0;
}

.listing .thumb-cell ul.decorators > li {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 2px 6px;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 4px;
}

.listing .thumb-cell ul.decorators > li:last-of-type {
    margin-right: 0;
}

.listing .thumb-cell ul.decorators .video-decorator {
    background: #b00;
    color: #fff;
}

.listing .thumb-cell ul.decorators .video-decorator:before {
    content: "\f04b";
    font-family: FontAwesome;
    margin-right: 4px;
    font-size: .8em;
}

.listing .listing-body {

}

.listing .listing-body .info .meta:first-child {
    margin-top: 0 !important;
}

.listing .heading {
    font-weight: 600;
    font-size: 1.05em;
    text-transform: uppercase;
}

.listing ul.specs {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    /* font-size: .9em; */
}

.listing ul.specs li {
    margin: 0;
    padding: 0 3px;
    border-bottom: 1px #aaa solid;
}

.listing ul.specs li::after {
    content: ""' '"";
    clear: both;
    display: table;
}

.listing ul.specs .name, .listing ul.specs .value {
    display: block;
    margin: 0;
    padding: 0;
    width: 50%;
    font-weight: normal;
}

.listing ul.specs .name {
    float: left;
    font-weight: 600;
}

.listing ul.specs .value {
    float: right;
    text-align: right;
}



/* BEGIN PAGING */

.inv-paging {
    margin-top: 1rem;
}

.inv-paging .page {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 5px;
    background: var(--blue);
    border: 1px var(--blue) solid;
    color: white;
    /* font-weight: 600; */
    border-radius: 2px;
}

.inv-paging .page:hover {
    opacity: .8;
}

.inv-paging .page:last-child {
    margin-right: 0;
}


.inv-paging .page.current {
    background: none;
    border: 2px var(--blue) solid;
    background: #fff;
    color: #333;
    /* color: var(--color-red); */
}

/* END PAGING */




/* BEGIN SPECSHEET */

#specsheet {
    /* padding: 10px 0; */
}

#specsheet .back {

    font-weight: 600;
    margin-bottom: 10px;
    color: #394141;
}

#specsheet .unit-title {
    padding: 0;
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary-color)
}

#specsheet .video-button {
    background: var(--color-red);
    color: var(--color-white);
}

/* Large AND HIGHER */
@media print, screen and (min-width: 64em) {
    
}


#specsheet #unit-header .price {
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.5rem !important;
    color: var(--color-red);
    line-height: normal;
}

#specsheet #top-unit-header .unit-title {
    font-size: 1.3rem;
}

#specsheet #top-unit-header .price {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-red);
    text-transform: uppercase;
}

#specsheet #unit-header .auc-runnumber {
    display: inline-block;
    margin-left: 1rem;
}

/* MEDIUM AND HIGHER */
@media print, screen and (min-width: 40em) {
    #specsheet #top-unit-header .unit-title {
        font-size: 1.5rem;
    }

    #specsheet #top-unit-header .price {
        font-size: 1.5rem;
        font-weight: bold;
    }
}

/* BEGIN BOX STYLES */

#specsheet .box {
    margin: 0 0 1rem 0
}

#specsheet .box .box-body {
    padding-top: .75rem;
    /* padding-bottom: .75rem; */
}

#specsheet .box .box-body.nopadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#specsheet .box.bordered {
    border: 1px #eee solid;
}

#specsheet .box.bordered .box-body {
    padding-left: 10px;
    padding-right: 10px;
}

#specsheet .box .box-header {
    position: relative;
    padding: 6px 0;
    margin: 0;
    border-bottom: 1px #ddd solid;
    border-top: 1px #ddd solid;
}

#specsheet .box.alt .box-header {
    background: #394141;
    border-top: none;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#specsheet .box.alt .box-header .box-title {
    color: #fff;
}

#specsheet .box.alt.bordered {
    border: none;
}

#specsheet .box.alt.bordered .box-body{
    border-color: #eee;
    border-style: solid;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
}


#specsheet .box.alt .box-header {
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}

#specsheet .box .box-header:after {
    content: "";
    clear: both;
    display: table;
}

#specsheet .box .box-header .box-title {
    float: left;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: bold;
    color: #79797d;
}

#specsheet .box .box-header .more {
    float: right;
    font-size: .9em;
    color: #888;
}

/* END BOX STYLES */

#specsheet #quickspecs .spec-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: .5rem;
}

#specsheet #quickspecs .spec-container dl {
    /* flex: 0 1 auto;
    width: calc(50%); */
    width: 100%;
    padding: 0;
    margin: 0;
}

#specsheet #quickspecs .spec-container dt {
    float: left;
    width: 30%;
    padding: 3px 0;
    font-weight: 600;
    clear: both;
}

#specsheet #quickspecs .spec-container dd {
    float: left;
    padding: 3px 0;
    margin: 0 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flexslider {
    margin-bottom: 30px !important;
    border: 0;
}

.flexslider ul {
    list-style: none !important;
    padding: 0 !important;
}

.flexslider .slides img {
    max-height: 300px;
    object-fit: cover;
}

@media screen and (min-width: 40rem) {
    .flexslider .slides img {
        max-height: 550px;
    }   
}

.flex-direction-nav a {
    height: 60px;
}

.flex-direction-nav a:before {
    color: rgba(255, 255, 255, .8);
}

#carousel li {
    width: 100px !important;
    cursor: pointer;
}

#carousel img {
    border: 4px transparent solid;
    width: 100px !important;
    max-height: 92px;
    object-fit: cover;
}

#carousel .flex-active-slide img {
    border: 4px var(--primary-color) solid;
}


#specsheet .video-frame {
    width: 100%; 
    height: 250px
}

@media print, screen and (min-width: 40em) {
    #specsheet .video-frame {
        height: 400px
    }
}

/* BEGIN SPECS */
#specsheet .specs {
    column-count: 1;
    column-gap: 0;
    padding-bottom: 1rem;
}

@media print, screen and (min-width: 40em) {
    #specsheet .specs {
        column-count: 2;
        column-gap: 20px;
    }

    #carousel li {
        width: 90px !important;
    }
    
    #carousel img {
        border: 2px transparent solid;
        width: 90px !important;
        height: 66px;
    }
}

@media print, screen and (min-width: 64em) {
    #carousel li {
        width: 120px !important;
    
    }
    
    #carousel img {
        border: 4px transparent solid;
        width: 120px !important;
        height: 90px;
    
    }
}

#specsheet .specs > * {
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
}

#specsheet #specs .specgroup {

}

#specsheet #specs .specgroup .groupname {
    padding: 10px 5px;
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    background: #f1f1f1;
    color: var(--primary-color);

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#specsheet .specs > div {
    display: table;
    width: 100%;
    border-bottom: 1px #ddd solid;
}


#specsheet .specs > div .name,
#specsheet .specs > div .value {
    font-size: 1em;
}
#specsheet .specs > div .name {
    display: table-cell;
    padding: 4px 0;
    margin: 0;
    width: 50%;
    font-weight: 600;
}
@media print, screen and (min-width: 64em) {
    #specsheet .specs > div .name {
        width: 40%;
    }
}
#specsheet .specs > div .value {
    display: table-cell;
    padding: 6px;
    margin: 0 6px 0 0;
    width: 63%;
}
@media print, screen and (min-width: 64em) {
    #specsheet .specs > div .value {
        width: 47%;
    }

    #specsheet #specs .specgroup .groupname {
        font-size: 1.2em;
    }
    
    #specsheet #specs .specgroup .specs {
        margin-left: 15px;
        /* padding-left: 10px;
        border-left: 4px #f1f1f1 solid; */
    }

    #specsheet #specs .specgroup .specs .name {

    }
}

/* END SPECS */

/* BEGIN OPTIONS */
#specsheet .opts {
    /* display: flex;
    flex-flow: row wrap; */
    column-count: 2;
}

@media print, screen and (min-width: 40em) {
    #specsheet .opts {
        column-count: 3;

        column-gap: 10px;
    }
}

@media print, screen and (min-width: 80em) {
    #specsheet .opts {
        column-count: 3;

        column-gap: 20px;
    }
}

#specsheet .opts > span {
    /* width: 50%; */
    display: block;
    margin-right: 0;
    margin-left: 0;
    padding: 4px 0;
}

#specsheet .opts .fa-check {
    color: #080;
}

#specsheet .opts > span {
    display: flex;
    align-items: center
}

#specsheet .opts svg {
    fill: #080;
    margin-right: .5em;
}

@media print, screen and (min-width: 40em) {
    #specsheet .opts > div {
        width: 33.33333%;
        margin-right: 0;
        margin-left: 0;
    }
}
@media print, screen and (min-width: 64em) {
    #specsheet .opts > div {
        width: 25%;
        margin-right: 0;
        margin-left: 0;
    }
}

/* END OPTIONS */

#specsheet .dealer-name {
    margin-top: 0 !important;
    font-size: 1.1em;
    font-weight: 600;
}

#specsheet .dealer-address {
    padding-bottom: 0;
    margin-bottom: .5rem;
}

#specsheet .dealer-address .physical-location {
	font-weight: 500
}


#specsheet #loancalc #payment-label {
    font-size: 20px;
    font-weight: 600;
}

#specsheet #loancalc #payment-label sup {
    vertical-align: bottom;
}

#specsheet #loancalc label {
    font-weight: 600;
    display: block;
}

#specsheet #loancalc input, #specsheet #loancalc select {
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
}

#specsheet #loancalc .calc-button {
    
}

#specsheet #loancalc #payment {
    padding: 4px 0;
    font-size: 2.2em;
    color: var(--primary-color);
    font-weight: bold;
}


#specsheet #loancalc #payment small {
    color: #8a8a8a;
    font-size: 1.125rem;
}

#specsheet #loancalc .disclaimer {
    font-size: 12px;
    color: #222;
}

#specsheet #loancalc #total-loan {
    display: none;
}

#specsheet #similar {

}

#specsheet #similar img.thumb {
    width: 100%;
    max-height: 170px;
    object-fit: cover;
}

#specsheet #similar .title {
    font-size: 1.1em;
    font-weight: bold;
    /* color: #000; */
    text-transform: uppercase;
}

#specsheet #similar .price {
    font-weight: bold;
}

#specsheet #similar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


#tires .legend {
    margin-top: 1rem;
    font-size: .8rem;
}

#tires .legend li {
    margin-bottom: 0;
}

ul.tires {
    list-style:none;
    /* margin: 0 0 0 1rem; */
    margin: 0 0 0 0;

}

/* MEDIUM AND HIGHER */
@media print, screen and (min-width: 40em) {
    ul.tires {
    }
}

@media print, screen and (min-width: 64em) {
    ul.tires {
        margin: 0 0 0 15%;
    }
}

ul.tires .ph {
    display: block;
    float: left;
    width: 3rem;
    height: 70px;
    margin: 0 6px 6px 0;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(#ccc, #ddd);
    color: #222;
    border: 1px #444 solid;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select:none;

    font-weight: 600;
}


ul.tires .ph p {
    margin: 0 0 .25rem 0 !important;
    padding: 0;
    vertical-align: middle
}

ul.tires .ph .tread-depth {
    margin-top: .5rem !important;
}

ul.tires .ph .origin-type {
    margin-bottom: 0 !important;
}

ul.tires .a1, ul.tires .a2 {
    margin-bottom: 1.5rem;
}

ul.tires .a1 ~ .a2 {
    margin-top: -14px
}

ul.tires .a1.p1, ul.tires .a2.p1 {
    margin-left: 1.8rem;
}

ul.tires .a1.p2, ul.tires .a2.p2 {
    margin-left: 9.2rem;
}

ul.tires .a3.p1, ul.tires .a4.p1, ul.tires .a5.p1, ul.tires .a6.p1, ul.tires .a7.p1, ul.tires .a8.p1, ul.tires .a9.p1 {
    clear:left
}

ul.tires .p3 {
    margin-left: 6rem;
}


.brakes .ph{
    display: block;
    width: 3rem;
    height: 70px;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(#eee, #fefefe);
    color: #222;
    border: 1px #444 solid;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select:none;

    font-weight: 600;
}

.brakes .ph.p1 {
    margin-left: calc(75% - 35px);
}

.brakes .ph.p2 {
    margin-left: calc(25% - 35px);
}


.brakes .ph p {
    margin: 0 !important;
    padding: 0;
    line-height: 70px;
    vertical-align: middle
}

/* ul.brakes {
    list-style:none;
    margin: 0 0 0 1rem;
}

ul.brakes .ph {
    display: block;
    float: left;
    width: 3rem;
    height: 70px;
    margin: 0 6px 6px 0;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(#eee, #fefefe);
    color: #222;
    border: 1px #444 solid;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select:none;

    font-weight: 600;
}


ul.brakes .ph p {
    margin: 0 !important;
    padding: 0;
    line-height: 70px;
    vertical-align: middle
}

ul.brakes .a1, ul.brakes .a2 {
    margin-bottom: 1.5rem;
}

ul.brakes .a1 ~ .a2 {
    margin-top: -14px
}

ul.brakes .p1 {
    clear: left;
    margin-left: 3.8rem;
}

ul.brakes .p2 {
    margin-left: 9.2rem;
}

ul.brakes .p2 {
    margin-left: 6rem;
} */

/* END SPECSHEET */

