:root {
	--bg-color: white;	
}

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

html, body {
	height: 100vh;
	background: var(--bg-color);
}

#timeline {
	height: 100%;
	width: 100%;
	flex: 1;
}

#timeline .vis-timeline {
	border: 0;
}

#panel {
	padding: 10px 5px;
}

#panel form > * {
	display: inline-block;
}

#panel .from-to select {
	min-width: 250px;
}

input[type=text], input[type=select], input[type=date], select, button, .select2-container--default .select2-selection--single {
	cursor: pointer;
	padding: 6px;
	border: 1px solid #dcdee2;
	border-radius: 4px;
	background-color: var(--bg-color);
	outline: 0;
	box-sizing: border-box;
	transition: background-color .2s;
	height: auto;
	min-height: 2rem;
}

button.primary {
	background-color: rgb(174, 210, 248);
	border-color: rgb(137, 185, 233);
}

.vis-item {
	background-color: #EEE;
	border-color: #CCC;
}

.vis-item.vis-selected {
	filter: contrast(1.2) brightness(1.1) saturate(1.2);
}

.vis-item:not(.vis-selected) {
	
}


.vis-item-content {
	padding: 2px;
	width: 100%;
}

.item {
    display: flex;
}

.item-left, .item-right {
    opacity: .8;
}

.item .item-center {
    flex-grow: 1;
    text-align: center;
	font-size: .9em;
}

.vis-item {
    border-color: transparent;
}

.item.warning {
	opacity: .6
}

.group .group-label {
	margin-right: 10px;
}

.vis-tooltip .warning {
	color: #e09200
}

#expand-btn {
	display: none;
}

.badge {
	font-size: .7rem;
	padding: .2rem;
	background: gray;
	color: white;
	border-radius: 3px;
	font-family: monospace;
	line-height: .7;
	margin-left: .1rem;
}

.badge:first-child {
	margin-left: .3rem;
}



@keyframes breathing {
	0% {
	  opacity: 0.1;
	}
  
	50% {
	  opacity: 1;
	}
  
	100% {
	  opacity: 0.1;
	}
  }

.breathing {
	animation: breathing 2s ease-in-out infinite normal;
}

@media (orientation:portrait) {
	#timeline {
		--group-bar-width: 150px;
		position: relative;
	}

	#timeline .vis-timeline {
		transition: margin-left .2s ease;
		width: calc(100vw + var(--group-bar-width));
		margin-left: calc(-1 * var(--group-bar-width));
	}

	#timeline.expanded .vis-timeline {
		margin-left: 0;
	}

	#expand-btn {
		display: unset;
		position: absolute;
		padding: 2px 5px;
		top: 20px;
		left: -2px;
		transition: margin-left .2s ease;
		z-index: 1000;
	}

	#timeline .vis-panel {
		
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: rgb(245, 245, 245)
	}
	html {
		filter: invert(1) hue-rotate(180deg)
	}

	.vis-item {
		filter: invert(1) hue-rotate(-180deg)
	}
}