#beaglert-console {
  background-color: white;
  box-sizing: border-box;
  font-family: inconsolata, monospace;
  font-size: 12px;
	height: 100%;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
  width: 100%;
}
#beaglert-consoleForm {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  border-top: 1px solid black;
	height: 21px;
}
#beaglert-consoleWrapper {
	overflow-x: auto;
  width: 100%;
}
#beaglert-consoleWrapper span {
	white-space: pre-wrap;
}
#beaglert-consoleWrapper > div {
  box-sizing: border-box;
	display: inline-block;
  position: relative;
  min-width: 100%;
}
.beaglert-console-log-in {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding: 4px 30px;
  text-indent: -1.65em;
}
.beaglert-console-shell::before {
	content: '#';
	color: inherit;
  margin: 0 14px;
  opacity: 0.6;
	padding-right: 0.65em;
}
.beaglert-console-shell {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgb(96, 96, 150);
	padding: 4px 30px;
  text-indent: -1.65em;
}
.beaglert-console-git::before {
  color: inherit;
	content: 'git:';
	margin: 0 7px;
  opacity: 0.6;
  padding-right: 0.65em;
}
.beaglert-console-git {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgb(96, 150, 96);
  padding: 4px 30px;
	text-indent: -1.65em;
}
.beaglert-console-make::before {
  color: inherit;
	content: 'make:';
  opacity: 0.6;
	padding-right: 0.65em;
}
.beaglert-console-make {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding: 4px 30px;
  text-indent: -1.65em;
}
.beaglert-console-bela::before {
  color: inherit;
	content: 'bela:';
  opacity: 0.6;
	padding-right: 0.65em;
}
.beaglert-console-bela {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgb(64, 100, 100);
  padding: 4px 30px;
	text-indent: -1.65em;
}
.beaglert-console-log {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding: 4px 30px;
}
.beaglert-console-warning::before {
  color: yellow;
	content: '!';
  margin: 0 14px;
	padding-right: 0.65em;
}
.beaglert-console-warning {
  background-color: rgba(255, 255, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 4px 30px;
	text-indent: -1.65em;
}
.beaglert-console-error::before {
  color: red;
	content: '!';
  margin: 0 14px;
	padding-right: 0.65em;
}
.beaglert-console-error {
  background-color: rgba(255, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 4px 30px;
	text-indent: -1.65em;
}

.beaglert-console-iwarning::before {
  color: red;
	content: '!';
  margin: 0 14px;
	padding-right: 0.65em;
}
.beaglert-console-iwarning {
  background-color: rgba(255, 255, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 4px 30px;
	text-indent: -1.65em;
}
.beaglert-console-ierror::before {
  color: red;
	content: '!';
  margin: 0 14px;
	padding-right: 0.65em;
}
.beaglert-console-ierror {
  background-color: rgba(255, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 4px 30px;
  position: relative;
	text-indent: -1.65em;
}
.beaglert-console-notify::before {
  color: green;
	content: 'i';
  margin: 0 14px;
	padding-right: 0.65em;
}
.beaglert-console-notify {
	text-indent: -1.65em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding: 4px 30px;
	background-color: rgba(0, 255, 0, 0.2);
	transition: background-color 1s ease-out, -webkit-transform 0.2s ease-out;
	transition: transform 0.2s ease-out, background-color 1s ease-out;
	transition: transform 0.2s ease-out, background-color 1s ease-out, -webkit-transform 0.2s ease-out;
}

.beaglert-console-ierror, .beaglert-console-iwarning, .beaglert-console-error{
	transition: -webkit-transform 0.1s ease-out;
	transition: transform 0.1s ease-out;
	transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}

.beaglert-console-ierror,
.beaglert-console-iwarning {
  > span {
    &.no-hover {
      &:hover {
        cursor: default;
        text-decoration: none;
      }
    }
    &:hover {
      cursor: pointer;
    	text-decoration: underline;
    }
  }
}

.beaglert-console-collapsed {
  transform: scaleY(0);
}

.beaglert-console-faded {
	background-color: rgba(255, 255, 255, 0.2);
}

.beaglert-console-rejectnotification {
	background-color: rgba(255, 0, 0, 0.2);
	cursor: pointer;
}
.beaglert-console-rejectnotification::before{
	content: '!';
	color: red;
	padding-right: 0.65em;
}

#beaglert-console-inputRight {
	display: table-cell;
	width: 100%;
}
#beaglert-console-inputLeft {
	display: table-cell;
}

#beaglert-consoleInput {
  background-color: inherit;
  border: inherit;
  color: inherit;
  font-family: inconsolata;
  height: 100%;
  padding: 5px 5px;
	position: relative;
  width: 100%;
}
#beaglert-consoleInput:focus {
  outline-width: 0;
}
#beaglert-consoleInput-pre {
	color: inherit;
  display: inline;
	font-family: inconsolata;
	// font-size: 0.8em;
  opacity: 0.2;
	padding: 5px;
	transition: opacity 0.3s;
  white-space: nowrap;
}

.clipboardButton {
  cursor: pointer;
  left: 35px;
  position: absolute;
  top: 4px;
  &::before {
    content: " ";
    background: url("../images/icons/copy.svg") 0 0 no-repeat;
    background-size: contain;
    left: 0;
    padding: 6px;
    position: absolute;
    top: 0;
  }
}

.copied {
  background: rgba(255, 255, 0, 0.2);
}
