/* some style */
body {
  background-color: #f4f4f4;
  font-family: monospace;
  font-size: 13px;
}

#app-body {
  margin: 1em auto;
  max-width: 1000px;
}

#page-title {
  padding: 1.5em;
  background-color: #685454;
  color: #ffe6c8;
  text-align: center;
}

/* New topic form */

#new-topic-form {
  margin-bottom: 1em;
}

#new-topic-form button {
  margin-top: 1em;
}

#new-topic-error-message {
  margin-left: 1em;
  color: red;
  font-size: .9em;
}

/* Table */

#topics-table {
  width: 100%;
}

#topics-table th {
  text-align: center;
}

#topics-table td {
  text-align: center;
}

#topics-table td {
  padding: 0.6em 0;
}

#topics-table button {
  font-size: 0.8em;
  margin: 0 0.1vw;
}

/* Columns */

#topics-table .title-column {
  max-width: 16vw;
}

#topics-tabble .review-count-column {
  max-width: 10px;
}

#topics-table tr.pending {
  background-color: #ffe6c8;
}

#import-section {
  display: flex;
  margin-bottom: 1.5em;
}

#import-section button {
  margin: 0 0.2em;
}


.button-success {
  background: rgb(255, 230, 200); /* this is a green */
  color: black;
  border: 0.5px solid #685454;
}

.button-danger {
  background-color: rgb(217, 87, 87); /* red */
  color: white;
  border: 0.5px solid black;
}

.button-secondary {
  background: rgb(71, 157, 184); /* this is a light blue */
  color: white;
  border: 0.5px solid black;
}