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



/**************/
/*** 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: 30em;
	display: none;
}

#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;
}

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

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

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