#applied { margin-top: 24px; padding-top: 12px; border-top: 1px solid #f2f2f2; font-weight: 600; }
#applied span { font-weight: 400; }

#calendar { display: flex; flex-wrap: wrap; gap: 5px; }
#calendar .month { padding: 3px 9px; border-radius: 3px; transition: 0.2s ease-out; }
#calendar .month.found { outline: 1px solid #a2a2a2; background-color: #f2f2f2; cursor: pointer; }
#calendar .month.found.on { outline-color: #000000; background-color: #a2a2a2; }
#calendar .month.found.on:focus { outline: 0.1875rem dotted #000000; }
#calendar .month.found.on:hover { background-color: #858585; }
#calendar .month.found:focus { outline: 0.1875rem dotted #000000; }
#calendar .month.found:not(.on):hover { background-color: #e6e6e6; }

#directory { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 24px; }
#directory .event { width: calc(25% - calc(24px / 4 * 3)); border-radius: 0.5rem; box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.11), 0 0.1875rem 0.4375rem rgba(0, 0, 0, 0.13); display: none; flex-direction: column; position: relative; cursor: pointer; }
#directory .event.on { display: flex; }
#directory .event.on.hidden { display: none; }
#directory .event.pin .description { background-color: #2f2f2f; color: #ffffff; }
#directory .event.pin .metadata { background-color: #2f2f2f; }
#directory .event.pin .metadata > div { color: #ffffff; }
#directory .event:before { content: " "; border-radius: inherit; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; box-shadow: 0 0.375rem 0.875rem 0 rgba(0, 0, 0, 0.13), 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.11); transition: 0.2s ease-out; z-index: -1; }
#directory .event:hover:before { opacity: 1; }
#directory .event .action { padding: 24px; font-size: 14px; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; background-color: #ffffff; justify-content: space-between; align-items: center; display: flex; }
#directory .event .action a { font-weight: 600; text-decoration: none; text-transform: lowercase; }
#directory .event .action a:first-letter { text-transform: uppercase; }
#directory .event .action a:hover { text-decoration: underline; }
#directory .event .action img { width: auto; height: 48px; max-width: 96px; padding-left: 12px; object-fit: contain; }
#directory .event .description { height: 100%; padding: 24px; border-top-left-radius: inherit; border-top-right-radius: inherit; background-color: #f2f2f2; }
#directory .event .description h2 { margin-bottom: 8px; font-size: 16px; }
#directory .event .description p { margin: 0; font-size: 14px; }
#directory .event .metadata { padding: 0 24px 24px 24px; font-size: 14px; background-color: #f2f2f2; color: #505050; }
#directory .event .metadata > div:before { margin-right: 12px; font-family: "MWF-FLUENT-ICONS"; }
#directory .event .metadata .meta-contact:before { content: ""; }
#directory .event .metadata .meta-date:before { content: ""; }
#directory .event .metadata .meta-location:before { content: ""; }
#directory .event .metadata .meta-tags p { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#directory .event .metadata .meta-tags p:before { content: ""; margin-right: 12px; font-family: "MWF-FLUENT-ICONS"; }
#directory .event .metadata .meta-target:before { content: ""; }
#directory .event .metadata .meta-time:before { content: ""; }
#directory .event .metadata .meta-warning:before { content: ""; }

#events { display: flex; gap: 24px; }
#events #echo { width: calc(80% - 12px); }
#events #filter { width: calc(20% - 12px); margin-top: 24px; font-size: 14px; }

#info { justify-content: space-between; align-items: center; display: flex; }
#info .buttons { display: flex; align-items: flex-start; gap: 5px; }
#info .buttons .button { padding: 6px 9px 3px 9px; outline: 1px solid #a2a2a2; border-radius: 3px; font-family: "MWF-FLUENT-ICONS"; background-color: #f2f2f2; transition: 0.2s ease-out; cursor: pointer; }
#info .buttons .button.filter.on { outline-color: #000000; background-color: #a2a2a2; animation: pulse 1s 1s 3; }
#info .buttons .button.filter.on:focus { outline: 0.1875rem dotted #000000; }
#info .buttons .button.filter.on:hover { background-color: #858585; }
#info .buttons .button:focus { outline: 0.1875rem dotted #000000; }
#info .buttons .button:hover { background-color: #e6e6e6; }
#info .message { font-weight: 600; }

#options .buttons { display: flex; flex-wrap: wrap; gap: 5px; }
#options .buttons .button { padding: 3px 9px; outline: 1px solid #a2a2a2; border-radius: 3px; background-color: #f2f2f2; transition: 0.2s ease-out; cursor: pointer; }
#options .buttons .button.on { outline-color: #000000; background-color: #a2a2a2; }
#options .buttons .button.on:focus { outline: 0.1875rem dotted #000000; }
#options .buttons .button.on:hover { background-color: #858585; }
#options .buttons .button:focus { outline: 0.1875rem dotted #000000; }
#options .buttons .button:not(.on):hover { background-color: #e6e6e6; }
#options .dropdown { outline: 1px solid #a2a2a2; border-radius: 3px; transition: 0.2s ease-out; display: flex; flex-direction: column; }
#options .dropdown .name { padding: 6px 9px; border-radius: 3px; background-color: #f2f2f2; transition: 0.2s ease-out; position: relative; cursor: pointer; }
#options .dropdown .name:before { content: ""; right: 6px; top: 9px; font-family: "MWF-FLUENT-ICONS"; font-size: 12px; position: absolute; }
#options .dropdown .name:focus { z-index: 1; }
#options .dropdown .options { width: 100%; border-radius: 3px; background-color: #f2f2f2; display: none; }
#options .dropdown .options .option { margin-top: 1px; padding: 6px 9px; transition: 0.2s ease-out; position: relative; cursor: pointer; }
#options .dropdown .options .option.on { outline: 1px solid #000000; background-color: #a2a2a2; }
#options .dropdown .options .option.on:focus { outline: 0.1875rem dotted #000000; }
#options .dropdown .options .option.on:hover { background-color: #858585; }
#options .dropdown .options .option:focus { z-index: 1; }
#options .dropdown .options .option:not(.on):hover { background-color: #e6e6e6; }
#options .dropdown.on .name:before { transform: scaleY(-1); }
#options .dropdown:not(.on) .name:hover { background-color: #e6e6e6; }
#options fieldset { margin-top: 24px; }
#options legend { margin-bottom: 12px; font-size: 14px; font-weight: 600; }

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); }
	100% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
}

@media screen and (max-width: 1399px) {
	#directory .event { width: calc(33% - calc(24px / 3 * 2)); }
	#events #echo { width: calc(75% - 12px); }
	#events #filter { width: calc(25% - 12px); }
}

@media screen and (max-width: 1083px) {
	#directory .event { width: calc(50% - 12px); }
	#events #echo { width: calc(66% - 12px); }
	#events #filter { width: calc(33% - 12px); }
}

@media screen and (max-width: 859px) {
	#directory { margin-top: 0; }
	#directory .event { width: calc(50% - 12px); }
	#events { flex-direction: column; }
	#events #echo { width: 100%; }
	#events #filter { width: 100%; }
	#options { display: none; }
}

@media screen and (max-width: 539px) {
	#directory .event { width: 100%; }
}

@media screen and (-ms-high-contrast: white-on-black) {
	#directory .event .action img { filter: invert(100%); }
}