html,
body {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Needed to force correct emoji representation */
span {
	font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}



/**************/
/*** HEADER ***/
/**************/

#header {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0em 1em;
	gap: 1em;
	box-shadow: 0 0 10px rgba(0, 0, 0, 1);
	z-index: 1;
}

#header-end {
	margin-left: auto;
	align-items: center;
	display: flex;
	flex-direction: row;
}



/*********************/
/*** PAGE CONTENTS ***/
/*********************/

#content {
	flex: 1;
	overflow: auto;
}



/********************************/
/*** STREAMER.BOT CONNECT BOX ***/
/********************************/

#sb-required-actions-dialog {
	max-width: 80%;
	max-height: 80%;
	overflow: auto;
	display: none;
}

#sb-connect-dialog {
	max-width: 90%;
	/* never wider than 90% of viewport */
	width: 90%;
	/* scale with window */
	max-height: 90vh;
	/* never taller than 90% of viewport */
	overflow-y: auto;
	/* vertical scroll if content overflows */
	overflow-x: hidden;
	/* prevent horizontal scroll */
	box-sizing: border-box;
	/* include padding in width/height */
}

#sb-connect-dialog {
	width: 90%;
	max-width: 30em;
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1em;
}

#sb-connect-dialog>div:nth-of-type(2) {
	display: flex;
	gap: 1em;
}

#sb-connect-dialog .field {
	flex: 1;
	min-width: 0;
}

#sb-connect-button:enabled:hover {
	background-color: #3be477;
}

#sb-error-label {
	background: var(--error-background);
	border-radius: 0.5em;
	padding: 1em;
	color: var(--error-color);
	display: none;
}



/******************************************/
/*** STREAMER.BOT REQUIRED ACTIONS LIST ***/
/******************************************/

.sb-required-action {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
}

.sb-required-action-found {
	margin-left: auto;
}

#sb-import-code {
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	font-family: monospace;
	font-size: 1em;
	padding: 0.5em;
}

#sb-import-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5em;
	max-width: 30em;
}

#sb-import-copy-button {
	width: auto;
}