.ssm-page {
  margin-top: 20px;
  margin-bottom: 20px;
}

.ssm-page-large {
  margin: 30px auto;
  width: 90%;
}

.ssm-container {
  margin-left: 10px;
  margin-bottom: 20px;
}

.ssm-container a:link {
  color: white;
}

#infoMessage {
  background: #f7f7f7;
  padding: 10px;
  margin-bottom: 10px;
}

.invoice-user-info {
  margin: 20px 0px;
  font-weight: bold;
  background: #f7f7f7;
  padding: 10px;
}

.report-header-right {
  text-align: right;
}

.report-header-right .time-group {
  text-align: left;
}

.message {
  background: #ededed;
  padding: 14px;
  /* color: white; */
}

#locations thead a:link,
#invoices thead a:link,
#invoices thead a:visited,
#locations thead a:visited,
#trainings thead a:visited,
#trainings thead a:link {
  color: #495057;
  padding-right: 5px;
  font-size: 12px;
}

.sort-button {
  font-size: 12px;
}

@media (max-width: 1024px) {

  #invoices thead a:link,
  #invoices thead a:visited {
    font-size: 11px;
  }

  span.sort-button {
    font-size: 10px;
  }
}

.filter-box {
  border: solid 1px #e2e2e2;
  padding: 5px;
  min-height: 135px;
}

.filter-box h5 {
  font-size: 15px;
  padding: 5px;
  background: #dee2e6;
}

.error {
  color: red;
}

.form-error {
  color: red;
  margin: 10px 0px;
  padding: 10px;
  background: #f7f7f7;
}

.filter-date {
  background: #fcfcfc;
  margin-top: 10px;
}

.filter-date-header {
  text-align: center;
  font-size: 20px;
  background: #fcfcfc;
  font-weight: bold;
}

.status-inactive {
  background: #f7f7f7;
}

#invoices tr[data-active='false'] {
  font-style: italic;
  background: #fffedf;
}

#invoices[data-show_status="active"] tr[data-active='false'] {
  display: none;
}

#invoices[data-show_status="all"] tr[data-active='false'] {
  display: table-row;
}

#invoices[data-show_status="inactive"] tr[data-active='true'] {
  display: none;
}

#get-invoices {
  margin-bottom: 20px;
}




.vendor-location {
  margin: 10px;
  background: #f9f9f9;
  padding: 20px;
  border: solid 1px #fcfcfc;
  position: relative;
  height: 200px;
  border-radius: 5px;
}

.vendor-location a {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

/** skeleton **/
#skeleton {
  display: none;
}

#skeleton,
#skeleton>.row {
  margin-top: 20px;
}

.skeleton-box {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: #DDDBDD;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,
        rgba(#fff, 0) 0,
        rgba(#fff, 0.2) 20%,
        rgba(#fff, 0.5) 60%,
        rgba(#fff, 0));
    animation: shimmer 5s infinite;
    content: '';
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}