/* default values start with dark theme */
:root {
	/* background property for the full page; not just color */
	--page-bg: #000;
	/* set the font for the whole page */
	--font-family: 'Consolas', monospace;
	/* color for echoed inputs */
	--cmd-text: #808000;
	/* page text color - default value here is to match expected ANSI-low-white client defaults */
	--text-color: #c0c0c0;
	/* defines the background for the log panes; also not just color */
	--log-bg: #000;
	/* colors for the input box */
	--input-text: #fff;
	--input-bg: #333;
	/* colors for highlighted elements */
	--hilight-text: #ffffff;
	--hilight-bg: #8700ff;
	/* other useful colors */
	--error-color: #900;
	--link-color: #482;
	--visited-color: #261;
	--hover-color: #482;

	--border-color: var(--text-color);
	--system-text: var(--error-color);
}
[data-theme="light"] {
}

[data-theme="dark"] {
}


/* page layout */
body {
	margin: 0;
	display: flex;
}

#center {
  margin-left: 1em;
  flex: 70vw;
}


/*
#prompt {
	text-align: left;
	height: 2em;
	padding: 1em 1em;
}
*/

#center-top {
    height: calc(100vh - 10em);
	padding: 0 1em;
/*	margin-bottom: 1.5em; */
}

#center-bottom {
	display: flex;
	flex-direction: column;
	padding: 0 1em;
	align-content: flex-end;
}


#input_box {
	height: 3em;
	width: 95%;
/*	margin: auto; */
/*  margin-left: 1em; */
    margin-bottom: 1em;
	background-color: var(--input-bg);
	color: var(--input-text);
	font-size: inherit;
	font-family: inherit;
	border: none;
	border-radius: 0.1em;
}

#input_box:focus {
  outline: 1px solid var(--border-color);
}



#toggles {
	height: 0;
	overflow-y: visible;
}
#popup_buttons {
	float: right;
}


/* class styling */

.invisible {
	display: none !important;
}

.chan-tab {
  border: 1px solid;
  border-radius: 0.5em;
  padding: .2em 1em;
  margin: .0 .5em;
	cursor: pointer;
}
.active-tab {
  background-color: var(--hilight-bg);
  color: var(--hilight-text);
}

.clickable {
	cursor: pointer;
}

.log {
	overflow-x: clip;
	overflow-y: auto;
	white-space: pre-wrap;
	height: inherit;
	position: relative;
	scrollbar-color: #333333 #111111;
}

.dl-button {
	cursor: pointer;
	position: sticky;
	top: 0;
	float: right;
	margin-right: 0.5rem;
}

.mxplink {
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
	color: inherit;
}

.system {
	color: var(--system-text);
	font-style: italic;
	padding-left: 1em;
}
/* this lets you set the prefix character for all echoed input lines */
.echo::before {
	color: var(--cmd-text);
	content: "> ";
}
.echo {
	color: var(--cmd-text);
}


.keybind_button {
	border-radius: 0.3em;
	border: 1px solid var(--border-color);
	margin: 0.2em;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}



/* element styling */
body {
	color: var(--text-color);
	background: var(--page-bg);
	font-family: var(--font-family);
}

a {
	color: var(--link-color);
}
a:visited {
	color: var(--visited-color);
}
a:hover {
	color: var(--hover-color);
}




/*** responsive/mobile layout handling will go down here ***/