/******************** GOLDEN STYLES ********************/

.table-text {
  font-size: 12px;
}

.card-subtitle {
  color: #899bbd;
  font-size: 14px;
  font-weight: 400;
}

.card-rounded-metric {
   font-size: 32px;
   color:  #012970;
   background: #f6f9ff;
   line-height: 0;
   width: 64px;
   height: 64px;
   flex-shrink: 0;
   flex-grow: 0;
}

.card-metric {
  font-size: clamp(16px, 2.5vw + 1.5rem, 60px);
  color:  #012970;
  font-weight: 300;
  font-style: normal;
  line-height: 1em;
  white-space: nowrap;
}

.card-metric-subtitle {
  font-size: clamp(12px, 0.5vw + 0.5rem, 60px);
  color:  #012970;
  font-weight: 600;
  word-wrap: normal;
}

.table-subtle-attribute {
  color: #899bbd;
  font-weight: 300;
}

.golden-tooltip .tooltip-inner {
  width: auto;
  font-weight: 300;
  white-space: normal;
  text-align: left;
}

.golden-tooltip .tooltip-inner ul,
.golden-tooltip .tooltip-inner ol {
    padding-left: 20px; /* Adjust this to control the left alignment */
    list-style-position: outside;
}

.golden-tooltip .tooltip-inner li {
    padding-left: 0;
    margin-left: 0;
}

.link-subtle a {
  color: black;
  transition: 0.3s;
}

.link-subtle a:hover {
  color: #4154f1;
}

.text-pre {
  font-size: .875em;
  font-family: var(--bs-font-monospace);
}



/******************** BUG FIXES ******************/

/** json-editor: buttons must have a space with previous title */
.json-editor-btn-add {
    margin-left: 10px;
    color: white;
    border: 1px solid #dee2e6 !important;
}

/* json-editor: Force all buttons even in a button group to to always have all the borders rounded as bootstrap5 */
.btn {
    border-radius: 0.5rem !important;
}

/* json-editor: Add at least 5px between buttons in a button group */
.btn-group > .btn {
    margin-right: 5px;
}

/* json-editor: have the buttons in a table row to be vertically aligned */
table {
    vertical-align: middle !important;
}

/* Center buttons rendered by json-editor inside their container */
.json-editor .form-control,
.json-editor .btn {
    vertical-align: middle;
}

/* select2: bootstrap5 fix: on disabled, set right background and border */
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--bs-secondary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
}

/* select2: bootstrap5 fix: on enabled, set right border */
.select2-container--default .select2-selection--single {
  border: var(--bs-border-width) solid var(--bs-border-color);
}

/* select2: on edit multiple the border color is not the same as bootstrap5 */
.select2-container--default.select2-container .select2-selection--multiple {
    border: var(--bs-border-width) solid var(--bs-border-color);
}

/* select2: on edit multiple and focus is gained the border should be aligned to bootstrap5 */
.select2-container--default .select2-selection--multiple:focus {
    border: var(--bs-border-width) solid var(--bs-primary);
}

/* select2: when showing a tag (choice) the color is not bootstrap light and the font weight is not the same */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-light);
    font-weight: 400;
}

/* select2: on edit multiple height is not the same as other form fields */
.select2-container--default .select2-selection--multiple {
    height: calc(2.25rem + 2px);
}

/* select2: set box width to be 100% */
.select2 {
  width: 100% !important;
}

/* form-label class override to make sure that the label is always on top of the input, it is not working for select2 */
.form-label {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-bottom: 0.5rem;
}