body {
  background: #FFE873;
  font-family: Arial;
}

h1 {
  font-family: Corbel;
  text-align: center;
}

#buttons, #preview {
  width: 38vw;
  border: 3px solid black;
  color: black;
}

#buttons {
  background: LightBlue;
  padding: 10px;  
}

#preview {
  height: 70vh;
  border-radius: 7px;
  background: rgb(150, 150, 150);
}

#textbox {
  position: fixed;
  padding-left: 5vw;
  background-color: transparent;
}

table {
  margin: auto;
}

td {
  vertical-align: top;
}

#empty {
  width: 45vw;
}

/* buttons */

.btn {
  padding: 14px 12px;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
}

.btn-module {
  background: #FFE873;
}

.btn-success, .btn-date {
  background: #5cb85c;
  border-color: green;
}

.btn-success:hover {
  background: #449d44;
  border-color: #398439;
}

.btn-data {
  background: #646464;
}

.btn-primary {
  background: #5c5cb8;
  border-color: rgb(70, 30, 255);
}

.btn-primary:hover {
  background: #204d74;
  border-color: #2E6DA3;
}

.btn-column {
  background: orange;
  border-color: darkOrange;
}

.btn-column:hover {
  background: darkOrange;
  border-color: chocolate;
}

.hide {
  display: none;
}

select {
  padding: 13px 12px;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
}

input {
  padding: 2px 3px;
  margin-left: 6px;
  margin-bottom: 6px;
}

input:not([type:"button"]) {
  border-color: black;
}