body {
	font-family: system-ui;
	margin: 0;
}

.tabs {
	display: flex;
	background-color: #d3e3fd;
	height: 40px;
	border-radius: 10px 10px 0px 0px;
	/* https://www.w3schools.com/css/css_overflow.asp */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.tab {
	display: flex;
	border-radius: 10px 10px 0px 0px;
	text-align: left;
	padding-left: 10px;
	padding-right: 5px;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex */
	flex: 1 1 150px;
	max-width: 150px;
	min-width: 72px;
	padding-bottom: 5px;
	margin-top: 5px;
	align-items: center;
	justify-content: space-between;
	cursor: default;
	overflow: hidden;
}

.tab:not(.active):hover {
	background-color: #a8c7fa;
}

.active {
	background-color: white;
}

.tab-close {
	width: 20px;
	height: 20px;
	text-align: center;
	vertical-align: middle;
	/* https://www.w3schools.com/cssref/css3_pr_flex-shrink.php */
	flex-shrink: 0;
	user-select: none;
}

.tab-close:hover {
	border-radius: 50%;
	background-color: #eeeeeebf;
	opacity: 75%;
}

.tab-title {
	user-select: none;
	min-width: 0;
	overflow: hidden;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/white-space */
	white-space: nowrap;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-overflow */
	text-overflow: ellipsis;
}

#new-tab {
	align-self: center;
	padding: 10px;
	margin: 10px;
	/* https://www.w3schools.com/cssref/css3_pr_flex-shrink.php */
	flex-shrink: 0;
	user-select: none;
}

#new-tab:hover {
	border-radius: 50%;
	background-color: #a8c7fa;
}

.search {
	display: flex;
	height: 50px;
	align-items: center;
	border-bottom: 1px solid gray;
}

#search-bar {
	border-radius: 10px;
	margin: 2px;
	width: 90%;
	height: 35px;
	padding-left: 10px;
	color: black;
	font-size: 16px;
}

.symbol {
	font-size: 30px;
	margin: 4px;
	width: 35px;
	height: 35px;
	text-align: center;
	vertical-align: middle;
	cursor: default;
	user-select: none;
}

.symbol:hover {
	border-radius: 50%;
	background-color: #f2f2f2;
}

.footer {
	display: none;
}

@media screen and (max-width: 480px) {
	/* https://www.w3schools.com/css/css_grid.asp */
	.tabs {
		display: none;
		/* display: grid; */
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
		background-color: white;
		z-index: 10;
		justify-items: center;
		height: 100dvh;
		background-color: gray;
		grid-auto-rows: max-content;

		position: fixed;
		top: 0;
		left: 0;

		overflow-y: auto;
		padding-bottom: 50px;
	}

	.tab {
		height: 200px;
		z-index: 11;
		align-items: flex-start;
		background-color: white;
		/* padding: 20px; */
		width: 200px;
		border-color: white;
		border-style: solid;
		border-width: 5px;
		border-radius: 15px;
		user-select: none;
	}

	.active {
		border-color: #325dd2;
		border-style: solid;
		border-width: 5px;
		border-radius: 15px;
	}

	#refresh,
	#undo,
	#redo,
	#new-tab {
		display: none;
	}

	#search-bar {
		width: 100%;
	}

	.arrow-container {
		display: flex;
	}

	.footer {
		display: flex;
		justify-content: space-between;

		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 20;
		background-color: white;
	}
}

#view-container {
	/* https://www.w3schools.com/cssref/func_calc.php */
	height: calc(100dvh - 50px - 43px);
	/* height: 1000px; */
	overflow: hidden;
}

.view-current {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.hide {
	display: none;
}