.layoutjs {
	--font-family-display: var(--font-display);
	--font-family-body: var(--font-body);
	--primary-color: var(--gray-800);
	--secondary-color: var(--gray-400);
	--tertiary-color: var(--gray-100); 
	--tertiary-color-hover: var(--gray-200); 
	--accent-color: var(--sw-key-color);
	--accent-color-secondary: var(--primary-color-600);
	--alert-color: var(--white);
	--alert-color-secondary: var(--sw-alert-color);
	--alert-color-tertiary: var(--sw-alert-color);
	--box-shadow: var(--shadow);

	--settings-font-family-display: var(--font-family-display);
	--settings-font-family-body: var(--font-family-body);
	--settings-color: var(--primary-color);
	--settings-secondary-color: var(--secondary-color);
	--settings-accent-color: var(--accent-color);
	--settings-bg-color: var(--tertiary-color);

	--filter-font-family-display: var(--font-family-display);
	--filter-font-family-body: var(--font-family-body);
	--filter-color: var(--primary-color);
	--filter-bg-color: var(--tertiary-color);
	--filter-accent-color: var(--accent-color);
	--filter-secondary-color: var(--secondary-color);
	--filter-tertiary-color: var(--tertiary-color);
	--filter-shadow: var(--box-shadow);

	--content-font-family-display: var(--font-family-display);
	--content-font-family-body: var(--font-family-body);
	--content-primary-color: var(--primary-color);
	--content-secondary-color: var(--secondary-color);
	--content-tertiary-color: var(--tertiary-color);
	--content-tertiary-color-hover: var(--tertiary-color-hover);
	--content-accent-color: var(--accent-color);
	--content-enabled-color: var(--accent-color-secondary);
	--content-alert-color: var(--alert-color);
	--content-alert-bg-color: var(--alert-color-secondary);
	--content-alert-accent-color: var(--alert-color-tertiary);

	--datepicker-width: 280px;
	--datepicker-width-mobile-tablet: 300px;
	--datepicker-width-desktop: 243px;

	--compare-menu-cta-bg-color: var(--sw-button-primary-bg);
	--compare-menu-cta-bg-color-hover: var(--sw-button-primary-bg-hover);
	--compare-menu-cta-text-color: var(--sw-button-primary-color);
	--compare-menu-cta-text-color-hover: var(--sw-button-primary-color-hover);

	.settings {
		padding: 10px;
		font-family: var(--settings-font-family-body);
		font-size: var(--text-sm);
		font-weight: var(--font-weight-normal);
		line-height: 1.2;
		color: var(--white);
		background: var(--blue);
	}
	
	.settings a {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font: inherit;
		text-decoration: none;
		color: inherit;
	}
	
	.settings a:hover {
		cursor: pointer;
	}
	
	.datepicker-cont .quicklinks button {
		color: var(--gray-dark);
	}
	
	.top-action-wrapper a { color:var(--content-accent-color); }
	
	.filterPane .filter[data-type="checkbox"] .expander {
		color: var(--filter-accent-color);
	}
	
	.settings ul,
	.filterPane ul {
		line-height: inherit;
	}

	.filterPane .sort ul,
	.filterPane .quicklinks {
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		line-height: 1.4;
		color: var(--gray-dark);
	}

	.filterPane .sort ul {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-5);
	}
	
	.filterPane .sort li {
		margin: 0;
	}

	.filterPane a,
	.filterPane .quicklinks button {
		padding: 0;
		margin: 0;
		font: inherit;
		color: inherit;
		text-decoration: none;
		background: none;
		border: none;
		border-bottom: 2px solid transparent;
		border-radius: 0;
		transition:
			color var(--transition-appendix),
			border-color var(--transition-appendix);
	}

	.filterPane .highlight a,
	.filterPane .quicklinks button.highlight {
		color: var(--red);
		border-color: var(--red);
	}

	.filterPane.mobileFilterActive {
		background-color: var(--filter-bg-color);
	}
	
	.mobileHeader .mobileTitle {
		font-family: var(--filter-font-family-body);
		font-size: var(--text-lg);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-none);
		color: var(--filter-color);
	}

	.mobileHeader button {
		display: inline-block;
		padding: 10px var(--space-5);
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		line-height: 1.2;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none;
		color: var(--white);
		background-color: var(--blue);
		border: 2px solid var(--blue);
		border-radius: var(--rounded-full);
	}

	.mobileHeader button.resetButton {
		background-color: transparent;
		color: var(--blue);
	}

	.filterPane .filter[data-type="keyword"] button {
		height: auto;
		font-family: var(--filter-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-normal);
		line-height: var(--leading-none);
		color: var(--filter-tertiary-color);
		background-color: var(--red);
		border: none;
	}
	
	.filterPane .top-action-wrapper:has(.print-cont) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.rss-link {
		text-align: right;
	}
	
	.rss-link,
	.print-events {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 4px;
	}
	
	.filterPane .sort,
	.filterPane .filter,
	.filterPane .filter[data-type="checkbox"] .expander {
		font-family: var(--filter-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-normal);
		line-height: var(--leading-none);
		background-color: inherit;
		border: none;
	}
	
	.filterPane .sort .settings-label,
	.filterPane .filter .filterLabel,
	.filterPane .form-label {
		font-family: var(--filter-font-family-display);
		font-size: var(--text-lg);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-none);
		color: var(--filter-color);
		background-color: transparent;
	}
	
	.filterPane .filter[data-type="keyword"] input,
	.filterPane .filter[data-type="number"] input {
		height: auto;
		padding: var(--space-3) 10px;
		font-family: var(--filter-font-family-body);
		font-size: var(--text-lg);
		font-weight: var(--font-weight-normal);
		line-height: 1.2;
		color: var(--gray-dark);
		background: var(--white);
		border: 1px solid #CCD4E0;
	}
	
	.filterPane .filter[data-type="keyword"] input::placeholder,
	.filterPane .filter[data-type="number"] input::placeholder {
		color: var(--gray);
	}
	
	.filterPane .filter[data-type="toggle"] .toggle .toggle-decorator {
		background-color: var(--filter-secondary-color);
	}
	
	.filterPane .filter[data-type="toggle"] .toggle input:checked + .toggle-decorator {
		background-color: var(--filter-accent-color);
	}
	
	.filterPane .filter[data-type="toggle"] .toggle .toggle-decorator::after {
		font-size: var(--text-xs);
		box-shadow: var(--filter-toggle-shadow);
		background-color: var(--filter-tertiary-color);
	}

	.filterPane .filter[data-type="checkbox"] li {
		margin-bottom: 18px;
	}
	
	.filterPane .filter[data-type="checkbox"] .custom-checkbox {
		border: 2px solid var(--filter-secondary-color);
		color: var(--filter-secondary-color);
		border-radius: var(--rounded-sm);
		font-size: var(--text-xs);
	}
	
	.filterPane .filter[data-type="checkbox"] input:focus-visible + label .custom-checkbox {
		outline: solid 1px var(--sw-focus-color);
	}
	
	.filterPane input[type="checkbox"] + label .custom-checkbox i {
		font-size: var(--text-xs);
	}
	
	.filterPane input[type="checkbox"]:checked + label .custom-checkbox {
		background-color: var(--filter-accent-color);
		border: 2px solid var(--filter-accent-color);
		color: var(--filter-tertiary-color);
	}
	
	.datepicker-cont .datepicker-trigger {
		background-color: var(--filter-accent-color);
		color: var(--filter-tertiary-color);
	}
	
	.datepicker-cont .datepicker-trigger > span { 
		font-family: var(--filter-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-normal);
		line-height: var(--leading-none);
	}
	
	.asd__month-name { 
		font-family: var(--filter-font-family-body);
		font-size: var(--text-lg);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-none);
		color: var(--filter-color);
	}
	
	.asd__day-title {
		font-family: var(--filter-font-family-body);
		font-size: var(--text-sm);
		font-weight: var(--font-weight-normal);
		line-height: var(--leading-normal);
		color: var(--filter-color);
	}
	
	.asd__day-button {
		font-family: var(--filter-font-family-body);
		font-size: var(--text-sm);
		font-weight: var(--font-weight-normal);
		line-height: var(--leading-normal);
	}

	.asd__change-month-button > button {
		border-width: 2px;
	}
	
	.layout-container .map .panSearch {
		box-shadow: var(--shadow);
		font-family: var(--filter-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-normal);
		line-height: var(--leading-none);
		color: var(--content-tertiary-color);
		background-color: var(--content-accent-color);
	}

	.content {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: var(--space-5);
	}
	
	.content .item {
		display: block;
		margin: 0;
		background: var(--white);
		border-radius: 10px;
		box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.01), 0px 3px 20px 0px rgba(0, 0, 0, 0.10);
		overflow: hidden;
	}
	
	.content .headers,
	.content .item.convention-item {
		font-size: var(--text-base);
	}
	
	.content .item.convention-item:nth-child(even) .info {
		background-color: var(--content-bg-color);
	}
	
	.content .headers {
		font-weight: var(--font-weight-bold);
	}
	
	.content .item .image .mini-date-container {
		background-color: var(--sw-mini-date-bg);
		color: var(--sw-mini-date-color);
	}
	
	.content .item .image .mini-date-container .month {
		font-family: var(--filter-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-none);
		text-transform: uppercase;
	}
	
	.content .item .image .mini-date-container .day {
		font-family: var(--filter-font-family-body);
		font-size: var(--text-3xl);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-none);
	}
	
	.content .item .image .featured {
		display: block;
		height: auto;
		padding: 5px 10px;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: 0.8125rem;
		line-height: 1.4;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-align: center;
		color: var(--white);
		background: var(--blue);
	}
	
	.content .item .tripbuilder a {
		height: auto;
		font-size: var(--text-2xl);
		line-height: 1;
	}
	
	.content .item .tripbuilder .addTrip:before{
		color: rgba(0, 0, 0, 0.5);
	}
	
	.content .item .tripbuilder .addTrip:after {
		color: var(--content-tertiary-color);
	}
	
	.content .item .tripbuilder .removeTrip:before {
		color: var(--alert-color-tertiary);
	}
	
	.content .item-title {
		margin-bottom: var(--space-2);
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-weight: var(--font-weight-bold);
		line-height: 1.3;
		color: var(--gray-dark);
	}
	
	.content .item.convention-item .info .host {
		font-family: var(--content-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-normal);
		color: var(--content-accent-color);
	}
	
	.content .item.convention-item .info h6 {
		font-family: var(--content-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-bold);
		line-height: var(--leading-normal);
		color: var(--content-primary-color);
	}
	
	.content .item .info-list {
		margin-bottom: var(--space-5);
		font-family: var(--font-body);
		font-weight: var(--font-weight-medium);
		font-size: var(--text-base);
		line-height: var(--leading-none);
		color: var(--gray-dark);

		li,
		a {
			font: inherit;
			text-decoration: none;
			color: inherit;
		}

		a {
			transition: color var(--transition-appendix);
		}
	}
	
	.content .item .info-list > li {
		gap: 5px;
	}
	
	.content .item .info-list > li > i {
		width: var(--space-5);
		min-width: var(--space-5);
		margin: 0;
		text-align: center;
	}
	
	.content .item .info-list.meetingfacility-list li {
		color: var(--content-primary-color);
	}
	
	.content .item .info-list.meetingfacility-list li:first-child {
		color: inherit;
	}
	
	.content .item .info-list.meetingfacility-list li span {
		font-weight: var(--font-weight-bold);
	}

	.content .item .bottom-actions {
		gap: 6px var(--space-5);
	}
	
	.content .item .bottom-actions .qv-btn,
	.content .item .bottom-actions .actionButton {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 0;
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		text-decoration: none;
		text-align: left;
		color: var(--red);
		background: none;
		border: none;
		border-radius: 0;
	}

	.content .item .bottom-actions .actionButton.website {
		gap: 3px;

		&::after {
			font: var(--fa-font-solid);
			font-size: var(--text-xs);
			content: '\f35d';
		}
	}
	
	.content .item .bottom-actions .qv-btn i,
	.content .item .bottom-actions .actionButton i {
		margin: 0;
	}
	
	.pager li {
		font-family: var(--content-font-family-body);
		font-size: var(--text-base);
		font-weight: var(--font-weight-normal);
		line-height: var(--leading-none);
		color: var(--content-primary-color);
	}
	
	.pager a {
		font-size: var(--text-2xl);
	}
	
	.pager li a {
		color: var(--content-secondary-color);
	}
	
	.pager li.highlight a {
		color: var(--content-accent-color);
	}
	
	.pager-section .limits li {
		border-bottom: 2px solid transparent;
	}
	
	.pager-section .limits .highlight {
		border-bottom: 2px solid var(--settings-accent-color);
	}
	
	.pager-section .limits .highlight a {
		color: var(--settings-accent-color);
	}
	
	[data-type="twostage"] .stage-one[disabled] {
		opacity: 0.7;
	}
	
	.compare .compare-toggle {
		font-size: var(--text-xl);
		color: var(--content-enabled-color);
		border-radius: var(--rounded-lg);
		background-color: transparent;
	}
	
	.compare .compare-toggle.badged::after {
		font-size: var(--text-sm);
		font-weight: var(--font-weight-semibold);
		color: var(--content-alert-color);
		border-radius: var(--rounded-md);
		background-color: var(--content-alert-bg-color);
	}
	
	.compare .compare-toggle[disabled] {
		color: var(--content-color);
	}
	
	.compare .compare-toggle:hover,
	.compare .compare-toggle:focus-visible {
		background-color: var(--content-primary);
	}
	
	.compare .compare-toggle.open {
		color: var(--content-enabled-color);
	}
	
	.click-to-compare-menu {
		border: 1px solid var(--gray-400);
		border-radius: var(--rounded-md);
		box-shadow: var(--shadow-md), var(--shadow-2xl);
		background-color: var(--content-tertiary-color);
	}
	
	.click-to-compare-menu .compare-title {
		font-size: var(--text-lg);
		font-weight: var(--font-weight-semibold);
		line-height: var(--leading-normal);
	}
	
	.click-to-compare-menu .compare-actions {
		background-color: var(--content-tertiary-color);
	}
	
	.click-to-compare-menu .compare-clear,
	.click-to-compare-menu .compare-link {
		border-radius: var(--rounded-full);
		line-height: var(--leading-normal);
		text-decoration: none !important;
		font-weight: bold;
	}
	
	.click-to-compare-menu .compare-clear {
		background: var(--sw-button-secondary-bg);
		color: var(--sw-button-secondary-color);
	}
	
	.click-to-compare-menu .compare-link {
		color: var(--compare-menu-cta-text-color);
		background-color: var(--compare-menu-cta-bg-color);
	}
	
	.click-to-compare-menu .compare-chit {
		font-size: var(--text-sm);
		text-align: left;
		color: var(--content-primary-color);
		border-radius: var(--rounded-md);
		border: none;
		background-color: transparent;
	}
	
	.click-to-compare-menu .compare-chit:hover {
		background-color: var(--content-tertiary-color-hover);
	}
	
	.click-to-compare {
		color: inherit;
		font-weight: bold;
		text-transform: capitalize;
		background-color: transparent;
	}
	
	.click-to-compare .fas {
		color: var(--content-accent-color);
	}
	
	.click-to-compare.compare-remove .fas {
		color: var(--content-enabled-color);
	}
	
	.download {
		font-size: var(--text-base);
		color: var(--content-tertiary-color);
		border-radius: var(--rounded-full);
		background-color: var(--content-accent-color);
	}
	
	.yelp-snippet .yelp-bottom {
		font-size: var(--text-xs);
		color: var(--gray-700);
	}
	
	@media (hover: hover) {
		.click-to-compare-menu .compare-link:hover {
			background-color: var(--compare-menu-cta-bg-color-hover);
			color: var(--compare-menu-cta-text-color-hover);
		}
	
		.click-to-compare-menu .compare-clear:hover {
			background: var(--sw-button-secondary-bg-hover);
			color: var(--sw-button-secondary-color-hover);
		}

		.content .item .info-list a:hover {
			color: var(--red);
		}
	}

	@media (min-width: 23.4375em) {
		.content .item {
			display: grid;
			grid-template-columns: 44.78% minmax(0, 1fr);
		}
	}
	
	@media (min-width: 64em) {
		.layout-container .layout {
			padding: 0 var(--space-12);
		}

		.content {
			margin: 35px 0 var(--space-10);
		}

		.content.grid {
			gap: var(--space-10) var(--space-5);
		}

		.filterPane {
			color: var(--white);
			background-color: var(--blue);
		}

		.filterPane .filter .filterLabel {
			color: inherit;
		}
	
		.filterPane .btn-bg button {
			display: inline-flex;
			align-items: baseline;
			gap: 10px;
			padding: 10px var(--space-5);
			margin: 0;
			font-family: var(--font-body);
			font-weight: var(--font-weight-bold);
			font-size: 0.6875rem;
			line-height: 1.2;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			text-align: center;
			text-decoration: none;
			color: var(--white);
			background-color: var(--red);
			border: 1.5px solid var(--red);
			border-radius: var(--rounded-full);
			box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
			transition:
				color var(--transition-appendix),
				background-color var(--transition-appendix);

			i {
				margin: 0;
				font-size: var(--text-sm);
			}
		}

		.filterPane input[type="checkbox"]:checked + label .custom-checkbox {
			color: var(--blue);
			background-color: var(--white);
			border-color: var(--white);
		}

		.filterPane .filter[data-type="checkbox"] .expander {
			display: inline-flex;
			align-items: baseline;
			gap: 3px;
			padding: 0;
			margin: 0;
			font-family: var(--font-body);
			font-weight: var(--font-weight-medium);
			font-size: var(--text-sm);
			line-height: 1.2;
			color: var(--white);
		}
	
		.settings {
			padding: var(--space-5) var(--space-10);
			color: var(--gray-dark);
			background: var(--white);
		}
	
		.settings > div {
			border-right: 1px solid var(--settings-secondary-color);

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}

		.filterPane .quicklinks button {
			color: var(--blue-light);
		}

		.filterPane .quicklinks button.highlight {
			color: var(--white);
			border-color: var(--white);
		}

		.asd__change-month-button > button {
			width: 2.125rem;
			height: auto;
			aspect-ratio: 1;

			&::before {
				font: var(--fa-font-solid);
				font-size: var(--text-lg);
			}

			img {
				display: none;
			}
		}

		.asd__change-month-button--next > button::before {
			content: '\f061';
		}

		.asd__change-month-button--previous > button::before {
			content: '\f060';
		}

		.asd__month-name,
		.asd__day-title {
			color: var(--white);
		}
	
		.settings .settings-label,
		.settings ul li,
		.settings .map-btn span {
			font-family: var(--content-font-family-body);
			font-size: var(--text-base);
			font-weight: var(--font-weight-bold);
			line-height: var(--leading-none);
			border-bottom: 2px solid transparent;
		}
	
		.settings .map-btn {
			background-color: unset;
			color: var(--gray-dark);
		}
	
		.settings .map-btn:focus-visible {
			outline: solid 1px var(--sw-focus-color);
		}
	
		.settings ul li a,
		.settings .map-btn button {
			color: var(--settings-color);
		}
	
		.settings .highlight {
			color: var(--red);
			border-bottom: 2px solid var(--red);
		}

		.settings .highlight a {
			color: inherit;
		}
	
		.content .headers {
			background-color: var(--content-tertiary-color);
		}
	
		.yelp-snippet .yelp-bottom {
			font-size: var(--text-sm);
		}
		
		.pager-section .limits {
			display: flex;
		}

		.content.grid {
			align-items: stretch;
		}
		
		.content.grid .item .image {
			flex: unset;
		}
		
		.content.grid .item .image img {
			aspect-ratio: 17 / 11;
			height: auto;
		}

		.content .item .image .featured {
			font-size: var(--text-sm);
		}

		.content.grid .item .info {
			padding: var(--space-5) var(--space-5) 30px;
		}

		.content .item-title {
			margin-bottom: var(--space-3);
			font-size: var(--text-xl);
		}

		.content.grid .item .info-list {
			margin-bottom: 30px;
		}

		.content.grid .item .bottom-actions {
			justify-content: space-between;
		}

		@media (hover: hover) {
			.filterPane .btn-bg button:hover {
				color: var(--red);
				background-color: var(--white);
			}
		}
	}
}