.tireTestReportPageWrapper {color: var(--color-blacktext);}
.tireTestReportPageWrapper section {margin-bottom: 3em;}

/* Test Report Header */
.homeLandingImg .mainBanner .mainBanner-blog .mainBanner-ov .mainBannerImg {object-fit: cover;object-position: center;height: 420px !important;width: 100vw;min-height: 400px;}
.homeLandingImg .mainBanner {height: 420px;}

.tireTestReportPageWrapper .breadcrumbs {display: flex;flex-wrap: wrap;margin-bottom: 0.5em;}
.tireTestReportPageWrapper .breadcrumbs li {text-transform: capitalize;}
.tireTestReportPageWrapper .breadcrumbs a::after {content: ">" !important;background: none;width: auto;height: auto;display: initial;margin: 0 0 0 5px;}

.testReportHeader .pageHeader {margin: 0 0 0.5em 0;}
.testReportHeader p {margin: 0 0 2em 0;}

.testingFormula {width: 100%;display: flex; gap: 2em;margin: 1.2em 0;}
.testingFormula .column {flex: 1 1 30%;display: flex;flex-direction: column;text-align: center;max-width: 600px;}
.testingFormula .imageContainer {height: 120px;display: flex;align-items: flex-end;justify-content: center;}
.testingFormula .column img {max-height: 120px;max-width: 200px;}
.testingFormula .column p {margin: 0;}

/* Test Report Video */
.testReportVideo .slick-prev {left: -50px;top: 30%;}
.testReportVideo .slick-next {right: -50px;top: 30%;}
.testReportVideo .slick-initialized .slick-slide {display: flex;gap: 2em;}
.testReportVideo .slick-slider {margin-bottom: 0;}
.testReportVideo .videoResultsContainer {width: 50%;}
.testReportVideo .videoResultsContainer iframe {width: 100%;}

/* Test Report Tire Tiles */
.tiresTestedGrid {width: 100%;display: grid;grid-template-columns: repeat(auto-fill, minmax(325px, 1fr));grid-gap: 1em;}
.tiresTestedGrid .tiresTestedTile {display: flex;flex-direction: column;}
.tiresTestedTile {padding: 15px;box-shadow: 4px 4px 8px rgb(0 0 0 / 10%);}
.tiresTestedTile .tileHeader {display: flex;gap: 1em;border-bottom: 1px solid var(--color-mediumgrey);padding-bottom: 15px;margin-bottom: 15px;}
.tiresTestedTile .tireLogo {display: flex;justify-content: space-between;}
.tiresTestedTile .tileHeaderWrapper {width: 100%;}
.tiresTestedTile .tileHeader h3 {margin: 0 0 5px 0;text-transform: uppercase;}
.tiresTestedTile .tileHeader h3 .modelName {font-weight: var(--font-weight-reg);}
.tiresTestedTile .tileHeader p {margin: 0 0 0 0;font-size: var(--font-size-xs);}
.tiresTestedTile .tileHeaderWrapper .tireCategory {display: flex;align-items: center;gap: 5px;margin: 0 0 5px 0;}
.tiresTestedTile .tileHeader .help {background: url(/images/icons/questionMark_grey.svg) no-repeat;width: 15px;height: 15px;cursor: pointer;}
.tiresTestedTile .tireImage {height: 110px; min-width: 110px;overflow: hidden;}
.tiresTestedTile .tireImage img {max-width: 110px;height: 230px;object-fit: cover;object-position: 0%;}
.tiresTestedTile .logoWrapper .logo75 {height: auto;}

.favoriteStar label {height: 25px;width: 26px;position: relative;}
.favoriteStar input[type="checkbox"] + label:before {background: url(/images/icons/favoriteStar_border.svg) no-repeat;width: 26px;height: 25px;box-shadow: none;border-radius: 0;margin: 0;cursor: pointer;}
.favoriteStar input[type="checkbox"]:checked + label:after {top: 0;left: 0;border: none;height: 0;width: 0;transform: none;}
.favoriteStar input[type="checkbox"]:checked + label:before {background: url(/images/icons/favoriteStar_filled.svg) no-repeat;width: 26px;height: 25px;position: relative;top: 0;left: 0;border: none;transform: none;background-color: transparent;box-shadow: none;}

.tiresTestedTile .tileCopy li {margin-bottom: 10px;}
.tiresTestedTile .tileCopy span {display: block;}
.tiresTestedTile .tileFooter {margin-top: auto;}
.tiresTestedTile .tileFooter .primaryBtn {width: 100%;margin-top: 10px;}

.spiderTireTilesContainer {width: 100%;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));grid-gap: 1em;}
.spiderTireTilesContainer .tiresTestedTile {display: flex;flex-direction: column;border: 4px solid #ffffff;}
.spiderTireTilesContainer h3 {font-size: var(--font-size-lg) !important;font-weight: var(--font-weight-semibold) !important;text-align: center;text-transform: uppercase;margin: 0 0 0.5em 0;}
.spiderTireTilesContainer .tileHeader {flex-direction: column;align-items: center;}
.spiderTireTilesContainer .tireImage {margin: 0 0 15px 0;}
.spiderTireTilesContainer .tileHeader h4 {margin: 0 0 5px 0;font-size: var(--font-size-xl)!important;}
.spiderTireTilesContainer .tileHeader h4 .modelName {font-weight: var(--font-weight-reg);}
.spiderTireTilesContainer .tileCopy li {display: flex;justify-content: space-between;margin-bottom: 10px;}
.spiderTireTilesContainer .tileCopy li span:last-of-type {font-weight: var(--font-weight-semibold);}
.spiderTireTilesContainer .tiresTestedTile .tileFooter {margin-top: auto;}
.spiderTireTilesContainer .tiresTestedTile.highlighted {border: 4px solid #FFF9A0;}

.testReportWritten .tiresTestedTile {margin-bottom: 1em;}
.testReportWritten .tiresTestedTile:last-child {margin-bottom: 0;}
.testReportWritten .tileFooter .primaryBtn {width: inherit;}
.testReportWritten .tireRatingsContainer {display: flex; gap: 2em;}
.testReportWritten .tireRatingsContainer li {margin-bottom: 0.5em;}
.testReportWritten .tireRatingsContainer li:last-child {margin-bottom: 0;}
.testReportWritten .tireRatingsContainer span {font-weight: var(--font-weight-semibold);}
.testReportWritten .tiresTestedTile .shown .readMoreWrap {max-height: initial !important;}

/* Test Report Charts */
.testReportResultCharts form, .testReportSpiderCharts form {display: flex;flex-wrap: wrap;gap: 15px;}
.testReportResultCharts .trSelect select, .testReportSpiderCharts .trSelect select {width: 100%;}

.trToggle input[type="checkbox"]+label {flex-direction: column-reverse;}
.trToggle input[type="checkbox"] + label:before {position: relative;z-index: 1;height: 35px;width: 75px;opacity: 100;border: 1px solid var(--color-mediumgrey);border-radius: 20px;box-shadow: none; margin: 0.3rem 0 0 0;cursor: pointer;}
.trToggle input[type="checkbox"] + label:after {content: '';position: absolute;z-index: 2;top: 30px;left: 3px;height: 28px;width: 28px;border: 1px solid var(--color-mediumgrey);background-color: var(--color-mediumgrey);border-radius: 100%;cursor: pointer;}
.trToggle input[type="checkbox"]:checked+label::before {background-color: var(--color-blue);box-shadow: none;cursor: pointer;}
.trToggle  input[type="checkbox"]:checked+label::after {content: '';position: absolute;z-index: 2;top: 30px;left: 44px;height: 28px;width: 28px;border: 1px solid var(--color-mediumgrey);background-color: var(--color-white);border-radius: 100%;transform: none;cursor: pointer;}

.resultChartsWrapper, .spiderChartsWrapper {margin: 2em 0;}
.chartHeading, .spiderHeading {display: flex;justify-content: space-between;}
.chartHeading .title, .spiderHeading .title {margin: 0 35px 0 0;}
.chartHeading .title span, .spiderHeading .title span {display: block;font-size: var(--font-size-normal);font-weight: var(--font-weight-reg);margin-top: 0.5em;}
.chartHeading .key a, .spiderHeading .key a {display: flex;position: relative;margin-bottom: 5px;text-transform: uppercase;color: var(--font-color-primary);font-weight: var(--font-weight-semibold);}
.chartHeading .key .color, .spiderHeading .key .color {height: 20px;width: 20px;position: absolute;left: -28px;}

.chartContent {position: relative;display: flex;justify-content: center;margin-top: 2em;}
.horizontal span.canvaswrap {position: relative; display: block;order: 2;height: min-content !important;}
.horizontal div.barnumber {position: absolute;display: block;text-align: right;font-size: .75em;color: var(--color-white);padding-right: 5px;left: 0 !important;}
.horizontal div.yaxis {order: 1;height: min-content;}
.horizontal div.yaxis span {display: flex;flex-direction: column;justify-content: center;align-items: flex-end;margin-right: 10px;font-size: var(--font-size-md);}
.horizontal div.yaxis span.tire-brand, .horizontal div.yaxis span.tire-model {line-height: initial;text-align: right;}
.horizontal .chartWrapper {order: 2;}
.horizontal div.labels, .horizontal div.x-axis-label {text-align: center;margin-left: -33px;}
.horizontal span.label {display: inline-block;margin-right: 0 !important;}

.spider canvas {display: block;height: auto;width: 100%;max-width: 640px;margin: 0 auto;}

/* Test Report */
.tire-test-carousel {max-width: 800px;margin: 0 auto;}
.tire-test-carousel .slick-prev {left: -50px;}
.tire-test-carousel .slick-next {right: -50px;}
.tire-test-carousel .slick-dots {display: block; position: relative;max-width: 75%; margin: 0 auto;}

/* Other Tire Tests */
.testReportOtherReports .otherReportsGrid {display: flex;gap: 2em;}
.testReportOtherReports .otherReportsTile {flex: 1 1 30%;display: flex;flex-direction: column;}
.testReportOtherReports h3, .testReportOtherReports h4 {margin-top: 0;}
.testReportOtherReports .otherReportsTileCopy {margin-bottom: 1em;}
.testReportOtherReports .otherReportsTileFooter {margin-top: auto;}
.testReportOtherReports .otherReportsTileFooter a {width: 100%;}
.testReportOtherReports .otherReportsTile img {display: none;}

/* Tablet */
@media only screen and (max-width:1024px) {
	/* Test Report Header */
	.testingFormula {flex-direction: column;align-items: center;}

	/* Test Report Video */
	.testReportVideo .slick-prev, .testReportVideo .slick-next {display: none !important;}
	.testReportVideo .slick-initialized .slick-slide {flex-direction: column;}
	.testReportVideo .videoResultsContainer {width: 100%;}

	/* Test Report */
	.tire-test-carousel .slick-prev {top: initial;left: 0;bottom: -10px;}
	.tire-test-carousel .slick-next {top: initial;right: 0;bottom: -10px;}

	/* Test Report Charts */
	.chartHeading, .spiderHeading {display: block;}
	.chartHeading .title, .spiderHeading .title {margin: 0 0 2em 0;}
	.chartHeading .key, .spiderHeading .key {padding-left: 29px;}
	.horizontal div.labels, .horizontal div.x-axis-label {margin-left: -23px;}

	/* Other Tire Tests */
	.tire-test-carousel {max-width: 100%;}
	.testReportOtherReports .otherReportsGrid {flex-direction: column;align-items: center;}
	.testReportOtherReports .otherReportsTile {width: 100%;}
}

@media only screen and (max-width: 767px) {
	/* Test Report Header */
	.homeLandingImg .mainBanner {height: 360px !important;}

	/* Test Report Tire Tiles */
	.tiresTestedGrid {display: block;}
	.tiresTestedGrid .tiresTestedTile {margin-bottom: 1em;}
	.testReportWritten .tireRatingsContainer {display: block;}
	.testReportWritten .tireRatingsContainer li:last-child {margin-bottom: 0.5em;}

	/* Test Report Charts */
	.testReportResultCharts .trSelect, .testReportSpiderCharts .trSelect {width: 100%;}
	.horizontal div.x-axis-label {margin-left: -6px;}
	.horizontal div.labels {display: none;}
	.horizontal div.yaxis span {font-size: var(--font-size-xs); margin-right: 5px;}

}

@media only screen and (max-width: 500px) {
	/* Test Report Tire Tiles */
	.tiresTestedTile .tileHeader {flex-direction: column;align-items: center;}
}