table.v-table thead th .fas,
table.v-table thead th .far,
table.v-table thead th .fal,
table.v-table thead th .fad,
table.v-table thead th .fab,
table.v-table thead th .fa {
  font-size: 14px;
}

.v-toolbar__content {
  padding: 0 12px !important;
}

.v-datatable__progress > th {
  padding: 0 !important;
}

.cosmic_table .cosmic_table_header_icon {
  font-size: 28px !important;
  text-align: center;
  width: 35px;
}

.cosmic_table .cosmic_table_title {
  margin-left: 10px !important;
}

.cosmic_table .cosmic_filter_table {
  width: 400px;
  max-width: 400px;
}

.cosmic_table .cosmic_sort_arrow {
  transition: all 0.3s ease-in;
}

.cosmic_table table thead tr {
  height: 30px;
}

.cosmic_table table thead th.column span {
  font-size: 1.1em;
}

.cosmic_table table tbody tr.cosmic_table_row {
  height: 40px;
}

.cosmic_table table tbody tr.cosmic_table_row td {
  background-color: #fff;
}

.cosmic_table table tbody tr.cosmic_table_row.selectable_row td:hover {
  cursor: pointer;
}

.cosmic_table table tbody tr.cosmic_table_row.selectable_row.disabled td:hover {
  cursor: default;
}

.cosmic_table table tbody tr td .block_of_text {
  font-size: 16px !important;
  line-height: 1.25em !important;
}

.cosmic_table table tr.cosmic_table_row td p {
  line-height: 1.25em !important;
  margin: 0.5rem 0;
}

/* Shortening the vuetify padding by half */
.cosmic_table table tbody tr:not(.v-datatable__expand-row) td,
.cosmic_table table thead th {
  padding: 0 12px !important;
}

/* Dense table rows */
.cosmic_table .dense_rows table tbody tr:not(.v-datatable__expand-row) td,
.cosmic_table .dense_rows table thead th {
  padding: 0 12px !important;
}

/* This is the "footer" of the table */
.cosmic_table .v-datatable--select-all,
.cosmic_table .v-datatable__actions,
.cosmic_table .v-datatable__actions__select {
  height: 45px !important;
}

.cosmic_table .dense_rows table.v-table tbody td:not(.cosmic_select),
.cosmic_table .dense_rows table.v-table tbody th {
  height: 36px !important;
}

/* This is needed bc the way vuetify expandable table is built. the expanded row is actually a real row
in the table that is shown on click of the "real" row */
.cosmic_table table > tbody > tr:nth-child(odd) td {
  background-color: var(--cosmic-grey-lighten-3);
}

.sticky thead tr > th:first-of-type {
  position: sticky;
  z-index: 2;
  left: 0;
  top: 0;
  background-color: #fff;

  &:before {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.12);
  }
}

.sticky tbody tr > td:first-of-type {
  position: sticky;
  z-index: 2;
  left: 0;
}

.sticky tbody tr > td:first-of-type:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.12);
}