:root {
  --pc-md-max-width: 550px;
  /* See below for explanation */
  --pc-border-color-opaque-equiv: rgba(210, 210, 210, 1);
}

.index-container {
    max-width: 1000px;
}

.output-container {
    max-width: 750px;
}

.notify-container {
    max-width: 500px;
}

.default-container {
    max-width: 600px;
}

.terminus-input {
    max-width: 80px;
    border-radius: 0%;
}

.oligo-toggle #input-n-terminus,
.oligo-toggle #input-c-terminus {
    display: none;
}

.oligo-toggle #n-dropdown-button,
.oligo-toggle #c-dropdown-button {
    width: 150px;
}

.ms-input-col {
    max-width: var(--pc-md-max-width);
}

/* Bootstrap 5.3 focus-ring helper does not work to style focus box-shadow width, so have to do manually */
.form-control:focus {
    box-shadow: 0 0 0 0.1rem rgba(var(--bs-primary-rgb), .25) inset;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), .25);
}

.new-badge {
    bottom: 10px;
}

.molec_ion {
    color: rgba(var(--bs-primary-rgb), 1);
}

/* Style accordion to look like card, note rgba var is opaque equivalent to theme default rgba(0, 0, 0, 0.175) - needed due to overlap - which will not translate if theme is changed */
.accordion-item {
    border-color: var(--pc-border-color-opaque-equiv);
}

.accordion-button:not(:focus) {
    box-shadow: 0 0 0 0.9px var(--pc-border-color-opaque-equiv);
}

.accordion-button {
    padding-top: 11px;
    padding-bottom: 11.914px;
}

.legend-dot {
  height: 1em;
  width: 1em;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;
}

.no-bottom-table > tbody > tr:last-child > th,
.no-bottom-table > tbody > tr:last-child > td {
  border-bottom: none;
}

.custom-tooltip {
  --bs-tooltip-bg: #ffffff;
  pointer-events: none;
}

.custom-tooltip > .tooltip-inner {
    border: 1px solid rgba(0, 0, 0, 0.175);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.175);
    max-width: none;
}

.custom-tooltip > .tooltip-arrow {
    display: none;
}

.tooltip-link {
    text-decoration: underline;
    cursor: pointer;
}

.pie-div {
    width: 140px;
    height: 140px;
}

.diffplot-div {
    height: 200px;
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    .index-container {
        max-width: var(--pc-md-max-width);
    }

    #input-sequence, .terminus-input {
        border-radius: var(--bs-border-radius-pill);
    }

    .terminus-input {
        max-width: none;
    }

    .custom-tooltip > .tooltip-inner img {
        max-width: 505px;
    }

    .oligo-toggle #n-dropdown-button,
    .oligo-toggle #c-dropdown-button {
        border-radius: var(--bs-border-radius-pill);
        width: 100%;
    }

}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    .custom-tooltip > .tooltip-inner img {
        max-width: 420px;
    }

}

@media (max-width: 495px) {

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

}

@media (max-width: 423px) {

    .custom-tooltip > .tooltip-inner img {
        max-width: 280px;
    }

}

@media (max-width: 355px) {

    .custom-tooltip > .tooltip-inner img {
        max-width: 250px;
    }

}

.pc-1-em {
    width: 1em;
}

.pc-2-em {
    width: 2em;
}

.pc-3-em {
    width: 3em;
}

.pc-4-em {
    width: 4em;
}

.pc-5-em {
    width: 5em;
}

.pc-6-em {
    width: 6em;
}

.pc-7-em {
    width: 7em;
}

.pc-8-em {
    width: 8em;
}

.pc-9-em {
    width: 9em;
}