/* Alignfull width: full width for comparison tables and more */
.no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}

/* Hide overflow globally */
html, body {
    overflow-x: hidden;
}

/* Give all images inside of main content rounded corners */

div.inside-article img {
	border-radius: 8px;
}

/* Exclude from rounded corners */
table.foo-table img,
div#sizeComparisonCanvas img {
	border-radius: 0px;
}

/* Add margin to in-content block images */

figure.wp-block-image {
	margin-bottom: 15px;
}

/* Product page content-area width */

div#primary.content-area.productpage {
	width: 100% !important;
}

/* Center align images on mobile  .alignleft and .alignright images on mobile */

@media (max-width: 768px) {
    body figure.alignleft,
    body figure.alignright {
        float: none !important;
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto;
    }
}



/* Layout & design changes Sept 2026 */

div#primary.content-area {
	border-left: 1px solid rgba(0,0,0,.05);
	border-right: 1px solid rgba(0,0,0,.05);
}

div.inside-right-sidebar {
	border-right: 1px solid rgba(0,0,0,.05);
}

html.dark-mode div#primary.content-area {
	border-left: 1px solid var(--dm-border-strong);
	border-right: 1px solid var(--dm-border-strong);
}

html.dark-mode .inside-right-sidebar {
	border-right: 1px solid var(--dm-border-strong);
}

header.page-header {
	border-bottom:  1px solid rgba(0,0,0,.05);
}

html.dark-mode header.page-header {
	border-bottom: 1px solid var(--dm-border-strong);
}


	/* header and footer border */

header#masthead {
	border-bottom: 1px solid #e0e0e0;
}

div.site-footer {
	border-top: 1px solid #e0e0e0;
}

html.dark-mode header#masthead {
	border-bottom: 1px solid var(--dm-border);
}

html.dark-mode div.site-footer {
	border-top: 1px solid var(--dm-border);
}




/* Homepage block fix 'easily compare' - only on home page */

.home-usp .wp-block-media-text__content p {
		margin-top: 10px;
		margin-bottom: 0.5em;
}

.home-usp .wp-block-media-text__content li {
		line-height: 1.35em;
		margin-bottom: 10px;
}

.home-usp .wp-block-media-text .wp-block-media-text__content {
    padding: 0 6%;
}

/* Homepage USP block link color change */

.wp-block-media-text.has-background.home-usp a {
	color: #8E6E2B;
	font-weight: 400;
	text-decoration: none;
}

.wp-block-media-text.has-background.home-usp a:hover{
	color: var(--contrast)
}

/* Homepage USP block mobile changes */

@media (max-width: 768px) {
.home-usp ul {
margin: 0 0 1.5em 1.5em;
	}

p.easily-compare {
	font-size: 30px !important;
	}
}

/*** Search result pages search bar ***/

	/* Search bar styling — matches the homepage version, but full width.
   Scoped via :has() to the unique #ctse-search-input, so it only
   targets this specific search bar and can't affect the homepage one. */
.wp-block-search:has(#ctse-search-input) .wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	width: 100% !important;
}

.wp-block-search:has(#ctse-search-input) .wp-block-search__input {
	flex: 1 1 auto;
	height: 50px;
	box-sizing: border-box;
}

.wp-block-search:has(#ctse-search-input) .wp-block-search__button {
	height: 50px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}


/*** Blog roll / blog archive ***/

	/* thumbnail image size – mobile first: full width */
.blog .inside-article .post-image img,
.archive .inside-article .post-image img,
	.search-results .inside-article .post-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

	/* thumnail image size - On wider screens: cap the thumbnail at 200px */
@media (min-width: 769px) {
	.blog .inside-article .post-image img,
	.archive .inside-article .post-image img,
	.search-results .inside-article .post-image img {
		max-width: 200px;
		width: auto;
	}
}

/* Blog roll / archive post titles only */
.blog .site-main .inside-article .entry-header .entry-title,
.archive .site-main .inside-article .entry-header .entry-title {
	font-size: 29px;
	line-height: 1.3;
}

/* Change to link color on hover */
.blog .site-main .inside-article .entry-header .entry-title a:hover,
.archive .site-main .inside-article .entry-header .entry-title a:hover {
	color: var(--accent);
}


/* More white space above date and author */

.entry-meta {
	margin-top: 1em;
}

/* less white space around post image */
div.post-image {
	margin-top: 1.5em !important;
	margin-right: 1.5em !important;
}

/* Unordered / bulleted lists */

	/* Apply only on single blog posts */
body.single-post .entry-content ul > li,
body.single-post .entry-content ol > li {
	margin-bottom: 0.4em;	/* whitespace for level-1 items only */
}

	/* No extra whitespace on level-2 items */
body.single-post .entry-content ul ul > li,
body.single-post .entry-content ol ol > li {
	margin-bottom: 0;
}

	/* Hollow bullets on level-2 items - apply everywhere */
.entry-content ul ul > li {
	list-style-type: circle;
}


/* No padding on comparison page intro text */

.page-intro.wp-block-media-text .wp-block-media-text__content {
    padding: 0px 0px 0px 0px;
}

.page-intro > figure.wp-block-media-text__media {
    padding: 0px 20px 30px 20px !important;
}

/*** Intro blocks (Scroll, Sort, Filter, A|B) ***/

.ib-right-column p {
	text-align: center;
	margin-bottom: 0px;
}

.ib-left-column p {
	text-align: center;
	font-size: 17px;
	margin-bottom: 0px;
}

@media (min-width: 769px) {
.ib-left-column {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	div.ib-lc-text {
	padding-right: 7px;
	}

}

.ib-lc-text,
.ib-lc-icon {
	display: inline-block;
}

/* Extra classes for A vs B block and specs info block */

.ib-avsb.ib-container,
.ib-specs.ib-container {
	display: flex !important;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 15px;
	}

.ib-avsb .ib-left-column,
.ib-specs .ib-left-column {
	display: flex;
	width: 10%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	}

.ib-avsb .ib-right-column,
.ib-specs .ib-right-column {
	width: 90%;
	box-sizing: border-box;
	}

.ib-avsb .ib-right-column p,
.ib-specs .ib-right-column p {
	text-align: left;
	}

/* Mobile view */

@media (max-width: 768px) {
.ib-container {
	display: flex;
	box-sizing: border-box;
	}

.ib-left-column,
.ib-avsb .ib-left-column,
.ib-specs .ib-left-column {
	width: 20%;
	box-sizing: border-box;
	}

	.ib-lc-text,
	.ib-lc-icon {
	display: block;
}

div	.bigger-strong strong {
	font-size: 22px;
	line-height: 1.2em !important;
	
}

div .ib-lc-text p,
div .ib-lc-icon {
	line-height: 1.4em;
	text-align: center;
}

.ib-left-column p {
	text-align: left;
	}

.ib-right-column,
.ib-avsb .ib-right-column,
.ib-specs .ib-right-column {
	width: 80%;
	box-sizing: border-box;
	
	}

.ib-right-column p {
	text-align: left;
padding-left: 10px;
	}

}

/* margin in A|B comparison block fix */

div.wp-block-media-text.rounded-block.icon-img p {
	margin-bottom: 0em; 
}

/* Bigger gap between blocks in group on desktop */

@media (min-width: 768px) {
	.wp-block-group:where(.is-layout-flex) {
		gap: 25px;
	}
}

@media (min-width: 768px) {
.small-gap.wp-block-group:where(.is-layout-flex) {
		gap: 15px;
	}
}


/* Lists; smaller margin */
ul {
    margin: 0 0 1.5em 2.6em;
}

/* rounded button corners */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border-radius: 4px;
}

/* Checked checkbox, radio input, and range slider color fix */

input[type="checkbox"]:checked,
input[type="radio"]:checked,
input[type="range"] {
	accent-color: #007bff;
}

/* Keep extra header visible on scroll 

.footable-header {	
	position: relative !important;
}
*/

/*** standard classes ***/

hr {
		background-color: #E9E9E9;
		border: 0;
		height: 1px;
		margin-bottom: 15px;
		margin-top: 15px;
}

.rounded-borders-20 {
		border-radius: 20px;
}

.grey-borders {
		border: 1px solid #bababa;
}

.rounded-image img {
  	border-radius: 30px;
}

.small-margin-bottom {
		margin-bottom: 15px;
}

.medium-margin-bottom {
		margin-bottom: 25px;
}

.no-margin-top{
		margin: 0px 0px 10px 0px !important;
}

.xs-margin-left {
		margin-left: 0.5em;
}

.small-margin-left {
		margin-left: 1em;
}

.medium-margin-left {
		margin-left: 1.5em !important;
}

.small-padding-top {
		padding-top: 10px;
}

.padding-top-20px {
		padding-top: 20px;
}

.medium-padding-around {
		padding: 15px;
}

.small-padding-bottom {
		padding-top: 10px;
}

.rounded-block{
  	background-color: var(--base-2);
  	border-radius: 15px;
		border: 1px solid #bababa;
  	padding: 5px 10px 10px 10px;
}

.bigger-strong strong {
		font-size: 22px;
		line-height: 1.8em !important;
}

.block-stretch {
		align-items: stretch !important;
}

.scroll-arrow {
    color: white;
		font-weight: bold;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 0.1 !important;
    padding: 1px;
		padding-right: 2px;
		padding-left: 2px;
    padding-bottom: 4px;
    border-radius: 3px;
}

.ul {
		text-decoration: underline;
}

.bold {
		font-weight: bold;
}

.fwn {
		font-weight: normal;
}

.hide {
		display: none;
}

span.star {
		font-size: 1.08em;
		padding-right: 2px;
		color: orange;
}

a.clickable-header-link {
	text-decoration: none;
	color: var(--accent) !important;
}

.clickable-header-link:hover{
		color: var(--accent)
		text-decoration: none;
}

.clickable-header {
	color: var(--contrast);
	text-decoration: none;
}

.clickable-header:hover {
	color: var(--accent);
}

.social-icon-link {	
	color: var(--contrast);
	padding: 2px;
	font-size: 18px;
}	

.index-h2 {
	margin-bottom: 5px;
}

.index-list-border {
	border: 1px solid #efefef;
	padding: 15px;
	border-radius: 10px;
	margin-top: 15px;
}

.small-gap {
	gap: 1em;
}

.social-icon-link:hover{	
	color: var(--accent)
}

@media only screen and (max-width: 768px) {
.clickable-header {
	padding-bottom: 10px;
	}
}

h1.has-background,
h2.has-background,
h3.has-background,
h4.has-background,
h5.has-background,
h6.has-background {
    padding: 0.5em 0.5em;
}

.not-bold {
	font-weight: normal;
}

.ninja_clmn_nm_name .not-bold {
	color: #555;
	font-size: 0.95em;
}

/* WP block search */

.wp-block-search__button {
    margin-left: -10px;
		border-radius: 7px;
		padding-right: 60px;
		padding-left: 60px;
}

input[type="search"].wp-block-search__input {
		background-color: white;
		border-color: #d9d9d9;
		border-radius: 7px;
}


/* Stack block row group on mobile */
@media (max-width: 768px) {
    .wp-block-group.stack-on-mobile {
        flex-direction: column;
				gap: 10px;
    }
	    .wp-block-group.stack-on-mobile > p {
        text-align: left;
				padding-left: 15px;
    }

    .wp-block-group.stack-on-mobile > p > * {
        display: inline;
    }
	
		    .wp-block-group.stack-on-mobile > p > i.icon:first-of-type {
        margin-right: 7px;
    }
	
		 .wp-block-group.stack-on-mobile > p > br {
        display: none;
    }
	
}

/*Icon image naast text in block CSS */

.icon-img img {
	max-width: 45px;
	margin-left: 10px;
}

.icon-img {	
	grid-template-columns: auto !important;
}

.icon-img div {
	padding: 0 15px !important;
}

/* No padding around comparison table (full width group block), except bottom */

.site-main .wp-block-group__inner-container {
    padding: 0 0 7px 0;
}

/* Some padding left, right, and bottom of comparison table (full width group block) on desktop */

@media (min-width: 992px) {
.site-main .wp-block-group__inner-container {
    padding: 0 7px 7px 7px;
	}
}

/* smaller cell padding everywhere */
.ui.table td {
    padding-top: 0.1em !important;
    padding-right: 0.5em !important;
    padding-left: 0.5em !important;
    padding-bottom: 0.1em !important;
}

/* Prevent field overflow on mobile */
.footable .form-control {
    width: 100%;
    max-width: 90vw;
    box-sizing: border-box;
}

/* Smaller fields on tablet */
@media (min-width: 768px) {
    .footable .form-control {
        width: 100%;
        max-width: 8.5vw;
        box-sizing: border-box;
    }
}

/* Even smaller fields on desktop */
@media (min-width: 992px) {
    .footable .form-control {
        width: 100%;
        max-width: 6vw;
        box-sizing: border-box;
    }
}

/*** Info buttons; 'read more'/ notes ***/

	.info-icon {
		display: inline-block;
		padding-left: 5px;
		padding-right: 5px;
		border: 1px solid #777;
		border-radius: 1em;
		text-align: center;
		position: relative;
	}

	.info-icon span.symbol {
		font-size: 1.3em;
	}

	.info-icon:hover {
		background-color: #e0e0e0;
		cursor: pointer;
	}
	
	.info-icon.active {
		background-color: #ccc;
	}

	.info-text {
		cursor: default;
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		color: #000;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		top: 30px;
		left: -90px;
		z-index: 1;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
		}

/*** Main comparison table CSS ***/

/** Filter header row **/

/* Insert the Filter icon and 'Filter:' text in front of the filters */

.footable-filtering > th > form:first-child::before {
    content: "Filter:";
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTMuOSA1NC45QzEwLjUgNDAuOSAyNC41IDMyIDQwIDMybDQzMiAwYzE1LjUgMCAyOS41IDguOSAzNi4xIDIyLjlzNC42IDMwLjUtNS4yIDQyLjVMMzIwIDMyMC45IDMyMCA0NDhjMCAxMi4xLTYuOCAyMy4yLTE3LjcgMjguNnMtMjMuOCA0LjMtMzMuNS0zbC02NC00OGMtOC4xLTYtMTIuOC0xNS41LTEyLjgtMjUuNmwwLTc5LjFMOSA5Ny4zQy0uNyA4NS40LTIuOCA2OC44IDMuOSA1NC45eiIvPjwvc3ZnPg==');
    background-size: 15px 14px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 19px;
    margin-right: 21px;
    opacity: 0.75;
    font-size: 16px;
    color: #000;
	/* uncomment to make this have it's own row/line: */
	/* display: block; */
}

	/* Isolate table body so filter dropdowns display over the sticky column */

.ninja_table_wrapper table.foo-table > tbody{
	isolation: isolate;
}

/* Filter header - more space between filters */

.ninja_table_wrapper .ninja_table_afd_inline thead .footable-filtering th .form-inline>.form-group {
		margin-bottom: 0px;
		margin-right: 21px;
		margin-left: 0px;
		padding-right: 0px;
}

.ninja_table_wrapper table thead .footable-filtering .ninja_custom_select_checkbox>label input {
    margin-right: 0px;
    margin-left: 10px;
}

@media (min-width: 768px) {
	div.form-group.ninja-custom-filter.ninja_custom_select_checkbox {
		border-bottom: 1px solid rgb(225, 225, 225);
		padding-top: 1px;
		margin-right: 17px !important;
	}
}

/* Smaller fields for filter range forms */

@media (min-width: 768px), print {
    .footable .form-inline .form-control {
        width: 60px;
    }
}

/* Date range filter: wider, less padding */

@media (min-width: 768px) {
.ninja_filter_date_range {
	width: 80px !important;
	padding-left: 4px !important;
	padding-right: 3px !important;
	}
}

@media (max-width: 768px) {
.ninja_filter_date_range {
	height: 26px !important;
	padding-left: 6px !important;
	}
}

.footable .form-control {
height: inherit;
box-shadow: none;
}

tr.footable-filtering th {	
	padding-bottom: 9px !important; /*less padding-bottom - compensate for bigger margin-bottom when not collapsed */
	padding-top: 9px !important;
	padding-left: 7px !important; /*line up correctly */
}

/* Multi-select fix met font size switch (SumoSelect) */
.footable-filtering .SumoSelect>.CaptionCont>span.placeholder
 {
    color: #555;
    font-weight: 400 !important;
    line-height: 21px;
    text-align: left;
}

.foo-table .footable-filtering .ninja_multi_select_yes {
    display: flex;
    height: 0;
    padding: 0;
    position: absolute;
}

/* Fix; different SumoSelect dropdown icon - sharp on mobile/Retina */

.footable-filtering .SumoSelect>.CaptionCont>label>span {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTEzNy40IDM3NC42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDEyOC0xMjhjOS4yLTkuMiAxMS45LTIyLjkgNi45LTM0LjlzLTE2LjYtMTkuOC0yOS42LTE5LjhMMzIgMTkyYy0xMi45IDAtMjQuNiA3LjgtMjkuNiAxOS44cy0yLjIgMjUuNyA2LjkgMzQuOWwxMjggMTI4eiIvPjwvc3ZnPg==') !important;
		background-size: contain;
    height: 16px;
    width: 16px;
    opacity: 0.65 !important;
}

/* Filter search bar icon */

div.form-group.footable-filtering-search > div > div > button.btn.btn-primary {
	padding-top: 8px !important;
}

/* Dropdown arrow next to filter search bar - fix on mobile */

@media (max-width: 768px) {
div.form-group.footable-filtering-search > div > div > button.btn.btn-default.dropdown-toggle.height-normal {
padding-top: 2px !important;
	}
}

/* No box shadow SumoSelect checkbox options */

.footable-filtering .SumoSelect>.optWrapper.multiple>.options li.opt span i {
    box-shadow: none !important;
}

/* SumoSelect dropdowns: no gap between field and options */

.footable-filtering .SumoSelect.open>.optWrapper {
  top: 33px !important;
}

@media (max-width: 768px) {
	.footable-filtering 	.SumoSelect.open>.optWrapper {
		top: 26px !important;
	}
}

/* SumoSelect dropdown; no min width */
div.SumoSelect {
	min-width: 5em !important;
}

/* SumoSelect 'Search' font size */


/* Sumo-select drop */

.footable-filtering .SumoSelect.open .search-txt {
	font-size: inherit !important;
}

/** Filter row: Stacked & sticky ON MOBILE, and search bar and button fix **/

@media (max-width: 768px) {

	/* Make filter options sticky */

	.footable-filtering .form-inline {
    width: fit-content !important;
    position: sticky;
    z-index: 1;
    left: 7px;
		}
	
	tr.footable-filtering th {
		padding-right: 0px !important;
		}

	/* Filter options */
    .form-group.ninja-custom-filter 		{
		display: flex;
		max-width: 94vw;
		align-items: center;
		flex-wrap: nowrap;
		left: 9px;
		}
	
		/* SumoSelect dropdown options: line up with selection field */

	div.optwrapper.resetAll.multiple {
			width: calc(70vw - 10px)
		}	

		li.opt {
			width: calc(70vw - 12px);
		}
	
	/* Search bar */
	table.footable>thead>tr.footable-filtering>th div.input-group {
    width: 94vw;
		}
	
		.footable-filtering th .form-inline>.form-group {
    margin-bottom: 0px !important;
		margin-top: 2px !important;
		}

		.foo-table.footable.table > thead > tr.footable-filtering > th {
    padding-top: 0.3em;
		}

		.form-control.ninja_filter_number_range {
		box-shadow: none;
		height: 26px;
		padding: 1px 12px 1px 6px;
		}

		.footable-filtering .SumoSelect>.CaptionCont {
		box-shadow: none;
		height: 26px;
		padding: 1px 12px 1px 6px;
		}

		div.SumoSelect {
		max-width: 68vw;
		}		

		.form-group.ninja-custom-filter.ninja_custom_number_range_filter,
		.form-group.ninja-custom-filter.ninja_custom_date_filter {
		justify-content: end !important;
		}
	
		.form-group.ninja-custom-filter.ninja_custom_number_range_filter > label.ninja_filter_title,
		.form-group.ninja-custom-filter.ninja_custom_date_filter > label.ninja_filter_title
 {
    margin-right: auto;
		}

			.form-control.ninja_filter_number_range,
			.form-control.ninja_filter_date_range {
		max-width: 34vw;
		}
	
	.footable-filtering div.SumoSelect 		{
		width: 100% !important;
		}

		select.form-control.ninja_select_type_manual {
		box-shadow: none;
		height: 26px !important;
		padding: 0px 12px 2px 6px;
		}
	
		.ninja_table_wrapper .ninja_table_afd_inline thead .footable-filtering th .form-inline>.form-group {
		margin-left: 0px;
		justify-content: space-between;
		}

	/* Padding and underline for every checkbox item*/
		.ninja_custom_select_checkbox {
	padding-top: 7px !important;
	border-bottom: 1px solid rgb(225, 225, 225);
	justify-content: space-between;
		}
	
		/* Align checkboxes */	
		.form-group.ninja-custom-filter.ninja_custom_select_checkbox 		{
		justify-self: self-end !important;
		width: 42.5vw;
		}

.ninja_table_wrapper .ninja_table_afd_inline thead .footable-filtering th .form-inline>.form-group {
    margin-right: 0px;
}

		.ninja_table_wrapper table thead .footable-filtering .ninja_custom_select_checkbox>label input[type="checkbox"] {
    margin-right: 8px;
    margin-left: 0px;
		}

		.ninja_custom_select_checkbox input[type="checkbox"] {
 	 width: 15px;
 	 height: 15px;	
		}
	
	/* Checkboxes: two options per line on mobile - by left floating every second checkbox item */

		.form-group-ninja_filter_1.ninja_custom_select_checkbox,
		.form-group-ninja_filter_3.ninja_custom_select_checkbox,
		.form-group-ninja_filter_5.ninja_custom_select_checkbox,
		.form-group-ninja_filter_7.ninja_custom_select_checkbox,
		.form-group-ninja_filter_9.ninja_custom_select_checkbox,
		.form-group-ninja_filter_11.ninja_custom_select_checkbox,
		.form-group-ninja_filter_13.ninja_custom_select_checkbox,
		.form-group-ninja_filter_15.ninja_custom_select_checkbox,
		.form-group-ninja_filter_17.ninja_custom_select_checkbox,
		.form-group-ninja_filter_19.ninja_custom_select_checkbox,
		.form-group-ninja_filter_21.ninja_custom_select_checkbox,
		.form-group-ninja_filter_23.ninja_custom_select_checkbox,
		.form-group-ninja_filter_25.ninja_custom_select_checkbox,
		.form-group-ninja_filter_27.ninja_custom_select_checkbox,
		.form-group-ninja_filter_29.ninja_custom_select_checkbox,
		.form-group-ninja_filter_31.ninja_custom_select_checkbox {
		float: left;
		}

	/* Filter search bar caret adjustment (color/line up) */	
	
		.footable .caret	{
		opacity: 0.8;
		}	

		.foo-table .form-group.footable-filtering-search .input-group-btn>button {
    padding-left: 10px !important;
		padding-right: 10px !important;
		}
	
	/* Make sure the search bar doesn't have an item floating left of it */

		div.form-group.footable-filtering-search {
		clear: both;
		padding-top: 10px;
		}

	/* Make sure dropdown menu options don't have an item floating left of it */
		div.form-group.ninja-custom-filter.ninja_custom_select {
		clear: both;
		}
	
}

/** Filter row: stacked and sticky ON DESKTOP **/

	/* Overflow filters to second line if they don't fit the width on desktop */

@media (min-width: 768px) {

	form.form-inline::before {
		vertical-align: sub;		
	}

	tr.footable-filtering {	
		white-space: normal; 
		overflow-wrap: break-word;
	}
	
	/* Softer gray for filter names */
	thead tr.footable-filtering th {
   color: #6e6e6e !important;
}

	/* Make sure theres space between the lines; by adding margin */
	div.form-group.ninja-custom-filter,
div.form-group.footable-filtering-search {
	/*	margin-bottom: 9px; */
		margin-top: 9px !important;
	}

	/* Remove padding to compensate */
	tr.footable-filtering th {
		padding-bottom: 0px !important;
		padding-top: 0px !important;
		padding-right: 0px !important;
	}

	form.form-inline {
		margin-bottom: 9px !important;
	}
	
	/* Stack & sticky */
	.footable-filtering .form-inline {
		width: min(99vw, 100%) !important;
		position: sticky;
		z-index: 1;
		left: 7px;
	}

}




/* Filter dropdown buttons: higher z-index than the floating header */

div.optWrapper.resetAll.multiple {
	z-index: 9999;
}






/** Extra header row: larger font size, and less padding; line up with sortable header text **/
	
tr.footable-extra-header th {
background-color: rgb(225, 225, 225) !important;
font-size: 16px !important;
padding-left: 7px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;

	}

.footable-extra-header th {
	border-right: 2px solid #ccc !important;
}

/* Extra header row learn more links */

a.learn-more {
	float: right;
	text-decoration: none;
	font-size: 24px;
}

.footable-extra-header th {
line-height: 1em !important;
}

.foo-table.pivoted-view tr.pivot-category-row th .pivot-category-label a.learn-more {
	float: right;
	text-decoration: none;
	color: #919191;
	font-size: 1.1em;
	margin-left: 6px;
}

.pivot-category-row th {
	line-height: 1.2em !important;
}

/** Footable header: less padding **/

tr.footable-header th {	
padding:	4px 12px 4px 7px !important;
	}

/** Table body and elements **/

/* Sticky first column */

.footable tbody tr > :first-child {
  background: #f9fafb !important;
  position: sticky;
  z-index: 2;
  left: 0;
}

/* Table cell alignment: center all cells */
.foo-table tbody td {
    text-align: center !important;
}

/* Align first column left */
.foo-table td:first-child  {
    text-align: left !important;
    font-weight: bold;
}

/* Align some columns right */

.foo-table tbody .ninja_clmn_nm_introduction_date,
.foo-table tbody .ninja_clmn_nm_released,
.foo-table tbody  .ninja_clmn_nm_release_date {
    text-align: right !important;
}

/* Image size and alignment */

.foo-table img {
    max-width: 45px;
		vertical-align: middle;
		margin: 1px;
}


/* Show cursor as a magnifying glass when hovering an image in the table, if the image is in the second column */

.ninja_column_1.ninja_clmn_nm_image img {
		cursor: zoom-in;
}

/* Table link color */

.colored_table table.ninja_table_pro.inverted.table a {
    color: var(--accent);
}
.colored_table table.ninja_table_pro.inverted.table a:hover {
    color: var(--contrast-1);
}

/** Pagination buttons style **/

tfoot .footable-paging .footable-page.active a {
		color: white !important;
}

/* Add the word 'Page:' */

.footable-pagination-wrapper::before {
	content: "Page:";
	font-size: 16px;
	font-weight: bold;
	margin-right: 15px;
	color: rgba(0, 0, 0, .87);
}

/* Smaller buttons, smaller margin */

.footable .pagination>li>a {
	padding: 6px 8px !important;
}

.footable .pagination {
    margin: 15px 0;
}

/* Round corner last button */

a.footable-page-link[aria-label="last page"] {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

/* Items per page field: no box-shadow, same border color as buttons, same height, same font (weight&color), add hover color */

.foo-table select.nt_pager_selection {
    border: 1px solid #ddd;
    box-shadow: none;
    color: rgba(0,0,0,.5);
    font-family: inherit;
		font-weight: 500;
    font-size: 14px;
    height: 34px;
}

.foo-table select.nt_pager_selection:hover {
		color: rgba(0,0,0,.87);
}

/* Make the pagination sticky on horizontal scroll */

.footable-pagination-wrapper {
    width: fit-content;
    position: sticky;
    z-index: 1;
    left: 7px;
}

/* Make sure this doesn't change size when selecting another table font size */

.footable .pagination>li>a{
	font-size: 14px !important;
}

/* Edit Table link */

.nt_edit_link {
	position: sticky;
	left: 7px;
	z-index: 1000;
}

/* No bottom margin before scroll bar */

.semantic_ui .ui.table {
	margin: 0;
}

/* Column headings: regular arrow cursor (beats Ninja's Semantic UI cursor: auto) */
.semantic_ui .foo-table thead tr.footable-header th,
.semantic_ui .foo-table thead tr.footable-extra-header th { cursor: default; }


/*** Side-by-side comparison table styling ***/


	/* Smaller font in selection fields */

.select2-selection__rendered {
	font-size: 16px;
}

	/* Side-by-side comparison tables selection fields CSS class */

.side-by-side-forms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.1);
}

input#compareButton {
		width: 100px;
}

@media (max-width: 768px) {
  .side-by-side-forms {
		flex-wrap: wrap;
		justify-content: start;
  }			
			
	input#compareButton {
		margin-left: 0px !important;		
		width: 100%;
	}		
}			

	/* Styling for select fields with Select2 applied */
.side-by-side-forms .select2-container--default .select2-selection--single {
    height: auto;
}

	/* Changes to show more Select2 dropdown options */

.select2-results__option {
    padding: 2px 4px !important;
    font-size: 16px;
}

	/* Centering the text inside the select field and adjusting padding for the 'x' button */
.side-by-side-forms .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 6px 26px 6px 8px;
}

	/* Correct the position and size of the dropdown arrow */
.side-by-side-forms .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    right: 4px;
}

/* Only show differences checkbox */

#differences-only,
#compare-size-container {
	padding-bottom: 5px;
	color: #777;
}

/* CSS to hide empty rows */

.hide-row {
        display: none !important;
    }

/* Comparison Table Styles */
.side-by-side-comparison {
    width: 100%;
    border-collapse: collapse;
		word-break: break-word;
		overflow-wrap: anywhere;
}

.side-by-side-comparison th {
    background-color: #f2f2f2;
    width: 28%;
}

.side-by-side-comparison td:first-child {
    width: 28%;
}

.side-by-side-comparison td:nth-child(2),
.side-by-side-comparison td:nth-child(3) {
    width: 36%;
}

	/* Styling for the 'Compare!' button */
.side-by-side-forms input[type="submit"] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 16px;
    height: 40px;
}

.side-by-side-forms input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Side-by-side comparison tables CSS class */
.side-by-side-comparison {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  overflow: hidden; /* Ensures rounded corners are visible */
}

/* Align the text to the left for the first column for clarity */
.side-by-side-comparison th:first-child, 
.side-by-side-comparison td:first-child {
  text-align: left;
  background-color: #f9f9f9;
}

/* Hover color for rows */
.side-by-side-comparison tr:hover {
  background-color: #f9f9f9;
}

.side-by-side-comparison th, .side-by-side-comparison td {
  padding: 1px 7.54px 1px 7.54px;
}

.side-by-side-comparison th {
  background-color: #e9e9e9 !important;
  font-size: 24px;
  height: 45px;
}

/* Subheadings */

.sbs-subheading {
		font-size: 20px;
    font-weight: bold;
		text-decoration: underline;
	  padding: 4px 8px 4px 8px !important;
   background-color: #f9f9f9;
}

/* Center-align text for th and td elements except the first column */
.side-by-side-comparison th:not(:first-child), 
.side-by-side-comparison td:not(:first-child) {
  text-align: center;
}


/* SBS image sizes */

table.side-by-side-comparison img {
    max-height: 200px;
    max-width: 200px;
    width: auto;
    height: auto;
}

/* SBS size comparison images; onderaan uitlijnen, compenseren voor uitlijning witrand

.side-by-side-comparison tr:nth-child(2) td {
    vertical-align: bottom;
}

table.side-by-side-comparison img.relative-size {		
	clip-path: inset(2.5% 2.5% 2.5% 2.5%) !important;	
	position: relative;
	top: -2.5%;
	}

*/

	/* Make side-by-side comparison table fit on mobile */

@media (max-width: 768px) {

	table.side-by-side-comparison img {
    max-height: 100%;
    max-width: 100%;
	}
 
  .side-by-side-comparison td {
    font-size: 14px;
  }

	.side-by-side-comparison th {
		font-size: 16px;
	}

	.side-by-side-comparison th:nth-child(1) {
		padding: 2px 8px 2px 8px;
	}

	.side-by-side-comparison th:not(:nth-child(1)) {
		padding: 2px 2px 2px 2px;
	}

	.side-by-side-comparison td:not(:nth-child(1)) {
  padding: 1px 4px 1px 4px;
	}

	.sbs-subheading {
		font-size: 16px !important;
	} 
}

	/* Keep link icon on same line as start of the link */

.side-by-side-comparison td a.wpel-icon-left {
	display: inline-flex;
	overflow-wrap: break-word;
	word-break: break-word;
}

	/* Style for the share comparison section */
.share-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    font-size: 16px;
}



.share-container p {
    margin: 0;
    margin-right: 10px;
}

#share-comparison {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
		margin-bottom: 12px;
}

#share-comparison:hover {
    background-color: #0056b3;
}

/*** Dynamic Product page specification table ***/

	/* Links to spec pages */

td.ninja_clmn_nm_name.ninja_column_0 a {
	color: inherit !important;
	text-decoration: none;
}

td.ninja_clmn_nm_name.ninja_column_0 a:hover {
	color: var(--contrast) !important;
	text-decoration: underline;
}

	/* Comparison links at top of the page */

.compare-links {
	margin-top: 10px;
	display: flex;
	gap: 5px;
	justify-content: space-between;
}

.compare-all-link {
	width: 50%;
	color: var(--accent);
	background: none;
	text-align: left;
	padding: 0;
}

.compare-vs-link {
	width: 50%;
	color: var(--accent);
	background: none;
	text-align: right;
	padding: 0;
}

.compare-all-link:hover,
.compare-vs-link:hover {
	color: var(--contrast);
	background-color: #fff;
}


@media (max-width: 768px) {

.entry-content.spec-page {
	margin-top: .5em;
}

.compare-all-link {
	padding: 5px 10px 5px 10px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 8px;
	background-color: #f5f8ff99;
	font-size: 15px;
	}

.compare-vs-link {
	padding: 5px 10px 5px 10px;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 8px;

	background-color: #f5f8ff99;
	font-size: 15px;
	}
}

	/* Limit the max width and center the table */

table.side-by-side-comparison.product-page-spec-table {
	max-width: 650px;
	margin: 0 auto;
}

table.side-by-side-comparison.product-page-spec-table {
	margin-bottom: 12px;
}

	/* Column widths */

.side-by-side-comparison.product-page-spec-table td:first-child {
	width: 35%;
}

.side-by-side-comparison.product-page-spec-table td:nth-child(2) {
	width: 65%;
}

table.side-by-side-comparison.product-page-spec-table img {
	max-height: 300px;
	max-width: 300px;
}

@media (max-width: 768px) {
table.side-by-side-comparison.product-page-spec-table img {
	max-height: 100%;
	max-width: 100%;
	}
}

div.related-product-links, 
div.related-comparison-links {
	display: flex;
	justify-content: center;
	padding-top: 10px;
}

div.more-product-specs, 
div.related-comparisons {
	font-size: 20px;
	text-decoration: underline;
	display: flex;
	justify-content: center;
	padding-top: 20px;
}

.prev-product-links,
.next-product-links {
	display: inline-block;
}

div.prev-product-links ul,
div.next-product-links ul,
div.related-comparison-links ul {
	list-style-type: none;
	margin: 0;
}

.prev-product-links {
	padding-right: 15px;
}

.next-product-links {
	padding-left: 15px;
}

.legend-spec-page {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding-top: 15px;
}


/*** Dynamic A vs B pages ***/

.site-content #primary.productpage > main.site-main {
	margin: 20px 0;
}

table.side-by-side-comparison.avsb-product-page-spec-table {
	margin: 0 auto;
}

table.side-by-side-comparison.avsb-product-page-spec-table {
	margin-bottom: 12px;
}


	/* to make 'Compare size' work */

table.side-by-side-comparison.avsb-product-page-spec-table img.relative-size {
	max-width: none !important;
	max-height: none !important;
}




/* Extra class */
.comparison-table {
	padding: 5px;
}

/* Dropdown select bar width fix */
.footable-filtering .SumoSelect {
	color: #FF9900 !important;
	width: inherit !important;
}

.footable-filtering .SumoSelect>.CaptionCont>span.placeholder {
    color: rgba(137, 137, 137, 1) !important;
}



/*search modal CSS */

.gp-search-modal .gp-modal__overlay {
    background-color: rgba(10, 10, 10, 0.9);
}

/*** Navigation / Menu */

	/* current menu item - no highlight */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--contrast);
}

/* Nav menu icons: same spacing/styling for the SVG icons (CT Icons) as for the old  icons */
.sub-menu .menu-item a svg.svg-inline--fa{width:1.25em;margin-right:calc(12px - .45em)}
.wp-block-group.stack-on-mobile > p > svg.icon:first-of-type{margin-right:7px}
#share-comparison > svg, .ct-share-button > svg{padding-right:5px}
.view-cycle-y-button svg.svg-inline--fa{transform:scaleY(.65)}
.view-cycle-x-button svg.svg-inline--fa{transform:scaleX(.65)}
html.dark-mode div#mc_embed_shell .social-icon-link svg{color:var(--dm-text) !important}
html.dark-mode div#mc_embed_shell .social-icon-link svg:hover{color:var(--dm-link) !important}


   /* Light-style SVG icons: a bit of extra weight, like the font version had - size comparison tool fix button icons fix */
   .svg-inline--fa[data-prefix="fal"] path{stroke:currentColor;stroke-width:16}

/* Size tool: extra weight per icon on the product hover buttons
   (stroke-width is in icon units: 512 = the icon's full height) */
.draggable-product-item-wrapper .duplicate-button svg.svg-inline--fa path     {stroke:currentColor;stroke-width:20} /* copy (regular)          */
.draggable-product-item-wrapper .shopping-button svg.svg-inline--fa path      {stroke:currentColor;stroke-width:12} /* cart (duotone)          */
.draggable-product-item-wrapper .rotation-handle svg.svg-inline--fa path      {stroke:currentColor;stroke-width:} /* rotate-right (solid)    */
.draggable-product-item-wrapper .view-cycle-y-button svg.svg-inline--fa path  {stroke:currentColor;stroke-width:22} /* arrows-rotate (solid)   */
.draggable-product-item-wrapper .view-cycle-x-button svg.svg-inline--fa path  {stroke:currentColor;stroke-width:} /* rotate-reverse (duotone) */

/* Home page table rail: section labels */
.clickable-header-section svg[data-icon="memo"] path{stroke:currentColor;stroke-width:5}

/* Home page section headings */
h2.wp-block-heading svg[data-icon="box"] path{stroke:currentColor;stroke-width:2}

	/* Remove margin top on mobile */

.has-inline-mobile-toggle #site-navigation.toggled {
    margin-top: 0em;
}

	/* Op mobiel; Geen padding voor .inside-header ipv 15px (omvat ook het menu), ter compensatie, margin-left van 15px naast logo,  */

@media (max-width: 768px) {

  .inside-header {
  padding-left: 0px;
  }

	.site-header .header-image {
  margin-left: 15px;
	}

}

/* Site title smaller on mobile */

@media (max-width: 768px) {
  .main-title a {
    font-size: 23px;
  }
}

@media (max-width: 400px) {
  .main-title a {
    font-size: 20px;
  }
}

/* Less white space before site title on mobile */

@media (max-width: 768px) {
	.site-branding-container .site-logo {
margin-right: 10px;
	}
}

/*** TABLE SETTINGS/OPTIONS CSS ***/

	/* Table font sizes and images */

	.foo-table {
		font-size: 14px !important;
	}
	.foo-table.small-font {
		font-size: 12px !important;
	}
	.foo-table.extra-small-font {
		font-size: 10px !important;
	}
	.foo-table img {
		max-width: 45px;
	}
	.foo-table.small-font img {
		max-width: 40px !important;
	}
	.foo-table.extra-small-font img {
		max-width: 35px !important;
	}




	/* Filter sizes */

	.footable .form-control.normal-control {
		font-size: 14px;
		height: 34px;
	}
	.footable .form-control.small-control {
		font-size: 12px !important;
		height: 30px;
	}
	.footable .form-control.extra-small-control {
		font-size: 10px !important;
		height: 26px;
	}
	.sumo-normal {
		font-size: 14px !important; 
	}
	.sumo-small {
		font-size: 12px !important; 
	}
	.sumo-extra-small {
		font-size: 10px !important; 
	}

	.foo-table .form-group.footable-filtering-search .input-group-btn > button.height-normal {
		height: 34px !important;
	}
	.foo-table .form-group.footable-filtering-search .input-group-btn > button.height-small {
		height: 30px !important;
	}
	.foo-table .form-group.footable-filtering-search .input-group-btn > button.height-extra-small {
		height: 26px !important;
	}
	.sumo-select-normal {
		height: 34px !important;
	}
	.sumo-select-small {
		height: 30px !important;
	}
	.sumo-select-extra-small {
		height: 26px !important;
	}

	/* Filter search bar icon height */	
	
div.form-group.footable-filtering-search > div > div > button.btn.btn-primary.height-small {	
	padding-top: 6px !important;
}

div.form-group.footable-filtering-search > div > div > button.btn.btn-primary.height-extra-small {	
	padding-top: 4px !important;
}

	/* Filter search bar caret height  on desktop and mobile */

div.form-group.footable-filtering-search > div > div > button.btn.btn-default.dropdown-toggle {	
padding-top: 4px !important;	
	}

div.form-group.footable-filtering-search > div > div > button.btn.btn-default.dropdown-toggle.height-small {	
padding-top: 3px !important;	
	}

div.form-group.footable-filtering-search > div > div > button.btn.btn-default.dropdown-toggle.height-extra-small {	
	padding-top: 1px !important;

}

	@media (max-width: 768px) {	
div.form-group.footable-filtering-search > div > div > button.btn.btn-default.dropdown-toggle.height-small {	
padding-top: 0px !important;	
	}

div.form-group.footable-filtering-search > div > div > button.btn.btn-default.dropdown-toggle.height-extra-small {	
padding-top: 0px !important;	
	}
}

	/* Filter sizes on mobile */	

@media (max-width: 768px) {

	.footable .form-control.normal-control {
		font-size: 14px;
		height: 26px;
	}
	.footable .form-control.small-control {
		font-size: 12px !important;
		height: 24px;
	}
	.footable .form-control.extra-small-control {
		font-size: 10px !important;
		height: 22px;
	}

	.foo-table .form-group.footable-filtering-search .input-group-btn > button {
		height: 26px !important;
	}


	.foo-table .form-group.footable-filtering-search input.form-control {
		height: 26px !important;
	}

	.foo-table .form-group.footable-filtering-search input.form-control.small-control {
		height: 24px !important;
	}

	.foo-table .form-group.footable-filtering-search input.form-control.extra-small-control {
		height: 22px !important;
	}



	.foo-table .form-group.footable-filtering-search .input-group-btn > button.height-normal {
		height: 26px !important;
	}
	.foo-table .form-group.footable-filtering-search .input-group-btn > button.height-small {
		height: 24px !important;
	}
	.foo-table .form-group.footable-filtering-search .input-group-btn > button.height-extra-small {
		height: 22px !important;
	}
	.sumo-select-normal {
		height: 26px !important;
	}
	.sumo-select-small {
		height: 24px !important;
	}
	.sumo-select-extra-small {
		height: 22px !important;
	}

	div.form-group.footable-filtering-search > div > div > button.btn.btn-primary {	
		padding-top: 4px !important;
	}

	div.form-group.footable-filtering-search > div > div > button.btn.btn-primary.height-small {	
		padding-top: 3px !important;
	}

	div.form-group.footable-filtering-search > div > div > button.btn.btn-primary.height-extra-small {	
	padding-top: 2px !important;
	}

}

/* On desktop; line up placeholders correctly on Small and XS size */

@media (min-width: 768px) {
span.placeholder.sumo-small {
	line-height: 18px !important;
}
span.placeholder.sumo-extra-small {
	line-height: 14px !important;
	}
}

	/* Header cell padding */

	tr.footable-header th.normal-padding {
		padding: 4px 12px 4px 7px;
	}
	tr.footable-header th.small-padding {
		padding: 4px 3px 4px 3px !important;
	}
	tr.footable-header th.extra-small-padding {
		padding: 4px 2px 4px 2px !important;
	}


	.ninja_table_wrapper.filters-off .ninja_table_afd_inline thead .footable-filtering th .form-inline {
		display: none !important;
	}

	/* Table settings row div */
	.settings-row {
		gap: 12px 16px;
		padding-bottom: 15px;
	}

	/* Table settings buttons */

	#font-size-controls button,
	#hide-controls button,
	#pivot-controls button {
		padding: 12px 8px;
		margin: 0px 0px 1px 0px;
		background-color: #e1e1e1;
		color: #646464;
		border: 1px solid white;
		cursor: pointer;
		transition: background-color 0.3s ease, color 0.3s ease;
		height: 24px;
		line-height: 24px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: bold;
		border-radius: 10px;
	}
	#font-size-controls button:hover,
	#hide-controls button:hover,
	#pivot-controls button:hover {
		background-color: #404040;
		color: white;
	}
	#font-size-controls button.active,
	#hide-controls button.active,
	#pivot-controls button.active {
		background-color: #555555 !important;
		color: white !important;
		border-color: white;
	}
	#hide-rows.hide-button {
		min-width: 48px;
		max-width: 48px;
}
#hide-columns.hide-button {
	min-width: 67px;
	max-width: 67px;
}

/* Conditional formatting legend */
  .legend {
    display: flex;
    justify-content: start;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .legend-item {
    display: inline-block;
    height: 20px;
    border-radius: 10px;
    margin-right: 10px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    vertical-align: middle;
    padding: 0 10px;
  }

	/* Make Size and Hide settings fit on one line on mobile */

	@media only screen and (max-width: 768px) {
		.settings-row {
			gap: 12px 10px;
		}
		#font-size-controls button, #hide-controls button, #pivot-controls button {
			padding: 0 7px;
		}
		#hide-rows.hide-button {
			min-width: 46px;
			max-width: 46px;
		}
		#hide-columns.hide-button {
			min-width: 65px;
			max-width: 65px;
		}
	}
	.legend-item {
		padding: 2px 5px;
		color: black;
		font-size: 12px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		margin-right: 0px;
	}
	div.switch-container label,
	div.switch-container .legend {
		margin-right: 2px;
	}
	.legend {
		display: none;
		flex-wrap: wrap;
		gap: 5px;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	@media (max-width: 540px) {
	.switch-container {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}
	.legend {
		margin-left: 0;
		margin-right: 0;
		gap: 2px;
	}
	.switch-container .formatting-label,
	.switch-container .switch {
		white-space: nowrap;
	}
}

/* Remove 'hover' color on mobile after click on hide buttons */

@media (hover: none) {
		.hide-button:hover {
			background-color: #e1e1e1 !important;
			color: #464646 !important;
	}
button#hide-rows.hide-button.active,
button#hide-columns.hide-button.active,
button#hide-filters.hide-button.active,
button#pivot-table.hide-button.active
{
			background-color: #555555 !important;
	}
}

	/* Selected rows & columns */

.selected-row td,
.selected-row .ninja_footable td.ninja_clmn_nm_image {
background-color: rgba(255, 134, 134, 87%) !important;
}

.selected-row td.ninja_clmn_nm_name.footable-first-visible {
		background-color: #FA9696 !important;
}

.selected-col {
		background-color: rgba(255, 134, 134, 87%) !important;
}

	/* Glowing animation */

.glowing {
	color: white !important;
	animation: breathing 3s infinite;
}

	@keyframes breathing {
	0% { background-color: #e1e1e1;}
	50% { background-color: rgba(255, 50, 50);}
	100% { background-color: #e1e1e1;}
}

	/** Hide Rows/columns pop-up instructions **/

.popup-message {
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(230, 50, 50) !important;
	color: white;
	font-weight: bold;
	font-size: 18px;
	padding: 10px 20px;
	border-radius: 5px;
	z-index: 9999;
	transition: opacity 0.5s ease;
}

	/* Class to hide a cell persistently */
	.hidden-col {
		display: none !important;
}

/* Table options/settings div full width */

@media (max-width: 768px) {
.table-options {
    position: relative;
    left: -8px;
    width: calc(100vw - 8px);
	}
}

	/** Color coding / conditional formatting Switch **/

	/* Switch container*/
.switch-container {
  display: inline-flex;
  vertical-align: middle;
}

	/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

	/* Hide default HTML checkbox */
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

	/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #5c5c5c;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Styling for the label text */
.formatting-label {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  white-space: nowrap;
}


/*** Spoilers — v2 ([su_spoiler] shortcode, now  from the "Spoilers" snippet) ***/

.ct-spoiler {
	margin-bottom: 0.3em;
}

/* The theme's box-sizing (border-box, passed down from ) doesn't
   reach inside  by itself (the browser puts its parts in
   hidden slots in between), so it's set here again */
.ct-spoiler > .ct-spoiler-title,
.ct-spoiler > .ct-spoiler-content {
	box-sizing: border-box;
}

.ct-spoiler-title {
	position: relative;
	display: flex;
	min-height: 20px;
	padding: 6px 7px 7px 24px;
	line-height: 20px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.ct-spoiler-title::-webkit-details-marker {
	display: none;
}

.ct-spoiler-title:focus-visible {
	outline: currentColor thin dotted;
}

/* Plus (closed) / minus (open), drawn on whole pixels */
.ct-spoiler-icon {
	position: absolute;
	left: 7px;
	top: 7px;
	display: block;
	width: 20px;
	height: 20px;
}

.ct-spoiler-icon::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect x='4' width='3' height='11' rx='1'/%3E%3Crect y='4' width='11' height='3' rx='1'/%3E%3C/svg%3E") 5px 4px/11px 11px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect x='4' width='3' height='11' rx='1'/%3E%3Crect y='4' width='11' height='3' rx='1'/%3E%3C/svg%3E") 5px 4px/11px 11px no-repeat;
}

.ct-spoiler[open] > .ct-spoiler-title > .ct-spoiler-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect y='4' width='11' height='3' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect y='4' width='11' height='3' rx='1'/%3E%3C/svg%3E");
}

.ct-spoiler-content {
	padding: 14px;
	transition: padding-top 0.2s;
}

@starting-style {
	.ct-spoiler-style-fancy[open] > .ct-spoiler-content {
		padding-top: 0;
	}
}

.ct-spoiler-content::after {
	content: "";
	display: table;
	clear: both;
}

.ct-spoiler-content > :first-child {
	margin-top: 0;
}

.ct-spoiler-content > :last-child {
	margin-bottom: 0;
}

/* Default style: the big "Show side-by-side comparison tool" link */
.ct-spoiler-style-default > .ct-spoiler-title {
	color: var(--accent);
	font-size: 22px;
}

@media (max-width: 767px) {
	.ct-spoiler-style-default > .ct-spoiler-title {
		font-size: 20px;
	}
}

.ct-spoiler-style-default > .ct-spoiler-title:hover {
	color: var(--contrast-1);
}

.ct-spoiler-style-default > .ct-spoiler-title > .ct-spoiler-icon {
	left: 0;
}

.ct-spoiler-style-default > .ct-spoiler-title > .ct-spoiler-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='5' width='4' height='14' rx='1'/%3E%3Crect y='5' width='14' height='4' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='5' width='4' height='14' rx='1'/%3E%3Crect y='5' width='14' height='4' rx='1'/%3E%3C/svg%3E");
	-webkit-mask-position: 3px 2px;
	mask-position: 3px 2px;
	-webkit-mask-size: 14px 14px;
	mask-size: 14px 14px;
}

.ct-spoiler-style-default[open] > .ct-spoiler-title > .ct-spoiler-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect y='5' width='14' height='4' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect y='5' width='14' height='4' rx='1'/%3E%3C/svg%3E");
}

.ct-spoiler-style-default > .ct-spoiler-content {
	padding: 12px 0 0 0;
}

/* Closed, the old spoiler kept 12px of space under its title */
.ct-spoiler-style-default:not([open]) {
	padding-bottom: 12px;
}

/* Fancy style */
.ct-spoiler-style-fancy {
	border: 1px solid #ccc;
	border-radius: 10px;
	background: #fff;
	color: #333;
}

.ct-spoiler-style-fancy > .ct-spoiler-title {
	border-bottom: 1px solid #ccc;
	border-radius: 10px;
	background: #f0f0f0;
	font-size: 0.9em;
}

.ct-spoiler-style-fancy:not([open]) > .ct-spoiler-title {
	border: none;
}

.ct-spoiler-style-fancy > .ct-spoiler-content {
	border-radius: 10px;
}

/* Spec explanations: class="extra-info-spoiler" (with style="fancy") */
.ct-spoiler.extra-info-spoiler {
	border-radius: 22px;
}

.ct-spoiler-style-fancy.extra-info-spoiler > .ct-spoiler-title {
	padding: 10px 7px 12px 40px;
	border-radius: 22px;
	background: #f0f0f0;
	color: var(--contrast);
	font-size: 1.2em;
	text-decoration: none;
}

.ct-spoiler-style-fancy.extra-info-spoiler > .ct-spoiler-title:hover {
	background: #d9d9d9;
}

.ct-spoiler.extra-info-spoiler > .ct-spoiler-title > .ct-spoiler-icon {
	left: 10px;
	top: 13px;
}

.ct-spoiler.extra-info-spoiler > .ct-spoiler-title > .ct-spoiler-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='6' width='4' height='16' rx='1'/%3E%3Crect y='6' width='16' height='4' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='6' width='4' height='16' rx='1'/%3E%3Crect y='6' width='16' height='4' rx='1'/%3E%3C/svg%3E");
	-webkit-mask-position: 2px 1px;
	mask-position: 2px 1px;
	-webkit-mask-size: 16px 16px;
	mask-size: 16px 16px;
}

.ct-spoiler.extra-info-spoiler[open] > .ct-spoiler-title > .ct-spoiler-icon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect y='6' width='16' height='4' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect y='6' width='16' height='4' rx='1'/%3E%3C/svg%3E");
}





/* Skip to comparison table link styling */

a.skip-to-comparison {
		display: inline-block;
    margin-bottom: 10px;
    font-size: 14px;
  	text-decoration: none;
    transition: color 0.3s ease;
	  color: #999999;
	  border-bottom: 1px solid #E9E9E9;
}

a.skip-to-comparison:hover,
a.skip-to-comparison:focus {
		color: var(--contrast);
}


/* ==== Comment area ==== */

	/* H3 comments title kleiner en margin top */

h3.comments-title {
		font-size: 20px;
		margin-top: 20px;
}

	/* --- Comment Numbering Styles --- */

	/* 1. Make the main footer a flex container */
footer.comment-meta {
	display: flex;
	align-items: center; /* Vertically align avatar and text block */
}

	/* 2. Make the author info block grow to fill all available space */
.comment-author-info {
	flex-grow: 1;
}

	/* 3. Make the author line a flex container to separate name and number */
.comment-author.vcard cite.fn {
	display: flex;
	justify-content: space-between; /* This pushes the items to opposite ends */
	align-items: baseline;
}

.custom-comment-number {
	color: #ccc;
	font-size: 0.85em;
	font-weight: normal;
}

html.dark-mode .custom-comment-number {
color: #757575;
}

	/* Comment lazy Load style */
.lazy-comment-hidden { display: none !important; }
.lazy-comment-unhiding {
	display: block !important;
	animation: lazyCommentFadeIn 0.5s ease-out;
}
@keyframes lazyCommentFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}



/* Hide link icon (van WP External Links) in some tables, like the Big Table of Big Tech (alternatives), Cloud storage */

	/* Hide in blog posts */

.single-post i.wpel-icon {
	display: none;
}

	/* BToBT Main table */
#footable_6588 > tbody i {
	display: none;
}

	/* Cloud Storage main table */
#footable_960 td i {
	display: none;
}
	
	/* BToBT SBS */
.page-id-6585 .side-by-side-comparison > tbody i {
	display: none;
}

	/* Cloud Storage SBS */
.page-id-384 .side-by-side-comparison > tbody i {
	display: none;
}



	/* Size comparison page */
.page-id-6829 .entry-title {
	margin-left: -20px;
	margin-right: -20px;
	margin-top: -10px;
}

@media (max-width: 768px) {
.page-id-6829 .entry-title {
	margin: inherit;
	font-size: 34px;
	}
}

	/* Hide all size comparison config columns */

th[class*="ninja_clmn_nm_size_comparison"],
td[class*="ninja_clmn_nm_size_comparison"] {
	display: none !important;
}


/* Full width blocks fix after WP 6.5 */
.wp-block-group__inner-container {
	max-width: none !important;
}

/* for testing purposes */
.foo-table,
.foo-table th,
.foo-table td {
	box-sizing: border-box !important;
}

/* Footer; less padding on mobile - to make everything fit*/

@media (max-width: 768px) {
    .inside-site-info {
        padding-left: 20px !important;
				padding-right: 20px !important;
    }
}




/* =========================== */
/* =====    DARK MODE    ===== */
/* =========================== */

html.dark-mode {
	color-scheme: dark; /* Hint to browser for scrollbars, form controls, etc. */

	/* ===== Vars ===== */
	/* Page & text */
	--dm-page-bg: #333333; /* was: #121212 */
	--dm-text: #c1c1c1;
	--dm-text-strong: #e7e7e7;
	--dm-text-input: #e0e0e0;
	--dm-text-muted: #7a7a7a;

	/* Links */
	--dm-link: #7ecdec;
	--dm-link-hover: #555555;
	--dm-link-on-light: #1e97c6;

	/* Grays & surfaces */
	--dm-black: #000000;
	--dm-white: #ffffff;
	--dm-surface-1: #2e2e2e;
	--dm-surface-2: #333333;
	--dm-surface-3: #343434;
	--dm-surface-4: #484848;

	/* Inputs */
	--dm-input-bg: #272727;
	--dm-input-border: #767676;

	/* Borders / dividers */
	--dm-border: #767676;
	--dm-border-strong: #424242;
	--dm-divider: #7e7e7e;
	--dm-border-soft: #b2b2b2;

	/* Effects */
	--dm-dim-factor: 0.75;

	/* Legend chips */
	--legend-yes: #f6ffe0;
	--legend-good: #fffbd6;
	--legend-okay: #fff1db;
	--legend-bad: #f8e7e7;

	/* Reused gradients */
	--grad-a: rgba(244,215,215,0.8);
	--grad-b: rgba(240,255,204,0.8);
}

/* Base */
html.dark-mode body {
	background-color: var(--dm-page-bg) !important;
	color: var(--dm-text) !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
	color: var(--dm-text-strong) !important;
}

html.dark-mode a {
	color: var(--dm-link);
}

html.dark-mode a:hover {
	color: var(--dm-link-hover) !important;
}

/* Inputs */
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode input.search-field,
html.dark-mode input#mce-EMAIL.required.email {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text-input) !important;
	border: 1px solid var(--dm-input-border) !important;
}

/* other input fields */
html.dark-mode input.ninja_filter_number_range,
html.dark-mode input#search-modal-input {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text-input) !important;
}

html.dark-mode input,
html.dark-mode button {
	/* no change for now */
}

/* Feed and category pages header divs */
html.dark-mode header.page-header,
html.dark-mode div#mc_embed_signup_scroll {
	background-color: var(--dm-surface-2) !important;
	color: var(--dm-text);
}

/* Blog roll */
html.dark-mode div.entry-meta,
html.dark-mode .entry-meta .gp-icon {
	color: var(--dm-text);
}

/* Blog roll pagination */
html.dark-mode nav#nav-below.paging-navigation {
	background-color: var(--dm-surface-2);
}

/* Sidebar widget backgrounds */
html.dark-mode #right-sidebar .inside-right-sidebar > .widget {
	background-color: var(--dm-surface-2) !important;
}

/* horizontal line elements */
html.dark-mode hr,
html.dark-mode div.su-divider {
	background-color: var(--dm-divider) !important;
	border-color: var(--dm-divider) !important;
}

html.dark-mode a.skip-to-comparison,
html.dark-mode div#font-size-controls,
html.dark-mode div#hide-controls,
html.dark-mode div.switch-container,
html.dark-mode div.form-group.ninja-custom-filter.ninja_custom_select_checkbox {
	border-bottom: 1px solid var(--dm-divider) !important;
}

/* Sidebar widgets */
html.dark-mode div.inside-right-sidebar {
	background-color: var(--dm-black) !important;
}

/* Main WordPress elements; header, page body, comment section, footer */
html.dark-mode .site-header,
html.dark-mode div.inside-article,
html.dark-mode div.comments-area,
html.dark-mode footer.site-info {
	background-color: var(--dm-surface-2) !important;
}

html.dark-mode footer.site-info a {
	color: var(--dm-text-strong) !important;
}

html.dark-mode footer.site-info a:hover {
	color: var(--dm-link-hover) !important;
}

/* Comment author, email and url fields */
html.dark-mode .comment-form #author,
html.dark-mode .comment-form #email,
html.dark-mode .comment-form #url {
	background-color: var(--dm-input-bg) !important;
	border-color: var(--dm-link-hover) !important;
}

html.dark-mode div.comment-content {
	border-color: var(--dm-link-hover) !important;
}

/* Header/nav, additional changes */
html.dark-mode .main-title a,
html.dark-mode .main-title a:hover {
	color: var(--dm-text-strong) !important;
}

html.dark-mode #site-navigation > div,
html.dark-mode .main-navigation ul ul,
html.dark-mode .main-navigation .main-nav ul li a,
html.dark-mode .menu-bar-items a,
html.dark-mode nav#mobile-menu-control-wrapper,
html.dark-mode button.menu-toggle {
	background-color: var(--dm-surface-2);
	color: var(--dm-text-strong) !important;
}

html.dark-mode .main-navigation .main-nav ul li a:hover,
html.dark-mode .menu-bar-items a:hover {
	color: var(--dm-link) !important;
}

/* Intro blocks */
html.dark-mode .rounded-block {
	border: 1px solid var(--dm-border) !important;
}

/* Scroll, Sort, Filter */
html.dark-mode div.ib-container.rounded-block {
	background-color: var(--dm-surface-4) !important;
}

/* Spec info & A | B */
html.dark-mode div.ib-container.rounded-block.ib-specs {
	background-color: var(--dm-surface-4) !important;
}
html.dark-mode .ib-container.ib-specs img {
	filter: invert(1) !important;
}

html.dark-mode div.ib-container.rounded-block.ib-avsb {
	background: linear-gradient(207deg, var(--grad-a) 0%, var(--grad-b) 100%) !important;
	color: var(--dm-link-hover) !important;
}

/* Text block with background color */
html.dark-mode p.has-base-2-background-color.has-background {
	background-color: var(--dm-surface-4) !important;
}

/* Side-by-side comparison tool */
html.dark-mode .ct-spoiler-style-default > .ct-spoiler-title {
	color: var(--dm-link);
}

html.dark-mode .ct-spoiler-style-default > .ct-spoiler-title:hover {
	color: var(--dm-link-hover) !important;
}

/* this also applies to the size comparison selection form */
html.dark-mode .side-by-side-forms,
html.dark-mode form#productSelectionForm {
	background-color: var(--dm-surface-4) !important;
	border: 1px solid var(--dm-border) !important;
}

/* Selection fields */
html.dark-mode span.select2-selection,
html.dark-mode input.select2-search__field,
html.dark-mode span.select2-selection__rendered,
html.dark-mode span.select2-search--dropdown,
html.dark-mode span.select2-results,
html.dark-mode ul.dropdown-menu.dropdown-menu-right,
html.dark-mode ul.dropdown-menu.dropdown-menu-right a {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text-input) !important;
}

html.dark-mode span.select2-selection__rendered {
	border-radius: 4px !important;
}

html.dark-mode .select2-container--default .select2-selection--single {
	border: 1px solid var(--dm-border) !important;
}

/* Side-by-side comparison table, main background color, text and links */
html.dark-mode table.side-by-side-comparison {
	background-color: var(--dm-white) !important;
	color: var(--dm-link-hover);
}

html.dark-mode table.side-by-side-comparison a {
	color: var(--dm-link-on-light);
}

/* Side-by-side comparison table, first column */
html.dark-mode .side-by-side-comparison td:first-child {
	background-color: var(--dm-surface-3) !important;
	color: var(--dm-text) !important;
	border-bottom: 1px solid var(--dm-border-strong) !important;
}

/* Header row */
html.dark-mode #main .side-by-side-comparison th {
	color: var(--dm-text-strong) !important;
	background-color: var(--dm-surface-1) !important;
	border-bottom: 1px solid var(--dm-border) !important;
}

html.dark-mode .side-by-side-comparison {
	border: 1px solid var(--dm-border) !important;
}

/* Subheadings */
html.dark-mode .side-by-side-comparison td.sbs-subheading {
	background-color: var(--dm-surface-3) !important;
	color: var(--dm-text-strong) !important;
}

/* Vertical borders between the columns */
html.dark-mode .side-by-side-comparison th:not(:last-child),
html.dark-mode .side-by-side-comparison td:not(:last-child) {
	border-right: 1px solid var(--dm-border-strong);
}

/* Lower brightness for cells, except the first row (with image) and the first column */
html.dark-mode .side-by-side-comparison tbody > tr:not(:nth-child(1)) td:not(:first-child) {
	filter: brightness(var(--dm-dim-factor));
}

/* Image row; dark background */
html.dark-mode table.side-by-side-comparison > tbody > tr:nth-child(1) {
	background-color: var(--dm-surface-3) !important;
}

/* Table settings */
html.dark-mode #font-size-controls button.active,
html.dark-mode #font-size-controls button,
html.dark-mode #hide-rows.hide-button,
html.dark-mode #hide-columns.hide-button,
html.dark-mode #hide-filters.hide-button,
html.dark-mode #pivot-table.hide-button {
	border-color: var(--dm-border-soft);
}

html.dark-mode .legend-item {
	border: 1px solid var(--dm-border-soft);
}

/* Legend items; match table */
html.dark-mode .switch-container .legend .legend-item:nth-child(1) {
	background-color: var(--legend-yes) !important;
}
html.dark-mode .switch-container .legend .legend-item:nth-child(2) {
	background-color: var(--legend-good) !important;
}
html.dark-mode .switch-container .legend .legend-item:nth-child(3) {
	background-color: var(--legend-okay) !important;
}
html.dark-mode .switch-container .legend .legend-item:nth-child(4) {
	background-color: var(--legend-bad) !important;
}
html.dark-mode .switch-container .legend .legend-item {
	filter: brightness(var(--dm-dim-factor)) !important;
}

/* Main comparison tables */

	/* Keep the cell colors but dim them. Exclude the first column (column_0) and the name column (often the same) */
html.dark-mode #main .foo-table td:not(.ninja_clmn_nm_name):not(.ninja_column_0) {
	filter: brightness(var(--dm-dim-factor));
}

html.dark-mode #main td.ninja_clmn_nm_image {
background-color: rgba(255, 255, 255, 0.6) !important;
}

/* TODO; figure out how not to dim the images themselves */

	/* Dark color for table header and product names */
html.dark-mode #main table[id^="footable_"] tr.footable-header th,
html.dark-mode #main table[id^="footable_"] tr.footable-filtering th,
html.dark-mode #main td.ninja_column_0,
html.dark-mode #main td.ninja_clmn_nm_name,
html.dark-mode #main tr.footable-paging {
	background-color: var(--dm-surface-3) !important;
	color: var(--dm-text) !important;
}

html.dark-mode #main [id^="footable_"] tr.footable-header th,
html.dark-mode #main [id^="footable_"] tr.footable-filtering th {
	border: 1px solid var(--dm-border-strong) !important;
}

html.dark-mode .footable-filtering > th > form:first-child::before,
html.dark-mode .footable-filtering .SumoSelect>.CaptionCont>label>span,
html.dark-mode span.fooicon.fooicon-sort,
html.dark-mode span.fooicon.fooicon-sort-asc,
html.dark-mode span.fooicon.fooicon-sort-desc,
html.dark-mode div.footable-pagination-wrapper::before {
	filter: invert(1) !important;
}

html.dark-mode input.ninja_filter_number_range,
html.dark-mode input.search-txt,
html.dark-mode input.form-control,
html.dark-mode p.CaptionCont.SelectBox.search,
html.dark-mode .footable-filtering .SumoSelect>.optWrapper>.options li.opt,
html.dark-mode .footable-filtering .SumoSelect>.optWrapper.multiple>.options li.opt span i,
html.dark-mode div.optWrapper,
html.dark-mode li.dropdown-header,
html.dark-mode .footable .btn-default {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text-input) !important;
	border-color: var(--dm-border) !important;
}

/* "Clear all" text */
html.dark-mode .footable-filtering .SumoSelect[is-selected=true] .reset-all * {
	color: #e1e1e1;
}

html.dark-mode .footable-extra-header th {
	background-color: var(--dm-surface-1) !important;
	color: var(--dm-text-strong) !important;
	border: 1px solid var(--dm-border-strong) !important;
}

html.dark-mode td.ninja_column_0,
html.dark-mode td.ninja_clmn_nm_name {
	border-bottom: 1px solid var(--dm-border-strong) !important;
	border-right: 1px solid var(--dm-border-strong) !important;
}

/* Table footer and pagination buttons */
html.dark-mode .side-by-side-comparison,
html.dark-mode table.foo-table {
	border: 1px solid var(--dm-border) !important;
}

html.dark-mode .footable-pagination-wrapper .pagination .footable-page-link {
	background-color: var(--dm-surface-2) !important;
	color: var(--dm-text) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .footable-pagination-wrapper .pagination .footable-page.active .footable-page-link {
	color: var(--dm-text-input) !important;
}

html.dark-mode a.learn-more {
	color: var(--dm-text-muted) !important;
}

html.dark-mode a.learn-more:hover {
	color: var(--dm-link-hover) !important;
}

/* Size comparison tool */
html.dark-mode .sc-lazy-load-placeholder > .sc-ll-msg { background-color: var(--dm-surface-4) !important; border-color: var(--dm-border) !important; }

html.dark-mode span.select2-selection.select2-selection--multiple {
	border-color: var(--dm-border) !important;
}

html.dark-mode #visualSizeComparerApp .select2-selection__choice {
	background-color: var(--dm-surface-1) !important;
	border: 1px solid var(--dm-border) !important;
	color: var(--dm-text-strong) !important;
	border-radius: 3px;
}

html.dark-mode button#clearSelectionIcon,
html.dark-mode span.select2-selection__choice__remove {
	filter: invert(1);
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
	background-color: #606060 !important;
}

html.dark-mode #visualSizeComparerApp div {
	border-color: var(--dm-divider) !important;
}

/* specs button link color */
html.dark-mode a.specs-button {
	color: var(--dm-surface-2) !important; /* dark on light button context */
}

/* modals */
html.dark-mode div#editBackgroundModal > div:first-child,
html.dark-mode div#bgSolidColorRow,
html.dark-mode div#bgEditRowContainer,
html.dark-mode div#editFontModal > div:first-child,
html.dark-mode div#helpGuideModal > div:first-child,
html.dark-mode #shoppingModal div {
	background-color: var(--dm-surface-2) !important;
}

html.dark-mode input#fontNameSize,
html.dark-mode input#fontDetailSize {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text-input) !important;
	border-color: var(--dm-border) !important;
}

/* Specs and features spoilers */
html.dark-mode .ct-spoiler-style-fancy {
	color: var(--dm-text) !important;
	background-color: var(--dm-surface-2) !important;
}

html.dark-mode .ct-spoiler-style-fancy.extra-info-spoiler > .ct-spoiler-title {
	color: var(--dm-text) !important;
	background-color: var(--dm-input-bg) !important;
}

/* Email sign-up form */
html.dark-mode div#mc_embed_group {
	background-color: var(--dm-white);
	border-radius: 15px;
	color: var(--dm-link-hover);
}

html.dark-mode div#mc_embed_group a {
	color: var(--dm-link-hover) !important;
}

html.dark-mode div#mc_embed_group a:hover {
	color: var(--dm-link-on-light) !important;
}

html.dark-mode #mc_embed_signup_block > h3 {
	color: var(--dm-link-hover) !important;
}

/* Spec pages, A vs B pages */
/* Same classes for the table as the side-by-side comparison tables - no changes necessary */

html.dark-mode .compare-all-link:hover,
html.dark-mode .compare-vs-link:hover {
	background-color: rgb(255 255 255 / 0%) !important;
}

html.dark-mode .avsb-views-row > td:not(:first-child),
html.dark-mode .spec-views-row > td:not(:first-child) {
	background: var(--dm-surface-3) !important;
	filter: none !important;
}

html.dark-mode .avsb-views-row > td,
html.dark-mode .spec-views-row > td,
html.dark-mode .avsb-product-page-spec-table > tbody > tr:has(+ .avsb-views-row) > td,
html.dark-mode .product-page-spec-table > tbody > tr:has(+ .spec-views-row) > td {
	border-color: var(--dm-border-strong) !important;
}

html.dark-mode .avsb-view-thumb,
html.dark-mode .spec-view-thumb {
	background: var(--dm-surface-1) !important;
}

html.dark-mode .avsb-product-page-spec-table > thead > tr > th > a,
html.dark-mode .product-page-spec-table > thead > tr > th > a {
	color: var(--dm-text-strong) !important;
}

html.dark-mode .avsb-product-page-spec-table > thead > tr > th > a:hover,
html.dark-mode .product-page-spec-table > thead > tr > th > a:hover {
	color: var(--dm-link-on-light) !important;
	text-decoration: underline;
}

html.dark-mode .avsb-product-page-spec-table > thead > tr > th > a {
	color: var(--dm-text-strong) !important;
}

html.dark-mode div.related-comparisons > strong,
html.dark-mode div.more-product-specs > strong {
	color: var(--dm-text-strong) !important;
}

html.dark-mode .ct-related-wrap a.ct-card .ct-card-title {
	color: var(--dm-text) !important;
}

/* Keeps the hover colour, which the rule above would otherwise override */
html.dark-mode .ct-related-wrap a.ct-card:hover .ct-card-title,
html.dark-mode .ct-related-wrap a.ct-card:focus-visible .ct-card-title {
	color: var(--dm-link-on-light) !important;
}

html.dark-mode .ct-related-wrap a.ct-card.is-product img {
background-color: var(--dm-surface-4) !important;
}

html.dark-mode .avsb-product-page-spec-table > thead > tr > th > a:hover {
	color: var(--dm-link-on-light) !important;
	text-decoration: underline;
}

@media (max-width: 768px) {
	html.dark-mode .compare-all-link,
	html.dark-mode .compare-vs-link {
		border: 1px solid var(--dm-border);
		border-radius: 8px;
		background-color: var(--dm-surface-4) !important;
	}
}

/* Image light box thumbnails dark mode */
	html.dark-mode .ct-lb-thumb img {
    background: var(--dm-surface-1) !important;
}

/* Home page */
html.dark-mode div.home-usp {
	background: linear-gradient(207deg, var(--grad-a) 0%, var(--grad-b) 100%) !important;
	color: var(--dm-link-hover) !important;
}

html.dark-mode input.wp-block-search__input {
	background-color: var(--dm-input-bg) !important;
	color: var(--dm-text-input) !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode h2.has-background,
html.dark-mode p.rounded-block {
	background-color: var(--dm-surface-4) !important;
}

html.dark-mode span.clickable-header {
	color: var(--dm-text-strong) !important;
}

html.dark-mode .ctse-grid {
	background-color:
	var(--dm-surface-2) !important;
}

html.dark-mode div.swiper {
	background-color:
	var(--dm-surface-2) !important;
}

html.dark-mode .clickable-header-section {
color: var(--dm-text) !important

}

html.dark-mode div.product-section-group {
	background-color:
	var(--dm-surface-4) !important;
border-color: var(--dm-border) !important;
}

html.dark-mode ul.comparison-list a{
	color: var(--dm-link) !important;
}

html.dark-mode .swiper-slide {
	background-color: #646464 !important;
	border-color: var(--dm-border) !important;
}

html.dark-mode .swiper-button-prev,
html.dark-mode .swiper-button-next {
background: rgb(160 160 160 / 80%) !important;
}

		/* Blend card color with gray */
html.dark-mode .product-item {
	box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5) !important;
}


/*** Hide raw HTML Ninja table on load, add subtle loading effect ***/

.loading_ninja_table table {
	display: none !important;
}

.loading_ninja_table .nt_edit_link {
	display: none;
}


/* Smooth loading animation */
@keyframes loading-shimmer-smooth {
	0% {transform: translateX(-75%);}
	100% {transform: translateX(125%);}
}

/* Make the loading element take up exactly as much space as the rotating loading arrow parent element to prevent CLS */
.loading_ninja_table {
	min-height: 325.5px !important;
	background-color: #f9fafb;
	border-top: 1px solid rgba(34,36,38,.15);
	border-bottom: 1px solid rgba(34,36,38,.15);
	position: relative;
	overflow: hidden;
}

/* Loading element Dark mode version */

html.dark-mode .loading_ninja_table {
	background-color: var(--dm-surface-3) !important;
	border-top: 1px solid var(--dm-border) !important;
	border-bottom: 1px solid var(--dm-border) !important;
}

/* The moving shimmer effect using a pseudo-element */
.loading_ninja_table::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-image: linear-gradient(
		to right,
		transparent 40%,
		#fff 50%,
		transparent 60%
	);
	
	/* The animation call */
	animation: loading-shimmer-smooth 3s linear infinite;
}

/* Faster animation on mobile/smaller screens */
@media (max-width: 768px) {
	.loading_ninja_table::before {
		animation-duration: 1.5s;
	}
}

/* Dark Mode Shimmer */
html.dark-mode .loading_ninja_table::before {
	background-image: linear-gradient(
		to right,
		transparent 40%,
		#272727 50%,
		transparent 60%
	);
}

/* Dark mode loading arrow */
html.dark-mode div.footable-loader>span.fooicon {
	filter: invert(1) !important;
}



/*** Privacy Policy ***/

.mediavine-disclosure {
	margin: 2.5em 0;
	padding-left: 1.25em;
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

/* Pivoted comparison table (side-by-side view): Small/XS sizing.
   Piggybacks on the existing small-font/extra-small-font classes that
   changeFontSize() already toggles on .foo-table — those coexist with
   the pivoted-view class with no JS changes needed. Selectors chain
   enough classes to safely outrank the plain (normal-size) pivot rules
   in table-options-code regardless of source order. */
.foo-table.pivoted-view.small-font tr.pivot-header-row:not(.is-sticky) th,
.foo-table.pivoted-view.small-font .pivot-spec-row td {
	width: 180px !important;
	min-width: 180px !important;
	max-width: 180px !important;
}
.foo-table.pivoted-view.small-font tr.pivot-header-row.is-sticky th {
	width: 180px;
	min-width: 180px;
	max-width: 180px;
}
.foo-table.pivoted-view.small-font .pivot-header-row th {
	font-size: 18px !important;
}
.foo-table.pivoted-view.small-font tr.pivot-category-row th {
	font-size: 18px !important;
}
.foo-table.pivoted-view.small-font .pivot-spec-row td {
	font-size: 14px !important;
}
.foo-table.pivoted-view.small-font .pivot-header-row img,
.foo-table.pivoted-view.small-font .pivot-spec-row img {
	width: 130px !important;
	height: 130px !important;
	max-width: 130px !important;
	max-height: 130px !important;
}

.foo-table.pivoted-view.extra-small-font tr.pivot-header-row:not(.is-sticky) th,
.foo-table.pivoted-view.extra-small-font .pivot-spec-row td {
	width: 160px !important;
	min-width: 160px !important;
	max-width: 160px !important;
}
.foo-table.pivoted-view.extra-small-font tr.pivot-header-row.is-sticky th {
	width: 160px;
	min-width: 160px;
	max-width: 160px;
}
.foo-table.pivoted-view.extra-small-font .pivot-header-row th {
	font-size: 16px !important;
}
.foo-table.pivoted-view.extra-small-font tr.pivot-category-row th {
	font-size: 16px !important;
}
.foo-table.pivoted-view.extra-small-font .pivot-spec-row td {
	font-size: 12px !important;
}
.foo-table.pivoted-view.extra-small-font .pivot-header-row img,
.foo-table.pivoted-view.extra-small-font .pivot-spec-row img {
	width: 110px !important;
	height: 110px !important;
	max-width: 110px !important;
	max-height: 110px !important;
}

/* Pivoted comparison table: dark mode.
   background-color/color on the header row's  cells (including the
   corner) and color on the label column's  cells are also set
   inline via JS in pivotTable() — that JS now checks for dark mode
   itself and picks the right value, so these rules and the JS agree. */
html.dark-mode .foo-table.pivoted-view tr.footable-header.pivot-header-row th {
	background-color: var(--dm-surface-1) !important;
	color: var(--dm-text-strong) !important;
	border-bottom: 1px solid var(--dm-border-strong) !important;
}
html.dark-mode .foo-table.pivoted-view tr.pivot-category-row th {
	background-color: var(--dm-surface-3) !important;
	color: var(--dm-text-strong) !important;
	border: 1px solid var(--dm-border-strong) !important;
}
html.dark-mode .foo-table.pivoted-view .pivot-label {
	background-color: var(--dm-surface-3) !important;
	color: var(--dm-text) !important;
	border-bottom: 1px solid var(--dm-border-strong) !important;
}

/* Prevent overflow in pivot view */

.pivot-header-row th,
.pivot-spec-row td,
tbody td {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
}