@charset "utf-8";
/* CSS Document */

#expand-box-header {
	display: flex;
	flex-wrap: wrap;
}

#expand-box-header > * {
	display: block;
}

#expand-box-header span:nth-child(2) {
	margin: 5px auto;
}

form[action="https://www.paypal.com/cgi-bin/webscr"] input[type="image"] {
	box-sizing: border-box;
	width: 200px;
	height: 60px;
	padding-left: 60px;
	padding-right: 60px;
	background-color: rgb(127, 127, 127);
	border-radius: 9px;
	transition: transform 0.1s ease;
}

form[action="https://www.paypal.com/cgi-bin/webscr"] input[type="image"]:hover {
	transform: scale(1.025);
}

.sticky-date {
	display: none;
}


 .collapsable-table-toggle-wrapper {
	display: none;
}  

 @media (max-width: 575.98px) {
/*@media (max-width: 2400px) {*/
	
	.collapsable-table-toggle-wrapper {
		display: block;
	}
	
	.collapsable .sticky-date {
		display: block;
	    position: sticky;
		/*
		width: 100vw;
		margin-left: -50vw;
		margin-right: -50vw;
		*/
		top: 0;
		left: 0;
		
		background-color: rgb(249, 249, 249);
		background-image: radial-gradient(circle, #dbdbdb, #bdbdbd);
		box-shadow: 0 5px 5px 0 rgba(0,0,0,0.05);
		
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: center;
		padding: 12px;
		font-weight: bold;
	}

	table.collapsable tr {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
/* 		grid-template-areas:
			"event-title event-title event-title"
			"tags tags date-time"
			"price-age organizers links"; */
		grid-template-areas:
			"event-title event-title date-time"
			"event-title event-title price-age"
			"organizers tags links";
/* see what people think about this one too
		grid-template-areas:
			"event-title tags date-time"
			"event-title tags price-age"
			"organizers blank links";			*/
		background-color: transparent;
/*		background-image: linear-gradient(to bottom right, rgba(229, 229, 229, 0.72), rgba(244, 244, 244, 0.34));*/
		background-image: linear-gradient(to bottom right, rgba(229, 229, 229, 0.22), rgba(244, 244, 244, 0.34));
		border-radius: 7px;
		margin-bottom: 8px;
		padding: 2px 6px;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
		font-size: .8rem;
	}
	
	.collapsable th {
		padding: 2px;
		border-bottom: none;
		background-color: transparent;
	}

	.collapsable thead tr {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.collapsable td {
		padding: 3.5px;
		margin: 0;
	}

	.collapsable tr td:nth-child(1) {
		grid-area: date-time;	
	    text-align: center;
	}

	.collapsable tr th:nth-child(1) {
		grid-area: date-time;	
	    text-align: left;
	}

	.collapsable td:nth-child(1) span:first-of-type {
    display: none;
	}

	.collapsable td:nth-child(1) > br {
		display: none;
	}

	.collapsable tr td:nth-child(2), .collapsable tr th:nth-child(2) {
		grid-area: event-title;
		font-size: 0.9rem;
	}

	.collapsable tr th:nth-child(3) {
		grid-area: tags;
/*		font-size: .7rem;*/
		text-align: center;
		align-self: center;
	}

	.collapsable tr td:nth-child(3) {
		grid-area: tags;
		font-style: italic;
		text-align: center;
		align-self: center;
	}

	.collapsable tr td:nth-child(4), .collapsable tr th:nth-child(4) {
		grid-area: price-age;
		text-align: center;
		align-self: center;
	}

	.collapsable tr th:nth-child(5) {
		grid-area: organizers;
		text-align: center;
		align-self: center;
	}

	.collapsable tr td:nth-child(5) {
		grid-area: organizers;
		font-size: 0.6rem;
		text-align: center;
		align-self: center;
	}

	.collapsable tr td:nth-child(6), .collapsable tr th:nth-child(6) {
		grid-area: links;
		text-align: center;
		align-self: center;
	}

	.collapsable td:nth-child(7), .collapsable th:nth-child(7) {
		/* not sure why we have an extra td node on DOM, this is temp solution */
		display: none;
	}
}