body {
    margin: 0;
    padding: 0;
    color: var(--r2-color-text);
    background: var(--r2-color-canvas);
    font: 10pt var(--r2-font-legacy);
}

form:focus-within input:invalid,
form:focus-within select:invalid,
form:focus-within textarea:invalid {
    border: 2px solid red;
}

table tr {
    text-align: left;
}

/* Selectors are on the class, not on table.class: adjustable_table_start now
   builds the box from divs, but a dozen places in continue.pl still write
   <table class='adjust block'> by hand for the same look. */
/* The look the settings box and a form step share: the grey panel, the dark
   border, the rounded corner. They were one rule when the step was
   table.stepper; the step needs its own now, so this is said twice rather than
   leaving .adjust grouped with a grid that is 720px wide. */
.adjust {
    background-color: #dedede;
    border: 2px solid #666666;
    color: black;
    font-size: 9pt;
    border-radius: 7px;
}

/* A form step: the number in a box down the left, the header across the top of
   the rest, the fields beneath it. That was a two row table with a rowspan on
   the number cell - here the number spans both grid rows instead.

   The width is the 70px + 650px the two cells asked for, and it has to be a
   width rather than a max-width: the steps usually sit in a div.centered, which
   shrinks each child to its own content, so without one every step came out a
   different width - the table was held to a common width by the 650px on its
   header cell. max-width:100% keeps it shrinking on a narrow page, which is
   what the table did. */
div.stepper {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    box-sizing: border-box;
    width: 720px;
    max-width: 100%;
    margin-bottom: 16px;
    background-color: #dedede;
    border: 2px solid #666666;
    color: black;
    font-size: 9pt;
    border-radius: 7px;
}

/* The number box spans both grid rows, as the rowspan=2 cell did, and has to
   fill them: align-self:center shrank it to the digit, which took the dividing
   border with it so the line stopped short of the bottom of the step. It
   stretches now, and the digit is centred inside it instead. */
div.stepper__step {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    font: 20pt Verdana, sans-serif;
    font-weight: bold;
    border-right: solid 1px #666666;
}

/* Left, which is what the live page does: measured on the production stepper,
   the content cell is text-align:left in every step except Proceed, whose row
   carries its own align=center. A full width row still centres itself, so the
   buttons stay where they were. */
/* .adjustin sets 1px and comes later in this file, so the step's own 2px - the
   table's cellpadding - needs the extra class to win. */
div.stepper__content.adjustin {
    padding: 2px;
    /* The widget column may be narrower than its widget, and a select is capped at it, so that
       on a narrow screen a long option - "View a Gene" sits in a 338px select - stays in the
       step instead of running out of the page. In a cell of definite width the select keeps its
       arrow; its text is cut with an ellipsis instead. */
    grid-template-columns: auto minmax(0, 1fr);
}

/* A full-width row is a flex box, and a flex item will not shrink below its content - so without
   this the cell grew to the select and the select's max-width measured against itself. */
div.stepper__content .acell {
    min-width: 0;
}

div.stepper__content select {
    max-width: 100%;
    text-overflow: ellipsis;
}

/* div.stepper's max-width:100% only binds if the box around it is capped as well. The steps sit in
   a form inside div.centered, which shrinks the form to its content, so the form grew to the steps'
   720px and took the page 332px past a phone's screen. */
form:has(> div.stepper) {
    max-width: 100%;
}

/* A table was shrink-to-fit, so the box hugged its content rather than taking
   the whole line, and div.centered - a flex column - centres it.
   display:table, not inline-block: the box has to stay block-level. As an
   inline-block it shares a line with whatever inline content follows, which put
   the third box on kaplan_main alongside the image below it instead of on its
   own line. */
div.adjust {
    display: table;
    text-align: left;
}

.adjust.block {
    border-radius: 0;
}

.adjust .header,
div.stepper__header {
    background-image: linear-gradient(#646464, #323232);
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 1px;
}

/* The step's three cells all carried the table's cellpadding=2, the header
   included - a settings box header is 1px, which is why it needs saying here. */
div.stepper__header {
    padding: 2px;
}

.adjust a {
    color: inherit;
}

/* The settings rows: a label column that hugs the widest label and a widget
   column taking the rest - which is what two <td>s in a table did. The gaps are
   the table's own: border-spacing 0 2px down, and the 5px that used to be
   padding-right on every cell but the last. */
div.adjustin {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 2px;
    column-gap: 5px;
    align-items: center;
    padding: 1px;
}

/* A labelled row is not itself a grid item. Its two cells are, so that every
   row's label and widget land in the same two columns - which is the whole
   point of the grid. The row element stays for its class and its data-rel. */
div.adjustin .arow {
    display: contents;
}

/* Several rows grouped under one id or one data-rel. This was a <tbody>, which
   a browser silently discards when it is not inside a table - taking the id the
   colour-by chooser is found by, and the data-rel the toggle switches on, with
   it. Transparent to the grid, so the rows inside still line up. */
div.adjustin .arow-group {
    display: contents;
}

/* A full-width row is a grid item: it spans both columns and paints the
   subheader gradient, which display:contents could not do. */
div.adjustin .arow--full {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
}

div.adjustin .arow--full > .acell {
    flex: 1 1 auto;
}

.adjustin .bigsubheader {
    background-image: linear-gradient(#888888, #AAAAAA);
    font-size: 11pt;
    font-weight: bold;
    min-height: 22px;
}

.adjustin .subheader {
    background-image: linear-gradient(#AAAAAA, #DCDCDC);
    font-weight: bold;
    min-height: 25px;
}

/* Kept for the tables that still write their own rows inside a settings box. */
table.adjustin tr.bigsubheader,
table.adjustin tr.subheader {
    height: 25px;
}

table.adjustin td:not(:last-child) {
    padding-right: 5px;
}

table.adjustin {
    border-collapse: inherit;
    border-spacing: 0 2px;
}

table.genesel {
    font-size: 9pt;
    border: 1px solid #cccccc;
}

table.genesel tr.header {
    background-image: linear-gradient(#DCDCDC, #AAAAAA);
}

table.pfinder {
    font: 9pt Arial, sans-serif;
    background: #bbbbbb;
    color: #222222;
    padding: 2px;
}

table.pfinder tr {
    background: #ffffff;
}

table.pfinder tr.red {
    background: #ffeeee;
}

table.pfinder tr.green {
    background: #eeffee;
}

table.pfinder tr.header {
    font: 10pt Arial, sans-serif;
    background: #dddddd;
    color: #222222;
    font-weight: bold;
    text-align: center;
}

span.kegg_r {
    border: 1px solid #ff0000;
    padding: 0;
    font-weight: bold;
    font-size: 8pt;
    background: #ffdddd;
    color: #ff0000;
}

span.kegg_r a {
    font-weight: bold;
    color: #ff0000;
    text-decoration: none;
}

span.kegg_r a:hover {
    color: #ffdddd;
    background: #ff0000;
}

span.kegg_k {
    border: 1px solid #00cc00;
    padding: 0;
    font-weight: bold;
    font-size: 8pt;
    background: #ddffdd;
    color: #00cc00;
}

span.kegg_k a {
    font-weight: bold;
    color: #00cc00;
    text-decoration: none;
}

span.kegg_k a:hover {
    color: #ddffdd;
    background: #00cc00;
}

span.kegg_a {
    color: #0000ff;
    border: 1px solid #0000ff;
    padding: 0;
    font-weight: bold;
    font-size: 8pt;
    background: #ddddff;
}

span.kegg_a a {
    color: #0000ff;
    font-weight: bold;
    text-decoration: none;
}

span.kegg_a a:hover {
    color: #ddddff;
    background: #0000ff;
}

table.distri {
    font: 7pt Arial, sans-serif;
    background: #cccccc;
    color: #000000;
}

table.distri tr {
    background: #ffffff;
}

table.distri tr.header {
    font-size: 8pt;
    background: #dddddd;
}

#currana {
    font: 10px Arial, sans-serif;
    width: 225px;
    background: #c3e8c3;
    border: 1px solid #409d40;
}

#currana_head {
    text-align: center;
    background: #409d40;
    font: 12px Arial, sans-serif;
    color: #ffffff;
}

div.analyzemore a {
    height: 28px;
    width: 225px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font: bold 11px Arial, sans-serif;
    text-decoration: none;
    background-image: linear-gradient(#E1E1E1, #AFAFAF);
    border: 1px solid #828282;
    border-radius: 3px;
    box-shadow: 1px 1px black;
}

div.analyzemore a:hover {
    background-image: linear-gradient(#C8C8C8, #969696);
}

optgroup.subset {
    background-color: lightgrey;
}

optgroup.subset option {
    background: #ffffff;
    color: #000000;
}

a.bttn_r2 {
    font-size: 80%;
    font-weight: bolder;
    color: #000000;
    background: #dddddd;
    border-radius: 4px;
    padding: 4px;
    text-decoration: none;
    border: 1px solid #cccccc;
}

a.bttn_r2:hover {
    color: #222222;
    background: #eeeeee;
}

span.r2notes {
    font-size: 13px;
    color: #ff3333;
}

span.small_notice {
    font-size: 9px;
    color: #444444;
}

/* The GenomeBrowser Report css
*/
table.gb_report {
    background: #F2F2B5;
    border: 1px solid #cccccc;
    font-size: 9px;
    padding: 2px 2px;
    color: #555555;
}

table.gb_report tr.header {
    font-size: 10px;
    background: #d3d37a;
}

div.info_wrap {
    padding: 2px 6px 2px 2px;
    font-size: 11px;
    width: 200px;
}

div.info_wrap img {
    outline: 0;
    max-width: 100%;
    height: auto;
}

div.info_right {
    padding: 2px 2px 2px 2px;
    overflow: hidden;
}

div.info_header {
    font-weight: bold;
    text-align: center;
}

div.infobox {
    background: #f2f2b5;
    width: 100%;
    color: #555555;
    overflow: hidden;
    text-align: left;
}

div.infobox_back {
    background: #d3d37a;
    border: 2px solid #d3d37a;
    width: 100%;
    color: #555555;
    text-align: left;
    overflow: hidden;
}

div.newsbox {
    background: #ffffff;
    width: 100%;
    color: #555555;
    overflow: hidden;
    text-align: left;
}

div.newsbox_back {
    background: #bbbbbb;
    border: 2px solid #bbbbbb;
    width: 100%;
    color: #555555;
    text-align: left;
    overflow: hidden;
}

#sshistory {
    background: #fdfcb5;
    border: 1px solid #cccccc;
    width: 200px;
    font-size: 11px;
}

#headrow {
    font-weight: bold;
    background: #e1e0a2;
}

table.navigation {
    font: 9pt Arial, sans-serif;
    background: linear-gradient(#707070, #7e7e7e); /*background: linear-gradient(#1b6372, #207180); */
    color: #575757; /*color: #13444f;*/
    border: 1px solid #707070; /* border: 1px solid #1b6372; */
    border-radius: 5px;
}

table.navigation tr {
    background: #fbfbff;
    text-align: left;
}

table.navigation tr.header, table.navigation th.header,
table.navigation tr.bigheader {
    font-weight: bold;
    font-size: 10pt;
    background: linear-gradient(#575757, #636465); /* background: linear-gradient(#13444f, #1a5a63);*/
    text-align: center;
    color: #ffffff;
}

table.navigation td.link a, table.navigation th.link a {
    color: #ffffff;
}

table.navigation td.link a:hover, table.navigation th.link a:hover {
    color: #ffdddd;
    text-decoration: none;
}

table.navigation a {
    color: #575757; /*color: #13444f;*/
    text-decoration: none;
}

table.navigation a:hover {
    color: #000000;
}

table.general {
    font: 9pt Arial, sans-serif;
    background: #bbbbbb;
    color: #222222;
    border-radius: 2px;
}

table.general tr {
    background: #ffffff;
    text-align: left;
}

table.general tr.header,
table.general tr.bigheader {
    font-weight: bold;
    font-size: 10pt;
    background: #dddddd;
    text-align: center;
}

table.general tr.bigheader {
    font-size: 12pt;
}

table.general .red {
    background: #ffdddd;
}

table.general tr.green {
    background: #ddffdd;
}

table.general td.small {
    font-size: 7pt;
}

table.general td.insig_r {
    font: 9pt Arial, sans-serif;
    background: #eeeeee;
    color: #222222;
}

table.general td.sig_r {
    font: 9pt Arial, sans-serif;
    background: #ffeeee;
    color: #ff2222;
}

table.general td.link {
    font: 9pt Arial, sans-serif;
    background: #444444;
    color: #ffffff;
    font-weight: bold;
    width: 5px;
}

table.general td.link a {
    color: #ffffff;
}

table.general td.link a:hover {
    color: #ffdddd;
}

table.general a:not(:active,:hover,:visited) {
    color: inherit;
}

table.general td.leftb {
    border-left: 1px solid #bbbbbb;
}

table.general td.rightb {
    border-right: 1px solid #bbbbbb;
}

table.zscore td.zsc--3 {
    background-color: #aaaadd
}

table.zscore td.zsc--196 {
    background-color: #ddaaaa
}

table.zscore td.zsc--224 {
    background-color: #aaddaa
}

span.error {
    font: 11pt Arial, sans-serif;
    color: #dd1111;
}

span.mini {
    font: 7pt Arial, sans-serif;
}

span.note {
    font: 8pt Arial, sans-serif;
    color: #000000;
}

span.yyat {
    font-size: 11pt;
    color: #cc0000;
}

/* The error box: a header strip over an icon beside the message. The 2px
   between the strip and the body is the table's cellspacing, and the 1px around
   each is its cellpadding. */
div.errorbox {
    width: 400px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px;
    font: 9pt Arial, sans-serif;
    background: #dd6666;
    color: #222222;
}

div.errorbox__header {
    padding: 1px;
    font: 10pt Arial, sans-serif;
    background: #dd6666;
    color: #ffffff;
    text-align: center;
}

div.errorbox__body {
    display: flex;
    align-items: center;
    margin-top: 2px;
    padding: 1px;
    background: #ffeeee;
}

div.errorbox__icon {
    flex: 0 0 64px;
    text-align: center;
}

div.errorbox__text {
    flex: 1 1 auto;
    text-align: center;
}

table.news {
    font-size: 7pt;
    background: #cccccc;
    color: #444444
}

table.news tr {
    background: #ffffff;
}

table.news tr.header {
    font-size: 8pt;
    background: #dddddd;
    color: #bbbbbb
}

.hidden {
    display: none;
}

.info-character {
    cursor: help;
    font-size: small;
    margin-left: 8px;
}

.open-dataset-info {
    cursor: pointer;
    font-size: large;
    margin-left: 8px;
}

.data-info-grid {
    cursor: pointer;
    font-size: large;
    margin-left: 6px;
    padding-top: 3px;
    vertical-align: bottom;
    color: #0066FF;
}

.advanced-gear-character {
    cursor: pointer;
    font-size: large;
    font-weight: bold;
    margin-left: 8px;
}

.remove-x-character {
    cursor: pointer;
    font-size: large;
    font-weight: bold;
    color: #ff0000;
    margin-left: 2px;
}

.extra_bold {
    font-weight: 800;
}

.clickable {
    cursor: pointer;
}

/* The model explorer's 900px card: a block of text beside its plot, with some
   rows spanning both. It was a table of <td valign=top> against <td align=center>.
   It carries .adjustin so the rows inside reach the settings grid - two of them
   already called table_row_html, which a table foster-parented straight out of
   the card. .adjustin is the same specificity and comes earlier, so the card's
   own values need the second class to win. */
/* One card centred in the page both ways. That was a height=100% width=100%
   table with a single align=center valign=center cell - the one page whose
   layout table was doing something .centered could not, since .centered is a
   column that centres across but not down. .r2-page gives the full height to
   centre within. */
/* The genome browser's form: the properties box, the middle options and the
   Tracks box, at the 40% / 20% / 40% the three cells asked for. align=right,
   center and left on those cells governed what is inside them - settings boxes,
   which are display:table and so cannot be moved by text-align - hence a flex
   column per column with align-items, which can. */
/* Equal thirds rather than the cells' 40 / 20 / 40, so that the three boxes -
   each centred in its column - are evenly spaced across the form. fr rather
   than percentages so the gap comes out of the available width instead of
   pushing three percentages past 100%.

   The gap and the column padding are the table's own: it set neither
   cellspacing nor cellpadding, so it took the browser defaults of 2px between
   cells and 1px inside each, which is 4px between one column's content and the
   next. */
div.gbform {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    align-items: start;
}

/* Each column centres what it holds, so a box's centre is its column's centre.
   The cells said align=right, center and left, which pulled the outer two boxes
   in towards the middle one - and that put their centres wherever each box
   happened to be wide, 132px apart on one side and 123px on the other. The
   column centres were always evenly spaced; now the boxes sit on them. */
div.gbform__col {
    padding: 1px;
    display: flex;
    flex-direction: column;
    align-items: safe center;
    min-width: 0;
}

/* A <select> takes its width from its longest option, so one long track name
   - 'hg19 SuperEnhancers (ROSE AMC)...' - made the control wider than the
   third of the page it sits in and it ran straight across the column beside
   it. Capping it keeps it in its own column; the dropdown still shows the
   full names when it is open.
   minmax(0, ...) on both grids for the same reason it is needed on the model
   card: a track's default minimum is its content, so without it the column
   is floored by the widest option rather than taking its share. */
div.gbform input,
div.gbform textarea {
    max-width: 100%;
}

/* A select takes its width from its longest option, so the control changed
   size with the selection and a long track name made it wider than its cell.
   A width rather than a max-width gives every select the same size whatever
   is chosen, and lays the box out at that size from the start - with only a
   max-width the select keeps its intrinsic width internally and the arrow is
   pushed outside the visible box. The name is cut with an ellipsis; the
   dropdown still shows it in full when it is open. */
div.gbform select,
.gbv2-track-row select {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

/* A track cell's select is capped by its cell like the others, rather than filling it: most hold
   off/on or a few display modes, and a 200px box for 'on' read as broken - and pushed the info
   character beside it onto the next line. A track with long option names still reaches the cell's
   width, and is cut with an ellipsis there. */

/* Every box between the column and the control is shrink-to-fit - the
   centred wrapper, the display:table box, the settings grid, the cell - so a
   max-width only binds once the box above it is capped as well. Capping just
   the select left the row itself over the column. */
div.gbform .centered,
div.gbform .adjust {
    max-width: 100%;
}

/* A settings cell is a control and, often, the info character explaining it.
   Laying the cell out as a row keeps the two together: the control takes the
   width it needs and gives it back when there is not enough, and the character
   sits next to it rather than wrapping below. */
div.gbform .adjustin .acell:not(.alabel) {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Laying the cell out as a row stops text-align placing what is in it, so the
   alignment the cell asked for has to be read back. _settings_cell_tag writes
   it as an inline style, which is the same thing the browser would have used,
   so match on that rather than guessing from the row type - a full width row
   is usually centred but not always, and the ones that pass align => undef
   would be centred wrongly. This is what puts Draw and Reset back in the
   middle. */
div.gbform .adjustin .acell[style*="text-align:center"] {
    justify-content: center;
}

div.gbform .adjustin .acell[style*="text-align:right"] {
    justify-content: flex-end;
}

div.gbform .adjustin {
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 100%;
}

div.centered-page {
    display: flex;
    align-items: safe center;
    justify-content: safe center;
    height: 100%;
}

div.mecard.adjustin {
    width: 1200px;
    max-width: 100%;
    box-sizing: border-box;
    /* .adjustin's auto/1fr cannot shrink here: a grid item's min-width is auto,
       so each track is held open by its content and the 400px plot pushed the
       pair past the card's width, overhanging its border.
       minmax(0, ...) lets them shrink to the card instead. */
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    border: 1px solid #aaaaaa;
    padding: 2px;
    align-items: start;
    text-align: left;
}

/* And the plot scales with its column rather than overhanging it. */
div.mecard img {
    max-width: 100%;
    height: auto;
}

/* The header strip was a three cell table: a 64px link, the title, a 64px spacer. */
div.mecard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.mecard__plot {
    text-align: center;
}

div.mecard .annotationTable caption {
    overflow-wrap: anywhere;
}

div.centered {
    display: flex;
    flex-direction: column;
    align-items: safe center;
}

/* The genome browser's image, and the box imgAreaSelect draws over it. The
   plugin only subtracts a parent's scrollTop when that parent is positioned,
   so this has to be - otherwise the selection is placed once and then sits
   still while the image scrolls away beneath it. */
div.gbv2-browser-view {
    position: relative;
}

/* Two centred blocks in a row - a plot above its table, a heatmap above its
   grid - otherwise sit flush against each other. The box is a flex column, so
   its own `gap` would space its children rather than its siblings, and the
   margins its children bring do not collapse out of it. Hence a margin between
   adjacent boxes. */
div.centered + div.centered {
    margin-top: 12px;
}

/* For centring text, where div.centered is the wrong tool: a run of text in a
   flex column becomes an anonymous flex item and takes its max-content width,
   so a sentence stops wrapping and runs off the side instead of centring line
   by line. <center> did both jobs - it is a block with text-align:-webkit-center,
   which centres inline content AND block children - so replacing one needs the
   content looked at: this for a sentence or a heading, div.centered for a table,
   an image or a box. */
div.centered-text {
    text-align: center;
}

/* The row counterpart of div.centered: things side by side, the group centred on
   the page. They start at the top, which is what a layout table's valign=top
   gave - centring them against each other instead leaves a short plot floating
   halfway down a tall table. It wraps, because these are usually a plot beside a
   wide table and there is not always room for both. safe center for the same
   reason div.centered uses it: a plain center cuts the left edge off whatever is
   too wide to fit. */
div.centered-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: safe center;
    align-items: flex-start;
    gap: 10px;
}

/* The same, left where it starts rather than centred: the layout tables these
   replace carry no align, so the pair sits against the left edge the way a
   plain <table> does. Everything else matches div.centered-row - valign=top,
   wrapping when there is not room for both, and a gap standing in for
   cellspacing. */
div.layout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

/* Grid items and flex items are held open by their content, so a wide table or
   a <pre> in one column pushes the row past the page instead of wrapping. This
   lets a column shrink; put it on the one that is allowed to give. */
div.layout-row > .shrink,
div.centered-row > .shrink {
    min-width: 0;
}

/* The genome browser's navigation bar: a quarter, a half and a quarter, with
   the outer two pushed to the page edges. The panes hold blocks - an
   analyzemore div, a profile form - and text-align does not move a block, only
   the inline content inside it, so align-items does the work. The table cell
   this replaces got away with align=right because width=25% is only a hint:
   the cell could shrink toward its content and carry it to the edge. A flex
   item that is allowed to grow cannot, so the alignment has to be stated. */
div.layout-row > .pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pane--quarter {
    flex: 0 1 auto;
}

.pane--half {
    flex: 1 1 0;
}

.pane--start {
    align-items: flex-start;
    text-align: left;
}

.pane--center {
    align-items: center;
    text-align: center;
}

.pane--end {
    align-items: flex-end;
    text-align: right;
}

.form-window-button {
    font-size: 35px;
    font-weight: 800;
    color: #3A79B8;
    cursor: pointer;
}

.form-window-button:has(+ .form-window) {
    display: none;
}

.form-window {
    font: 11px sans-serif;
    position: relative;
    width: max-content;
    max-width: 1200px;
    border: 1px solid #959FA9;
    border-radius: 3px;
    background-color: #F9F9F9;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .15);
}

.form-window__title {
    font-weight: 700;
    overflow: hidden;
    padding: 5px 35px 5px 10px;
    color: #F9F9F9;
    border-radius: 3px 3px 0 0;
    background-image: linear-gradient(#3A79B8, #2E629D);
}

.form-window__content {
    overflow: hidden;
    padding: 5px 9px;
    border-radius: 0 0 3px 3px;
    background-color: #F9F9F9;
}

/* The radio dropdown's open list has to keep .form-window as its containing
   block. overflow: hidden above clips only descendants whose containing block
   is this div or below it, and the open list is far wider and taller than the
   panel - positioned against .form-window, an ancestor of this div, it escapes
   the clip. radio-dropdown.css makes the control itself the containing block,
   which the Perl page forms need: there the nearest positioned ancestor is
   .r2-shell__body, outside the scrolling .r2-shell__main, so the list lands
   scrollTop below its control. That cannot happen in here - .form-window is
   already inside the scroller - so the panel gives the property back. */
.form-window__content .radio-dropdown {
    position: static;
}

.form-window__close-button {
    border: none;
    display: inline-block;
    padding: 6px 6px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    position: absolute;
    right: 0;
    top: 0;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tab-content {
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* no tab buttons above it, so it needs its own top border */
.tab-content:first-child {
    border-top: 1px solid #ccc;
}

.save-as-row {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}

.plot-form-row {
    display: grid;
    grid-template-columns: 165px auto;
    justify-content: flex-start;
    align-items: center;
}

/* The colour scheme chooser is in here too. It is a div rather than a select -
   an <option> cannot hold a gradient - so it took none of this and came out
   black bordered, tight against its label and a size smaller than everything
   around it. Listing it alongside the real controls is what keeps the four
   properties the same for all of them rather than copied into two places.

   font-size is stated because a form control does not inherit one: the inputs
   were falling back to the browser's own 13.3333px while the chooser, being a
   div, inherited the panel's 11px. Saying it once gives them the same size on
   every browser instead of the same size only on this one.

   Here rather than in radio-dropdown.css: that file is shared with the query
   form, where these are not the colours. */
.plot-form-row input,
.plot-form-row select,
.plot-form-row .radio-dropdown__list {
    margin-left: 4px;
    padding: 3px;
    border: 1px solid #98B4D4;
    color: #98B4D4;
    font-size: 13.3333px;
}

/* A row's height is its line box, and at the inputs' font size that came out
   17px, putting the control 2px over an input. Stated rather than left to
   `normal`, so the row is the height it needs and not whatever the tallest
   thing on the line asks for. The list's own 3px still holds it off the
   border. */
.plot-form-row .radio-dropdown__list__item {
    padding-top: 0;
    padding-bottom: 0;
    height: 15px;
    line-height: 15px;
}

/* Closed, the control should be exactly an input: 15 + 6 padding + 2 border.
   Only closed - open it leaves the flow and has to grow to its 26 rows, so the
   height is stated for the collapsed state alone. */
.plot-form-row .radio-dropdown__list:not(:hover) {
    height: 15px;
}

/* The collapsed control reserves its own height, because the list leaves the
   flow when it opens. Padding and border make it 23px here, matching an input. */
.plot-form-row .radio-dropdown {
    height: 23px;
}

.plot-form-row select.long-option-select {
    width: 200px;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

.plot-form-label {
    color: #98B4D4;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.update-plot-btn {
    width: 100%;
    margin-top: 5px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #98B4D4;
    background-color: #98B4D4;
    color: #ffffff
}

.loading-if-empty:empty {
    position: relative;
    min-width: 2.5em;
    min-height: 2.5em;
}

.loading-if-empty:empty::after {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    margin: -0.25em 0 0 -0.25em;
    content: '';
    animation: spin 1s linear infinite;
    border-radius: 50%;
    box-shadow: 0 -1em #ffffff, 0.7em -0.7em #e5ebf5, 1em 0 #cad7eb, 0.7em 0.7em #b0c3e1, 0 1em #95b0d7, -0.7em 0.7em #7a9dcc, -1em 0 #5c8bc2, -0.7em -0.7em #3a79b8;
    inset: 50%;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.circle-xmark {
    position: relative;
    width: 1em;
    height: 1em;
    cursor: pointer;
    border-radius: 50%;
    background: #3a79b8;
}

.circle-xmark::before, .circle-xmark::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5em;
    height: 0.1em;
    content: "";
    transform-origin: center;
    background: #ffffff;
}

.circle-xmark::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.circle-xmark::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.circle-xmark:hover {
    background: #2e629d;
}
/* gbv2's Tracks panel is the one settings box that is really four columns: two
   tracks to a row, each a wide cell and a thin strip of the track's colour. The
   settings grid stays two columns and the row spans it, carrying these widths -
   the ones the cells used to declare - inside. */
.gbv2-track-row {
    display: grid;
    grid-template-columns: 49.5% 0.5% 49.5% 0.5%;
    align-items: stretch;
    width: 100%;
}

/* A grid item's minimum is its content, so the track whose select carried a
   long option floored its own 49.5% and pushed the track beside it out of the
   panel. The cells have to be allowed below their content for the two to keep
   their halves. */
.gbv2-track-row > * {
    min-width: 0;
}

/* The browser's navigation strips: find-a-gene on the left, move and zoom in
   the middle. They were tables whose every cell was a button, printed with
   their six rules in an inline <STYLE> that gbv2.pl and karyo.pl each carried a
   copy of. A row of buttons is a row, and the rules belong here once.

   The anchor fills its button rather than sitting inside it, so the whole
   button is clickable - in the table only the text was. */
div.navigate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font: 10pt Verdana, sans-serif;
    background: #ffffff;
    color: #000000;
}

div.navigate .b1 {
    background: #e9edf1;
    border: 1px solid #c2cad2;
    border-radius: 2px;
    color: #15202b;
    text-align: center;
    padding: 1px 6px;
    transition: background-color 90ms linear, border-color 90ms linear;
}

div.navigate .b1:hover {
    background: #d7e3f1;
    border-color: #7d9dc0;
}

div.navigate .b1:active {
    background: #c6d6e8;
    border-color: #5c80a8;
}

/* Keyboard users get the same affordance the mouse gets. */
div.navigate a:focus-visible {
    outline: 2px solid #2254b9;
    outline-offset: 1px;
}

div.navigate a {
    display: block;
    padding: 1px 6px;
    margin: -1px -6px;
    color: #000000;
    text-decoration: none;
}

/* The zoom strip sits under the move strip. The two share a width - the
   stack is only as wide as the wider of them - so that spreading a strip puts
   its ends on the other's ends. stretch, not center, for that reason. */
div.navigate--stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

/* Ends pushed apart: the backwards buttons, the label, the forwards buttons.
   The strip is as wide as the zoom strip below it, so its outermost buttons
   land on the zoom strip's outermost buttons. Only this strip spreads - doing
   it to the zoom strip as well would space out its last line when it wraps. */
div.navigate--spread {
    justify-content: space-between;
}

/* The '<< move >>' caption labels the strip rather than doing anything, so it
   steps back from the buttons either side of it. */
div.navigate--spread > :not(.navigate__group):not(.b1) {
    color: #5a6673;
    letter-spacing: 0.02em;
}

/* The buttons either side of the label travel together, so they are one item
   of the spread rather than several. */
div.navigate__group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
}

/* Eight buttons with long labels, so the zoom strip is the wider of the two
   and it is what decides when they stop fitting. Less room either side of
   the label here than on the move buttons, to hold that off longer. */
div.navigate--zoom .b1 {
    padding: 1px 3px;
}

div.navigate--zoom a {
    padding: 1px 3px;
    margin: -1px -3px;
}


/* A block of small options - checkboxes and their labels - three to a line,
   inside one settings row. It replaces a row of three cells and a counter that
   started a new row every third one; the grid wraps on its own. */
.option-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 2px 10px;
}

/* A settings row whose input should take whatever width the label and the
   controls beside it leave, rather than carrying a fixed size= . The label stays
   on one line, and the input, its button and its info bubble sit on one line
   with the input doing the stretching. */
div.adjustin .arow--stretch > .alabel {
    white-space: nowrap;
}

div.adjustin .arow--stretch > .acell:not(.alabel) {
    display: flex;
    align-items: center;
    gap: 4px;
}

div.adjustin .arow--stretch > .acell:not(.alabel) > input {
    flex: 1 1 auto;
    min-width: 4em;
}