:root {
  --font-size: 12px;
  --line-height: 15px;
  --font-family: monospace;
  --box-padding: 1.5% 2.5% 2.5% 2%;
}

body {
  background-color: #161616;
}

textarea {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-family);
  color: white;
  background: 0 0;
  border: 0;
  padding: var(--box-padding);
  width: 100%;
  height: 99vh;
  outline: none;
  resize: none;
}

#codeBox {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-family);
  background: 0 0 !important;
  margin: 0;
  padding: var(--box-padding);
  width: 100%;
  height: 100vh;
  display: flex;
}

.codeLines {
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-family);
  text-align: right;
  left: 0;
  color: #787878;
  width: 2%;
  padding-right: 30px;
  user-select: none;
}

.side-panel {
  background-color: #383838;
  bottom: 0;
  right: 0;
  position: fixed;
  padding: 8px;
  -webkit-animation-name: "slide-in";
  -moz-animation-name: "slide-in";
  -o-animation-name: "slide-in";
  animation-name: "slide-in";
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.collapse-button {
  margin: -8px -8px 8px;
  height: 10px;
  background-color: gray;
}

.buttons {
  display: inline-grid;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.collapsed {
  -webkit-animation-name: "slide-out";
  -moz-animation-name: "slide-out";
  -o-animation-name: "slide-out";
  animation-name: "slide-out";
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

@keyframes slide-in {
  from {
    -webkit-transform: translateY(95%);
    -ms-transform: translateY(95%);
    transform: translateY(95%);
  }
}

@keyframes slide-out {
  to {
    -webkit-transform: translateY(95%);
    -ms-transform: translateY(95%);
    transform: translateY(95%);
  }
}

.buttons > p {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
}

.invisible {
  display: none !important;
}

i.material-icons {
  font-size: 2.5rem;
}

i.material-icons:hover {
  color: #333333;
}

a {
  text-decoration: none;
  color: inherit;
}

/* TextBar */

.textBar {
  display: flex;
  visibility: hidden;
  text-align: center;
  background-color: black;
  color: white;
  font-family: var(--font-family);
  border-radius: 5px;
  padding: 0.4% 0.5% 0.4% 0.9%;
  position: fixed;
  bottom: 5%;
  left: 5%;
}

.textBar > i.material-icons {
  height: 20%;
  right: 0;
  top: 0;
  font-size: 0.9rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.textBar.show {
  visibility: visible;
  animation: fadeIn 0.5s;
  -webkit-animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from {
    bottom: 0;
  }
  to {
    bottom: 5%;
  }
}

@-webkit-keyframes fadeIn {
  from {
    bottom: 0;
  }
  to {
    bottom: 5%;
  }
}

/* Materialize */

.input-field input:focus + label {
  color: #9e9e9e !important;
}

.input-field input:focus {
  border-bottom: 1px solid #9e9e9e !important;
  box-shadow: 0 1px 0 0 #9e9e9e !important;
}

input {
  color: #e0e0e0 !important;
}