.c_1 b {
  color: #487e98;
}

.checkbox-container {
  display: block;
}

.flags {
  padding-top: 14px;
  padding-bottom: 14px;
}

@media(max-width: 767px) {
  .flags {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px !important;
  }
}

@media(max-width: 767px) {
  .checkbox label {
    vertical-align: sub;
    margin-left: 6px;
  }

  input[type=checkbox] {
    width: 20px;
    height: 20px;
    -moz-appearance: none;
  }

  .col-sm-6 {
    padding-left: 0 !important;
    /* Override Bootstrap's unresponsive 
        'padding-left: 15px' to line up elements better on mobile. */
  }

  .checkbox-toggle {
    cursor: pointer;
    user-select: none;
  }

  .checkbox-toggle::before {
    content: "";
    display: inline-block;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 16px solid #5bc0de;
    margin-right: 6px;
  }

  .open::before {
    border-bottom: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #5bc0de;
  }

  .checkbox-container {
    display: none;
  }
}

.row {
  margin-right: 0px;
  margin-left: 0px;
  /* Removes the uneven positioning of elements and makes them line up,
    gets rid of the extra scrollable space on the right on mobile */
}

@media(max-width: 350px) {
  .pager {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .pager li {
    margin-top: 8px;
  }

  /* Align the date navigator better on mobile width,
    when the buttons and the date swould normally unalign
    as a result of lack of horizontal space*/
}

.table-responsive>.fixed-column {
  position: absolute;
  background-color: #f9f9f9;
  white-space: nowrap;
  width: auto;
}

.table-responsive {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: visible;
}

@media() {
  .table-responsive>.fixed-column {
    display: none;
  }
}

.table {
  width: auto;
}

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

body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
  padding-top: 70px;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  background-color: #f5f5f5;
}

.btn_c_0 {
  background-color: Transparent;
  border: none;
}

.btn_c_1 {
  background-color: #d9edf7;
  color: #000000;
  border: none;
}

.btn_c_1:hover {
  background-color: #c4e3f3;
  color: #000000;
}

.btn_c_2 {
  background-color: #fcf8e3;
  color: #000000;
  border: none;
}

.btn_c_2:hover {
  background-color: #faf2cc;
  color: #000000;
}

.btn_c_3 {
  background-color: #dff0d8;
  color: #000000;
  border: none;
}

.btn_c_3:hover {
  background-color: #d0e9c6;
  color: #000000;
}

.btn_c_4 {
  background-color: #f2dede;
  color: #000000;
  border: none;
}

.btn_c_4:hover {
  background-color: #ebcccc;
  color: #000000;
}

.table>thead>tr>td.c_1,
.table>tbody>tr>td.c_1,
.table>tfoot>tr>td.c_1,
.table>thead>tr>th.c_1,
.table>tbody>tr>th.c_1,
.table>tfoot>tr>th.c_1,
.table>thead>tr.c_1>td,
.table>tbody>tr.c_1>td,
.table>tfoot>tr.c_1>td,
.table>thead>tr.c_1>th,
.table>tbody>tr.c_1>th,
.table>tfoot>tr.c_1>th {
  background-color: #d9edf7;
}

.table-hover>tbody>tr>td.c_1:hover,
.table-hover>tbody>tr>th.c_1:hover,
.table-hover>tbody>tr.c_1:hover>td,
.table-hover>tbody>tr.c_1:hover>th {
  background-color: #c4e3f3;
}

.table>thead>tr>td.c_2,
.table>tbody>tr>td.c_2,
.table>tfoot>tr>td.c_2,
.table>thead>tr>th.c_2,
.table>tbody>tr>th.c_2,
.table>tfoot>tr>th.c_2,
.table>thead>tr.c_2>td,
.table>tbody>tr.c_2>td,
.table>tfoot>tr.c_2>td,
.table>thead>tr.c_2>th,
.table>tbody>tr.c_2>th,
.table>tfoot>tr.c_2>th {
  background-color: #fcf8e3;
}

.table-hover>tbody>tr>td.c_2:hover,
.table-hover>tbody>tr>th.c_2:hover,
.table-hover>tbody>tr.c_2:hover>td,
.table-hover>tbody>tr.c_2:hover>th {
  background-color: #faf2cc;
}

.table>thead>tr>td.c_3,
.table>tbody>tr>td.c_3,
.table>tfoot>tr>td.c_3,
.table>thead>tr>th.c_3,
.table>tbody>tr>th.c_3,
.table>tfoot>tr>th.c_3,
.table>thead>tr.c_3>td,
.table>tbody>tr.c_3>td,
.table>tfoot>tr.c_3>td,
.table>thead>tr.c_3>th,
.table>tbody>tr.c_3>th,
.table>tfoot>tr.c_3>th {
  background-color: #dff0d8;
}

.table-hover>tbody>tr>td.c_3:hover,
.table-hover>tbody>tr>th.c_3:hover,
.table-hover>tbody>tr.c_3:hover>td,
.table-hover>tbody>tr.c_3:hover>th {
  background-color: #d0e9c6;
}

.table>thead>tr>td.c_4,
.table>tbody>tr>td.c_4,
.table>tfoot>tr>td.c_4,
.table>thead>tr>th.c_4,
.table>tbody>tr>th.c_4,
.table>tfoot>tr>th.c_4,
.table>thead>tr.c_4>td,
.table>tbody>tr.c_4>td,
.table>tfoot>tr.c_4>td,
.table>thead>tr.c_4>th,
.table>tbody>tr.c_4>th,
.table>tfoot>tr.c_4>th {
  background-color: #f2dede;
}

.table-hover>tbody>tr>td.c_4:hover,
.table-hover>tbody>tr>th.c_4:hover,
.table-hover>tbody>tr.c_4:hover>td,
.table-hover>tbody>tr.c_4:hover>th {
  background-color: #ebcccc;
}

.table>thead>tr>td.c_5,
.table>tbody>tr>td.c_5,
.table>tfoot>tr>td.c_5,
.table>thead>tr>th.c_5,
.table>tbody>tr>th.c_5,
.table>tfoot>tr>th.c_5,
.table>thead>tr.c_5>td,
.table>tbody>tr.c_5>td,
.table>tfoot>tr.c_5>td,
.table>thead>tr.c_5>th,
.table>tbody>tr.c_5>th,
.table>tfoot>tr.c_5>th {
  background-color: #E1885B;
}

.table-hover>tbody>tr>td.c_5:hover,
.table-hover>tbody>tr>th.c_5:hover,
.table-hover>tbody>tr.c_5:hover>td,
.table-hover>tbody>tr.c_5:hover>th {
  background-color: #61380B;
}

button {
  transition: opacity 0.25s;
  transition: scale 0.25s;
}

button.htmx-request {
  opacity: 0.25;
  /* Make the content of the button throb  */
  animation: throb 1s infinite;
}

@keyframes throb {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

.fade-in {
  opacity: 1;
  transition: opacity 0.25s ease-out;
}

.fade-in.htmx-added {
  opacity: 0;
}

.fade-in.htmx-swapping {
  opacity: 0;
}

/* Styles related to paying payment-items */

.grid-container {
  display: grid;
  grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
}

.grid-header {
  font-weight: bold;
}

.grid-item {
  align-self: center;
}

.payment-actions {
  display: flex;
  flex-direction: row-reverse;
  margin: auto;
  margin-top: 10px;
}

.payment-actions button {
  margin-right: 2rem;
}

/* Style for overstriking table rows */
tr.nullified {
  text-decoration: line-through;
  opacity: 0.33;
}

/* Fix for weird checkboxes in tables */
td.checkbox {
  display: table-cell;
}