:root {
  --color-black: #000;
  --color-white: #fff;
  --color-primary: #2351bb;
  --color-primary-shade-A: #001a83;
  --color-primary-font-contrast: #dee4ff;
  --color-cancel: #4f4f4f;
  --color-cancel-shade-A: #3b3b3b;
  --color-cancel-font-contrast: #dee4ff;
  --color-bg: #fff;
  --color-bg-shade-A: #eee;
  --color-bg-shade-B: #ddd;
  /* Fonts */
  --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-bold: 700;
  --font-semi-bold: 600;
  --font-normal: 400;
  --font-size-large: 16px;
  --font-size-default: 14px;
  --font-size-small: 12px;
  /* Z Index */
  --zIndex-loading: 1000;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-default);
  font-size: var(--font-size-default);
  font-weight: var(--font-normal);
  background-color: var(--color-bg);
  color: var(--color-black);
}

button {
  font-family: var(--font-family-default);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin: 0;
}

[v-cloak] {
  display: none;
}

.p-rel {
  position: relative;
}

.p-abs {
  position: absolute;
}

.f-right {
  float: right;
}

.ta-center.ta-center.ta-center {
  text-align: center;
}

.ta-right.ta-right.ta-right {
  text-align: right;
}

.d-block.d-block.d-block {
  display: block;
}

.d-inline-block.d-inline-block.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: flex;
}

.flex-0 {
  flex: 0;
}

.flex-1 {
  flex: 1;
}

.gap-10 {
  gap: 10px;
}

.margin-l-5.margin-l-5.margin-l-5 {
  margin-left: 5px;
}

.margin-r-5.margin-r-5.margin-r-5 {
  margin-right: 5px;
}

.margin-l-10.margin-l-10.margin-l-10 {
  margin-left: 10px;
}

.margin-r-10.margin-r-10.margin-r-10 {
  margin-right: 10px;
}

.margin-10.margin-10.margin-10 {
  margin: 10px;
}

.margin-t-10.margin-t-10.margin-t-10 {
  margin-top: 10px;
}

.margin-b-10.margin-b-10.margin-b-10 {
  margin-bottom: 10px;
}

.margin-tb-10.margin-tb-10.margin-tb-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin-t-20.margin-t-20.margin-t-20 {
  margin-top: 20px;
}

.margin-b-20.margin-b-20.margin-b-20 {
  margin-bottom: 20px;
}

.margin-tb-20.margin-tb-20.margin-tb-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.width-auto.width-auto.width-auto {
  width: auto;
}

.fs-lg.fs-lg {
  font-size: var(--font-size-large);
}

.fs-sm.fs-sm {
  font-size: var(--font-size-small);
}

hr {
  border: 0 solid var(--color-primary);
  border-top-width: 2px;
  margin: 10px 0;
  height: 0;
}

table, tr, th, td {
  border-collapse: collapse;
}

th, td {
  border-style: solid;
  border-width: 0 1px 0 1px;
}

th:first-child, td:first-child {
  border-left-width: 0;
}

td:last-child, th:last-child {
  border-right-width: 0;
}

thead th {
  background-color: var(--color-primary);
  background: linear-gradient(0deg, var(--color-primary) 0%, var(--color-primary-shade-A) 100%);
  border-color: var(--color-primary-font-contrast);
  color: var(--color-primary-font-contrast);
  font-weight: var(--font-semi-bold);
  padding: 10px 15px;
}
thead input[type=search] {
  display: block;
  margin-top: 5px;
  width: 100%;
}

tr > td {
  border-color: var(--color-primary);
  background-color: var(--color-bg-shade-A);
  padding: 2px 5px;
  border-bottom-width: 1px;
}

@media (max-width: 600px) {
  tr > td {
    padding: 0 2px;
  }
}
tr:nth-child(2n) > td {
  background-color: var(--color-bg-shade-B);
}

table.table-fixed {
  table-layout: fixed;
}

table.table-full {
  width: 100%;
}

table.table-clickable-cells {
  height: 1px;
}
table.table-clickable-cells td, table.table-clickable-cells td > span.editable {
  height: 100%;
}
table.table-clickable-cells td > span.editable {
  display: block;
}
table.table-clickable-cells td > input.editable {
  border: none;
  height: 100%;
  width: 100%;
  width: calc(100% + 10px);
  padding: 2px 5px;
  margin: -2px -5px;
  background: transparent;
  font: inherit;
}

div.confirmOverlay {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  padding: 5px;
}

div.overlay {
  z-index: var(--zIndex-loading);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: grid;
}
div.overlay > * {
  align-self: center;
  text-align: center;
}

button.icon {
  border: none;
  background: none;
}

button.icon:focus,
button.icon:hover {
  outline: 1px solid var(--color-primary);
  border-radius: 2px;
}

div.overlay form {
  text-align: left;
  margin: 0 auto;
  display: block;
  width: 600px;
  max-width: calc(100vw - 20px);
  background-color: var(--color-bg-shade-A);
  border-radius: 4px;
  padding: 10px;
}

div.formInput {
  margin-bottom: 10px;
}
div.formInput label {
  display: block;
  color: var(--color-primary);
}
div.formInput select, div.formInput input {
  display: block;
  padding: 5px 10px;
  width: 100%;
}

button.btn,
a.btn {
  border-radius: 2px;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: var(--font-semi-bold);
  font-size: var(--font-size-default);
  border-width: 0px;
  border-style: solid;
  display: inline-block;
}

button.btn-sm,
a.btn-sm {
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 4px;
  font-size: var(--font-size-small);
}

button.btn-primary,
a.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-font-contrast);
}

button.btn-primary:hover,
a.btn-primary:hover {
  background-color: var(--color-primary-shade-A);
}

button.btn-cancel,
a.btn-cancel {
  background-color: var(--color-cancel);
  color: var(--color-cancel-font-contrast);
}

button.btn-cancel:hover,
a.btn-cancel:hover {
  background-color: var(--color-cancel-shade-A);
}

/*# sourceMappingURL=main.css.map */