/*
	----------------
	- Calendar
	----------------
*/
.cCalendar {
	width: 100%;
	table-layout: fixed;
}

	@media (min-width: 767px){
		.cCalendar{
			width: calc(100% + 2px);
			margin: -1px;
			margin-top: 0;
		}
	}

.cCalendar th{
	background: var(--i-background_4);
	border: 1px solid var(--i-background_5);
	padding: .8em;
	font-weight: 500;
}

.cCalendarIcon {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	margin-inline-end: 5px;
	vertical-align: middle;
}

.cCalendar td {
	width: 14.285%;
	min-height: 100px;
	border: 1px solid var(--i-background_4);
	vertical-align: top;
	padding: .5em;
}

	.cCalendar td > div {
		height: 100%;
		min-height: 100px;
		position: relative;
	}

.cCalendar td.cCalendar_nonDate {
	background: var(--i-background_2);
}

.cCalendar td.cCalendar_today {
	background: var(--i-background_dark);
	color: var(--i-color_background-dark-contrast);
}

.cCalendar_dayNumber {
	color: inherit;
	font-size: 1.1em;
	font-weight: 600;
	display: inline-block;
}

.cCalendar_miniAddEvent {
	padding: .2em .4em;
	background: var(--i-background_4);
	color: inherit;
	display: inline-block;
	border-radius: 5px;
	opacity: 0;
	transition: 0.2s all ease-in-out;
	margin-inline-start: .5em;
}

	.cCalendar td:hover .cCalendar_miniAddEvent {
		opacity: .5;
	}

	.cCalendar td .cCalendar_miniAddEvent:hover {
		opacity: 1;
	}

	.cCalendar_today .cCalendar_miniAddEvent{
		background: none;
	}


/* EVENT STYLES */
.cEvents_event{
	margin-bottom: 2px;
}
a.cEvents_event,
.cEvents_event a,
.cEvents_event.cEvents_empty span {
	display: block;
	line-height: 28px;
	height: 28px; /* This value is needed since some elements use font-size: 0 */
	font-size: var(--i-font-size_-1);
	padding: 0 1em;
	color: #fff;
	border-radius: 20px;
	white-space: nowrap;
	overflow: hidden;
	background: var(--i-background_dark);
}

	a.cEvents_style_blank,
	.cEvents_style_blank a,
	.cCalendarIcon.cEvents_style_blank {
		background-color: transparent;
		border: 1px solid var(--i-background_5);
	}

	a.cEvents_event.cEvents_eventSmall,
	.cEvents_event.cEvents_eventSmall a,
	.cEvents_event.cEvents_eventSmall.cEvents_empty span {
		font-size: var(--i-font-size_-2);
		display: inline-block;
	}

.cEvents_time {
	font-size: max(10px, .7em);
	text-transform: uppercase;
	opacity: 0.7;
}

.cEvents_event.cEvents_empty span {
	background: transparent;
}

/* Single event special styles */
.cEvents_single .cEvents_event a {
	border-radius: 20px;
}

/* Ranged event special styles */
.cEvents_ranged .cEvents_event a {
	border-radius: 0;
}

.cEvents_ranged .cEvents_event:not(.cEvents_first) a {
	margin-inline-start: -7px;
	padding-inline-start: 8px;
}

.cEvents_ranged .cEvents_event:not(.cEvents_last) a {
	margin-inline-end: -8px;
}

.cEvents_ranged .cEvents_event.cEvents_first a {
	border-start-start-radius: 20px;
	border-end-start-radius: 20px;
}

.cEvents_ranged .cEvents_event.cEvents_last a {
	border-start-end-radius: 20px;
	border-end-end-radius: 20px;
}

/* Hide details in all but the first in each row */
tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:not(.cEvents_first) a,
tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:not(.cEvents_first) a span {
	font-size: 0;
}

	tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:not(.cEvents_first) a img {
		display: none;
	}

/* EVENT VIEW */
.cEvents__sidebarOnlineLogo{
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--i-color_soft);
}

	.cEvents__sidebarOnlineLogo svg{
		height: .8em;
		width: auto;
		margin: 0 .4em;
	}

.cCalendarBlock_map {
	text-align: center;
}

.cCalendar_shortInput {
	width: auto;
}

/* Submit screen */
#eventDateSelection .ipsInput:where([type="date"], [type="time"]){
	width: 100%;
}
#event_remind_me [type="number"]{
	max-width: 60px;
}

.eventStreamDate .cCalendarEmbed_calendar {
	background: var(--i-background_2);
}

.eventStreamDate .ipsCalendarDate {
	width: 80px;
}

/*
	----------------
	- Events
	----------------
*/

/* Featured events carousel */
.cEvents__overview-header{
	display: grid;
	gap: var(--i-sp_block);
}

@media (min-width: 767px){
	.cEvents__overview-header:has(.cEvents__overview-featured){
		grid-template-columns: 1fr max(340px, 30%);
	}
}

.ipsData--events-featured{
	--i-data--max: 1;
	--i-data--gap: 0px;
	--i-data--radius: 0 0 var(--i-box--bo-ra) var(--i-box--bo-ra);
	--i-data--desc-truncate: 2;
	--i-data--display-desc: initial;
}

.ipsData--events-featured .ipsData__content{
	padding-inline-start: 6em;
}

.ipsData--events-featured .ipsCalendarDate{
	width: 3.3em;
	position: absolute;
	inset-inline-start: 1.5em;
}

/* A hard-coded value is needed here since --i-color_root is overwritten with white in .ipsData--wallpaper */
[data-ips-scheme="light"] .ipsData--events-featured .ipsCalendarDate__date{
	color: hsl(0 0% 30%);
}


/* Search */
.cEvents__search {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8em 1em;
}

	.cEvents__search > *{
		flex: 1 1 100%;
	}

.ipsEventSearch__searchLocation{
	flex: 0 0 auto;
	font-weight: 600;
	font-size: .9em;
	align-self: start;
}

	.ipsEventSearch__searchLocation:hover{
		text-decoration: underline;
	}

.cEvents__search__field--date {
	flex-basis: 150px;
}

	.cEvents__search__field--date input{
		width: 100%;
	}

.cEvents__search__label {
	color: var(--i-color_hard);
	display: block;
	font-weight: 600;
	margin-bottom: .5em;
}

.cEvents__search__searchWrap :is([type="text"], [type="search"]) {
	flex: 1 1 auto;
}

@media (max-width: 767px) {
	.ipsEventSearch__searchLocation span {
		display: none;
	}
}

.ipsEventSearch .ipsField_loading {
	background-image: url('"https://www.networny.com/applications/core/dev/resources/front/loaders/tiny_loading@2x.gif"') !important;
	background-size: 14px 14px;
	background-repeat: no-repeat;
	background-position: right 5px center;
}

.cEvents__searchMap {
	height: 350px;
	background: var(--i-background_3);
}

.cEvents__searchMap--loading > * {
	display: none;
}

/* Listing */
.cEvent__onlineLogo{
	place-self: end;
	margin: 5px;
	background: var(--i-background_1);
	padding: 8px 12px;
	pointer-events: none;
	border-radius: inherit;
}

	.cEvent__onlineLogo svg{
		display: block;
		width: auto;
		height: 12px;
	}

/* Near me section */
.ipsEventsNearMe__map{
	padding: 10px;
	grid-column: span 2;
}
.ipsEventsNearMe__map #map{
	min-height: 300px;
	border-radius: var(--i-box--bo-ra);
}

@media (max-width: 860px){
	.ipsEventsNearMe__map {
		grid-column: 1 / -1;
	}
}

.ipsEventsNearMe__map > .ipsMap {
	height: 100%;
}

@media (max-width: 768px) {
	.ipsEventList--nearMe {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
	}

	.cEvents__skeleton--map {
		display: none;
	}
}

/* Month navigator */
.cEvents__monthNav {
	display: flex;
	background: var(--i-background_dark);
	color: #fff;
	overflow-x: auto;
}

.cEvents__monthNav__monthItem {
	flex: 1 0 auto;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.4;
	padding: 1.1em 0.8em;
}

.cEvents__monthNav__monthItem:hover {
	background-image: linear-gradient(hsl(0 0% 100% / .1) 0% 100%);
	color: #fff;
}

.cEvents__monthNav__monthItem--active{
	background-color: var(--i-primary);
	color: var(--i-primary-contrast);
}

.cEvents__monthNav__month {
	font-size: 1.14em;
	font-weight: 500;
	text-transform: uppercase;
}

.cEvents__monthNav__year {
	font-size: .9em;
}

	.cEvents__skeleton--map {
		position: relative;
		width: 100%;
		min-height: 300px;
	}

/* BOTH */
@media screen and (max-width: 979px) {
	/* Calendar views */
	.cCalendar th span,
	.cCalendar_miniAddEvent {
		display: none;
	}
}

/* TABLETS */
@media screen and (min-width: 768px) and (max-width: 979px) {
	.cCalendar th::after {
		content: attr(data-short);
	}
}

/* PHONES */
@media screen and (max-width: 767px) {	

	/* Calendar views */
	.cCalendar td {
		min-height: 40px;
		padding: 0;
	}

	.cCalendar td > div {
		padding-bottom: 0;
		min-height: 0;
	}
	
	.cCalendar td.cCalendar_today {
		background: transparent;
	}

	.cCalendar th::after {
		content: attr(data-veryShort);
	}
	
	.cCalendar .cEvents {
		display: none;
	}

	.cCalendar .cCalendar_dayNumber {
		display: grid;
		place-content: center;
		height: 40px;
		padding: 4px;
		margin: 1px;
		font-size: var(--i-font-size_-2);
	}

	.cCalendar .cCalendar_hasEvents .cCalendar_dayNumber {
		border: 2px solid var(--i-background_5);
		background: var(--i-background_2);
	}

		.cCalendar .cCalendar_hasEvents.cCalendar_today .cCalendar_dayNumber {
			background: rgba(205, 56, 22, 0.19);
		}

		.cCalendar td.cCalendar_today .cCalendar_dayNumber {
			background: var(--i-background_1);
			border: 2px solid currentColor;
			color: #cd3816;
		}

}