/*************************
 * GRID SCHEDULE LAYOUT
 *************************/


.time-slot {
	grid-column: times;
}

.time-slot-column {
	display: none;
}

.track-slot {
	display: none; /* hidden on small screens and browsers without grid support */
}

@supports( display:grid ) {
	@media screen and (min-width:800px) {
		.time-slot-inline {
			display: none;
		}
		.time-slot-column {
			display: block;
		}
		.track-slot {
			display: block;
			padding: 10px 5px 5px;
			position: sticky;
			top: 0;
			z-index: 1000;
			background-color: rgba(255,255,255,.9);
		}
	}
}

/* Small-screen & fallback styles */
.session {
	margin-bottom:  1em;
	break-inside: avoid;
}

@supports( display:grid ) {
	@media screen and (min-width: 800px) {
		.session {
			margin: 0;
		}	
	}
}

/*************************
 * VISUAL STYLES
 * Design-y stuff ot particularly important to the demo
 *************************/


.session {
	padding: .5em;
	border-radius: 2px;
	font-size: 14px;
	box-shadow:
		rgba(255,255,255,.6) 1px 1px 0,
		rgba(0,0,0,.3) 4px 4px 0;
	background: #1b3a70;
	color: #fff;
}

.session-title {
	display: block;
}

.session-info {
	display: inline-block;
	margin: 0.2em auto auto;
	padding: 0em 0.3em;
	border: 1px solid #fff;
	border-radius: 2px;
}

.session-title,
.time-slot {
	font-size: 1.2em;
	margin: 0.2em 0;
}

.session-title a {
	color: #fff;
	text-decoration-style: dotted;
	
	&:hover {
		font-style: italic;
	}
	
	&:focus {
		outline: 2px dotted rgba(255,255,255,.8);
	}
}

.session-description {
	display: flex;
	column-gap: 10px;
}

.session-description-element {
	display: inline-block;
}

.track-slot,
.time-slot {
	font-weight: bold;
	font-size:.75em;
}

.type-keynote {
	background-color: #321B70;
}

.type-standard {
	/* Default styling */
}

.type-special {
	background-color: #1B7070;
}

/* .track-1 {
	background-color: #1259B2;
	color: #fff;
}

.track-2 {
	background-color: #687f00;
	color: #fff;
}

.track-3 {
	background-color: #544D69;
	color: #fff;
}

.track-4 {
	background-color: #c35500;
	color: #fff;
} */

.track-all {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f0f1f6;
	color: #000;
	box-shadow: none;
}

.track-all .session-title a {
	color: #000;
}

.text {
	max-width: 750px;
	font-size: 18px;
	margin: 0 auto 50px;
}

.meta {
	color: #555;
	font-style: italic;
}

.meta a {
	color: #555;
}

hr {
	margin: 40px 0;
}