html,
body {
  background-color: #eee;
  color: #3d4b60;
  font-family: "Open Sans", Arial, sans-serif;
  margin: 0;
}

p {
  margin: 1em;
}

.container {
  max-width: 50em;
  padding: 2em 1.5em;
  margin: 0 auto;
}

/* List View */
.app-list {
  margin-top: 2rem;
}

.app-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 1.5em 4em 1.5em 1.5em;
  margin: 0 0 1em;
  border: none;
  border-radius: 1em;
  background-color: #fff;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 3px 5px rgba(0,0,0,.1);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color .3s ease,
    color .25s ease;
}
.app-item::after {
  content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='20' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M5 3l14 9-14 9V3z'></path></svg>");
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  margin: 1.75em;
  opacity: .25;
}
.app-item:hover {
  background-color: #4299e1;
  color: #fff;
}

.app-item .app-name,
.app-item .app-alias {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-item .app-alias {
  font-size: 1.25em;
  font-weight: 600;
  margin-right: .75em;
}

.app-item .app-name {
  opacity: .5;
}

/* Run View */
.form-output {
  height: 100vh;
}

.form-output .loading-spinner {
  display: flex;
  width: 100%;
  height: 100%;
}
.form-output .loading-spinner::before {
  margin: auto;
  font-size: 2em;
}

/* Loading State */
.loading-spinner {
  display: block;
}
.loading-spinner::before {
  content: '';
  display: block;
  font-size: 1.5em;
  width: 1em;
  height: 1em;
  border: .25em solid #ddd;
  border-top: .25em solid #222;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}