*{
	box-sizing: border-box;
}

button{
	font-size: 1.2em;
	padding: 0.2em 0.6em;
	background: #444;
	border-radius: 0.2em;
	border: 0.2em solid #444;
	color: #ccc;
	cursor: pointer;
	
	transition: background 0.1s, color 0.1s, border-color 0.1s;
}
button:hover{
	background: #333;
	color: #ddd;
}
button:active{
	background: #222;
	color: #666;
}
button.selected{
	border-color: #168fdc;
}

html, body{
	margin: 0;
	padding: 0;
	height: 100%;
}
body{
	background: #181818;
	color: #ccc;
	font-family: "Ubuntu", sans-serif;
}
.manager{
	height: 100%;
	
	display: flex;
	flex-flow: column nowrap;
}
.manager>header{
	flex: none;
	
	display: flex;
	flex-flow: row nowrap;
	
	background: #282828;
}
.manager>header>h1{
	flex: none;
	font-size: 1.6em;
	padding: 0.2em 0.6em;
}
.manager>header>nav{
	flex: 1 1 auto;
	text-align: right;
	
	padding: 1em;
}
.manager>.view{
	position: relative;
	flex: 1 1 auto;
	overflow-x: hidden;
}

.manager>.view>.schedule{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	padding-bottom: 3.2em;
	transition: left 0.5s ease-in-out;
}
.manager>.view.show-countdown>.schedule{
	left: -100%;
}
.manager>.view>.schedule>nav{
	position: fixed;
	bottom: 1em;
	right: 1em;
}
.manager>.view>.schedule>.schedule-list{}

.manager>.view>.countdown{
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%;
	height: 100%;
	transition: left 0.5s ease-in-out;
}
.manager>.view.show-countdown>.countdown{
	left: 0%;
}

.talk{
	display: grid;
	grid-template-columns: 9em 1fr 9em;
	column-gap: 0.4em;
	row-gap: 0.4em;
	grid-template-areas: "start date    duration"
						 ".     speaker speaker"
						 "end   title   title";
	/* 7.2em max 7.2em. Spacing 0.2em*/
	position: relative;
	margin: 1em;
	padding: 1em;
	padding-right: 9.6em;
	background: #282828;
	border-radius: 0.4em;
	border-left: 0.4em solid #666;
}
.talk .talk-start{
	grid-area: start;
}
.talk .talk-date{
	grid-area: date;
}
.talk .talk-end{
	grid-area: end;
	align-self: end;
}
.talk .talk-duration{
	grid-area: duration;
}
.talk .talk-speaker{
	grid-area: speaker;
}
.talk .talk-title{
	grid-area: title;
}

.talk .talk-countdownStart{
	display: none;
	position: absolute;
	bottom: 1em;
	right: 1em;
	height: 3em;
	width: 6em;
}
.talk .talk-navTop{
	display: none;
	position: absolute;
	top: 1em;
	right: 1em;
}
.talk .talk-navBottom{
	display: none;
	position: absolute;
	bottom: 1em;
	right: 1em;
}

.talk>div>input, .talk>div>textarea, .talk>div>var{
	display: inline-block;
	width: 100%;
	height: 2em;
	line-height: 1em;
	padding: 0.2em 0.4em;
	background: #333;
	border: 0 none;
	color: inherit;
	font-size: 1.2em;
	font-style: normal;
	font-family: "Ubuntu", sans-serif;
}
.talk>div>var{
	background: none;
}
.talk>div>textarea{
	height: 3.2em;
}
.talk>div>input:disabled, .talk>div>textarea:disabled{
	background: none;
}


.talk.passed{
	background: #383838;
	color: #666;
}
.talk.current{
	border-color: #168fdc;
}

.talk.selected{
	padding-top: 3.8em;
}
.talk.selected .talk-countdownStart{
	display: block;
}
.talk.selected .talk-navTop{
	display: block;
}

.talk.editing{
	padding-bottom: 3.8em;
}
.talk.editing .talk-countdownStart{
	display: none !important;
}
.talk.editing .talk-navTop{
	display: none !important;
}
.talk.editing .talk-navBottom{
	display: block;
}

.countdown>.countdown-timer{
	font-size: 25vw;
	font-weight: bold;
	text-align: center;
}
.countdown>.countdown-pausedMessage{
	display: none;
	text-align: center;
	font-size: 2em;
}
.countdown.paused>.countdown-pausedMessage{
	display: block;
}
.countdown.timer-conclusions{
	color: #FF0;
}
.countdown.timer-questions{
	color: #F60;
}
.countdown.timer-overtime{
	color: inherit;
	background: #900;
}