/*******************************************************************************
 * Global Styles
 ******************************************************************************/

body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  background: rgb(250, 251, 252);
}

/* This is the default value by BS, but we add !important to override
   the value in cases where we set the overflow property in 'body'.
   For example, in report pages */
body.modal-open {
  overflow: hidden !important;
}

/* Vertical Japanese text doesn't need rotation */
.vertical-text-label.ja {
  transform: none;
}

main {
  padding-left: 58px;
  margin: 1.5rem auto 2rem auto;
  min-width: 1000px;
}

main.no-sidebar {
  padding-left: 0 !important;
}

/* Titles can be user custom model/dataset/etc. names, so they can be long */
h4 {
  word-break: break-word;
}


table {
  background: white;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.font-weight-600 {
  font-weight: 600;
}

.font-weight-500 {
  font-weight: 500;
}

.font-weight-300 {
  font-weight: 300;
}

.font-size-1rem {
  font-size: 1rem;
}

/* Half of mt-1 */
.mt-05 {
  margin-top: 0.125rem !important;
}

.mt-15 {
  margin-top: 0.375rem !important;
}

/* Between .mt-4 and .mt-5 */
.mt-45 {
  margin-top: 2.25rem !important;
}

.mb-45 {
  margin-bottom: 2.25rem;
}

/* Between .mt-4 and .mt-45 */
.mt-2rem {
  margin-top: 2rem;
}
/* Between .mb-4 and .mb-45 */
.mb-2rem {
  margin-bottom: 2rem;
}

/* Between mb-2 and mb-3 */
.mb-25 {
  margin-bottom: 0.8rem;
}

.mt-25 {
  margin-top: 0.8rem;
}

.mt-child-0,
.mt-child-0 * {
  margin-top: 0 !important;
}

.ml-2px {
  margin-left: 2px;
}

.ml-n2px {
  margin-left: -2px;
}


.my-25 {
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

.px-25 {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.py-25 {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

/* Between .pt-4 and .pt-5 */
.pt-45 {
  padding-top: 2.25rem !important;
}

/* Between .pb-1 and .pb-2 */
.pb-15 {
  padding-bottom: 0.375rem;
}

.mw-33 {
  max-width: 33% !important;
}

.w-40 {
  width: 40% !important;
}

.w-60 {
  width: 60% !important;
}

.w-35 {
  width: 35% !important;
}

.w-60 {
  width: 60% !important;
}

.w-65 {
  width: 65% !important;
}

.w-80 {
  width: 80% !important;
}

.w-90 {
  width: 90% !important;
}

.w-95 {
  width: 95% !important;
}

.mw-33 {
  max-width: 33% !important;
}

.mw-50 {
  max-width: 50% !important;
}

.h-100vh {
  height: 100vh;
}

.container {
  max-width: 960px;
  word-wrap: break-word;
}

.container.lg-wide-container {
  padding-left: 0;
  padding-right: 0;
  max-width: 1100px;
}

.container.wide-container,
.container.wide-responsive-container {
  padding-left: 0;
  padding-right: 0;
  max-width: 1000px;
}

.container.md-wide-container {
  max-width: 975px;
  padding-left: 0;
  padding-right: 0;
}

.container.xs-container {
  max-width: 580px;
  padding-left: 0;
  padding-right: 0;
}

.card {
  border-radius: 0;
}

.container.wide-responsive-container>.alert {
  max-width: 1050px;
  min-width: 928px;
  width: 100%;  /* Override the .container>.card's width */
}

.container.wide-container>.card {
  width: 1000px;
}

.container.md-wide-container>.card {
  max-width: 975px;
  width: 975px;
}

.feather {
  width: 16px;
  height: 16px;
  position: relative;
  bottom: 1px;
}

.feather-trash-2 {
  bottom: 2px;
}

.invisible-link {
  color: inherit;
  text-decoration: none;
}

.invisible-link:hover {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed #b7b7b7;
}

.text-lg {
  font-size: 16px !important;
}

.text-md {
  font-size: 14px !important;
}

.text-sm {
  font-size: 12px !important;
}

.text-xs {
  font-size: 11px !important;
}

.text-lg svg.feather {
  width: 16px;
  height: 16px;
}

.text-md svg.feather {
  width: 14px;
  height: 14px;
}

.text-sm svg.feather {
  width: 12px;
  height: 12px;
}

table {
  text-align: center;
}

.table td, .table th {
  vertical-align: middle;
}

th {
  font-weight: 500;
  border-bottom-width: 1px !important;
  background-color: rgb(246, 248, 250) !important;
}

.badge {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 8px;
}

.badge.badge-warning {
  color: white;
  background-color: #ff9d37;
}

.badge.badge-light {
  background-color: rgb(246, 248, 250);  /* Same as <th> */
}

/* Smaller version of .spinner-border-sm from Bootstrap to use in badges */
.spinner-border-badge {
  width: 12px;
  height: 12px;
  border-width: 2px;
  margin-right: 1px;
}

.alert-danger a {
  text-decoration: underline;
  color: #721c24;
}

.alert-danger a:hover{
  color: #2e070b;
}

/* This makes Bootstrap's toggle switches, radios, and checkboxes green instead of blue */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:active ~ .custom-control-label::before {
  border-color: #30d158;
  background-color: #30d158;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  border-color: #adb5bd;
  background-color: #e9ecef;
}

.custom-control-input:disabled:checked ~ .custom-control-label::before {
  border-color: #30d158;
  background-color: #30d15883 !important;
}

.robustness-min-max-tooltip {
  display: inline-block;
}

.robustness-setting:last-child {
  margin-bottom: 0 !important;
}

.report-type-help-icon {
  margin-left: 1px;
}

.disabled-report-type {
  pointer-events: none;
}

.disabled-new-report {
  pointer-events: none;
  opacity: 0.6;
}

td.green {
  color: #009F00;
  font-weight: 500;
}

td.red {
  color: #FF0000;
  font-weight: 500;
}

.block-center-text {
  margin: 100px 0;
  text-align: center;
}

.tooltip {
  font-size: 12px;
}

.bs-tooltip-right {
  margin-left: 5px;
}

.tooltip-ml-0 {
  margin-left: 0px;
}

.dropdown-menu {
  min-width: auto;
}

.form-control-sm .dropdown-menu {
  font-size: 0.875rem;
}

.dropdown-item:active svg {
  color: white !important;
}

.code-badge {
  /* font-family copied from Bootstrap's text-monospace class */
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !important;
  font-size: 12px;
  background: #f1f4f7;
  padding: 2px 6px;
  display: inline-block;
  border-radius: 3px;
  margin-bottom: 5px;
}

.lens-table .code-badge {
  margin-bottom: 1px;
}

table.limit-max-col-width {
  /* This will limit the width of columns to the (percentage or pixel) width of
     the first row. Useful for tables that hold arbitrarily long user strings
     (e.g. model name or description)
  */
  table-layout: fixed;
}

a.disabled {
  color: #929292;
  pointer-events: none;
}

.modal-md {
  max-width: 650px;
}

/* Medium Large */
.modal-mdx {
  max-width: 700px;
}

.modal-auto {
  text-align: center;
}

.modal-auto .modal-dialog {
  text-align: left;
  max-width: 100%;
  width: auto !important;
  display: inline-block;
}

.modal-auto .modal-body {
  padding: 1rem 1.5rem;
}

/* For Sveltestrap modal */
.modal-dialog.modal-auto {
  max-width: 100%;
  width: fit-content;
}

/*
 * Limits the height of the modal to the height of the screen.
 * Any child that overflows will be scrollable.
 */
.modal-height-limit .modal-content {
  max-height: 90vh; /* Fallback */
  max-height: calc(100vh - 3.5rem); /* 3.5rem = 1.75rem x 2 for vertical margins */
}

.modal-height-limit .modal-body {
  overflow-y: auto; /* Necessary to make scrollbars appear on content */
  display: flex; /* Necessary for children to figure out height */
  flex-direction: column;
}

.card-title {
  margin-top: 0;
}

.clickable-help-icon,
.clickable-help-icon:hover {
  color: black;
  text-decoration: none;
}

.link-to-docs-icon,
.link-to-docs-icon:hover {
  color: black;
  text-decoration: none;
}

.link-to-docs-tooltip .tooltip-inner {
  max-width: 250px;
}

.wide-tooltip .tooltip-inner {
  max-width: 350px;
}

.tooltip-with-list .tooltip-inner {
  max-width: 300px;
  text-align: left;
}

.report-family-link {
  padding: 0.75rem 1.25rem;
  color: #212529;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 5px;
  box-shadow: -1px 1px 2px rgb(0 0 0 / 8%);
  min-height: 100px; /* Otherwise links with no report badges are too short */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.report-family-link:not(.disabled):hover {
  text-decoration: none;
  color: #212529;
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}

.report-family-link:not(.disabled):hover .feather {
  color: #212529;
}

.report-family-link.disabled {
  pointer-events: auto;
  text-decoration: none;
  cursor: default;
  color: #b1b1b1;
}

.report-family-link .feather {
  color: #b1b1b1;
}

#launcher-frame {
  /* Override the element.style from Freshdesk widget */
  min-width: 90px !important;
  width: 90px !important;
  height: 48px !important;
}

.word-break-all {
  word-break: break-all;
}

.break-word {
  word-break: break-word;
}

.white-space-pre {
  white-space: pre;
}

.white-space-pre-line {
  white-space: pre-line;
}

.white-space-pre-wrap {
  white-space: pre-wrap;
}

.white-space-initial {
  white-space: initial !important;
}

.white-space-nowrap {
  white-space: nowrap;
}

.progress {
  height: 1.25rem;
}

ol ol, ol ul, ul ol, ul ul {
  padding-left: 25px;  /* Use less indentation in nested lists */
}

#partial-matches-outer-wrapper {
  display: grid;
  grid-template-columns: 100%; /* So content doesn't overflow */
  grid-row-gap: 2.25rem; /*Older, for compatibility*/
  row-gap: 2.25rem;
}

.fade-in {
  opacity: 0;
  animation-delay: 500ms;
  animation-name: fade-in;
  animation-timing-function: linear;
  animation-duration: 500ms;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*******************************************************************************
 * Shadows
 ******************************************************************************/

/* Override Bootstrap .shadow-sm with Tailwind CSS' one: https://tailwindcss.com/docs/box-shadow */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

/* Add .shadow-sm to form elements, similar to Tailwind UI */
.form-control,
.custom-file,
.custom-select {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Avoid double box-shadow for bootstrap-select elements, which have a .btn nested inside a .form-control */
.bootstrap-select.form-control {
  box-shadow: none;
}

.dropdown-menu.show {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.form-control:focus {
  box-shadow: 0 0 0px 2px rgb(0 123 255 / 25%);
}

/* For input-groups, put the box-shadow on the entire group rather than just the input */
.input-group {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.input-group input {
  box-shadow: none;
}

/*******************************************************************************
 * Main tabs
 ******************************************************************************/

.tab-container {
  width: 1000px;
}

.tab-container-md {
  width: 975px;
  min-width: 975px !important;
}

.tab-container-lg {
  width: 1100px;
}

.tab-container-xl {
  width: 1300px;
}

.tab-container,
.tab-container-md,
.tab-container-lg,
.tab-container-xl {
  word-wrap: break-word;
  min-width: 1000px;
  max-width: 95vw;
  padding: 1.5rem;
  padding-top: 0.5rem; /* Less top padding to account for navbar "bottom padding" and "title-toolbar" */
  border: 1px solid rgba(0,0,0,.125);
  border-top: none;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  background: white;
}

.tab-container.active,
.tab-container-lg.active,
.tab-container-xl.active,
 /* These containers should also use grid */
.augmentation-container,
#duplicate-rows-container,
#top-model-errors-full-container,
#distribution-difference-content,
#correlation-matrix-diff-container {
  display: grid;
  grid-template-columns: 100%; /* So content doesn't overflow */
  grid-row-gap: 2.25rem; /*Older, for compatibility*/
  row-gap: 2.25rem;
}

.report-component > h5 {
  line-height: 36px;
  margin-bottom: 1rem;
}

/*******************************************************************************
 * Report and dataset container: contains the nav tabs and tabs
 ******************************************************************************/

#report-container,
#dataset-container,
#model-container {
  display: grid;
  grid-template-rows: auto auto;
  width: max-content; /* Ensures the container width matches the widest child */
  margin: auto;
}


/*******************************************************************************
 * Redesigned .nav-tabs tabs
 ******************************************************************************/

.nav-tabs .nav-link {
  padding: .5rem 0.8rem;
  border: none;
  color: #333333;
}

.nav-tabs .nav-link:hover {
  border-bottom: 3px solid #dee2e6;
}

.nav-tabs .nav-link.active {
  color: #0284c7;
  background-color: #fff;
  border-bottom: 3px solid #0284c7;
}

/*******************************************************************************
 * Report and Dataset tabs
 ******************************************************************************/

 .nav-container {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
 }

 .nav-container-lg {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: auto;
 }

 #tabs-nav {
  position: sticky;
  top: 0;
  margin-top: 1.25rem;
  padding-bottom: 10px;
  width: 100%;
  z-index: 10;
  background: rgb(250, 251, 252);
  /* 'box-shadow' hides the tab's shadow on left and right side when
     scrolling down */
  box-shadow: -3px 0px 0px 0px #FBFBFB, 3px 0px 0px 0px #FBFBFB;
  border-top: 10px solid #FAFBFC;
}

#tabs-nav-bottom-border {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0px;
  border: 1px solid rgba(0, 0, 0, .125);
  height: 11px;
  background: white;
  border-bottom: none;
}

#tabs-nav .nav-tabs {
  width: 100%;
  border-bottom: none;
}

#tabs-nav .nav-tabs .nav-link,
#tabs-nav .nav-tabs .nav-link:hover {
  padding: 10px 16px;
  border: none;
  border-top: 1px solid transparent;
  margin-bottom: 0 !important;
}

#tabs-nav .nav-tabs .nav-link.active,
#tabs-nav .nav-tabs .nav-link.active:hover {
  padding: 10px 15px;
  background: white;
  border: 1px solid rgba(0, 0, 0, .125);
  border-bottom: none;
}

#tabs-nav .nav-link.disabled {
  color: #A3A3A3 !important;
}

.center-horizontal {
  display: flex;
  justify-content: center;
}

/*******************************************************************************
 * Redesigned .nav-pills pills
 ******************************************************************************/

.nav-pills-wrapper {
  display: inline-block;
  padding: 2px;
  background: #f4f6f9;
  border-radius: 0.2rem;  /* Same as .btn */
}

.nav-pills .nav-link {
  color: #333333;
  border: 1px solid transparent;
  font-weight: 500;
  line-height: 19px;  /* Height of the pill should be 31px, identical to .form-control-sm's height of 31px */
}

.nav-pills .nav-link.disabled {
  color: #6c757d; /* bootstrap standard for disabled navlinks */
}

.nav-pills .nav-link.active {
  color: #0284c7;
  background-color: white;
  border: 1px solid #dfdfdf;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.nav-pills .nav-link {
  border-radius: 4px;
  padding: 5px 14px;
}

/*******************************************************************************
 * Counterfactual modal (Prediction Analysis) CSS
 ******************************************************************************/

.explain-prediction-btn {
  border: 0!important;
  padding: 0!important;
}
.explain-prediction-btn > span {
  margin-left: 5px;
}

.feature-table {
  width: auto;
  border: none;
}

#local-feature-importance-menu,
#counterfactual-menu,
#feature-importance-menu {
  box-shadow: none;
  padding: 0.7rem 0.9rem;
  margin-top: 0.8rem;
}

#counterfactual-target-min,
#counterfactual-target-max,
#classification-threshold {
  width: 70px;
}

#local-feature-importance-menu-form .dropdown-menu,
#counterfactual-menu-form .dropdown-menu {
  min-width: 220px !important;
}

.diff {
  font-weight: 300;
  font-size: 11px;
}

.prediction-table {
  font-size: 13px;
}

.prediction-table td {
  vertical-align: middle;
}

#local-feature-importance-text {
  border: 1px solid #dee2e6;
  padding: .75rem;
  margin-top: 10px;
}

.counterfactual-arrow {
  font-size: 3rem;
  color: #485765;
}

/*******************************************************************************
 * Multi-Dataset Report Page General CSS
 ******************************************************************************/

.correlation-matrix-grid-zoom > .image-grid-zoom-group {
  flex-wrap: nowrap;
}

.font-size-875rem {
   font-size: .875rem
}

/* Override the default smaller placeholder font size to match the rest of the
   text on the New Report page. However, this keeps the selected elements within
   the selector as-is -- otherwise they don't fit very well */
.enforced-1rem-placeholder input::placeholder {
  font-size: 1rem;
}

/* The table doesn't really know how much space to give to columns with long
   text, so at least for the Dataset column we hardcode something reasonable.
   Federico's note: min- and max-width can have strange behaviors in tables:
   depending on the content size of other columns, they can be ignored.
   Something to keep in mind if you notice columns don't behave the way you
   wanted to, like for example if they become less wide than min-width. */
.bootstrap-table-dataset-column {
  min-width: 200px !important;
  max-width: 300px !important;
}

.bootstrap-table-dataset-column.print-version {
  min-width: 100px !important;
  max-width: 100px !important;
}

/* Hacky class used to manually mimic hover color on rowspanned rows */
.manual-hover {
  color: #212529;
  background-color: rgba(0,0,0,.075);
}

/* Bootstrap button groups overwrite border radiuses between buttons in
   .btn-group-sm>.btn, .btn-sm so we bring them back for the table toolbars */
.manual-override-border-radius.btn {
  border-top-right-radius: 0.2rem !important;
  border-bottom-right-radius: 0.2rem !important;
  border-top-left-radius: 0.2rem !important;
  border-bottom-left-radius: 0.2rem !important;
}

/*******************************************************************************
 * Model Report Page General CSS
 ******************************************************************************/

.input-preview {
  width: 450px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.input-preview.w-275 {
  width: 275px;
}

.input-preview.w-215 {
  width: 215px;
}

.row-index-badge {
  font-weight: 500;
}

.segment-selector {
  font-size: 0.875rem;
}

.add-segment-btn-footer {
  text-align: center;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid #dee2e6;
}

.badge-and {
  padding: 3px 4px;
  margin: 5px 0;
  background: #8e8e8e;
  color: white;
}

.big-score-badge {
  color: #28a745;
  border: 2px solid #28a745;
  background: #effff2;
  display: inline-block;
  padding: .75rem 1rem;
  border-radius: 0.5rem;
  font-size: 22px;
  font-weight: 700;
}

.big-score-badge-better {
  color: #28a745;
}

.big-score-badge-worse {
  color: #dc3545;
}

.big-score-badge-comparison-wrapper {
  min-width: 200px;
  text-align: center;
}

.big-score-badge-comparison {
  display: inline-block;
  color: #28a745;
  border: 2px solid #28a745;
  background: #effff2;
  padding: .75rem 1rem;
  border-radius: 0.5rem;
  font-size: 22px;
  font-weight: 700;
}

.narrow-feature-table {
  margin: 10px auto 0;
  max-width: 250px;
  display: none;
}

.narrow-feature-table .feature-name {
  font-size: 12px;
  font-weight: 300;
  color: #6c757d;
}

.narrow-feature-table td {
  padding: 0.4rem 0.75rem;
}

.report-badge-list {
  position: relative;
  bottom: 1px;
}

.report-badge {
  font-weight: 500;
  display: none;
}

.spacer-for-tooltip {
  /* The position of a data-placement="right" tooltip moves a few pixels to the
  right if there is an element after the tooltip element. We can use this
  1px-wide element to force this behavior (this is useful when a tooltip can
  be followed by zero or several elements). Usually used with .tooltip-ml-0 */
  font-size: 1px;
}

#data-statistics-loader {
  animation: 1s linear infinite rotation;
}

.loader-spinner {
  animation: 1s linear infinite rotation;
}

@keyframes rotation {
  0% {
    transform:rotate(0);
  }
  100% {
    transform:rotate(360deg);
  }
}

/*******************************************************************************
 * Model Bias Tab CSS
 ******************************************************************************/

#bias-features-setting-container > .dropdown > .dropdown-menu {
  min-width: 220px;
  max-height: initial !important;
}

#bias-features-setting-container > .dropdown > .dropdown-menu > .inner {
  max-height: 250px !important;
}

.apply-bias-features {
  text-align: center;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid #dee2e6;
}

.bias-finder-tree-chart {
  width: 100%;
}

.bias-finder-tree-chart .bias-finder-node {
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #E5E7EA;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  width: 200px;
  font-size: 13px;
  padding-top: 2px;
  text-align: center;
  overflow: hidden;  /* so child elements don't extend past the border radius */
}

.bias-finder-tree-chart .bias-finder-node p {
  margin: 0;
  padding: 0 5px;
}

.bias-finder-tree-chart .bias-finder-node[data-higher-value="TRUE"] .node-value {
  color: #FF0000;
}

.bias-finder-tree-chart .bias-finder-node[data-higher-value="FALSE"] .node-value {
  color: #009F00;
}

#dataset-bias-finder-tree-chart .bias-finder-node[data-higher-value="FALSE"] .node-value {
  color: #007BFF;
}

.bias-finder-tree-chart .bias-finder-node[data-higher-value="null"] .node-value {
  color: #6c757d;
}

.bias-finder-tree-chart .bias-finder-node .node-footer {
  background-color: rgb(246, 248, 250);
  color: #6c757d;
  font-size: 11px;
  margin-top: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.best-metric {
  color: #28a745;
}

.worst-metric {
  color:#DC3545;
}

.undefined-metric {
  color:#686868;
}

.per-class-tabular-view-mode-table,
.tabular-view-mode-table {
  width: initial; /* Override .table constrained width of 100% and let content render overflowing if necessary */
  min-width: 100%; /* When a table has only 1 row, it doesn't use all available width, so we force it */
  transform-origin: 0 0;
  left: 0;
  right: 0;
}

/*******************************************************************************
 * Error Analysis Tab CSS
 ******************************************************************************/

.confident-error-table td {
  vertical-align: top;
}

.confident-error-table thead th {
  border-bottom-width: 1px;
}

.confident-error-table .d-flex {
  text-align: left;
}

.show-input {
  white-space: nowrap;
}

#top-negative-errors .input-preview,
#top-positive-errors .input-preview {
  /* These tables have an extra column, so we need to make the input column narrower */
  width: 375px;
}

.segment-group td {
  background-color: rgb(246, 248, 250) !important;
  text-align: left;
  font-weight: 500;
}

.segment-group:hover td {
  cursor: pointer;
  background-color: rgb(236, 238, 240) !important;
}

.segment-group svg {
  margin-right: 2px;
}

.segment-group.collapse-group svg {
  transform: rotate(-90deg);
}


/*******************************************************************************
 * Backward Compatibility Tab CSS
 ******************************************************************************/

#new-errors-table .d-flex,
.anchor-table .d-flex {
  text-align: left;
}

#new-errors-table td,
.anchor-table td {
  vertical-align: top;
}

#backward-compatibility-tests-table {
  width: 80%;
}

#backward-compatibility-new-errors-table th,
#backward-compatibility-all-changes-table th {
  padding-left: 0;
  padding-right: 0;
}

#backward-compatibility-new-errors-table .feather-x,
#backward-compatibility-new-errors-table .feather-check,
#backward-compatibility-all-changes-table .feather-x,
#backward-compatibility-all-changes-table .feather-check {
  stroke-width: 4;
}

.tooltip-inner {
  max-width: 350px;
}

/*******************************************************************************
 * Fairness Tab CSS
 ******************************************************************************/

.fairness-controls {
  background-color: rgb(246, 248, 250);
  padding: 1rem;
  justify-content: space-between;
  display: flex;
  border: 1px solid #dee2e6;
}

.fairness-controls input {
  border-color: rgb(206, 212, 218);
  border-width: 1px;
  border-style: solid;
  border-radius: 3.2px;
  background-color: rgb(255, 255, 255);
}

.empty-fairness-message {
  /* Give the rows some padding when the "no data segment selected" message is displayed */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

/*******************************************************************************
 * Sensitivity Tab CSS
 ******************************************************************************/

.correlation-table {
  width: 80%;
}

/*******************************************************************************
* Image Grid CSS
******************************************************************************/

/* This CSS block sets a fixed height for each cell in the image grid (cell =
image + caption) at different "zoom" levels controlled by .row-cols-*. This way,
all rows in the table always have a fixed height, regardless of image size or
caption length. */
.image-grid-col {
  padding: 0px 3px;
  /* Only two rows are displayed by default */
  height: 340px;
}
.row-cols-4 .image-grid-col,
.row-cols-5 .image-grid-col,
.row-cols-6 .image-grid-col {
  /* Three rows are displayed for row-cols-4, row-cols-5, row-cols-6 */
  height: 230px;
}

/* This CSS block sets a maximum height and width for each image in the grid at
different "zoom" levels controlled by .row-cols-*. */
.image-grid-img {
  width: 100%;
  height: 1px; /* If we set a value in pixels (any value), flexbox can use the real
                  element height for further calculations */
  flex-grow: 1; /* Expands the element to fill all the available space, ignoring set height */
  object-fit: contain; /* Maintains image aspect ratio */
}

/* This CSS block sets a maximum height and width for each caption in the grid
at different "zoom" levels controlled by .row-cols-*. */
.image-grid-img-caption-wrapper {
  max-height: 52px;
}
.row-cols-5 .image-grid-img-caption-wrapper {
  max-height: 49px;
}
.row-cols-6 .image-grid-img-caption-wrapper {
  max-height: 42px;
}

.row-cols-2 .image-grid-img-caption,
.row-cols-3 .image-grid-img-caption,
.row-cols-4 .image-grid-img-caption {
  font-size: 11px;
}
.row-cols-5 .image-grid-img-caption {
  font-size: 10px;
}
.row-cols-6 .image-grid-img-caption {
  font-size: 9px;
}

.image-grid-img-caption  {
  max-height: 230px;
  overflow: hidden;
  background: #777777CC;
  color: white;
  padding: 1px 2px;
  transition: transform 0.2s ease-in-out;
}
.image-grid-img-container:hover .image-grid-img-caption {
  transform: translateY(min(calc(52px - 100%), 0%));
  overflow-y: auto; /* In case a caption were to be taller than its container,
                       we allow the caption to be scrollable but only when hovered,
                       so that he scrollbars are not shown all the time */
}
.row-cols-5 .image-grid-img-container:hover .image-grid-img-caption {
  transform: translateY(min(calc(49px - 100%), 0%));
}
.row-cols-6 .image-grid-img-container:hover .image-grid-img-caption {
  transform: translateY(min(calc(42px - 100%), 0%));
}
.image-grid-img-caption.pending-change {
  background: #ec7a00cc;
}

.image-grid-annotator-img-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  cursor: pointer;
  text-align: center;
}

.image-grid-annotator-img-container label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 60px;
  height: 60px;
  cursor: pointer;
  text-align: left;
  pointer-events: auto;
}

.image-grid-annotator-img-container label + .image-grid-img-overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 50px;
  height: 50px;
  pointer-events: none;
  border-radius: 50%;
  background-color: #007bff;
  opacity: 0;
  transition: 0.1s ease-in-out;
}

.image-grid-annotator-img-container label:hover + .image-grid-img-overlay {
  opacity: 0.3;
}

.image-grid-annotator-img-container label span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  pointer-events: none;
}

.image-grid-annotator-img-container input {
  cursor: pointer;
  transform: scale(1.4);
  pointer-events: auto;
}

.image-grid-img-overlay-pending-change-marker {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-grid-img-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  cursor: pointer;
  text-align: center;
  border: 2px solid transparent;
}

.image-grid-img-container:hover {
  border: 2px solid black;
}

.bg-shimmer-animation {
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #F9FAFB;
  background: linear-gradient(to right, #F2F5F8 8%, #FCFCFC 20%, #F2F5F8 32%);
  background-size: 1200px 100%;
}

@-webkit-keyframes shimmer {
  0% {
    background-position: -100% 0;
  }

  100% {
    background-position: 100% 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1200px 0;
  }

  100% {
    background-position: 1200px 0;
  }
}

.image-grid-zoom-group.input-group {
  align-items: center;
}

.image-grid-zoom-group .zoom-range {
  /* Basically the same height and styles as .btn.btn-sm */
  height: 31px;
  border: 1px solid rgba(27,31,35,0.15);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* Customization to make it fit properly in the container */
  width: 75px;
  padding: 0 6px;
  border-left: none;
  border-right: none;
}

/* Page dropdown selector */
.current-page .dropdown-menu {
  min-width: 125px;
}

/*******************************************************************************
 * Image Robustness Tab CSS
 ******************************************************************************/

.robustness-score-tab {
  border: 1px solid transparent;
  padding: 10px 15px 10px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.robustness-score-comparison-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  margin-bottom: 30px;
  border-radius: 5px;
}

.robustness-score-tab.active,
.robustness-score-tab:hover {
  cursor: pointer;
  border: 1px solid #dfdfdf;
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
}

.robustness-score-tab .title,
.robustness-score-comparison-tab .title {
  font-weight: 500;
  font-size: 22px;
  color: #28a745;
  width: 275px;
  display: inline-block;
}

.robustness-min-max-image-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  padding: 0 5px;
}

.robustness-min-max-image-container img {
  width: 48%;
  height: 100%;
  border-radius: 5px;
}

/*******************************************************************************
 * Image Explainability Tab CSS
 ******************************************************************************/

.high-calibration-error {
  font-style: bold;
  color:#DC3545;
}

#explanation-original-image-upload-message,
#explanation-heatmap-upload-message,
#image-editor-unit-upload-message,
#image-editor-orig-prediction-upload-message,
#image-editor-new-prediction-upload-message {
  width: 250px;
  height: 250px;
  border: 1px dashed #6c757d;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#explanation-loading-animation,
#original-image-loading-animation,
#image-editor-loading-animation,
#model-exp-loading-animation,
#model-exp-image-editor-loading-animation {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: 1s linear infinite rotation;
}

#image-editor-new-prediction-loading-animation {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: 1s linear infinite rotation;
}

#explanation-original-image,
#explanation-heatmap,
#image-editor-original-prediction,
#image-editor-new-prediction {
  width: 100%;
  height: 100%;
  max-height: 300px;
  max-width: 300px;
  object-fit: contain;
}

.image-editor-cursor {
  display: none;
}

#image-editor-canvas:hover {
  cursor: none;
}

#image-editor-canvas:hover .image-editor-cursor {
  display: block;
}

#explanation-original-image {
  cursor: pointer;
}

#explanation-original-image:hover {
  box-shadow: 0 0 0 2px black;  /* Use box-shadow: to create a border instead of border: to avoid complicated alignment problems with box-sizing */
}

.explanation-col-footer {
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  background: #686868;
  color: white;
  padding: 5px;
}

/*******************************************************************************
 * Image Model Bias Tab CSS
 ******************************************************************************/

.all-metrics-segment-selector-container,
.per-class-metrics-class-selector-container {
  border: 1px solid #dee2e6;
  background-color: rgb(246, 248, 250);
  padding: 10px;
}

.all-metrics-segment-selector-label,
.per-class-metrics-class-selector-label{
  font-weight: 500;
}

/*******************************************************************************
 * Image Error Analysis Tab CSS
 ******************************************************************************/


.vertical-text-label {
  /* https://stackoverflow.com/a/47245068/908744 */
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

#data-correlation-matrix-loader {
  animation: 1s linear infinite rotation;
}

table#confusion-matrix {
  /* Make the header border visible while hiding vertical / horizontal borders */
  border-collapse: separate;
  border-spacing: 0px;
}

.confusion-matrix-percent {
  font-weight: 400;
}

#confusion-matrix-loading-animation,
.confusion-matrix-loading-animation {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: 1s linear infinite rotation;
}


/*******************************************************************************
 * New Report CSS
 ******************************************************************************/

.available-report-type {
  background: #efefef;
  color: #444;
  font-weight: 500;
}

.CodeMirror {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  height: auto;
}

/*******************************************************************************
 * New Model / New Version Page CSS
 ******************************************************************************/

.model-format,
.model-location,
.predictions-location,
.data-location,
.preprocess-file-location,
.metadata-location,
.annotations-location,
.annotations-config-location,
.class-names-location,
.custom-data-reader-location {
  display: inline-block;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  margin-right: 9px;
  cursor: pointer;
  opacity: 0.6;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  /* CSS below is for horizontal + vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-format img {
  width: 50px;
  height: auto;
}

.model-location img,
.predictions-location img,
.data-location img,
.preprocess-file-location img,
.metadata-location img,
.annotations-location img,
.annotations-config-location img,
.class-names-location img,
.custom-data-reader-location img {
  width: 40px;  /* These square logos look better at a smaller size */
  height: auto;
}

.model-format.selected,
.model-location.selected,
.predictions-location.selected,
.data-location.selected,
.preprocess-file-location.selected,
.metadata-location.selected,
.annotations-location.selected,
.annotations-config-location.selected,
.class-names-location.selected,
.custom-data-reader-location.selected {
  border-color: black;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  border-width: 2px;
  opacity: 1.0;
}

.model-format:hover,
.model-location:hover,
.predictions-location:hover,
.data-location:hover,
.preprocess-file-location:hover,
.metadata-location:hover,
.annotations-location:hover,
.annotations-config-location:hover,
.class-names-location:hover,
.custom-data-reader-location:hover {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  opacity: 1.0;
}

.model-format.model-format-disabled,
.model-location.model-location-disabled,
.data-location.data-location-disabled,
.preprocess-file-location.preprocess-file-location-disabled,
.metadata-location.metadata-location-disabled {
  box-shadow: none;
  opacity: 0.6;
  background: #e9e9e9;
  cursor: default;
}

.file-sub-header {
  /* Same shape as .model-format cells */
  font-size: 12px;
  width: 60px;
  min-width: 60px;
  height: 60px;
  font-weight: 500;
  color: #6c757d;
  background-color: #f4f6f9;
  border-radius: 0.25rem;
  margin-right: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.help-text,
.help-text-data {
  font-size: 12px;
  color: grey;
  display: none;
}

.help-text-preprocess {
  font-size: 12px;
  color: grey;
}

.help-text ul {
  padding-left: 25px;
}

.model-bias-settings-table,
#model-per-class-bias-settings-table,
#backward-compatibility-settings-table,
#model-object-detection-thresholds-table,
#robustness-thresholds-table {
  width: 50%;
  font-size: .875rem;
}

#other-message {
  font-size: 14px;
}

.thresholds-centered {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
}

.bootstrap-select.bias-metric,
.bootstrap-select.backward-compatibility-metric,
.bootstrap-select.robustness-threshold-metric  {
  width: 285px !important;
}

/* Based on the is-invalid class for select, input etc from Bootstrap */
div .is-invalid {
  color:#dc3545;
}

[data-error-message-for] {
  color:#dc3545;
  font-size: 14px;
}

/* Make paragraphs not have bottom margin */
[data-error-message-for] > p {
  margin: 0;
}

[data-error-message-for] > p:first-child {
  padding-top: 0.25rem;
}

/* Make Bootstrap select button also red */
.is-invalid .dropdown-toggle, .is-invalid.dropdown-toggle {
  border-color: #dc3545 !important;
}

#segment-editor-alertbox .alert, #sliced-segment-editor-alertbox .alert, #api-key-modal-alertbox .alert,
#edit-segment-editor-alertbox .alert, #segment-editor-bias-finder-msg {
  width: 100%;
}

.container.wide-responsive-container>#alertbox>.alert {
  max-width: 1050px;
  min-width: 928px;
  width: 100%;  /* Override the .container>.card's width */
}

.local-file-upload-icon, .text-input-icon {
  height: 30px;
  width: 30px;
}

#model-format-scroll > .scrollable-container-left,
#model-format-scroll > .scrollable-container-right {
  top: 15px;
}

#model-format-scroll > .scrollable-container-left {
  left: 50px;
}

/*******************************************************************************
 * Login Page CSS
 ******************************************************************************/

 #login-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#login-card {
  width: 350px;
}

#login-logo-container {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 30px;
}

#login-logo {
  width: 85%;
}

.toggle-password-visibility {
  background: transparent;
  border: none;
  float: right;
}

.toggle-password-visibility,
.toggle-password-visibility * {
  color: #007bff;
}

.toggle-password-visibility:hover,
.toggle-password-visibility:hover * {
  color: #0a58ca;
  text-decoration: underline;
}

/*******************************************************************************
 * Navbar
 * (Mostly copied from the Bootstrap Dashboard template.)
 ******************************************************************************/

 #navbar-container {
  height: 50px;
}

.navbar-brand {
  display: flex;
  width: 100%;
  height: 50px;
  padding: 0.5rem 1.125rem !important;
  margin: 0 !important;
}

#navbar-brand-link {
  max-width: 100%;
  height: 100%;
}

#navbar-icon,
#navbar-icon-collapse {
  vertical-align: top;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left;
}

#navbar-icon {
  display: none;
}

#navbar-brand-link:hover {
  opacity: 0.5;
}

.navbar-dark {
  background-color: #24292f;
}

.navbar .navbar-toggler {
  right: 1rem;
  border-color: #9c9c9c;
}

.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:active {
  border-color: white;
}

.navbar .navbar-toggler:focus {
  outline: none;  /* Bad for accessibility */
}

.navbar-toggler .feather {
  width: 100%;
  height: 100%;
  color: #ececec;
}

/*******************************************************************************
 * Sidebar
 * (Mostly copied from the Bootstrap Dashboard template.)
 ******************************************************************************/

#sidebar-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  overflow-y: auto;
  z-index: 20;
}

.sidebar-menu-text {
  margin-left: 4px;
  display: none;
}

.sidebar-content {
  min-height: 100%;
  width: 58px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: #2D2D2E;
}

#sidebar-menu .nav-text {
  display: block;
  padding: 0.5rem 1rem;
  cursor: default;
}

#sidebar-menu .nav-link .feather,
#sidebar-menu .nav-text .feather {
  color: white;
}

#sidebar-menu .nav-link {
  padding: 0.3rem 0.6rem;
  line-height: 22px; /* 1px more than default for a little "bottom padding",
                        looks more vertically centered */
}

#sidebar-menu .nav-link > span {
  font-weight: 500;
  color: #ccc;
  display: inline-block;
  width: 100%;
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
}

#sidebar-menu .nav-link:hover > span {
  background-color: #394861;
}

#sidebar-menu .nav-link.active > span {
  background-color: #2563eb;
}

#sidebar-menu .nav-link.active > span,
#sidebar-menu .nav-link:hover > span {
  color: white;
}

#sidebar-bottom {
  margin-top: auto;
  width: 100%;
  padding-bottom: 8px;
}

/* The width at which the sidebar appears, due to the class .d-xxl-block on #sidebar-menu */
@media (min-width: 1500px) {
  /* Note: nav#sidebar-menu and main are adjacent elements in the DOM. However,
     nav#sidebar-menu is position:fixed, so it is outside of the document flow
     and does not affect the position of main.
     So, we manually move main left by the width of nav#sidebar-menu. */
  main {
    padding-left: 180px;
  }

  .sidebar-content {
    width: 180px;
  }

  .sidebar-menu-text {
    display: inline;
  }

  .navbar-brand {
    padding: .5rem 1.1rem !important
  }

  #navbar-icon {
    display: block;
  }

  #navbar-icon-collapse {
    display: none;
  }
}

/*******************************************************************************
 * Button CSS (adapted from GitHub Primer and Tailwind UI)
 ******************************************************************************/

.btn {
  border-color: rgba(27,31,35,0.15) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  white-space: nowrap;
}

/* Undo the border and box-shadow for link buttons */
.btn-link {
  border: none !important;
  box-shadow: none !important;
}

/* Outline buttons should have their original color */
.btn-outline-danger,
.btn-outline-success,
.btn-outline-primary,
.btn-outline-info,
.btn-outline-secondary {
  background-color: white;
}

/* Our custom .btn overrides the original outline colors, so we need to re-apply them */
.btn-outline-primary {
  border-color: #007bff !important;
}
.btn-outline-success {
  border-color: #28a745 !important;
}
.btn-outline-danger {
  border-color: #dc3545 !important;
}
.btn-outline-info {
  border-color: #17a2b8 !important;
}
.btn-outline-warning {
  border-color: #ffc107 !important;
}

.btn-outline-primary {
  border-color: #007bff !important;
}

/* Controlling the color of status buttons and left side lines based on hover
or selection. */
.btn-group>.process-item-status-oos:hover,
.process-item-status-oos.active {
  background-color:#545b62 !important;
  color: #fff !important;
}

.btn-group>.process-item-status-pass:hover,
.process-item-status-pass.active {
  background-color:#28a745 !important;
  color: #fff !important;
}

.btn-group>.process-item-status-fail:hover,
.process-item-status-fail.active {
  background-color:#DC3545 !important;
  color: #fff !important;
}

.btn-group>.process-item-status-pending:hover,
.process-item-status-pending.active {
  background-color: orange !important;
  color: #fff !important;
}

.process-item-status-wrapper {
  border-left: 5px solid #dddede;
}

.process-item-status-wrapper:has(.process-item-status-oos.active) {
  border-left: 5px solid #545b62;
}

.process-item-status-wrapper:has(.process-item-status-pass.active) {
  border-left: 5px solid #28a745;
}

.process-item-status-wrapper:has(.process-item-status-fail.active) {
  border-left: 5px solid #DC3545;
}

.process-item-status-wrapper:has(.process-item-status-pending.active) {
  border-left: 5px solid orange;
}

/* Squeezing the generous text margins to fit more text */
.process-item-status-wrapper ul {
  padding-left: 20px;
  margin-left: 0;
  margin-bottom: 0;
}

#hide-oos-items {
  margin-top: 3px!important; /* Aligning checkbox and text vertically */
}

.unassessed-progressbar {
  background-color: #e9ecef;
  color: #212529!important;
}

.control-tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  column-gap: 0.25rem;
}

.btn-outline-secondary {
  color: #343a40 !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.show>.btn-outline-secondary.dropdown-toggle {  /* The last class is when the button is an active dropdown selector */
  background-color: #f7f8f9 !important;
}

.btn-outline-secondary:disabled {
  background-color: transparent !important;
}

.btn-invisible {
  border-color: transparent !important;
  box-shadow: none !important;
  position: relative;
  color: #007bff;
  text-decoration: none !important;
}

.btn-invisible:hover {
  color: #007bff;
  border-color: #c2c7cc !important;
  background: transparent !important;
}

.btn-invisible.black,
.btn-invisible.black:hover {
  color: #212529;
}

.btn-invisible:disabled {
  color: grey;
}

.btn-invisible:disabled:hover {
  color: grey;
  border-color: white !important;
}

.btn-top-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* Background color of the "Browse" button in file upload inputs */
.custom-file-label::after {
  background-color: rgb(244 246 249);
}

/* We align inner and parent element vertically with translateY
 * https://stackoverflow.com/a/40530161
 * It's supported down to IE9 */
.table-dot-menu {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 5px;
}

.table-dot-menu .feather {
  transition: color .15s ease-in-out;  /* Same as bootstrap transition on border-color */
  color: #999 !important;
}

.table-dot-menu:hover .feather {
  color: #333 !important;
}

/*******************************************************************************
 * GitHub Style Banners / Alerts
 ******************************************************************************/

.alert-danger {
  background-color: #ffe3e6;
  border-color: rgba(158,28,35,0.2);
}

.alert-primary {
  background-color: #dbedff;
  border-color: rgba(4,66,137,0.2);
}

.alert-success {
  background-color: #dcffe4;
  border-color: rgba(23,111,44,0.2);
}

/*******************************************************************************
 * Feather Icon styles
 ******************************************************************************/

.btn-invisible .feather-plus,
.btn-invisible .feather-x {
  stroke-width: 3;
}

/*******************************************************************************
 * Flexdatalist styles
 ******************************************************************************/

.input-container.flexdatalist-multiple-value input {
  outline: none;
  box-shadow: none;
  width: 100px;
  min-width: 100px;  /* This is needed since sometimes the plugin sets the width on the element too small */
}

.flexdatalist-results li {
  cursor: pointer;
}

.flexdatalist-multiple li.value {
  font-weight: 400;
}

.input-container.flexdatalist-multiple-value {
  margin-left: 0;
}

/*******************************************************************************
 * Bootstrap-Select CSS
 ******************************************************************************/

.bootstrap-select .dropdown-toggle:focus {
  outline: none !important;  /* Bad for accessibility, but it's not drawn with the proper padding */
}

.bootstrap-select.fit-width .dropdown-toggle .filter-option {
  padding-right: 4px;
}

.form-control-sm.bootstrap-select input[type=search] {
  /* Manually apply Bootstrap's .form-control-sm to the search bar */
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

/* Hack until https://github.com/snapappointments/bootstrap-select/issues/2640 is fixed */
.dropdown-menu .hide-in-dropdown {
  display: none;
}

/* https://stackoverflow.com/questions/48913405/bootstrap-selectpicker-data-subtext-disappears/49030441#49030441 */
.bootstrap-select .filter-option .hide-in-selected-option {
  display: none;
}

/* Replace the same padding between option and subtext as inside the dropdown */
.bootstrap-select .filter-option-inner-inner small {
  padding-left: 0.25em;
}

/* If we use data-content="..." in a bootstrap-select dropdown, we can't use
data-subtext="...", so we can simulate a subtext by manually writing
data-content="...<small class='text-muted'>subtext</small>". This style makes
the subtext not show up on the selected option.
See: https://stackoverflow.com/a/49030441/908744
*/
.bootstrap-select .filter-option small.text-muted {
  display: none;
}

.bs-searchbox {
  padding-bottom: 12px;
}

.bootstrap-select .dropdown-menu li.disabled a {
  pointer-events: auto;  /* To show the disabled cursor */
}

/* Mimic the look of Bootstrap's disabled custom-select */
.bootstrap-select.disabled button.dropdown-toggle {
  opacity: 0.7 !important;
  color: #6c757d !important;
  background-color: #e9ecef !important;
}

.bias-segment .filter-option-inner-inner {
  white-space: normal;
  word-break: break-all;
  max-width: 100%;
}

.bias-segment .inner {
  min-width: 100%;
  max-width: 600px;
  width: max-content;
}

/* When multiple options are selected and have the hide-in-dropdown we need
   to show only the first one and hide the other ones */
.filter-option-inner-inner .hide-in-dropdown:not(:first-child) {
  display: none;
}

/* Dataset options that are incompatible with the currently selected model in the
   "New SMSD Report" page need to be rendered as disabled
*/
.bootstrap-select li a.incompatible {
  pointer-events: none;
  color: #adb5bd;
  background-color: transparent;
}

/* The subtext of the incompatible dataset needs to be given color, since
   when not disabled it's white */
.bootstrap-select li a.incompatible .text-muted {
  color: #adb5bd !important;
}

/*******************************************************************************
 * Scrollable container CSS
 ******************************************************************************/

.scrollable-container{
  overflow-x: scroll;
  flex-wrap: nowrap;
  white-space: nowrap;
  scrollbar-width: none; /* Hide a scrollbar but able to scroll on Firefox */
}

.scrollable-container::-webkit-scrollbar {
  display: none;  /* Hide a scrollbar but able to scroll on Safari and Chrome */
}
.scrollable-container-left,
.scrollable-container-right {
  position: absolute;
  top: 0.25rem;
  z-index: 50;
  width: 2rem;
  height: 2rem;
  box-shadow: 3px 3px 5px 0 rgb(0, 0, 0, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.9);
  display: none; /* scrollable_container.js will handle showing or hiding the button */
}

.scrollable-container-left {
  left: -15px;
}

.scrollable-container-right {
  right: -15px;
}

/*******************************************************************************
 * Image Modal CSS
 ******************************************************************************/

#image-grid-modal .modal-xl,
.image-grid-modal .modal-xl,
#annotator-image-modal .modal-xl,
#duplicate-image-modal .modal-xl,
#distorted-image-grid-modal .modal-xl {
  /* Do not shrink modal if window shrinks */
  width: 1280px;
  min-width: 1280px;
  max-width: 1280px;
}

.image-modal-img,
#annotator-image-modal-img,
#duplicate-image-modal-img {
  width: 100%;
  max-width: 600px;
  max-height: 600px;
  object-fit: contain;
}

#distorted-image-modal-img,
#distorted-image-modal-original-img {
  width: 100%;
  max-width: 550px;  /* This modal contains more labels than other modals */
  max-height: 550px;
  object-fit: contain;
}

#image-modal-img-openseadragon,
.image-modal-img-openseadragon {
  /* I think OpenSeadragon requires an absolute height and width */
  width: 600px;
  height: 600px;
}

#image-modal-true-label,
.image-modal-true-label,
#annotator-image-modal-true-label,
.duplicate-image-true-label {
  background-color: #777777CC;
  color: white;
  width: 600px;  /* Same as #image-modal-img */
  text-align: center;
  margin-top: 0.25rem;
}

#distorted-image-modal-true-labels,
#distorted-image-modal-predictions,
#distorted-image-modal-original-predictions {
  background-color: #777777CC;
  color: white;
  width: 550px;  /* Same as #distorted-image-modal-img */
  text-align: center;
  margin-top: 0.25rem;
}

.modal-collapse-header {
  cursor: pointer;
}

.modal-collapse-header .feather-chevron-down,
.modal-collapse-header .feather-chevron-right {
  color: grey;
  width: 22px;
  height: 22px;
}

.modal-collapse-header:hover .feather-chevron-down,
.modal-collapse-header:hover .feather-chevron-right {
  color: black !important;
}

.modal-collapse-header-wrapper {
  display: grid;
  row-gap: 2rem;
}

.image-modal-predicted-class {
  background: #28a745;  /* Same as .bg-success */
  color: white;
  font-weight: 600;
}

/*******************************************************************************
 * OpenSeadragon CSS
 ******************************************************************************/

/* This is for the zoom control icons. There's no other way to style them.
(There are no other <img>s inside .openseadragon-container. The actual
background image is drawn inside a <canvas> element.) */
.openseadragon-container img {
  width: 30px;
  height: 30px;
  margin-top: 4px !important;
  margin-left: 4px !important;
  border-radius: 4px;  border-radius: 2px;
}

/*******************************************************************************
 * Annotorious CSS
 ******************************************************************************/

/* Don't display the "outer" border of a bounding box */
svg.a9s-annotationlayer .a9s-annotation .a9s-outer {
  display: none;
}

/* We only display the "inner" border of a bounding box */
svg.a9s-annotationlayer .a9s-annotation .a9s-inner {
  stroke-width: 2;
}

/* Visually differentiate predicted vs ground truth bounding boxes */
svg.a9s-annotationlayer .a9s-annotation.pred-bbox .a9s-inner {
  stroke: #FA151D;
}
svg.a9s-annotationlayer .a9s-annotation.true-bbox .a9s-inner {
  stroke: #00ff00;
}

/* We need to use .hover instead of :hover since Annotorious-OpenSeadragon
starts the .hover state a few pixels before the mouse is actually :hover'ing
on the bounding boxes. */
svg.a9s-annotationlayer .a9s-annotation.pred-bbox.hover .a9s-inner  {
  fill: #fa151d68;
}
svg.a9s-annotationlayer .a9s-annotation.true-bbox.hover .a9s-inner {
  fill: #00ff0068;
}

/* Add a moving dashed border animation when the user clicks on a bounding box */
svg.a9s-annotationlayer .a9s-annotation.selected .a9s-inner {
  stroke-width: 3;
  stroke-dasharray: 5;
  animation: dash 1s linear forwards infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Default styles for the class name labels on top of each bounding box.
   Copied from: https://github.com/recogito/recogito-client-plugins/tree/main/plugins/annotorious-shape-labels */
.a9s-annotationlayer .a9s-formatter-el,
.a9s-annotationlayer .a9s-formatter-el foreignObject {
  overflow:visible;
  pointer-events:none;
}

/* Default styles for the class name labels on top of each bounding box.
   Adapted from: https://github.com/recogito/recogito-client-plugins/tree/main/plugins/annotorious-shape-labels
   BUG: Chrome 112+ doesn't support CSS selectors inside a foreignObject. For example,
   `foreignObject .a9s-shape-label-wrapper` won't work, but `.a9s-shape-label-wrapper` will.
   See: https://bugs.chromium.org/p/chromium/issues/detail?id=1432837 */
.a9s-shape-label-wrapper {
  position:relative;
  transform:translateY(-100%);
  padding-bottom:4px;
}

/* Default styles for the class name labels on top of each bounding box.
   Adapted from: https://github.com/recogito/recogito-client-plugins/tree/main/plugins/annotorious-shape-labels
   BUG: Chrome 112+ doesn't support CSS selectors inside a foreignObject. For example,
   `foreignObject .a9s-shape-label-wrapper` won't work, but `.a9s-shape-label-wrapper` will.
   See: https://bugs.chromium.org/p/chromium/issues/detail?id=1432837 */
.a9s-shape-label-wrapper .a9s-shape-label {
  display:table;
  padding:3px 5px;
  white-space:nowrap;
  background-color:rgba(255, 255, 255, 0.85);
  border-radius:3px;
  font-size:14px;
}

/* Custom styles for the class name label above each bounding box */
.a9s-shape-label {
  position: relative;
  right: 1px;
  top: 4px;
  font-size: 11px !important;
  border-radius: 0px !important;
  padding: 0px 4px !important;
}
.pred-bbox .a9s-shape-label {
  color: white;
  background-color: #FA151D !important;
}
.true-bbox .a9s-shape-label {
  color: black;
  background-color: #03ff00 !important;
}
.selected .a9s-shape-label {
  font-weight: 700;
}

/* Custom styles for the tooltip when hovering on a bounding box */
.a9s-hover-tooltip {
  position: absolute;
  font-size: 12px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  padding: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  width: 200px;
  pointer-events: none;
  z-index: 100;
}


/*******************************************************************************
 * Report Checklists styles
 ******************************************************************************/


.checklist-item-notes-textarea {
  width: 390px !important;
}

a.editable-click {
  color: #212529;
  border-bottom: none !important;
}

a.editable-click:hover {
  border-bottom: dashed 1px #b7b7b7 !important;
}

a.editable-empty {
  color: #007bff;
  font-style: normal;
  border-bottom: none !important;
}

a.editable-empty:hover {
  color: #007bff;
  font-style: normal;
  border-bottom: solid 1px #007bff !important;
}

.checklist-item-status .dropdown-item.active span,
.checklist-item-status .dropdown-item:active span {
  color:#fff !important;
}

.checklist-item-status .dropdown-item.active:has(span):has(.text-danger),
.checklist-item-status .dropdown-item:active:has(span):has(.text-danger) {
  background-color:#DC3545 !important;
}

.checklist-item-status .dropdown-item.active:has(span):has(.text-success),
.checklist-item-status .dropdown-item:active:has(span):has(.text-success) {
  background-color:#28a745 !important;
}

.checklist-item-status .dropdown-item.active:has(span):has(.text-warning-darker),
.checklist-item-status .dropdown-item:active:has(span):has(.text-warning-darker) {
  background-color:orange !important;
}

.checklist-item-status .text-warning-darker {
  color: orange;
}

/*******************************************************************************
 * Matrix
 ******************************************************************************/

.matrix-wrapper table {
  transform-origin: 0 0;
  border-collapse: separate;
  border-spacing: 0;
}

.matrix-wrapper table .content {
  padding: 0;
}

.matrix-wrapper table .content > div {
  font-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.matrix-wrapper table .top-header,
.matrix-wrapper table .left-header {
  white-space: pre;
  font-size: 16px;
}

.matrix-wrapper table .left-header {
  vertical-align: middle;
}

.matrix-wrapper table .top-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: white;
  border-bottom: 1px solid #dee2e6;
  vertical-align: bottom;
  padding-bottom: 10px;
}

.matrix-wrapper table .top-header > div {
  margin: 0 auto;
}

.matrix-wrapper table .left-header {
  position: sticky;
  left: 0;
  z-index: 2;
  background: white;
  border-right: 1px solid #dee2e6;
  text-align: right;
  padding-right: 10px;
}

.matrix-wrapper table .top-left-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  border-bottom: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
  background-color: white;
}

.matrix-scroll {
  width: 100%;
  max-height: 800px;
  overflow: auto;
}

/*
This works on Chrome, Edge, Opera and Safari, but not on Firefox.
Currently there is no way to force-display a scrollbar on Firefox.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
*/
.matrix-scroll::-webkit-scrollbar {
  width: 8px; /* Always show a scrollbar */
  height: 8px;
}

.matrix-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
}


.matrix-cell-clickable {
  cursor: pointer;
}

.matrix-cell-clickable:hover > div,
.matrix-cell-clickable.active > div {
  box-shadow: inset 0px 0px 0px 2px black;
}

.matrix-container,
#matrix-container {
  padding: 0 10px;
}

.matrix-header-top,
.matrix-header-left  {
  font-size: 18px;
  font-weight: 500;
}

.matrix-header-top {
  padding-bottom: 10px;
}

.matrix-header-left {
  padding-left: 10px;
}

.matrix-header-top.binary {
  padding-bottom: 15px;
}

.matrix-header-left.binary {
  padding-left: 15px;
}

/*******************************************************************************
 * Bootstrap Multiselect Overrides
 ******************************************************************************/

.tag-multiselect-empty-text {
  font-style: italic;
}

.tag-multiselect-empty-text input[type="checkbox"] {
  display: none;
}

.tag-multiselect-selector-button {
  flex-grow: 1;
  min-width: 200px;
}

.tag-multiselect-footer {
  background-color: rgb(246, 248, 250);
  color: #6c757d;
  padding: 5px 15px;
  font-size: 11px;
  cursor: auto;
}

.tag-multiselect-option-note {
  color: #495057;
  font-size: 0.75rem;
  font-weight: 400;
  /* Allow multi-line text and make it truncate at 2 lines */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-multiselect label {
  display: block; /* So it works with the ellipsis defined above */
}

/* The height of .form-control but with +1px because of the taller tags */
.tag-multiselect .multiselect-search {
  height: calc(1.5em + .75rem + 2px + 1px);
}

/* Make search input have the icon to the left correctly positioned */
.multiselect-filter {
  position: relative;
}

.multiselect-filter svg {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

/* Make search input have the icon to the left correctly positioned */
.multiselect-container .multiselect-filter>input.multiselect-search {
  margin-left: 0 !important; /*For some reason it has negative margin by default*/
}

/* Make selected options text overflow into multiple lines */
.multiselect-native-select .btn-group {
  display: flex !important;
  height: initial !important;
  align-items: center;
}

.multiselect {
  height: initial !important;
  overflow: initial !important;
  text-overflow: initial !important;
}

.multiselect-custom-select {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin-bottom: 0 !important;
  background-color: white;
  border-radius: 5px;
  border: 1px solid rgb(206, 212, 218); /* Same as Flexdatalist */
  border-radius: 3.2px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.multiselect-custom-select li {
  display: inline;
  white-space: pre;
}

.multiselect-custom-select li.item {
  position: relative;
  display: inline-block;
  height: 1.5rem;
  padding: 2px 25px 2px 7px;
  margin: 0.375rem;
  background: #efefef;
  border-radius: 3px;
  color: #444;
  font-size: 0.875rem;
}

.multiselect-custom-select.disabled li.item {
  padding: 2px 7px 2px 7px;
}

.multiselect-custom-select li span.item-remove {
  font-weight: 700;
  padding: 2px 5px;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  opacity: 0.70;
}

.multiselect-custom-select.disabled li.item span.item-remove {
  display: none;
}

.tag-multiselect .multiselect-container.dropdown-menu {
  width: 100%;
  max-height: 400px !important;
  top: initial !important;
  bottom: 0;
  transform: translateY(100%) !important;
}

.multiselect-filter {
  width: 100%;
}

.multiselect-search {
  width: 100%;
  box-shadow: none !important;
  border: none !important;
  font-size: .875rem;
}

.text-lg .multiselect-search {
  font-size: 1rem;
}

.multiselect-option.dropdown-item.active,
.multiselect-group.dropdown-item.active {
  color: #007bff !important;
  background: #d1e3ff !important;
  font-weight: 500;
}

.multiselect-option.dropdown-item:active,
.multiselect-group.dropdown-item:active,
.multiselect-option.dropdown-item:focus,
.multiselect-group.dropdown-item:focus,
.multiselect-option.dropdown-item:hover ,
.multiselect-group.dropdown-item:hover {
  background: #d1e3ff99 !important;
}

.multiselect-no-results-found-box {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  font-size: 1rem;
  font-style: italic;
  color: #212529;
  background: white;
  padding: 0.25rem 0.25rem 0.25rem 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  z-index: 1000;
  visibility: hidden; /* Hidden unless input is active */
}

.multiselect-custom-select.show .multiselect-no-results-found-box {
  visibility: visible;
}

.tall-multiselect .tag-multiselect .multiselect-container.dropdown-menu {
  max-height: 600px !important;
}

/*******************************************************************************
 * No UI Slider Overrides
 ******************************************************************************/

.noUi-connect {
  background: #007bff;
}

.noUi-horizontal {
  height: 8px;
}

.noUi-handle {
  right: -11px !important;
  top: -5px !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50%;
  background: #007bff;
  box-shadow: none;
  border: none;
}

.range-slider[disabled] .noUi-handle,
.noUi-origin[disabled] .noUi-handle {
  background: #B8B8B8 !important;
}

.noUi-handle::before,
.noUi-handle::after {
  display: none;
}

.noUi-touch-area {
  opacity: 0;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  transition: none;
}


/*******************************************************************************
 * Lens table
 ******************************************************************************/

.lens-table-content-container {
  position: relative;
}

.lens-table {
  table-layout: fixed;
  width: 100%;
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

.lens-table tr:hover {
  background-color: #F7F8F9;  /* Slightly transparent variant of the border color */
}

.lens-table-no-hover-color .lens-table tr:hover {
  background-color: unset;
}

.lens-table td,
.lens-table th {
  position: relative;
  text-align: left;
}

.lens-table td {
  padding: 1rem;
}

.lens-table th {
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  font-size: 12px;
  color: #334155;
  font-weight: 500;
}

.lens-table tr {
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
}

.lens-table .sort-header span {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  white-space: nowrap;
}

.lens-table .text-center.sort-header span {
  justify-content: center;
}

.lens-table .sort-button {
  border: none;
  background: none;
  padding: 0;
}

.lens-table .sort-header span img {
  margin-left: 5px;
  width: 14px;
  height: 14px;
}

.lens-table .sort-header:hover span {
  opacity: 0.7;
}

.lens-table-empty,
.lens-table-more {
  background: white;
  text-align: center;
  border: 1px solid #dee2e6;
  border-top: none;
}

.lens-table-empty {
  padding: 1.5rem;
}

.lens-table-summary-row {
  background: #dcffe4;
  border: 1px solid #dee2e6;
  border-top: none;
}

.lens-table-more:hover {
  background-color: #F7F8F9;  /* Slightly transparent variant of the border color */
}

.lens-table-more a {
  display: inline-block;
  padding: 1.5rem 0;
  width: 100%;
}

.lens-table-dot-menu .feather {
  transition: color .15s ease-in-out;  /* Same as bootstrap transition on border-color */
  color: #999;
}

.lens-table-dot-menu:focus-visible {
  outline: 2px solid #0056b3;
}

.lens-table-dot-menu:hover .feather {
  color: #333;
}

.lens-table-dot-menu-disabled {
  color: #CCC;
}

.lens-table-link {
  padding: 0 !important;
}

.lens-table-link a {
  display: inline-block;
  word-break: break-word;
  padding: 1rem;
}

.lens-table a,
.lens-table button {
  position: relative;
  z-index: 1;
}

th.lens-table-link {
  padding-left: 1rem !important;
}

.lens-table-clickable-row:hover {
  background-color: #F7F8F9;  /* Slightly transparent variant of the border color */
  cursor: pointer;
}

.lens-table-link .lens-text-block {
  display: inline-block;
  padding: 1rem;
  word-break: break-all;
}

/* If a lens table overflows horizontally, add this class to its container */
.lens-table-overflow-x-wrapper .lens-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

.lens-table-overflow-x-wrapper table {
  table-layout: initial;
}

.lens-table-overflow-x-wrapper table th,
.lens-table-overflow-x-wrapper table td {
  white-space: nowrap;
}

/** To be used in a container with 'display: flex; flex-direction: column;' */
.lens-table-fullscreen {
  height: 1px;
  flex-grow: 1;
}

.lens-table-fullscreen .lens-table-content-container {
  height: 100%;
}

/* If a lens table overflows horizontally, add this class to its container */
.lens-table-overflow-wrapper .lens-table-wrapper {
  overflow: auto;
  max-width: 100%;
  max-height: 100%;
}

.lens-table-overflow-wrapper table {
  table-layout: initial;
}

.lens-table-overflow-wrapper table td {
  white-space: pre;
}

.lens-table-loading table {
 opacity: 0.5;
 transition: opacity 0.3s ease-in-out;
}

/* Give some breathing room to the loading indicator on the Dataset page */
#viewer .lens-table-wrapper {
  min-height: 100px;
}

.lens-table-loading-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
}

.lens-table-loading .lens-table-loading-screen {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

.lens-table-sticky-column-left,
.lens-table-sticky-column-right {
  background-color: white;
  position: sticky !important;
  z-index: 2;
}

.lens-table-sticky-column-left {
  box-shadow: inset -1px 0 0 #dee2e6;
}

.lens-table-sticky-column-right {
  box-shadow: inset 1px 0 0 #dee2e6;
}

.lens-table tr:hover .lens-table-sticky-column-left,
.lens-table tr:hover .lens-table-sticky-column-right {
  background-color: #F7F8F9;  /* Slightly transparent variant of the border color */
}

.lens-table tr.checked {
  background-color: #eef2ff;
}

.lens-table-fake-left-border {
  width: 1px;
  height: 100%;
  position: absolute;
  background: #dee2e6;
  top: 0;
  z-index: 3;
}

.lens-table-fake-left-border {
  left: 0;
}

.lens-table-checkbox {
  cursor: pointer;
}

.lens-table-checkbox label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: left;
  margin: 0;
}

.lens-table .checkbox-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 30px;
  height: 30px;
  pointer-events: none;
  border-radius: 50%;
  background-color: #007bff;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: 0.1s ease-in-out;
}

.lens-table .checkbox-overlay.align-top {
  top: 0;
  transform: translate(-50%, 50%);
}

.lens-table th:hover .checkbox-overlay,
.lens-table td:hover .checkbox-overlay {
  pointer-events: none;
  opacity: 0.3;
}

.lens-table-checkbox input {
  z-index: 2;
  pointer-events: auto;
}

.h-initial {
  height: initial !important;
}

.page-current {
  min-width: 45px;
  /* text-center */
  text-align: center !important;
  /* text-md */
  font-size: 14px;
  /* mr-1 */
  margin-right: 0.25rem !important;
}

/*******************************************************************************
 * Monitoring Table
 ******************************************************************************/

#monitoring-table table {
  min-width: 100%;
  width: max-content;
}

#monitoring-table table td {
  width: 150px !important;
}

#monitoring-table table th {
  width: initial !important;
  word-break: break-all;
  white-space: normal;
}

/*******************************************************************************
 * Manual Annotation
 ******************************************************************************/

.manual-annotation-criteria-box-saved-message {
  opacity: 0;
  pointer-events: none;
}

/*******************************************************************************
 * Event Logs
 ******************************************************************************/

#event-logs-table td,
#event-logs-table td * {
  word-break: break-word;
}

/*******************************************************************************
 * Semantic Segmentation & 3D Images
 ******************************************************************************/

#semantic-segmentation-images-spinner,
#image-3d-spinner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#semantic-segmentation-images-spinner > div,
#image-3d-spinner > div {
  background: rgba(255, 255, 255, 0.75);
}

#semantic-segmentation-images-spinner .spinner-border,
#image-3d-spinner .spinner-border {
  flex-shrink: 0;
}

#semantic-segmentation-container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

#semantic-segmentation-images-wrapper {
  width: 100%;
  margin: auto;
}

#semantic-segmentation-images {
  width: 100%;
}

#semantic-segmentation-labeled-image,
#semantic-segmentation-predicted-image,
#image-3d-image {
  width: 100%;
}

#semantic-segmentation-labeled,
#semantic-segmentation-predicted,
#image-3d-image {
  width: 100% !important;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#semantic-segmentation-images .konvajs-content,
#semantic-segmentation-images canvas {
  width: 100% !important;
  height: 100% !important;
}

#semantic-segmentation-images canvas {
  max-height: 500px;
  object-fit: contain;
}

#semantic-segmentation-images .konvajs-content canvas:first-child {
  position: relative !important;
}

#semantic-segmentation-images.side-by-side {
  display: flex;
}

#semantic-segmentation-images.side-by-side .konvajs-content {
  width: 50%;
}

#semantic-segmentation-images.side-by-side #semantic-segmentation-predicted {
  padding-right: 5px;
}

#semantic-segmentation-images.side-by-side #semantic-segmentation-labeled {
  padding-left: 5px;
}

#segmentation-class-div {
  display: flex;
  flex-wrap: wrap;
  max-height: 200px;
  overflow-y: auto;
}

.segmentation-checkbox {
  width: 50%;
  padding: 0.1rem;
}

.segmentation-checkbox label {
  display: inline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

#semantic-segmentation-image-control {
  width: 60%;
}

#image-3d-slice-loading {
  &:after {
    animation: 2s linear infinite dots;
    content: '';
  }
}

@keyframes dots {
  0%, 20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60% {
    content: '...';
  }
  90%, 100% {
    content: '';
  }
}

#segmentation-masks-section .disabled {
  opacity: 0.5;
  pointer-events: none;
}

/*******************************************************************************
 * Switches and radio buttons
 ******************************************************************************/

.custom-switch label {
  cursor: pointer;
}

.custom-switch input.disabled-report-type ~ label {
  cursor: default !important;
}

.custom-control-label {
  cursor: pointer;
}

.custom-control-input:disabled ~ .custom-control-label {
  cursor: default !important;
}

#new-dataset-file,
#model-file,
#preprocess-file,
#new-dataset-annotations-file,
#new-dataset-class-names-file {
  cursor: pointer;
}

/*******************************************************************************
 * Role name selector
 ******************************************************************************/

#role_name ~ .dropdown-menu li:active .text-muted {
  color: white !important;
}

/*******************************************************************************
 * Bootstrap Fullscreen Table overrides
 ******************************************************************************/

.bootstrap-table.bootstrap4.fullscreen {
  padding: 10px 20px;
}

.bootstrap-table .fixed-table-toolbar .bs-bars {
  margin-top: 0;
}

.text-highlight {
  font-weight: 600;
  background: yellow;
}

.fixed-table-loading .loading-text {
  /* Same as body */
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 0.875rem !important;
}

/*******************************************************************************
 * Text Performance Monitoring Page
 ******************************************************************************/

.monitoring-selector .dropdown-menu {
  min-width: 220px;
}

/*******************************************************************************
 * Text Report
 ******************************************************************************/

.text-problem-badge {
  display: inline-block;
  user-select: none;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important;
  background: white;
  color: #212529;
  border: 1px solid #bcbcbc;
}

.text-problem-badge-highlight {
  font-weight: 600;
}

.text-problem-badge.pass span {
  color: #28a745;
}

.text-problem-badge.fail span {
  color: #dc3545;
}

.text-problem-badge.explanation {
  cursor: pointer;
}

.text-problem-badge.explanation:hover {
  border: 1px solid #212529;
}

/* The arrow at the end of the badge */
.text-problem-badge svg:last-child {
  transition: transform ease-in 200ms;
}

.search-bar.input-group:focus-within div {
  border: 1px solid #80bdff; /* Align with .form-control:focus */
}

.search-bar.input-group:focus-within div:focus {
  border: 0;
}

.radar-average-score-title  {
  font-weight: 500;
  font-size: 22px;
  color: #28a745;
  display: inline-block;
}

#add-augmented-dataset-form .bootstrap-select .dropdown-item small {
  display: block;
  padding-left: 0;
}

/*******************************************************************************
 * Data Drift
 ******************************************************************************/

 /* Hide the "Select All" from the features dropdown since the user can only
    select up to 10 items */
#data-drift-chart-feature-select ~ .dropdown-menu .bs-select-all {
  display: none;
}

/* Fix the buttons getting squished if all the names in the dropdown are short.
   Nowrap doesn't work perfectly because of other width-related bootstrap classes */
.bs-actionsbox .bs-select-all, .bs-actionsbox .bs-deselect-all {
  min-width: 100px;
}

/*******************************************************************************
 * Pairwise & Manual Annotation
 ******************************************************************************/

.pairwise-comparison-btn {
  border-radius: .25rem !important;
}

.tie-is-better {
  border-color:orange !important;
  color: orange !important;
}

.tie-is-better:hover, .tie-is-better.active {
  background-color: orange !important;
  color: #fff !important;
}

.btn-outline-success.pairwise-comparison-btn {
  border-color: #28a745 !important
}

.manual-annotation-output-card,
.pairwise-comparison-output-card {
  transition: 0.2s;
  box-shadow: none;
  min-height: 100px;
  padding-bottom: 1rem !important;
  opacity: 100%;
  pointer-events: auto;
}

.pairwise-comparison-output-card.disabled {
  pointer-events: none;
  opacity: 50%;
}

.pairwise-comparison-output-card.chosen-single {
  border-color: #28a745;
  box-shadow: 0px 0px 0px 2px #28a745;
}

.pairwise-comparison-output-card.chosen-tie {
  border-color: orange;
  box-shadow: 0px 0px 0px 2px orange;
}

.manual-annotation-card,
.pairwise-comparison-card {
  padding: 0.75rem 1.25rem 0.85rem;
  color: #212529;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 5px;
}

.manual-annotation-card .feather,
.pairwise-comparison-card .feather {
  color: #b1b1b1;
}

.manual-annotation-card p:last-child,
.pairwise-comparison-card p:last-child {
  margin-bottom: 0;
}

.pairwise-comparison-card-header {
  background-color: rgb(246, 248, 250);
  font-size: 16px;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(0,0,0,.125);
  border-bottom: none;
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.manual-annotation-comments-input,
#pairwise-comparison-comments-input {
  padding: .5rem .75rem;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 5px;
}

.text-highlight {
  font-weight: 600;
  background: #ffee00;
}

.box {
  border: 1px solid rgba(0,0,0,.125);
  padding: 20px;
  padding-bottom: 2px; /* The hidden "Saved" message takes space */
  border-radius: 5px;
}

.box.highlight {
  border: 1px solid black;
}

.box.yes {
  border: 1px solid #28a745;
  outline: 1px solid #28a745; /* We want 2px border, but "border" increases the
                                   size of the element. With outline, it stays in place*/
}

.box.no {
  border: 1px solid #dc3545;
  outline: 1px solid #dc3545; /* We want 2px border, but "border" increases the
                                   size of the element. With outline, it stays in place*/
}

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

.btn-yes {
  color: #28a745;
  border-color: rgba(0,0,0,.125) !important;
  transition: none;
}

.btn-no {
  color: #dc3545;
  border-color: rgba(0,0,0,.125) !important;
  transition: none;
}

.btn-yes:hover {
  color: #28a746;
  background-color: white !important;
}

.btn-yes:focus-visible,
.btn-yes:hover {
  box-shadow: 0 0 0 .15rem #28a74699 !important;
}

.btn-yes.clicked {
  color: white;
  background-color: #28a745 !important;
}

.btn-no:hover {
  color: #dc3545;
  background-color: white !important;
}

.btn-no.clicked {
  color: white;
  background-color: #dc3545 !important;
}

.btn-no:focus-visible,
.btn-no:hover {
  box-shadow: 0 0 0 .15rem #dc354599 !important;
}


/*******************************************************************************
 * Text modals
 ******************************************************************************/

.last-p-mb-0 > p:last-child {
  margin-bottom: 0 !important;
}

/*******************************************************************************
 * Branding Settings
 ******************************************************************************/

.branding-settings-uploaded-img-container {
  width: 164px;
  height: 60px;
  border: 1px solid #dee2e6;
  background: url('/static/img/tiled_gray.png');
}

.branding-settings-uploaded-img-container > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  padding: 4px;
}

.branding-settings-uploaded-img-container > img:hover {
  opacity: 0.7;
}

#branding-settings-form input {
  cursor: pointer;
}

#report-info {
  position: relative;
  width: 100%;
  border: 1px solid rgba(0,0,0,.125);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  background: white;
  word-break: break-word;
  padding: 1.5rem;
  padding-top: 1.25rem; /* A bit less than 1.5 to offset font height */
}

.report-info-row {
  display: flex;
  width: 100%;
  margin-right: auto;
}

.details-card-text {
  padding-right: 1.5rem;
}

.details-card-text-thresholds {
  padding-top: 1rem;
}

.details-card-text:last-child {
  padding-right: 0;
}

table {
  margin-bottom: 0 !important;
}

/*******************************************************************************
 * Loading Overlay
 ******************************************************************************/

 .loading-ui-spinner {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: 0.1s linear appear;
  animation-delay: 0.25s;
  animation-fill-mode: forwards;
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/*******************************************************************************
 * Report UI titles with toolbars
 ******************************************************************************/

/*
 * This class should always wrap an <h5> followed by a <div>.
 * The <div> should have selectors, buttons, etc.
 */
.title-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.title-toolbar {
  margin-top: -0.25rem;
  margin-bottom: 1rem;
}

/*
 * The toolbar elements have some spacing between them.
 */
.title-toolbar > * {
  margin-left: 0.25rem !important;
  margin-top: 0.25rem !important;
}

/** Override this again */
.title-toolbar > *.ml-0 {
  margin-left: 0 !important;
}

/*
 * nav-pills have more space
 */
.title-toolbar > .nav-pills-wrapper {
  margin-left: 0.5rem !important;
}

.title-toolbar > h5 {
  word-break: break-word;
  line-height: 36px;
  margin-bottom: 0;
  margin-left: 0 !important;
  margin-right: auto;
}

/*******************************************************************************
 * Data Card
 ******************************************************************************/

/*
  * The CSS rules below are heavily reliant on the enforcement of the following
  * structure of the Data Card report in order to make HTML changes as easy as
  * possible
    <div class="tab-container tab-pane" id="..." role="tabpanel">
      <div class="data-card-section mt-2">

        <div class="row content-row">

          <div class="col col-4"> <!-- The section title column -->
            <div class="data-card-section-title">
              <h5>Annotations & Labeling</h5>
              <div class="text-md text-muted">The basic information about the contents of the dataset; useful to fill out because reasons and stuff</div>
            </div>
          </div>

          <div class="col col-8"> <!-- The section content column -->
            <div class="data-card-subsection-title">
              <h6>Data Annotation Methods</h6>
              {% include "snippets/data_card/help_links.html" %}
              <div class="help-text">...</div>
            </div>

            <input>...</input>
            <input>...</input>
            <input>...</input>

            <div class="data-card-subsection-title">...</div>

            <input>...</input>
            <input>...</input>
            <input>...</input>
          </div>
        </div>

        <div class="row content-row">...</div>
        <div class="row content-row">...</div>
        <div class="row content-row">...</div>
      </div>

      <div class="data-card-section">...</div>
      <div class="data-card-section">...</div>
      <div class="data-card-section">...</div>
    </div>
 */

.data-card-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-card-section.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.data-card-section-title {
  margin-top: -3px;
}

.data-card-subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Make the help text sections easier to read */
.data-card-subsection-title .help-text {
  width: 100%;
  position: relative;
  padding: .75rem 1.25rem;
  border: 1px solid #d6d8db;
  border-radius: .25rem;
  color: #444;
  background-color: #efefef;
  margin-bottom: 0;
  margin-top: 0.5rem;
  display: none;
}

.data-card-subsection-title ~ .data-card-subsection-title {
  margin-top: 2rem;
}

.data-card-subsection-title a {
  color:gray;
}

.data-card-subsection-title a:hover {
  color:black;
}

.data-card-subsection-title .help-text-collapse-btn svg {
  margin-bottom: -3px;
}

.data-card-subsection-title svg {
  width: 15px!important;
  height: 15px!important;
}

.data-card-subsection-title h6 {
  color: gray;
  margin-bottom: 0rem;
}


/* Stylize Quill rich text editors to be more in line with default textbox */
.ql-editor {
  font-family: 'IBM Plex Sans';
  font-size: .875rem;
  color: #495057;
  min-height: 2.75rem;
}

.form-control-sm .ql-editor {
  padding: 0;
  font-family: 'IBM Plex Sans';
  font-size: .875rem;
  line-height: 1.5;
  min-height: 1.3rem;
}


/* Include a hack from https://github.com/slab/quill/issues/2413#issuecomment-567208767
to allow for longer placeholders */
.ql-editor.ql-blank::before {
	content: none!important;
}

.ql-editor.ql-blank::after {
  color: rgba(0, 0, 0, 0.6)!important;
	content: attr(data-placeholder)!important;
	display: block!important;
	margin-top: -1.42em!important;
	min-height: 1em!important;
	pointer-events: none!important;
}

table .ql-toolbar {
  text-align: left;
}

.data-card-section .content-row .col-4 {
  top: 70px;
  position: sticky;
  align-self: flex-start;
}

.data-card-section .content-row .col .input-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
  margin-top: 1rem;
}


.data-card-section .content-row {
  width: 80%
}

/* Make multiselect internal paddings tighter */
.data-card-section .multiselect-custom-select li.item {
  margin: 0.2rem;
}

.data-card-section .multiselect-search {
  height: auto;
  padding: .25rem .5rem;
}

/* Custom CSS for the Type of Sensitive Data table */
#sensitive-data-table td:not(.delete-column) {
  vertical-align: top;
}

#sensitive-data-table ul.tag-multiselect.enlarged-version {
  min-height: 86px;
  align-items: start;
  align-content: start;
}

/* Misc */

.w-33 {
  width: 33% !important;
}

.font-italic {
  font-style: italic;
}

/*******************************************************************************
 * Markdown viewer
 ******************************************************************************/

.markdown h1 {
  font-size: 1.15rem;
}

.markdown h2 {
  font-size: 1.15rem;
}

.markdown h3 {
  font-size: 1.15rem;
}

.markdown h4 {
  font-size: 1rem;
}

.markdown h5 {
  font-size: 1rem;
}

.markdown h6 {
  font-size: 1rem;
}

.markdown li p {
  margin-bottom: 0;
}

/* Styles code blocks as a gray bubble  */
.markdown pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
  background: #eee;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.markdown table {
  margin-bottom: 1rem !important;
  border: 1px solid #dee2e6;
}

.markdown th,
.markdown td {
  padding: 0.25rem 0.5rem;
}

.markdown tr {
  border-top: 1px solid #dee2e6;
}

/*******************************************************************************
 * Chart.js Tooltip
 ******************************************************************************/

.chartjs-tooltip {
  position: absolute;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; /* Same as Chart.js */
  font-size: 0.75rem;
  padding: 5px 6px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 5px;
}

.chartjs-tooltip.animated {
  transition: all 0.2s ease-out;
}

.chartjs-tooltip .square {
  margin-right: 5px;
  width: 14px;
  height: 14px;
  outline: 1px solid rgba(255, 255, 255, 0.75);
  outline-offset: -1px;
}

.chartjs-tooltip table {
  background: transparent !important;
}

.chartjs-tooltip th {
  text-align: left;
  font-weight: 600;
  background: transparent !important;
}

.chartjs-tooltip-caret {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: -10px; /* Position the triangle below the div */
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; /* Top border color is same as div background */
}

.chartjs-tooltip.bottom .chartjs-tooltip-caret {
  bottom: initial;
  top: -10px;
  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; /* Top border color is same as div background */
}

/*******************************************************************************
 * Sample Data Points
 ******************************************************************************/

.sample-data-point-image-grid .image-grid-img-caption {
  font-size: 0.75rem
}

.sample-data-point-image-grid .image-grid-col {
  height: initial;
  margin-top: 0 !important;
  padding: 0 !important;
}

.sample-data-point-image-grid .image-grid-col .image-grid-img {
  height: initial;
}

.sample-data-point-image-custom {
  border: solid 2px transparent;
}

a:hover > .sample-data-point-image-custom {
  border-color: black
}

.pre-submit-thumbnail {
  /* Align colours with the disabled textbox */
  background-color: #e9ecef;
  color: #6c757d;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 165px;
  width: 50%
}

/*******************************************************************************
 * Daterangepicker
 ******************************************************************************/

/* Overwrites the default datepicker colours and fonts
* to be more in line with the rest of the website
*/
.daterangepicker {
  font-family: unset; /* Arial -> IBM Plex */
  margin-top: 0px;
}

.daterangepicker:before,
.daterangepicker:after {
  display: none;
}

.daterangepicker .ranges li.active {
  background-color: #007bff;
}

.daterangepicker .ranges li {
  font-size: 0.875rem;
}

.daterangepicker td.in-range {
  background-color: rgb(0, 123, 255, 0.25); /* same as #007bff, but a bit transparent */
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #007bff;
}

.daterangepicker.show-calendar .drp-buttons {
  font-size: 0.875rem;
}

.daterangepicker .drp-buttons .btn {
  font-weight: normal;
}

/*******************************************************************************
 * Split.js
 ******************************************************************************/

.split {
  display: flex;
  flex-direction: row;
}

.gutter {
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 10px;
}

.gutter.gutter-horizontal {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
  cursor: col-resize;
}

/*******************************************************************************
 * Project Metrics
 ******************************************************************************/

.badge-success-light {
  color: #444;
  background: oklch(0.95 0.052 163.051);
}

.badge-secondary-light {
  color: #444;
  background: #efefef;
}

/*******************************************************************************
 * LLM client selector
 ******************************************************************************/

.llm-client-selector .separator {
  background: rgb(246, 248, 250);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: .4rem .25rem .4rem .75rem;
  font-size: 0.875rem;
  color: #334155;
  font-weight: 500;
}

/*******************************************************************************
 * Built-in metrics selector
 ******************************************************************************/

/* Disabled options are used as separators, so we hide the input
   and give it a better styling */
.builtin-metrics .multiselect-option.separator {
  background: rgb(246, 248, 250);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: .4rem .25rem .4rem .75rem;
  font-size: 0.875rem;
}

.builtin-metrics .multiselect-option.separator:nth-child(1) {
  border-top: none;
}

.builtin-metrics .multiselect-option.disabled input {
  display: none;
}

.builtin-metrics .multiselect-option.separator label {
  color: #334155;
  font-weight: 500;
}

/*******************************************************************************
 * Template metrics selector
 ******************************************************************************/

.template-metrics a.separator {
  color: #334155;
  font-weight: 500;
  background: rgb(246, 248, 250);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: .4rem .25rem .4rem .75rem;
  cursor: default !important;
}

.template-metrics li:nth-child(1) a.separator {
  border-top: none;
}

.template-metrics .dropdown-menu {
  padding-top: 0;
}

.manual-metric-selector-dropdown .dropdown-item {
  font-size: 0.875rem;
}

/*******************************************************************************
 * Template metrics selector
 ******************************************************************************/

 @keyframes summary-shimmer {
  0% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }
  100% {
    background-position: -100% 0;
  }
}


.progress-line {
  margin-bottom: 8px;
}

.progress-line-active {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.8) 0%,
    rgba(59, 130, 246, 0.6) 25%,
    rgba(0,0,0,0.8) 50%,
    rgba(59, 130, 246, 0.6) 75%,
    rgba(0,0,0,0.8) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: summary-shimmer 1.5s infinite linear;
}

.progress-line-completed {
  color: #10b981; /* Green color for completed items */
  position: relative;
  padding-left: 24px; /* Space for the checkmark */
}

.progress-line-completed::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}

#report-summary-editor-container {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 300px;
}

#report-summary-progress-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  padding: 50px 2px 2px 2px;
  display: none;
  box-sizing: border-box;
  z-index: 1;
}

#report-summary-progress-overlay {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 5px 15px;
  background: white;
}

.btn-outline-annotated {
  background: white;
  border: 1px solid #17a2b8 !important;
  color: #17a2b8;
}

.btn-outline-annotated:hover,
.btn-outline-unannotated:hover,
.btn-outline-annotated-current {
  color: #fff !important;
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
}

.custom-metric-prompt-editor-container {
  position: relative;
}

#custom-metric-progress-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  padding: 2px;
  display: none;
  box-sizing: border-box;
  z-index: 1;
}

#custom-metric-progress-overlay {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 5px 15px;
  background: white;
}

/*******************************************************************************
 * Metric Input Selector
 ******************************************************************************/

.input-selector .dropdown-menu {
  padding-top: 0;
}

/*******************************************************************************
 * Automatic Metric Generation
 ******************************************************************************/

#generate-custom-metric-selector-container button:disabled {
  opacity: 0.7 !important;
  color: #6c757d !important;
  background-color: #e9ecef !important;
}

#generate-custom-metric-selector-container button:disabled img {
  opacity: 0.5 !important;
}

/*******************************************************************************
 * Playground
 ******************************************************************************/

/*
 * Fixes to allow very long subtexts to wrap in multiple lines
 * Reference https://github.com/snapappointments/bootstrap-select/issues/1757
 */
.wrap-subtext.bootstrap-select .dropdown-menu {
	width: 100%;
}
.wrap-subtext.bootstrap-select .dropdown-menu li small {
	white-space: normal;
}

/* Fix to always show the subtext */
select[data-show-subtext="true"] ~ button small {
  display: inline-block !important;
}

/*******************************************************************************
 * Inline Model/Dataset/Report Description
 ******************************************************************************/

.inline-description + .editable-container.editable-inline {
  display: inline-block;
  width: 100%;
}

.inline-description + .editable-container.editable-inline div,
.inline-description + .editable-container.editable-inline form {
  width: 100%;
}

/* Make "Add description" text smaller than the regular description text */
.inline-description.editable-empty {
  font-size: 12px;
}

/*******************************************************************************
 * Overscroll Behavior
 ******************************************************************************/

/* By default when you reach the top or bottom of a scrollable container
  the browser will then scroll the page. This can be annoying when trying
  to scroll in a dropdown menu. This property prevents this issue */
.dropdown-menu,
.dropdown-menu .inner {
  overscroll-behavior: contain;
}

/*******************************************************************************
 * Dropdown Menu
 ******************************************************************************/

 /* Used in Sveltestrap DropdownMenu, since it lacks a size prop */
.dropdown-menu-sm button {
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}