
.simple-console {
	display: flex;
	flex: 1;
	flex-direction: column;
	font-family: sans-serif;
}

.simple-console-output {
	overflow: auto;
}

.simple-console-output,
.simple-console-input-wrapper {
	flex: 0;
	flex-basis: auto;
}
.simple-console-input-wrapper {
	display: flex;
	flex-shrink: 0;
}
.simple-console-input {
	flex: 1;
	font: inherit;
	line-height: normal !important; /* forced by Firefox, so let's make it a consistent constraint */
	height: 1em;
	color: inherit;
	background: transparent;
	border: 0;
	box-shadow: 0 1px 0 transparent;
}
.simple-console-input:focus {
	outline: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.simple-console-input-wrapper button {
	margin-left: 0.2rem;
	background: transparent;
	color: inherit;
	border: 0;
	padding: 0;
	font-size: 1em;
	cursor: pointer;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.simple-console-input-wrapper button svg {
	width: 1em;
	height: 1em;
	pointer-events: none;
}
.simple-console-input-wrapper button {
	outline: 0;
}
.simple-console-input-wrapper button:hover,
.simple-console-input-wrapper button:focus {
	color: #4078c0;
}
.dark .simple-console-input-wrapper button:hover,
.dark .simple-console-input-wrapper button:focus {
	color: #007CFF;
}
.simple-console-input-wrapper button:active {
	opacity: 0.8;
}
.simple-console-input-wrapper .popup-menu {
	position: absolute;
	right: 0;
	margin: 0.5em;
	margin-top: 1.5em;
	border: 1px solid rgba(128, 128, 128, 0.5);
	border-radius: 0.2em;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	cursor: default;
}
@media (max-width: 52em) {
	.simple-console-input-wrapper .popup-menu {
		min-width: 0;
		left: 0;
	}
}
.popup-menu[aria-hidden="true"] {
	display: none;
}
.popup-menu .menu-item:first-child {
	border-top-left-radius: 0.2em;
	border-top-right-radius: 0.2em;
}
.popup-menu .menu-item:last-child {
	border-bottom-left-radius: 0.2em;
	border-bottom-right-radius: 0.2em;
}
.menu-divider {
	border: 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.5);
	margin: 0.3em 0;
}
.popup-menu .menu-item {
	padding: 0.25rem 0.5rem;
}
.popup-menu .menu-item:hover {
	background: rgba(128, 128, 128, 0.1);
}
.popup-menu .menu-item:focus,
.popup-menu .menu-item:active {
	background: #4078c0;
	color: white;
	outline: 0;
}
.simple-console-input-wrapper,
.entry {
	padding: 0.25rem 0.5rem;
	padding-left: 1rem; /* = A */
	position: relative;
}
.input-chevron {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1rem; /* = A */
	display: flex;
	align-items: center;
	justify-content: center;
}
.entry.input {
	color: gray;
}
.error {
	color: #A00;
	background: #FFF5F5;
}
.dark .error {
	color: #A00;
	background: rgba(255, 0, 0, 0.15);
}
.warning {
	color: #8a6300;
	background: rgba(255, 230, 0, 0.24);
}
.dark .warning {
	color: #ffdc46;
	background: rgba(255, 171, 0, 0.2);
}
.info {
	color: rgb(0, 89, 148);
	background: rgba(0, 136, 255, 0.17);
}
.dark .info {
	color: rgb(98, 155, 193);
	background: rgba(0, 136, 255, 0.17);
}
.success {
	color: rgb(77, 148, 0);
	background: rgba(96, 226, 90, 0.17);
}
.dark .success {
	color: rgb(138, 212, 58);
	background: rgba(11, 255, 0, 0.17);
}


.light,
.light .popup-menu {
	background: white;
	color: black;
}
.dark,
.dark .popup-menu {
	background: black;
	color: white;
}

.dark .simple-console-input:focus {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dark ::-webkit-input-placeholder {
	color: #555;
}

.dark :-moz-placeholder { /* Firefox 18- */
	color: #555;
}

.dark ::-moz-placeholder { /* Firefox 19+ */
	color: #555;
}

.dark :-ms-input-placeholder {
	color: #555;
}
