@charset "UTF-8";
.kwik-trip-red-theme {
  --main-text-color: #75787b;
  --main-background-color: white;
  --h1-color: #7ea7ac;
  --h2-color: #7ea7ac;
  --h3-color: #77777a;
  --link-color: #cf0a2c;
  --settings-button-text-color: white;
  --settings-button-background-color: #cf0a2c;
  --settings-button-background-hover-color: rgb(186.3, 9, 39.6);
  --settings-button-secondary-color: rgb(103.5, 5, 22);
  --settings-background-color: white;
  --settings-shadow-color: rgba(0, 0, 0, 0.1882352941);
  --theme-selected-text-color: black;
  --theme-selected-background-color: #dfc9a2;
  --modal-background-color: white;
  --modal-border-color: #dfc9a2;
  --modal-shadow-color: rgba(0, 0, 0, 0.1882352941);
  --modal-h2-text-color: white;
  --modal-h2-background-color: #cf0a2c;
  --header-text-color: white;
  --header-background-color: #cf0a2c;
  --header-shadow-color: rgba(0, 0, 0, 0.1882352941);
  --nav-text-color: white;
  --nav-background-color: #cf0a2c;
  --nav-background-hover-color: rgb(186.3, 9, 39.6);
  --header-input-text-color: #75787b;
  --header-input-background-color: white;
  --header-input-accent-color: #dfc9a2;
  --footer-text-color: white;
  --footer-background-color: #cf0a2c;
  --footer-link-color: white;
  --button-text-color: white;
  --button-background-color: #5a8cda;
  --button-background-hover-color: rgb(67.5, 105, 163.5);
  --button-secondary-color: #2d466d;
  --button-red-background-color: rgb(186.3, 9, 39.6);
  --button-red-background-hover-color: rgb(155.25, 7.5, 33);
  --button-red-secondary-color: rgb(103.5, 5, 22);
  --submit-button-text-color: white;
  --submit-button-background-color: #5a8cda;
  --submit-button-background-hover-color: #4469a4;
  --submit-button-secondary-color: #2d466d;
  --autocomplete-list-background-color: white;
  --autocomplete-list-border-color: #77777a;
  --autocomplete-list-element-hover-text-color: black;
  --autocomplete-list-element-hover-background-color: #dfc9a2;
  --autocomplete-list-focus-text-color: white;
  --autocomplete-list-focus-background-color: #7ea7ac;
  --table-pages-background-color: #cf0a2c;
  --thead-text-color: white;
  --thead-background-color: #cf0a2c;
  --tr-odd-background-color: white;
  --tr-even-background-color: rgb(248.2, 248.2, 248.35);
  --sortable-column-hover-background-color: rgb(229.4, 211.8, 180.6);
  --sorting-decoration-color: rgb(103.5, 5, 22);
  --input-text-color: #75787b;
  --input-background-color: rgb(234.6, 234.6, 235.05);
  --input-readonly-text-color: #77777a;
  --input-readonly-background-color: rgb(248.2, 248.2, 248.35);
  --input-accent-color: #dfc9a2;
  --select-decoration-color: #cf0a2c;
  --option-text-color: #75787b;
  --checkbox-text-color: white;
  --checkbox-background-color: white;
  --checkbox-checked-color: #cf0a2c;
  --checkbox-focus-color: black;
  --radio-text-color: white;
  --radio-background-color: white;
  --radio-checked-color: #cf0a2c;
  --radio-focus-color: black;
  --spinner-color: #cf0a2c;
  --small-spinner-color: #cf0a2c;
  --small-spinner-secondary-color: white;
  --validation-text-color: #cf0a2c;
  --form-error-message-text-color: #cf0a2c;
  --form-error-message-background-color: rgb(247.8, 218.25, 223.35);
  --li-label-text-color: #77777a;
  --theme-background-color: white;
  --theme-primary-color: #cf0a2c;
  --theme-secondary-color: #dfc9a2;
  --theme-tertiary-color: #7ea7ac;
  --theme-primary-hover-color: rgb(186.3, 9, 39.6);
  --theme-secondary-hover-color: rgb(229.4, 211.8, 180.6);
  --theme-tertiary-hover-color: rgb(113.4, 150.3, 154.8);
  --theme-text-color: #75787b;
  --theme-text-on-primary-color: white;
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: white;
  --theme-shadow-color: rgba(0, 0, 0, 0.1882352941);
  --theme-error-color: #cf0a2c;
}

html {
  font-size: 16px;
}

body {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  background: white;
}

.tooltip {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  background: #5a8cda;
  border-radius: 8px;
  color: white;
  font-size: 0.8rem;
  text-align: center;
  vertical-align: top;
  margin-left: 6px;
  cursor: help;
}
.tooltip:before {
  content: "i";
}
.tooltip .tooltip-text {
  display: block;
  max-width: 400px;
  position: absolute;
  visibility: hidden;
  background-color: rgb(230.25, 237.75, 249.45);
  text-align: left;
  color: #5a8cda;
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid #5a8cda;
  z-index: 120;
  margin-left: 8px;
  margin-top: 0px;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.2s ease;
  pointer-events: none;
  white-space: normal;
}
.tooltip .tooltip-text:after, .tooltip .tooltip-text:before {
  content: "";
  position: absolute;
  top: 100%;
  right: 50%;
  border-style: solid;
}
.tooltip .tooltip-text:after {
  border-width: 6px;
  margin-right: -6px;
  border-color: rgb(230.25, 237.75, 249.45) transparent transparent transparent;
}
.tooltip .tooltip-text:before {
  border-width: 7px;
  margin-right: -7px;
  border-color: #5a8cda transparent transparent transparent;
}

.tooltip-label {
  cursor: help;
}
.tooltip-label.hide-icon {
  cursor: initial;
}
.tooltip-label.hide-icon .tooltip {
  width: 0;
  height: 0;
  background: none;
  cursor: initial;
  margin-left: 0;
  pointer-events: none;
}
.tooltip-label.hide-icon .tooltip:before {
  content: "";
}
.tooltip-label.hide-icon .tooltip .tooltip-text {
  margin-top: 16px;
}
.tooltip-label.hide-icon:hover .tooltip-text {
  margin-top: -8px;
}

.tooltip-label:hover .tooltip-text,
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  margin-top: -24px;
  transition-delay: 150ms;
}

h1, h2, h3 {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  margin: 0;
}

h1 {
  font-size: 2.5rem;
  color: var(--h1-color);
  padding: 0.67em;
}

h2 {
  font-size: 2rem;
  color: var(--h2-color);
  padding: 0.25em 0;
}

h3 {
  font-size: 1.25rem;
  color: var(--h3-color);
  padding: 0.25em 0;
}
h3 .tooltip-label .tooltip {
  margin-top: 7px;
}

p {
  margin: 12px 0;
}

p a, li a {
  color: var(--link-color);
  text-decoration: none;
}
p a span, li a span {
  position: relative;
}
p a span:after, li a span:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-bottom: 2px solid var(--link-color);
  transition: width 0.2s ease;
}
p a:hover span:after, li a:hover span:after {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 700;
  text-align: left;
  padding: 8px;
  white-space: nowrap;
}
th.condense {
  width: 0px;
}
th .cell-outer-content {
  display: flex;
  position: relative;
  padding: 8px;
  justify-content: space-between;
}
th .cell-outer-content.sortable-column {
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}
th .cell-outer-content.sortable-column:hover {
  background: var(--sortable-column-hover-background-color);
}
th .cell-outer-content.sortable-column.sorting-asc .cell-sort-icon, th .cell-outer-content.sortable-column.sorting-desc .cell-sort-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 8px;
}
th .cell-outer-content.sortable-column.sorting-asc .cell-sort-icon:after, th .cell-outer-content.sortable-column.sorting-desc .cell-sort-icon:after {
  content: "";
  display: block;
  pointer-events: none;
}
th .cell-outer-content.sortable-column.sorting-asc .cell-sort-icon:after {
  border-bottom: 8px solid var(--sorting-decoration-color);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
th .cell-outer-content.sortable-column.sorting-desc .cell-sort-icon:after {
  border-top: 8px solid var(--sorting-decoration-color);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

table thead tr {
  background: var(--thead-background-color);
  color: var(--thead-text-color);
}

tbody tr {
  background: var(--tr-odd-background-color);
}

tbody tr.alt {
  background: var(--tr-even-background-color);
}

td {
  padding: 4px 8px;
  vertical-align: middle;
}
td.cell-align-top {
  vertical-align: top;
}

.table-no-data-found {
  font-style: italic;
  text-align: center;
  padding: 4px 8px;
}

ul {
  padding: 0 0 0 24px;
}

input[type=button], button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  border: none;
  border-radius: 4px;
  background: var(--button-background-color);
  font-size: 1.1rem;
  color: var(--button-text-color);
  height: 38px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
input[type=button]:hover, button:hover {
  cursor: pointer;
}
input[type=button].disabled, button.disabled {
  cursor: default;
  background: var(--button-background-color);
}
input[type=button]:focus-visible, button:focus-visible {
  outline: 2px solid black;
}
input[type=button] .button-boundary, button .button-boundary {
  display: block;
  height: 42px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
input[type=button] .button-content, button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--button-background-color);
  padding: 0 12px;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-end);
  height: 38px;
  line-height: 38px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--button-background-color);
}
input[type=button]:hover .button-content, input[type=button]:focus-visible .button-content, button:hover .button-content, button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--button-secondary-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
input[type=button]:focus:hover .button-content, button:focus:hover .button-content {
  background: var(--button-background-hover-color);
}
input[type=button]:active, button:active {
  background: var(--button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
input[type=button]:active .button-content, button:active .button-content {
  transform: translateY(8px) !important;
}
input[type=button].remove-button, button.remove-button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  font-size: 1.1rem;
  color: var(--button-text-color);
  height: 38px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
input[type=button].remove-button:hover, button.remove-button:hover {
  cursor: pointer;
}
input[type=button].remove-button.disabled, button.remove-button.disabled {
  cursor: default;
  background: var(--button-red-background-color);
}
input[type=button].remove-button:focus-visible, button.remove-button:focus-visible {
  outline: 2px solid black;
}
input[type=button].remove-button .button-boundary, button.remove-button .button-boundary {
  display: block;
  height: 42px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
input[type=button].remove-button .button-content, button.remove-button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  padding: 0 12px;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-end);
  height: 38px;
  line-height: 38px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--button-red-background-color);
}
input[type=button].remove-button:hover .button-content, input[type=button].remove-button:focus-visible .button-content, button.remove-button:hover .button-content, button.remove-button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--button-red-secondary-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
input[type=button].remove-button:focus:hover .button-content, button.remove-button:focus:hover .button-content {
  background: var(--button-red-background-hover-color);
}
input[type=button].remove-button:active, button.remove-button:active {
  background: var(--button-red-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
input[type=button].remove-button:active .button-content, button.remove-button:active .button-content {
  transform: translateY(8px) !important;
}
input[type=button].remove-button, button.remove-button {
  line-height: 19px;
  width: 38px;
}

button {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

input[type=button].red-button, button.red-button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  font-size: 1.1rem;
  color: var(--button-text-color);
  height: 38px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
input[type=button].red-button:hover, button.red-button:hover {
  cursor: pointer;
}
input[type=button].red-button.disabled, button.red-button.disabled {
  cursor: default;
  background: var(--button-red-background-color);
}
input[type=button].red-button:focus-visible, button.red-button:focus-visible {
  outline: 2px solid black;
}
input[type=button].red-button .button-boundary, button.red-button .button-boundary {
  display: block;
  height: 42px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
input[type=button].red-button .button-content, button.red-button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  padding: 0 12px;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-end);
  height: 38px;
  line-height: 38px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--button-red-background-color);
}
input[type=button].red-button:hover .button-content, input[type=button].red-button:focus-visible .button-content, button.red-button:hover .button-content, button.red-button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--button-red-secondary-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
input[type=button].red-button:focus:hover .button-content, button.red-button:focus:hover .button-content {
  background: var(--button-red-background-hover-color);
}
input[type=button].red-button:active, button.red-button:active {
  background: var(--button-red-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
input[type=button].red-button:active .button-content, button.red-button:active .button-content {
  transform: translateY(8px) !important;
}

select {
  -webkit-appearance: none;
}

.select-container {
  position: relative;
  display: block;
}

@supports (-webkit-appearance: none) {
  .select-container:after {
    content: "";
    display: block;
    position: absolute;
    right: 0%;
    top: 50%;
    margin-top: -5px;
    margin-right: 16px;
    border-top: 8px solid var(--select-decoration-color);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    pointer-events: none;
  }
}
header {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background-color: var(--header-background-color);
  transition: all 0.5s ease;
  height: 77px;
}

.header-scrolled {
  box-shadow: 0 0 32px var(--header-shadow-color);
  height: 56px;
}
.header-scrolled:not(.keep-title) .header-title {
  margin-top: -77px;
  position: absolute;
}
.header-scrolled:not(.keep-title) .header-nav {
  width: 100%;
}

.site-header-primary {
  flex: 1 1 100%;
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: flex-end;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-header-left {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 16px;
}

.site-header-right {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px;
}

.settings-menu {
  position: absolute;
  top: 64px;
  right: 0;
  background: var(--settings-background-color);
  box-shadow: 0 8px 32px transparent;
  transform: translateX(100%);
  transition: 0.2s all ease-out;
}
.settings-menu.show-settings {
  box-shadow: 0 8px 32px var(--settings-shadow-color);
  transform: translateX(0);
}

.header-scrolled .settings-menu {
  top: 53px;
}

.header-title {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  font-size: 2.5rem;
  font-style: italic;
  color: var(--header-text-color);
  position: absolute;
  left: 16px;
  height: 77px;
  transition: margin-top 0.5s ease;
  cursor: default;
}
.header-title a {
  color: unset;
  text-decoration: none;
}

.keep-title .header-title {
  height: 100%;
}

.header-nav {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  width: 50%;
  padding: 0;
  margin: 0;
  transition: width 0.5s ease;
}

.header-nav-list {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  height: 100%;
}

.header-nav-list-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  text-align: center;
  list-style: none;
  position: relative;
}
.header-nav-list-item a, .header-nav-list-item div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 77px;
  padding: 0 5px;
  transition: all 0.5s ease;
  background-color: var(--nav-background-color);
  color: var(--nav-text-color);
  text-decoration: none;
}
.header-nav-list-item a span, .header-nav-list-item div span {
  position: relative;
}
.header-nav-list-item a span:after, .header-nav-list-item div span:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-bottom: 2px solid var(--nav-text-color);
  transition: width 0.2s ease;
}
.header-nav-list-item a:hover span:after, .header-nav-list-item div:hover span:after {
  width: 100%;
}
.header-nav-list-item a, .header-nav-list-item div {
  flex-grow: 1;
}
.header-nav-list-item div {
  cursor: default;
}
.header-nav-list-item:hover a, .header-nav-list-item:hover div {
  background-color: var(--nav-background-hover-color);
}
.header-nav-list-item:hover .header-nav-sub-list {
  display: block;
}

.header-nav-sub-list {
  display: none;
  position: absolute;
  background: var(--nav-background-color);
  padding: 0;
  white-space: nowrap;
  min-width: 100%;
}
.header-nav-sub-list a {
  height: 60px;
  padding: 0 40px;
  justify-content: flex-start;
}

.header-scrolled .header-nav-sub-list a {
  justify-content: center;
}

.header-nav-sub-list-item {
  list-style: none;
}

.logo {
  position: relative;
  margin-right: 16px;
}

.settings-button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  border: none;
  border-radius: 4px;
  background: var(--settings-button-background-color);
  font-size: 1.1rem;
  color: var(--button-text-color);
  height: 48px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
.settings-button:hover {
  cursor: pointer;
}
.settings-button.disabled {
  cursor: default;
  background: var(--settings-button-background-color);
}
.settings-button:focus-visible {
  outline: 2px solid black;
}
.settings-button .button-boundary {
  display: block;
  height: 52px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.settings-button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--settings-button-background-color);
  padding: 0 12px;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-end);
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--settings-button-background-color);
}
.settings-button:hover .button-content, .settings-button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--settings-button-secondary-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
.settings-button:hover .button-content {
  background: var(--settings-button-background-hover-color);
}
.settings-button:focus:hover .button-content {
  background: var(--settings-button-background-hover-color);
}
.settings-button:active {
  background: var(--settings-button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
.settings-button:active .button-content {
  transform: translateY(8px) !important;
}
.settings-button .button-content {
  color: var(--settings-button-text-color);
  gap: 0;
}
.settings-button .button-content span {
  flex: 1;
  margin: 0 8px;
}
.settings-button.header-icon .button-content {
  font-size: 2.5rem;
  padding: 0;
  width: 48px;
}

button.theme-icon {
  height: 96px;
}
button.theme-icon .button-boundary {
  height: 100px;
}
button.theme-icon .button-content {
  height: 96px;
  width: 96px;
  padding: 4px;
  overflow: hidden;
}

.themes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 368px;
}

.theme {
  width: 96px;
  padding: 8px;
}
.theme.selected {
  background-color: var(--theme-selected-background-color);
  color: var(--theme-selected-text-color);
}

.theme-icon-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.theme-icon-header {
  background: var(--header-background-color);
  height: 12px;
}

.theme-icon-page {
  background: var(--main-background-color);
  flex: 1;
}

.theme-icon-footer {
  background: var(--footer-background-color);
  height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-icon-text {
  background: var(--main-text-color);
  height: 4px;
  margin: 2px 4px;
}

.theme-icon-input,
.theme-icon-button,
.theme-icon-red-button {
  height: 8px;
  flex: 1;
  margin: 2px;
}

.theme-icon-input {
  display: flex;
  justify-content: right;
  align-items: center;
  background: var(--input-background-color);
}

.theme-icon-input-decoration {
  background: var(--select-decoration-color);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 2px;
}

.theme-icon-button {
  background: var(--button-background-color);
}

.theme-icon-red-button {
  background: var(--button-red-background-color);
}

.theme-icon-h2 {
  background: var(--h2-color);
  height: 4px;
  margin: 2px 4px;
  width: 50%;
}

.theme-icon-table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 2px;
}

.theme-icon-table-header {
  background: var(--thead-background-color);
  height: 4px;
}

.theme-icon-table-row-odd {
  background: var(--tr-odd-background-color);
  height: 4px;
}

.theme-icon-table-row-even {
  background: var(--tr-even-background-color);
  height: 4px;
}

.theme-icon-link {
  background: var(--footer-link-color);
  height: 4px;
  width: 16px;
}

.theme-name {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 2px;
}

main {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  padding-top: 77px;
  background: var(--main-background-color);
  min-height: calc(100vh - 129px);
}

.page {
  min-height: 100vh;
  color: var(--main-text-color);
  background: var(--main-background-color);
}

.page-heading h1 {
  text-align: center;
}

.page-content,
.summary-content,
.table-content,
.modal-content {
  margin: 0 auto;
  padding: 0 24px 20px 24px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.page-content h2,
.summary-content h2,
.table-content h2,
.modal-content h2 {
  text-align: center;
}

.page-content {
  max-width: 900px;
}

.summary-content {
  padding: 0 48px;
}
.summary-content h2 {
  text-align: left;
}

footer {
  display: block;
  color: var(--footer-text-color);
  background-color: var(--footer-background-color);
}
footer a {
  color: var(--footer-link-color);
  text-decoration: none;
}
footer a span {
  position: relative;
}
footer a span:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-bottom: 2px solid var(--footer-link-color);
  transition: width 0.2s ease;
}
footer a:hover span:after {
  width: 100%;
}

.site-footer-primary {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.footer-mission {
  padding-top: 1em;
}

.footer-mission-title {
  font-weight: 700;
}

.footer-mission-text {
  font-style: italic;
}

footer p {
  text-align: center;
  padding: 1em 0 0 0;
  margin: 0;
}
footer p:last-child {
  padding-bottom: 1em;
}

.footer-colophon {
  text-align: center;
  padding: 1em 0;
}

.footer-separator {
  margin: 0 8px;
}

.form-section, .page-section {
  margin: 0 0 16px 0;
  padding: 8px;
  border-radius: 4px;
  flex: 1;
}

.bordered {
  border: 2px solid #cf0a2c;
  position: relative;
}
.bordered:before {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 4px;
  right: 4px;
  border-top: 4px solid white;
  border-bottom: 4px solid white;
  pointer-events: none;
}

.form-input-container label,
.table-section label {
  font-size: 0.8rem;
  padding-left: 2px;
  line-height: normal;
}
.form-input-container input:not(input[type=radio], input[type=checkbox]), .form-input-container select, .form-input-container textarea,
.table-section input:not(input[type=radio], input[type=checkbox]),
.table-section select,
.table-section textarea {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--input-text-color);
  background: var(--input-background-color);
  border: none;
  border-bottom: 2px solid var(--input-accent-color);
  border-radius: 4px;
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px;
  overflow-y: hidden;
  resize: none;
  box-shadow: 0 0 0 0 var(--input-accent-color) inset;
  transition: all 0.1s linear;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.form-input-container input:not(input[type=radio], input[type=checkbox]):focus, .form-input-container select:focus, .form-input-container textarea:focus,
.table-section input:not(input[type=radio], input[type=checkbox]):focus,
.table-section select:focus,
.table-section textarea:focus {
  box-shadow: 0 -2px 0 0 var(--input-accent-color) inset;
}
.form-input-container input:not(input[type=radio], input[type=checkbox])[readonly], .form-input-container select[readonly], .form-input-container textarea[readonly],
.table-section input:not(input[type=radio], input[type=checkbox])[readonly],
.table-section select[readonly],
.table-section textarea[readonly] {
  background: var(--input-readonly-background-color);
  color: var(--input-readonly-text-color);
  pointer-events: none;
}
.form-input-container input:not(input[type=radio], input[type=checkbox]).date-input, .form-input-container select.date-input, .form-input-container textarea.date-input,
.table-section input:not(input[type=radio], input[type=checkbox]).date-input,
.table-section select.date-input,
.table-section textarea.date-input {
  color: black;
  background: rgb(234.6, 234.6, 235.05);
  pointer-events: auto;
  cursor: default;
}
.form-input-container input:not(input[type=radio], input[type=checkbox]).change-detected, .form-input-container select.change-detected, .form-input-container textarea.change-detected,
.table-section input:not(input[type=radio], input[type=checkbox]).change-detected,
.table-section select.change-detected,
.table-section textarea.change-detected {
  color: #5a8cda;
}
.form-input-container .select-container input:not(input[type=radio], input[type=checkbox]),
.table-section .select-container input:not(input[type=radio], input[type=checkbox]) {
  padding-right: 38px;
}
.form-input-container select option,
.table-section select option {
  color: var(--option-text-color);
}
.form-input-container select[multiple],
.table-section select[multiple] {
  height: 186px;
  overflow: auto;
}
.form-input-container .validation-message,
.form-input-container .warning-message,
.table-section .validation-message,
.table-section .warning-message {
  font-weight: 500;
  display: block;
  color: var(--validation-text-color);
  font-size: 0.75rem;
  margin: 4px 0 0 4px;
}

.form-input-container {
  padding: 12px 0;
}
.form-input-container textarea {
  height: 15rem;
  overflow-y: auto;
}
table .form-input-container textarea {
  height: 38px;
  overflow-y: hidden;
}
.form-input-container.required label:after, .form-input-container.required p strong:after {
  content: " *";
  color: #cf0a2c;
}

.form-button-container {
  text-align: center;
}
.form-button-container input[type=button], .form-button-container button {
  min-width: 150px;
}

.form-submit-section {
  margin-bottom: 16px;
  padding: 8px;
  text-align: center;
}
.form-submit-section input, .form-submit-section button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  border: none;
  border-radius: 4px;
  background: var(--submit-button-background-color);
  font-size: 1.1rem;
  color: var(--button-text-color);
  height: 51px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
.form-submit-section input:hover, .form-submit-section button:hover {
  cursor: pointer;
}
.form-submit-section input.disabled, .form-submit-section button.disabled {
  cursor: default;
  background: var(--submit-button-background-color);
}
.form-submit-section input:focus-visible, .form-submit-section button:focus-visible {
  outline: 2px solid black;
}
.form-submit-section input .button-boundary, .form-submit-section button .button-boundary {
  display: block;
  height: 55px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.form-submit-section input .button-content, .form-submit-section button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--submit-button-background-color);
  padding: 0 12px;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-end);
  height: 51px;
  line-height: 51px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--submit-button-background-color);
}
.form-submit-section input:hover .button-content, .form-submit-section input:focus-visible .button-content, .form-submit-section button:hover .button-content, .form-submit-section button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--submit-button-secondary-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
.form-submit-section input:hover .button-content, .form-submit-section button:hover .button-content {
  background: var(--submit-button-background-hover-color);
}
.form-submit-section input:focus:hover .button-content, .form-submit-section button:focus:hover .button-content {
  background: var(--submit-button-background-hover-color);
}
.form-submit-section input:active, .form-submit-section button:active {
  background: var(--submit-button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
.form-submit-section input:active .button-content, .form-submit-section button:active .button-content {
  transform: translateY(8px) !important;
}
.form-submit-section input, .form-submit-section button {
  margin: 12px 0;
  min-width: 300px;
}
.form-submit-section input .button-content, .form-submit-section button .button-content {
  font-size: 1.4rem;
  color: var(--submit-button-text-color);
  padding: 0 2rem;
}
.form-submit-section button.red-button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  font-size: 1.1rem;
  color: var(--button-text-color);
  height: 51px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
.form-submit-section button.red-button:hover {
  cursor: pointer;
}
.form-submit-section button.red-button.disabled {
  cursor: default;
  background: var(--button-red-background-color);
}
.form-submit-section button.red-button:focus-visible {
  outline: 2px solid black;
}
.form-submit-section button.red-button .button-boundary {
  display: block;
  height: 55px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.form-submit-section button.red-button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  padding: 0 12px;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-end);
  height: 51px;
  line-height: 51px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--button-red-background-color);
}
.form-submit-section button.red-button:hover .button-content, .form-submit-section button.red-button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--button-red-secondary-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
.form-submit-section button.red-button:hover .button-content {
  background: var(--button-red-background-hover-color);
}
.form-submit-section button.red-button:focus:hover .button-content {
  background: var(--button-red-background-hover-color);
}
.form-submit-section button.red-button:active {
  background: var(--button-red-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
.form-submit-section button.red-button:active .button-content {
  transform: translateY(8px) !important;
}
.form-submit-section button.red-button .button-content {
  font-size: 1.4rem;
}

.form-submit-button {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.form-submit-button-text {
  padding: 0 1rem;
}

.form-submit-button-dec-left,
.form-submit-button-dec-right {
  flex: 1;
  position: relative;
  min-width: 50px;
}
.form-submit-button-dec-left:after,
.form-submit-button-dec-right:after {
  content: "";
  display: inline-block;
  position: absolute;
  border-bottom: 2px solid var(--submit-button-text-color);
  top: 50%;
}

.form-submit-button-dec-left:after {
  right: 0;
  left: 100%;
  transition: left 0.2s ease;
}

.form-submit-button-dec-right:after {
  left: 0;
  right: 100%;
  transition: right 0.2s ease;
}

.form-submit-section button:hover .form-submit-button-dec-left:after,
.form-submit-section button:hover .form-submit-button-dec-right:after {
  left: 0;
  right: 0;
}

.form-same-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.form-same-line .form-input-container,
.form-same-line .form-button-container,
.form-same-line .select-container {
  flex-grow: 1;
  flex-basis: 100%;
  margin-right: 8px;
  margin-left: 8px;
}
.form-same-line .form-input-container:first-of-type,
.form-same-line .form-button-container:first-of-type,
.form-same-line .select-container:first-of-type {
  margin-left: 0px;
}
.form-same-line .form-input-container:last-of-type,
.form-same-line .form-button-container:last-of-type,
.form-same-line .select-container:last-of-type {
  margin-right: 0px;
}

.form-fourth {
  width: 25%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 8px;
}

form-fourth + .form-fourth {
  float: right;
  padding-left: 45px;
  padding-right: 0;
}

.form-half {
  width: 50%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 8px;
}

.form-half + .form-half {
  float: right;
  padding-left: 8px;
  padding-right: 0;
}

.form-table th {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0 0 0 2px;
  color: black;
}
.form-table thead tr,
.form-table tbody tr {
  background: none;
}
.form-table td {
  padding: 0 16px 24px 0;
}

input[type=checkbox] {
  display: inline-block;
  position: relative;
  appearance: none;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  margin: 0 7px 0 0;
  vertical-align: bottom;
  background: var(--checkbox-background-color);
  color: var(--checkbox-text-color);
  border-radius: 4px;
  border: 2px solid var(--input-accent-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 1rem;
  overflow: hidden;
}
input[type=checkbox]:before {
  content: " ✓ ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: normal;
  left: -100%;
  background: var(--checkbox-checked-color);
  transition: left 0.2s ease;
}
input[type=checkbox]:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--checkbox-focus-color);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
}

input[type=checkbox]:focus:after {
  opacity: 1;
}

input[type=checkbox]:checked:before {
  left: 0;
}

.detail-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin: 12px 0;
  list-style: none;
}
.detail-list li {
  font-size: 1.3rem;
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
  padding: 1rem 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.detail-list li label {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  color: var(--li-label-text-color);
  display: block;
}
.detail-list li .form-checkbox-container {
  justify-content: flex-start;
}
.detail-list li .form-checkbox-container label {
  font-family: unset;
  font-weight: unset;
  color: unset;
  display: unset;
}
.detail-list li ul {
  list-style: disc;
}
.detail-list li ul li {
  padding: 0;
  max-width: 100%;
}
.detail-list .two-thirds {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.form-checkbox-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.form-checkbox-container label {
  display: inline-block;
  font-size: 1rem;
  padding-left: 0;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}
.form-checkbox-container label.disabled {
  cursor: default;
  pointer-events: none;
}
.form-checkbox-container label + .tooltip {
  margin-top: 3px;
}
.form-checkbox-container.pack-content {
  justify-content: flex-start;
}
.form-checkbox-container.pack-content label {
  margin: 0 12px;
}
.form-checkbox-container.pack-content label:first-child {
  margin-left: 0;
}
.form-checkbox-container.pack-content label:last-child {
  margin-right: 0;
}

input[type=radio] {
  display: inline-block;
  position: relative;
  appearance: none;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  margin-right: 7px;
  vertical-align: bottom;
  background: var(--radio-background-color);
  color: var(--radio-text-color);
  border-radius: 50%;
  border: 2px solid var(--input-accent-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  align-self: center;
}
input[type=radio]:before {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  line-height: normal;
  background: white;
  border: 7px solid var(--radio-checked-color);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0, 0);
  transition: all 0.2s ease;
}
input[type=radio]:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--radio-focus-color);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
}
input[type=radio]:focus:after {
  opacity: 1;
}
input[type=radio]:checked:before {
  opacity: 1;
  transform: scale(1, 1);
}

.form-radio-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.form-radio-container > label {
  display: inline-block;
  font-size: 1rem;
  padding-left: 0;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  margin: 4px 0;
}
.form-radio-container > label:first-child {
  margin-top: 0;
}
.form-radio-container > label:last-child {
  margin-bottom: 0;
}
.form-radio-container > label.disabled {
  cursor: default;
  pointer-events: none;
}
.form-radio-container > label + .tooltip {
  margin-top: 3px;
}
.form-radio-container.complex > label {
  display: flex;
  width: 100%;
  height: auto;
  height: initial;
}
.form-radio-container.complex .form-input-container {
  flex: 1 1;
  margin-left: 9px;
}
.form-radio-container.complex .form-input-container label:active {
  pointer-events: none;
}
.form-radio-container.complex input:not(:checked) + span + .form-input-container input {
  background: rgb(248.2, 248.2, 248.35);
  color: #77777a;
  pointer-events: none;
}

.form-message {
  font-size: 0.8rem;
  padding: 10px 16px;
  border-bottom: 2px solid #dfc9a2;
  border-radius: 4px;
  margin: 0 8px 16px 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-error-message {
  background: var(--form-error-message-background-color);
  color: var(--form-error-message-text-color);
  border-bottom-color: var(--form-error-message-text-color);
}

.form-update-message {
  background: rgb(230.25, 237.75, 249.45);
  color: #5a8cda;
  border-bottom-color: #5a8cda;
}

.form-inform-message {
  background: rgb(235.65, 241.8, 242.55);
  color: #7ea7ac;
  border-bottom-color: #7ea7ac;
}

.table-section {
  padding: 2rem 1.5rem;
  margin-bottom: 36px;
}
.table-section h2 {
  padding: 0.25em 0.25em 0.25em 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--main-background-color);
  position: sticky;
  top: 56px;
  z-index: 1;
}
.table-section h2 .edit-buttons-container {
  display: flex;
  column-gap: 0.25em;
}
@supports (-webkit-appearance: none) {
  .table-section select {
    padding-right: 40px;
  }
}

.table-pages-container {
  display: flex;
  min-height: 37px;
  justify-content: space-around;
  background: var(--table-pages-background-color);
  position: sticky;
  top: 111px;
  z-index: 1;
}
.table-pages-container .page-count-input {
  flex: 1;
  padding: 6px;
}
.table-pages-container .page-count-input .select-container {
  display: inline-block;
}
.table-pages-container .page-count-input .select-container:after {
  margin-right: 8px;
}
.table-pages-container .page-count-input .select-container select {
  padding: 0 32px 0 4px;
  height: 25px;
}
.table-pages-container .page-count-input label {
  color: white;
}
.table-pages-container .pages {
  flex: 1;
  padding: 6px;
  font-size: 0px;
  text-align: center;
}
.table-pages-container button {
  margin: 0 3px;
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  border: none;
  border-radius: 4px;
  background: var(--button-background-color);
  font-size: 1.1rem;
  color: var(--button-text-color);
  height: 25px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
.table-pages-container button:hover {
  cursor: pointer;
}
.table-pages-container button.disabled {
  cursor: default;
  background: var(--button-background-color);
}
.table-pages-container button:focus-visible {
  outline: 2px solid black;
}
.table-pages-container button .button-boundary {
  display: block;
  height: 29px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.table-pages-container button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--button-background-color);
  padding: 0 12px;
  font-size: 1.1rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-end);
  height: 25px;
  line-height: 25px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--button-background-color);
}
.table-pages-container button:hover .button-content, .table-pages-container button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--button-secondary-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
.table-pages-container button:hover .button-content {
  background: var(--button-background-hover-color);
}
.table-pages-container button:focus:hover .button-content {
  background: var(--button-background-hover-color);
}
.table-pages-container button:active {
  background: var(--button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
.table-pages-container button:active .button-content {
  transform: translateY(8px) !important;
}
.table-pages-container button {
  min-width: 26px;
}
.table-pages-container button .button-content {
  padding: 1px 4px 3px 4px;
}
.table-pages-container .current-page {
  pointer-events: none;
}
.table-pages-container .current-page .button-content {
  background: var(--button-secondary-color);
}

.editing table td {
  vertical-align: top;
}
.editing table td .table-checkbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
}
.editing table td .table-checkbox-container input[type=checkbox] {
  margin: 0;
}

.arrow {
  transform-origin: 66% 66%;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  display: inline-block;
  padding: 5px;
  transition: all 0.3s ease;
  border-radius: 4px;
  border-style: solid;
  border-width: 5px;
  border-color: transparent white white transparent;
}
.arrow.right {
  transform: translate(-66%, -66%) rotate(-45deg);
}
.arrow.down {
  transform: translate(-66%, -66%) rotate(45deg);
}

td.highlighted .button-content {
  border-bottom: 2px solid var(--input-accent-color);
}

.site-modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  max-width: 500px;
  padding: 0px;
  background: var(--modal-background-color);
  border-radius: 4px;
  border: 8px solid var(--modal-border-color);
  box-shadow: 0 8px 32px var(--modal-shadow-color);
}
.modal-content h2 {
  text-align: center;
  background: var(--modal-h2-background-color);
  color: var(--modal-h2-text-color);
  padding: 0.25em;
}

.modal-section {
  margin: 0 16px 16px 16px;
  padding: 8px;
}
.modal-section p {
  overflow-y: auto;
  max-height: 60vh;
}

.note {
  font-style: italic;
  color: #77777a;
  text-align: center;
}

.autocomplete-container {
  position: relative;
}

.autocomplete-list-container {
  position: absolute;
  top: 100%;
  width: 100%;
  max-height: 300px;
  background: var(--autocomplete-list-background-color);
  border: 1px solid var(--autocomplete-list-border-color);
  overflow-y: auto;
  z-index: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.autocomplete-list-element {
  padding: 0 0.25em;
  font-weight: 500;
}
.autocomplete-list-element div {
  display: none;
}
.autocomplete-list-element .autocomplete-list-fullname {
  display: block;
}

.autocomplete-list-element:hover {
  cursor: pointer;
  color: var(--autocomplete-list-element-hover-text-color);
  background-color: var(--autocomplete-list-element-hover-background-color);
}

.autocomplete-list-container .focus {
  background-color: var(--autocomplete-list-focus-background-color);
  color: var(--autocomplete-list-focus-text-color);
}

.spinner-container {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  left: initial;
  opacity: 0;
  animation: fade-in 0.2s linear forwards;
}
.spinner-container:after {
  content: "";
  border-radius: 16px;
  border: 8px solid var(--small-spinner-color);
  border-bottom: 8px solid var(--small-spinner-secondary-color);
  width: 32px;
  height: 32px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -16px 0 0 -16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  animation: spin 2s linear infinite;
}

.select-container .spinner-container {
  width: 38px;
  right: 32px;
}

.spinner-container:after {
  border-radius: 8px;
  border-width: 4px;
  border-bottom-width: 4px;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

td.remove-button-container {
  padding-right: 0;
  width: 24px;
  vertical-align: middle;
}
td.remove-button-container button {
  display: inline-block;
  background: rgb(153, 153, 155.25);
  width: 24px;
  height: 24px;
  border-radius: 12px;
  color: white;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
}
td.remove-button-container button:hover {
  background: #77777a;
}
td.remove-button-container button:disabled {
  background: rgb(153, 153, 155.25);
  cursor: default;
}

.info-box {
  background: rgba(223, 201, 162, 0.3215686275);
  border-radius: 4px;
  box-shadow: 2px 4px 8px 0 #dfc9a2;
  padding: 1rem;
  margin: 1rem 0 2rem 0;
}
.info-box .info-box-heading-container {
  display: flex;
  align-items: center;
}
.info-box .info-box-heading-container h3 {
  margin-left: 0.25em;
}

:disabled,
.disabled {
  opacity: 0.5;
  filter: saturate(0);
  pointer-events: none;
  cursor: default;
}

.hidden {
  display: none;
}

.show {
  animation: fade-in 0.2s linear forwards;
}

.hide {
  animation: fade-out 0.2s linear forwards;
}

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}

.clearfix:after {
  clear: both;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary:after {
  content: "An error has occurred.";
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.modal-content .close {
  text-align: right;
}

.logo {
  display: flex;
}

.settings-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px;
  min-width: 200px;
}

.header-icon .button-content {
  font-size: 2.5rem;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-icon .button-content svg {
  width: 32px;
  height: 32px;
}

.logo img {
  height: 176px;
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translate(-50%, -50%);
}

.not-linked-text {
  color: var(--link-color);
  opacity: 0.75;
}
.not-linked-text:hover {
  cursor: not-allowed;
}

ol ul {
  padding-top: 12px;
  padding-bottom: 12px;
}

@media all and (max-width: 630px) {
  html {
    font-size: 14px;
  }
  .page {
    width: 100%;
    overflow: hidden;
  }
  header {
    width: 100vw;
  }
  .site-header-primary {
    flex-direction: column;
    padding-right: 16px;
  }
  .site-header-primary .header-title {
    justify-content: center;
    line-height: 2rem;
  }
  .site-header-primary .header-key {
    flex-direction: row;
    height: 21px;
    column-gap: 0.5rem;
    align-items: center;
  }
  .header-scrolled {
    transform: translate(0, -77px);
  }
  .header-scrolled .header-title {
    height: 77px;
  }
  .header-scrolled .header-key {
    height: 38px;
  }
  main {
    padding-top: 98px;
  }
  input:not(input[type=radio], input[type=checkbox]) {
    min-width: 120px;
  }
  .page-content {
    padding-left: 0;
    padding-right: 0;
  }
  .table-section {
    padding-right: 0;
    padding-left: 0;
    padding-top: 1.5rem;
  }
  .table-container {
    overflow-x: auto;
  }
  .sla-head {
    min-width: 92px;
  }
  .tooltip {
    display: none;
  }
}

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