@media screen and (min-width: 575px) {
  /*mode desktop*/
}

@media screen and (max-width: 575px) {
  /* mode telephone */
  #lg-tool-bar-title {
    display: none;
  }
  .q-dialog .q-card,
  .no-padding-md {
    padding: 0px !important;
  }
  tr.no-padding-md td {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .alert-panel {
    width: 100vw;
  }
}
/* typography */

body {
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
}

.bg-green-vito {
  background-color: rgb(0, 121, 192) !important;
}

.bg-green-vito-light,
.striped tr:nth-child(even) {
  background-color: rgb(204, 224, 223) !important;
}

.bg-red-vito {
  background-color: rgb(220, 30, 20) !important;
}

.text-green-vito,
.vito-link,
.vito-link:visited {
  color: rgb(0, 121, 192) !important;
}

.text-green-vito-light {
  color: rgb(0, 121, 192, 0.8) !important;
}
.text-red-vito {
  color: rgb(220, 30, 20) !important;
}
.border-vito {
  border: solid 1px rgba(0, 109, 102, 0.2);
}
.border-transparent {
  border: solid 1px rgba(0, 0, 0, 0);
}

.filepond--credits {
  color: white !important;
}

.alert-panel {
  min-width: 300px;
}
/* layouts */

#top-banner {
  height: 120px !important;
}
#clear-layout {
  background: linear-gradient(
    to right,
    white 0%,
    white 50%,
    #000000 50%,
    #757575 50%,
    #757575 100%
  );
}

.locker-empty {
  background-image: url("/img/locker_empty.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.locker-full {
  background-image: url("/img/locker_full.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.locker-returnable img {
  transform: rotate(0.5turn);
}

/* tables */

.xstriped tr:nth-child(even) {
  background-color: rgb(200, 218, 207) !important;
}
.sticky-header-t able {
  max-height: calc(100vh - 230px);
}

.sticky-header-table.size-md {
  max-height: calc(100vh - 440px);
}

.sticky-header-table.size-lg {
  max-height: calc(100vh - 300px);
}

.sticky-header-table thead tr th {
  position: sticky;
  z-index: 1;
  background-color: rgb(204, 224, 223);
}
.sticky-header-table thead tr:first-child th {
  top: 0;
}

/* highlight values */
.highlight-values span {
  background-color: #e0e0e0;
  text-transform: uppercase;
  padding: 6px;
  border-radius: 4px;
}
.highlight span {
  background-color: #e0e0e0;
  padding: 6px;
  border-radius: 4px;
}
.highlight-values td:first-child {
  width: 140px;
}