/* Sticky footer styles
-------------------------------------------------- */

    html {
      position: relative;
      min-height: 100%;
    }

    body {
      /* Margin bottom by footer height */
      display: flex;
      flex-direction: column;
    }

    .footer {
      position: absolute;
      flex-shrink: 0;
      bottom: 0;
      width: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #f5f5f5;
    }


    /* Custom page CSS
-------------------------------------------------- */

    /* Not required for template or sticky footer method. */

    body>.container-fluid {
      padding: 75px 15px 15px;
      flex: 1 0 auto;
    }

    .container-fluid:not(:first-of-type) {
      padding-top: 0px;
    }

    .footer>.container {
      padding-right: 15px;
      padding-left: 15px;
    }

    code {
      font-size: 80%;
    }
    
    [v-cloak] {
      display: none;
    }

    .td-last {
      border-right: 1px solid #dee2e6;
    }

    .number {
      min-width: 2.2em;
      text-align: right;
    }

    .glyph-icon {
      width: 16px;
      height: 16px;
    }

    .progress {
      border-radius: 0px;
    }

    .card-columns {
      column-width: 425px;
      column-fill: balance;
    }

    .card {
      -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
    }

    .skill-columns {
      column-width: 200px;
      column-count: 2;
      column-fill: balance;
    }
    .skill-columns-thick {
      column-width: 200px;
      column-count: 1;
      column-fill: balance;
    }

    .ability-score {
      padding: .5em !important;
      border-radius: 0px;
    }

    .class-feature > .card-body > input,
    .class-feature > .card-body > .input-group > input,
    .class-feature > .card-body > .input-group > .input-group-append > button {
      border-color: transparent;
      border-radius: 0px;
    }

    .class-feature > .card-body > textarea {
      border-radius: 0px;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      top: -2px;
    }

    .card-form > .card-body > input,
    .card-form > .card-body > .input-group > input,
    .card-form > .card-body > .input-group > .input-group-prepend > span,
    .card-form > .card-body > textarea {
      border-color: transparent;
      border-radius: 0px;
    }

    .card-form > .card-body > input,
    .card-form > .card-body > textarea,
    .card-form > .card-body > .input-group> input {
      border-bottom-color: rgba(0,0,0,.125);
    }

    .card-form > .card-body > .input-group > input {
      border-left-color: rgba(0,0,0,.125);
    }

    .card-form > .card-body > input:last-child,
    .card-form > .card-body > textarea:last-child,
    .card-form > .card-body > .input-group:last-child > input {
      border-bottom-color: transparent;
    }

    .item > .card-body > input,
    .item > .card-body > .input-group > input,
    .item > .card-body > .input-group > .input-group-append > button {
      border-color: transparent;
      border-radius: 0px;
    }

    .item > .card-body > input {
      border-top-color: rgba(0,0,0,.125);
    }

    .item > .card-body > textarea {
      border-radius: 0px;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      top: -2px;
    }

    .class-abillities {
      column-width: 300px;
    }

    .class-stat-label {
      width: 3.75em;
    }

    .input-column-xs {
      min-width: 4em;
    }

    .input-column-sm {
      min-width: 8em;
    }

    .input-column-md {
      min-width: 12em;
    }

    .input-column-lg {
      width: 40%;
      min-width: 16em;
    }

    .input-column-xl {
      width: 50%;
      min-width: 24em;
    }

    .object {
      min-width: 12em;
    }

    /* \f142 is ellipsis-v */
    /* \202F is thin unbreakable space */
    .fas.fa-grip:before {
        content: "\f142 \f142";
        letter-spacing: 0.1em;
    }
    .fas.fa-grip-large:before {
      content: "\f142 \202F \f142 \202F \f142 \202F \f142 \202F \f142 \202F \f142 \202F \f142";
    }

    .fa-stack .cornered-lr {
      position: absolute;
      bottom: 0px !important;
      text-align: right;	
      line-height: 1em;
      text-shadow: 1px 1px 1px #000;
    }
    
    /* other corners available too */
    .fa-stack .cornered-ll {
      position: absolute;
      bottom: 0px !important;
      text-align: left;	
      line-height: 1em;
      text-shadow: 1px 1px 1px #000;
    }
    
    .fa-stack .cornered-tr {
      position: absolute;
      top: 0px !important;
      text-align: right;	
      line-height: 1em;
      text-shadow: 1px 1px 1px #000;
    }
    
    .fa-stack .cornered-tl {
      position: absolute;
      top: 0px !important;
      text-align: left;	
      line-height: 1em;
      text-shadow: 1px 1px 1px #000;
    }

    .play.card-header {
      padding-left: 10px;
    }

@media (max-width: 576px) {
  .list-group-column {
    border-bottom: 1px solid rgba(0,0,0,.125) !important;
    border-top: 1px solid rgba(0,0,0,.125) !important;
  }
  .skill-columns{
    column-count: 2;
  }
}

@media (min-width: 576px) {
  .card-columns {
    column-count: 1;
  }
  .skill-columns{
    column-count: 3;
  }
  .list-group-column {
    border-right: 1px solid rgba(0,0,0,.125) !important;
    border-left: 1px solid rgba(0,0,0,.125) !important;
  }
}

@media (min-width: 768px) {
  .card-columns {
    column-count: 1;
  }
  .skill-columns-thick{
    column-count: 2;
  }
}

@media (max-width: 991px){
    .collapse.show {
        overflow-y: auto;
        max-height: 85vh;
    }
}

@media (min-width: 992px) {
  .card-columns {
    column-count: 2;
  }
  .skill-columns {
    column-count: 4;
  }
  .skill-columns-thick{
    column-count: 3;
  }
}

@media (min-width: 1200px) {
  .card-columns {
    column-count: 3;
  }
  .skill-columns {
    column-count: 5;
  }
  .skill-columns-thick{
    column-count: 4;
  }
}

div#print {
  background-color: white;
}

div.print-page {
    position: relative;
}

div.print-row {
    page-break-inside: avoid !important;
    page-break-before: always !important;
}

div.pre {
  white-space: pre-line;
}

#avatar {
  max-width: 150px;
}

.flex-fill {
  flex: 1 !important;
}