:root {
	--track-all-border-color: #4361ee;
	--track-1-border-color: #9d4edd;
	--track-2-border-color: #ecd444;
	--track-3-border-color: #f72585;
	--track-4-border-color: #fb8500;
}

@media (width >=768px) {
	.schedule-day {
		--slot-simple: 1fr;
		--slot-double: 6rem;

		display: grid;
		grid-gap: 1em;
		grid-template-columns:
			[times] 4em
			[track-1-start] 0.5fr
			[track-1-end track-2-start] 0.5fr
			[track-2-end track-3-start] 0.5fr
			[track-3-end track-4-start] 0.5fr
			[track-4-end];
		
		grid-template-rows: 
			[tracks] auto
			[time-0930] var(--slot-simple)
			[time-0945] var(--slot-simple)
			[time-1000] var(--slot-simple) 
			[time-1015] var(--slot-simple)
			[time-1030] var(--slot-simple)
			[time-1045] var(--slot-simple)
			[time-1100] var(--slot-simple) 
			[time-1115] var(--slot-simple)
			[time-1130] var(--slot-double)
			[time-1200] var(--slot-simple)
			[time-1215] var(--slot-simple)
			[time-1230] var(--slot-simple)
			[time-1245] var(--slot-simple) 
			[time-1300] var(--slot-simple)
			[time-1315] var(--slot-simple)
			[time-1330] var(--slot-simple)
			[time-1345] var(--slot-simple) 
			[time-1400] var(--slot-double)
			[time-1600] var(--slot-simple) 
			[time-1615] var(--slot-simple)
			[time-1630] var(--slot-simple)
			[time-1645] var(--slot-simple)
			[time-1700] var(--slot-simple) 
			[time-1715] var(--slot-simple)
			[time-1730] var(--slot-simple)
			[time-1745] var(--slot-simple)
			[time-1800] var(--slot-double) 
			[time-1830] var(--slot-simple)
			[time-1845] var(--slot-simple) 
			[time-1900] var(--slot-simple)
			[time-1915] var(--slot-simple)
			[time-1930] var(--slot-simple)
			[time-1945] var(--slot-simple) 
			[time-2000] var(--slot-simple)
			[time-2015] var(--slot-simple)
			[time-2030] var(--slot-simple)
	}

	.schedule-day.saturday {
		grid-template-rows: 
			[tracks] auto
			[time-0930] var(--slot-simple)
			[time-0945] var(--slot-simple)
			[time-1000] var(--slot-simple) 
			[time-1015] var(--slot-simple)
			[time-1030] var(--slot-simple)
			[time-1045] var(--slot-simple)
			[time-1100] var(--slot-simple) 
			[time-1115] var(--slot-simple)
			[time-1130] var(--slot-double)
			[time-1200] var(--slot-simple)
			[time-1215] var(--slot-simple)
			[time-1230] var(--slot-simple)
			[time-1245] var(--slot-simple) 
			[time-1300] var(--slot-simple)
			[time-1315] var(--slot-simple)
			[time-1330] var(--slot-simple)
			[time-1345] var(--slot-simple) 
			[time-1400] var(--slot-double)
			[time-1600] var(--slot-simple) 
			[time-1615] var(--slot-simple)
			[time-1630] var(--slot-simple)
			[time-1645] var(--slot-simple)
			[time-1700] var(--slot-simple) 
			[time-1715] var(--slot-simple)
			[time-1730] var(--slot-simple)
			[time-1745] var(--slot-simple)
			[time-1800] var(--slot-simple)
			[time-1815] var(--slot-simple) 
			[time-1830] var(--slot-simple)
			[time-1845] var(--slot-simple) 
			[time-1900] var(--slot-simple)
			[time-1915] var(--slot-simple)
			[time-1930] var(--slot-simple)
			[time-1945] var(--slot-simple) 
			[time-2000] var(--slot-simple)
			[time-2015] var(--slot-simple)
			[time-2030] var(--slot-simple)
	}

	.session .track-content {
		position: sticky;
		top: 110px;
	}
}

#schedule-tab .nav-item .nav-link:not(.active) {
	color: red;
}

.track-slot {
	display: block;
	padding: 10px 5px 5px;
	position: sticky;
	top: 56px;
	z-index: 1000;
	font-weight: bold;
	font-size: 1em;
	text-align: center !important;
	background-color: rgba(255, 255, 255, .9);
	font-family: "Lato", Calibri, Arial, sans-serif !important;
}

.time-slot {
	display: inline;
	font-weight: bold;
	font-family: Arial, sans-serif !important;
	font-size: 14px !important;
	grid-column: times;
	margin: 0;
	font-size: 1em;
}

.session {
	color: #535f6b;
	margin: 0;
	margin-bottom: 1em;
	padding: .5em;
	border-radius: 2px;
	font-size: 14px;
}

.session-title,
.session-break,
.session-time,
.session-place,
.session-track,
.session-devroom-advice,
.session-presenter {
	display: block;
}

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

.session-title {
	padding-bottom: 0.2em;
	font-weight: bold;
}

.session-title a {
	color: #fff;
	text-decoration-style: dotted;

	&:hover {
		font-style: italic;
	}

	&:focus {
		outline: 2px dotted rgba(0, 102, 204, .8);
	}
}

.session-break a {
	color: #fff;
	text-decoration-style: dotted;

	&:hover {
		font-style: italic;
	}

	&:focus {
		outline: 2px dotted rgba(255, 255, 255, .8);
	}
}

.session-devroom-advice {
	font-size: 85%;
}

.track-1,
.track-2,
.track-3,
.track-4,
.track-all {
	border-radius: 5px;
	border: 2px solid transparent;
	outline-offset: -2px;
	transition: all 0.3s ease-in-out;

	a:hover {
		color: white;
	}
}

.track-all {
	outline: 2px dashed var(--track-all-border-color);
  	border-left: 8px solid var(--track-all-border-color);

	&:hover {
		border: 2px solid var(--track-all-border-color);
		border-left: 8px solid var(--track-all-border-color);
	}
}

.track-1 {
	outline: 2px dashed var(--track-1-border-color);
  	border-left: 8px solid var(--track-1-border-color);

	&:hover {
		border: 2px solid var(--track-1-border-color);
		border-left: 8px solid var(--track-1-border-color);
	}

	a {
		border-color: var(--track-1-border-color);
		color: var(--track-1-border-color);

		&:hover,
		&:active {
			border-color: var(--track-1-border-color) !important;
			background-color: var(--track-1-border-color) !important;
		}

		&:focus,
		&:focus-visible {
			box-shadow: 0 0 0 0.2rem var(--track-1-border-color) !important;
		}
	}
}

.track-2 {
	outline: 2px dashed var(--track-2-border-color);
  	border-left: 8px solid var(--track-2-border-color);

	&:hover {
		border: 2px solid var(--track-2-border-color);
		border-left: 8px solid var(--track-2-border-color);
	}

	a {
		border-color: var(--track-2-border-color);
		color: var(--track-2-border-color);

		&:hover,
		&:active {
			border-color: var(--track-2-border-color) !important;
			background-color: var(--track-2-border-color) !important;
		}

		&:focus,
		&:focus-visible {
			box-shadow: 0 0 0 0.2rem var(--track-2-border-color) !important;
		}
	}
}

.track-3 {
	outline: 2px dashed var(--track-3-border-color);
  	border-left: 8px solid var(--track-3-border-color);

	&:hover {
		border: 2px solid var(--track-3-border-color);
		border-left: 8px solid var(--track-3-border-color);
	}

	a {
		border-color: var(--track-3-border-color);
		color: var(--track-3-border-color);

		&:hover,
		&:active {
			border-color: var(--track-3-border-color) !important;
			background-color: var(--track-3-border-color) !important;
		}

		&:focus,
		&:focus-visible {
			box-shadow: 0 0 0 0.2rem var(--track-3-border-color) !important;
		}
	}
}

.track-4 {
	outline: 2px dashed var(--track-4-border-color);
  	border-left: 8px solid var(--track-4-border-color);

	&:hover {
		border: 2px solid var(--track-4-border-color);
		border-left: 8px solid var(--track-4-border-color);
	}

	a {
		border-color: var(--track-4-border-color);
		color: var(--track-4-border-color);

		&:hover,
		&:active {
			border-color: var(--track-4-border-color) !important;
			background-color: var(--track-4-border-color) !important;
		}

		&:focus,
		&:focus-visible {
			box-shadow: 0 0 0 0.2rem var(--track-4-border-color) !important;
		}
	}
}

.track-all-break,
.track-all-break-bis {
	padding: 0px;
	padding-top: 0px;
	border: 0px solid transparent;
	border-radius: 0px;

	.watermelon {
		position: relative;
		display: flex;
		height: 100%;
		border-radius: 3px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ff4e4e;
		overflow: hidden;
		transition: all 1s ease-in-out;

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: 3px;

			background-image: 
				radial-gradient(circle at 5px 5px, #000 1px, transparent 2px),
				radial-gradient(circle at 20px 15px, #000 2px, transparent 3px),
				radial-gradient(circle at 35px 25px, #000 1.5px, transparent 2.5px);
			background-size: 50px 40px;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}

		h3 {
			position: relative;
			background-color: #ff4e4e;
			color: #FFF;
			font-weight: 800;
			font-size: large;
			z-index: 1;
		}
	}
	transition: all 1s ease-in-out;
}

.track-all-break:hover,
.track-all-break-bis:hover {
	padding: 2px;
	border-left: 2px solid #5b845a;
	border-right: 2px solid #5b845a;
	border-bottom: 8px solid #5b845a;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	
	.watermelon {
		height: 100%;
		display: flex;
		border-radius: 3px;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ff4e4e;

		&::before {
			opacity: 1;
		}
	}
}

.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;
}

@media (width <=768px) {
	.track-slot {
		display: none;
	}

	.time-slot {
		display: none;
	}

	.track-all-break,
	.track-all-break-bis {
		height: 90px;
	}

	.track-all-break-bis {
		display: none;
	}

	.responsive-tabs .tab-pane {
		display: block !important;
		opacity: 1 !important;
	}

	.responsive-tabs .fade {
		transition: none;
	}
}