:root {
    --sup-green: #7DC242;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 1rem;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.25rem 1rem;
    --color: #333;
    --hover-color: var(--sup-green);
    color: var(--color);
}

nav a {
    color: var(--color);
}

nav a:hover, nav button:hover {
    color: var(--hover-color);
}

nav.primary {
    background-color: #414a3f;
    --color: #fff;
}

nav.secondary {
    background-color: #f0f0f0;
    --color: #333;
}

nav a.active {
    background-color: var(--sup-green);
    color: white;
    padding: 0 0.2rem;
}

.content {
    padding: 1.5rem 1rem 5rem;
    background-color: #fff;
}

footer {
    background-color: #f0f0f0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.25rem 1rem;
}

.w-0 {
    width: 0;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

.gap-5 {
    gap: 2rem;
}

h1 {
    font-size: 2rem;
    font-weight: bold;
    color: var(--sup-green);
}

h3 {
    font-size: 1.25rem;
}

a {
    color: #333;
}

a:hover {
    color: var(--sup-green);
}

label.required:not(:empty)::after {
    content: "*";
    margin-left: 0.5rem;
    color: red;
}

table {
    width: 100%;
}

table {
    border-spacing: 0;
    border-collapse: separate;
}

table th, table td {
    border: 1px solid #FFF;
}

table.list-table th {
    background-color: #414a3f;
    --color: #FFF;
    color: var(--color);
    text-align: center;
    padding: 0 1rem;
}

table.list-table tr.odd {
    background-color: #f0f0f0;
}

table.list-table th a, table.list-table th a:hover {
    color: var(--color);
}

table.list-table td {
    padding: 0 0.25rem;
}

tfoot {
    background-color: #dadada;
}

.table-footer {
    background-color: #dadada;
    padding: 1rem 0.25rem 0.25rem;
    display: flex;
    justify-content: end;
}

.search-form {
    width: max-content;
    max-width: 100%;
}

.search-form th {
    width: 0;
}

.search-form label {
    margin-bottom: 0;
    margin-right: 2rem;
    text-wrap: nowrap;
}

.link-button {
    color: inherit;
    font-size: 1rem;
    background: none;
    border: none;
    text-decoration-thickness: 1px;
    cursor: pointer;
    font-family: "Arial", Helvetica, sans-serif;
    padding: 0;
    display: inline;
}

.link-button:hover {
    text-decoration: underline;
}

a.parent-size, button.parent-size {
    color: transparent;
    background-color: transparent;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
    margin: 0;
    color: var(--sup-green);
    font-weight: bold;
}

ul.pagination li {
    min-width: 2rem;
    text-align: center;
    padding: 0.25rem 0.25rem;
    position: relative;
}

ul.pagination li a {
    text-decoration: none !important;
}

ul.pagination li:hover {
    border-bottom: 1px solid var(--sup-green);
}

ul.pagination li.active {
    border-bottom: 2px solid var(--sup-green);
}

ul.pagination li.active a {
    font-weight: bold;
}

.date-filters a.active {
    background-color: var(--sup-green);
    color: #FFF;
    padding: 0 0.2rem;
}

.responsive-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

.responsive-table .label {
    font-weight: bold;
    font-size: 0.85em;
}

.responsive-table .value {
    min-height: 1.5rem;
    background-color: #f3f5f5;
}

.responsive-table .value.textarea {
    min-height: 5rem;
}

.responsive-table .full-width {
    grid-column: span 2;
}

hr {
    border-top: 1px solid grey;
}

.job-status-1 {
    color: #FF0000;
}

.job-status-2 {
    color: #FF00FF;
}

.job-status-3 {
    color: #337733;
}

.job-status-4 {
    color: #000099;
}

.job-status-5 {
    color: #000000;
}

.button-container {
    display: flex;
    justify-content: end;
    gap: 0.25rem;
}

.button {
    padding: 0.5rem;
    background-color: var(--sup-green);
    color: #FFF;
    border: 0;
}

.button:hover {
    background-color: #549e15;
    color: white;
    text-decoration: none;
}

.form {
    max-width: 650px;
}

.edit-form th {
    background-color: transparent;
    color: #333;
    text-align: left;
    padding: 0;
}

.edit-form label {
    margin-bottom: 0;
}

input:not([type="radio"]), select, textarea {
    background-color: #FDFDFD;
    width: 100%;
    max-width: 500px;
    color: #495057;
    padding: 0.375rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-family: "Arial", Helvetica, sans-serif;
    line-height: 1.5;
}

input:disabled, select:disabled, textarea:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

textarea {
    height: 110px;
}

input[type="checkbox"], input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
}

.input-group {
    width: 100%;
    max-width: 500px;
    flex-wrap: nowrap;
}

.input-group input {
    background-color: #FDFDFD !important;
    font-size: 1rem;
    font-family: "Arial", Helvetica, sans-serif;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .input-group-addon {
    cursor: pointer;
}

.select2-container {
  max-width: 500px;
  width: 100% !important;
  min-width: unset !important;
}

.select2-container--default .select2-selection--single {
  min-height: 38px !important;
  height: unset !important;
  display: flex !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    white-space: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered > :last-child {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  line-height: 22px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: block !important;
  padding-bottom: 5px !important;
}

.select2-container--default .select2-selection__clear {
  order: 1 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  flex-shrink: 0 !important;
}

.select2-selection__choice {
  border: 1px solid var(--primary) !important;
  border-radius: 999px !important;
  font-weight: bold !important;
  padding: 0.1rem 0.75rem !important;
  color: #000 !important;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 400px !important;
}

.select2-results__option--highlighted, .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  margin-top: 8px !important;
}

.select2-container--default .select2-selection {
  border-color: #ced4da !important;
}

.select2-selection__choice {
  border-color: #999 !important;
}

.delete-warning {
    background-color: #DADADA;
    font-weight: bold;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
}

.feed-declaration-not-ready {
    font-weight: bold;
    color: #F00;
    font-size: 1.25rem;
}

input.invoice-days {
    width: 45px;
    display: inline-block;
}

input.invoice-days::-webkit-outer-spin-button,
input.invoice-days::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.invoice-days {
    -moz-appearance: textfield;
}

.date-range {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    max-width: 500px;
}

.date-range > .date-input-container {
    flex-grow: 1;
}

.date-range label {
    font-weight: bold;
}

.circle-icon {
    background-color: #CCC;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
}

i.icon-column {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
}

i.icon-column.edit {
    color: #007eb5;
}

i.icon-column.edit:hover {
    color: #004868;
}

i.icon-column.next-stage {
    color: #51ae00;
}

i.icon-column.next-stage:hover {
    color: #367500;
}

i.icon-column.delete {
    color: #ca0000;
}

i.icon-column.delete:hover {
    color: #950000;
}

div.field-side-by-side {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
}

div.field-side-by-side > * {
    flex: 1;
}

.form .label {
    font-weight: bold;
    font-size: 0.85em;
}