:root {
   /* UI Colours */
   --fa-text-primary: rgb(46, 73, 109);
   --fa-text-secondary: rgb(146, 151, 166);
   --fa-separator: rgb(210, 215, 230);
   --fa-button-hover: rgb(238, 236, 236);
   --fa-page-background: rgb(246, 248, 249);
   --fa-card-background: rgb(255, 255, 255);
   --fa-draggable-row: rgba(252, 250, 250, 0.905);
   --fa-request-response-card-header: rgb(230, 230, 230);
   --fa-dark-link: rgb(29, 106, 173);
   --fa-light-link: var(--fa-medium-blue-dark);
   --fa-table-row-hover-bg: rgb(248, 249, 250);
   --fa-table-row-selected-bg: var(--fa-medium-blue-medium);
   --fa-column-filter-background: rgb(220, 228, 240);
   --fa-table-column-hover-border: rgb(235, 235, 235);
   --fa-checkbox-hover-bg: var(--fa-medium-blue-ultralight);
   --fa-checkbox-hover-border: var(--fa-medium-blue-medium);
   --fa-checkbox-checked-bg: var(--fa-medium-blue-dark);
   --fa-checkbox-checked-border: var(--fa-medium-blue-ultradark);
   /* Reporting Colours */
   /* KPI Colours, used by our charts are defined in ui/static/js/custom-js */
   --fa-column-filter-background: rgb(220, 228, 240);
   --fa-medium-blue-ultradark: rgb(17, 64, 105);
   --fa-medium-blue-darker: rgb(26, 96, 158);
   --fa-medium-blue-dark: rgb(34, 127, 210);
   --fa-medium-blue-mediumdark: rgb(57, 143, 219);
   --fa-medium-blue-medium: rgb(80, 158, 227);
   --fa-medium-blue-light: rgb(135, 188, 236);
   --fa-medium-blue-ultralight: rgb(218, 236, 251);
   --fa-dark-blue-ultradark: rgb(41, 41, 70);
   --fa-dark-blue-darker: rgb(61, 62, 106);
   --fa-dark-blue-dark: rgb(81, 82, 141);
   --fa-dark-blue-mediumdark: rgb(97, 98, 157);
   --fa-dark-blue-medium: rgb(113, 114, 173);
   --fa-dark-blue-light: rgb(153, 154, 196);
   --fa-dark-blue-ultralight: rgb(229, 229, 241);
   --fa-green-ultradark: rgb(9, 11, 7);
   --fa-green-darker: rgb(31, 43, 17);
   --fa-green-dark: rgb(52, 75, 27);
   --fa-green-mediumdark: rgb(94, 133, 52);
   --fa-green-medium: rgb(136, 191, 77);
   --fa-green-light: rgb(167, 208, 124);
   --fa-green-ultralight: rgb(235, 245, 224);
   --fa-purple-ultradark: rgb(69, 47, 88);
   --fa-purple-ultradark: rgb(104, 71, 132);
   --fa-purple-dark: rgb(138, 94, 176);
   --fa-purple-mediumdark: rgb(154, 116, 187);
   --fa-purple-medium: rgb(169, 137, 197);
   --fa-purple-light: rgb(200, 180, 218);
   --fa-purple-ultralight: rgb(235, 227, 242);
   --fa-red-ultradark: rgb(115, 42, 42);
   --fa-red-darker: rgb(173, 63, 63);
   --fa-red-dark: rgb(231, 84, 84);
   --fa-red-mediumdark: rgb(235, 112, 112);
   --fa-red-medium: rgb(239, 140, 140);
   --fa-red-light: rgb(247, 196, 196);
   --fa-red-ultralight: rgb(252, 218, 218);
   --fa-yellow-ultradark: rgb(123, 98, 15);
   --fa-yellow-darker: rgb(216, 172, 27);
   --fa-yellow-dark: rgb(247, 196, 31);
   --fa-yellow-mediumdark: rgb(248, 204, 62);
   --fa-yellow-medium: rgb(249, 212, 92);
   --fa-yellow-light: rgb(251, 228, 153);
   --fa-yellow-ultralight: rgb(255, 245, 214);
   --fa-orange-ultradark: rgb(118, 66, 26);
   --fa-orange-darker: rgb(178, 100, 40);
   --fa-orange-dark: rgb(237, 133, 53);
   --fa-orange-mediumdark: rgb(240, 151, 82);
   --fa-orange-medium: rgb(242, 168, 111);
   --fa-orange-light: rgb(251, 228, 153);
   --fa-orange-ultralight: rgb(253, 232, 216);
   --fa-cyan-ultradark: rgb(52, 100, 100);
   --fa-cyan-darker: rgb(78, 150, 150);
   --fa-cyan-dark: rgb(105, 200, 200);
   --fa-cyan-mediumdark: rgb(129, 209, 209);
   --fa-cyan-medium: rgb(152, 217, 217);
   --fa-cyan-light: rgb(199, 234, 234);
   --fa-cyan-ultralight: rgb(224, 245, 245);
}

.stats-simulation-values {
   color: var(--fa-cyan-darker);
}

.colorRequestResponseDataField {
   background-color: var(--fa-request-response-card-header);
}

.colorRuleSet {
   background-color: var(--fa-medium-blue-ultralight);
}

.colorTimeAggregate {
   background-color: var(--fa-green-ultralight);
}

.colorDistinctValue {
   background-color: var(--fa-green-ultralight);
}

.colorStoredValue {
   background-color: var(--fa-dark-blue-ultralight);
}

.colorExternal {
   background-color: var(--fa-red-ultralight);
}

.colorFormula {
   background-color: var(--fa-yellow-ultralight);
}

.colorDefinedRiskList {
   background-color: var(--fa-cyan-ultralight);
}

.colorProfile {
   background-color: var(--fa-green-ultralight);
}

.colorGroup {
   background-color: var(--fa-red-ultralight);
}

.colorPipelineRef {
   background-color: var(--fa-red-ultralight);
}

.colorDebug {
   background-color: var(--fa-dark-blue-ultralight);
}

.colorDataFieldOperation {
   background-color: var(--fa-dark-blue-ultralight);
}

.colorMongoInsert {
   background-color: var(--fa-orange-ultralight);
}

.colorMongoQuery {
   background-color: var(--fa-orange-ultralight);
}

.colorMongoUpdate {
   background-color: var(--fa-orange-ultralight);
}

.colorScoring {
   background-color: var(--fa-purple-ultralight);
}

.colorExternalPipelineGroup {
   background-color: var(--fa-red-ultralight);
}

.colorOther {
   background-color: var(--fa-orange-ultralight);
}

.color-swatch {
   /* For the test page only */
   border: 1px solid #ddd;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   min-width: 200px;
   text-align: center;
   color: #333;
}

.color-swatch-box {
   /* For the test page only */
   height: 80px;
   width: 100%;
   border-radius: 6px;
   margin-bottom: 10px;
   border: 1px solid rgba(0, 0, 0, 0.1);
}

body {
   background-color: var(--fa-page-background);
   font-family: "Lato", sans-serif;
   font-weight: 400;
   color: var(--fa-text-primary);
}

h1.large {
   /* Web site headers */
   font-size: 46px;
   margin-top: 2rem;
   margin-bottom: 1rem;
}

h1 {
   /* All page headers, software and documentation */
   font-size: 22px;
   font-weight: 700;
   margin-top: .5rem;
   margin-bottom: .8rem;
}

h2 {
   /* Secondary headers for software, in page and as primary headers for subsetions */
   font-size: 18px;
   font-weight: 700;
   line-height: 150%;
   margin-block-start: 1em;
   margin-block-end: 1em;
}

h3 {
   /* Primary headers for documentation with numbers (1.) */
   font-size: 18px;
   font-weight: 700;
   margin-block-start: 1.2em;
   margin-block-end: 1.1em;
}

h4 {
   /* Secondary headers for documentation with numbers (1.1) */
   font-size: 16px;
   font-weight: 700;
   margin-block-start: 1em;
   margin-block-end: 1em;
}

h5 {
   /* Tertiary headers for documentation with numbers (1.1.1) */
   font-size: 15px;
   font-weight: 700;
   margin-block-start: 1em;
   margin-block-end: 1em;
}

h6 {
   /* Quaternary headers for documentation without numbers */
   font-size: 14px;
   font-weight: 700;
   margin-block-start: 1.2em;
   margin-block-end: 1.2em;
}

.bi-hover-bold:hover {
   -webkit-text-stroke: 0.4px;
}

img {
   max-width: 100%;
}

p {
   /* Software pages standard text font */
   font-size: 14px;
   margin-block-start: 0.5em;
   margin-block-end: 0.5em;
}

p.large {
   /* Homepage standard text font */
   font-size: 16px;
}

ul,
li {
   font-size: 14px;
   margin-block-start: 0.2em;
   margin-block-end: 0.2em;
}

pre.fa-pre {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   margin: 0;
}

pre {
   margin-left: 30px;
   font-size: 12px;
}

code {
   margin-left: 3px;
   margin-right: 3px;
   color: var(--fa-text-primary);
   font-size: 12px;
}

.deemphasis {
   color: var(--fa-text-secondary);
}

.bold {
   font-weight: 700;
}

.place-holder {
   font-style: italic;
   color: var(--fa-text-secondary);
}

.fa-link,
.fa-btn {
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none;
   color: var(--fa-dark-link) !important;
}

.fa-link:hover,
.fa-link.show {
   text-decoration: underline;
   color: var(--fa-dark-link) !important;
}

.fa-link.disabled {
   opacity: 0.5;
   pointer-events: none;
}

#audit_logs .fa-link {
   font-size: 14px;
   font-weight: normal;
   cursor: pointer;
   text-decoration: none;
}

#audit_logs .fa-link:hover {
   color: var(--fa-gey) !important;
}

.card-feature-link {
   display: block;
   font-weight: normal;
}

.right {
   text-align: right;
}

.close {
   vertical-align: -5%;
   margin-left: -5%;
}

.fa-btn {
   border: 0;
   outline: none;
   background-color: transparent;
   cursor: pointer;
   color: var(--fa-text-primary);
   padding: 5px 10px;
   border-radius: 6px;
   transition: background-color 0.5s;
}

.fa-btn-round {
   border-radius: 50%;
   padding: 5px;
   width: 2rem;
   height: 2rem;
   display: inline-flex;
   justify-content: center;
   align-items: center;
}

.fa-btn:hover {
   background-color: var(--fa-button-hover);
   text-decoration: none;
}

.fa-btn:disabled,
.fa-btn.disabled {
   color: var(--fa-text-secondary) !important;
   background-color: transparent;
   cursor: default;
}

.navbar-nav .nav-link.show {
   text-decoration: none;
}

a:visited,
a:link,
a:active {
   text-decoration: none;
   color: var(--fa-light-link);
}

a:hover {
   text-decoration: underline;
   color: var(--fa-light-link);
}

/*
a.delete:hover {
   color: var(--fa-red-dark);
}

a:disabled,
a.disabled {
   color: var(--fa-text-secondary) !important;
}
*/

button.fa-btn.fa-link {
   background-color: unset;
   padding: 0;
}

a.fa-btn:hover {
   color: var(--fa-dark-link);
}

/*
.fa-btn-primary {
   color: var(--fa-medium-blue-medium);
}

.fa-btn-primary:hover {
   background-color: var(--fa-medium-blue-ultralight);
}

.fa-btn-secondary {
   color: var(--fa-cyan-dark);
}

.fa-btn-secondary:hover {
   background-color: var(--fa-cyan-ultralight);
}

.fa-btn-success {
   color: var(--fa-green-medium);
}

.fa-btn-success:hover {
   background-color: var(--fa-green-ultralight);
}

.fa-btn-danger {
   color: var(--fa-red-dark);
}
*/

.fa-btn-danger:hover {
   background-color: var(--fa-red-ultralight);
}

.fa-btn-danger:disabled {
   background-color: unset;
}


.fa-close-btn {
   font-size: 1.5rem;
}

/* Input default styles */
input,
textarea,
div.dt-container .dt-search input,
div.dt-container .dt-length select {
   border: 1px solid var(--fa-separator);
   border-radius: 5px;
   padding: 2px 2px 2px 8px;
}

div.dt-container .dt-search input,
div.dt-container .dt-length select {
   margin: 5px 0;
}

.dt-container .dt-length select {
   padding-top: 3px;
   /* to align with the search input */
   padding-bottom: 4px;
}

input:active,
input:focus,
textarea:active,
textarea:focus,
div.dt-container .dt-search input:active,
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:active,
div.dt-container .dt-length select:focus {
   outline: none !important;
   border: 1px solid var(--fa-medium-blue-medium);
   box-shadow: none !important;
}

div.dt-container .dt-search input,
tfoot input {
   transition: box-shadow .5s ease-in-out;
}

div.dt-container .dt-search input.fa-active-filter-highlight,
tfoot input.fa-active-filter-highlight {
   box-shadow: 0 0 5px 3px rgba(134, 183, 254, 0.6);
}

tfoot input.activeColFilter {
   background-color: var(--fa-column-filter-background);
}

.navbar {
   background-color: var(--fa-card-background);
   border-bottom: 1px solid var(--fa-separator);
}

.nav-link,
.nav-link:hover,
a.dropdown-item,
a.dropdown-item:hover {
   color: var(--fa-dark-link) !important;
}

ul.dropdown-menu {
   background-color: var(--fa-card-background);
   max-height: 450px;
   overflow-y: auto;
}

ul.dropdown-menu::-webkit-scrollbar {
   width: 10px;
}

ul.dropdown-menu::-webkit-scrollbar-track {
   background: #f1f1f1;
   /* Light gray background */
}

ul.dropdown-menu::-webkit-scrollbar-thumb {
   background: #c1c1c1;
   /* Medium gray thumb */
   border-radius: 5px;
}

ul.dropdown-menu::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
   /* Darker gray on hover */
}

ul.dropdown-menu::-webkit-scrollbar,
ul.dropdown-menu::-webkit-scrollbar-thumb,
ul.dropdown-menu::-webkit-scrollbar-track {
   cursor: default;
}

ul.dropdown-menu>li>a:hover {
   background-color: transparent;
   color: var(--fa-medium-blue-medium);
}

ul .dropdown-item,
ul .dropdown-item:hover {
   color: var(--fa-medium-blue-medium);
   font-weight: normal;
   font-size: 14px;
}

.dropdown-item.active,
.dropdown-item:active {
   background-color: var(--fa-medium-blue-medium);
}

ul.dropdown-menu .dropdown-item:disabled {
   color: var(--fa-text-secondary);
}

.dropdown-item.active,
.dropdown-item:active {
   color: var(--fa-text-primary);
}

#navbarSupportedContent .functionDropdown {
   left: -110px;
}

.navbarSearch {
   position: relative;
   align-self: center;
}

.navbarSearch>input#navbarSearchInput {
   background-color: var(--fa-card-background);
   align-self: center;
   padding-right: 30px;
}

.navbarSearch>label {
   position: absolute;
   right: 10px;
   top: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   cursor: pointer;
}

mark {
   padding: 0 !important;
}

hr {
   margin: .25rem 0;
}

.fa-container {
   padding: 16px 40px !important;
}

.fa-main-header {
   margin-bottom: 1rem;
}

.page-header div.dropdown {
   display: flex;
   align-items: center;
}

.fa-card {
   background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 3px 0px;
   border-radius: 8px;
}

.fa-form-container {
   padding: 1rem 1rem .5rem;
   margin-bottom: 1rem;
}

.fa-form-container-sm-margin {
   padding-left: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
}

.fa-form-container-sm-margin>div {
   margin-top: -4rem;
   margin-left: -12px;
   margin-right: -12px;
}

div.fa-form-container-sm-margin h2 {
   margin-left: 24px;
   margin-top: -4px;
}

div.with_checkboxes h2 {
   padding-left: 4px;
}

div.with_checkboxes input[type=checkbox] {
   margin-left: 4px;
}

div.with_checkboxes th.select-checkbox {
   width: 15px;
}

div.with_checkboxes .dataTableBottom {
   padding-left: 12px;
}

.fa-form-text {
   position: relative;
   left: -4px;
   margin-bottom: 1.5rem;
   margin-top: 2rem;
}

h2.formSubheader {
   margin-top: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   column-gap: .25rem;
}

div.with_checkboxes .toggle-icon {
   position: relative;
   top: -3px;
}

/* FA table */

table.fa-datatable {
   visibility: hidden;
   /*Hide the table until it's fully loaded, to prevent flickering. Visibility is set when table is initiated and wrapped in .datatableTableWrapper */
}
.datatableTableWrapper > table.fa-datatable {
   visibility: visible;
}

table {
   background-color: #fff;
}

table td,
table th {
   border-bottom: 1px solid var(--fa-separator) !important;
   font-weight: normal;
}

table.dataTable>thead>tr>th {
   font-weight: normal !important;
}

table.dataTable>thead>tr>th {
   border-bottom: 1px solid var(--fa-separator) !important;
}

table.dataTable>tfoot>tr>th {
   border-top: 1px solid var(--fa-separator) !important;
   border-bottom: 0 !important;
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td,
table.dataTable>tbody>tr>th,
table.dataTable>tbody>tr>td,
table.dataTable>tfoot>tr>th,
table.dataTable>tfoot>tr>td {
   padding: 4px 4px 4px 8px;
}

div.dt-container .dt-length,
div.dt-container .dt-info,
div.dt-container .dt-paging,
div.dt-container .dt-paging .dt-paging-button:active,
div.dt-container .dt-paging .dt-paging-button:hover,
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
   color: var(--fa-text-secondary) !important;
}


.dt-container .dt-paging .dt-paging-button {
   border: 0 !important;
   border-radius: 6px !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-container .dt-paging .dt-paging-button:hover,
.dt-container .dt-paging .dt-paging-button:focus {
   background-color: var(--fa-button-hover) !important;
   background-image: none !important;
   box-shadow: none !important;
   color: var(--fa-text-secondary) !important;
}

.dt-container .dt-paging .dt-paging-button.first,
.dt-container .dt-paging .dt-paging-button.last {
   display: none !important;
}

/* table.dataTable thead>tr>th:hover{
   outline: none !important;
} */

table.dataTable tbody tr:hover,
table.dataTable thead th:hover {
   background-color: var(--fa-table-row-hover-bg);
}

table.dataTable>tbody>tr.selected>* {
   box-shadow: none;
   background-color: var(--fa-table-row-selected-bg);
}

table.dataTable thead>tr>th.dt-orderable-asc {
   padding-right: 26px !important;
}

table.dataTable thead>tr>th.dt-body-right {
   text-align: right;
}

table.dataTable thead>tr>th.dt-body-left {
   text-align: left;
}

table.dataTable .timestamp_column {
   min-width: 200px;
}

table.dataTable thead>tr>th .dt-column-order {
   display: none !important;
}

.fa-datatableHeader {
   position: relative;
   white-space: nowrap;
}

.fa-datatableHeader div.dt-column-header {
   display: inline !important;
}

.datatableSortArrows {
   display: inline-flex;
   font-size: 11px;
   position: absolute;
   flex-flow: column;
   margin-left: 5px;
   top: -2px;
}

.datatableSortArrows>span {
   opacity: .125;
}

.datatableSortArrows #sortDown {
   position: relative;
   top: -7px;
}

.dt-container th.dt-ordering-asc #sortUp {
   opacity: .6;
}

.dt-container th.dt-ordering-desc #sortDown {
   opacity: .6;
}

#downloadCsvBtn>i {
   font-size: 1.1rem;
}

.dt-control {
   width: 25px !important;
   max-width: 25px !important;
   min-width: 25px !important;
}

.datatable-help-text {
   margin-left: 12px;
   margin-right: 16px;
   margin-bottom: 16px;
}

.innerTableHeading>h2 {
   margin: 0 !important;
}

.errorContainer {
   color: red;
   text-align: center;
}

/* .alertCards is only kept for backwards compatibility, do not use when creating new templates */
.alertCards {
   display: grid;
   grid-template-columns: 4fr 3fr 3fr 2fr;
   column-gap: 20px;
}

.alertCards>.fa-card {
   padding: 6px 10px 10px 10px;
}

.alertCards>.fa-card>div.headerContainer {
   min-height: 31px;
   margin-bottom: 0.25rem;
   align-items: baseline;
}

.alertCards>.fa-card h2 {
   margin-top: 0;
   margin-bottom: 0;
}

.alertActionButton {
   position: relative;
   left: -0.5rem;
   top: -2px;
}

div.fa-card:has(div#memoContainer) {
   display: flex;
   flex-flow: column;
}

#memoContainer {
   width: 100%;
   margin: auto;
   flex: 1 1 auto;
}

#memoTextArea {
   resize: none;
   font-size: 14px;
   position: relative;
   top: -6px;
   padding-top: 3px;
   height: 100% !important;
   max-height: none;
   overflow: auto;
}

#memoValue {
   max-height: 116px;
   overflow: auto;
}

.page-footer {
   display: flex;
   align-items: flex-start;
   position: relative;
}

a.backButton {
   position: absolute;
   left: 5px;
}

a.backButtonBottom {
   position: absolute;
   left: -35px;
}

pre.confirmDeleteEntityName,
pre.confirmSaveEntityName {
   display: inline;
   font-size: inherit;
   font-family: inherit;
   word-wrap: break-word;
   word-break: break-word;
   white-space: normal;
   margin: 0;
}

#confirmDeleteInput,
#confirmSaveInput {
   width: 100%;
}

.iframeErrorMessage {
   visibility: hidden;
}

.card:hover {
   -webkit-box-shadow: 0 3px 2px -2px hsl(0, 0%, 60%);
   -moz-box-shadow: 0 3px 2px -2px hsl(0, 0%, 60%);
   box-shadow: 3px 3px 3px -0px hsl(0, 0%, 60%);
   border-color: hsl(0, 0%, 60%);
}

.card-header {
   padding-top: 2px;
   padding-bottom: 0px;
   padding-left: 10px;
   padding-right: 6px;
   border-bottom-width: 0px;
   height: 33px;
}

.card-body {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 10px;
   padding-right: 6px;
   border-bottom-width: 0px;
}

.dt-container {
   font-size: 14px;
}

.dt-container table.table tbody tr td {
   border-left: 1px solid hsl(0, 0%, 75%);
   border-right: 1px solid hsl(0, 0%, 75%);
   padding-left: 12px;
   padding-right: 6px;
}

.dt-container table.table thead tr th {
   border-right: 1px solid hsl(0, 0%, 75%);
   border-top: none;
   border-bottom: 1px solid hsl(0, 0%, 75%);
   padding-left: 12px;
   padding-right: 6px;
}

table.dataTable .form-check-input:hover:not(:checked) {
   background-color: var(--fa-checkbox-hover-bg);
   border-color: var(--fa-checkbox-hover-border);
}

table.dataTable .form-check-input:checked {
   background-color: var(--fa-checkbox-checked-bg);
   border-color: var(--fa-checkbox-checked-border);
}

.form-check-input:checked {
   background-color: hsl(204, 46%, 38%);
   border-color: hsl(204, 46%, 26%);
}

.btn-prim {
   background-color: hsl(219, 91%, 59%);
   color: hsl(0, 0%, 100%);
   border-color: hsl(219, 91%, 59%);
}

.btn-sec {
   background-color: hsl(219, 91%, 95%);
   color: hsl(219, 91%, 59%);
   border-color: hsl(219, 91%, 90%);
}

.btn-ter {
   background-color: transparent;
   color: hsl(219, 91%, 59%);
   border-color: transparent;
}

.btn-dang {
   background-color: hsl(0, 91%, 95%);
   color: hsl(0, 91%, 59%);
   border-color: hsl(0, 91%, 90%);
}

.btn-prim:hover,
.btn-prim:focus,
.open .dropdown-toggle.btn-prim {
   background-color: hsl(219, 65%, 50%) !important;
   color: white !important;
   border-color: hsl(219, 65%, 50%) !important;
}

.btn-sec:hover,
.btn-sec:focus,
.open .dropdown-toggle.btn-sec {
   background-color: hsl(219, 91%, 95%);
   color: hsl(219, 91%, 59%);
   border-color: hsl(219, 91%, 59%);
}

.btn-ter:hover,
.btn-ter:focus,
.open .dropdown-toggle.btn-ter {
   background-color: hsl(222, 71%, 97%);
   color: hsl(219, 65%, 50%);
   border-color: hsl(219, 65%, 50%);
}

.btn-dang:hover,
.btn-dang:focus,
.open .dropdown-toggle.btn-dang {
   background-color: hsl(0, 91%, 95%) !important;
   color: hsl(0, 65%, 50%);
   border-color: hsl(0, 65%, 50%) !important;
}

.btn-prim:active {
   background-color: hsl(219, 65%, 40%) !important;
   color: white !important;
   border-color: hsl(219, 65%, 40%) !important;
}

.btn-sec:active {
   background-color: hsl(219, 91%, 85%) !important;
   color: hsl(219, 65%, 50%) !important;
   border-color: hsl(219, 65%, 40%) !important;
}

.btn-ter:active {
   background-color: hsl(222, 71%, 87%) !important;
   color: hsl(219, 65%, 50%) !important;
   border-color: hsl(219, 65%, 40%) !important;
}

.btn-dang:active {
   background-color: hsl(0, 65%, 85%) !important;
   color: hsl(0, 91%, 50%) !important;
   border-color: hsl(0, 65%, 50%) !important;
}


.btn-ter:disabled {
   border: 0;
}

tfoot input {
   width: 100%;
   box-sizing: border-box;
}

div.dt-container div.dt-layout-row {
   margin: 0;
}

.dt-layout-cell.dt-layout-end {
   display: flex;
   align-items: center;
}

.dataTableTop {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   column-gap: 15px;
   padding: 5px 10px;
}

.dataTableTop:has(.innerTableHeading, .queryTitleContainer) {
    justify-content: space-between;
}

.dataTableBottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   column-gap: 30px;
   padding: 5px 10px;
}

.dt-control {
   min-width: 50px;
   font-family: sans-serif;
}

.dt-container tfoot input::placeholder {
   color: var(--fa-text-secondary) !important;
}

.textDecorNone {
   text-decoration: none;
}

.selectedRowsDropdown {
   display: none;
}

.ruleSetInnerTable tr:hover {
   background-color: rgba(0, 0, 0, 0.075)
}

.tooltip-inner {
   background-color: #555555 !important;
   text-align: left;
   max-width: 500px;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
   border-top-color: #555555;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
   border-bottom-color: #555555;
}

.bs-tooltip-start[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-end[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
   border-left-color: #555555;
}

.bs-tooltip-start[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end[data-popper-placement^=left] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
   border-right-color: #555555;
}

.ruleInstructions {
   display: grid;
   grid-template-columns: 80px 1fr;
}

.ruleInstructions * {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}

.formGroupTopBorder {
   border-top: 1px solid #ccc;
}

.formGroupBottomBorder {
   border-bottom: 1px solid #ccc;
}

form>div.row,
form>div.fa-card>div.row,
form>div.row>div.col-sm>div.row {
   flex-wrap: nowrap;
   align-items: center !important;
}

form label.col-form-label {
   min-height: unset;
   padding-bottom: 0 !important;
   padding-top: 0 !important;
}

form>div.row>div.col-auto.form-text {
   flex-shrink: unset;
}

#board>div.row {
   overflow-x: auto;
   min-height: 740px;
}

#board>div.row:not(.groupStages) {
   display: grid;
   grid-template-columns: repeat(4, max-content);
}

.connectedInput {
   align-items: center;
}

.connectedInput>* {
   height: 32px;
}

.connectedInput textarea {
   min-height: 32px;
}

.connectedInput .form-switch.enable_search {
   margin-bottom: 0;
   align-items: center;
   display: flex;
   column-gap: 0.5rem;
}

.connectedInput_divider {
   display: none;
}

.flex-grow-2 {
   flex-grow: 2 !important;
}

.flex-grow-4 {
   flex-grow: 4 !important;
}

.fixed-flex-width {
   flex: 1 1 0%;
   min-width: 0;
}

#documentationContainer {
   max-width: 950px;
   margin-left: 0;
}

.pipelineCompute>.card-header,
.pipelineDatafield>.card-header {
   display: flex;
   align-items: center;
   column-gap: 5px;
}

.cardTitle {
   position: relative;
   top: -2px;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer !important;
   min-width: 20px;
   width: fit-content;
   color: var(--fa-text-primary);
   font-weight: 400;
   min-width: 50px;
}

#documentation-table-of-contents>.dropdown-menu {
   width: 350px;
   height: 600px;
   overflow-y: scroll;
   overflow-x: hidden;
   padding: 10px;
}

#documentation-table-of-contents>.dropdown-menu>a {
   display: flex;
   column-gap: 5px;
   white-space: unset;
}

#documentation-table-of-contents .dropdown-item:hover {
   background-color: transparent;
   color: var(--fa-dark-link);
}

table.docs-table * {
   color: var(--fa-text-primary);
   font-size: 14px;
   vertical-align: top;
}

.laneHeader,
.card-header {
   cursor: move;
}

.draggableCard.dragging,
.draggableLane.dragging,
.conditionAssignmentDnD.dragging,
.labelingAssignmentDnD.dragging {
   opacity: .5;
}

#stages,
#async_stages {
   display: flex;
   flex-wrap: nowrap !important;
   min-width: 300px;
   padding: 0;
}

#stages>.col,
#async_stages>.col {
   padding-right: calc(var(--bs-gutter-x) * .5);
   padding-left: calc(var(--bs-gutter-x) * .5);
   margin-top: var(--bs-gutter-y);
   min-width: 300px;
   flex: unset;
}

#stages .laneHeader,
#async_stages .laneHeader {
   width: 275px;
}

form .align-items-start .col-form-label {
   padding-top: 0;
}

.form-check {
   padding-top: 1.5px;
   padding-left: 40px;
   background-color: #F4F4F4;
}

.CodeMirror {
   border: 1px solid #ccc;
   resize: vertical;
}

.cm-shortcuts-hint {
   position: absolute;
   top: 4px;
   right: 20px;
   z-index: 10;
   color: #999;
   cursor: help;
}

.cm-shortcuts-hint:hover {
   color: #555;
}

.pipelineCompute .card-body {
   margin: 0 !important;
   padding: 0 6px 0 10px;
}

.pipelineDatafield .card-body {
   padding: 0 6px 0 10px;
}

#toggleDraftTemplates {
   position: fixed;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   transition: bottom 0.5s;
   background-color: hsl(200, 43%, 93%);
   padding: 5px 15px;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
   cursor: pointer;
}

#slidingBar {
   position: fixed;
   bottom: -100px;
   left: 50%;
   transform: translateX(-50%);
   background-color: hsl(200, 43%, 93%);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: bottom 0.5s;
   height: 100px;
   padding: 10px 20px;
   column-gap: 50px;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
}

.templateSelectContainer {
   display: flex;
   flex-flow: column;
   row-gap: 5px;
}

.loadDefaultTemplate {
   position: relative;
   left: -7px;
}

.card-body,
.card-footer {
   cursor: text;
   user-select: text;
   -moz-user-select: text;
   -webkit-user-select: text;
   -ms-user-select: text;
}

.draggableCard {
   width: 275px;
}

.groupStages>#stages>.col.stage {
   max-width: 33.333333%;
   flex: unset;
}

.show-or-hide-features {
   padding-right: 1rem;
}

.card .computeFeature {
   display: flex;
   text-wrap: wrap;
   word-break: break-all;
}

.card .computeFeature span.featureName {
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 400;
   word-break: break-word;
   white-space: nowrap;
}

.card .card-feature-link:hover span.featureName {
   text-decoration: underline;
}

ul.suggestions {
   position: absolute;
   display: none;
   list-style: none;
   background-color: white;
   padding: 0;
   height: unset;
   max-height: 150px;
   overflow-y: auto;
   width: 300px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
   z-index: 3;
}

ul.suggestions li {
   padding: 2px;
   padding-left: 10px;
   cursor: pointer;
}

ul.suggestions li:hover,
.highlight {
   background-color: var(--fa-medium-blue-ultradark);
   color: white;
}

/* Hide the scrollbar arrows (both vertical and horizontal) */
ul.suggestions::-webkit-scrollbar {
   width: 10px;
   /* You can adjust the width to your preference */
}

ul.suggestions::-webkit-scrollbar-button {
   display: none;
}

/* Style the track (background of the scrollbar) */
ul.suggestions::-webkit-scrollbar-track {
   background: #fff;
   /* You can change the background color */
}

/* Style the thumb (the draggable part of the scrollbar) */
ul.suggestions::-webkit-scrollbar-thumb {
   background: #ccc;
   /* You can change the thumb color */
}

/* Style the thumb on hover */
ul.suggestions::-webkit-scrollbar-thumb:hover {
   background: #555;
   /* You can change the thumb color on hover */
}

input.fa-combobox {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right .5rem center;
   background-size: 16px 12px;
   padding-right: 2.25rem;
   cursor: default;
}

/* stages column width dropdown */
.columnWidthSettings {
   border-top: 1px solid #ccc;
   padding-top: 3px;
}

span.dropdown-label {
   color: var(--fa-text-primary);
   font-size: 14px;
}

#columnWidth {
   display: inline;
   height: 30px;
   width: 120px;
   font-size: 14px;
   padding: 0;
   padding-left: 6px;
}

#results_table td {
   padding: 8px;
}

.periodSelectorInput {
   display: flex;
   column-gap: 10px;
   align-items: center;
}

.periodSelectorInput>input {
   width: 70px;
}

.conditionAssignmentDnDHandle,
.labelingAssignmentDnDHandle {
   padding-right: 5px;
   cursor: grab;
   display: flex;
   align-items: center;
}

.conditionAssignmentDnDHandle>i,
.labelingAssignmentDnDHandle>i {
   font-size: 18px;
}

.errorMessage {
   color: red;
}

.quillEditor {
   overflow-y: auto;
   resize: vertical;
}

.permissionsTree option:disabled {
   color: #eee !important;
}

#permissionsJsonTextarea {
   display: none;
}

.queryTable {
   white-space: nowrap;
}

/* Sticky headers and footer for all datatables */
table.dataTable thead {
   position: sticky;
   top: 0;
   z-index: 2;
   background-color: var(--fa-card-background);
}

table.dataTable thead > tr > th {
   background-color: var(--fa-card-background);
}

table.dataTable thead > tr:not(:last-child) {
   box-shadow: 0 1px 0 var(--fa-separator);
}

table.dataTable tfoot {
   position: sticky;
   bottom: 0;
   z-index: 1;
   background-color: var(--fa-card-background);
}

table.dataTable tfoot > tr > th {
   background-color: var(--fa-card-background);
}

.mapNetworkContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 20px;
}

.mapNetworkContainer .mapNetworkHeader {
   padding: 2px 10px 10px 10px;
   display: flex;
   align-items: center;
}

.mapNetworkContainer .mapNetworkHeader h2 {
   margin: 0;
}

#googleMap {
   height: 500px;
   width: 100%;
}

.gm-style-iw-chr {
   display: none !important;
   /*hide the "X" in the pin info window*/
}

.default-marker {
   opacity: .2;
}

.selected-marker {
   opacity: 1;
}

.queryTitleContainer {
   display: inline-flex;
   align-items: center;
}

.queryTitle {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   font-size: 18px;
   font-weight: 700;
   margin-block-start: 1em;
   margin-block-end: 1em;
}

.datatableTableWrapper {
   overflow-x: auto;
   isolation: isolate;
}

textarea.form-control:disabled {
   background-color: unset;
}

*::placeholder {
   color: var(--fa-text-secondary) !important;
   font-style: italic;
}

.placeholderText {
   color: var(--fa-text-secondary) !important;
   font-size: .875em;
   font-style: italic;
}

.dt-length,
.dt-info,
.dt-paging {
   color: var(--fa-text-secondary) !important;
}

#js_data_fields_table {
   display: grid;
   grid-template-columns: 1fr 44px;
   column-gap: .5rem;
}

.multiRowInput>div {
   display: flex;
   flex-flow: column;
   row-gap: .25rem;
}

.addBtnContainer {
   width: 44px;
   margin-left: .25rem;
}

.deleteBtnContainer {
   align-self: center;
   display: flex;
   align-items: center;
}

.modal-header {
   padding-top: 10px;
}

.modal-footer button#deleteButton {
   word-break: break-word;
}

.dotModified {
   color: var(--fa-red-dark);
}

.dotDisabled {
   color: var(--fa-text-primary)
}

.dotModified,
.dotDisabled {
   position: relative;
   top: -3px;
}

.computeFeature .dotDisabled {
   top: -1px;
}

#pipelineChangesDot{
   top: -1px;
}

.dropdown-inline {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 4px 16px;
   color: var(--fa-text-primary);
   font-weight: normal;
   font-size: 14px;
   margin: 0;
}

.dropdown-inline>span {
   margin-right: 10px;
}

.dropdown-inline select {
   display: inline;
   height: 30px;
   width: 120px;
   font-size: 14px;
   padding: 0;
   padding-left: 6px;
   font-weight: 400;
   line-height: 1.5;
}

.statistics.dropdown-menu {
   min-width: 250px;
   padding: 8px 0;
}

.checkbox {
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none;
   color: var(--fa-text-primary);
}

.tooltip-wrapper {
   position: relative;
   display: inline-block;
}

.tooltip-text {
   visibility: hidden;
   position: absolute;
   width: auto;
   white-space: nowrap;
   background-color: #555;
   color: #fff;
   text-align: center;
   padding: 5px 10px;
   border-radius: 6px;
   z-index: 1;
   opacity: 0;
   transition: opacity 0.3s;
   top: 5px;
   bottom: auto;
   right: 120%;
}

.tooltip-text::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 100%;
   margin-top: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: transparent transparent transparent #555;
}

.tooltip-wrapper:hover .tooltip-text {
   visibility: visible;
   opacity: 1;
}

.ql-container {
   height: unset;
}

.subheader-container {
   display: flex;
   align-items: center;
}

.is-warning {
   /* soft validation warning */
   border-color: var(--fa-orange-dark);
   border-width: 2px;
   border-style: solid;
}

.is-warning~.invalid-feedback {
   display: block;
   color: var(--fa-orange-ultradark);
}

.flex-40 {
   flex: 0 1 40%;
}

.flex-20 {
   flex: 0 1 20%;
}

.progress-bar-column {
   display: grid;
   grid-template-columns: 90px 50px 100px 50px;
   column-gap: 10px;
}

.progress-bar-content {
   align-content: center;
}

.fa-content h1 {
   font-size: 18px;
   font-weight: 700;
   margin-block-start: 1.2em;
   margin-block-end: 1.1em;
}

.fa-content h2 {
   font-size: 16px;
   font-weight: 700;
   margin-block-start: 1em;
   margin-block-end: 1em;
}

.fa-content .title {
   font-size: 22px;
   font-weight: 700;
   margin-top: .5rem;
   margin-bottom: .8rem;
}

.toggle-icon i {
   cursor: pointer;
   padding: 5px 7px;
   border-radius: 6px;
}

.toggle-icon i:hover,
.toggle-icon i.active {
   background-color: var(--fa-button-hover);
}

a.toastLink {
   text-decoration: none;
}

.xgbModelMapping label {
   min-width: 200px;
}

.scoring_token_target {
   overflow-wrap: anywhere;
   display: inline-block;
}

.show_categories_button {
   width: 140px;
}

.category_button_div {
   width: 130px;
}

.addButtonDataAccess {
   position: relative;
   top: 0px;
}

.dataAccessRow {
   min-height: 39px;
}

/* checkbox multi select */
.js_multi_select .js_filter {
   margin-bottom: 4px;
   margin-top: 4px;
   width: 60%;
   padding-left: 5px;
   font-size: .875rem;
}

.js_multi_select .form-check .js_reset_js_filter {
   float: none;
}

.js_multi_select .form-check.multiselect-filter {
   padding: 5px;
}

.js_multi_select .form-select {
   padding-right: .25rem;
}

.js_multi_select .dropdown-menu .form-check {
   background-color: transparent;
}

.js_multi_select .dropdown-menu .form-check.dropdown-item {
   padding-left: 43px;
}

.js_checkbox_toggle {
   min-width: 90px;
   position: relative;
   top: 5px;
   display: inline-block;
}

.js_multi_select a {
   text-decoration: none;
   float: right;
}

.js_checkbox_toggle span {
   float: right;
   padding-right: 8px;
}

.js_multi_select .bg-light .js_toggle_multi_select {
   position: relative;
   z-index: 1;
   margin-top: -0.5px;
   padding-top: 1px;
}

.js_multi_select_show {
   height: 32px;
   line-height: 23px;
}

.js_multi_select .bg-light a {
   top: 7px;
}

.image_preview_container {
   position: relative;
}

.image_preview_container .bi-trash {
   position: absolute;

}

meter::-webkit-meter-optimum-value {
   background: var(--fa-medium-blue-dark);
}

/* For red meters */
meter.fa-meter-red::-webkit-meter-optimum-value,
meter.fa-meter-red::-webkit-meter-suboptimum-value,
meter.fa-meter-red::-webkit-meter-even-less-good-value {
   background: var(--fa-red-dark) !important;
}

/* For green meters */
meter.fa-meter-green::-webkit-meter-optimum-value,
meter.fa-meter-green::-webkit-meter-suboptimum-value,
meter.fa-meter-green::-webkit-meter-even-less-good-value {
   background: var(--fa-green-dark) !important;
}

/* For blue meters */
meter.fa-meter-blue::-webkit-meter-optimum-value,
meter.fa-meter-blue::-webkit-meter-suboptimum-value,
meter.fa-meter-blue::-webkit-meter-even-less-good-value {
   background: var(--fa-medium-blue-dark) !important;
}

.table td,
.table th,
.list-group,
.list-group-item {
   color: var(--fa-text-primary);
}

.pre-formatted {
   white-space: pre;
   font-family: monospace;
}

.visible_on_cell_hover {
   opacity: 0;
   padding: 0 8px;
}

td:hover .visible_on_cell_hover {
   opacity: 1;
}

th.pre-formatted-column {
   padding-left: 40px !important;
}

.fa-cards-container {
   margin: 0 0 1rem 0;
   row-gap: 1rem;
   column-gap: 1rem;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
}

.fa-cards-container .fa-card {
   padding: 6px 10px 10px 10px;
   height: 100%;
}

.fa-cards-container .fa-card>div.fa-card-header {
   min-height: 31px;
   margin-bottom: 0.25rem;
   align-items: baseline;
   display: flex;
}

/*kept because of backwards compatibility*/
.fa-cards-container .fa-card>div.headerContainer {
   min-height: 31px;
   margin-bottom: 0.25rem;
   align-items: baseline;
}

.fa-cards-container h1,
.fa-cards-container h2,
.fa-cards-container h3,
.fa-cards-container h4,
.fa-cards-container h5,
.fa-cards-container h6 {
   margin-top: 0;
   margin-bottom: 0;
}

.toast-body {
   max-height: 500px;
   overflow: auto;
}

.fa-spinner {
   display: none;
   color: var(--fa-medium-blue-medium);
}

.htmx-indicator {
   display: none;
}

.htmx-indicator.htmx-request {
   display: inline-block;
}

@media (max-width: 1280px) {

   /*Keep docs tables from overflowing horizontally*/
   .fa-docs-table-container {
      width: 100%;
      overflow: auto;
   }
}

@media (max-width: 992px) {

   /* Form rows and fields stack vertically */
   .fa-form-container .row {
      flex-direction: column;
      margin-bottom: 1rem !important;
   }

   /* Make each column full width on mobile */
   .fa-form-container .col-sm-1,
   .fa-form-container .col-sm-2,
   .fa-form-container .col-sm-3,
   .fa-form-container .col-sm-4,
   .fa-form-container .col-sm-5,
   .fa-form-container .col-sm-6,
   .fa-form-container .col-sm-7,
   .fa-form-container .col-sm-8 {
      width: 100%;
      max-width: 100%;
      margin-bottom: 0.5rem;
   }

   /* Heading above the table that we moved inside of it*/
   .innerTableHeading {
      position: static;
      margin: 1rem 0;
      height: unset;
   }

   .mapNetworkContainer {
      grid-template-columns: 1fr;
      row-gap: 1rem;
   }

   #documentationContainer img {
      height: auto;
   }

   .multiRowInput {
      grid-template-columns: 1fr;
      row-gap: 0.5rem;
   }

   /* Query column/row projection */
   .connectedInput_divider {
      display: block;
      width: 100%;
      height: 0.25rem;
   }

   .connectedInput .alignWithHandle {
      margin-left: 22px !important;
   }

   .multiRowInput>div {
      row-gap: 0.75rem;
   }
}

/* template diff audit log */
.template_diff .left_nr,
.template_diff .right_nr {
   display: inline-block;
   width: 35px;
   text-align: right;
}

.template_diff .sign,
.template_diff .separator {
   display: inline-block;
   width: 10px;
}

.template_diff .separator {
   display: inline-block;
   border-right: 1px solid var(--fa-separator);
}

.template_diff .changed_words.added {
   color: #003300;
   background-color: #DDF0DD;
}

.template_diff .changed_words.removed {
   color: #990000;
   background-color: #F0DDDD;
}

.template_diff .added .highlighted {
   color: #009900;
   background-color: #EEFFEE;
   text-decoration: underline;
}

.template_diff .removed .highlighted {
   color: #BB0000;
   background-color: #FFEEEE;
   text-decoration: underline;
}

table.rulePerformanceTable {
   background: transparent;
}

table.rulePerformanceTable,
table.rulePerformanceTable th,
table.rulePerformanceTable td {
   border: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
}

table.rulePerformanceTable td.rulePerformanceTableLabel {
   width: 90px;
}

table.rulePerformanceTable td.rulePerformanceTableValue {
   text-align: right;
   width: 55px;
}

div.dt-container tr.dt-length select.fa-custom-table-filter {
   margin-left: -4px;
}

.js_multi_select div.form-check {
   margin-bottom: 0;
}

.drag-handle {
   cursor: grab !important;
   user-select: none;
   text-align: center;
   vertical-align: middle;
   color: var(--fa-text-secondary);
}

.drag-handle:active {
   cursor: grabbing !important;
}

.draggable-row.dragging {
   background-color: var(--fa-draggable-row) !important;
   opacity: 0.8;
   border: 1px solid var(--fa-medium-blue) !important;
   border-radius: 4px;
}

.drag-handle:hover {
   color: var(--fa-text-primary);
}

.fa-enable-copy {
   position: relative;
}

.fa-copy-button {
   position: absolute;
   top: 50%;
   left: 100%;
   transform: translateY(-50%);
   opacity: 0;
   transition: opacity 0.2s;
   background-color: transparent !important;
}

.fa-copy-button:hover {
   background-color: transparent !important;
}

.entry {
   background-color: #e5e5e5;
}

.multiRowInput .conditionAssignmentDnD:only-child .conditionAssignmentDnDHandle,
table tbody tr:only-child td.drag-handle>i.bi-grip-vertical {
   display: none;
}

table tbody tr:only-child td.drag-handle {
   pointer-events: none;
}

img.navbar-brand {
   padding: 0;
}

.readonlyInput {
   pointer-events: none;
   background-color: var(--bs-secondary-bg);
}

table.statisticsTable.dataTable thead th {
   text-align: left;
}

table.statisticsTable.dataTable {
   border-collapse: separate;
   border-spacing: 0;
}

table.statisticsTable.dataTable th.no-divider-left,
table.statisticsTable.dataTable td.no-divider-left {
   border-left: none;
}

/* Column hover highlight via box-shadow, applies to hovered cell (:hover) and JS-highlighted column (.col-hover) */

table.statisticsTable.dataTable th.col-hover,
table.statisticsTable.dataTable td.col-hover {
   box-shadow: inset 2px 0 0 var(--fa-table-column-hover-border), inset -1px 0 0 var(--fa-table-column-hover-border);
}

table.statisticsTable.dataTable th.no-divider-left.col-hover,
table.statisticsTable.dataTable td.no-divider-left.col-hover {
   box-shadow: inset -1px 0 0 var(--fa-table-column-hover-border);
}

table.statisticsTable.dataTable th.no-divider-right.col-hover,
table.statisticsTable.dataTable td.no-divider-right.col-hover {
   box-shadow: inset 2px 0 0 var(--fa-table-column-hover-border);
}

table.statisticsTable.dataTable th.no-divider-left.no-divider-right.col-hover,
table.statisticsTable.dataTable td.no-divider-left.no-divider-right.col-hover {
   box-shadow: none;
}

table.statisticsTable.dataTable th+th,
table.statisticsTable.dataTable td+td {
   border-left: 1px solid var(--fa-table-column-hover-border);
}

table.statisticsTable.dataTable>thead>tr>th,
table.statisticsTable.dataTable>thead>tr>td,
table.statisticsTable.dataTable>tbody>tr>th,
table.statisticsTable.dataTable>tbody>tr>td,
table.statisticsTable.dataTable>tfoot>tr>th,
table.statisticsTable.dataTable>tfoot>tr>td {
   padding: 4px 10px;
}

.flatpickrBtnTooltip {
   z-index: 100001 !important;
}