/* ---------------------------------------------------------------------------------------------------------------------
 * FORMATTING
 */

body {
  padding: 20px;
  overflow-x: auto;
  overflow-y: scroll;
  font-family: Muli, sans-serif, "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
  font-size: 14px;
}

body.loading {
  display: none;
}

h1 {
  font-weight: bold;
}

p {
  font-size: 1.1em;
  line-height: 1.5;
}

strong {
  color: #2b8be7;
}

.form-label {
  font-size: .8em;
  margin: 0;
  padding: 0.6em;
  line-height: 1;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * LIST
 */

.list {
  padding-left: 1em;
}

.group {
  padding: 0 1em;
}

.group__title {

}

.group__items {
  padding: 10px 30px;
}

.group__items .item__info span:not(:first-child) {
  margin-left: -.3em;
}

.item {
  display: flex;
  margin-bottom: .5em;
  line-height: 22px;
  max-width: 800px;
}

.item__icon {
  width: 16px;
  height: 16px;
  margin: 4px 8px 0 0;
}


.item__link {
  color: #3b4351 !important;
}

.item__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item__title {
}

.item__info {
  font-size: .7em;
  line-height: 18px;
  color: #AAA;
}

.item__info span:first-child {
  border-right: 1px solid #DDD;
  padding-right: .5em;
  margin-right: .5em;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * TABLE
 */

.table td {
  white-space: nowrap;
}

.table td,
.table th {
  max-width: calc(50vw - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .3rem .4rem;
  border-bottom: none;
}

.table td > * {
  vertical-align: middle;
}

.table td > img {
  margin: 2px 4px 0 0;
}

#app[data-format="all"] .table td:first-child {
  text-align: right;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * OPTIONS
 */

.options {
  display: flex;
  margin: 20px 0;
}

.options > * {
  margin-right: 10px;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * TOAST
 */

.toast {
  position: fixed;
  top: 0;
  right: 0;
  margin: 20px;
  padding-left: 15px;
  width: auto;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .2);
  z-index: 10;
  white-space: nowrap;
  min-width: 300px;
}

.toast .btn {
  margin-left: 10px;
}

.toast > div {
  margin-right: 30px;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * PROMO
 */

.promo-container:after {
  position: fixed;
}

.promo-container.visible:after {
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, .85);
  content: ".";
}

.promo, .teaser {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 20px;
  width: 590px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .2);
  z-index: 5;
}

.card-body p:last-of-type{
  margin-bottom: .75rem;
}

.card-image {
  width: 100%;
  aspect-ratio: 144 / 90;
}

.teaser {
  width: 400px;
}

/* ---------------------------------------------------------------------------------------------------------------------
 * TRANSITIONS
 */

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
