body {
  font: 16px sans-serif;
  margin: 20px;
}
button {
  border-radius: 5px;
  background: white;
  color: black;
  border: none;
  padding: 8px 15px;
  margin: 0 5px;
  box-shadow: inset 0 0 0 1px black;
  outline: none;
}
.container {
  padding: 2rem;
}
#create {
  box-shadow: none;
  background: #18A0FB;
  color: white;
}
input {
  border: none;
  outline: none;
  /* padding: 0; */
  width: 100%;
  font-size: 16px;
  padding: 8px;
  /* padding: 8px 0; */
}

.header {
  text-align: center;
}
.textList {
  display: flex;
  flex-direction: column;
}
.textItem {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
}
input:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
input:focus { box-shadow: inset 0 0 0 2px #18A0FB; }

/* Preview App */
.preview-app {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.preview-connection-info {
  display: flex;
  align-self: center;
  margin-bottom: 16px;
}
.preview-plugin-wrapper {
  position: relative;
  height: 450px;
  width: 340px;
  border: 1px solid black;
}
.select-warning {
  text-align: center;
  color: #4a4848;
}
.preview-connection-status {
  border-radius: 50px/50px;
  background-color: #f00;
  width: 12px;
  height: 12px;
  margin-left: 8px;
}
.status-green {
  background-color: lawngreen;
}