main {
	display: flex;
}

.log-section {
	height: auto;
	width: 400px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	margin-left: 20px;
}

.screen {
	display: inline-block;
	cursor: pointer;
}

.screen-buttons {
	display: flex;
	justify-content: space-around;
	margin-top: 5px;
	gap: 10px;
}

.screen-buttons button {
	font-size: 1.1rem;
	padding: 10px 20px;
	width: 100%;
	cursor: pointer;
	background-color: transparent;
}

.screen-buttons button:hover {
	background-color: aqua;
}

#clicks-log {
	font-family:
	Menlo,
	Consolas,
	Monaco,
	Liberation Mono,
	Lucida Console,
	monospace;
}

.tab {
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}
.tabcontent.active {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}
html,
body,
main {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}
main {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
#logs-tab {
	overflow: auto;
	text-wrap: wrap;
}
.screen-section {
	display: flex;
	flex-direction: column;
}
.screen-section #screen,
.screen-section.screen_buttons {
	flex-grow: 0;
}
#screen {
	user-select: none;
}
.tab-section {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
#resp {
	display: none;
}
#upload_form {
	display: flex;
	flex-direction: column;
}
#upload_form button,
#upload_form label {
	border: 2px solid #ccc;
	background-color: #f1f1f1;
	cursor: pointer;
	padding: 3px 10px;
	transition: 0.3s;
}
#upload_form button:hover,
#upload_form label:hover {
	background-color: #ddd;
}
#notifications {
	width: 40%;
	margin-left: 60%;
	position: absolute;
}

.notification {
	border-radius: 5px;
	border-width: 2px;
	border-style: solid;
	padding: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.notification_ok {
	background-color: #66ff99;
	border-color: #369648;
}

.notification_err {
	background-color: #ff5c33;
	border-color: #a23915;
}

#logs {
	display: flex;
	flex-direction: row;
}