@media screen {
	.cwBody {
		--cs-blue: #1a5cff;
		--cs-navy: #030719;
		--cs-surface: #081337;
		--cs-pink: #ff4da6;
		font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
		color: #fff;
		background: radial-gradient(circle at 50% 20%, #173f91 0, var(--cs-navy) 65%);
	}

	.cwArea {
		color: #fff;
		background: rgba(3, 7, 25, 0.94);
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 16px;
		overflow: hidden;
	}

	.cwControlAreaTop,
	.cwControlAreaBottom {
		background: var(--cs-navy);
		border-color: rgba(255, 255, 255, 0.22);
	}

	.cwInfoArea,
	.cwDataArea,
	.cwListEventInfoArea,
	.cwListEventDataArea,
	.cwInputArea,
	.cwArea .shopSearchForm,
	.cwArea .shopSearchFormBasic,
	.cwArea .shopSearchFormAdvanced {
		color: #fff;
		background: var(--cs-surface);
		border-color: rgba(255, 255, 255, 0.18);
	}

	.cwArea .cwButton,
	.cwArea A.cwButton,
	.cwArea A.cwButton:visited,
	.cwArea .cwhc_SubmitButton,
	.cwArea .cwShopNavMain,
	.cwArea .cwShopNav,
	.cwArea .cwShopNavNext {
		color: #fff;
		background: var(--cs-blue);
		border: 2px solid #326bff;
		border-radius: 999px;
	}

	.cwArea .cwButton:hover:enabled,
	.cwArea A.cwButton:hover:enabled,
	.cwArea .cwhc_SubmitButton:hover:enabled,
	.cwArea .cwShopNavMain:hover:enabled,
	.cwArea .cwShopNav:hover:enabled,
	.cwArea .cwShopNavNext:hover:enabled {
		color: #fff;
		background: #0c148a;
		border-color: var(--cs-blue);
	}

	.cwArea :is(a, button, input, select, textarea):focus-visible {
		outline: 3px solid var(--cs-pink);
		outline-offset: 2px;
	}

	.cwArea table.cwEvents tr.dataRow:hover,
	.cwArea DIV.filterOptionFramed:hover {
		color: #fff;
		background: #0c148a;
		border-color: var(--cs-blue);
	}
}

/* Match the main CogWork shop breakpoint in lib.css. */
@media only screen and (max-width: 799px) {
	.cwArea {
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}
}

/* Fix collision with WordPress Divi */
/* Restore CogWork event-list layout after Divi overrides. */
@media only screen and (max-width: 980px) {
    .cwArea table.cwEvents tr.dataRow:not(.cwNotDisplayed) {
        display: table-row;
    }
}

@media only screen and (min-width: 800px) {
    .cwArea table.cwEvents td.onMediumScreenPlus.status {
        display: table-cell !important;
    }
}

@media only screen and (max-width: 799px) {
    .cwArea table.cwEvents td.onMediumScreenPlus {
        display: none !important;
    }

    .cwArea table.cwEvents td.statusIcon.onSmallScreenOnly {
        display: table-cell !important;
    }
}