@charset "UTF-8";
.default-light-theme {
  --main-text-color: black;
  --main-background-color: white;
  --h1-color: #6b6b6e;
  --h2-color: #6b6b6e;
  --h3-color: #6b6b6e;
  --link-color: #5a8cda;
  --settings-button-text-color: black;
  --settings-button-background-color: #ebebeb;
  --settings-button-background-hover-color: #d4d4d4;
  --settings-button-secondary-color: #767676;
  --settings-background-color: white;
  --settings-shadow-color: #00000045;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #dfc9a2;
  --modal-background-color: white;
  --modal-border-color: #dfc9a2;
  --modal-shadow-color: #00000045;
  --modal-h2-text-color: black;
  --modal-h2-background-color: #ebebeb;
  --header-text-color: black;
  --header-background-color: #ebebeb;
  --header-shadow-color: #00000045;
  --nav-text-color: black;
  --nav-background-color: #ebebeb;
  --nav-background-hover-color: #d4d4d4;
  --header-input-text-color: black;
  --header-input-background-color: white;
  --header-input-accent-color: #dfc9a2;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #dfc9a2;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: black;
  --footer-text-color: black;
  --footer-background-color: #ebebeb;
  --footer-link-color: black;
  --button-text-color: black;
  --button-background-color: #ebebeb;
  --button-background-hover-color: #d4d4d4;
  --button-secondary-color: #767676;
  --button-red-text-color: white;
  --button-red-background-color: #ba0928;
  --button-red-background-hover-color: #9b0821;
  --button-red-secondary-color: #680516;
  --button-outline-text-color: black;
  --button-outline-background-color: white;
  --button-outline-background-hover-color: #fbfbfb;
  --button-outline-border-color: #ebebeb;
  --submit-button-text-color: white;
  --submit-button-background-color: #5a8cda;
  --submit-button-background-hover-color: #517ec4;
  --submit-button-secondary-color: #2d466d;
  --submit-button-small-spinner-color: white;
  --submit-button-small-spinner-secondary-color: #5a8cda;
  --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: #5a8cda;
  --table-pages-text-color: black;
  --table-pages-background-color: #ebebeb;
  --table-pages-button-text-color: black;
  --table-pages-button-background-color: #ebebeb;
  --table-pages-button-background-hover-color: #d4d4d4;
  --table-pages-button-secondary-color: #767676;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: black;
  --thead-background-color: #dfc9a2;
  --tr-odd-background-color: white;
  --tr-even-background-color: #eeeeee;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #e5d4b5;
  --sorting-decoration-color: #767676;
  --input-text-color: black;
  --input-background-color: #ebebeb;
  --input-readonly-text-color: #77777a;
  --input-readonly-background-color: #f8f8f8;
  --input-accent-color: #dfc9a2;
  --select-decoration-color: #5a8cda;
  --option-text-color: black;
  --checkbox-text-color: black;
  --checkbox-background-color: white;
  --checkbox-checked-color: #ebebeb;
  --checkbox-focus-color: black;
  --radio-text-color: black;
  --radio-background-color: white;
  --radio-checked-color: #5a8cda;
  --radio-focus-color: black;
  --spinner-color: black;
  --small-spinner-color: #5a8cda;
  --small-spinner-secondary-color: white;
  --validation-text-color: #cf0a2c;
  --form-error-message-text-color: #cf0a2c;
  --form-error-message-background-color: #f8dadf;
  --form-inform-message-text-color: #7ea7ac;
  --form-inform-message-background-color: #ecf2f3;
  --li-label-text-color: #77777a;
  --batch-fulfillment-progress-tracker-color: #ebebeb;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --theme-background-color: white;
  --theme-primary-color: #ebebeb;
  --theme-secondary-color: #dfc9a2;
  --theme-tertiary-color: #5a8cda;
  --theme-primary-hover-color: #d4d4d4;
  --theme-secondary-hover-color: #e5d4b5;
  --theme-tertiary-hover-color: #517ec4;
  --theme-text-color: black;
  --theme-text-on-primary-color: black;
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: white;
  --theme-shadow-color: #00000045;
  --theme-success-color: #05612a;
  --theme-error-color: #cf0a2c;
  --theme-inform-color: #7ea7ac;
}

.default-dark-theme {
  --main-text-color: rgba(255, 255, 255, 0.9);
  --main-background-color: #181818;
  --h1-color: white;
  --h2-color: white;
  --h3-color: white;
  --link-color: #b18508;
  --settings-button-text-color: rgba(255, 255, 255, 0.9);
  --settings-button-background-color: #474749;
  --settings-button-background-hover-color: #5f5f62;
  --settings-button-secondary-color: #242425;
  --settings-background-color: #181818;
  --settings-shadow-color: black;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #9c8d71;
  --modal-background-color: #181818;
  --modal-border-color: #9c8d71;
  --modal-shadow-color: black;
  --modal-h2-text-color: rgba(255, 255, 255, 0.9);
  --modal-h2-background-color: #474749;
  --header-text-color: rgba(255, 255, 255, 0.9);
  --header-background-color: #474749;
  --header-shadow-color: black;
  --nav-text-color: rgba(255, 255, 255, 0.9);
  --nav-background-color: #474749;
  --nav-background-hover-color: #5f5f62;
  --header-input-text-color: rgba(255, 255, 255, 0.9);
  --header-input-background-color: #181818;
  --header-input-accent-color: #9c8d71;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #dfc9a2;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: black;
  --footer-text-color: rgba(255, 255, 255, 0.9);
  --footer-background-color: #474749;
  --footer-link-color: rgba(255, 255, 255, 0.9);
  --button-text-color: rgba(255, 255, 255, 0.9);
  --button-background-color: #474749;
  --button-background-hover-color: #5f5f62;
  --button-secondary-color: #242425;
  --button-red-text-color: white;
  --button-red-background-color: #9b0821;
  --button-red-background-hover-color: #680516;
  --button-red-secondary-color: #48040f;
  --button-outline-text-color: rgba(255, 255, 255, 0.9);
  --button-outline-background-color: #181818;
  --button-outline-background-hover-color: #212122;
  --button-outline-border-color: #474749;
  --submit-button-text-color: rgba(255, 255, 255, 0.9);
  --submit-button-background-color: #b18508;
  --submit-button-background-hover-color: #b99121;
  --submit-button-secondary-color: #594304;
  --submit-button-small-spinner-color: rgba(255, 255, 255, 0.9);
  --submit-button-small-spinner-secondary-color: #b18508;
  --autocomplete-list-background-color: #181818;
  --autocomplete-list-border-color: #77777a;
  --autocomplete-list-element-hover-text-color: black;
  --autocomplete-list-element-hover-background-color: #9c8d71;
  --autocomplete-list-focus-text-color: rgba(255, 255, 255, 0.9);
  --autocomplete-list-focus-background-color: #b18508;
  --table-pages-text-color: rgba(255, 255, 255, 0.9);
  --table-pages-background-color: #474749;
  --table-pages-button-text-color: rgba(255, 255, 255, 0.9);
  --table-pages-button-background-color: #474749;
  --table-pages-button-background-hover-color: #5f5f62;
  --table-pages-button-secondary-color: #242425;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: black;
  --thead-background-color: #9c8d71;
  --tr-odd-background-color: #181818;
  --tr-even-background-color: #0e0e0e;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #c9b592;
  --sorting-decoration-color: #242425;
  --input-text-color: rgba(255, 255, 255, 0.9);
  --input-background-color: #303031;
  --input-readonly-text-color: #77777a;
  --input-readonly-background-color: #0c0c0c;
  --input-accent-color: #9c8d71;
  --select-decoration-color: #b18508;
  --option-text-color: rgba(255, 255, 255, 0.9);
  --checkbox-text-color: rgba(255, 255, 255, 0.9);
  --checkbox-background-color: #181818;
  --checkbox-checked-color: #474749;
  --checkbox-focus-color: black;
  --radio-text-color: rgba(255, 255, 255, 0.9);
  --radio-background-color: #181818;
  --radio-checked-color: #474749;
  --radio-focus-color: black;
  --spinner-color: white;
  --small-spinner-color: white;
  --small-spinner-secondary-color: #b18508;
  --validation-text-color: #ba0928;
  --form-error-message-text-color: #ba0928;
  --form-error-message-background-color: #e7a9b4;
  --form-inform-message-text-color: #71969b;
  --form-inform-message-background-color: #cddadc;
  --li-label-text-color: #77777a;
  --batch-fulfillment-progress-tracker-color: #0e0e0e;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --theme-background-color: #181818;
  --theme-primary-color: #474749;
  --theme-secondary-color: #9c8d71;
  --theme-tertiary-color: #b18508;
  --theme-primary-hover-color: #5f5f62;
  --theme-secondary-hover-color: #c9b592;
  --theme-tertiary-hover-color: #b99121;
  --theme-text-color: rgba(255, 255, 255, 0.9);
  --theme-text-on-primary-color: rgba(255, 255, 255, 0.9);
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: rgba(255, 255, 255, 0.9);
  --theme-shadow-color: black;
  --theme-success-color: #055726;
  --theme-error-color: #ba0928;
  --theme-inform-color: #71969b;
}

.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: #ba0928;
  --settings-button-secondary-color: #680516;
  --settings-background-color: white;
  --settings-shadow-color: #00000030;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #dfc9a2;
  --modal-background-color: white;
  --modal-border-color: #dfc9a2;
  --modal-shadow-color: #00000030;
  --modal-h2-text-color: white;
  --modal-h2-background-color: #cf0a2c;
  --header-text-color: white;
  --header-background-color: #cf0a2c;
  --header-shadow-color: #00000030;
  --nav-text-color: white;
  --nav-background-color: #cf0a2c;
  --nav-background-hover-color: #ba0928;
  --header-input-text-color: #75787b;
  --header-input-background-color: white;
  --header-input-accent-color: #dfc9a2;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #4968a5;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: white;
  --footer-text-color: white;
  --footer-background-color: #cf0a2c;
  --footer-link-color: white;
  --button-text-color: white;
  --button-background-color: #5a8cda;
  --button-background-hover-color: #4469a4;
  --button-secondary-color: #2d466d;
  --button-red-text-color: white;
  --button-red-background-color: #ba0928;
  --button-red-background-hover-color: #9b0821;
  --button-red-secondary-color: #680516;
  --button-outline-text-color: #5a8cda;
  --button-outline-background-color: white;
  --button-outline-background-hover-color: #dee8f8;
  --button-outline-border-color: #5a8cda;
  --submit-button-text-color: white;
  --submit-button-background-color: #cf0a2c;
  --submit-button-background-hover-color: #ba0928;
  --submit-button-secondary-color: #680516;
  --submit-button-small-spinner-color: white;
  --submit-button-small-spinner-secondary-color: #cf0a2c;
  --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-text-color: white;
  --table-pages-background-color: #cf0a2c;
  --table-pages-button-text-color: white;
  --table-pages-button-background-color: #cf0a2c;
  --table-pages-button-background-hover-color: #ba0928;
  --table-pages-button-secondary-color: #680516;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: #680516;
  --thead-text-color: white;
  --thead-background-color: #cf0a2c;
  --tr-odd-background-color: white;
  --tr-even-background-color: whitesmoke;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #e5d4b5;
  --sorting-decoration-color: #680516;
  --input-text-color: #75787b;
  --input-background-color: #ebebeb;
  --input-readonly-text-color: #77777a;
  --input-readonly-background-color: #f8f8f8;
  --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: #f8dadf;
  --form-inform-message-text-color: #7ea7ac;
  --form-inform-message-background-color: #ecf2f3;
  --li-label-text-color: #77777a;
  --batch-fulfillment-progress-tracker-color: #ebebeb;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --theme-background-color: white;
  --theme-primary-color: #cf0a2c;
  --theme-secondary-color: #dfc9a2;
  --theme-tertiary-color: #7ea7ac;
  --theme-primary-hover-color: #ba0928;
  --theme-secondary-hover-color: #e5d4b5;
  --theme-tertiary-hover-color: #71969b;
  --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: #00000030;
  --theme-success-color: #05612a;
  --theme-error-color: #cf0a2c;
  --theme-inform-color: #7ea7ac;
}

.ct-blue-theme {
  --main-text-color: #686868;
  --main-background-color: #f9f7f4;
  --h1-color: black;
  --h2-color: black;
  --h3-color: black;
  --link-color: #f23051;
  --settings-button-text-color: white;
  --settings-button-background-color: #384e79;
  --settings-button-background-hover-color: #2d3e61;
  --settings-button-secondary-color: #1c273d;
  --settings-background-color: white;
  --settings-shadow-color: #e8e0d1;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #c7c7c7;
  --modal-background-color: #f9f7f4;
  --modal-border-color: #c7c7c7;
  --modal-shadow-color: #e8e0d1;
  --modal-h2-text-color: white;
  --modal-h2-background-color: #384e79;
  --header-text-color: white;
  --header-background-color: #384e79;
  --header-shadow-color: #e8e0d1;
  --nav-text-color: white;
  --nav-background-color: #384e79;
  --nav-background-hover-color: #384e79;
  --header-input-text-color: #686868;
  --header-input-background-color: #f9f7f4;
  --header-input-accent-color: #c7c7c7;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #7ea7ac;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: black;
  --footer-text-color: white;
  --footer-background-color: #384e79;
  --footer-link-color: white;
  --button-text-color: white;
  --button-background-color: #384e79;
  --button-background-hover-color: #2d3e61;
  --button-secondary-color: #1c273d;
  --button-red-text-color: white;
  --button-red-background-color: #f23051;
  --button-red-background-hover-color: #da2b49;
  --button-red-secondary-color: #791829;
  --button-outline-text-color: #384e79;
  --button-outline-background-color: #f9f7f4;
  --button-outline-background-hover-color: #d2d5db;
  --button-outline-border-color: #384e79;
  --submit-button-text-color: white;
  --submit-button-background-color: #f23051;
  --submit-button-background-hover-color: #da2b49;
  --submit-button-secondary-color: #791829;
  --submit-button-small-spinner-color: white;
  --submit-button-small-spinner-secondary-color: #f23051;
  --autocomplete-list-background-color: #f9f7f4;
  --autocomplete-list-border-color: #77777a;
  --autocomplete-list-element-hover-text-color: black;
  --autocomplete-list-element-hover-background-color: #c7c7c7;
  --autocomplete-list-focus-text-color: white;
  --autocomplete-list-focus-background-color: #f23051;
  --table-pages-text-color: white;
  --table-pages-background-color: #384e79;
  --table-pages-button-text-color: white;
  --table-pages-button-background-color: #384e79;
  --table-pages-button-background-hover-color: #2d3e61;
  --table-pages-button-secondary-color: #1c273d;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: white;
  --thead-background-color: #384e79;
  --tr-odd-background-color: #fafafa;
  --tr-even-background-color: #ededed;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #2d3e61;
  --sorting-decoration-color: #c7c7c7;
  --input-text-color: #686868;
  --input-background-color: #ebebeb;
  --input-readonly-text-color: #77777a;
  --input-readonly-background-color: #f8f8f8;
  --input-accent-color: #c7c7c7;
  --select-decoration-color: #f23051;
  --option-text-color: #686868;
  --checkbox-text-color: white;
  --checkbox-background-color: #f9f7f4;
  --checkbox-checked-color: #384e79;
  --checkbox-focus-color: black;
  --radio-text-color: white;
  --radio-background-color: #f9f7f4;
  --radio-checked-color: #384e79;
  --radio-focus-color: black;
  --spinner-color: #f23051;
  --small-spinner-color: #f23051;
  --small-spinner-secondary-color: white;
  --validation-text-color: #cf0a2c;
  --form-error-message-text-color: #cf0a2c;
  --form-error-message-background-color: #f8dadf;
  --form-inform-message-text-color: #7ea7ac;
  --form-inform-message-background-color: #ecf2f3;
  --li-label-text-color: #77777a;
  --batch-fulfillment-progress-tracker-color: white;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --theme-background-color: #f9f7f4;
  --theme-primary-color: #384e79;
  --theme-secondary-color: #c7c7c7;
  --theme-tertiary-color: #f23051;
  --theme-primary-hover-color: #2d3e61;
  --theme-secondary-hover-color: #d2d2d2;
  --theme-tertiary-hover-color: #da2b49;
  --theme-text-color: #686868;
  --theme-text-on-primary-color: white;
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: white;
  --theme-shadow-color: #e8e0d1;
  --theme-success-color: #05612a;
  --theme-error-color: #cf0a2c;
  --theme-inform-color: #7ea7ac;
}

.topg-green-theme {
  --main-text-color: #333;
  --main-background-color: white;
  --h1-color: #7a0510;
  --h2-color: #7a0510;
  --h3-color: #7a0510;
  --link-color: #7a0510;
  --settings-button-text-color: white;
  --settings-button-background-color: #002911;
  --settings-button-background-hover-color: #1a3e29;
  --settings-button-secondary-color: #001509;
  --settings-background-color: white;
  --settings-shadow-color: #00000030;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #e1caa2;
  --modal-background-color: white;
  --modal-border-color: #e1caa2;
  --modal-shadow-color: #00000030;
  --modal-h2-text-color: white;
  --modal-h2-background-color: #002911;
  --header-text-color: white;
  --header-background-color: #002911;
  --header-shadow-color: #00000030;
  --nav-text-color: white;
  --nav-background-color: #002911;
  --nav-background-hover-color: #1a3e29;
  --header-input-text-color: #333;
  --header-input-background-color: white;
  --header-input-accent-color: #e1caa2;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #89a072;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: black;
  --footer-text-color: white;
  --footer-background-color: #002911;
  --footer-link-color: white;
  --button-text-color: white;
  --button-background-color: #002911;
  --button-background-hover-color: #1a3e29;
  --button-secondary-color: #001509;
  --button-red-text-color: white;
  --button-red-background-color: #ba0928;
  --button-red-background-hover-color: #9b0821;
  --button-red-secondary-color: #680516;
  --button-outline-text-color: #002911;
  --button-outline-background-color: white;
  --button-outline-background-hover-color: #ccd4cf;
  --button-outline-border-color: #002911;
  --submit-button-text-color: white;
  --submit-button-background-color: #7a0510;
  --submit-button-background-hover-color: #6e050e;
  --submit-button-secondary-color: #3d0308;
  --submit-button-small-spinner-color: white;
  --submit-button-small-spinner-secondary-color: #7a0510;
  --autocomplete-list-background-color: white;
  --autocomplete-list-border-color: #77777a;
  --autocomplete-list-element-hover-text-color: black;
  --autocomplete-list-element-hover-background-color: #e1caa2;
  --autocomplete-list-focus-text-color: white;
  --autocomplete-list-focus-background-color: #7a0510;
  --table-pages-text-color: white;
  --table-pages-background-color: #002911;
  --table-pages-button-text-color: white;
  --table-pages-button-background-color: #002911;
  --table-pages-button-background-hover-color: #1a3e29;
  --table-pages-button-secondary-color: #001509;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: black;
  --thead-background-color: #e1caa2;
  --tr-odd-background-color: white;
  --tr-even-background-color: whitesmoke;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #e5d4b5;
  --sorting-decoration-color: #001509;
  --input-text-color: #333;
  --input-background-color: #ebebeb;
  --input-readonly-text-color: #77777a;
  --input-readonly-background-color: #f8f8f8;
  --input-accent-color: #e1caa2;
  --select-decoration-color: #7a0510;
  --option-text-color: #333;
  --checkbox-text-color: white;
  --checkbox-background-color: white;
  --checkbox-checked-color: #002911;
  --checkbox-focus-color: black;
  --radio-text-color: white;
  --radio-background-color: white;
  --radio-checked-color: #002911;
  --radio-focus-color: black;
  --spinner-color: #7a0510;
  --small-spinner-color: #7a0510;
  --small-spinner-secondary-color: white;
  --validation-text-color: #cf0a2c;
  --form-error-message-text-color: #cf0a2c;
  --form-error-message-background-color: #f8dadf;
  --form-inform-message-text-color: #7ea7ac;
  --form-inform-message-background-color: #ecf2f3;
  --li-label-text-color: #77777a;
  --batch-fulfillment-progress-tracker-color: #ebebeb;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --theme-background-color: white;
  --theme-primary-color: #002911;
  --theme-secondary-color: #e1caa2;
  --theme-tertiary-color: #7a0510;
  --theme-primary-hover-color: #1a3e29;
  --theme-secondary-hover-color: #e5d4b5;
  --theme-tertiary-hover-color: #6e050e;
  --theme-text-color: #333;
  --theme-text-on-primary-color: white;
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: white;
  --theme-shadow-color: #00000030;
  --theme-success-color: #05612a;
  --theme-error-color: #cf0a2c;
  --theme-inform-color: #7ea7ac;
}

.natures-touch-chocolate-theme {
  --main-text-color: rgba(255, 255, 255, 0.9);
  --main-background-color: #231411;
  --h1-color: white;
  --h2-color: white;
  --h3-color: white;
  --link-color: #538d5b;
  --settings-button-text-color: rgba(255, 255, 255, 0.9);
  --settings-button-background-color: #3b2b2b;
  --settings-button-background-hover-color: #4f4040;
  --settings-button-secondary-color: #1e1616;
  --settings-background-color: #231411;
  --settings-shadow-color: black;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #bd9474;
  --modal-background-color: #231411;
  --modal-border-color: #bd9474;
  --modal-shadow-color: black;
  --modal-h2-text-color: rgba(255, 255, 255, 0.9);
  --modal-h2-background-color: #3b2b2b;
  --header-text-color: rgba(255, 255, 255, 0.9);
  --header-background-color: #3b2b2b;
  --header-shadow-color: black;
  --nav-text-color: rgba(255, 255, 255, 0.9);
  --nav-background-color: #3b2b2b;
  --nav-background-hover-color: #4f4040;
  --header-input-text-color: rgba(255, 255, 255, 0.9);
  --header-input-background-color: #231411;
  --header-input-accent-color: #bd9474;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #bd9474;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: black;
  --footer-text-color: rgba(255, 255, 255, 0.9);
  --footer-background-color: #3b2b2b;
  --footer-link-color: rgba(255, 255, 255, 0.9);
  --button-text-color: rgba(255, 255, 255, 0.9);
  --button-background-color: #3b2b2b;
  --button-background-hover-color: #4f4040;
  --button-secondary-color: #1e1616;
  --button-red-text-color: white;
  --button-red-background-color: #9b0821;
  --button-red-background-hover-color: #680516;
  --button-red-secondary-color: #48040f;
  --button-outline-text-color: rgba(255, 255, 255, 0.9);
  --button-outline-background-color: #231411;
  --button-outline-background-hover-color: #281916;
  --button-outline-border-color: #3b2b2b;
  --submit-button-text-color: rgba(255, 255, 255, 0.9);
  --submit-button-background-color: #538d5b;
  --submit-button-background-hover-color: #4b7f52;
  --submit-button-secondary-color: #2a472e;
  --submit-button-small-spinner-color: rgba(255, 255, 255, 0.9);
  --submit-button-small-spinner-secondary-color: #538d5b;
  --autocomplete-list-background-color: #231411;
  --autocomplete-list-border-color: #77777a;
  --autocomplete-list-element-hover-text-color: black;
  --autocomplete-list-element-hover-background-color: #bd9474;
  --autocomplete-list-focus-text-color: rgba(255, 255, 255, 0.9);
  --autocomplete-list-focus-background-color: #538d5b;
  --table-pages-text-color: rgba(255, 255, 255, 0.9);
  --table-pages-background-color: #3b2b2b;
  --table-pages-button-text-color: rgba(255, 255, 255, 0.9);
  --table-pages-button-background-color: #3b2b2b;
  --table-pages-button-background-hover-color: #4f4040;
  --table-pages-button-secondary-color: #1e1616;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: black;
  --thead-background-color: #bd9474;
  --tr-odd-background-color: #231411;
  --tr-even-background-color: #150c0a;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #aa8568;
  --sorting-decoration-color: #1e1616;
  --input-text-color: rgba(255, 255, 255, 0.9);
  --input-background-color: #321e1a;
  --input-readonly-text-color: #e8e7e6;
  --input-readonly-background-color: #140b09;
  --input-accent-color: #bd9474;
  --select-decoration-color: #538d5b;
  --option-text-color: rgba(255, 255, 255, 0.9);
  --checkbox-text-color: rgba(255, 255, 255, 0.9);
  --checkbox-background-color: #231411;
  --checkbox-checked-color: #3b2b2b;
  --checkbox-focus-color: black;
  --radio-text-color: rgba(255, 255, 255, 0.9);
  --radio-background-color: #231411;
  --radio-checked-color: #3b2b2b;
  --radio-focus-color: black;
  --spinner-color: white;
  --small-spinner-color: white;
  --small-spinner-secondary-color: #538d5b;
  --validation-text-color: #ba0928;
  --form-error-message-text-color: #ba0928;
  --form-error-message-background-color: #e7a9b4;
  --form-inform-message-text-color: #71969b;
  --form-inform-message-background-color: #cddadc;
  --li-label-text-color: #77777a;
  --batch-fulfillment-progress-tracker-color: #3c010b;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --theme-background-color: #231411;
  --theme-primary-color: #3b2b2b;
  --theme-secondary-color: #bd9474;
  --theme-tertiary-color: #538d5b;
  --theme-primary-hover-color: #4f4040;
  --theme-secondary-hover-color: #aa8568;
  --theme-tertiary-hover-color: #4b7f52;
  --theme-text-color: rgba(255, 255, 255, 0.9);
  --theme-text-on-primary-color: rgba(255, 255, 255, 0.9);
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: rgba(255, 255, 255, 0.9);
  --theme-shadow-color: black;
  --theme-success-color: #055726;
  --theme-error-color: #ba0928;
  --theme-inform-color: #71969b;
}

.kwiknet-retro-theme {
  --main-text-color: black;
  --main-background-color: white;
  --h1-color: #2f4f4f;
  --h2-color: #2f4f4f;
  --h3-color: #2f4f4f;
  --link-color: maroon;
  --settings-button-text-color: #2f4f4f;
  --settings-button-background-color: #d0ddd6;
  --settings-button-background-hover-color: #fbfbe1;
  --settings-button-secondary-color: #686f6b;
  --settings-background-color: white;
  --settings-shadow-color: #0000001c;
  --theme-selected-text-color: #333333;
  --theme-selected-background-color: #cccccc;
  --modal-background-color: white;
  --modal-border-color: #cccccc;
  --modal-shadow-color: #0000001c;
  --modal-h2-text-color: #2f4f4f;
  --modal-h2-background-color: #d0ddd6;
  --header-text-color: #3b503f;
  --header-background-color: #d0ddd6;
  --header-shadow-color: #0000001c;
  --nav-text-color: #3b503f;
  --nav-background-color: transparent;
  --nav-background-hover-color: transparent;
  --header-input-text-color: black;
  --header-input-background-color: white;
  --header-input-accent-color: #cccccc;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #d0ddd6;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: black;
  --footer-text-color: gray;
  --footer-background-color: white;
  --footer-link-color: gray;
  --button-text-color: #2f4f4f;
  --button-background-color: #d0ddd6;
  --button-background-hover-color: #fbfbe1;
  --button-secondary-color: #686f6b;
  --button-red-text-color: white;
  --button-red-background-color: #ba0928;
  --button-red-background-hover-color: #9b0821;
  --button-red-secondary-color: #680516;
  --button-outline-text-color: #2f4f4f;
  --button-outline-background-color: white;
  --button-outline-background-hover-color: #fbfbe1;
  --button-outline-border-color: #d0ddd6;
  --submit-button-text-color: white;
  --submit-button-background-color: gray;
  --submit-button-background-hover-color: #737373;
  --submit-button-secondary-color: #404040;
  --submit-button-small-spinner-color: white;
  --submit-button-small-spinner-secondary-color: gray;
  --autocomplete-list-background-color: white;
  --autocomplete-list-border-color: #77777a;
  --autocomplete-list-element-hover-text-color: #333333;
  --autocomplete-list-element-hover-background-color: #cccccc;
  --autocomplete-list-focus-text-color: white;
  --autocomplete-list-focus-background-color: gray;
  --table-pages-text-color: #2f4f4f;
  --table-pages-background-color: #d0ddd6;
  --table-pages-button-text-color: #2f4f4f;
  --table-pages-button-background-color: #d0ddd6;
  --table-pages-button-background-hover-color: #fbfbe1;
  --table-pages-button-secondary-color: #686f6b;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: #333333;
  --thead-background-color: #cccccc;
  --tr-odd-background-color: white;
  --tr-even-background-color: #f0f0f0;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #d6d6d6;
  --sorting-decoration-color: #686f6b;
  --input-text-color: black;
  --input-background-color: #ebebeb;
  --input-readonly-text-color: #77777a;
  --input-readonly-background-color: #f8f8f8;
  --input-accent-color: #cccccc;
  --select-decoration-color: gray;
  --option-text-color: black;
  --checkbox-text-color: #2f4f4f;
  --checkbox-background-color: white;
  --checkbox-checked-color: #d0ddd6;
  --checkbox-focus-color: black;
  --radio-text-color: #2f4f4f;
  --radio-background-color: white;
  --radio-checked-color: gray;
  --radio-focus-color: black;
  --spinner-color: #2f4f4f;
  --small-spinner-color: #2f4f4f;
  --small-spinner-secondary-color: white;
  --validation-text-color: #cf0a2c;
  --form-error-message-text-color: #cf0a2c;
  --form-error-message-background-color: #f8dadf;
  --form-inform-message-text-color: #7ea7ac;
  --form-inform-message-background-color: #ecf2f3;
  --li-label-text-color: #77777a;
  --batch-fulfillment-progress-tracker-color: #ebebeb;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --theme-background-color: white;
  --theme-primary-color: #d0ddd6;
  --theme-secondary-color: #cccccc;
  --theme-tertiary-color: gray;
  --theme-primary-hover-color: #fbfbe1;
  --theme-secondary-hover-color: #d6d6d6;
  --theme-tertiary-hover-color: #737373;
  --theme-text-color: black;
  --theme-text-on-primary-color: #2f4f4f;
  --theme-text-on-secondary-color: #333333;
  --theme-text-on-tertiary-color: white;
  --theme-shadow-color: #0000001c;
  --theme-success-color: #05612a;
  --theme-error-color: #cf0a2c;
  --theme-inform-color: #7ea7ac;
}
.kwiknet-retro-theme .site-header {
  background: radial-gradient(circle at left, #d0dcd2, #477551);
}
.kwiknet-retro-theme .header-nav-list-item a,
.kwiknet-retro-theme .header-nav-list-item div {
  text-shadow: 0 0 24px #d0ddd6, 0 0 8px #d0ddd6;
}
.kwiknet-retro-theme footer {
  position: relative;
}
.kwiknet-retro-theme footer:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  width: calc(100% - 20px);
  height: 1px;
  background: silver;
}
.kwiknet-retro-theme .settings-menu {
  box-shadow: 0 0 0 1px transparent;
}
.kwiknet-retro-theme .settings-menu.show-settings {
  box-shadow: 0 0 0 1px gray;
}
.kwiknet-retro-theme .header-nav-sub-list {
  background: #d0ddd6;
}
.kwiknet-retro-theme .table-pages-container {
  outline: 1px solid gray;
  outline-offset: -1px;
  z-index: 2;
}
.kwiknet-retro-theme table {
  outline: 1px solid gray;
  outline-offset: -1px;
  position: relative;
  z-index: 1;
}
.kwiknet-retro-theme thead {
  outline: 1px solid gray;
  outline-offset: -1px;
}

.sunny-day-theme {
  --main-text-color: rgba(255, 255, 255, 0.9);
  --main-background-color: linear-gradient(#046fbb, #3499ff);
  --h1-color: white;
  --h2-color: white;
  --h3-color: white;
  --link-color: #50182d;
  --settings-button-text-color: #ab0000;
  --settings-button-background-color: #ffd771;
  --settings-button-background-hover-color: #e6c266;
  --settings-button-secondary-color: #806c39;
  --settings-background-color: linear-gradient(#046fbb, #3499ff);
  --settings-shadow-color: #fffdf585;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #9dd4ff;
  --modal-background-color: linear-gradient(#046fbb, #3499ff);
  --modal-border-color: #9dd4ff;
  --modal-shadow-color: #fffdf585;
  --modal-h2-text-color: #ab0000;
  --modal-h2-background-color: #ffd771;
  --header-text-color: #ab0000;
  --header-background-color: #ffd771;
  --header-shadow-color: #fffdf585;
  --nav-text-color: #ab0000;
  --nav-background-color: #ffd771;
  --nav-background-hover-color: #e6c266;
  --header-input-text-color: #046fbb;
  --header-input-background-color: white;
  --header-input-accent-color: #9dd4ff;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #ab0000;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: white;
  --footer-text-color: white;
  --footer-background-color: #005e47;
  --footer-link-color: white;
  --button-text-color: #ab0000;
  --button-background-color: #ffd771;
  --button-background-hover-color: #e6c266;
  --button-secondary-color: #806c39;
  --button-red-text-color: white;
  --button-red-background-color: #50182d;
  --button-red-background-hover-color: #481629;
  --button-red-secondary-color: #280c17;
  --button-outline-text-color: #ffd771;
  --button-outline-background-color: linear-gradient(#046fbb, #3499ff);
  --button-outline-background-hover-color: linear-gradient(#046fbb, #3499ff);
  --button-outline-border-color: #ffd771;
  --submit-button-text-color: white;
  --submit-button-background-color: #50182d;
  --submit-button-background-hover-color: #481629;
  --submit-button-secondary-color: #280c17;
  --submit-button-small-spinner-color: white;
  --submit-button-small-spinner-secondary-color: #50182d;
  --autocomplete-list-background-color: linear-gradient(#046fbb, #3499ff);
  --autocomplete-list-border-color: #9dd4ff;
  --autocomplete-list-element-hover-text-color: black;
  --autocomplete-list-element-hover-background-color: #9dd4ff;
  --autocomplete-list-focus-text-color: white;
  --autocomplete-list-focus-background-color: #50182d;
  --table-pages-text-color: #ab0000;
  --table-pages-background-color: #ffd771;
  --table-pages-button-text-color: #ab0000;
  --table-pages-button-background-color: #ffd771;
  --table-pages-button-background-hover-color: #e6c266;
  --table-pages-button-secondary-color: #806c39;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: black;
  --thead-background-color: #9dd4ff;
  --tr-odd-background-color: #046fbb;
  --tr-even-background-color: #0463a7;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #8dbfe6;
  --sorting-decoration-color: #50182d;
  --input-text-color: #046fbb;
  --input-background-color: white;
  --input-readonly-text-color: #0093fb;
  --input-readonly-background-color: #9dd4ff;
  --input-accent-color: #9dd4ff;
  --select-decoration-color: #50182d;
  --option-text-color: #046fbb;
  --checkbox-text-color: #ab0000;
  --checkbox-background-color: #046fbb;
  --checkbox-checked-color: #ffd771;
  --checkbox-focus-color: black;
  --radio-text-color: #ab0000;
  --radio-background-color: #046fbb;
  --radio-checked-color: #ffd771;
  --radio-focus-color: black;
  --spinner-color: white;
  --small-spinner-color: #50182d;
  --small-spinner-secondary-color: white;
  --validation-text-color: #cf0a2c;
  --form-error-message-text-color: #cf0a2c;
  --form-error-message-background-color: #f8dadf;
  --form-inform-message-text-color: #7ea7ac;
  --form-inform-message-background-color: #ecf2f3;
  --li-label-text-color: white;
  --batch-fulfillment-progress-tracker-color: #046fbb;
  --health-status-healthy: #023b2d;
  --health-status-unhealthy: #50182d;
  --chip-text-color: var(--input-text-color);
  --theme-background-color: #046fbb;
  --theme-primary-color: #ffd771;
  --theme-secondary-color: #9dd4ff;
  --theme-tertiary-color: #50182d;
  --theme-primary-hover-color: #e6c266;
  --theme-secondary-hover-color: #8dbfe6;
  --theme-tertiary-hover-color: #481629;
  --theme-text-color: rgba(255, 255, 255, 0.9);
  --theme-text-on-primary-color: #ab0000;
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: white;
  --theme-shadow-color: #fffdf585;
  --theme-success-color: #05612a;
  --theme-error-color: #cf0a2c;
  --theme-inform-color: #7ea7ac;
}

.starry-night-theme {
  --main-text-color: #f5f1e7;
  --main-background-color: #0a183c;
  --h1-color: #9ab1db;
  --h2-color: #9ab1db;
  --h3-color: #9ab1db;
  --link-color: #9ab1db;
  --settings-button-text-color: #f5f1e7;
  --settings-button-background-color: #253e90;
  --settings-button-background-hover-color: #3a4fa8;
  --settings-button-secondary-color: #131f48;
  --settings-background-color: #0a183c;
  --settings-shadow-color: #c4c26a;
  --theme-selected-text-color: black;
  --theme-selected-background-color: #d4be50;
  --modal-background-color: #0a183c;
  --modal-border-color: #d4be50;
  --modal-shadow-color: #c4c26a;
  --modal-h2-text-color: #f5f1e7;
  --modal-h2-background-color: #253e90;
  --header-text-color: #f5f1e7;
  --header-background-color: #253e90;
  --header-shadow-color: #c4c26a;
  --nav-text-color: #f5f1e7;
  --nav-background-color: #253e90;
  --nav-background-hover-color: #3a4fa8;
  --header-input-text-color: #f5f1e7;
  --header-input-background-color: #0a183c;
  --header-input-accent-color: #d4be50;
  --env-header-background-color-dev: #05612a;
  --env-header-background-color-qa: #7ea7ac;
  --env-header-text-color-dev: white;
  --env-header-text-color-qa: black;
  --footer-text-color: #f5f1e7;
  --footer-background-color: #253e90;
  --footer-link-color: #f5f1e7;
  --button-text-color: #f5f1e7;
  --button-background-color: #253e90;
  --button-background-hover-color: #3a4fa8;
  --button-secondary-color: #131f48;
  --button-red-text-color: white;
  --button-red-background-color: #9b0821;
  --button-red-background-hover-color: #680516;
  --button-red-secondary-color: #48040f;
  --button-outline-text-color: #f5f1e7;
  --button-outline-background-color: #0a183c;
  --button-outline-background-hover-color: #0f204d;
  --button-outline-border-color: #253e90;
  --submit-button-text-color: #f5f1e7;
  --submit-button-background-color: #9ab1db;
  --submit-button-background-hover-color: #8b9fc5;
  --submit-button-secondary-color: #4d596e;
  --submit-button-small-spinner-color: #f5f1e7;
  --submit-button-small-spinner-secondary-color: #9ab1db;
  --autocomplete-list-background-color: #0a183c;
  --autocomplete-list-border-color: #77777a;
  --autocomplete-list-element-hover-text-color: black;
  --autocomplete-list-element-hover-background-color: #d4be50;
  --autocomplete-list-focus-text-color: #f5f1e7;
  --autocomplete-list-focus-background-color: #9ab1db;
  --table-pages-text-color: #f5f1e7;
  --table-pages-background-color: #253e90;
  --table-pages-button-text-color: #f5f1e7;
  --table-pages-button-background-color: #253e90;
  --table-pages-button-background-hover-color: #3a4fa8;
  --table-pages-button-secondary-color: #131f48;
  --table-pages-current-page-button-text-color: white;
  --table-pages-current-page-button-background-color: var(--button-secondary-color);
  --thead-text-color: black;
  --thead-background-color: #d4be50;
  --tr-odd-background-color: #0a183c;
  --tr-even-background-color: #07112b;
  --tr-odd-background-color-marked-for-removal: #b1b1b1;
  --tr-even-background-color-marked-for-removal: #9a9a9a;
  --sortable-column-hover-background-color: #ddcb73;
  --sorting-decoration-color: #131f48;
  --input-text-color: #f5f1e7;
  --input-background-color: #1b2b56;
  --input-readonly-text-color: #e6e6e9;
  --input-readonly-background-color: #000922;
  --input-accent-color: #d4be50;
  --select-decoration-color: #9ab1db;
  --option-text-color: #f5f1e7;
  --checkbox-text-color: #f5f1e7;
  --checkbox-background-color: #0a183c;
  --checkbox-checked-color: #253e90;
  --checkbox-focus-color: black;
  --radio-text-color: #f5f1e7;
  --radio-background-color: #0a183c;
  --radio-checked-color: #253e90;
  --radio-focus-color: black;
  --spinner-color: #f3e8da;
  --small-spinner-color: white;
  --small-spinner-secondary-color: #9ab1db;
  --validation-text-color: #ba0928;
  --form-error-message-text-color: #ba0928;
  --form-error-message-background-color: #e7a9b4;
  --form-inform-message-text-color: #71969b;
  --form-inform-message-background-color: #cddadc;
  --li-label-text-color: #9ab1db;
  --batch-fulfillment-progress-tracker-color: #3c010b;
  --health-status-healthy: #28a745;
  --health-status-unhealthy: #dc3545;
  --chip-text-color: #07122b;
  --theme-background-color: #0a183c;
  --theme-primary-color: #253e90;
  --theme-secondary-color: #d4be50;
  --theme-tertiary-color: #9ab1db;
  --theme-primary-hover-color: #3a4fa8;
  --theme-secondary-hover-color: #ddcb73;
  --theme-tertiary-hover-color: #8b9fc5;
  --theme-text-color: #f5f1e7;
  --theme-text-on-primary-color: #f5f1e7;
  --theme-text-on-secondary-color: black;
  --theme-text-on-tertiary-color: #f5f1e7;
  --theme-shadow-color: #c4c26a;
  --theme-success-color: #055726;
  --theme-error-color: #ba0928;
  --theme-inform-color: #71969b;
}

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;
  width: max-content;
  max-width: 400px;
  position: absolute;
  visibility: hidden;
  background-color: #e6eef9;
  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: #e6eef9 transparent transparent transparent;
}
.tooltip .tooltip-text:before {
  border-width: 7px;
  margin-right: -7px;
  border-color: #5a8cda transparent transparent transparent;
}
.tooltip.show-bottom .tooltip-text {
  transform: translate(-50%, 0);
}
.tooltip.show-bottom .tooltip-text:before {
  top: -14px;
  border-color: transparent transparent #5a8cda transparent;
}
.tooltip.show-bottom .tooltip-text:after {
  top: -12px;
  border-color: transparent transparent #e6eef9 transparent;
}
.tooltip.show-top-right .tooltip-text {
  transform: translate(-32px, -100%);
}
.tooltip.show-top-right .tooltip-text:before {
  left: 25px;
  right: unset;
}
.tooltip.show-top-right .tooltip-text:after {
  left: 26px;
  right: unset;
}

.tooltip-label {
  display: inline-flex;
  cursor: help;
  position: relative;
}
.tooltip-label.hide-icon {
  cursor: initial;
}
.tooltip-label.hide-icon .tooltip {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 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-left: 0;
  margin-top: 16px;
}
.tooltip-label.hide-icon .tooltip.show-bottom {
  top: 100%;
}
.tooltip-label.hide-icon .tooltip.show-bottom .tooltip-text {
  margin-top: 16px;
}
.tooltip-label.hide-icon:hover .tooltip-text {
  margin-top: -8px;
}
.tooltip-label.hide-icon:hover .tooltip.show-bottom .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: 1.625rem;
}

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;
}

a {
  text-decoration: none;
}

p a, li a, td a {
  color: var(--link-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
p a span, li a span, td a span {
  position: relative;
}
p a span:after, li a span:after, td 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, td a:hover span:after {
  width: 100%;
}
p a.button span:after, li a.button span:after, td a.button span:after {
  display: none;
}

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

thead {
  position: sticky;
  top: 0px;
  z-index: 1;
}

header + main thead {
  top: 56px;
}

.table-horizontal-scroll {
  overflow: auto;
  white-space: nowrap;
}

.table-horizontal-scroll thead {
  top: 0;
}

th {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 700;
  text-align: left;
  padding: 0;
}
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;
}
th.center .cell-outer-content {
  justify-content: center;
  text-align: center;
}
th.right .cell-outer-content {
  justify-content: right;
  text-align: right;
}
th.left .cell-outer-content {
  justify-content: left;
  text-align: left;
}
th.sticky-on-horizontal-scroll-left {
  position: sticky;
  left: 0;
  background: var(--thead-background-color);
  z-index: 1;
}
th.sticky-on-horizontal-scroll-right {
  position: sticky;
  right: 0;
  background: var(--thead-background-color);
  z-index: 1;
}

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

tbody tr {
  background: var(--tr-odd-background-color);
}
tbody tr.marked-for-removal {
  background: var(--tr-odd-background-color-marked-for-removal);
}
tbody tr.marked-for-removal td .marked-for-removal-text {
  line-height: 38px;
  color: white;
  text-decoration: line-through;
}
tbody tr.added {
  background: var(--highlighted-odd-color);
}

tbody tr.alt {
  background: var(--tr-even-background-color);
}
tbody tr.alt.marked-for-removal {
  background: var(--tr-even-background-color-marked-for-removal);
}
tbody tr.alt.added {
  background: var(--highlighted-even-color);
}

td {
  padding: 4px 8px;
  vertical-align: middle;
}
td.cell-align-top {
  vertical-align: top;
}
td.sticky-on-horizontal-scroll-left {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
td.sticky-on-horizontal-scroll-right {
  position: sticky;
  right: 0;
  z-index: 1;
  background: inherit;
}

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

ul {
  padding: 0 0 0 24px;
}

input[type=button], button, a.button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--button-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--button-text-color);
  height: 38px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
input[type=button]:hover, button:hover, a.button:hover {
  cursor: pointer;
}
input[type=button].disabled, button.disabled, a.button.disabled {
  cursor: default;
  background: var(--button-background-color);
}
input[type=button]:focus-visible, button:focus-visible, a.button:focus-visible {
  outline: 2px solid black;
}
input[type=button] .button-boundary, button .button-boundary, a.button .button-boundary {
  display: block;
  height: 42px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
input[type=button] .button-content, button .button-content, a.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);
  gap: 0.5rem;
}
input[type=button]:hover .button-content, input[type=button]:focus-visible .button-content, button:hover .button-content, button:focus-visible .button-content, a.button:hover .button-content, a.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, a.button:focus:hover .button-content {
  background: var(--button-background-hover-color);
}
input[type=button]:active, button:active, a.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, a.button:active .button-content {
  transform: translateY(8px) !important;
}
input[type=button].remove-button, button.remove-button, a.button.remove-button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--button-red-text-color);
  height: 38px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
  line-height: 19px;
  width: 38px;
}
input[type=button].remove-button:hover, button.remove-button:hover, a.button.remove-button:hover {
  cursor: pointer;
}
input[type=button].remove-button.disabled, button.remove-button.disabled, a.button.remove-button.disabled {
  cursor: default;
  background: var(--button-red-background-color);
}
input[type=button].remove-button:focus-visible, button.remove-button:focus-visible, a.button.remove-button:focus-visible {
  outline: 2px solid black;
}
input[type=button].remove-button .button-boundary, button.remove-button .button-boundary, a.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, a.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);
  gap: 0.5rem;
}
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, a.button.remove-button:hover .button-content, a.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, a.button.remove-button:focus:hover .button-content {
  background: var(--button-red-background-hover-color);
}
input[type=button].remove-button:active, button.remove-button:active, a.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, a.button.remove-button:active .button-content {
  transform: translateY(8px) !important;
}

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;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--button-red-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);
  gap: 0.5rem;
}
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;
}

inpput[type=button].outline-button .button-content, button.outline-button .button-content {
  color: var(--button-outline-text-color);
  background: var(--button-outline-background-color);
  border: 2px solid var(--button-outline-border-color);
  padding: 0 10px;
}
inpput[type=button].outline-button:focus:hover .button-content, button.outline-button:focus:hover .button-content {
  background: var(--button-outline-background-hover-color);
}

.button-group {
  display: flex;
  justify-content: center;
}
.button-group button,
.button-group button .button-boundary,
.button-group button .button-content {
  border-radius: 0;
}
.button-group button:first-child,
.button-group button:first-child .button-boundary,
.button-group button:first-child .button-content {
  border-radius: 4px 0 0 4px;
}
.button-group button:last-child,
.button-group button:last-child .button-boundary,
.button-group button:last-child .button-content {
  border-radius: 0 4px 4px 0;
}

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;
  }
}
.input-number-container {
  position: relative;
}
.input-number-container input[type=number]::-webkit-inner-spin-button,
.input-number-container input[type=number]::-webkit-outer-spin-button {
  display: none;
}
.input-number-container input[type=number] {
  appearance: textfield;
  text-align: center;
}
.input-number-container .number-buttons {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  top: 0;
  width: 28px;
  height: 100%;
  padding: 0 4px;
}
.input-number-container .number-buttons.number-up {
  right: 0;
}
.input-number-container .number-buttons.number-up .button-content:after {
  content: "+";
}
.input-number-container .number-buttons.number-down {
  left: 0;
}
.input-number-container .number-buttons.number-down .button-content:after {
  content: "-";
}
.input-number-container .number-buttons button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--input-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--button-text-color);
  height: 28px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
.input-number-container .number-buttons button:hover {
  cursor: pointer;
}
.input-number-container .number-buttons button.disabled {
  cursor: default;
  background: var(--input-background-color);
}
.input-number-container .number-buttons button:focus-visible {
  outline: 2px solid black;
}
.input-number-container .number-buttons button .button-boundary {
  display: block;
  height: 32px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.input-number-container .number-buttons button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--input-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: 28px;
  line-height: 28px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--input-background-color);
  gap: 0.5rem;
}
.input-number-container .number-buttons button:hover .button-content, .input-number-container .number-buttons button:focus-visible .button-content {
  transform: translateY(0px);
  box-shadow: 0 4px 0 0 var(--input-accent-color);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s steps(1, jump-start);
}
.input-number-container .number-buttons button:hover .button-content {
  background: var(--input-readonly-background-color);
}
.input-number-container .number-buttons button:focus:hover .button-content {
  background: var(--input-readonly-background-color);
}
.input-number-container .number-buttons button:active {
  background: var(--input-accent-color);
  transition: background 0.2s steps(1, jump-start);
}
.input-number-container .number-buttons button:active .button-content {
  transform: translateY(8px) !important;
}
.input-number-container .number-buttons button .button-content {
  padding: 0;
}
.input-number-container .number-buttons button .button-content:after {
  color: var(--select-decoration-color);
  font-size: 2rem;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -16px);
  pointer-events: none;
}
.input-number-container input[readonly] ~ .number-buttons button {
  display: none;
}

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
}

.site-header {
  display: flex;
  background-color: var(--header-background-color);
  transition: all 0.5s ease;
  height: 77px;
}
.site-header input:not(input[type=radio], input[type=checkbox]), .site-header select {
  color: var(--header-input-text-color);
  background: var(--header-input-background-color);
  border-bottom: 2px solid var(--header-input-accent-color);
  box-shadow: 0 0 0 0 var(--header-input-accent-color) inset;
}
.site-header input:not(input[type=radio], input[type=checkbox]):focus, .site-header select:focus {
  box-shadow: 0 -2px 0 0 var(--header-input-accent-color) inset;
}

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

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

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

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

.env-banner {
  height: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.env-banner-message {
  color: white;
}

.header-scrolled .env-banner + .site-header {
  box-shadow: none;
}

header:has(.env-banner) + main {
  padding-top: calc(77px + 2rem);
}

header.condense:has(.env-banner) + main {
  padding-top: calc(56px + 2rem);
}

.settings-menu {
  position: absolute;
  top: 74px;
  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;
}

.themes-menu.settings-menu {
  top: 16px;
}

.header-scrolled .themes-menu.settings-menu {
  top: 0;
}

.header-title {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 2.5rem;
  font-style: italic;
  color: var(--header-text-color);
  left: 16px;
  transition: transform 0.5s ease;
  cursor: default;
  white-space: nowrap;
  z-index: 1;
}
.header-title a {
  color: unset;
  text-decoration: none;
}

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

.header-search-bar {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  flex-basis: 468px;
  height: 100%;
}

.header-search-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 38px;
  height: 100%;
}

.header-welcome {
  font-size: 1.3rem;
  color: var(--nav-text-color);
}

.header-buttons {
  display: flex;
  column-gap: 0.5rem;
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button) {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--settings-button-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--settings-button-text-color);
  height: 48px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button):hover {
  cursor: pointer;
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button).disabled {
  cursor: default;
  background: var(--settings-button-background-color);
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button):focus-visible {
  outline: 2px solid black;
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button) .button-boundary {
  display: block;
  height: 52px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-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);
  gap: 0.5rem;
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button):hover .button-content, .header-buttons button:not(.theme-icon, .settings-button, .remove-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);
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button):hover .button-content {
  background: var(--settings-button-background-hover-color);
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button):focus:hover .button-content {
  background: var(--settings-button-background-hover-color);
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button):active {
  background: var(--settings-button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button):active .button-content {
  transform: translateY(8px) !important;
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button).header-icon .button-content {
  font-size: 2.5rem;
  padding: 0;
  width: 48px;
}
.header-buttons button:not(.theme-icon, .settings-button, .remove-button).header-icon .button-content svg {
  width: 32px;
  height: 32px;
}

header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button) {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--settings-button-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--settings-button-text-color);
  height: 38px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button):hover {
  cursor: pointer;
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button).disabled {
  cursor: default;
  background: var(--settings-button-background-color);
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button):focus-visible {
  outline: 2px solid black;
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button) .button-boundary {
  display: block;
  height: 42px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-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: 38px;
  line-height: 38px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--settings-button-background-color);
  gap: 0.5rem;
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button):hover .button-content, header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-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);
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button):hover .button-content {
  background: var(--settings-button-background-hover-color);
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button):focus:hover .button-content {
  background: var(--settings-button-background-hover-color);
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button):active {
  background: var(--settings-button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button):active .button-content {
  transform: translateY(8px) !important;
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button).header-icon .button-content {
  font-size: 2.5rem;
  padding: 0;
  width: 38px;
}
header.condense .header-buttons button:not(.theme-icon, .settings-button, .remove-button).header-icon .button-content svg {
  width: 24px;
  height: 24px;
}

.header-nav {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  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: auto;
  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;
  padding: 0 2rem;
  transition: all 0.5s ease;
  background-color: var(--nav-background-color);
  color: var(--nav-text-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex-grow: 1;
}
.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 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%;
  top: 100%;
}
.header-nav-sub-list a {
  height: 60px;
  padding: 0 40px;
  justify-content: flex-start;
}

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

header.condense .site-header {
  height: 56px;
}
header.condense .settings-menu {
  top: 53px;
}
header.condense .header-nav {
  font-size: 1.1rem;
}
header.condense.header-scrolled .site-header {
  height: 48px;
}
header.condense.header-scrolled .settings-menu {
  top: 45px;
}

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

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;
}

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

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

.close-button {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px;
}

.settings-button:not(.red-button), .cards-container .card button:not(.red-button),
.cards-container .card a.button:not(.red-button) {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--settings-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--main-text-color);
  height: 38px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
}
.settings-button:not(.red-button):hover, .cards-container .card button:not(.red-button):hover,
.cards-container .card a.button:not(.red-button):hover {
  cursor: pointer;
}
.settings-button:not(.red-button).disabled, .cards-container .card button:not(.red-button).disabled,
.cards-container .card a.button:not(.red-button).disabled {
  cursor: default;
  background: var(--settings-background-color);
}
.settings-button:not(.red-button):focus-visible, .cards-container .card button:not(.red-button):focus-visible,
.cards-container .card a.button:not(.red-button):focus-visible {
  outline: 2px solid black;
}
.settings-button:not(.red-button) .button-boundary, .cards-container .card button:not(.red-button) .button-boundary,
.cards-container .card a.button:not(.red-button) .button-boundary {
  display: block;
  height: 42px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.settings-button:not(.red-button) .button-content, .cards-container .card button:not(.red-button) .button-content,
.cards-container .card a.button:not(.red-button) .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--settings-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(--settings-background-color);
  gap: 0.5rem;
}
.settings-button:not(.red-button):hover .button-content, .cards-container .card button:not(.red-button):hover .button-content,
.cards-container .card a.button:not(.red-button):hover .button-content, .settings-button:not(.red-button):focus-visible .button-content, .cards-container .card button:not(.red-button):focus-visible .button-content,
.cards-container .card a.button:not(.red-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);
}
.settings-button:not(.red-button):hover .button-content, .cards-container .card button:not(.red-button):hover .button-content,
.cards-container .card a.button:not(.red-button):hover .button-content {
  background: var(--theme-selected-background-color);
}
.settings-button:not(.red-button):focus:hover .button-content, .cards-container .card button:not(.red-button):focus:hover .button-content,
.cards-container .card a.button:not(.red-button):focus:hover .button-content {
  background: var(--theme-selected-background-color);
}
.settings-button:not(.red-button):active, .cards-container .card button:not(.red-button):active,
.cards-container .card a.button:not(.red-button):active {
  background: var(--button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
.settings-button:not(.red-button):active .button-content, .cards-container .card button:not(.red-button):active .button-content,
.cards-container .card a.button:not(.red-button):active .button-content {
  transform: translateY(8px) !important;
}

.settings-button .button-boundary .button-content, .cards-container .card button .button-boundary .button-content,
.cards-container .card a.button .button-boundary .button-content {
  gap: 0;
}
.settings-button .button-boundary .button-content span, .cards-container .card button .button-boundary .button-content span,
.cards-container .card a.button .button-boundary .button-content span {
  flex: 1;
  margin: 0 8px;
}

.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 - 205px);
}

header.condense + main {
  padding-top: 56px;
  min-height: calc(100vh - 184px);
}

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

.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,
.summary-content {
  max-width: 900px;
}
.page-content.wide,
.summary-content.wide {
  max-width: 1200px;
}
.page-content.full-width,
.summary-content.full-width {
  max-width: unset;
}

.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;
  white-space: nowrap;
  cursor: pointer;
}
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-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  font-weight: 700;
  padding: 0;
  color: var(--footer-text-color);
}

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

footer p,
.toast p {
  padding: 0;
  margin: 0;
}

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

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

.site-toasts {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 8px;
  row-gap: 8px;
  z-index: 300;
  width: 100%;
  align-items: center;
  pointer-events: none;
}

.toast {
  position: relative;
  background: var(--main-background-color);
  box-shadow: 0 0 16px var(--header-shadow-color);
  pointer-events: auto;
  border-radius: 4px;
  overflow: hidden;
}
.toast .toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}
.toast .toast-duration {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  animation: toast-duration-deplete 4s linear forwards;
}
.toast .toast-duration.freeze {
  animation: none;
}
.toast .toast-duration.remove {
  animation-play-state: paused;
  transition: opacity 0.2s ease;
  opacity: 0%;
}
.toast.success .toast-duration {
  background: var(--theme-success-color);
}
.toast.inform .toast-duration {
  background: var(--theme-inform-color);
}
.toast.error .toast-duration {
  background: var(--theme-error-color);
}
.toast .toast-icon {
  display: flex;
}
.toast.success .toast-icon {
  color: var(--theme-success-color);
}
.toast.inform .toast-icon {
  color: var(--theme-inform-color);
}
.toast.error .toast-icon {
  color: var(--theme-error-color);
}
.toast button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--main-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--main-text-color);
  height: 20px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
  aspect-ratio: 1;
}
.toast button:hover {
  cursor: pointer;
}
.toast button.disabled {
  cursor: default;
  background: var(--main-background-color);
}
.toast button:focus-visible {
  outline: 2px solid black;
}
.toast button .button-boundary {
  display: block;
  height: 24px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.toast button .button-content {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(4px);
  border: none;
  border-radius: 4px;
  background: var(--main-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: 20px;
  line-height: 20px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--main-background-color);
  gap: 0.5rem;
}
.toast button:hover .button-content, .toast 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);
}
.toast button:hover .button-content {
  background: var(--theme-selected-background-color);
}
.toast button:focus:hover .button-content {
  background: var(--theme-selected-background-color);
}
.toast button:active {
  background: var(--button-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
.toast button:active .button-content {
  transform: translateY(8px) !important;
}
.toast button .button-content {
  padding: 0;
}

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

.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;
}

.decorate-required:after {
  content: " *";
  color: #cf0a2c;
}

.form-input-container {
  padding: 12px 0;
}
.form-input-container.required label:after {
  content: " *";
  color: #cf0a2c;
}

header label,
.form-input-container label,
.table-section label {
  font-size: 0.8rem;
  padding: 2px;
  line-height: normal;
}
header input:not(input[type=radio], input[type=checkbox]), header select, header textarea,
.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;
  box-shadow: 0 0 0 0 var(--input-accent-color) inset;
  transition: box-shadow 0.1s linear;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
header input:not(input[type=radio], input[type=checkbox]):focus, header select:focus, header textarea:focus,
.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;
}
header input:not(input[type=radio], input[type=checkbox])[readonly], header select[readonly], header textarea[readonly],
.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);
}
header input:not(input[type=radio], input[type=checkbox]).date-input, header select.date-input, header textarea.date-input,
.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: #ebebeb;
  pointer-events: auto;
  cursor: default;
}
header input:not(input[type=radio], input[type=checkbox]).change-detected, header select.change-detected, header textarea.change-detected,
.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;
}
header .select-container input:not(input[type=radio], input[type=checkbox]),
.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;
}
header .select-container select,
.form-input-container .select-container select,
.table-section .select-container select {
  padding-right: 38px;
  /* Match input padding to prevent arrow overlap with text */
  overflow: hidden;
  /* Hide text that overflows */
  text-overflow: ellipsis;
  /* Show "..." when text is cut off */
  white-space: nowrap;
  /* Prevent text from wrapping to multiple lines */
}
header .autocomplete-container input,
.form-input-container .autocomplete-container input,
.table-section .autocomplete-container input {
  text-overflow: ellipsis;
  /* Show "..." when text is cut off in InputSearch components */
}
header select option,
.form-input-container select option,
.table-section select option {
  color: var(--option-text-color);
}
header select[multiple],
.form-input-container select[multiple],
.table-section select[multiple] {
  height: 186px;
  overflow: auto;
}
header .validation-message,
header .warning-message,
.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;
  line-height: 0.875rem;
  margin: 4px 0 0 4px;
}
header .validation-message a,
header .warning-message a,
.form-input-container .validation-message a,
.form-input-container .warning-message a,
.table-section .validation-message a,
.table-section .warning-message a {
  color: var(--main-text-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
header .validation-message a span,
header .warning-message a span,
.form-input-container .validation-message a span,
.form-input-container .warning-message a span,
.table-section .validation-message a span,
.table-section .warning-message a span {
  position: relative;
}
header .validation-message a span:after,
header .warning-message a span:after,
.form-input-container .validation-message a span:after,
.form-input-container .warning-message a span:after,
.table-section .validation-message a span:after,
.table-section .warning-message a span:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-bottom: 2px solid var(--main-text-color);
  transition: width 0.2s ease;
}
header .validation-message a:hover span:after,
header .warning-message a:hover span:after,
.form-input-container .validation-message a:hover span:after,
.form-input-container .warning-message a:hover span:after,
.table-section .validation-message a:hover span:after,
.table-section .warning-message a:hover span:after {
  width: 100%;
}

.form-button-container {
  text-align: center;
}
.form-button-container input[type=button], .form-button-container button, .form-button-container a.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;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--submit-button-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--submit-button-text-color);
  height: 51px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
  margin: 12px 0;
  min-width: 300px;
}
.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);
  gap: 0.5rem;
}
.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 .button-content, .form-submit-section button .button-content {
  font-size: 1.4rem;
  padding: 0 2rem;
}
.form-submit-section input.disabled, .form-submit-section button.disabled {
  cursor: default;
  pointer-events: none;
}

.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;
  gap: 16px;
}
.form-same-line .form-input-container,
.form-same-line .form-button-container,
.form-same-line .select-container {
  flex-grow: 1;
  flex-basis: 100%;
}
.form-same-line .form-input-container.has-multiselect {
  min-width: 5rem;
  /* Ensure container is wide enough for label (prevents label truncation) */
}
.form-same-line .select-container {
  min-width: 0;
  /* Allow select containers to shrink below content size */
}

.form-allow-line-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.form-allow-line-wrap .form-input-container,
.form-allow-line-wrap .form-button-container,
.form-allow-line-wrap .select-container {
  flex-grow: 1;
}

.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-third {
  width: 32%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px;
}
.form-third .button-content {
  white-space: nowrap;
}

.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;
}

input[type=radio] {
  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(--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;
  cursor: pointer;
}
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);
}

.detail-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 0 1rem 0;
  margin: 12px 0;
  list-style: none;
  row-gap: 1rem;
}
.detail-list li {
  font-size: 1.3rem;
  flex-basis: 33.3333333333%;
  padding: 0 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 li.condense {
  padding: 0 2rem;
  font-size: 1.1rem;
}
.detail-list li.two-thirds {
  flex-basis: 66.6666666667% !important;
}
.detail-list li.one-half {
  flex-basis: 50% !important;
}
.detail-list.four-per-row li {
  flex-basis: 25%;
}
.detail-list.two-per-row li {
  flex-basis: 50%;
}
.detail-list.max-per-row li {
  flex: 1;
}

.form-checkbox-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.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;
}

.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: #f8f8f8;
  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: #e6eef9;
  color: #5a8cda;
  border-bottom-color: #5a8cda;
}

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

.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;
  height: 56px;
  box-sizing: border-box;
  z-index: 2;
}
.table-section h2 .edit-buttons-container {
  display: flex;
  column-gap: 0.25em;
}
.table-section h2 + table thead {
  top: 112px;
}
@supports (-webkit-appearance: none) {
  .table-section select {
    padding-right: 40px;
  }
}

.table-pages-container {
  display: flex;
  min-height: 37px;
  justify-content: space-around;
  color: var(--table-pages-text-color);
  background: var(--table-pages-background-color);
  position: sticky;
  top: 56px;
  z-index: 1;
}
.table-pages-container .page-count-input {
  flex: 1;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.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 .pages {
  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;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--table-pages-button-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--table-pages-button-text-color);
  height: 25px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
  min-width: 26px;
}
.table-pages-container button:hover {
  cursor: pointer;
}
.table-pages-container button.disabled {
  cursor: default;
  background: var(--table-pages-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(--table-pages-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(--table-pages-button-background-color);
  gap: 0.5rem;
}
.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(--table-pages-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(--table-pages-button-background-hover-color);
}
.table-pages-container button:focus:hover .button-content {
  background: var(--table-pages-button-background-hover-color);
}
.table-pages-container button:active {
  background: var(--table-pages-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 .button-content {
  padding: 1px 4px 3px 4px;
}
.table-pages-container .current-page {
  pointer-events: none;
}
.table-pages-container .current-page .button-content {
  color: var(--table-pages-current-page-button-text-color);
  background: var(--table-pages-current-page-button-background-color);
}
.table-pages-container + table thead {
  top: 93px;
}

h2 + .table-pages-container {
  top: 112px;
}
h2 + .table-pages-container + table thead {
  top: 149px;
}

.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-top-color: transparent;
  border-left-color: 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.wide {
  width: 100%;
  max-width: 600px;
}
.modal-content h2 {
  text-align: center;
  background: var(--modal-h2-background-color);
  color: var(--modal-h2-text-color);
  padding: 0.25em;
}
.modal-content .form-input-container {
  padding-top: 0;
}

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

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

.autocomplete-container {
  position: relative;
}

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

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

.autocomplete-container.alternate-colors .autocomplete-list-element:nth-child(odd) {
  background: var(--tr-odd-background-color);
}

.autocomplete-container.alternate-colors .autocomplete-list-element:nth-child(even) {
  background: var(--tr-even-background-color);
}

.autocomplete-list-element:hover,
.autocomplete-container.alternate-colors .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 .autocomplete-list-element.focus,
.autocomplete-container.alternate-colors .autocomplete-list-container .autocomplete-list-element.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;
}

.form-submit-section button .spinner-container:after {
  border-color: var(--submit-button-small-spinner-color);
  border-bottom-color: var(--submit-button-small-spinner-secondary-color);
}

.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: #99999b;
  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: #99999b;
  cursor: default;
}

.center-text {
  text-align: center !important;
}

.right-text {
  text-align: right !important;
}

.left-text {
  text-align: left !important;
}

: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;
}

.slide-off-screen-left {
  animation: slide-off-screen-left 0.5s ease-in-out forwards;
}

.slide-on-screen-right {
  animation: slide-on-screen-right 0.5s ease-in-out forwards;
}

.slide-sequence {
  animation: slide-off-screen-left 0.5s ease-in-out forwards, slide-on-screen-right 0.5s ease-in-out forwards 0.5s;
}

.slide-in-top {
  animation: slide-in-top 0.2s ease-in-out forwards;
}

.slide-out-top {
  animation: slide-out-top 0.2s ease-in-out 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);
  }
}
@keyframes slide-off-screen-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}
@keyframes slide-on-screen-right {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-in-top {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-out-top {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes toast-duration-deplete {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
#blazor-error-ui {
  background: #ffd9df;
  color: darkred;
  text-align: center;
  top: 50%;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0 3rem 12px 3rem;
  position: fixed;
  width: 100%;
  transform: translateY(-50%);
  z-index: 1000;
  box-sizing: border-box;
  box-shadow: 0 0 64px black;
  --button-background-color: red;
  --button-text-color: white;
  --button-background-hover-color: crimson;
  --button-secondary-color: darkred;
}
#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.";
}

.page {
  --logo-part-1-background-color: var(--theme-text-on-primary-color);
  --logo-part-2-background-color: var(--theme-text-on-primary-color);
  --progress-logo-part-1-background-color: var(--theme-text-on-primary-color);
  --progress-logo-part-2-background-color: var(--theme-text-on-primary-color);
  --notifications-count-text-color: var(--theme-text-on-tertiary-color);
  --notifications-count-background-color: var(--theme-tertiary-color);
  --badge-text-color: white;
  --status-being-fulfilled-border-color: #f6e7da;
  --status-out-for-delivery-background-color: #dec718;
  --status-being-fulfilled-background-color: #d48847;
  --status-being-fulfilled-background-color-on-hover: #cb6309;
  --status-out-for-delivery-border-color: #fefadd;
  --status-driver-submitted-background-color: #82b095;
  --status-driver-submitted-border-color: #dae7df;
  --status-retail-submitted-background-color: #5a8cda;
  --status-retail-submitted-background-color-on-hover: #4968a5;
  --status-retail-submitted-border-color: #e6eef9;
  --status-complete-background-color: #05612a;
  --status-complete-border-color: #82b095;
  --status-no-submission-background-color: #cf0a2c;
  --status-no-submission-border-color: #f8dadf;
  --stop-icon-color: var(--theme-tertiary-color);
  --stop-separator-color: var(--theme-secondary-color);
  --highlighted-color: yellow;
  --highlighted-odd-color: #ffff77;
  --highlighted-even-color: #fff253;
}
.page.ct-blue-theme {
  --logo-part-2-background-color: var(--theme-tertiary-color);
  --progress-logo-part-1-background-color: var(--theme-primary-color);
  --progress-logo-part-2-background-color: var(--theme-tertiary-color);
}
.page.kwik-trip-red-theme, .page.topg-green-theme {
  --progress-logo-part-1-background-color: var(--theme-primary-color);
  --progress-logo-part-2-background-color: var(--theme-primary-color);
}
.page.kwiknet-retro-theme {
  --logo-part-1-background-color: var(--theme-tertiary-color);
  --logo-part-2-background-color: var(--theme-tertiary-color);
}
.page.kwiknet-retro-theme .header-welcome {
  text-shadow: 0 0 24px var(--theme-text-on-primary-color), 0 0 8px var(--theme-text-on-primary-color);
  color: var(--theme-primary-color);
}
.page.kwiknet-retro-theme .cards-container .card {
  box-shadow: 0 0 0 1px var(--theme-tertiary-color);
}
.page.default-dark-theme, .page.natures-touch-chocolate-theme {
  --logo-part-1-background-color: white;
  --logo-part-2-background-color: white;
}
.page.default-light-theme {
  --driver-color: #889f72;
  --driver-accent-1-color: #fafcfb;
  --driver-accent-2-color: #edf4f1;
  --retail-color: #d97d73;
  --retail-accent-1-color: #fefafb;
  --retail-accent-2-color: #fbe9ed;
  --admin-color: #aab1b8;
  --admin-accent-1-color: #fcfdfe;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.default-dark-theme {
  --driver-color: #607b55;
  --driver-accent-1-color: #181918;
  --driver-accent-2-color: #0e0f0e;
  --retail-color: #b05955;
  --retail-accent-1-color: #1c1818;
  --retail-accent-2-color: #110f0f;
  --admin-color: #828d9b;
  --admin-accent-1-color: #191a1c;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.kwik-trip-red-theme {
  --driver-color: #889f72;
  --driver-accent-1-color: #fafcfb;
  --driver-accent-2-color: #edf4f1;
  --retail-color: #d97d73;
  --retail-accent-1-color: #fefafb;
  --retail-accent-2-color: #fbe9ed;
  --admin-color: #aab1b8;
  --admin-accent-1-color: #fcfdfe;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.ct-blue-theme {
  --driver-color: #799e88;
  --driver-accent-1-color: #f4f4f0;
  --driver-accent-2-color: #ebebe4;
  --retail-color: #ca7b89;
  --retail-accent-1-color: #f8f2f0;
  --retail-accent-2-color: #f2e6e2;
  --admin-color: #9bafcf;
  --admin-accent-1-color: #f6f5f3;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.topg-green-theme {
  --driver-color: #89a072;
  --driver-accent-1-color: #fafcfb;
  --driver-accent-2-color: #edf4f1;
  --retail-color: #da7d73;
  --retail-accent-1-color: #fefafb;
  --retail-accent-2-color: #fbe9ed;
  --admin-color: #abb1b8;
  --admin-accent-1-color: #fcfdfe;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.natures-touch-chocolate-theme {
  --driver-color: #738056;
  --driver-accent-1-color: #221612;
  --driver-accent-2-color: #150d0b;
  --retail-color: #c45d57;
  --retail-accent-1-color: #261412;
  --retail-accent-2-color: #180d0b;
  --admin-color: #95919d;
  --admin-accent-1-color: #241615;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.kwiknet-retro-theme {
  --driver-color: #7ca18b;
  --driver-accent-1-color: #fafcfb;
  --driver-accent-2-color: #edf4f1;
  --retail-color: #cd7e8c;
  --retail-accent-1-color: #fefafb;
  --retail-accent-2-color: #fbe9ed;
  --admin-color: #9eb2d2;
  --admin-accent-1-color: #fcfdfe;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.sunny-day-theme {
  --driver-color: #60a6aa;
  --driver-accent-1-color: #046fb8;
  --driver-accent-2-color: #0463a4;
  --retail-color: #b183ab;
  --retail-accent-1-color: #086db8;
  --retail-accent-2-color: #0761a4;
  --admin-color: #82b7f0;
  --admin-accent-1-color: #0670bc;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.starry-night-theme {
  --driver-color: #819941;
  --driver-accent-1-color: #0a193c;
  --driver-accent-2-color: #07122b;
  --retail-color: #d27642;
  --retail-accent-1-color: #0e183c;
  --retail-accent-2-color: #0a112b;
  --admin-color: #a3aa87;
  --admin-accent-1-color: #0c1a3f;
  --picking-accent-1-color: #f2ddcc;
  --picking-accent-2-color: #f3cca9;
}
.page.ct-blue-theme {
  --driver-color: #245659;
  --retail-color: #74335a;
  --admin-color: #4667a0;
}
.page.kwik-trip-red-theme {
  --driver-color: #2d502a;
  --retail-color: #ba0928;
  --admin-color: #a03e72;
}
.page.default-dark-theme, .page.natures-touch-chocolate-theme, .page.starry-night-theme {
  --highlighted-even-color: #b5621b;
  --highlighted-odd-color: #d48847;
  --picking-accent-1-color: #c87931fa;
  --picking-accent-2-color: #b85d13;
}
.page.sunny-day-theme {
  --highlighted-even-color: #ffd771;
  --highlighted-odd-color: #efca6b ;
}

.mobile-header-buttons {
  display: none;
}

.mobile-nav-menu {
  left: 0;
  right: unset;
  transform: translateX(-100%);
}
.mobile-nav-menu .header-nav-list {
  flex-direction: column;
}
.mobile-nav-menu .header-nav-list-item {
  height: 60px;
}
.mobile-nav-menu .header-nav-list-item:hover .header-nav-sub-list {
  display: none;
}
.mobile-nav-menu .header-nav-sub-list {
  top: 0;
  left: 100%;
  box-shadow: 0 8px 32px var(--settings-shadow-color);
  z-index: -1;
}
.mobile-nav-menu .header-nav-list-item a,
.mobile-nav-menu .header-nav-list-item div {
  background: var(--settings-background-color);
  color: var(--link-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mobile-nav-menu .header-nav-list-item a span,
.mobile-nav-menu .header-nav-list-item div span {
  position: relative;
}
.mobile-nav-menu .header-nav-list-item a span:after,
.mobile-nav-menu .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(--link-color);
  transition: width 0.2s ease;
}
.mobile-nav-menu .header-nav-list-item a:hover span:after,
.mobile-nav-menu .header-nav-list-item div:hover span:after {
  width: 100%;
}
.mobile-nav-menu.show-settings .header-nav-list-item:hover .header-nav-sub-list {
  display: block;
}

.retail-comments-heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.retail-comments-heading__left {
  justify-self: start;
}

.retail-comments-heading__title {
  justify-self: center;
  margin: 0;
}

.retail-comments-heading__right {
  justify-self: end;
  padding: 0 3rem 0 0;
}

.invoice-bulk-actions-submit-button {
  display: block;
  min-width: 9.5rem;
}

.invoice-bulk-actions-button-container {
  display: flex;
  gap: 1rem;
  padding: 0 0 0 3rem;
}

.logo {
  display: flex;
  width: 48px;
  height: 22px;
}
.logo .trailer {
  width: 32px;
  height: 20px;
  background: var(--logo-part-1-background-color);
  border-radius: 2px;
  position: relative;
  z-index: 2;
}
.logo .trailer .wheel {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--header-background-color);
  border: 2px solid var(--logo-part-1-background-color);
  border-radius: 50%;
  top: 15px;
}
.logo .trailer .wheel:nth-child(1) {
  left: 2px;
}
.logo .trailer .wheel:nth-child(2) {
  left: 23px;
}
.logo .trailer .wheel:nth-child(3) {
  left: 38px;
}
.logo .cabin {
  position: relative;
  width: 10px;
  height: 17px;
  background: var(--logo-part-2-background-color);
  margin-top: 3px;
  border-radius: 0 8px 0 0;
  opacity: 0.9;
}
.logo .cabin:after {
  content: "";
  display: block;
  position: absolute;
  width: 6px;
  height: 10px;
  background: var(--logo-part-2-background-color);
  border-radius: 0 4px 0 0;
  left: 10px;
  bottom: 0;
}

#offline-indicator {
  display: flex;
  color: var(--form-error-message-background-color);
}
#offline-indicator .bi-exclamation-triangle-fill {
  overflow: visible;
}

#offline-indicator-shadow feDropShadow {
  flood-color: var(--form-error-message-text-color);
}

.only-main main {
  padding-top: 0;
  min-height: unset;
}

.icon-button .button-content {
  padding: 0;
  width: 38px;
}

th {
  white-space: nowrap;
}

table thead tr th.driver-header {
  background: var(--driver-color);
}
table thead tr th.retail-header {
  background: var(--retail-color);
}
table thead tr th.picking-header {
  background: var(--status-being-fulfilled-background-color);
}
table thead tr th.driver-header {
  border-left: 2px solid var(--driver-color);
  border-right: 2px solid var(--driver-color);
}
table thead tr th.driver-header:has(+ th.driver-header) {
  border-right: none;
}
table thead tr th.driver-header + th.driver-header {
  border-left: none;
}
table thead tr th.retail-header {
  border-left: 2px solid var(--retail-color);
  border-right: 2px solid var(--retail-color);
}
table thead tr th.retail-header:has(+ th.retail-header) {
  border-right: none;
}
table thead tr th.retail-header + th.retail-header {
  border-left: none;
}
table thead tr th.picking-header {
  border-left: 2px solid var(--status-being-fulfilled-background-color);
  border-right: 2px solid var(--status-being-fulfilled-background-color);
}
table thead tr th.picking-header:has(+ th.picking-header) {
  border-right: none;
}
table thead tr th.picking-header + th.picking-header {
  border-left: none;
}

table tbody tr td.driver-data {
  border-left: 2px solid var(--driver-color);
  padding: 4px 1rem;
}
table tbody tr td.driver-data + td.driver-data {
  border-right: 2px solid var(--driver-color);
  border-left: none;
}
table tbody tr td.retail-data {
  border-left: 2px solid var(--retail-color);
  padding: 4px 1rem;
}
table tbody tr td.retail-data + td.retail-data {
  border-right: 2px solid var(--retail-color);
  border-left: none;
}
table tbody tr:last-child td.driver-data {
  border-bottom: 2px solid var(--driver-color);
}
table tbody tr:last-child td.retail-data {
  border-bottom: 2px solid var(--retail-color);
}
table tbody tr td.driver-data {
  background: var(--driver-accent-1-color);
}
table tbody tr.alt td.driver-data {
  background: var(--driver-accent-2-color);
}
table tbody tr td.retail-data {
  background: var(--retail-accent-1-color);
}
table tbody tr.alt td.retail-data {
  background: var(--retail-accent-2-color);
}
table tbody tr td.picking-data {
  border-left: 2px solid var(--status-being-fulfilled-background-color);
  background: var(--picking-accent-1-color);
}
table tbody tr.alt td.picking-data {
  border-left: 2px solid var(--status-being-fulfilled-background-color);
  background: var(--picking-accent-2-color);
}
table tbody tr td.added {
  color: black;
  background: var(--highlighted-color);
  position: relative;
}

.table-section input:not(input[type=radio], input[type=checkbox]).highlighted {
  color: black;
  background: var(--highlighted-color);
}

.nested-table {
  box-sizing: border-box;
  margin: 0 0 3px 0;
  padding-bottom: 0;
  border: 3px solid #74747460;
  padding: 0;
}
.nested-table .table-section {
  margin-bottom: 0;
  padding: 0;
}

.invalid,
.unverified,
.still-picking {
  color: var(--validation-text-color);
}

.unverified:after,
.still-picking:after {
  position: absolute;
  content: "*";
  margin-left: 4px;
}

.credit-allowance {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.allowance,
.rebate {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  margin-top: 0.5rem;
  font-style: italic;
  font-size: 0.8rem;
}

.detail-list li.row-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-button {
  position: fixed;
  left: 0;
  margin: 32px 48px;
  z-index: 20;
}

.cards-container {
  display: flex;
  gap: 2rem;
  justify-content: space-evenly;
}
.cards-container .card {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  background: var(--settings-background-color);
  padding: 0 0 0 0;
  box-shadow: 0 8px 32px var(--settings-shadow-color);
  opacity: 0;
  animation: slide-in-bottom 0.5s ease-out forwards;
}
.cards-container .card:nth-child(2) {
  animation-delay: 0.25s;
}
.cards-container .card img {
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
}
.receipt-details {
  min-width: 50%;
  font-size: 1rem;
}
.receipt-details div {
  padding-left: 2rem;
}

.receipt-note textarea {
  min-height: 78px;
  resize: none;
  overflow: hidden;
}
.receipt-note.driver-note {
  color: var(--driver-color);
}
.receipt-note.driver-note textarea[readonly] {
  color: var(--driver-color);
  background: var(--driver-accent-1-color);
  border-bottom-color: var(--driver-color);
}
.receipt-note.retail-note {
  color: var(--retail-color);
}
.receipt-note.retail-note textarea[readonly] {
  color: var(--retail-color);
  background: var(--retail-accent-1-color);
  border-bottom-color: var(--retail-color);
}
.receipt-note.admin-note {
  color: var(--admin-color);
}
.receipt-note.admin-note textarea[readonly] {
  color: var(--admin-color);
  background: var(--admin-accent-1-color);
  border-bottom-color: var(--admin-color);
}

.receipt-note .htmldisplay-note {
  min-height: 78px;
  resize: none;
  overflow: hidden;
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  border: none;
  background: var(--input-readonly-background-color);
  color: var(--input-readonly-text-color);
  margin: 0;
  border-bottom: 2px solid var(--input-accent-color);
  border-radius: 4px;
  display: block;
  width: 100%;
  padding: 8px;
  box-shadow: 0 0 0 0 var(--input-accent-color) inset;
  transition: box-shadow 0.1s linear;
  box-sizing: border-box;
}
.receipt-note.driver-note {
  color: var(--driver-color);
}
.receipt-note.driver-note p {
  color: var(--driver-color);
  background: var(--driver-accent-1-color);
  border-bottom-color: var(--driver-color);
}
.receipt-note.retail-note {
  color: var(--retail-color);
}
.receipt-note.retail-note p {
  color: var(--retail-color);
  background: var(--retail-accent-1-color);
  border-bottom-color: var(--retail-color);
}
.receipt-note.admin-note {
  color: var(--admin-color);
}
.receipt-note.admin-note p {
  color: var(--admin-color);
  background: var(--admin-accent-1-color);
  border-bottom-color: var(--admin-color);
}

.issue-note textarea {
  min-height: 78px;
  resize: none;
}

input[type=button].issue-button, button.issue-button {
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  border: none;
  border-radius: 4px;
  background: var(--button-red-background-color);
  font-size: 1.1rem;
  text-align: center;
  color: var(--button-red-text-color);
  height: 28px;
  padding: 0;
  transition: background 0.2s steps(1, jump-end);
  width: 28px;
}
input[type=button].issue-button:hover, button.issue-button:hover {
  cursor: pointer;
}
input[type=button].issue-button.disabled, button.issue-button.disabled {
  cursor: default;
  background: var(--button-red-background-color);
}
input[type=button].issue-button:focus-visible, button.issue-button:focus-visible {
  outline: 2px solid black;
}
input[type=button].issue-button .button-boundary, button.issue-button .button-boundary {
  display: block;
  height: 32px;
  top: -4px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
input[type=button].issue-button .button-content, button.issue-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: 28px;
  line-height: 28px;
  box-sizing: border-box;
  box-shadow: 0 4px 0 0 var(--button-red-background-color);
  gap: 0.5rem;
}
input[type=button].issue-button:hover .button-content, input[type=button].issue-button:focus-visible .button-content, button.issue-button:hover .button-content, button.issue-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].issue-button:focus:hover .button-content, button.issue-button:focus:hover .button-content {
  background: var(--button-red-background-hover-color);
}
input[type=button].issue-button:active, button.issue-button:active {
  background: var(--button-red-secondary-color);
  transition: background 0.2s steps(1, jump-start);
}
input[type=button].issue-button:active .button-content, button.issue-button:active .button-content {
  transform: translateY(8px) !important;
}

.issue-highlight {
  position: absolute;
  border: 2px solid var(--form-error-message-text-color);
  box-sizing: border-box;
  animation: fade-out 10s cubic-bezier(0.5, 0, 1, 1);
  animation-fill-mode: forwards;
  pointer-events: none;
  z-index: 1;
}

#error-log,
#log-section,
#error-warning {
  display: none;
}

#log-section {
  font-family: monospace;
  background: var(--form-error-message-background-color);
  color: var(--form-error-message-text-color);
}

#error-warning {
  position: sticky;
  top: 70px;
  z-index: 10;
}

#error-warning span {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: var(--form-error-message-background-color);
  color: var(--form-error-message-text-color);
  font-family: "Archer B", "Archer A", Rockwell, serif;
  font-weight: 700;
  font-size: 2rem;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  animation: error-pulse 2s linear infinite;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
#error-warning span:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  border-style: solid;
  border-width: 8px;
  border-color: transparent transparent var(--form-error-message-background-color) transparent;
  transform: translate(-50%, -100%);
  margin-top: 2px;
}

.header-scrolled + main #error-warning span {
  opacity: 1;
}

.notifications-count {
  font-family: proxima-nova, Tahoma, sans-serif;
  font-weight: 500;
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.8rem;
  line-height: 16px;
  height: 16px;
  width: 16px;
  color: var(--notifications-count-text-color);
  background: var(--notifications-count-background-color);
  border-radius: 50%;
}

.status {
  vertical-align: middle;
  padding: 2px 4px 2px 4px;
  display: inline-block;
  border-radius: 4px;
  border: 3px solid;
  align-items: center;
  color: var(--badge-text-color);
  text-align: center;
  width: 126px;
}
.status.being-fulfilled {
  background: var(--status-being-fulfilled-background-color);
  border-color: var(--status-being-fulfilled-border-color);
}
.status.out-for-delivery {
  background: var(--status-out-for-delivery-background-color);
  border-color: var(--status-out-for-delivery-border-color);
}
.status.driver-submitted {
  background: var(--status-driver-submitted-background-color);
  border-color: var(--status-driver-submitted-border-color);
}
.status.retail-submitted {
  background: var(--status-retail-submitted-background-color);
  border-color: var(--status-retail-submitted-border-color);
}
.status.complete {
  background: var(--status-complete-background-color);
  border-color: var(--status-complete-border-color);
}
.status.no-submission {
  background: var(--status-no-submission-background-color);
  border-color: var(--status-no-submission-border-color);
}

.retail-notes-comment {
  float: right;
  font-size: 0.8rem;
  padding: 2px;
  color: var(--validation-text-color);
}
.retail-notes-comment a {
  color: var(--main-text-color);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.retail-notes-comment a span {
  position: relative;
}
.retail-notes-comment a span:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-bottom: 2px solid var(--main-text-color);
  transition: width 0.2s ease;
}
.retail-notes-comment a:hover span:after {
  width: 100%;
}

#embed-container {
  width: 100%;
  height: calc(100vh - 319px);
  min-height: 400px;
}
#embed-container iframe {
  border: none;
  box-shadow: 0 8px 32px var(--settings-shadow-color);
}

.kwiknet-retro-theme #embed-container iframe {
  box-shadow: 0 0 0 1px gray;
}

.batch-fulfillment-progress-tracker {
  background-color: var(--batch-fulfillment-progress-tracker-color);
  border-radius: 0.25rem;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0px 4px 4px 0.25px rgba(0, 0, 0, 0.1);
  position: relative;
}

.tracking-line {
  position: absolute;
  top: 50px;
  width: 100%;
  flex-grow: 1;
  height: 3px;
  background-color: gray;
  z-index: -1;
}
.tracking-line.first {
  left: 50%;
}
.tracking-line.complete {
  background-color: var(--status-retail-submitted-background-color);
}
.tracking-line.in-progress {
  background-color: var(--status-being-fulfilled-background-color);
}
.tracking-line.last {
  left: 0%;
  width: 50%;
}

.batch-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 20px;
  flex: 1;
}
.batch-step.not-started .batch-circle button {
  pointer-events: none;
}
.batch-step.not-started .batch-circle {
  background-color: gray;
  border-color: gray;
}
.batch-step.complete .batch-circle {
  background-color: var(--status-retail-submitted-background-color);
}
.batch-step.complete .batch-circle button:hover {
  background-color: var(--status-retail-submitted-background-color-on-hover);
}
.batch-step.complete.selected .batch-circle button {
  background-color: var(--status-retail-submitted-background-color-on-hover);
}
.batch-step.in-progress .batch-circle {
  background-color: var(--status-being-fulfilled-background-color);
  animation: in-progress-pulse 2s linear infinite;
}
.batch-step.in-progress .batch-circle button:hover {
  background-color: var(--status-being-fulfilled-background-color-on-hover);
}
.batch-step.in-progress.selected .batch-circle button {
  background-color: var(--status-being-fulfilled-background-color-on-hover);
}

@keyframes in-progress-pulse {
  0% {
    box-shadow: 0 0 32px transparent;
  }
  50% {
    box-shadow: 0 0 32px var(--status-being-fulfilled-background-color-on-hover);
  }
}
.batch-circle {
  background-color: white;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}

.batch-circle button {
  background-color: transparent;
  width: 4rem;
  height: 4rem;
  top: 5px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.batch-label {
  font-size: 1.25rem;
  text-align: center;
}

.batch-name-timestamp {
  font-size: 14px;
  text-align: center;
  color: var(--main-text-color);
  word-wrap: break-word;
  padding-top: 1rem;
}

.active-route-notification {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: -76px;
  margin-right: 48px;
}
.active-route-notification .message {
  width: 180px;
  text-align: right;
  margin-right: 16px;
  animation: active-route-notification-message-start 1s ease-in-out forwards;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.active-route-notification .message p {
  margin: 0;
}
.active-route-notification .message p:last-child {
  margin-bottom: 12px;
}
.active-route-notification .logo {
  margin: 0 23px;
  transform: scale(2);
  opacity: 0;
  left: -300px;
  top: -6px;
  animation: active-route-notification-logo-start 1s ease-in-out forwards;
}
.active-route-notification.end .message {
  animation: active-route-notification-message-end 1s ease-in-out forwards;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.active-route-notification.end .logo {
  opacity: 1;
  left: 0;
  animation: active-route-notification-logo-end 1s ease-in-out forwards;
}

.deliveries-progress {
  display: flex;
  justify-content: center;
}
.deliveries-progress .progress-container {
  overflow-x: auto;
}
.deliveries-progress .driver-progress {
  margin-bottom: 8px;
  margin-top: 48px;
}
.deliveries-progress .driver-progress .logo {
  left: 24px;
  margin-right: 0;
  transition: left 1s ease-in-out;
}
.deliveries-progress .stops {
  display: flex;
  position: relative;
}
.deliveries-progress .stops .stop {
  display: flex;
  position: relative;
  padding: 0 8px;
  flex-direction: column;
  align-items: center;
  font-size: 0.6rem;
  text-align: center;
  min-width: 80px;
}
.deliveries-progress .stops .stop .stop-icon {
  color: var(--stop-icon-color);
  transition: color 0.2s ease-in-out;
}
.deliveries-progress .stops .stop .stop-icon .bi {
  width: 32px;
  height: 32px;
}
.deliveries-progress .stops .stop.my-stop, .deliveries-progress .stops .stop.my-stop .stop-icon {
  color: var(--retail-color);
}
.deliveries-progress .stops .stop + .stop:before {
  content: "";
  display: block;
  position: absolute;
  width: 32px;
  border-bottom: 2px solid var(--stop-separator-color);
  left: 0;
  transform: translateX(-50%);
  top: 16px;
  transition: border-bottom-color 0.2s ease-in-out;
}
.deliveries-progress .stops .stop.skipped .stop-icon {
  color: var(--theme-error-color);
}
.deliveries-progress .stops .stop + .stop.skipped:before {
  border-bottom-color: var(--theme-error-color);
}
.deliveries-progress .stops .stop.completed .stop-icon {
  color: var(--driver-color);
}
.deliveries-progress .stops .stop + .stop.arrived:before {
  border-bottom-color: var(--driver-color);
}

.active-route-notification .logo .trailer,
.deliveries-progress .driver-progress .logo .trailer {
  background: var(--progress-logo-part-1-background-color);
}
.active-route-notification .logo .trailer .wheel,
.deliveries-progress .driver-progress .logo .trailer .wheel {
  background: var(--main-background-color);
  border: 2px solid var(--progress-logo-part-1-background-color);
}
.active-route-notification .logo .cabin,
.active-route-notification .logo .cabin:after,
.deliveries-progress .driver-progress .logo .cabin,
.deliveries-progress .driver-progress .logo .cabin:after {
  background: var(--progress-logo-part-2-background-color);
}

.deliveries-progress .driver-progress .progress-message {
  position: absolute;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 4px;
  left: 50%;
  top: 0;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--theme-secondary-color);
  color: var(--theme-text-on-secondary-color);
  z-index: 120;
  animation: progress-message-show 0.2s 1s ease forwards;
}
.deliveries-progress .driver-progress .progress-message:after {
  content: "";
  position: absolute;
  top: 100%;
  right: 50%;
  border-width: 6px;
  margin-right: -6px;
  border-style: solid;
  border-color: var(--theme-secondary-color) transparent transparent transparent;
}

.autocomplete-list-element .item-element {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.autocomplete-list-element .item-element .item-number {
  min-width: 4rem;
}
.autocomplete-list-element .item-element .item-description {
  display: flex;
  flex-direction: column;
}

@keyframes active-route-notification-logo-start {
  100% {
    left: 0;
    opacity: 1;
  }
}
@keyframes active-route-notification-logo-end {
  100% {
    left: 300px;
    opacity: 0;
  }
}
@keyframes active-route-notification-message-start {
  25% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes active-route-notification-message-end {
  100% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
@keyframes progress-message-show {
  100% {
    top: -12px;
    opacity: 1;
  }
}
@keyframes error-pulse {
  0% {
    box-shadow: 0 0 32px transparent;
  }
  50% {
    box-shadow: 0 0 32px var(--form-error-message-text-color);
  }
}
@media all and (max-width: 1340px) {
  .mobile-header-buttons {
    display: block;
  }

  .site-header-primary .header-nav {
    display: none;
  }

  .page-content, .summary-content, .table-content, .modal-content, .table-section {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen {
  .hide-on-screen {
    display: none;
  }
}
@media print {
  * {
    background: none !important;
    color: black !important;
    box-shadow: none !important;
    outline: none !important;
  }

  header, footer, .site-toasts, .number-buttons, .edit-buttons-container, .hide-on-print {
    display: none !important;
  }

  html {
    font-size: 7pt !important;
  }

  main {
    padding-top: 0 !important;
  }

  h1 {
    font-size: 2rem !important;
    padding: 1.5rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.125rem !important;
    padding: 0 !important;
  }

  .page-content,
.summary-content,
.table-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .form-section, .page-section {
    flex-basis: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .detail-list {
    margin: 0 !important;
  }
  .detail-list li {
    padding: 0 !important;
  }

  table {
    border: 1px solid black !important;
  }

  /* Chrome-specific print workaround for table layout issues */
  @supports (-webkit-appearance: none) {
    table {
      table-layout: auto !important;
    }

    /* Force Chrome to recalculate table layout */
    .table-horizontal-scroll {
      overflow: visible !important;
    }

    /* Ensure sticky columns maintain their position in Chrome print */
    th.sticky-on-horizontal-scroll-right,
td.sticky-on-horizontal-scroll-right {
      position: static !important;
      right: auto !important;
    }
  }
  thead, .table-section h2 {
    position: relative !important;
    top: 0 !important;
    height: unset !important;
    padding-left: 0.25em !important;
  }

  th {
    border-bottom: 1px solid black !important;
    white-space: unset !important;
    line-height: 100%;
  }

  td {
    line-height: 100%;
    vertical-align: top;
  }

  input,
select,
textarea {
    box-shadow: none !important;
    border: 1px solid black !important;
    border-radius: 0 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    height: unset !important;
    min-height: 26px !important;
  }

  button,
a.button {
    height: unset !important;
    min-height: 26px;
  }

  .button-boundary {
    height: unset !important;
    min-height: 30px !important;
  }

  .button-content {
    border: 1px solid black !important;
    height: unset !important;
    min-height: 26px !important;
    line-height: unset !important;
  }

  .outline-button .button-content,
.pages button:not(.current-page) .button-content,
.issue-button .button-content,
.nested-table {
    border: none !important;
  }

  .issue-button,
.issue-button .button-boundary,
.issue-button .button-content {
    height: initial !important;
    min-height: initial !important;
  }

  .issue-button .button-boundary {
    top: 0 !important;
  }

  .issue-button .button-content {
    transform: none !important;
  }

  .rebate {
    margin-top: 0.25rem !important;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 0;
  }
}
.draggable-list-container .draggable-list-table tr[draggable=true] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: move;
  user-select: none;
  position: relative;
}
.draggable-list-container .draggable-list-table tr[draggable=true].dragging {
  opacity: 1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
  z-index: 1000;
  background: var(--table-background-color, white);
  touch-action: none;
}
.draggable-list-container .draggable-list-table tr[draggable=true]:active {
  cursor: grabbing;
}
.draggable-list-container .draggable-list-table tr[draggable=true]:focus {
  outline: 2px solid var(--theme-primary-color);
  outline-offset: -2px;
}
.draggable-list-container .draggable-list-table tr[draggable=true][aria-grabbed=true] {
  outline: 3px solid var(--theme-primary-color);
  outline-offset: -3px;
}
.draggable-list-container .draggable-list-table .drag-placeholder {
  background: transparent;
  pointer-events: none;
  border: none !important;
}
.draggable-list-container .draggable-list-table .drag-placeholder td {
  padding: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
  border: none !important;
}
.draggable-list-container .draggable-list-table .drag-handle-cell {
  width: 40px;
  text-align: center;
  padding: 8px;
  cursor: grab;
  touch-action: none;
}
.draggable-list-container .draggable-list-table .drag-handle-cell svg {
  opacity: 0.5;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.draggable-list-container .draggable-list-table .drag-handle-cell:hover svg {
  opacity: 1;
}
.draggable-list-container .draggable-list-table tr:active .drag-handle-cell {
  cursor: grabbing;
}

.delivery-map {
  width: 100%;
  height: 500px;
  border-radius: 8px;
  border: 1px solid var(--theme-secondary-color);
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.delivery-map .leaflet-popup-content-wrapper {
  border-radius: 8px;
}
.delivery-map .leaflet-popup-content {
  margin: 12px;
  font-family: inherit;
}

.map-info-message {
  background-color: var(--form-inform-background-color);
  color: var(--form-inform-text-color);
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.map-refresh-timestamp {
  color: var(--theme-error-color, #dc2626);
  font-weight: 600;
}

.truck-marker,
.store-marker {
  background: transparent;
  border: none;
}

.map-truck-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  height: 60px;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.5s ease-in-out;
}

.map-truck-cabin {
  width: 20px;
  height: 14px;
  background: var(--progress-logo-part-2-background-color, #2563eb);
  border-radius: 7px 7px 2px 2px;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.3);
  z-index: 2;
}
.map-truck-cabin:before {
  content: "";
  display: block;
  position: absolute;
  width: 18px;
  height: 6px;
  background: #f2e3e3;
  border-radius: 4px 4px 0 0;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.map-truck-trailer {
  width: 20px;
  height: 40px;
  background: var(--progress-logo-part-1-background-color, #2563eb);
  border-radius: 0 0 2px 2px;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: none;
  margin-top: -2px;
}

.map-truck-wheel {
  display: none;
}

.store-number-label {
  background: white !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
}
.store-number-label::before {
  display: none !important;
}

.store-marker .deliveries-progress .stops .stop {
  padding: 0;
  min-width: auto;
}
.store-marker .deliveries-progress .stops .stop .stop-icon {
  color: var(--stop-icon-color);
  transition: color 0.2s ease-in-out;
}
.store-marker .deliveries-progress .stops .stop .stop-icon .bi {
  width: 32px;
  height: 32px;
}
.store-marker .deliveries-progress .stops .stop.my-stop, .store-marker .deliveries-progress .stops .stop.my-stop .stop-icon {
  color: var(--retail-color);
}
.store-marker .deliveries-progress .stops .stop.skipped .stop-icon {
  color: var(--theme-error-color);
}
.store-marker .deliveries-progress .stops .stop.completed .stop-icon {
  color: var(--driver-color);
}