/* css/palette.css - the STRING palette.

   The only file with UI colour values. Every other stylesheet, inline style and script picks a
   role from here, with var(--string-text-muted) or a class that uses it: pick a role, never a
   value. The background and every decision are in documentation/dark_mode_design.md.

   HOW THE THEME SWITCHES

   - Light is the default. The light block below applies to every page, to print, and to any
     element with the class light_island (a part that stays light inside a dark page).
   - A dark page has <html data-string-theme='dark'>, written by the server (lib/navigation.py and
     the standalone popups; from phase 7 of the design). The dark block then gives the same names
     their dark values.
   - The switch in the top bar (javascript/theme_functions.js) writes the theme into the cookie
     string_theme and reloads the page. On form answers (POST) and polling pages, which cannot
     simply be reloaded, it is disabled (design section 7.3).
   - The dark block sits inside @media screen, so a dark page still prints light.
   - Plain CSS on purpose. No light-dark() or color-mix(): older browsers would lose those colours
     in light mode too. No prefers-color-scheme: the theme is chosen on the server, and there is no
     System option yet (design section 7.6). No other CSS file mentions the theme.

   SCALE (the values the tokens are chosen from; a comment, not variables)

   Family             Light                                    Dark
   -----------------  ---------------------------------------  ------------------------------------
   Neutrals           #FFFFFF, #F7F6F2 (warm paper), #E6E6E6,  #161719, #1F2125, #2C2E34 (the top
                      #D6D6D6, #CCCCCC, #A0A0A0 (only the      bar's grey), #3A3D44, #5C6068,
                      selected bottom tab), #999999, #666666,  #73767C, #9A9DA3, #C4C6CA, #E3E4E6;
                      #4D4D4D, #333333                         cool greys at the top bar's hue
   Periwinkle         tint #D0D6F6, hover #B6C0F1,             tint #343A63, button #7580C5,
   (the brand hue)    brand #A1ADEC, brand text #6676CC        hover #8692D9, brand #A1ADEC,
                                                               brand text #A1ADEC
   Rose (term rows)   hover #F3E0E0, selected #DEB4B6          hover #3A2A2D, selected #583A3E
   Red, ink / tint    #C40808 / #F7DEE0                        #FF7B72 / #3E2427
   Amber, ink / tint  #965200 / #FFEDC2                        #F5A54A / #3A311B
   Caution            #890000                                  #D98A82
   Green, ink / tint  #1D7027 / #E1F1E1                        #6CC475 / #1E3324
   Footer headings    #A6A6A6                                  #66696E
   Disabled buttons   fill and border #CCCCCC, label #FFFFFF   fill #2C2E34, label #73767C,
                                                               border #5C6068
   Chrome (fixed)     #2C2E34, #FFFFFF, #999999, #FF9999       #2C2E34, #FFFFFF, #999999, #FF9999
   Plate              transparent                              #FFFFFF
   Shadow, overlay    rgba(0,0,0,0.10), rgba(0,0,0,0.40)       rgba(0,0,0,0.45), rgba(0,0,0,0.60)

   Two base blues: brand #A1ADEC for fills, active tabs, buttons and borders, and for the text
   that is the brand colour (page and section headings, the active menu item), like the buttons;
   brand text #6676CC (same hue, darker) for links and texts that were darker blues before. In
   dark mode, brand text is the brand itself. The buttons have their own token, button: in light
   mode it is the brand; in dark mode a dimmer periwinkle (#7580C5) with a dark label, so that
   the buttons do not glare on the dark page, while the headings, the active menu, the focus
   borders and the top bar keep the brand.

   USAGE RULES (token names without their --string- prefix)

   - Hover always gives colour feedback.
     - On neutral surfaces, hover moves one rung up the ladder:
       page -> surface -> surface-muted -> surface-strong. In dark mode each rung is lighter, so
       the same rule works.
     - Brand fills hover to brand-hover.
     - Enrichment, cluster and gene-set rows hover to term-hover (rose), which matches their rose
       selection.
   - Selected and highlighted.
     - Selected = brand fill + text-on-brand (white in light, dark ink in dark).
     - A selected neutral tab = surface-selected.
     - Highlighted = brand-tint + text.
     - A selected enrichment term or gene-set row = term-selected + text.
   - Links inside fills. Every rule that paints brand, button or brand-hover also sets its links:
     .X a { color: var(--string-text-on-brand) }. Links set their own colour, so they would
     otherwise stay body-coloured on the brand fill.
   - Colour means state. Only danger, warning, success and caution carry meaning. Caution is for
     notes about analysis results (e.g. 'some enrichments may be expected here'); warning is for
     process and status warnings (uploads, queues). Text on any tint uses
     the token text.
   - Disabled and focus.
     - Disabled = text-faint, on surface-muted where a fill is needed. Disabled buttons have their
       own tokens (disabled, disabled-text, disabled-border): in light mode the muted look they
       had before the palette, a grey fill with a white label; in dark mode a faint label on dark
       grey.
     - Focus: input focus borders = brand (periwinkle, as today); an optional future
       :focus-visible ring would use brand-text.
   - Limits.
     - Body, secondary, muted and state text reach at least 4.5:1 in both themes, on page,
       surface and surface-muted. The deliberate exceptions: brand-text in light mode (3.3 to
       4.2:1), white labels on brand fills in light mode (2.2:1; the dark labels on the dark
       buttons reach 4.8:1) and the label on surface-selected in light mode (3.2:1).
     - Never text-muted on surface-strong (3.6:1).
     - Never text-faint for essential text: only placeholders, disabled items and quiet hints. The one
       deliberate exception is the footer, which stays light.
     - On chrome (the top bar), accents use brand (6.3:1), never brand-text (3.2:1 in light mode).
   - Images. A new image that needs a dark version gets a <name>_dark.<ext> file next to it,
     chosen through an image token in CSS, or by an explicit if on the theme in Python.

   ADDING A TOKEN

   - Add a token only for a new role whose dark value differs from the existing roles. Two uses of
     the same light value become separate tokens only when their dark values must differ, e.g.
     white as a panel (surface) and white as a label on a brand button (text-on-brand).
   - Add it to both theme blocks, in the same order. Fixed tokens (the same in both themes) go
     only in the fixed block.
   - Name it --string-<group>[-<variant>], with the groups and variants used below. The prefix
     keeps the variables of third-party pages, where STRING popups are embedded, apart from ours.
   - Data colours are never tokens: network nodes and edges, evidence channels and the ramps of
     the figures stay literal in their modules (or are marked data in CSS). The dark figure
     colours go in the explicit ...Dark dictionaries in lib/strglobals.py (design section 6.2).
   - Check: python3 tools/palettecheck/palettecheck.py tokens

   THE MARKER 'start: phase N' (no longer in use)

   In phase 3 of the design, six light values started at today's most common value for their role,
   with a 'start: phase 4' comment, so that moving the stylesheets onto the tokens changed nothing
   visible. Phase 4 gave them their final values, and every value is now final. From phase 4 on,
   palettecheck tokens reports a 'start: phase 4' marker as an error. */

/* Fixed: the same in both themes (dark top bar) */
:root {
    --string-chrome:               #2C2E34;           /* top bar, special-message bar */
    --string-chrome-text:          #FFFFFF;           /* text on chrome */
    --string-chrome-text-muted:    #999999;           /* secondary text on chrome */
    --string-chrome-alert:         #FF9999;           /* warnings and links on chrome */
}

/* Light theme: the default, used for print and inside light islands */
:root, .light_island {
    color-scheme: light;                              /* native selects, checkboxes, scrollbars */
    --string-page:                 #F7F6F2;           /* page background, sunken wells, figure paper */
    --string-surface:              #FFFFFF;           /* panels, tables, popups, inputs, modals */
    --string-surface-muted:        #E6E6E6;           /* the standard grey: header rows, tabs, title bars */
    --string-surface-strong:       #CCCCCC;           /* hover on surface-muted */
    --string-surface-selected:     #A0A0A0;           /* the selected neutral tab (active bottom tab) */

    --string-border:               #D6D6D6;           /* hairlines: cells, inputs, tables, dividers */
    --string-border-strong:        #999999;           /* frames, underlines */

    --string-text:                 #333333;           /* body text, headings, plain links, text on tints */
    --string-text-secondary:       #4D4D4D;           /* text in boxes, tab labels, table headers */
    --string-text-muted:           #666666;           /* captions, icons */
    --string-text-faint:           #999999;           /* placeholders, disabled, never essential text */
    --string-footer-heading:       #A6A6A6;           /* footer column headings: a little lighter than the footer links */

    --string-disabled:             #CCCCCC;           /* fill of a disabled button */
    --string-disabled-text:        #FFFFFF;           /* label of a disabled button: white on the grey fill, quiet */
    --string-disabled-border:      #CCCCCC;           /* border of a disabled button: the fill colour, so no visible frame */

    --string-brand:                #A1ADEC;           /* brand fills, and text that is the brand colour: headings, active menu (like the buttons) */
    --string-button:               #A1ADEC;           /* fill and border of brand buttons at rest: the brand (dark: a dimmer periwinkle) */
    --string-brand-hover:          #B6C0F1;           /* hover and pressed on brand fills */
    --string-brand-text:           #6676CC;           /* other coloured text: links and texts that were darker blues */
    --string-brand-tint:           #D0D6F6;           /* highlights: marked names, selected list rows */
    --string-text-on-brand:        #FFFFFF;           /* labels on brand fills: white (dark: dark ink on the dimmer buttons) */

    --string-term-hover:           #F3E0E0;           /* hover on enrichment, cluster and gene-set rows */
    --string-term-selected:        #DEB4B6;           /* selected enrichment term or gene-set row */

    --string-danger:               #C40808;           /* errors, failures */
    --string-danger-tint:          #F7DEE0;           /* error backgrounds */
    --string-warning:              #965200;           /* warnings, queued */
    --string-warning-tint:         #FFEDC2;           /* attention backgrounds */
    --string-caution:              #890000;           /* cautions about analysis results (dark red) */
    --string-success:              #1D7027;           /* done, OK, high confidence */
    --string-success-tint:         #E1F1E1;           /* success backgrounds */

    --string-shadow:               rgba(0,0,0,0.10);  /* the colour in box-shadow */
    --string-overlay:              rgba(0,0,0,0.40);  /* modal backdrop, blur veil */
    --string-plate:                transparent;       /* backing behind transparent images (logo_plate) */

    /* images: absolute paths, so that it does not matter in which stylesheet var() is used. The
       sprites carry the CSS version (css/generate_actual_css_files.py copies them to images/deploy). */
    --string-sprite1:              url(/images/navigation_sprite1.py56157132.png);  /* nav underline, shadows, footer logos */
    --string-sprite2:              url(/images/navigation_sprite2.py56157132.png);  /* glyphs, checkboxes, evidence pictures */
    --string-tab-icons:            url(/images/tabs_icons_v3.svg);                         /* bottom-tab icons */
    --string-spinner:              url(/images/string_spinner.svg);                        /* wait spinner (CSS backgrounds) */
    --string-spinner-on-brand:     url(/images/string_spinner_on_brand.svg);               /* wait spinner on brand buttons (the chat share button) */
    --string-chat-button-icons:    url(/images/chat_icons.svg);                            /* glyph sprite of the five round chat buttons */
}

/* Dark theme: screen only, so print always stays light */
@media screen {
    :root[data-string-theme="dark"] {
        color-scheme: dark;        /* native selects, checkboxes, scrollbars */
        --string-page:             #161719;
        --string-surface:          #1F2125;
        --string-surface-muted:    #2C2E34;
        --string-surface-strong:   #3A3D44;
        --string-surface-selected: #5C6068;

        --string-border:           #3A3D44;
        --string-border-strong:    #5C6068;

        --string-text:             #E3E4E6;
        --string-text-secondary:   #C4C6CA;
        --string-text-muted:       #9A9DA3;
        --string-text-faint:       #73767C;
        --string-footer-heading:   #66696E;

        --string-disabled:         #2C2E34;
        --string-disabled-text:    #73767C;
        --string-disabled-border:  #5C6068;

        --string-brand:            #A1ADEC;
        --string-button:           #7580C5;
        --string-brand-hover:      #8692D9;
        --string-brand-text:       #A1ADEC;
        --string-brand-tint:       #343A63;
        --string-text-on-brand:    #161719;

        --string-term-hover:       #3A2A2D;
        --string-term-selected:    #583A3E;

        --string-danger:           #FF7B72;
        --string-danger-tint:      #3E2427;
        --string-warning:          #F5A54A;
        --string-warning-tint:     #3A311B;
        --string-caution:          #D98A82;
        --string-success:          #6CC475;
        --string-success-tint:     #1E3324;

        --string-shadow:           rgba(0,0,0,0.45);
        --string-overlay:          rgba(0,0,0,0.60);
        --string-plate:            #FFFFFF;

        --string-sprite1:          url(/images/navigation_sprite1_dark.py56157132.png);
        --string-sprite2:          url(/images/navigation_sprite2_dark.py56157132.png);
        --string-tab-icons:        url(/images/tabs_icons_v3_dark.svg);
        --string-spinner:          url(/images/string_spinner_dark.svg);
        --string-spinner-on-brand: url(/images/string_spinner_on_brand_dark.svg);
        --string-chat-button-icons: url(/images/chat_icons_on_brand_dark.svg);
    }

    /* A light island inside a dark page paints its own paper and ink. The light block above gives
       a .light_island the light value of every token; this rule uses them for the island's own
       background and text. Written only for dark pages, so that light pages are untouched. Used
       for the co-occurrence card, the iTOL and payload iframes and the light logo swatch of the
       Licensing page (design sections 5.6 and 6.7). */
    :root[data-string-theme="dark"] .light_island {
        color: var(--string-text);
        background-color: var(--string-page);
    }

    /* A plate behind an image shown on a page: user and payload images, figure PNGs (bias graphs,
       the tree), and the dataset logos without a _dark file (the collections that STRING 12.5 does
       not show, lib/datasets.py). The other third-party logos have _dark files (tools/darkimages)
       or keep their own opaque background. The images of chat answers get it through their
       container, because javascript/chat_functions.js inserts them from the answer text.
       --string-plate is white on dark pages and keeps its light value, transparent, inside a light
       island. background-color, not the shorthand, so that an element with its own background image
       would keep it. A plain white backing with square corners, like a printed figure (decided after
       the phase-7 beta review; the rounded plate looked like a sticker). Dark pages only: light pages
       are untouched. Design section 5.5. */
    :root[data-string-theme="dark"] .logo_plate,
    :root[data-string-theme="dark"] .chat_answer_content img {
        background-color: var(--string-plate);
        box-shadow: 0 0 0 3px var(--string-plate);
    }

    /* The 'Please wait ...' label of the genome upload's Continue button (cgi_bin/uploadproteome.py,
       a .button) blinks. Its keyframes in main_stylesheet.css (animate-blinking-color) blink to
       white at 70%, a literal marked fixed colour, because a token cannot carry its own
       transparency (no color-mix()). The dark buttons have a dark label, so on dark pages the
       label blinks in dark ink instead: the dark text-on-brand, #161719, at 80%. */
    :root[data-string-theme="dark"] input.please_wait {
        animation-name: animate-blinking-color-dark;
    }

    @keyframes animate-blinking-color-dark {
         0% { color: transparent; }
        50% { color: rgba(22, 23, 25, 0.8); }
       100% { color: transparent; }
    }

    /* DARK-ONLY RULES. They cover two cases:
       - figures that page JavaScript builds and saves by serialising only their own <svg>, with
         its own <style> and without computed styles (javascript/treeviewer_functions.js): page
         CSS outside the <svg> never reaches their downloads (design section 6.7);
       - inline SVG <style> rules whose light value must stay global, because they also colour
         the enrichment graph on the same page (design section 5.2(d)).
       Author CSS beats the presentation attributes that the viewer JavaScript sets (fill='black',
       '#F7F6F2', 'lightgrey'), and these selectors are more specific than the rules of the
       viewers' own <style>. */

    /* The neighbourhood and fusion viewers: #mysvg inside the page wrappers of
       cgi_bin/geneneighbors.py and cgi_bin/genefusions.py. The co-occurrence viewer, which uses
       the same tree code, is a light card instead (cgi_bin/cooccurrence.py). */
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .tree_label,
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .payloadlabeltext,
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .taxonhelptext,
    :root[data-string-theme="dark"] .fusion_page #mysvg .tree_label,
    :root[data-string-theme="dark"] .fusion_page #mysvg .payloadlabeltext,
    :root[data-string-theme="dark"] .fusion_page #mysvg .taxonhelptext {
        fill: var(--string-text);
    }

    :root[data-string-theme="dark"] .neighborhood_page #mysvg .treeline,
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .genesymbol,
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .tree_expand_collapse_icon,
    :root[data-string-theme="dark"] .fusion_page #mysvg .treeline,
    :root[data-string-theme="dark"] .fusion_page #mysvg .genesymbol,
    :root[data-string-theme="dark"] .fusion_page #mysvg .tree_expand_collapse_icon {
        stroke: var(--string-text-muted);
    }

    /* the square of the expand/collapse icon: page colour at rest, brand tint with a text-coloured
       frame under the mouse */
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .tree_expand_collapse_icon rect,
    :root[data-string-theme="dark"] .fusion_page #mysvg .tree_expand_collapse_icon rect {
        fill: var(--string-page);
    }

    :root[data-string-theme="dark"] .neighborhood_page #mysvg .tree_expand_collapse_icon:hover rect,
    :root[data-string-theme="dark"] .fusion_page #mysvg .tree_expand_collapse_icon:hover rect {
        fill: var(--string-brand-tint);
        stroke: var(--string-text);
    }

    /* the grey bars of the tree: the row highlights that fade out after an expand or a search,
       and the taxon markers */
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .tr_fast_on,
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .tr_slow_on,
    :root[data-string-theme="dark"] .neighborhood_page #mysvg .taxonhelprect,
    :root[data-string-theme="dark"] .fusion_page #mysvg .tr_fast_on,
    :root[data-string-theme="dark"] .fusion_page #mysvg .tr_slow_on,
    :root[data-string-theme="dark"] .fusion_page #mysvg .taxonhelprect {
        fill: var(--string-surface-strong);
    }

    /* The bare 'text' rules of two inline SVGs, which stay light and global (marked 'fixed colour'
       there): the gene list of the global enrichment page (cgi_bin/globalenrichment.py, #4d4d4d)
       and the coexpression heatmap (lib/expression.py, #2d2d2d). Their dark values, scoped to
       their own <svg>. */
    :root[data-string-theme="dark"] #svg_genelist_image text {
        fill: var(--string-text-secondary);
    }

    :root[data-string-theme="dark"] #svg_coexpression_image text {
        fill: var(--string-text);
    }

    /* the grey backing of the coexpression heatmap's two triangles (lib/expression.py, a fill attribute
       of rgb(230,226,230) on light pages); the score cells on top keep their colours */
    :root[data-string-theme="dark"] #svg_coexpression_image .coexpression_triangle {
        fill: var(--string-surface-muted);
    }

    /* The full proteome network (t-SNE map) of the global enrichment page: tiles of inline SVG that
       javascript/global_enrichment_functionalities.js loads from /proteome_networks/<taxon>/ as you
       zoom and pan. The tiles are shared by both themes and bring their own colours: a baked
       light-grey links layer (a PNG), grey dots (presentation attributes), a raster copy of the dots
       that the script shows while zooming and panning, white bubbles at the deepest zoom and, in
       their own <style>, black labels. On dark pages the links layer is dimmed to 22 %, the dots are
       lightened (the raster copy through a filter, to match), the bubbles are dimmed and the labels
       take the text colour (decided after the phase-8 review). The halos keep the colour the script
       gives them. */
    :root[data-string-theme="dark"] #svg_tsne_image #raster_image_lines {
        opacity: 0.22;
    }

    :root[data-string-theme="dark"] #svg_tsne_image #raster_image_dots {
        filter: brightness(1.7);
    }

    :root[data-string-theme="dark"] #svg_tsne_image .proteindot,
    :root[data-string-theme="dark"] #svg_tsne_image .simplificationdot {
        fill: var(--string-text-secondary);
    }

    :root[data-string-theme="dark"] #svg_tsne_image .proteindot image {
        opacity: 0.62;
    }

    :root[data-string-theme="dark"] #svg_tsne_image .proteindot text {
        fill: var(--string-text);
    }

    /* The 'Indirect interactions' networks of the interaction page (cgi_bin/interaction.py): the dark
       network paints its own canvas in the page colour (an inline background-color, lib/networkmaker.py),
       but here it sits in a table row with the panel colour, which is wider and taller than the network,
       so the panel showed as a lighter frame around it. Here the canvas is transparent and the network
       sits on the panel, like the tables above it (decided after the phase-7 beta review). !important,
       because the canvas colour is an inline style. The protein bubbles of that page reuse the id
       svg_network_image but have no inline background, so they are not affected. */
    :root[data-string-theme="dark"] .set_interaction_table_row #svg_network_image[style*='background-color'] {
        background-color: transparent !important;
    }

    /* The structure card of the protein popup (lib/iteminfo.py, #svg_protein_image): the protein's
       domains, its structure pictures and their switcher. The SVG paints its own white card with
       presentation attributes (fill and stroke white, text black and rgb(75,75,75)); these rules
       repaint it in the popup's dark surface and text colours. The structure pictures are
       transparent and stay. The same markup goes to embedded networks, whose pages have no dark
       attribute, so they keep the white card. */
    :root[data-string-theme="dark"] #svg_protein_image #background rect,
    :root[data-string-theme="dark"] #svg_protein_image rect[fill='white'],
    :root[data-string-theme="dark"] #svg_protein_image rect[fill='rgb(255,255,255)'] {
        fill: var(--string-surface);
        stroke: var(--string-surface);
    }

    /* the white lines that mask the ends of a shifted domain picture, and the hidden white texts */
    :root[data-string-theme="dark"] #svg_protein_image line[stroke='rgb(255,255,255)'] {
        stroke: var(--string-surface);
    }

    :root[data-string-theme="dark"] #svg_protein_image text[fill='white'] {
        fill: var(--string-surface);
    }

    /* the position ticks, the residue numbers and chain names, the captions */
    :root[data-string-theme="dark"] #svg_protein_image line[stroke='rgb(0,0,0)'] {
        stroke: var(--string-text-muted);
    }

    :root[data-string-theme="dark"] #svg_protein_image text[fill='black'] {
        fill: var(--string-text);
    }

    :root[data-string-theme="dark"] #svg_protein_image text[fill='rgb(75,75,75)'] {
        fill: var(--string-text-secondary);
    }

    /* the switcher's arrows, and the arrow from the domains to the structure */
    :root[data-string-theme="dark"] #svg_protein_image path.svgcontrolarrow,
    :root[data-string-theme="dark"] #svg_protein_image marker path {
        fill: var(--string-text-muted);
    }

    :root[data-string-theme="dark"] #svg_protein_image marker#white_arrow_marker path {
        fill: var(--string-surface);
        stroke: var(--string-surface);
    }

    /* The domain picture cannot be swapped for a _dark file: a white PNG drawn live by SMART
       (smart.embl.de). It is inverted in the browser, with its hues turned back: the white becomes
       nearly the dark surface (invert 0.88), and the dark ink becomes light. The card's three
       database logos (PDB, SWISS-MODEL, AlphaFold) are _dark files on dark pages (lib/iteminfo.py,
       figurePanel). */
    :root[data-string-theme="dark"] #svg_protein_image image[id$='_smart_domain_illustration_image'] {
        filter: invert(0.88) hue-rotate(180deg);
    }
}
/* first, turn off some overly clever (and not helpful) rendering hacks on mobile browsers */

* {
    padding: 0;
    margin: 0;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

body {
    margin: 0;
    font-family: 'Roboto',sans-serif;
    color: var(--string-text);
    background: var(--string-page);
    font-weight: 400;
}

p {
    padding: 0;
    margin: 0;
    padding-bottom: 15px;
}

b {
    font-weight: 600;
}

img {
    border: none;
}

.notselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

html {
    overflow-y: scroll;      /* to prevent flickering by the vertical scrollbar, during page-load */
}

:focus {
    outline: none;
}

.hide {
    display: none;
}

ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}

input {
    margin: 0;
    padding: 0;
    border: none;
}

hr {
    border: none;
    border-bottom: 1px solid var(--string-border);
    height: 1px;
    float: left;
    width: 100%;
}

.categories_hr {
    border: none;
    border-bottom: 1px solid var(--string-border);
    height: 1px;
    position: relative;
    top: 50%;
    left: 18%;
    width: 130px;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px dashed var(--string-border-strong);
  margin: 10px;
  width: 140px;
  position: relative;
  left: 20px;
}


#stitch_logo {
  background:url("data:image/svg+xml;utf8,<svg width='60' height='60' xmlns='https://www.w3.org/2000/svg' xmlns:svg='https://www.w3.org/2000/svg'><g><polygon strokeWidth='5' strokecolor='none' fill='#FF0000' edge='0' orient='x' sides='6' shape='regularPoly' cy='137' cx='276'/><g stroke='null' id='svg_18'><polygon stroke='#000000' points='30,53 9,41 9,18 30,6 50,18 50,41 30,53 ' strokeWidth='5' strokecolor='#000000' fill='#ffffff' edge='24' orient='x' sides='6' shape='regularPoly' cy='32' cx='58'/><circle stroke='#000000' r='5' cy='41' cx='9' stroke-linecap='null' stroke-linejoin='null' stroke-dasharray='null' fill='#ffffff'/><circle stroke='#000000' r='5' cy='18' cx='9' stroke-linecap='null' stroke-linejoin='null' stroke-dasharray='null' fill='#ff7f7f'/><circle stroke='#000000' r='5' cy='41' cx='50' stroke-linecap='null' stroke-linejoin='null' stroke-dasharray='null' fill='#ff7f7f'/><circle stroke='#000000' r='5' cy='18' cx='50' stroke-linecap='null' stroke-linejoin='null' stroke-dasharray='null' fill='#ffffff'/><circle stroke='#000000' r='5' cy='53' cx='30' stroke-linecap='null' stroke-linejoin='null' stroke-dasharray='null' fill='#ffffff'/><circle stroke='#000000' r='5' cy='6' cx='30' stroke-linecap='null' stroke-linejoin='null' stroke-dasharray='null' fill='#ff7f7f'/><circle stroke='#000000' r='14' cy='30' cx='30' stroke-linecap='null' stroke-linejoin='null' stroke-dasharray='null' fill='#ffffff'/></g></g></svg>") no-repeat; /* fixed colour */
  padding: 5px 0px 5px 65px;
}

/*******************************************************************************************/
/************************************** Basic Fonts ****************************************/
/*******************************************************************************************/

h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
    font-weight: 400;
}

h1 {
    font-size: 18px;
}

h2 {
    font-size: 13px;
    color: var(--string-text);
}

a {
    /*color: #000000;*/
    color: var(--string-text);
    text-decoration: none;
}

a.blacknondecorated:link { color: var(--string-text); text-decoration: none; }
a.blacknondecorated:active { color: var(--string-text); text-decoration: none; }
a.blacknondecorated:visited { color: var(--string-text); text-decoration: none; }

a.nondecorated:link { color: var(--string-text); text-decoration: none; }
a.nondecorated:active { color: var(--string-text); text-decoration: none; }
a.nondecorated:visited { color: var(--string-text); text-decoration: none; }
a.nondecorated:hover { color: var(--string-brand-text); text-decoration: none; }


/*******************************************************************************************/
/****************************************** Top Bar ****************************************/
/*******************************************************************************************/

.top_bar {
    background: var(--string-chrome);
    min-width: 980px;
    width: 100%;
}

.top_bar .container {
    width: 980px;
    height: 36px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    z-index: 1000;
    color: var(--string-chrome-text);
}

.top_bar .container .left {
    position: absolute;
    left: 0;
    top: 0;
}

.top_bar .container .center {
    text-align: center;
}

.top_bar .container .center .static_error_warning {
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    font-size: 13px;
    color: var(--string-chrome-alert);
    overflow: hidden;
    max-width: 600px;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top_bar .container .center .static_error_warning a {
    color: var(--string-chrome-alert);
    text-decoration: underline;
}

.top_bar .container .right {
    position: absolute;
    right: 0;
    top: 0;
}

.top_bar .special_message_container {
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    padding: 5px 5px 0px 5px;
}

.top_bar .special_message {
    color: var(--string-chrome-text);
    padding: 5px;
    border: 1px solid var(--string-chrome-text);
}

.top_bar .special_message .headline span {
    padding-bottom: 2px;
    display: inline-block;
}

.top_bar .special_message .small_print {
    font-size: 11px;
}

.top_bar .special_message .small_print span {
    padding-top: 3px;
    display: inline-block;
}

.top_bar .special_message .small_print span a {
    color: var(--string-chrome-text);
    border-bottom: 1px dotted var(--string-chrome-text);
    text-decoration: none;
}


.top_bar .special_message a.special_message_button {
    font-size: 11px;
    color: var(--string-chrome);
    background-color: var(--string-chrome-text);
    float: right;
    padding: 1px 10px 1px 10px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 2px;
}

.top_bar .special_message a.special_message_button:hover {
    opacity: 0.8;
}

#special_message_close {
    float: right;
    width: 15px;
    height: 14px;
    border: none;
    cursor: pointer;
}

#special_message_close:hover {
    opacity: 0.8;
}

/*******************************************************************************************/
/*************************************** Top Bar List **************************************/
/*******************************************************************************************/

ul.top_bar_list li {
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    display: inline;
    font-size: 13px;
    color: var(--string-chrome-text-muted);
    padding-left: 10px;
    padding-right: 10px;
    background-image: var(--string-sprite1);
    background-position: right -108px;
    background-repeat: no-repeat;
    margin-left: -1px;
    font-weight: 600;
}

ul.top_bar_list li:last-child {
    background: none;
}

ul.top_bar_list li.last {
    background: none;
}

ul.top_bar_list li.header {
    background: none;
    color: var(--string-chrome-text-muted);
    font-weight: 400;
    padding-right: 0;
    font-size: 13px;
}

ul.top_bar_list li.remark {
    color: var(--string-chrome-text-muted);
    font-weight: 400;
    font-size: 13px;
}

ul.top_bar_list li a {
    color: var(--string-chrome-text-muted);
    font-size: 12px;
    display: inline-block;
    text-transform: uppercase;
    padding-right: 5px;
}

ul.top_bar_list li a:hover,ul.top_bar_list li a.active {
    color: var(--string-brand);
}

/* the theme switch, the last item on the right (lib/navigation.py). Its icon (lib/svgelements.py, themeSwitchIcon)
   shows the page's theme in fixed colours, like the top bar; on pages that cannot be reloaded it is disabled.
   - no padding on the right: it ends 10 px from the right edge, as 'Version:' starts 10 px from the left one;
   - the margin on the left stands in for the space that the markup has between the other items;
   - the icon's middle is 4.5 px above the baseline: the middle of the capitals beside it, and of the bar */

ul.top_bar_list li a#theme_switch {
    padding-right: 0;
    margin-left: 4px;
}

#theme_switch svg {
    vertical-align: -4.5px;
}

#theme_switch:not(.theme_switch_disabled):hover .theme_switch_pill {
    stroke: var(--string-brand);
}

#theme_switch.theme_switch_disabled {
    opacity: 0.4;
    cursor: default;
}

/*******************************************************************************************/
/************************************** Set Evidence ***************************************/
/*******************************************************************************************/

.set_evidence_page h1 {
    text-align: center;
    margin-bottom: 10px;
}

.set_evidence_page h2 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 20px;
    color: var(--string-brand);
}

.set_interaction_table {
    display: table;
    border-collapse: collapse;
    width:100%;
}

.set_interaction_table_row {
    display: table-row;
    font-size: 14px;
    background-color: var(--string-surface);
}

.set_interaction_table_row div {
    display: table-cell;
    border: 1px solid var(--string-border);
    border-radius: 4px;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

.set_interaction_table_row .minibutton_edge {
    display: table-cell;
    border: 3px var(--string-page);
    border-radius: 4px;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

.set_interaction_table_row .empty_cell {
    background-color: transparent;
    color: var(--string-text-muted);
}

.set_evidence_table {
    display: table;
    border-collapse: collapse;
    width:100%;
}

.set_evidence_table_row {
    display: table-row;
    font-size: 13px;
    cursor: pointer;
    background-color: var(--string-surface);
}

.set_evidence_table_row:hover {
    background-color: var(--string-surface-muted);
}

.set_evidence_table_row div {
    display: table-cell;
    border: 1px solid var(--string-border);
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

.set_evidence_table_row div:first-of-type {
    font-style: italic;
}

.set_evidence_table_row div span {
    font-style: normal;
}

.set_evidence_truncation_message {
    font-size: 13px;
    padding-left: 15px;
    color: var(--string-text-faint);
}

.set_evidence_nothing_found {
    font-size: 15px;
    padding-left: 15px;
    padding-top: 10px;
}

.set_evidence_single_record_table {
    font-size: 13px;
    margin-bottom: 20px;
}

.set_evidence_single_record_table_wrap {
    background-color: var(--string-surface);
    border: 1px solid var(--string-border);
    padding: 10px;
}

div.oversized_input_wait {
    margin-top: 150px;
    margin-left: auto;
    margin-bottom: 100px;
    margin-right: auto;
    font-size: 30px;
    color: var(--string-text-faint);
    display: table;
}

div.oversized_input_wait div {
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 5px;
}

div.oversized_smallprint_message {
    margin-left: auto;
    margin-bottom: 50px;
    margin-right: auto;
    text-align: center;
    font-size: 15px;
    color: var(--string-text-faint);
}

/*********************************************************************************************/
/************************************** "My Data" pages **************************************/
/*********************************************************************************************/

.mydata_page {
    font-size: 13px;
}

.mydata_page a {
    text-decoration: underline;
}

.mydata_page h2 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 5px;
    text-align: center;
    color: var(--string-brand);
}

.mydata_page h3 {
    font-size: 15px;
    text-align: center;
    color: var(--string-text);
}

.mydata_page td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    border: 1px solid var(--string-border);
}

.mydata_page td:not(:first-child) {
    white-space: nowrap;
}

.mydata_page table tr {
    background-color: var(--string-surface);
}

.mydata_page table tr:hover {
    background-color: var(--string-surface-muted);
}

.mydata_page table.has_header tr:first-of-type td {
    font-weight: bold;
    background-color: var(--string-surface);
}

.my_page_selector {
    height: 36px;
    line-height: 36px;
    padding-left: 7px;
    padding-right: 7px;
    text-align: left;
    vertical-align: middle;
    font-size: 16px;
    display: block;
    color: var(--string-text-secondary);
    border-bottom: medium none;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-bottom: 1px;
    border-radius: 3px;
    transition: all 0.05s ease-out 0.05s;
    background-color: var(--string-surface-muted);
}

.my_page_selector:not(.MP_static) {
    cursor: pointer;
    margin-left: 4px;
    margin-right: 4px;
}

.my_page_selector:hover:not(.MP_static) {
    background-color: var(--string-surface-strong);
}

.MP_expanded span.bottom_page_content_arrows {
    background-position: -1px -29px;
}

.mydata_page .invisible_table {
    background-color: unset;
    border: unset;
}

.mydata_page .invisible_table tr {
    background-color: unset;
    border: unset;
}

.mydata_page .invisible_table tr:hover {
    background-color: unset;
    border: unset;
}

.mydata_page .invisible_table td {
    background-color: unset;
    border: unset;
}

.privacy_controls {
    display: table;
    width: 100%;
}

.privacy_controls div {
    display: table-row;
}

.privacy_controls div div {
    display: table-cell;
    width: 50%;
}

.privacy_controls div div a {
    text-decoration: none;
    margin-bottom: 12px;
}

/*******************************************************************************************/
/************************************** Download Page **************************************/
/*******************************************************************************************/

.download_page h1 {
    text-align: center;
}

.download_page h2 {
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-top: 20px;
    color: var(--string-brand);
}

.download_table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.download_table_headline {
    display: table-row;
}

.download_table_headline div {
    display: table-cell;
}

.download_table_headline div h2 {
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-top: 20px;
    color: var(--string-brand);
}

.download_table_header_row {
    display: table-row;
    font-size: 13px;
    font-weight: 600;
}

.download_table_header_row div {
    display: table-cell;
    border: 1px solid var(--string-border);
    padding: 10px;
    text-align: left;
    background-color: var(--string-surface);
}

.download_table_data_row {
    display: table-row;
    font-size: 13px;
    background-color: var(--string-surface);
}

.download_table_data_row:hover {
    background-color: var(--string-surface-muted);
}

.download_table_data_row div {
    display: table-cell;
    border: 1px solid var(--string-border);
    padding: 10px;
    text-align: left;
}

.download_table_data_row div span {
    font-weight: bold;
    color: var(--string-text);
}

.download_table_data_row div a {
    text-decoration: underline;
}

.download_page_organism_select_table {
    background-color: var(--string-surface);
    border: 1px solid var(--string-border);
    display: table;
    width: 100%;
    font-size: 13px;
}

.download_page_organism_select_table_row {
    display: table-row;
}

.download_page_organism_select_table_cell {
    vertical-align: middle;
    display: table-cell;
    padding: 10px;
    line-height: 21px;
}

/*******************************************************************************************/
/************************************** Bottom Page Content Selectors **********************/
/*******************************************************************************************/

.bottom_page_content_nav {
    line-height: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    overflow: visible;
}

.bottom_page_content_nav ul {
    text-align: left;
    float: right;
    white-space: nowrap;
}

.bottom_page_content_nav ul li {
    display: inline-block;
}

.bottom_page_content_nav ul li a {
    height: 38px;
    line-height: 41px;
    padding-left: 6px;
    padding-right: 8px;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    display: block;
    color: var(--string-text-secondary);
    border-bottom: none;
    background-color: var(--string-surface-muted);
    margin-left: 6px;
    margin-right: 6px;
    padding-bottom: 1px;
    border-radius: 3px;
    transition: all .05s ease-out .05s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

#bottom_page_selector_network {
    padding-left: 7px;
    padding-right: 4px;
}

.bottom_page_content_nav ul li div {
    font-size: 14px;
    float: left;
}

.bottom_page_content_nav ul li div.active {
}

.bottom_page_content_nav ul li div:hover {
}

.bottom_page_content_nav ul li a:hover,.bottom_page_content_nav ul li a.hover {
    background-color:var(--string-surface-strong);
}

.bottom_page_content_nav ul li a.active,.bottom_page_content_nav ul li a.active:hover {
    background-color:var(--string-surface-selected);
}

span.bottom_page_content_arrows {
    margin-left: 10px;
    height: 15px;
    width: 15px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: 0px -2.9px;
    margin-top: 11px;
    display: inline-block;
    position: relative;
    top: 1px;
}

.bottom_page_content_nav ul li a.active span.bottom_page_content_arrows {
    background-position: -1.9px -23px;
}

.bottom_page_content_nav ul li a span.view_icon {
    margin-right: 4px;
    height: 16px;
    width: 22px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -18px -3px;
    float: left;
    margin-top: 14px;
}


.bottom_page_content_nav ul li a span.info_icon {
    margin-right: 6px;
    height: 20px;
    width: 20px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -17px -20px;
    float: left;
    margin-top: 9px;
}

.bottom_page_content_nav ul li a span.settings_icon {
    margin-right: 6px;
    height: 20px;
    width: 20px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -40px -1px;
    float: left;
    margin-top: 11px;
}

.bottom_page_content_nav ul li a span.analysis_icon {
    margin-right: 6px;
    height: 20px;
    width: 19px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -82px -20px;
    float: left;
    margin-top: 9px;
}


.bottom_page_content_nav ul li a span.table_icon {
    margin-right: 6px;
    height: 20px;
    width: 20px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -39px -20px;
    float: left;
    margin-top: 9px;
}

.bottom_page_content_nav ul li a span.cluster_icon {
    margin-right: 4px;
    height: 20px;
    width: 20px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -82px -1px;
    float: left;
    margin-top: 11px;
}

.bottom_page_content_nav ul li a span.more_icon {
    margin-right: 6px;
    height: 20px;
    width: 20px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -61px -1px;
    float: left;
    margin-top: 11px;
}

.bottom_page_content_nav ul li a span.less_icon {
    margin-right: 6px;
    height: 20px;
    width: 20px;
    background-image: var(--string-tab-icons);
    background-repeat: no-repeat;
    background-position: -60px -21px;
    float: left;
    margin-top: 10px;
}

/*******************************************************************************************/
/*********************************** Evidence View Choices *********************************/
/*******************************************************************************************/

#bottom_page_selector_viewers_container {
    text-align: center;
    font-size: 13px;
}

.evidence_view_choices_wrap {
    text-align: center;
    display: inline-block;
    margin: 20px auto;
    max-width: 900px;
}

.evidence_explainer {
    margin-top: 15px;
    margin-bottom: 25px;
    color: var(--string-text-muted);
}

.evidence_explainer_wrap {
    display: inline-block;
    text-align: left;
}

.evidence_view_choices_item {
    color: var(--string-text-muted);
    min-height: 55px;
    text-align: left;
    padding: 5px;
    border: 1px solid var(--string-border);
    margin-top: 3px;
    margin-bottom: 8px;
    border-radius: 3px;
    display: block;
    line-height: 132%;
}

.evidence_view_choices_item.active {
    background-color: var(--string-surface);
    color: var(--string-text-secondary);
}

.evidence_view_choices_item.active:hover {
    background-color: var(--string-surface);
    border: 1px solid var(--string-brand-text);
}

.evidence_view_choices_item.selected {
    background-color: var(--string-surface);
    border: 1px solid var(--string-brand-text);
}

.evidence_view_choices_item .icon_wrapper {
    width: 100px;
    height: 55px;
    background-color: var(--string-surface-muted);
    border-radius: 4px;
    float: left;
    position: relative;
    margin-right: 9px;
}

.evidence_view_choices_item .icon {
    width: 90px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -22.5px -45px;
    background-image: var(--string-sprite2);
    background-repeat: no-repeat;
    background-size: 111.1111111111111%;
}

.evidence_view_choices_item .Network      { background-position: -0.5px -269.5px; }
.evidence_view_choices_item .Neighborhood { background-position: -0.5px -316.0px; }
.evidence_view_choices_item .Coexpression { background-position: -0.5px -362.5px; }
.evidence_view_choices_item .Textmining   { background-position: -0.5px -409.0px; }
.evidence_view_choices_item .Cooccurrence { background-position: -0.5px -455.5px; }
.evidence_view_choices_item .Databases    { background-position: -0.5px -502.0px; }
.evidence_view_choices_item .Fusion       { background-position: -0.5px -547.2px; }
.evidence_view_choices_item .Experiments  { background-position: -0.5px -594.0px; }

.evidence_view_choices_item h2 {
    color: var(--string-text-muted);
    font-weight: 700;
    margin-bottom: 2px;
}

.evidence_view_choices_item.active h2 {
    color: var(--string-text-secondary);
}

.evidence_view_choices_item.active:hover div, .evidence_view_choices_item.selected div {
    background-color:var(--string-surface-strong);
}

.evidence_view_choices_item:not(.active) {
    cursor: default;
}

.evidence_view_choices_item:not(.active) img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.evidence_view_choices_item:not(.active) div {
    background-color: transparent;
}

.evidence_view_choices_item div img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.evidence_view_choices_item div.evidence_view_choices_status {
    float: right;
    height: unset;
    width: unset;
    color: var(--string-brand-text);
    background-color: transparent;
    display: none;
    padding: 0px;
    margin-right: 1px;
}

.evidence_view_choices_item.selected div.status_showing {
    display: block;
    background-color: transparent;
}

.evidence_view_choices_item.loading div.status_loading {
    display: block;
    background-color: transparent;
}


/*******************************************************************************************/
/*********************************** Error / Info Boxes  ***********************************/
/*******************************************************************************************/

.error_info_wrap {
    margin: 0 auto;
    background: var(--string-surface);
    border: 1px solid var(--string-border);
    box-sizing: border-box;
    border-radius: 4px;
}

.error_info_box > .box_title {
    border-bottom: 1px solid var(--string-border);
    text-align: left;
    display: block;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 10%;
    padding-right: 10%;
    color: var(--string-brand);
    font-weight: 700;
    font-size: 26px;
}

.error_info_box > .box_body {
    padding-bottom: 40px;
    font-size: 13px;
    padding-top: 30px;
    padding-left: 10%;
    padding-right: 10%;
    text-align: left;
    color: var(--string-text-secondary);
}

div.error_info_message {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--string-text-muted);
}

div.error_info_separator {
    height: 20px;
}

.error_info_button {
    width: 60%;
    min-width: 100px;
}

a.error_linkout {
    /* color: var(--string-brand); */
    color: var(--string-brand);
    font-weight: bold;
}

/*******************************************************************************************/
/***********************************  Sequence Info Box  ***********************************/
/*******************************************************************************************/

.sequence_info_wrap {
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background: var(--string-surface);
    border: 1px solid var(--string-border);
    box-sizing: border-box;
    border-radius: 4px;
}

.sequence_info_box {
}

.sequence_info_box .sequence_info_data {
    padding-bottom: 30px;
    padding-top: 30px;
    padding-left: 60px;
    padding-right: 60px;
    text-align: center;
}

.sequence_info_box .sequence_info_data .sequence_formatted {
    text-align: left;
    display: inline-block;
    font-size: 13px;
    color: var(--string-text-secondary);
    font-family: Andale Mono, monospace;
}

.sequence_info_box .sequence_info_footer {
    border-top: 1px solid var(--string-border);
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 60px;
    padding-right: 60px;
    overflow: auto;
}

.sequence_info_box .sequence_info_footer .footer_formatted {
    text-align: left;
    max-width: 626px;
    font-size: 13px;
    display: inline-block;
}

.sequence_info_button {
    width: 60%;
    min-width: 100px;
}

td.alignment { font-family: monospace; font-size: 12px; }
td.alignment_fasta_header { font-size: 12px; font-weight: bold; }

/*******************************************************************************************/
/**********************************  Chemcial structures ***********************************/
/*******************************************************************************************/

#gallery {text-align:center;}
#gallery p {display:inline;}
#gallery span {margin:1em; vertical-align:top; display:table-cell; display:inline-table; display:inline-block;}
#gallery p img {margin-bottom:5px;}


.chemstruct_wrapper {
    padding-top: 10px;
    padding-bottom: 25px;
}

.chemstruct_wrapper p {
    font-size: 11.5px;
}

.chemstruct_wrapper h2 {
    font-size: 13px;
    color: var(--string-brand);
    font-weight: bold;
}



/*******************************************************************************************/
/**************************************** TSNE network *************************************/
/*******************************************************************************************/

.tsne_outer_network_container {
    display: table-cell;
    min-width: 240px;
    width: 100%;
    vertical-align: top;
    padding: 20px;
}

.tsne_network_container {
    overflow: hidden;
}

.tsne_network_container.waiting {
    cursor: wait;
}

.proteindot text {
    font-size: 0.7px;
    fill: black; /* data */
}

.proteinhalo {
    opacity: 0.0;
    fill: rgb(160,0,0); /* data */
}

.sdhalo {
    opacity: 0.0;
    fill: rgb(160,0,0); /* data */
}



#global_enrichment_result_column_1 {
    vertical-align: top;
}

#global_enrichment_result_column_1 .legend_headline {
    margin-top: 20px;
    margin-bottom: 20px;
}

#ge_geneset_info {
    margin-right: 20px;
    font-weight: bold;
    float: right;
    color: #D29090; /* data */
    font-size: 11px;
    display: none;
}

#ge_geneset_info_left {
    font-weight: bold;
    float: left;
    color: #D29090; /* data */
    font-size: 11px;
    display: none;
}

a.ge_permalink {
    color: var(--string-text-faint);
    text-decoration: none;
    display: inline-block;
    background: var(--string-sprite2) no-repeat 0 -378px;
    padding-left: 20px;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
    float: right;
    margin-right: 20px;
}

a.ge_permalink:hover {
    color: var(--string-text);
    background: var(--string-sprite2) no-repeat 0 -398px;
}



/*******************************************************************************************/
/************************************** Protein Homology ***********************************/
/*******************************************************************************************/

.homology_wrapper {
    padding-top: 10px;
    padding-bottom: 25px;
}

.homology_wrapper h2 {
    font-size: 13px;
    color: var(--string-brand);
    font-weight: bold;
}

.homology_box {
    width: 100%;
    text-align: center;
    font-size: 13px;
    background-color: var(--string-surface);
    padding: 20px;
    border: 1px solid var(--string-border);
    box-sizing: border-box;
    border-radius: 4px;
    margin-top: 15px;
}

.homology_box .clickable {
    cursor: pointer;
}

.homology_box .clickable:hover {
    text-decoration: underline;
}

.homology_box .divclickable {
    background-color: var(--string-surface-strong);
    cursor: pointer;
}

.homology_box .divclickable:hover {
    background-color: var(--string-border-strong);
}

.homology_box .sequence_info_footer .footer_formatted {
    text-align: left;
    max-width: 626px;
    font-size: 13px;
    display: inline-block;
}

.homology_query_space_selector {
    text-align: center;
    border-radius: 3px;
}

.homology_query_space_selector div {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/*******************************************************************************************/
/*************************************** Organism Overview *********************************/
/*******************************************************************************************/

div.organism_overview_table {
    display: table;
    font-style: normal;
    font-size: 13px;
    color: var(--string-text-secondary);
    border-spacing: 0px 10px;
    width: 100%;
}

div.organism_overview_table .row {
    display: table-row;
}

div.organism_overview_table .cell {
    display: table-cell;
    border:1px solid var(--string-border);
    border-radius:3px;
    max-width: 850px;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 2px;
    padding-right: 2px;
}

div.organism_overview_table .row:hover .cell {
    background-color: var(--string-surface);
}

div.organism_overview_table .anchor_cell {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    width: 1%;
}

div.organism_overview_table a :not(.anchor_cell) {
    text-decoration: underline;
    color: var(--string-text-secondary);
}

div.organism_overview_table .small {
    min-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    font-size: 11.5px;
    color: var(--string-text-muted);
}

div.organism_overview_table .organism_name {
    min-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--string-text-secondary);
}

/*******************************************************************************************/
/*************************************** Proceed-Forms *************************************/
/*******************************************************************************************/

div.proceed_form_table {
    display: table;
    width: 100%;
    font-size: 13px;
}

    
div.display_term_table_row{
    display: table-row;
}

div.display_term_table_row:hover{
    display: table-row;
    background-color: var(--string-surface);
}

div.proceed_form_header_column {
    display: table-cell;
    white-space: nowrap;
    background-color: var(--string-surface);
    color: var(--string-text-secondary);
    padding: 5px;
    border:1px solid var(--string-border);
    border-radius:3px;
}

div.proceed_form_header_column_left {
    display: table-cell;
    white-space: nowrap;
    background-color: var(--string-surface);
    color: var(--string-text-secondary);
    padding: 5px;
    border-left: 1px solid var(--string-border);
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

div.proceed_form_header_column_middle {
    display: table-cell;
    /*white-space: nowrap;*/
    background-color: var(--string-surface);
    color: var(--string-text-secondary);
    padding: 1%;
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
}

div.proceed_form_header_column_count_middle {
    display: table-cell;
    white-space: nowrap;
    background-color: var(--string-surface);
    color: var(--string-text-secondary);
    padding: 1%;
    text-align: center;
    /*width: 20px;
    max-width: 20px;*/
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
}

div.proceed_form_header_column_right {
    display: table-cell;
    white-space: nowrap;
    background-color: var(--string-surface);
    color: var(--string-text-secondary);
    padding: 1%;
    border-right:1px solid var(--string-border);
    border-top:1px solid var(--string-border);
    border-bottom:1px solid var(--string-border);
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
}

div.proceed_form_item_column {
    display: table-cell;
    padding: 3px;
    color: var(--string-text-muted);
    text-align: justify;
    padding-right: 20px;
}

div.proceed_form_organism_column {
    padding: 3px;
    color: var(--string-text-muted);
    /* white-space: nowrap; */
    display: table-cell;
    min-width: 220px;
}

div.proceed_form_term_column {
    color: var(--string-text-muted);
    /* white-space: nowrap; */
    display: table-cell;
    width: 15%;
    max-width: 15%;
    font-size: 100%;
    border-bottom: 0.1px var(--string-border-strong) solid;
    vertical-align: top;
    padding: 1%;
    overflow: hidden;
    white-space: nowrap;
}

div.proceed_form_count_column {
    padding: 1%;
    color: var(--string-text-muted);
    /* white-space: nowrap; */
    display: table-cell;
    width: 10%;
    max-width: 10%;
    font-size: 13px;
    border-bottom: 0.1px var(--string-border-strong) solid;
    vertical-align: top;
    padding: 7px;
    text-align: center;
}

div.proceed_form_term_description_column {
    padding: 1%;
    color: var(--string-text-muted);
    /* white-space: nowrap; */
    display: table-cell;
    /*width: 150px;
    max-width: 150px;*/
    font-size: 13px;
    border-bottom: 0.1px var(--string-border-strong) solid;
    vertical-align: middle;
}

div.proceed_form_category_column {
    padding: 6px;
    color: var(--string-text-muted);
    /* white-space: nowrap; */
    display: table-cell;
    min-width: 120px;
    font-size: 13px;
}

div.proceed_form_compact_column {
    padding: 3px 0px 3px 0px;
    color: var(--string-text-muted);
    white-space: nowrap;
    display: table-cell;
}

div.proceed_form_compact_term_column {
    padding: 0.5% 0% 0.5% 0%;
    color: var(--string-text-muted);
    white-space: nowrap;
    display: table-cell;
    width: 3%;
    max-width: 3%;
    border-bottom: 0.1px var(--string-border-strong) solid;

}

div.proceed_form_explanation {
    margin-top: 8px;
    color: var(--string-text-secondary);
    margin-bottom: 20px;
    font-size: 13px;
    display: table;
    width: 100%;
}

div.proceed_form_explanation .row {
    display: table-row;
}

div.proceed_form_explanation .cell {
    display: table-cell;
    vertical-align: middle;
    max-width: 400px;
}

div.proceed_form_explanation .cell:last-child {
    text-align: right;
}

/*******************************************************************************************/
/********************************** Data Settings Box **************************************/
/*******************************************************************************************/

div.data_settings_wrap {
    border: 1px solid var(--string-border-strong);
}

div.data_settings_separator {
    border-bottom: 1px solid var(--string-border-strong);
    margin-top: 10px;
    margin-bottom: 10px;
}

div.data_settings_separator_vertical {
    display: table-cell;
    border-left: 1px solid var(--string-border-strong);
    margin-left: 10px;
    margin-right: 10px;
}

div.data_settings_wrap * div.data_settings_body {
    padding: 2px;
    color: var(--string-text-muted);
}

div.data_settings_section_headline {
    color: var(--string-text-muted);
    margin-bottom: 7px;
}

div.data_settings_label {
    font-size: 10px;
}

div.data_settings_label_active {
    color: var(--string-danger) !important;
}

div.data_settings_basic_advanced_label {
    font-weight: bold;
    vertical-align: top;
}

div.data_settings_checkbox_wrap {
    display: table-cell;
    font-size: 10px;
    padding: 4px;
}

div.data_settings_select_wrap {
    display: table-cell;
    padding-right: 10px;
}

.data_settings_select {
    height: 27px;
    padding-left: 5px;
    padding-right: 17px;
    /*width: 100%;
    float: left;*/
    text-align: left;
    color: var(--string-text-faint);
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    margin-top: 8px;
    margin-bottom: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: var(--string-sprite2);
    background-position: right -467px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    transition: .1s linear all;
}

.download_data_settings_select {
    height: 40px;
    padding: 12px 20px 12px 10px;
    padding-right: 2px;
    width: 200px;
    text-align: left;
    color: var(--string-text-faint);
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    margin-top: 8px;
    margin-bottom: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: var(--string-sprite2);
    background-position: right -480px;
    background-size: 105%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    transition: .1s linear all;
}

.data_settings_select_active {
    border: 1px solid var(--string-danger) !important;
    color: var(--string-danger) !important;
    transition: .1s linear all;
}

.data_settings_select:focus {
    color: var(--string-text);
    border-color: var(--string-brand);
    border-width: 1px;
}

.data_settings_input {
    height: 27px;
    padding-left: 5px;
    text-align: left;
    background-repeat: no-repeat;
    margin-left: 20px;
    color: var(--string-text-faint);
    margin-top: 2px;
    margin-bottom: 2px;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    box-sizing: border-box;
    transition: .2s linear all;
}

.data_settings_input_active {
    border: 1px solid var(--string-danger) !important;
    color: var(--string-danger) !important;
    transition: .2s linear all;
}

.data_settings_input:focus {
    color: var(--string-text);
    border-color: var(--string-brand);
    border-width: 1px;
    background: var(--string-surface);
}

div.checkbox_wrap {
    position: relative;
    height: auto;
}

input[type=checkbox]:not(old),
input[type=radio ]:not(old) {
    width: 20px;
    opacity: 0;
    padding: 0;
    opacity: 0;
    float: left;
}

input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label {
    padding-left: 21px;
    line-height: 20px;
    display: block;
    min-height: 20px;
    position: relative;
}

input[type=checkbox]:not(old) + label::before,
input[type=radio ]:not(old) + label::before {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--string-sprite2) no-repeat 0 -180px;
    content: '';
    left: 0px;
}

input[type=checkbox]:not(old):not(:disabled):hover + label::before,
input[type=radio]:not(old):not(:disabled):hover + label::before {
    background: var(--string-sprite2) no-repeat 0 -138px;
}

input[type=checkbox]:not(old):checked + label::before {
    background: var(--string-sprite2) no-repeat 0 -265px;
}

input[type=checkbox]:not(old):not(:disabled):hover:checked + label::before {
    background: var(--string-sprite2) no-repeat 0 -224px;
}

input[type=checkbox].clustering_layout_checkbox:not(old) {
    float: left;
    margin: 0;
    width: 0;
}

input[type=checkbox].clustering_layout_checkbox:not(old) + label {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 24px;
    width: 170px;
}

input[type=checkbox].clustering_layout_checkbox:not(old) + label::before {
    left: auto;
    right: 3px;
}

.clustering_parameter_label {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
}

.clustering_method_marker {
    width: 110px;
}

.clustering_parameter_container .data_settings_input {
    margin-left: 0;
    vertical-align: middle;
}

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

.clustering_parameter_container .data_settings_select {
    margin-bottom: 2px;
    margin-top: 2px;
    vertical-align: middle;
}

input[type=radio]:not(old):checked + label::before {
    background: var(--string-sprite2) no-repeat 0 -94px;
}

input[type=radio]:not(old):not(:disabled):hover:checked + label::before {
    background: var(--string-sprite2) no-repeat 0 -52px;
}

/*******************************************************************************************/
/********************************** View Settings Box **************************************/
/*******************************************************************************************/

div#view_settings_wrap {
    border: 1px solid var(--string-border-strong);
}

div.view_settings_section_headline {
    color: var(--string-text-muted);
    margin-bottom: 7px;
}

div.view_settings_separator {
    border-bottom: 1px solid var(--string-border-strong);
    margin-top: 10px;
    margin-bottom: 10px;
}

div#view_settings_body {
    padding: 15px;
    color: var(--string-text-muted);
}

div.view_settings_label {
    font-size: 10px;
}

div.view_settings_checkbox_wrap {
    display: table-cell;
    font-size: 10px;
    padding: 4px;
}

div.view_settings_select_wrap {
    display: table-cell;
    padding-right: 10px;
}

.network_size_change_button {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    color: var(--string-text-muted);
    font-size: 12px;
    text-align: center;
    cursor: default;
    font-weight: 500;
    margin: 6px;
    box-sizing: border-box;
    padding-right: 5px;
    background-color: var(--string-surface-muted);
    border-radius: 3px;
}

.network_size_change_button:hover {
    background-color: var(--string-surface-strong);
}

div.network_size_change_label {
    min-height: 28px;
    line-height: 28px;
    font-size: 10px;
    transition: .1s linear all;
}

div.network_size_change_label_active {
    min-height: 28px;
    line-height: 28px;
    font-size: 10px;
    color: var(--string-danger);
    transition: .1s linear all;
}

span.network_size_change_label {
    margin-left: 18px;
    font-weight: 700;
    transition: .1s linear all;
}

span.network_size_change_label_active {
    margin-left: 18px;
    font-weight: 700;
    color: var(--string-danger);
    transition: .1s linear all;
}

/********************************************************************************************/
/************************************ Edge Details ******************************************/
/********************************************************************************************/

div.edge_details_wrapper {
    text-align: center;
    width: 750px;
    max-width: calc(100vw - 40px);
    box-sizing: border-box;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
}

div.edge_details_wrapper h2 {
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 3px;
}

table.edge_details_interactors_table {
    width: 100%;
    table-layout: fixed;
}

table.edge_details_interactors_table col.edge_details_interactor_col {
    width: calc((100% - 50px) / 2);
}

table.edge_details_interactors_table col.edge_details_arrow_col {
    width: 50px;
}

table.edge_details_interactors_table td.interactor {
    max-width: 0;
    vertical-align: top;
    text-align: left;
    background-color: var(--string-surface-muted);
    padding: 5px;
    border-radius: 4px;
    overflow-wrap: break-word;
}

table.edge_details_interactors_table td.double_arrow {
    width: 50px;
    min-width: 50px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    font-size: 200%;
}

.edge_details_interactor_annotation {
    display: -webkit-box;
    line-height: 1.35em;
    margin-top: 12px;
    max-height: 5.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.edge_details_interactor_counts {
    margin-top: 4px;
}

table.edge_details_standard_evidence_table {
    display: inline;
}

table.edge_details_standard_evidence_table td {
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
    background-color: var(--string-surface-muted);
}

table.edge_details_standard_evidence_table td.empty_cell {
    background-color: transparent;
    color: var(--string-text-muted);
}

table.edge_details_standard_evidence_table td:first-child {
    white-space: nowrap;
    text-align: right;
}

table.edge_details_score_table {
    --edge-details-source-column-width: 220px;
    --edge-details-score-column-width: 84px;
    --edge-details-details-column-width: 48px;
    --edge-details-evidence-row-height: 34px;
    --edge-details-empty-row-height: 26px;
    --edge-details-total-row-height: 20px;
    display: table;
    width: auto;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 3px;
}

table.edge_details_score_table th {
    padding: 2px 3px;
    color: var(--string-text-muted);
    font-size: 11px;
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
    vertical-align: bottom;
    white-space: nowrap;
}

table.edge_details_score_table .edge_details_score_table_source {
    width: var(--edge-details-source-column-width);
    text-align: left;
    white-space: normal;
}

table.edge_details_score_table .edge_details_score_table_value {
    width: var(--edge-details-score-column-width);
}

table.edge_details_score_table th.edge_details_score_table_value {
    text-align: left;
}

table.edge_details_score_table .edge_details_score_table_details {
    width: var(--edge-details-details-column-width);
}

table.edge_details_score_table td {
    box-sizing: border-box;
    height: var(--edge-details-evidence-row-height);
    padding: 0 5px;
    background-color: var(--string-surface-muted);
    border-radius: 4px;
    text-align: left;
    vertical-align: middle;
}

table.edge_details_score_table td.edge_details_score_table_value {
    text-align: center;
    white-space: nowrap;
}

table.edge_details_score_table td.edge_details_score_table_source {
    text-align: left;
}

table.edge_details_score_table td.edge_details_score_table_details {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
    text-align: center;
}

table.edge_details_score_table td.edge_details_score_table_details a {
    display: inline-block;
}

table.edge_details_score_table td.edge_details_score_table_details .minibutton_edge {
    height: var(--edge-details-evidence-row-height);
    line-height: 18px;
}

table.edge_details_score_table td.edge_details_score_table_details .edge_details_directional_evidence_links {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

table.edge_details_score_table td.edge_details_score_table_details a.edge_details_directional_evidence_link .minibutton_edge {
    height: 20px;
    padding: 0 6px;
    font-size: 15px;
    line-height: 18px;
}

table.edge_details_score_table td.edge_details_score_table_disabled {
    background-color: transparent;
    color: var(--string-text-muted);
    text-align: center;
}

table.edge_details_score_table tr.edge_details_score_table_total td {
    background-color: transparent;
    height: var(--edge-details-total-row-height);
    font-weight: bold;
}

table.edge_details_score_table tr.edge_details_score_table_no_evidence td {
    height: var(--edge-details-empty-row-height);
}

table.edge_details_score_table tr.edge_details_score_table_disabled_row td {
    height: var(--edge-details-empty-row-height);
}

h2.edge_details_score_table_heading {
    text-align: center;
    white-space: nowrap;
}

div.edge_details_score_table_transfer_disabled {
    margin-bottom: 2px;
    color: var(--string-text-muted);
    font-size: 11px;
    font-style: italic;
    text-align: center;
}

div.edge_details_score_table_wrapper {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

table.edge_details_regulatory_score_table {
    --edge-details-score-column-width: 68px;
}

table.edge_details_regulatory_modes_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px 4px;
    margin-bottom: 4px;
}

table.edge_details_regulatory_modes_table td {
    background-color: var(--string-brand-tint);
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}

table.edge_details_regulatory_modes_table td:first-child {
    text-align: right;
    width: 75%;
}

table.edge_details_regulatory_modes_table td:nth-child(2) {
    text-align: center;
    white-space: nowrap;
}

table.edge_details_regulatory_modes_table td:nth-child(2) {
    min-width: 52px;
}

table.edge_details_regulatory_modes_table tr.edge_details_below_required_score td {
    opacity: 0.45;
}

table.edge_details_regulatory_modes_table td svg {
    display: block;
    margin: 0 auto;
}

.edge_details_regulatory_modes_groups {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.edge_details_regulatory_modes_group {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 8px;
}

.edge_details_typed_physical_score {
    width: calc(50% - 5px);
    margin: 10px auto 0 auto;
}

table.edge_details_typed_physical_score_table td {
    background-color: var(--string-warning-tint);
}

table.edge_details_typed_physical_score_table td:first-child {
    text-align: center;
}

.edge_details_regulatory_modes_heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 3px 0 2px 0;
    color: var(--string-text-secondary);
    font-size: 13px;
    font-weight: bold;
}

.edge_details_regulatory_endpoint {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 115px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edge_details_regulatory_endpoint .node_bubble {
    flex: 0 0 auto;
}

.edge_details_regulatory_heading_arrow {
    flex: 0 0 auto;
    color: var(--string-text-muted);
    font-size: 16px;
}

/********************************************************************************************/
/********************************** Explanatory Legends *************************************/
/********************************************************************************************/

div.legend_wrap {
    color: var(--string-text-secondary);
    max-width: 910px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

div.legend_headline {
    text-align: left;
    font-weight: 700;
    font-size: 14px;
}

span.legend_small_print {
    font-style: italic;
    font-size: 11.5px;
    color: var(--string-text-muted);
    display: block;
    padding-top: 3px;
    line-height: 18px;
}

div.legend_info_box {
    text-align: left;
    border: 1px solid var(--string-border);
    border-radius: 3px;
    font-size: 13px;
    padding: 5px;
}

div.legend_info_box a {
    text-decoration: underline;
    color: inherit;
}

div.legend_info_box a:hover {
    color: var(--string-text-secondary);
}

div.legend_info_text_line {
    font-style: italic;
    font-size: 12px;
    color: var(--string-text-muted);
    white-space: nowrap;
    display: table-cell;
    vertical-align: middle;
    padding-left: 3px;
}

div.legend_info_inline_img {
    display: table-cell;
    vertical-align: middle;
}

.legend_info_inline_img .protein_halo_and_gradient {
    width: 162px;
    height: 32px;
    background: var(--string-sprite2) no-repeat -8px -1278px;
}

.legend_info_inline_img .protein_halo_and_gradient_r {
    width: 162px;
    height: 32px;
    background: var(--string-sprite2) no-repeat -8px -1311px;
}

.legend_info_inline_img .protein_halo_and_gradient_b {
    width: 162px;
    height: 33px;
    background: var(--string-sprite2) no-repeat -8px -1343px;
}

.legend_info_inline_img .protein_halo_and_gradient_rb {
    width: 162px;
    height: 33px;
    background: var(--string-sprite2) no-repeat -8px -1378px;
}

.round_black_dot {
    width: 8px;
    height: 7px;
    display: inline-block;
    background: var(--string-sprite2) no-repeat -155px -166px;
}

div.legend_column_rotated {
    transform: translate(0,10px) rotate(-90deg);
    transform-origin: left 15%;
    font-style: italic;
    font-size: 12px;
    color: var(--string-text-muted);
    text-align: left;
    white-space: nowrap;
    width: 17px;
}

table.legend_score_table {
    text-align: left;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 650px;
    margin-bottom: 10px;
}

table.legend_score_table td.td_name {
    white-space: nowrap;
}


table.legend_score_table tr.input_item_row td:first-child {
    padding-left: 8px;
}

table.legend_score_table tr.linked_item_row td:first-child {
    padding-left: 8px;
}

table.legend_score_table tr.linked_item_row td:last-child {
    padding-left: 8px;
}

table.legend_score_table tr.linked_item_row:hover .td_symbol,
table.legend_score_table tr.linked_item_row:hover .td_name,
table.legend_score_table tr.linked_item_row:hover .td_annotation,
table.legend_score_table tr.linked_item_row:hover .td_score_dot,
table.legend_score_table tr.linked_item_row:hover .td_score {
    background-color: var(--string-surface);
}

table.legend_score_table .td_symbol {
    border-bottom: 1px solid var(--string-border);
    border-left: 1px solid var(--string-border);
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
}

table.legend_score_table .td_symbol.first_row {
    border-top: 1px solid var(--string-border);
    border-top-left-radius: 3px;
}

table.legend_score_table .td_symbol.last_row {
    border-bottom-left-radius: 3px;
}

table.legend_score_table .td_name {
    font-size: 11.5px;
    color: var(--string-text-secondary);
    border-bottom: 1px solid var(--string-border);
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
}

table.legend_score_table .td_name.first_row {
    border-top: 1px solid var(--string-border);
}

table.legend_score_table .td_annotation {
    border-bottom: 1px solid var(--string-border);
    padding-left: 3px;
    padding-right: 3px;
    width: 100%;
    font-style: italic;
    font-size: 11.5px;
    color: var(--string-text-muted);
    line-height: 19px;
}

table.legend_score_table .td_annotation.first_row {
    border-top: 1px solid var(--string-border);
}

table.legend_score_table .td_annotation_input_item {
    border-right: 1px solid var(--string-border);
    padding-top: 2px;
    padding-bottom: 2px;
}

table.legend_score_table .td_annotation_input_item.first_row {
    border-top-right-radius: 3px;
}

table.legend_score_table .td_annotation_input_item.last_row {
    border-bottom-right-radius: 3px;
}

table.legend_score_table .td_annotation_linked_item div {
    width: 0;
    min-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.legend_score_table .td_score_dot {
    border-bottom: 1px solid var(--string-border);
    text-align: center;
    line-height: 0;
}

table.legend_score_table .td_score_dot.first_row {
    border-top: 1px solid var(--string-border);
}

table.legend_score_table .td_score {
    padding-left: 3px;
    padding-right: 3px;
    border-bottom: 1px solid var(--string-border);
    border-right: 1px solid var(--string-border);
    font-size: 11.5px;
    color:var(--string-text-secondary);
}

table.legend_score_table .td_score.first_row {
    border-top: 1px solid var(--string-border);
    border-top-right-radius: 3px;
}

table.legend_score_table .td_score.last_row {
    border-bottom-right-radius: 3px;
}

/********************************************************************************************/
/***************************************** Settings *****************************************/
/********************************************************************************************/

div.settings_wrap {
    color: var(--string-text-secondary);
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

div.settings_box_wrap {
    display: inline-block;
    margin-top: 8px;
    margin-bottom: 15px;
}

/********************************************************************************************/
/********************************** ExportsAndTables ****************************************/
/********************************************************************************************/

.exporttable {
    display: table;
}

.exporttable .row {
    display: table-row;
}

.exporttable .row .cell {
    display: table-cell;
}

.exporttable .row:hover .cell {
    background-color: var(--string-surface);
}

div.exporttablecolumn1 {
    padding-top: 2px;
    padding-bottom: 2px;
    display: table-cell;
    text-align: right;
}

div.exporttablecolumn2 {
    display: table-cell;
    padding-right: 8px;
    padding-left: 8px;
    text-align: center;
}

div.exporttablecolumn2 a {
    text-decoration: underline;
    color: var(--string-text-secondary);
}

div.exporttablecolumn3 {
    display: table-cell;
    text-align: left;
    font-style: italic;
    font-size: 12px;
    color: var(--string-text-muted);
}

.interaction_page_network_type_switch {
    /*width: 500px;*/
    line-height: 30px;
    padding-top: 4px;
    padding-bottom: 1px;
    padding-left: 9px;
    padding-right: 9px;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    display: block;
    color: var(--string-text); /*#4d4d4d;*/
    border-bottom: none;
    background-color: var(--string-surface-muted);
    /*margin-left: 3px;*/
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    cursor: pointer;
    transition: all .05s ease-out .05s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.interaction_page_network_type_switch:hover {
    background-color: var(--string-surface-strong);
}

#interaction_table_compact_container {
    margin: 8px;
    min-width: 800px;
}

.interaction_table_compact {
    border-spacing: 0px;
    width: 100%;
}

.interaction_table_compact .row .cell {
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 2px;
}

.interaction_table_compact .row:hover .cell {
    background-color: var(--string-surface);
}

.interaction_table_compact .first_row {
    text-decoration: underline;
    white-space: nowrap;
}

.interaction_table_compact .annotation {
    white-space: nowrap;
    overflow: hidden;
    width: 0px;
    min-width: 100%;
    text-overflow: ellipsis;
    font-style: italic;
    color: var(--string-text-muted);
    font-size: 12px;
}

.interaction_table_compact .link {
    padding-left: 10px;
    padding-right: 4px;
    padding-bottom: 4px;
    background: var(--string-sprite2) no-repeat 0 -310px;
}

.interaction_table_compact .clickable {
    cursor: pointer;
}

.interaction_table_compact .clickable:hover {
    text-decoration: underline;
}

.interaction_title {
    text-align: left;
    font-size: 16px;
    color: var(--string-text-muted);
    font-weight: 400;
    text-transform: uppercase;
}

.legend_score_table .clickable {
    cursor: pointer;
}

.legend_score_table .clickable:hover {
    text-decoration: underline;
}

.interaction_table_compact .link:hover {
    cursor: pointer;
    background-color: var(--string-surface);
}

.interaction_table_compact .asc {
    background: var(--string-sprite2) no-repeat left -356px;
}

.interaction_table_compact .desc {
    background: var(--string-sprite2) no-repeat left -333px;
}

.interaction_table_compact_fetching {
    opacity: 0.4;
}

.interaction_table_page_dial {
    margin-top: 7px;
}

.interaction_table_page_dial span {
    display: inline-block;
    width: 22px;
    height: 14px;
    margin: 0;
    opacity: 0.7;
}

.interaction_table_page_dial .first {
    background: var(--string-sprite2) no-repeat -93px -1px;
}

.interaction_table_page_dial .previous {
    background: var(--string-sprite2) no-repeat -118px -1px;
}

.interaction_table_page_dial .next {
    background: var(--string-sprite2) no-repeat -143px -1px;
}

.interaction_table_page_dial .last {
    background: var(--string-sprite2) no-repeat -168px -1px;
}

.interaction_table_page_dial span:hover {
    cursor: pointer;
    background-color: var(--string-surface);
    opacity: 1;
}

/********************************************************************************************/
/********************************** Enrichment Analysis *************************************/
/********************************************************************************************/

#bottom_page_selector_analysis_container {
    text-align: center;
}

div.disambiguation_pageing_bar {
    background-color: var(--string-surface-muted);
    color: var(--string-text-secondary);
    padding: 5px;
    font-size: 13px;
    text-align: right;
    border: 1px solid var(--string-border);
    border-radius: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
}

div.disambiguation_pageing_bar a {
    color: var(--string-text-secondary);
}

div.disambiguation_pageing_bar div {
    float: left;
}


div.analysis_inner_wrapper {
    color: var(--string-text-secondary);
    display: inline-block;
    min-width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    font-size: 13px;
}

div.analysis_inner_wrapper_collapsed {
    display: none;
}

div.analysis_waiting {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
    margin-left: auto;
    margin-right: auto;
    background-image: var(--string-spinner);
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: left center;
    display: inline-block;
}

div.analysis_failure {
    width: 630px;
    text-align: justify;
    padding-top: 30px;
    padding-left: 90px;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    color: var(--string-danger);
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: left center;
    /*display: inline-block;*/
}

div.analysis_failure a {
    color: var(--string-danger);
    text-decoration: underline;
}

select.background_selector {
    max-width: 250px;
    min-width: 250px;
    color: var(--string-text-secondary);
    border: 1px solid var(--string-border);
    font-family: 'Roboto', sans-serif;
}

div.global_enrichment_outer_wrapper {
    color: var(--string-text-secondary);
    display: inline-block;
    min-width: 800px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    font-size: 13px;
    width: 100%;
}

div.global_enrichment_info_text {
    margin-left:35%;
    margin-top:10px;
    /*margin-bottom:-10px;*/
    color:var(--string-caution);
    font-size:12px;
    font-style:italic;
}



div.global_enrichment_wrapper {
    height: 600px;
    overflow-y: auto;
}

div.global_enrichment_table {
    display: table;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0px;
}

div.enrichment_table {
    display: table;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0px;
    margin-top: 20px;
    width: 900px;
}

div.enrichment_table_headline {
    display: table-cell;
    white-space: nowrap;
    color: var(--string-text-muted);
    background-color: var(--string-surface-muted);
    font-weight: bold;
    padding: 5px;
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
}

div.enrichment_table_headline:first-of-type {
    border-left: 1px solid var(--string-border);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
/*
div.enrichment_table_headline:nth-child(2) {
    width: 100%;
}
*/

div.enrichment_table_headline:last-of-type {
    border-right: 1px solid var(--string-border);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

div.enrichment_table_header {
    display: table-cell;
    white-space: nowrap;
    color: var(--string-text-secondary);
    font-style: italic;
    padding-left: 5px;
    padding-right: 5px;
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
    text-align: left;
    background-color: var(--string-surface);
}

.description_cell {
    min-width: 350px;
}

div.global_enrichment_table_headline {
    display: table-cell;
    white-space: nowrap;
    color: var(--string-text-muted);
    font-weight: bold;
    padding: 5px;
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
    text-align: left;
}

div.global_enrichment_table_headline:first-of-type {
    border-left: 1px solid var(--string-border);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

div.global_enrichment_table_headline:nth-child(2) {
    width: 100%;
}

div.bias_table_headline:last-of-type {
    border-right: 1px solid var(--string-border);
    t-radius: 3px;
    border-bottom-right-radius: 3px;
}

div.bias_table_headline {
    display: table-cell;
    white-space: nowrap;
    color: var(--string-text-muted);
    font-weight: bold;
    padding: 5px;
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
    text-align: left;
}

div.bias_table_headline:first-of-type {
    border-left: 1px solid var(--string-border);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

div.bias_table_headline:nth-child(2) {
    width: 100%;
}

div.bias_text_box {
    vertical-align: top;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
}

div.bias_description_box {
    width: 290px;
    float: left;
    word-break: normal;
}

div.bias_pvalue_box {
    margin-left: 300px;
}

div.bias_info_box {
    margin-top: 15px;
}


a.bias_supsafe {

    border-bottom: 1px solid var(--string-border-strong);
    color: var(--string-text);
    display: inline-block;
    line-height: 11px;
    text-decoration: none;

}

div.global_enrichment_table_headline:last-of-type {
    border-right: 1px solid var(--string-border);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}


div.global_enrichment_table_header {
    display: table-cell;
    white-space: nowrap;
    color: var(--string-text-secondary);
    font-style: italic;
    padding-left: 5px;
    padding-right: 5px;
    border-top: 1px solid var(--string-border);
    border-bottom: 1px solid var(--string-border);
    text-align: left;
    background-color: var(--string-surface);
}


div.th_sortable {
    text-align: center;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    cursor: pointer;
}

div.th_sortable span {
    color: var(--string-text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--string-border-strong);
    padding-left: 10px;
    padding-right: 5px;
    background: var(--string-sprite2) no-repeat 0 -310px;
}

div.th_sortable .asc {
    background: var(--string-sprite2) no-repeat left -356px;
}

div.th_sortable .desc {
    background: var(--string-sprite2) no-repeat left -333px;
}


div.enrichment_table_header:first-of-type {
    border-left: 1px solid var(--string-border);
    border-top-left-radius: 3px;
}

div.enrichment_table_header:last-of-type {
    border-right: 1px solid var(--string-border);
    border-top-right-radius: 3px;
}

div.enrichment_table_content {
    position: relative;
    display: table-cell;
    color: var(--string-text-secondary);
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid var(--string-border);
    text-align: left;
    white-space: nowrap;
}

div.enrichment_table_overflow {
    width: 0;
    min-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


div.enrichment_table_content:first-of-type {
    border-left: 1px solid var(--string-border);
}

div.enrichment_table_content:last-of-type {
    border-right: 1px solid var(--string-border);
}

div.tc_left_padded {
    padding-left: 30px;
}

div.tc_centered {
    text-align: center;
}


div.enrichment_table_content_container {
    display: table-row;
    background-color: var(--string-surface);
}

div.inactive_wait {
    opacity: 0.4;
}

div.enrichment_table_content_container:hover {
    /*background-color: #f5e6e6;
    background-color: #ff0000;*/
    background-color: var(--string-term-hover);
}

div.enrichment_bubble_container {
    float: right;
    display: inline;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 17px;
    height: 16px;
    position: absolute;
    right: 7px;
    visibility: hidden;
}


div.enrichment_table:not(.ET_static) div.enrichment_table_content_container:hover {
    cursor: pointer;
}

div.enrichment_table_node_highlight {
    background: var(--string-brand-tint);
}

div.enrichment_table_selected div {
    /*background: #E6CACA;
    background: #0000FF;
    background: #ffd1d1;*/
    background: var(--string-term-selected);
}

div.enrichment_table_selected .enrichment_bubble_container {
    visibility: visible;
}

/* The bubble is drawn by its SVG; keep the selected-row background off its container. */
div.enrichment_table_selected .ct_bubble_container {
    background: none;
}

div.enrichment_table_more_row {
    display: table-row;
}

div.enrichment_table_more {
    display: table-cell;
    font-style: italic;
    color: var(--string-text-secondary);
    cursor: pointer;
}

div.enrichment_table_less_row {
    display: table-row;
}

div.enrichment_table_less_row div {
    padding-left: 5px;
    font-style: italic;
    color: var(--string-text-secondary);
}

div.enrichment_table_less {
    display: table-cell;
    font-style: italic;
    color: var(--string-text-secondary);
    cursor: pointer;
}

div.enrichments_closing_remarks {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    font-style: italic;
    color: var(--string-text-faint);
    max-width: 700px;
}

div.global_enrichment_table_headline_container {
    display: table-row;
    background-color: var(--string-surface-muted);
}

div.global_enrichment_table_headline_container.expandable:hover {
    background-color: var(--string-surface-strong);
    cursor: pointer;
}

.global_enrichment_table_headline_container div span {
    margin-left: 3px;
    height: 13px;
    width: 13px;
    background-image: var(--string-sprite2);
    background-repeat: no-repeat;
    background-position: -1px -15px;
    display: inline-block;
    position: relative;
    top: 2px;
}

.global_enrichment_table_headline_container.fully_expanded div span {
    background-position: -1px -29px;
}

.global_enrichment_table_headline_container.fully_collapsed div span {
}

div.bias_table_headline_container {
    background-color: var(--string-surface-muted);
    border: 1px solid var(--string-border);
    border-radius: 3px;
    padding: 5px;
    font-weight: bold;
    color: var(--string-text-muted);
    margin-top: 16px;
}

div.bias_table_headline_container.expandable:hover {
    background-color: var(--string-surface-strong);
    cursor: pointer;
}

.bias_table_headline_container span {
    margin-left: 3px;
    height: 13px;
    width: 13px;
    background-image: var(--string-sprite2);
    background-repeat: no-repeat;
    background-position: -1px -15px;
    display: inline-block;
    position: relative;
    top: 2px;
}

.bias_table_headline_container.fully_expanded span {
    background-position: -1px -29px;
}

.bias_table_headline_container.fully_collapsed span {
}

div.global_enrichments_closing_remarks {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    font-style: italic;
    color: var(--string-text-faint);
}


div.enrichments_closing_remarks span {
    font-weight: bold;
}

div.enrichment_nothing_found {
    margin-top: 20px;
    margin-bottom: 20px;
}

div.analysis_table_display_settings_checkbox_wrap {
    display: table-cell;
    font-size: 12px;
    padding-left: 95px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
    vertical-align: middle;
}

div.graph_table_display_settings_checkbox_wrap {
    display: table-cell;
    font-size: 12px;
    padding-left: 35px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
    vertical-align: middle;
}

div.analysis_table_settings_first_cell {
    display:table-cell;
    width: 190px;
    vertical-align: middle;
    text-align: right;
}

.analysis_data_select {
    width: 125px;
    padding-right: 2px;
    margin-top: 4px;
    margin-left: 4px;
}

span.analysis_statistics_warning {
    color: var(--string-caution);
    float: right;
    font-weight: normal;
    font-style: italic;
    font-size: 13px;
}

span.analysis_statistics_explain {
    color: var(--string-text-faint);
    float: right;
    font-weight: normal;
    font-style: italic;
    font-size: 12px;
    padding-top: 4px;
    padding-bottom: 1px;
}

span.analysis_statistics_explain_text {
    text-decoration:underline;
    cursor:pointer;
    /* margin-left: -90px;  centers waiting spinner text  */
}


div.enrichment_statistics_warning {
    width: 400px;
    padding: 5px;
}

div.global_enrichment_table_content_container {
    display: table-row;
    background-color: var(--string-surface);
}

div.global_enrichment_table_content_container:hover {
    background-color: var(--string-term-hover);
    cursor: pointer; 
}

div.global_enrichment_table_content_container_selected {
    background-color: var(--string-term-selected);
}

div.global_enrichment_table_content_container_selected:hover {
    background-color: var(--string-term-selected);
}

div.global_enrichment_table_content_container>div {
    position: relative;
    display: table-cell;
    color: var(--string-text-secondary);
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid var(--string-border);
    white-space: nowrap;
}

div.global_enrichment_table_content_container>div:nth-child(n+3) {
    text-align: center;
}

div.global_enrichment_table_content_container>div>a {
    text-decoration: underline;
    text-decoration-color: var(--string-border-strong);
}

div.global_enrichment_table_content_container>div:first-of-type {
    border-left: 1px solid var(--string-border);
}

div.global_enrichment_table_content_container>div:last-of-type {
    border-right: 1px solid var(--string-border);
}

div.global_enrichment_table_content_container>div>div {
    width: 0;
    min-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


div.bias_table_content_container {
    display: table-row;
    background-color: var(--string-surface);
}

div.bias_table_content_container>div {
    position: relative;
    display: table-cell;
    color: var(--string-text-secondary);
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid var(--string-border);
}

div.bias_table_content_container>div>div>a {
    /*text-decoration: underline;*/
    text-decoration-color: var(--string-border-strong);
    color: var(--string-text-secondary);
    cursor: pointer;
}

div.bias_table_content_container>div:first-of-type {
    border-left: 1px solid var(--string-border);
}

div.bias_table_content_container>div:last-of-type {
    border-right: 1px solid var(--string-border);
}


/********************************************************************************************/
/********************************** Netstat Analysis *************************************/
/********************************************************************************************/

.netstat_wrapper {
    margin-top: 15px;
    margin-bottom: 25px;
    padding-top: 4px;
    padding-bottom: 3px;
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid var(--string-border);
    box-sizing: border-box;
    border-radius: 4px;
    background-color: var(--string-surface);
}

.netstat_table {
    width: 100%;
    display: table;
}

.ppi_enrichment_hint {
    color: var(--string-text-faint);
    font-style: italic;
    text-align: center;
    display: inline-block;
}

.ppi_enrichment_hint a {
    color: inherit;
    text-decoration: underline;
}

.ppi_enrichment_hint span.emphasis {
    font-weight: bold;
}



/********************************************************************************************/
/********************************** Clustering Box ******************************************/
/********************************************************************************************/

.clustering_table
{
    display:  table;
    width:auto;
    background-color:var(--string-surface);
    border-radius: 4px;
    border-spacing:5px;/*cellspacing:poor IE support for  this*/
    border-collapse: collapse;
   /* border-collapse:separate;*/
}

.clustering_table_head
{
   display:table-row;
}

.clustering_table_row
{
   display:table-row;
   border-top:1px solid  var(--string-border-strong);
   width:auto;
   cursor: pointer;
}

.clustering_table_row:hover {
    background-color:var(--string-term-hover);
}

.clustering_table_cell
{
    display:table-cell;
    width:150px;
    background-color:var(--string-surface);
    text-align:center;
    vertical-align:middle;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color:inherit;

}

/*.clustering_table_row:last-child { border-bottom: none; }*/

.ct_cluster_id
{
    width:45px;
}

.ct_cluster_count
{
    width:90px;
}

.ct_cluster_color
{
    width:50px;
}

/* The bubble itself is an SVG (svgelements.nodeBubble); this container carries its size and behaviour. */
.ct_bubble_container {
    position: relative;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
}

.ct_bubble_container .node_bubble {
    display: block;
}

.clustering_table.cluster_focus_active .clustering_table_row:not(.cluster_focus_selected) .node_bubble_color {
    fill: none !important;
}


.ct_cluster_protnames
{
    width:450px;
    overflow:hidden;
    text-align:justify;
    margin-left:10px;
}

.ct_cluster_description {
    margin: 0;
    padding-left: 0;
    text-align: left;
}

.ct_cluster_description li {
    position: relative;
    padding-left: 9px;
}

.ct_cluster_description li::before {
    content: "•";
    position: absolute;
    left: 0;
}

.ct_cluster_gene_list {
    display: block;
    padding-left: 9px;
}





/*******************************************************************************************/
/******************************************** Fusion ***************************************/
/*******************************************************************************************/

.fusion_page {
    text-align: center;
}

.fusion_page h1 {
    text-align: center;
    margin-bottom: 10px;
}

/*******************************************************************************************/
/************************************** Cooccurrence ***************************************/
/*******************************************************************************************/

.cooccurrence_page {
    text-align: center;
}

.cooccurrence_page h1 {
    text-align: center;
    margin-bottom: 10px;
}

/*******************************************************************************************/
/***************************************** Neighborhood ************************************/
/*******************************************************************************************/

.neighborhood_page {
    text-align: center;
}

.neighborhood_page h1 {
    text-align: center;
    margin-bottom: 10px;
}

/*******************************************************************************************/
/***************************************** Coexpression ************************************/
/*******************************************************************************************/

.coexpression_page {
    text-align: center;
}

.coexpression_page h1 {
    text-align: center;
    margin-bottom: 10px;
}

.coexpression_image_container {
    padding-top: 10px;
    padding-bottom: 15px;
}

.coexpression_simplified_table {
    text-align: left;
    font-size: 13px;
}

.coexpression_simplified_table td {
    vertical-align: middle;
    padding: 4px;
}

.coexpression_simplified_table .headline {
    white-space: nowrap;
    background-color: var(--string-surface);
    font-weight: bold;
    color: var(--string-text-secondary);
    padding: 5px;
    border: 1px solid var(--string-border);
    border-radius: 3px;
}

.coexpression_simplified_table .content {
    border: 1px solid var(--string-border);
    border-radius: 3px;
}

.coexpression_info_text {
    font-size: 13px;
}


/*******************************************************************************************/
/****************************************** Textmining *************************************/
/*******************************************************************************************/

.textmining_page h1 {
    text-align: center;
    margin-bottom: 10px;
}

.textmining_page h2 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 20px;
    color: var(--string-brand);
}

.textmining_nothing_found {
    font-size: 15px;
    padding-left: 15px;
    padding-top: 10px;
}

.textmining_truncation_message {
    font-size: 13px;
    padding-left: 25px;
    padding-top: 10px;
    color: var(--string-text-faint);
}

.textmining_truncation_message a {
    font-size: 13px;
    color: var(--string-text-faint);
    text-decoration: underline;
}

li.TV_table_wrap {
    background-color: var(--string-surface);
    border: 1px solid var(--string-border);
    margin-bottom: 1px;
    margin-top: 15px;
    margin-right: 5px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    list-style: none;
    padding-top: 1px;
    padding-bottom: 1px;
    display: table;
    width: 100%;
}

div.TV_row_wrap {
    display: table-row;
}

div.publication_arrow {
    display: table-cell;
    vertical-align: middle;
}

div.publication_arrow span {
    display: inline-block;
    width: 17px;
    height: 17px;
}

li.TV_expanded div.publication_arrow span {
    background: var(--string-sprite2) no-repeat -113px -18px;
}

li.TV_collapsed div.publication_arrow span {
    background: var(--string-sprite2) no-repeat -93px -18px;
}

div.publication_title {
    display: table-cell;
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: top;
    width: 100%;
}

div.publication_linkout {
    display: table-cell;
    vertical-align: top;
}

/* the AI summary buttons (lib/publications.py, cgi_bin/interaction.py): lower than the standard
   .button, with the label centred in the 36 px between the borders; !important, because a.button
   (later in this file) sets its own line-height. The spinner sits right of the label, as in the
   SEARCH button (.button_with_spinner) */
a.text_summary_button {
    float: right;
    height: 38px;
    line-height: 36px !important;
    padding-left: 20px;
    padding-right: 20px;
}

div.ai_summary_text {
    margin-top: 60px;
    text-align: left;
    font-size: 13px;
    color: var(--string-brand-text);
    line-height: 16px;
    font-weight: 400;
}

/* an AI summary appearing (javascript/navigation_and_popup_functions.js, reveal_markup_with_wave): the whole answer
   is put in at once, so the box has its final size and the page around it stays still, and it fades in as a wave
   from the upper left corner, in reading order. The mask is a gradient two and a half times the size of the box,
   opaque at its upper left and transparent at its lower right; sliding it across the box moves the soft edge (half
   the box's diagonal wide) from the upper left corner, at the start, to past the lower right one, at the end. Only
   the mask's opacity counts, not its colour. Without motion (the visitor's system setting), the answer just appears */
.ai_text_reveal {
    -webkit-mask-image: linear-gradient(to bottom right, #000000 40%, transparent 60%);   /* fixed colour: a mask */
    mask-image: linear-gradient(to bottom right, #000000 40%, transparent 60%);           /* fixed colour: a mask */
    -webkit-mask-size: 250% 250%;
    mask-size: 250% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: ai_text_reveal 2s ease-in-out forwards;
}

@keyframes ai_text_reveal {
    from {
        -webkit-mask-position: 100% 100%;
        mask-position: 100% 100%;
    }
    to {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai_text_reveal {
        -webkit-mask-image: none;
        mask-image: none;
        animation: none;
    }
}

div.ai_publication_row {
    cursor: pointer;
}

a.ai_publication_linkout {
    color: var(--string-brand-text);
    text-decoration: underline;
}

div.ai_publication_row:hover {
    background-color:var(--string-surface);
    cursor: pointer;
}


div.textcircle {
  width: 12px; /* Size of the circles */
  height: 12px; /* Size of the circles */
  background-color: var(--string-brand); /* Color of the circles */
  border-radius: 50%; /* Makes the divs circular */
  display: inline-block; /* Puts the circles side by side */
  margin: 2px; /* Adds some space between the circles */
  animation: textpulse 1.2s infinite; /* Applies the pulsating animation */
}


/* Individual animation delays */
.textcircle:nth-child(1) {
  animation-delay: 0s; /* No delay for the first circle */
}

.textcircle:nth-child(2) {
  animation-delay: 0.2s; /* 0.5 seconds delay for the second circle */
}

.textcircle:nth-child(3) {
  animation-delay: 0.4s; /* 1 second delay for the third circle */
}

div.textsmallcircle {
  width: 5px; /* Size of the circles */
  height: 5px; /* Size of the circles */
  background-color: var(--string-brand); /* Color of the circles */
  border-radius: 50%; /* Makes the divs circular */
  display: inline-block; /* Puts the circles side by side */
  margin: 10px 2px 0 0; /* Adds some space between the circles */
  animation: textpulse 1.2s infinite; /* Applies the pulsating animation */
}

/* Individual animation delays */
.textsmallcircle:nth-child(1) {
  animation-delay: 0s; /* No delay for the first circle */
}

.textsmallcircle:nth-child(2) {
  animation-delay: 0.2s; /* 0.5 seconds delay for the second circle */
}

.textsmallcircle:nth-child(3) {
  animation-delay: 0.4s; /* 1 second delay for the third circle */
}

@keyframes textpulse {
  0% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(0.6); /* Slightly increases the size */
  }
  100% {
    transform: scale(1.0);
  }
}



li.publication_match_summary {
    list-style: none;
    text-align: left;
    margin-right: 5px;
    padding-left: 20px;
    font-size: 13px;
}

li.publication_abstract {
    list-style: none;
    text-align: justify;
    margin-right: 5px;
    padding-left: 20px;
    font-size: 13px;
}

span.abbreviation_dots {
    cursor: pointer;
}

span.emphasis_keyword {
    background-color: var(--string-brand-tint);
}

span.fulltext_snippet_fetching_wait {
    padding-left: 20px;
}

div.fulltext_snippet_retrieval_failure {
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: left center;
    display: inline-block;
}

div.fulltext_snippet_retrieval_failure span {
    padding-left: 20px;
    color: var(--string-danger);
}

div.fulltext_snippet_retrieval_failure a {
    color: var(--string-danger);
    text-decoration: underline;
}


span.blinking-cursor {
  font-weight: 1000;
  animation: 1s blink-cursor step-end infinite;
}

@keyframes blink-cursor {
  from, to {
    color: transparent;
  }
  50% {
    color: var(--string-text);
  }
}




/*******************************************************************************************/
/************************************** interpret_input  **********************************/
/*******************************************************************************************/


table.itp_table {
    table-layout:fixed;
    /*min-width:500px;*/
    border-spacing: 0px;
    font-size: 13px;
    color: var(--string-text-secondary);
}

table.itp_table tbody {
  display:block;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 262px;
}

table.itp_table thead tr {
   display: block;
}


tr.itp_header_row {
    background-color: var(--string-danger-tint);
    color: var(--string-text-muted);
    width: 100%;
    border: var(--string-border-strong) 1px dashed;
}


td.itp_table_cell {
    max-width: 170px;
    min-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid var(--string-border-strong);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 1px;

}

td.itp_table_cell:last-of-type {
    border: none;
}



/*
.itp_table_box {
    height: 300px;
    overflow: scroll;
}
*/

td.itp_button_cell {
    max-width: 180px;
    min-width: 180px;
    vertical-align: middle;
    text-align: center;
    padding-top: 7px;
    padding-bottom: 7px;
}

td.itp_table_identifiers {
    background-color: var(--string-brand-tint);
}

td.itp_table_values {
    background-color: var(--string-success-tint);
}

td.itp_table_problem {
    background-color: var(--string-danger-tint);
}




table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}



.itp_info {
    max-width: 645px;
    color: var(--string-text-secondary);
    font: 12px;
    text-align: left;
    line-height: 1.5;
}


.itp_minibutton {

    background-color: Transparent;
    background-repeat:no-repeat;
    border: dashed;
    border-width: 1px;
    width: 80px;
    height: 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;

}

.itp_span_identifier {
    color: var(--string-brand-text);
}

.itp_span_value {
    color: var(--string-success);
}

.itp_span_problem {
    color: var(--string-danger);
}



.itp_minibutton_value {

    border-color: var(--string-success);
    color: var(--string-success);

}

.itp_minibutton_identifier {

   border-color: var(--string-brand-text);
   color: var(--string-brand-text);

}



.itp_value_active, .itp_minibutton_value:hover {
    background-color: var(--string-success-tint);
}


.itp_identifier_active, .itp_minibutton_identifier:hover {
    background-color: var(--string-brand-tint);
}



/*******************************************************************************************/
/************************************** node_info_popup ************************************/
/*******************************************************************************************/

td.node_info_popup {
    padding: 10px;
    text-align: left;
    width: 300px;
}

td.node_info_popup img {
    padding: 4px;
}

/*******************************************************************************************/
/****************************************** Main Header ************************************/
/*******************************************************************************************/

.main_header {
    z-index: 10;
    position: relative;
    overflow-x: visible;
}

.main_header .container {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    z-index: 10;
    position: relative;
    height: 86px;
}

.main_header .shadow {
    width: 100%;
    min-width: 980px;
    background-image: var(--string-sprite1);
    background-repeat: repeat-x;
    background-position: -1px -148px;
    height: 2px;
}

.main_header h1 {
    font-size: 45px;
    width: 162px;
    height: 86px;
    display: block;
    float: left;
    outline: none;
}

#string_logo {
    position: relative;
    width: 196px;
    height: 45px;
    float: left;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 20.5px;
}

#string_logo picture,
#string_logo img {
    display: block;
    height: 45px;
}

#string_logo img {
    width: auto;
}

#string_logo_left,
#string_logo_right {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 45px;
    display: block;
    outline: none;
    cursor: pointer;
}

#string_logo_left {
    left: 0;
    width: 44px;
}

#string_logo_right {
    left: 44px;
    width: 152px;
}

.main_nav ul {
    text-align: left;
    float: right;
}

.main_nav ul li {
    display: inline;
}

.main_nav ul li a {
    height: 40px;
    line-height: 40px;
    padding-top: 23px;
    padding-bottom: 2px;
    padding-left: 18px;
    padding-right: 18px;
    font-size: 15px;
    display: block;
    color: var(--string-text-secondary);
    border-bottom: none;
    background-color: var(--string-page);
    transition: all .15s ease-in-out .1s;
}

.main_nav ul li div {
    float: left;
}

.main_nav ul li div.active {
    background-image: var(--string-sprite1),var(--string-sprite1),var(--string-sprite1);
    background-repeat: no-repeat,no-repeat,repeat-x;
    background-position: left -150px, right -150px, -177px -150px;
}

.main_nav ul li div:hover {
    background-image: var(--string-sprite1),var(--string-sprite1),var(--string-sprite1);
    background-repeat: no-repeat,no-repeat,repeat-x;
    background-position: left -227px, right -227px, -177px -227px;
}

.main_nav ul li div:hover a {
    background-color: transparent;
    transition: all .15s ease-in-out .1s;
}

.main_nav ul li div.active a, .main_nav ul li div.active:hover a {
    background-color: transparent;
    transition: all .15s ease-in-out .1s;
}

/*******************************************************************************************/
/***************************************** Status Bar *************************************/
/*******************************************************************************************/

.status_bar {
    z-index: 20;
    position: relative;
}

.status_bar .container {
    width: 960px;
    height: 20px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    position: relative;
    z-index: 10;
}

.status_bar .container div.tabbed {
    color: var(--string-text-faint);
    background-color: var(--string-surface-muted);
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px 5px 0 0;
}

.status_bar_left {
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    border: none;
    float: left;
}

.status_bar_left a img {
    vertical-align: middle;
}

.status_bar_right {
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
    border: none;
    float: right;
}

.status_bar_right a.permalink {
    color: var(--string-text-muted);
    text-decoration: none;
    display: inline-block;
    background: var(--string-sprite2) no-repeat 0 -376px;
    padding-left: 17px;
}

.status_bar_right a.permalink:hover {
    color: var(--string-text);
    background: var(--string-sprite2) no-repeat 0 -396px;
}


/*******************************************************************************************/
/***************************************** Main Footer *************************************/
/*******************************************************************************************/

.main_footer {
    position: relative;
    text-align: left;
}

.main_footer .container {
    width: 960px;
    min-height: 160px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding-bottom: 20px;
    padding-top: 50px;
}

.main_footer .elixir_container {
    min-height: 30px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-bottom: 30px;
    margin-top: 10px;
}

.elixir_container .elixir_cdr_message {
    background-image: var(--string-sprite1);
    background-repeat: no-repeat;
    background-size: 29%;
    background-position: left bottom;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
    height: 46px;
    padding-left: 140px;
    color: var(--string-text-faint);
    font-size: 13px;
    line-height: 53px;
}

.main_footer .elixir_cdr_message a {
    color: var(--string-text-faint);
    border-bottom: 1px dotted var(--string-border-strong);
    text-decoration: none;
}

.main_footer .long_tail {
    padding-bottom: 500px;
}

.main_footer .shadow {
    width: 100%;
    min-width: 980px;
    background-image: var(--string-sprite1);
    background-repeat: repeat-x;
    background-position: -1px -138px;
    height: 2px;
}

.main_footer .column {
    float: right;
}

.main_footer .column.first {
    float: left;
}

.main_footer .column h2 {
    font-size: 16px;
    color: var(--string-footer-heading);
    margin-bottom: 13px;
    text-transform: uppercase;
    padding-right: 50px;
    font-weight: 700;
}

.main_footer .column.last h2 {
    padding-right: 10px;
}

.main_footer .column h2 a {
    color: var(--string-footer-heading);
    text-decoration: none;
}

.main_footer .column h2 a:hover {
    color: var(--string-text);
}

.main_footer .column ul {
    float: left;
    width: 100%;
    margin-bottom: 28px;
}

.main_footer .column ul li {
    width: 100%;
    font-size: 13px;
    color: var(--string-text-faint);
    display: block;
}

.main_footer .column ul li a {
    display: block;
    color: var(--string-text-faint);
    text-decoration: none;
    padding-right: 50px;
    padding-top: 8px;
    padding-bottom: 5px;
    font-size: 13px;
    height: 15px;
}

/*
.main_footer .column ul li a.environment {
    color: #8ab880;
}
*/


.main_footer .column ul li:first-of-type a {
    padding-top: 14px;
}

.main_footer .column.first ul li a {
    padding-top: 5px;
}

.main_footer .column.last ul li a {
    padding-right: 10px;
}

.main_footer .column ul li:hover a {
    color: var(--string-text);
}

.main_footer .column ul li:hover a.environment {
    color: var(--string-brand-text);
}



.main_footer .column ul li a.active {
    color: var(--string-brand-text);
    font-weight: 600;
}

.main_footer .column.first ul li {
    height: 34px;
    margin-top: 6px;
}

.main_footer .column.first ul li span {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
}

.main_footer .column.first ul li a {
    vertical-align: middle;
    display: inline-block;
}

#SIB_logo span {
    width: 34px;
    height: 26px;
    background-image: var(--string-sprite1);
    background-position: -331px -1px;
}

#SIB_logo:hover span {
    background-position: -368px -1px;
}

#CPR_logo span {
    width: 61px;
    height: 26px;
    background-image: var(--string-sprite1);
    background-position: -331px -59px;
}

#CPR_logo:hover span {
    background-position: -331px -30px;
}

#EMBL_logo span {
    width: 26px;
    height: 29px;
    background-image: var(--string-sprite1);
    background-position: -395px -30px;
}

#EMBL_logo:hover span {
    background-position: -395px -62px;
}


/*******************************************************************************************/
/*************************************** simple content without menu  **********************/
/*******************************************************************************************/

div.wrapper_simple_content_without_menu h1 {
    margin: 20px !important;
}

div.wrapper_simple_content_without_menu div.footer_text_page_boring {
    margin-bottom: 25px;
}

/*******************************************************************************************/
/*************************************** Footer Sub-pages  *********************************/
/*******************************************************************************************/

div.footer_access_archive_table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

div.footer_access_archive_table .row {
    display: table-row;
}

div.footer_access_archive_table .row:first-of-type .cell {
    font-weight: bold;
    background-color: var(--string-surface-muted);
}

div.footer_access_archive_table .row:hover:not(:first-child) .cell {
    background-color: var(--string-surface-muted);
}

div.footer_access_archive_table .row .cell {
    display: table-cell;
    padding: 5px;
    vertical-align: middle;
    background-color: var(--string-surface);
    border: 1px solid var(--string-border);
    color: var(--string-text-secondary);
}

div.footer_access_archive_table .row .cell a {
    color: var(--string-text-secondary);
}

div.footer_access_archive_table .row .cell:hover a {
    text-decoration: underline;
}

.footer_display_wrap {
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-right: 5px;
}

.footer_display_box {
    font-size: 12px;
}

.footer_display_box > .box_title {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 15px;
    color: var(--string-brand);

}

.footer_display_box > .box {
    padding-bottom: 10px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 0px;
}

.footer_text_page_boring {
    max-width: 850px;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px;
    font-size: 13px;
    color: var(--string-text-secondary);
    line-height: 160%;
    text-align: left;
}

.string_brand_row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 170px;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

.string_brand_item {
    min-width: 0;
    text-align: center;
}

.string_brand_preview {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 90px;
    margin-bottom: 4px;
    padding: 6px;
    border-radius: 4px;
    background-color: var(--string-page);
}

.string_brand_preview_dark {
    background-color: var(--string-chrome);
}

.string_brand_preview img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 600px) {
    .string_brand_row {
        grid-template-columns: minmax(0, 1fr) 120px;
    }

    .string_brand_theme {
        grid-column: 1 / -1;
    }
}

.footer_text_page_boring h2:not(:first-child) {
    padding-top: 15px;
}

.footer_text_page_boring p {
    padding-bottom: 7px;
}

.footer_text_page_boring h2 {
    padding-bottom: 7px;
    font-weight: bold;
}

.footer_text_page_boring h2 .floating_explainer {
    float: right;
    font-weight: normal;
    font-size: 11px;
    font-style: italic;
    color: var(--string-text-faint);
    margin-bottom: 2px;
}

.footer_text_page_boring a:not(.button) {
    color: var(--string-text-secondary);
    border-bottom: 1px dotted var(--string-text-secondary);
}

.footer_text_page_boring a:hover:not(.button) {
    color: var(--string-text);
    border-bottom: 1px solid var(--string-text);
}

.footer_text_page_boring div.table {
    display: table;
    width: 100%;
}

.footer_text_page_boring div.table div.row {
    display: table-row;
}

.footer_text_page_boring div.table div.row div.cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
}

.footer_text_page_boring div.separator {
    border-bottom: 1px solid var(--string-border);
}

.footer_text_page_boring .footer_text_page_funding_table .cell {
    vertical-align: bottom;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 12px;
}

.footer_text_page_boring a.image_link {
    border-bottom: none;
    opacity: 0.7;
}

.footer_text_page_boring div.cell:hover a.image_link {
    opacity: 1.0;
    border-bottom: none;
}

.footer_text_page_boring div.cell:hover a:not(.image_link) {
    color: var(--string-text);
    border-bottom: 1px solid var(--string-text);
}

.footer_text_page_boring .button_wrap {
    padding: 20px;
    text-align: center;
}

.footer_text_page_boring .button_wrap a {
    margin-left: 10px;
    margin-right: 10px;
}

table.footer_stats_table {
    border: none;
    padding: 0px;
}

table.footer_stats_table tr td:first-child {
    text-align: right;
}

table.footer_stats_table tr.sum_total td span {
    border-top: 1px solid var(--string-border);
    font-style: italic;
    padding-top: 4px;
}

table.footer_stats_table tr.sum_total td {
    padding-top: 4px;
}

table.footer_content_table td {
    text-align: center;
    vertical-align: bottom;
}

a.linkout_external_page {
    padding-left: 16px;
    margin-left: 5px;
    background: var(--string-surface) var(--string-sprite2) no-repeat 0 -416px;
}

a.linkout_external_page:hover {
    background: var(--string-surface) var(--string-sprite2) no-repeat 0 -436px;
}

table.footer_contribution_table {
    width: 100%;
}

table.footer_contribution_table tr:not(:last-child) td {
    padding-bottom: 20px;
    vertical-align: top;
}

.footer_faq_question {
    cursor: pointer;
    font-weight: bold;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.footer_faq_question div {
    cursor: default;
    font-weight: normal;
    display: none;
    padding-bottom: 10px;
}

div:not(:first-child).active_faq {
    margin-top: 10px;
}

.active_faq div {
    cursor: default;
    font-weight: normal;
    display: block;
}

span.code_example {
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: bold;
}

/*******************************************************************************************/
/*************************************** citation button  **********************************/
/*******************************************************************************************/

.btn-cite {
  align-items: center;
  padding: 1px 8px;
  background-color: var(--string-surface);
  border: 1px solid var(--string-border);
  border-radius: 4px;
  color: var(--string-text-secondary);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cite:hover {
  background-color: var(--string-brand-tint);
  border-color: var(--string-border);
}

.btn-cite svg {
  display: inline;
  vertical-align: middle;
  margin-right: 4px;
}

.pm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--string-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  font-family: system-ui, -apple-system, sans-serif;
}

.pm-modal {
  background: var(--string-surface);
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px var(--string-shadow);
  overflow: hidden;
  animation: pm-fade-in 0.2s ease-out;
}

@keyframes pm-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pm-modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--string-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pm-modal-title {
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: var(--string-text);
}

.pm-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--string-text-muted);
  line-height: 1;
}

.pm-modal-body {
  padding: 20px;
}

.pm-citation-box {
  border: 1px solid var(--string-border);
  padding: 16px;
  min-height: 100px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--string-text);
  margin-bottom: 16px;
  background: var(--string-page);
  word-break: break-word;
}

.pm-modal-footer {
  padding: 12px 16px;
  background: var(--string-page);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--string-border);
}

.pm-format-select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--string-border);
  font-size: 13px;
}

.pm-copy-btn {
  background: var(--string-button);
  color: var(--string-text-on-brand);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.pm-copy-btn:hover {
  background: var(--string-brand-hover);
}

.pm-loading {
  text-align: center;
  padding: 20px;
  color: var(--string-text-muted);
}

.pm-format-label {
  font-size: 12px;
  color: var(--string-text-muted);
  margin-right: 8px;
}

.pm-error {
  color: var(--string-danger);
  text-align: center;
}



/*******************************************************************************************/
/***************************************** Start Page  *************************************/
/*******************************************************************************************/

.site_cover {
    position: relative;
    width: 100%;
    min-width: 980px;
    background: radial-gradient(ellipse at 73% 50%, #327c9d 0%, #195069 38%, #0c3249 75%, #08263a 100%); /* fixed colour */
    margin-top: -2px;
    margin-bottom: -2px;
    overflow: hidden;
}

.site_cover .container {
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding-top: 6vw;
    padding-bottom: 8vw;
    position: relative;
}

@media (max-width: 768px) {
.site_cover .container {
    padding-top: 50px;
    padding-bottom: 80px;
}
}

.site_cover .header_div {
    color: #fff; /* fixed colour */
    text-align: center;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.site_cover .header_div h1 {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 40px;
    margin-top: 15px;
}

.site_cover .header_div h2 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
    margin-top: 15px;
    color: #fff; /* fixed colour */
    line-height: 1.7em;
}

.site_cover .header_div a {
    color: #fff; /* fixed colour */
    display: inline-block;
    pointer-events: auto;
}

.site_cover .header_div a {
    margin: 0;
    width: 170px;
    height: 50px;
    line-height: 50px;
    border: 2px solid rgba(255,255,255,0.3); /* fixed colour */
    background: transparent;
    color: #fff; /* fixed colour */
    text-transform: uppercase;
    font-weight: 400;
    font-size: 18px;
    transition: all .2s ease;
    border-radius: 10px;
}

.site_cover .header_div a:hover {
    border: 2px solid rgba(255,255,255,.6); /* fixed colour */
}

.site_cover .header_div a:active {
    border: 2px solid rgba(255,255,255,1); /* fixed colour */
    background: rgba(255,255,255,0.1); /* fixed colour */
}

#landing_network_sphere {
    width: 3600px;
    height: 1800px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    cursor: grab;
    touch-action: none;
    opacity: 1;
    z-index: 1;
}

#landing_network_sphere.landing_network_sphere_dragging {
    cursor: grabbing;
}

#landing_network_sphere.landing_network_sphere_unavailable {
    display: none;
}

.site_cover_network_reference {
    position: absolute;
    left: clamp(18px, 3vw, 52px);
    bottom: 26px;
    color: rgba(255,255,255,.54); /* fixed colour */
    font-size: 11px;
    line-height: 1.45em;
    z-index: 2;
}

.site_cover_network_reference_title {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,.68); /* fixed colour */
    font-size: 12px;
    margin-bottom: 2px;
}

.site_cover_network_refresh {
    appearance: none;
    border: 0;
    margin: 0 0 0 6px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: inherit;
    background: transparent;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.site_cover_network_refresh svg {
    width: 14px;
    height: 14px;
    transform: translate(-2px, -1px);
}

.site_cover_network_refresh:hover {
    color: rgba(255,255,255,.95); /* fixed colour */
}

.site_cover_network_refresh:focus-visible {
    outline: 1px solid rgba(255,255,255,.8); /* fixed colour */
    outline-offset: 2px;
}

.site_cover_network_reference dl,
.site_cover_network_reference dt,
.site_cover_network_reference dd {
    margin: 0;
}

.site_cover_network_reference div:not(.site_cover_network_reference_title) {
    display: grid;
    grid-template-columns: 105px 1fr;
}

.landing_sphere_tuning {
    position: absolute;
    right: clamp(18px, 3vw, 52px);
    bottom: 26px;
    z-index: 3;
    width: 290px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 98px 1fr 38px;
    gap: 6px 8px;
    padding: 11px;
    color: rgba(255,255,255,.82); /* fixed colour */
    font-size: 11px;
    line-height: 1.25em;
    background: rgba(5,16,25,.74); /* fixed colour */
    border: 1px solid rgba(255,255,255,.15); /* fixed colour */
    border-radius: 5px;
}

.landing_sphere_tuning_title {
    grid-column: 1 / -1;
    color: rgba(255,255,255,.94); /* fixed colour */
    font-size: 12px;
    margin-bottom: 2px;
}

.landing_sphere_tuning label,
.landing_sphere_tuning output {
    align-self: center;
}

.landing_sphere_tuning output {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.landing_sphere_tuning input[type="range"] {
    width: 100%;
    margin: 0;
}

.landing_sphere_tuning textarea {
    grid-column: 1 / -1;
    height: 98px;
    box-sizing: border-box;
    resize: none;
    padding: 5px;
    color: rgba(255,255,255,.88); /* fixed colour */
    font: 10px/1.3 monospace;
    background: rgba(0,0,0,.22); /* fixed colour */
    border: 1px solid rgba(255,255,255,.14); /* fixed colour */
}

@media (max-width: 800px) {
.landing_sphere_tuning {
    display: none;
}
}

/*******************************************************************************************/
/****************************************** Frontpage Headline *****************************/
/*******************************************************************************************/

ul.frontpage-headline {
    display: table;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

ul.frontpage-headline li {
    display: table-cell;
    text-align: left;
    padding: 0 40px;
    box-sizing: border-box;
}

@media (max-width: 756px) {
ul.frontpage-headline li {
    padding: 0 20px;
}
}

ul.frontpage-headline li.lefty {
    text-align: center;
    background-image: var(--string-sprite1);
    background-repeat: no-repeat;
    background-position: right -297px;
}

ul.frontpage-headline li.centery {
    text-align: center;
    background-image: var(--string-sprite1);
    background-repeat: no-repeat;
    background-position: right -297px;
}

ul.frontpage-headline li.righty {
    text-align: center;
}

ul.frontpage-headline li .title {
    display: inline;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
}

ul.frontpage-headline li .value {
    display: inline;
    font-size: 30px;
    margin-top: 10px;
    color: #fff; /* fixed colour */
}

/*******************************************************************************************/
/********************************** main page content **************************************/
/*******************************************************************************************/

div.main_page_content_wrap {
    width: 100%;
    line-height: 0;
    text-align: center;
}

div.main_page_content_container {
    display: inline-block;
    line-height: 100%;
}

div.main_page_content_container h1 {
    color: var(--string-brand);
    font-weight: 700;
    font-size: 26px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}



/*******************************************************************************************/
/*************************************** Main Content **************************************/
/*******************************************************************************************/

.cell {
}

.cell .container {
    width: 990px;
    overflow: visible;
    padding-bottom: 40px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    min-height: 300px;
}

.main_content {
    width: 100%;
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.main_content .menu_wrapper_1 {
    display: table;
}

.main_content .menu_wrapper_2 {
    display: table-row;
}

.main_content .menu_menu {
    width: 280px;
    display: table-cell;
}

.main_content .category_menu {
    width: 220px;
}

.main_content .menu_narrower {
    width: 200px !important;
}

.main_content .menu_content {
    display: table-cell;
    padding-left: 20px;
    padding-right: 15px;
    width: 665px;
}

.main_content .term_menu_content {
    display: table-cell;
    padding-left: 0px;
    padding-right: 0px;
    width: 900px;
}

.main_content .content_wider {
    width: 745px !important;
}

.main_content .menu_content.full_width {
    padding-left: 0;
}

.main_content .menu_content p a:hover {
    text-decoration: underline;
}

.main_content .header_div {
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 2px solid var(--string-surface);
    position: relative;
}

.main_content .menu_content header.no_border {
    border: none;
}

.main_content h1 {
    color: var(--string-brand);
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
}

.main_content h2 {
    width: 100%;
    text-align: left;
    display: block;
    font-size: 18px;
    color: var(--string-text-muted);
}


.main_content h1 .icon {
    height: 34px;
    width: 34px;
    display: inline-block;
    vertical-align: middle;
    background-size: 34px auto;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 20px;
}

.main_content .admin-content {
    min-height: 850px;
}

.row_100 {
    width: 100%;
    overflow: auto;   /* to make sure the element fully encapsulates its content, even when the latter is floating */
}

.row_50 {
    width: 49%;
    float: left;
}

.row_50.right {
    width: 49%;
    float: left;
    margin-left: 2%;
}

.row_25 {
    width: 49%;
    float: left;
}

.row_25.right {
    width: 49%;
    float: left;
    margin-left: 2%;
}

.row_40 {
    width: 40%;
    float: left;
}

.row_40.margin {
    margin-left: 2%;
}

.row_60 {
    width: 58%;
    float: left;
    margin-left: 2%;
}

.row_60.right-margin {
    margin-left: 0;
    margin-right: 2%;
}

.main_content .menu_content > ul,.main_content .menu_content ul.default_list {
    margin-bottom: 20px;
    margin-top: 0;
    float: left;
    width: 100%;
}

.main_content .menu_content > ul > li,.main_content .menu_content ul.default_list li {
    list-style: disc;
    margin-left: 20px;
    padding-left: 10px;
    line-height: 20px;
    margin-bottom: 5px;
}

div.advanced_settings_wrapper {
    min-height: 44px;
    padding: 0;
    width: 100%;
    float: left;
    text-align: left;
    background-repeat: no-repeat;
    color: var(--string-text-faint);
    margin-bottom: 5px;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    box-sizing: border-box;
    transition: .2s linear all;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}


div.advanced_settings_options {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;

}



/*******************************************************************************************/
/************************************ Help / Support Request *******************************/
/*******************************************************************************************/

div.support_ticket_received {
    padding-top: 15px;
    text-align: left;
    max-width: 978px;
    font-size: 13px;
    color: var(--string-text-secondary);
    line-height: 1.5em;
}


/*******************************************************************************************/
/********************************************** Default Menu *******************************/
/*******************************************************************************************/

div.default_menu {
    margin-left: 0;
    margin-top: 25px;
}

div.default_menu div a {
    display: block;
    width: 240px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 5px;
    color: var(--string-text-muted);
    position: relative;
    border-bottom: 1px solid var(--string-surface);
    font-size: 13px;
    box-sizing: border-box;
}

div.default_menu div a.new_span {
    padding-top: 9px;
}

.menu_narrower div a {
    width: 160px !important;
}

div.default_menu div.last a {
    border-bottom: none;
}

div.default_menu div a span:last-child {
    height: 13px;
    width: 13px;
    background-image: var(--string-sprite1);
    background-repeat: no-repeat;
    background-position: -424px -14px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -5px;
}

div.default_menu div a span.new_span {
    color: var(--string-danger);
    font-size: 11px;
    padding-left: 4px;
    vertical-align: super;
}

div.default_menu div a:hover {
    color: var(--string-text);
}

div.default_menu div a:hover span:last-child {
    background-position: -424px -27px;
}

div.default_menu div.active a span:last-child {
    background-position: -424px -1px !important;
}

div.default_menu div a:active {
}

div.default_menu div.active a {
    color: var(--string-brand);
}

div.default_menu div.active a span.new_span {
    color: var(--string-brand);
}


div.default_menu div.active.second_level a {
    background: var(--string-surface);
}

div.default_menu div.active.second_level a#protein_families span:last-child {
    background-image: var(--string-sprite1);
    background-position: -466px -1px !important;
}

/*******************************************************************************************/
/************************************* Second Level menu ***********************************/
/*******************************************************************************************/

div.second_level_wrapper  {
    padding-top: 10px;
    padding-bottom: 10px;
}

div.default_menu div div {
    border-bottom: none;
    width: 100%;
    display: none;
}

div.default_menu div.active div {
    display: block;
}

div.default_menu div.active.second_level div div a {
    border-bottom: none;
    padding-left: 55px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--string-text-muted);
    position: relative;
    background: none;
}

div.default_menu div.active.second_level div div a span {
    right: auto;
    left: 28px;
    height: 100%;
    width: 10px;
    background: none;
    position: absolute;
    display: block;
    border-left: 1px solid var(--string-border);
    top: 0;
    margin: 0;
}

div.default_menu div.active div div.active a {
    border-left: none;
    color: var(--string-brand);
}

div.default_menu div.active div div a:hover span {
    right: auto;
    left: 25px;
    height: 10px;
    width: 10px;
    background-image: var(--string-sprite1);
    background-repeat: no-repeat;
    background-position: -424px -43px !important;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    display: block;
    border: none;
}

div.default_menu div.active div div.active a span {
    right: auto;
    left: 25px;
    height: 10px;
    width: 10px;
    background-image: var(--string-sprite1);
    background-repeat: no-repeat;
    background-position: -424px -43px !important;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    display: block;
    border: none;
}


/*******************************************************************************************/
/************************************* Search Forms ****************************************/
/*******************************************************************************************/

.search_input_wrap {
    display: block;
    width: 100%;
    background: var(--string-surface);
    border: 1px solid var(--string-border);
    box-sizing: border-box;
    border-radius: 4px;
    margin-top: 6px;
    margin-right: 5px;
}

.search_input_box .example_explainer {
    font-size: 12px;
}

.search_input_box h2 {
    font-weight: bold;
}

.category_menu > .box_title {
    width: 100%;
    text-align: left;
    display: block;
    font-size: 18px;
    padding-top: 3%;
    padding-bottom: 2%;
    color: var(--string-text-muted);
}

.search_input_box > .box_title {
    border-bottom: 1px solid var(--string-border);
    width: 100%;
    text-align: center;
    display: block;
    font-size: 18px;
    padding-top: 25px;
    padding-bottom: 25px;
    color: var(--string-text-muted);
}

.search_input_box > .box {
    padding-bottom: 40px;
    padding-top: 30px;
    padding-left: 158px;
    padding-right: 158px;
}

.wrap_search_item {
    position: relative;
    float: left;
    width: 100%;
}

.wrap_search_item span.organism_drop {
    width: 14px;
    height: 14px;
    opacity: 0.45;
    background-image: var(--string-sprite1);
    background-position: -405px -1px;
    display: inline-block;
}


.organism_drop_spinner {
    width: 20px;
    height: 20px;
    margin-top: -2px;
    margin-left: -5px;
}

/* the autocomplete spinner of a search field (lib/navigation.py, displayOrganismChoiceBox and displayTermSearchBox):
   inside the field at its right end, 6px left of the organism dropdown arrow if the field has one.
   Ajax.Autocompleter shows and hides it while the suggestions load.
   top: the field (.input) is 44px high, so 14px centres the 16px spinner on the field's text and on the arrow.
   (The wrapper is a few pixels taller than the field, so top: 50% would put it too low.) */
.wrap_search_item .autocomplete_spinner {
    position: absolute;
    z-index: 200;
    top: 14px;
    right: 10px;
    width: 16px;
    height: 16px;
}

.wrap_search_item .autocomplete_spinner.beside_dropdown_arrow {
    right: 26px;
}

.wrap_search_item .autocomplete_spinner img {
    display: block;
    width: 16px;
    height: 16px;
}

/* while the autocomplete spinner is shown, the field's own clear button (the x of type=search, drawn by Chrome and
   Safari only) is hidden: both sit at the field's right end. Ajax.Autocompleter shows the spinner with display ''
   and hides it with display none, so the spinner's style attribute tells whether it is shown. */
.wrap_search_item:has(> .autocomplete_spinner:not([style*="none"])) > input::-webkit-search-cancel-button {
    display: none;
}

.organism_choice_box_dropdown_container {
    z-index: 200;
    position: absolute;
    top: 13px;
    right: 2px;
    width: 22px;
    vertical-align: middle;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 0px;
}

.organism_choice_box_popup_div {
    z-index: 10000;
    box-sizing: border-box;
    display: none;
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
}

.organism_choice_box_select {
    min-width: 300px;
    min-height: 250px;
    color: var(--string-text-secondary);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    border-color: var(--string-border);
    border-width: 1px;
    border-style: solid;
    margin-top: -20px

}

.wrap_species_choice_box {
    position: relative;
    float: left;
    width:100%;
}

.wrap_search_item .input {
    z-index: 10;
    position: relative;
    background: none;
    font-size: 12px;
}

.wrap_search_item .inputsmall {
    z-index: 10;
    position: relative;
    background: var(--string-surface);
    font-size: 10px;
}

.wrap_search_item .input:focus {
    background: none;
}


/*******************************************************************************************/
/********************************** Organism-choice autocomplete div ***********************/
/*******************************************************************************************/

div.autocomplete {
    position: absolute;
    width: 350px;
    box-sizing: border-box;
    background-color: var(--string-surface);
    border: 1px solid var(--string-border);
    margin: 0px;
    padding: 0px;
    z-index: 10000;
}

div.autocomplete ul {
    position: relative;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    background-color: var(--string-surface);
    z-index: 10001;
}

div.autocomplete ul li {
    position: relative;
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 2px;
    cursor: pointer;
    z-index: 10002;
}

div.autocomplete ul li.selected { background-color: var(--string-brand-tint);}

span.informal {
    color: var(--string-text-muted);
}

span.tissue_name {
    color: var(--string-text);
}


/*******************************************************************************************/
/****************************************** Main Form Styles *******************************/
/*******************************************************************************************/

.row_50 .button,.button.full_width {
    width: 100%;
}

.button_with_spinner div {
    display: inline-block;
    width: 16px;
}

.button_with_spinner img {
    vertical-align: middle;
    margin-top: -3px;
}

.spinner_hidden img {
    display: none;
}

.wrap_input {
    margin-bottom: 10px;
    float: left;
    display: block;
    width: 100%;
}

.search_form_explain {
    padding: 10px 42px 10px 42px;
    border-bottom: 1px solid var(--string-border);
    color: var(--string-text-muted);
    margin-bottom: 7px;
    font-size: 13px;
    text-align: justify;
    line-height: 1.7;
}

.wrap_input_with_examples {
    margin-bottom: 10px;
    position: relative;
    float: left;
    display: block;
    width: 100%;
}

.input {
    height: 44px;
    padding: 12px 20px 12px 10px;
    width: 100%;
    float: left;
    text-align: left;
    background-repeat: no-repeat;
    color: var(--string-text-faint);
    margin-bottom: 5px;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    box-sizing: border-box;
    transition: .2s linear all;
}

.inputsmall {
    height: 28px;
    padding: 5px 7px 5px 3px;
    width: 60%;
    text-align: left;
    background-repeat: no-repeat;
    color: var(--string-text-faint);
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    box-sizing: border-box;
    border-width: 1px;
    transition: border .2s linear all;
    transition: color .2s linear all;
    font-size: 11px;
}

.inputsmall:hover {
    border: 1px solid var(--string-border-strong);
}

.inputsmall:focus {
    color: var(--string-text);
    border-color: var(--string-brand);
    background: var(--string-surface);
}


.tree_search_button {
    height: 22px;
    line-height: 23px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    display: inline-block;
    color: var(--string-text-secondary);
    border-bottom: none;
    background-color: var(--string-surface-muted);
    margin-left: 6px;
    margin-right: 6px;
    padding-bottom: 1px;
    border-radius: 3px;
    transition: all .05s ease-out .05s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.textarea {
    padding: 12px 10px;
    width: 100%;
    float: left;
    text-align: left;
    background-repeat: no-repeat;
    color: var(--string-text-faint);
    margin-bottom: 5px;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    min-height: 90px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    box-sizing: border-box;
    transition: .2s linear all;
}

.input_display_file_upload {
    height: 44px;
    padding: 14px 10px 10px 10px;
    width: 70%;
    float: left;
    text-align: left;
    background-repeat: no-repeat;
    color: var(--string-text-faint);
    margin-bottom: 5px;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    font-size: 12px;
    box-sizing: border-box;
    transition: .2s linear all;
    overflow: auto;
}

.input_display_file_upload:hover {
    border: 1px solid var(--string-border-strong);
}

.input_display_file_upload:focus {
    color: var(--string-text);
    border-color: var(--string-brand);
    border-width: 1px;
    background: var(--string-surface);
}

div.upload_wrapper {
    width: 28%;
    height: 44px;
    float: right;
    position: relative;
    overflow: hidden;
    background: var(--string-button);
    text-align: center;
    border: 1px solid var(--string-button);
    box-sizing: border-box;
    box-shadow: 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,0.05); /* fixed colour */
    transition: all .05s linear;
}

div.upload_wrapper:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1); /* fixed colour */
}

div.upload_wrapper:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}




div.upload_wrapper input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 157px;
    height: 57px;
    opacity: 0;
    overflow: hidden;
}

div.upload_wrapper span {
    color: var(--string-text-on-brand);
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
}


div.upload_cancel_wrapper {
    width: 28%;
    height: 44px;
    position: relative;
    margin-left: 680px;
    overflow: hidden;
    background: var(--string-surface);
    text-align: center;
    border: 1px solid var(--string-border-strong);
    box-sizing: border-box;
    box-shadow: 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,0.05); /* fixed colour */
    transition: all .05s linear;
}

div.upload_cancel_wrapper:hover {
    background-color: var(--string-warning-tint);
    border-color: var(--string-border-strong);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1); /* fixed colour */
}

div.upload_cancel_wrapper:active {
    background-color: var(--string-warning-tint);
    border-color: var(--string-border-strong);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}

div.upload_cancel_wrapper input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 157px;
    height: 57px;
    opacity: 0;
    overflow: hidden;
}

div.upload_cancel_wrapper span {
    color: var(--string-text-muted);
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
}


.select {
    padding: 12px 10px;
    width: 100%;
    float: left;
    text-align: left;
    background-repeat: no-repeat;
    color: var(--string-text-faint);
    margin-bottom: 5px;
    border: 1px solid var(--string-border);
    background: var(--string-surface);
    box-sizing: border-box;
}

span.example_small {
    position: absolute;
    right: 0;
    top: 2px;
    width: 100%;
    text-align: right;
    font-size: 11px;
    color: var(--string-text-faint);
}

a.example_small {
    color: var(--string-text-faint);
    text-decoration: underline;
    cursor: pointer;
}

a.js_active {
    color: var(--string-text-faint);
    text-decoration: underline;
    cursor: pointer;
}

.input:hover,.textarea:hover {
    border: 1px solid var(--string-border-strong);
}

.input:focus,.input.focus,.wrap_input.error .input:focus,.wrap_input.error .input.focus,.textarea:focus,.textarea.focus,.wrap_input.error .textarea:focus,.wrap_input.error .textarea.focus {
    color: var(--string-text);
    border-color: var(--string-brand);
    border-width: 1px;
    background: var(--string-surface);
    font-size: 12px;
}

.wrap_input.error .input,.wrap_input.error .textarea {
    border: 1px solid var(--string-danger);
    background: var(--string-danger-tint);
    margin-bottom: 5px;
}

.label {
    float: left;
    width: 100%;
    color: var(--string-text-muted);
    margin-bottom: 7px;
    font-size: 13px;
}

.as_label {
    float: right;
    text-align: end;
    width: 100%;
    color: var(--string-text-faint);
    margin-bottom: 8px;
    font-size: 11px;
    text-decoration:underline;
    cursor:pointer;
    font-size:12px;
}

.as_label_left{
    float: left;
    text-align: start;
    width: 80%;
    color: var(--string-text-muted);
    font-size: 12px;
    text-decoration:underline;
    cursor:pointer;
    padding-left: 12px;
    margin-top: 10px;
    margin-bottom: 16px;
}

.advanced_plus_sign {
    text-decoration:none;
    display:inline-block;
    font-weight: bold;
}

.wrap_input .error_message {
    display: none;
    font-size: 12px;
    color: var(--string-danger);
    clear: both;
}

.wrap_input.error .error_message {
    display: block;
}

.wrap_input.error .label {
    color: var(--string-danger);
    font-weight: 600;
}

.wrap_checkbox {
    float: left;
    display: block;
    border-bottom: 1px solid var(--string-surface);
    width: 100%;
    padding-bottom: 15px;
    padding-top: 15px;
}

.wrap_checkbox.last {
    border-bottom: none;
}

.checkbox {
    float: right;
}

.checkbox_label {
    float: left;
    width: 50%;
    color: var(--string-text-muted);
    padding-top: 10px;
}


.copy_icon_button {
    position: relative;
    top: 4px;
    left: 6px;
    background: var(--string-brand-tint);
    border-radius: 6px;
    padding-top: 4.5px;
    padding-left: 5px;
    padding-right: 6px;
    padding-bottom: 2px;
    border: var(--string-brand) 1px solid;
    transition: background 0.2s;
}

.copy_icon_button:hover {
    background: var(--string-surface);
}

/*******************************************************************************************/
/** Payload / MyData styling ***************************************************************/
/*******************************************************************************************/

.node_input_edit_headline {
    font-weight: bold;
}

.node_input_edit_item {
    vertical-align: middle;
    width: 95%;
}

.node_input_edit_item label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*******************************************************************************************/
/** Proteome / MyData styling ***************************************************************/
/*******************************************************************************************/

.mydata_up_page {
    font-size: 13px;
}

/*
.mydata_up_page a {
    text-decoration: underline;
}
*/

.mydata_up_page h2 {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: var(--string-brand);
    text-align: center;
}

.mydata_up_page h3 {
    font-size: 15px;
    text-align: center;
    color: var(--string-text);
}

.mydata_up_page table {
    width: 850px;
    font-size: 14px;
    color: var(--string-text-muted);
    margin: auto;
}


.mydata_up_page td {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 5px;
    padding-right: 0px;
    border-bottom: 1px solid var(--string-border);
    text-align:left;
    /*border-right: 20px solid var(--string-page);*/
}

.mydata_up_page tr:last-child td {
    border-bottom: none;
}


.mydata_up_page td:last-child {
    border-right: none;
}


.mydata_up_page td:first-child {
    width:50%;
    font-weight: 200;
}

.mydata_up_page td:nth-child(2) {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mydata_up_page td:nth-child(3) {
    text-align:right;
}




.mydata_up_page td:not(:first-child) {
    white-space: nowrap;
}

.mydata_up_page table tr {
    /*background-color: var(--string-brand);*/
    border-collapse: collapse;
    border: none;
    font-size: 14px
    

}

.up_example_selector {
    margin: auto;
    width: 50%;
    text-align: center;
    font-size: 18px;
    color:var(--string-text-muted);
}

.up_example_selector span {
   cursor: pointer;
}

.up_example_selected {
    border-bottom: solid 2px;
    color: var(--string-text-muted);
}

.interaction_selector {
    margin: auto;
    text-align: center;
    font-size: 18px;
    color:var(--string-text-muted);
    border-bottom: solid 1px var(--string-border);
    display: flex;
    justify-content: left;
}

.interaction_selected {
    background-color:  var(--string-surface-strong);
    cursor: default;
}

.interaction_selected:hover {
    background-color:  var(--string-surface-strong);
    cursor: default;
}

.up_interaction_box {
    margin: auto;
    background-image: linear-gradient(
       var(--string-text-muted) 20%,
       transparent 100%
    );
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    display: none;
}

.up_upload_box {
    font-family: monospace;
    margin:auto;
    width:55%;
    height:100px;
    overflow:hidden;
    text-align: initial;
    background-image: linear-gradient(
       var(--string-text-muted) 20%, 
       transparent 100%
    );
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
    display: none;
}

.up_upload_box_selected {
    display: block;
}

.up_upload_title {
    color: var(--string-text-secondary);
    width:40%;
    height:40px;
    font-size: 25px;
    text-align: center;
}

.up_upload_file_box {
    color: var(--string-text-secondary);
    width:50%;
    height:40px;
    font-size: 25px;
    text-align: center;
    margin: auto;
}

.up_explain_text {
   text-align: justify;
   color: var(--string-text-muted);
   line-height:18px;
}


div.up_upload_status {
   text-align: center;
   margin:auto;
   color:var(--string-text-muted);
}

div.up_hidden_info_box {
    text-align: justify;
    border-style: solid;
    border-width: 2px;
    color: var(--string-warning);
    height:0px;
    overflow:hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    transition: all 2s;
    opacity: 0;
}

div.up_hidden_error_box {
    text-align: justify;
    border-style: solid;
    border-width: 2px;
    color: var(--string-danger);
    height:0px;
    overflow:hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    transition: all 2s;
    opacity: 0;
}


div.up_error_box {
    text-align: justify;
    border-style: solid;
    border-width: 2px;
    color: var(--string-danger);
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

div.up_warning_box {
    text-align: justify;
    border-style: solid;
    border-width: 2px;
    color: var(--string-warning);
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}


div.up_version {
    font-size: 12px;
    color: var(--string-text-faint);
    float: right;
    margin-top: 23px;
}

input.please_wait {
    animation: animate-blinking-color 1.0s linear infinite;
}

div.up_upload_wrapper {
    width: 35%;
    height: 44px;
    margin: auto;
    position: relative;
    overflow: hidden;
    background: var(--string-button);
    text-align: center;
    border: 1px solid var(--string-button);
    box-sizing: border-box;
    box-shadow: 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,0.05); /* fixed colour */
    transition: all .05s linear;
}

div.up_upload_wrapper:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1); /* fixed colour */
}

div.up_upload_wrapper:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}


div.defline_info_box {

    opacity: 0.0;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 0px; 
    overflow: hidden;
    transition: all 0.5s;
 
}

div.up_upload_wrapper input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 157px;
    height: 57px;
    opacity: 0;
    overflow: hidden;
}

div.up_upload_wrapper span {
    font-size: 14px;
    font-weight: bold;
    color: var(--string-text-on-brand);
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
}

span.up_idhighlight {
    background-color: var(--string-warning-tint);
}

span.up_dehighlight {
    background-color: var(--string-brand-tint);
}

span.up_prhighlight {

    background-color: var(--string-danger-tint);
}

span.up_gnhighlight {

    background-color: var(--string-success-tint);
}



span.up_init {
   color:var(--string-text-muted);
   animation: animate-blinking 1.5s linear infinite;
}

span.up_queue {
   color:var(--string-warning);
   animation: animate-blinking 1.5s linear infinite;
}

span.up_run {
   color:var(--string-brand-text);
   animation: animate-blinking 1.5s linear infinite;
}

span.up_orange {
    color:var(--string-warning);
}

span.up_grey {
   color:var(--string-text-muted);
}

span.up_grey_blink {
   color:var(--string-text-muted);
   animation: animate-blinking 1.5s linear infinite;
}


span.up_green {
   color:var(--string-success);
}

span.up_error {
   color:var(--string-danger);
}


@keyframes animate-blinking {
     0% { opacity: 0.0; }
    50% { opacity: 0.7; }
   100% { opacity: 0.0; }
}

@keyframes animate-blinking-color {
     0% { color: transparent; }
    50% { color: rgba(255, 255, 255, 0.7); } /* fixed colour */
   100% { color: transparent; }
}



span.up_link {
    color: var(--string-brand);
    text-decoration: none; 
    border-bottom: solid 2px var(--string-brand);
    font-weight: 600;
}

span.up_link_disabled {
    color: var(--string-text-muted);
    text-decoration: none; 
    font-weight: 600;
}



/*******************************************************************************************/
/****************************************** Buttons ****************************************/
/*******************************************************************************************/

.button {
    display: inline-block;
    height: 48px;
    color: var(--string-text-on-brand);
    font-size: 13px;
    min-width: 120px;
    text-align: center;
    cursor: default;
    border: 1px solid var(--string-button);
    font-weight: 600;
    text-transform: uppercase;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    background-color: var(--string-button);
    box-shadow: 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,0.05); /* fixed colour */
    transition: all .05s linear;
}

a.button {
    line-height: 48px;
}

.button:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1); /* fixed colour */
}

.button:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}

.button:disabled {
    background-color: var(--string-disabled);
    color: var(--string-disabled-text);
    border-color: var(--string-disabled-border);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}


.button_grey {
    border-color: var(--string-border-strong);
    background-color: var(--string-surface-muted);
    color: var(--string-text-secondary);
}

.button_grey:hover {
    border-color: var(--string-border-strong);
    background-color: var(--string-surface-strong);
}

.button_grey:active {
    border-color: var(--string-border-strong);
    background-color: var(--string-surface-strong);
}

.button.small {
    height: 40px;
    line-height: 40px;
}

.button.small.disabled {
   pointer-events: none;
   background-color: var(--string-disabled);
   color: var(--string-disabled-text);
   border-color: var(--string-disabled-border);
}

.button.small .icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -6px;
    margin-right: 15px;
    margin-left: -5px;
}


.minibutton_ge {
    font-size: 12px;
    text-align: center;
    cursor: default;
    color: var(--string-text-muted);
    border: 1px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: var(--string-surface-muted);
    transition: all .05s linear;
}


.minibutton_ge:hover {
    background-color: var(--string-term-hover);
}

.minibutton_ge.on {
    background-color: var(--string-term-selected);
}

.minibutton_ge.on:hover {

    background-color: var(--string-term-hover);
}

.minibutton_hl {
    font-size: 12px;
    text-align: center;
    cursor: default;
    color: var(--string-text-muted);
    border: 1px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: var(--string-surface-muted);
    transition: all .05s linear;
    user-select: none;
    display: none;
}

.minibutton_hl:hover {
    background-color: var(--string-surface);
}

.minibutton_hl.on {
    background-color: var(--string-brand-tint);
}

.minibutton_color {
    transition: all .05s linear;
    user-select: none;
}

.minibutton_color:hover {
    transform: scale(1.12);
}

.minibutton_color.on {
    box-shadow: 0 0 0 1px var(--string-text-secondary);
}

.minibutton_color_user {
    margin-right: 10px;
}

.ct_bubble_container.ct_bubble_small {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

.ct_bubble_container.ct_bubble_small.minibutton_color_user {
    margin-right: 10px;
}

.ct_bubble_container.ct_bubble_tiny {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: top;
}

/* The palette retains this legacy class for its selection behaviour only. */
.autocolorinfo .ct_bubble_container.minibutton_color {
    box-sizing: content-box;
    padding: 0;
    border: 0;
    border-radius: 50%;
    opacity: 1;
}


.minibutton_color_input {
    font-size: 12px;
    text-align: center;
    cursor: default;
    border: 1px;
    border-radius: 4px;
    border: 1px solid var(--string-border-strong);
    box-sizing: border-box;
    margin-right:3px;
    padding-left: 4px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 3px;
    transition: all .05s linear;
    user-select: none;
    display:inline;
    opacity:0.35;
}

.minibutton_color_input:hover {
    opacity: 0.8;
}

.minibutton_color_input:focus-within {
   opacity: 0.8;
}

.colorinput {
    width: 24px;
    background: transparent;
    position: relative;
    top:2px;
}

.colorinput:focus {
   opacity: 0.8;
}

.autocolorinfo {
    width:100%;
    font-size: 11px;
    margin-top: 8px;
    margin-left: 8px;
    margin-bottom:10px;
}

.autocolorinfo.enrichment_color_popup {
    min-width: 250px;
}

@keyframes autocolor-instruction-flash {
    0%, 100% { background-color: transparent; }
    50% { background-color: var(--string-warning-tint); }
}

.autocolor_instruction_flash {
    animation: autocolor-instruction-flash 0.6s ease-in-out 2;
    border-radius: 2px;
}

.autocolor_new_span {
    color: var(--string-danger);
    vertical-align: super;
    font-size: 9px;
    padding-left: 2px;
}

.disablehighlight {
   color: var(--string-brand-text);
   display: none;
   cursor: pointer;
   text-decoration: underline;
}

.minibutton_edge {
    font-size: 15px;
    text-align: center;
    cursor: default;
    border: 1px solid var(--string-border);
    box-sizing: border-box;
    border-radius: 4px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: var(--string-surface-strong);
    box-shadow: 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,0.05); /* fixed colour */
    transition: all .05s linear;
    cursor: pointer;
}



.minibutton_edge:hover {
    background-color: var(--string-surface-muted);
}

.minibutton {
    font-size: 15px;
    text-align: center;
    cursor: default;
    color: var(--string-text-on-brand);
    border: 1px solid var(--string-button);
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: var(--string-button);
    box-shadow: 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,0.05); /* fixed colour */
    transition: all .05s linear;
}

.minibutton:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1); /* fixed colour */
}

.minibutton:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}

.minibutton_grey {
    font-size: 16px;
    text-align: center;
    cursor: default;
    color: var(--string-text-secondary);
    border: 1px solid var(--string-border-strong);
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: var(--string-surface-muted);
    box-shadow: 0 0 0 transparent,inset 0 1px 0 rgba(255,255,255,0.05); /* fixed colour */
    transition: all .05s linear;
}

.minibutton_grey:hover {
    background-color: var(--string-surface-strong);
    border-color: var(--string-border-strong);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1); /* fixed colour */
}

.minibutton_grey:active {
    background-color: var(--string-surface-strong);
    border-color: var(--string-border-strong);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow)
}


/*******************************************************************************************/
/** Cytoscape comm styling  ***************************************************************/
/*******************************************************************************************/


.cs_linkout_div {
    margin-top:-22px;
    margin-right:10px;
    float:right;
}

.cs_image {
    filter: grayscale(100%);
    margin-top: 3px;
    height: 25px;
    width: 25px;
}

.cs_linkout {
    vertical-align:8px;
    position:relative;
    color:var(--string-text-secondary);
    font-size:13px;
    text-decoration:underline;
}

.cs_message {
    vertical-align:super;
    font-size:13px;
    color:var(--string-text-muted);
    font-style:italic;
}

.cs_move_up {
    margin-top: -15px;
}

/*******************************************************************************************/
/********************* Classes for colours set by Python and JavaScript ********************/
/*******************************************************************************************/

/* Colours that the Python pages and the JavaScript used to write inline (style= or bgcolor=).
   Each rule names the files that emit its class. */

/* lib/biases.py: the warning sign next to a bias graph and in its explanation */
.text_warning {
    color: var(--string-warning);
}

/* javascript/navigation_and_popup_functions.js: an error or warning note in a status line (Cytoscape export, proteome upload) */
.text_danger {
    color: var(--string-danger);
}

/* lib/tabcontent.py and javascript/datasettings_dialog_functions.js: the label of an option that cannot be used now */
.is_disabled {
    color: var(--string-text-faint);
}

/* cgi_bin/interaction.py: a network-type tab without evidence for this pair, also when it is clicked
   (beats .interaction_selected); its title keeps the colour of .interaction_title */
.interaction_page_network_type_switch.is_disabled,
.interaction_page_network_type_switch.is_disabled:hover {
    background-color: var(--string-page);
    cursor: default;
    opacity: 0.5;
}

/* lib/utils.py (confidenceLabel, markup = True): the confidence class of a score on the interaction page and in dataset comments */
span.conf_very_high,
span.conf_high {
    color: var(--string-success);
}

span.conf_medium {
    color: var(--string-warning);
}

span.conf_exploratory {
    color: var(--string-danger);
}

/* lib/datasets.py, cgi_bin/uploadnewpayloaddata.py and cgi_bin/editpayloaddata.py: the grey header cells of a record table (bgcolor before) */
.section_header_cell {
    background-color: var(--string-surface-muted);
    color: var(--string-text);
}

/* cgi_bin/pairwisealignment.py, cgi_bin/coexpressiondetails.py and cgi_bin/testpage.py: the grey frame and header cells (bgcolor before) */
td.frame_cell {
    background-color: var(--string-surface-muted);
}

/* lib/publications.py and lib/legends.py (the text-mining legend samples): marked protein names; the text keeps the colour around it */
span.tm_name_mark {
    background-color: var(--string-brand-tint);
    font-weight: bold;
}

/* lib/publications.py: trigger words in full-text excerpts; the dotted underline keeps them apart from the name marks */
span.tm_trigger_mark {
    text-decoration: underline dotted;
    background-color: var(--string-brand-tint);
    cursor: pointer;
}

/* cgi_bin/rendertextsynthesize.py: organism and protein names marked in the AI text synthesis; the text keeps the colour of its paragraph */
span.ai_entity_chip {
    background-color: var(--string-brand-tint);
    font-weight: bold;
}

/* cgi_bin/rendertextsynthesize.py and cgi_bin/renderaitextsummary.py: the quoted sentences below a publication */
div.ai_reference_row {
    background-color: var(--string-warning-tint);
}

/* lib/tabcontent.py: the small edge icons of the 'meaning of network edges' options; their lines draw in currentColor, the white node discs stay */
svg.network_flavor_icon {
    color: var(--string-text-faint);
}

/* lib/disambiguation.py: the vertical hairline between the columns of the candidate lists (protein-family and full-text search steps) */
div.proceed_form_column_divider {
    border-right: 1px solid var(--string-border);
}

/* lib/analysis.py: the vertical divider after a setting in the enrichment graph settings */
div.graph_settings_divider {
    border-right: 2px solid var(--string-border);
}

/* lib/analysis.py: links in the enrichment table rows (term linkout and gene counts), like div.global_enrichment_table_content_container>div>a */
div.enrichment_table_content a {
    text-decoration: underline;
    text-decoration-color: var(--string-border-strong);
}

/* javascript/global_enrichment_functionalities.js: the enrichment term under the mouse on the t-SNE map */
.term_selected {
    background-color: var(--string-term-selected);
}

/* cgi_bin/displaysinglenode.py: the homology selector (Protein Family Information page, COG mode); the views not selected */
td.homology_query_space_selector {
    background-color: var(--string-surface-muted);
}

/* cgi_bin/displaysinglenode.py: the selected view of the homology selector */
td.homology_query_space_selector.selected {
    background-color: var(--string-brand);
}

/* cgi_bin/displaysinglenode.py: the label of the selected view, the fixed dark chrome colour on the brand fill in both themes (beats a.blacknondecorated:link) */
td.homology_query_space_selector.selected a {
    color: var(--string-chrome);
}

/* cgi_bin/colormode.py: the R, G and B fields of the colour popup, each in its channel's ink */
input.colorinput.ch_r {
    color: var(--string-danger);
}

input.colorinput.ch_g {
    color: var(--string-success);
}

input.colorinput.ch_b {
    color: var(--string-brand-text);
}

/* cgi_bin/uploadnewpayloaddata.py, editpayloaddata.py, uploadnewgeneset.py and editloginusergeneset.py:
   the small labels next to form fields ("... or upload a file:") */
.form_hint_label {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: var(--string-text);
}

/* cgi_bin/uploadnewpayloaddata.py and editpayloaddata.py (appendProgressHeader): the step pills above
   the payload forms. 'table' in the selector beats .mydata_page .invisible_table td, which unsets the
   background */
.mydata_page table td.upload_step {
    width: 33%;
    text-align: center;
    padding: 6px;
    border-radius: 3px;
    white-space: nowrap;
    background-color: var(--string-surface-muted);
    color: var(--string-text);
}

.mydata_page table td.upload_step.current {
    font-weight: bold;
}

.mydata_page table td.upload_step.inactive {
    color: var(--string-text-muted);
}

/* cgi_bin/uploadnewgeneset.py: the pageing links keep the body colour (a.js_active alone is faint) */
.mydata_page a.geneset_pageing_button {
    color: var(--string-text);
}

/* cgi_bin/showgeneset.py: the gene list rows alternate per input line between surface and
   surface-muted, and keep their fill on hover, as before (they had inline backgrounds) */
.mydata_page table tr.geneset_row,
.mydata_page table tr.geneset_row:hover {
    background-color: var(--string-surface);
}

.mydata_page table tr.geneset_row.shaded,
.mydata_page table tr.geneset_row.shaded:hover {
    background-color: var(--string-surface-muted);
}

/* javascript/chat_functions.js: the chat's debug output under an answer */
.chat_debug_text {
    color: var(--string-text-muted);
}

/* cgi_bin/chat.py and javascript/chat_functions.js: the 'Example questions' toggler keeps the standard grey,
   also under the mouse, as with its inline background before (the id beats .question_suggestion:hover) */
#question_toggler,
#question_toggler:hover {
    background-color: var(--string-surface-muted);
}

/*******************************************************************************************/
/****************************************** Chat page Styles *******************************/
/*******************************************************************************************/

.chat_page {
    font-size: 16px;
}

.chat_page img {
    width: 100%
}

.chat_page a {
    text-decoration: underline;
    color: var(--string-brand-text);       
}

.chat_page h1 { 
    text-align: center;
    font-size: 24px;         
    color: var(--string-text);          
    font-weight: bold;
    margin: 20px 0 15px 0;
}

.chat_page h2 { 
    font-size: 20px;
    color: var(--string-brand-text);         
    font-weight: bold;
    margin: 18px 0 12px 0;
}

.chat_page h3 { 
    font-size: 16px;
    color: var(--string-brand-text);          
    font-weight: bold;
    margin: 12px 0 8px 0;    
}

.chat_page h4 { 
    font-size: 14px;
    color: var(--string-brand-text);          
    font-weight: bold;
    margin: 8px 0 6px 0;
}

.chat_page p {
    padding: 10px 0 10px 0;
}

.chat_page table {
    max-width: 850px;
    font-size: 14px;
    color: var(--string-text-muted); 
    margin: auto;
    width: 100%; 
    text-align: left;
    padding-bottom: 20px;
}

.chat_page td {
    white-space: normal;
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid var(--string-border);
    text-align:left;
}

.chat_page thead {
    font-weight: 600;
    padding: 10px;
    border-bottom: 1px solid var(--string-border);
    text-align:left;
}

.chat_page table tr {
    border-collapse: collapse;
    border: none;
    font-size: 14px
}

.chat_input_container {
  display: flex;
  align-items: center;  /* vertical alignment */
  gap: 10px;              /* space between textarea and button */
}

.chat_input_wrapper {
    display: flex;
    align-items: center; /* vertical center */
    justify-content: space-between; /* if there's a button */
    border: 1px solid var(--string-border);
    border-radius: 10px;
    /*padding: 5px;*/
    padding-right: 10px;
    background: var(--string-surface);
    min-height: 30px;
    max-height: 300px;
    overflow: hidden;
    width: 90%;
}

.chat_textarea {
    padding: 14px 10px;
    margin: 0;
    width: 95%;
    font-size: 15px;
    line-height: 1.4; /* control vertical spacing */
    color: var(--string-text);
    min-height: 50px;
    max-height: 250px;
    resize: none;
    flex: 1;
    outline: none;
    border: none;
    box-sizing: border-box;
    overflow-y: auto;
    background: transparent;
    vertical-align: middle;
}

.chat_textarea::before {
  content: attr(data-placeholder);
  color: var(--string-text-faint);
  pointer-events: none;
}

/* Only show placeholder when visually empty */
.chat_textarea:not(:empty)::before {
  content: '';
}


#chat_container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--string-page);
}

.chat_question_wrapper {
    display: flex;
    justify-content: flex-end;
}

.chat_answer_wrapper {
    display: flex;
    justify-content: flex-start;
}

.chat_bubble {
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat_question_bubble {
    max-width: 90%;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    background-color: var(--string-button);
    /*border-top-right-radius: 0;*/
    color: var(--string-text-on-brand);
    margin: 10px;
    display: inline-block;
}

.chat_answer_bubble {
    /*background-color: #e9ecef;*/
    /*color: #212529;*/
    /*border-top-left-radius: 0;*/
    /*margin: 10px;*/
    max-width: 95%;
}

.chat_like{
    margin-left: -5px;
    height: 25px;
    width: 25px;
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -7px -2px;
    float: left;
    /*margin-top: 10px;*/
    background-size: 300px;
    border-radius: 5px;
}

.chat_dislike{
    margin-left: 10px;
    height: 25px;
    width: 25px;
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -37px -1px;
    float: left;
    /*margin-top: 10px;*/
    background-size: 300px;
    border-radius: 5px;
}

.chat_copy{
    margin-left: 10px;
    height: 25px;
    width: 25px;
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -90px -25px;
    float: left;
    /*margin-top: 10px;*/
    background-size: 270px;
    border-radius: 5px;
}

.chat_retry{
    margin-left: 10px;
    height: 25px;
    width: 25px;
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -38px -55px;
    float: left;
    /* margin-top: 10px; */
    background-size: 300px;
    border-radius: 5px;
}

.chat_copied{
    margin-left: 10px;
    height: 25px;
    width: 25px;
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -89px -2px;
    float: left;
    /*margin-top: 10px;*/
    background-size: 270px;
    border-radius: 5px;
}

.chat_like:hover{
    background-color: var(--string-surface-muted);
    cursor: pointer;
}
.chat_dislike:hover{
    background-color: var(--string-surface-muted);
    cursor: pointer;
}
.chat_copy:hover{
    background-color: var(--string-surface-muted);
    cursor: pointer;
}
.chat_retry:hover{
    background-color: var(--string-surface-muted);
    cursor: pointer;
}
.chat_liked{
    margin-left: -5px;
    height: 25px;
    width: 25px;
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -7px -29px;
    float: left;
    /*margin-top: 10px;*/
    background-size: 1200%;
    border-radius: 5px;
}

.chat_disliked{
    margin-left: 10px;
    height: 25px;
    width: 25px;
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -38px -28px;
    float: left;
    /*margin-top: 10px;*/
    background-size: 1200%;
    border-radius: 5px;
}

.send_button {
    background-color: var(--string-button);
    border: 1px solid var(--string-button);
    color: var(--string-text-on-brand);
    border-radius: 20px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 12px;
    align-self: center;
    background-image: var(--string-chat-button-icons);   /* images/chat_icons.svg; on dark pages its dark-ink copy */
    background-repeat: no-repeat;
    background-position: -63px -53.5px;
    background-size: 300px;
}

.send_button:hover {
    background-color: var(--string-brand-hover);
}

.send_button.stop {
    background-image: none;
    position: relative;
}

.send_button.stop::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 2.5px solid var(--string-text-on-brand); /* hollow square in the label colour */
    opacity: 0.82;                                    /* the transparency of its former colour #ffffffd1 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.new_chat_button {
    background-color: var(--string-button);
    border: 1px solid var(--string-button);
    color: var(--string-text-on-brand);
    border-radius: 20px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 12px;
    align-self: center;
    background-image: var(--string-chat-button-icons);   /* images/chat_icons.svg; on dark pages its dark-ink copy */
    background-repeat: no-repeat;
    background-position: -61.8px -23.5px;
    background-size: 300px;
}

.new_chat_button:hover {
    background-color: var(--string-brand-hover);
}

.share_chat_button{
    background-color: var(--string-button);
    border: 1px solid var(--string-button);
    color: var(--string-text-on-brand);
    border-radius: 20px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 12px;
    align-self: center;
    background-image: var(--string-chat-button-icons);   /* images/chat_icons.svg; on dark pages its dark-ink copy */
    background-repeat: no-repeat;
    background-position: -132px -54.1px;
    background-size: 300px;
}

.share_chat_button:hover {
    background-color: var(--string-brand-hover);
}

.save_chat_button{
    background-color: var(--string-button);
    border: 1px solid var(--string-button);
    color: var(--string-text-on-brand);
    border-radius: 20px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 12px;
    align-self: center;
    background-image: var(--string-chat-button-icons);   /* images/chat_icons.svg; on dark pages its dark-ink copy */
    background-repeat: no-repeat;
    background-position: -256.3px 2.5px;
    background-size: 300px;
}

.save_chat_button:hover {
    background-color: var(--string-brand-hover);
}

.saved_chat_button{
    background-color: var(--string-button);
    border: 1px solid var(--string-button);
    color: var(--string-text-on-brand);
    border-radius: 20px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    padding: 8px 12px;
    align-self: center;
    background-image: var(--string-chat-button-icons);   /* images/chat_icons.svg; on dark pages its dark-ink copy */
    background-repeat: no-repeat;
    background-position: -256.5px -27px;
    background-size: 300px;
}


.back_icon {
    background-image: url(/images/chat_icons.svg);
    background-size: 410px;
    padding: 12px 0 12px 24px;
    background-position: -225px -6px;
}

.chat_actions {
    margin-top: 8px;
}
.chat_actions button {
    margin-right: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    background-color: var(--string-surface-muted);
}
.chat_actions button:hover {
    background-color: var(--string-surface-strong);
}

.chat-table-container {
  overflow-x: auto;
  max-width: 100%;
}

.chat_answer_content img {
    width: 100%
}

/* Base spacing */
.chat_answer_content ul,
.chat_answer_content ol {
  margin: 0.5em 0 !important;
  padding-left: 20px !important;
}

/* Ensure list items render as list items even if a reset messed with them */
.chat_answer_content li {
  display: list-item !important;
}

/* Unordered lists: bullets at any depth (using child combinators) */
.chat_answer_content ul > li {
  list-style: disc !important;
  list-style-position: outside !important;
}
.chat_answer_content ul ul > li {
  list-style: circle !important;
}
.chat_answer_content ul ul ul > li {
  list-style: square !important;
}

/* Ordered lists: numbers at any depth (direct children only) */
.chat_answer_content ol > li {
  list-style: decimal !important;
  list-style-position: outside !important;
}
.chat_answer_content ol ol > li {
  list-style: lower-alpha !important;
}
.chat_answer_content ol ol ol > li {
  list-style: lower-roman !important;
}

/* Keep suggestion boxes unbulleted */
.chat_answer_content .question_suggestion ul,
.chat_answer_content .question_suggestion ol,
.chat_answer_content .question_suggestion li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.question_suggestion {
    padding: 10px;
    align-items: center;
    border-radius: 20px;
    margin-top: 10px;
    overflow: auto;
    color: var(--string-text-muted);
    font-weight: 500;
    width: fit-content;
    max-width: 100%;
    text-wrap: auto;
    font-size: 13px;
    background-color: var(--string-page);
    animation: fadeBackground 1s ease forwards;
}

.question_suggestion:hover{
    background-color: var(--string-brand-hover);
    color: var(--string-chrome);         /* a fixed dark label on the periwinkle hover, readable in both themes */
    cursor: pointer;
}

.chat_answer_content .chat_mcp_tool ul,
.chat_answer_content .chat_mcp_tool ol,
.chat_answer_content .chat_mcp_tool li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.chat_mcp_tool {
    margin-top: 10px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--string-border);
    background-color: var(--string-page);
    color: var(--string-text-muted);
    font-weight: 500;
    font-size: 13px;
    text-wrap: auto;
    user-select: text;
    cursor: default;
    animation: chatMcpToolAppear 180ms ease-out;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.chat_mcp_tool > summary {
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    list-style: none;
    outline: none;
    transition: background-color 160ms ease;
}

.chat_mcp_tool > summary::-webkit-details-marker {
    display: none;
}

.chat_mcp_tool > summary:hover {
    background-color: var(--string-brand-tint);
}

.chat_mcp_tool_params {
    margin: 0;
    padding: 8px 12px 12px 12px;
    white-space: pre-wrap;
    font-size: 12px;
    color: var(--string-brand);
    cursor: text;
    user-select: text;
    border-top: 1px solid var(--string-border);
}

.chat_mcp_tool_params pre {
    margin: 6px 0 0 0;
    white-space: pre-wrap;
    color: var(--string-brand);
    background: transparent;
    border: none;
    font: inherit;
}

.chat_mcp_tool_status {
    color: var(--string-text-muted);
}

.chat_mcp_tool_calling {
    box-shadow: 0 0 0 1px var(--string-border);
}

.chat_mcp_tool_calling .chat_mcp_tool_status {
    color: var(--string-brand-text);
}

@keyframes chatToolStatusPulse {
    0% { opacity: 1; }
    50% { opacity: 0.35; }
    100% { opacity: 1; }
}

@keyframes chatMcpToolAppear {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.dots_container {
    padding: 20px
}

.chat_stream_progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--string-brand-text);
    font-size: 12px;
}

.chat_stream_progress_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--string-brand);
    animation: chatToolStatusPulse 1.1s ease-in-out infinite;
}

.chat_disclaimer{
    padding-top: 5px;
    color: var(--string-text-muted);
    font-size: 11px;
    text-align: justify;
    line-height: 1.5;
}

.blur-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    background-color: var(--string-overlay);
    z-index: 998;
}

.shareChatMessageBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--string-surface);
    border: 1px solid var(--string-border);
    border-radius: 10px;
    padding: 20px;
    width: 550px;
    /*text-align: center;*/
    z-index: 999;
}

.shareTitle {
    margin-top: 0;
    color: var(--string-brand) !important;
    font-size: 1.4em;
    font-weight: bold;
}

.shareText {
    color: var(--string-text);
    font-size: 1em;
    margin: 15px 0;
}

.shareCloseX {
    position: absolute;
    top: 10px;
    right: 17px;
    font-size: 35px;
    color: var(--string-brand);
    cursor: pointer;
    transition: color 0.2s ease;
}

.pageLink{
    background-color: var(--string-page);
    max-width: 97%;
    border: 1px solid var(--string-border);
    border-right: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    overflow-x: auto;
    padding: 10px;
    border-radius: 10px 0 0 10px;
    cursor: text;
    user-select: text;
}

.question_box {
    display: block;
    flex-wrap: wrap;
}


@keyframes fadeBackground {
    from {
        background-color: var(--string-page); /* page background */
        color: var(--string-page);
    }
    to {
        background-color: var(--string-surface-muted); /* final class background */
        color: var(--string-text-muted);
    }
}

.expand_arrows{
    padding: 10px;
    border-radius: 20px;
    color: var(--string-text-muted);
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -32px -65px;
    background-size: 240px;
}

.collapse_arrows{
    padding: 10px;
    border-radius: 20px;
    color: var(--string-text-muted);
    background-image: url(/images/chat_icons.svg);
    background-repeat: no-repeat;
    background-position: -61px -67px;
    background-size: 240px;
}

/* the spinner sits where the ring of the old oversized GIF was: 18px wide, 2px from the left, centred
   vertically (the GIF was drawn at 34px with a wide transparent margin, at -6px) */
.waiting_span{
    padding: 10px;
    background-image: var(--string-spinner);
    background-size: 18px auto;
    background-repeat: no-repeat;
    background-position: 2px center;
}

.confirmButton{
    background-color: var(--string-button);
    border: 1px solid var(--string-button);
    color: var(--string-text-on-brand);
    border-radius: 5px;
    min-width: 70px;
    height: 30px;
    cursor: pointer;
    font-size: 0.9em;
}

/* the hover of the other brand buttons (.button:hover): a lighter fill, the border keeps its resting colour */
.confirmButton:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-button);
}


.waiting_icon{
    background-color: var(--string-button);
    border: 1px solid var(--string-button);
    border-radius: 20px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 8px 12px;
    background-image: var(--string-spinner-on-brand);   /* string_spinner_on_brand.svg; on dark pages its dark-ink copy */
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: 9px 9px;
}

.windowCopyButton{
    background-color: var(--string-button);
    width: 15%;
    border: 1px solid var(--string-button);
    border-radius: 0 10px 10px 0;
    color: var(--string-text-on-brand);
    font-size: 16px;
}

.windowCopyButton:hover{
    background-color: var(--string-brand-hover);
    cursor: pointer;
}

.windowCopyButton:disabled {
    cursor: not-allowed;        /* Show disabled cursor */
    opacity: 0.6;               /* Dim the button */
    pointer-events: none;       /* Prevent hover effects */
}

code {
    font-size: 12px;
    padding: 0 4px;
    text-wrap: auto;
    display: inline;
    color: var(--string-text-muted);
}

pre {
    margin: 0.75em 0;
    overflow-x: auto;
}

pre code {
    display: block;
    padding: 10px;
    white-space: pre-wrap;
}
/* roboto-light - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;

  src: url('/css/roboto_v1/Roboto-Light.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('/css/roboto_v1/Roboto-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/roboto_v1/Roboto-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/roboto_v1/Roboto-Light.woff') format('woff'), /* Modern Browsers */
       url('/css/roboto_v1/Roboto-Light.ttf') format('truetype'); /* Safari, Android, iOS */

  font-display: swap;
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;

  src: url('/css/roboto_v1/Roboto-Regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('/css/roboto_v1/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/roboto_v1/Roboto-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/roboto_v1/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
       url('/css/roboto_v1/Roboto-Regular.ttf') format('truetype'); /* Safari, Android, iOS */

  font-display: swap;
}

/* roboto-medium - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;

  src: url('/css/roboto_v1/Roboto-Medium.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('/css/roboto_v1/Roboto-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/roboto_v1/Roboto-Medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/roboto_v1/Roboto-Medium.woff') format('woff'), /* Modern Browsers */
       url('/css/roboto_v1/Roboto-Medium.ttf') format('truetype'); /* Safari, Android, iOS */

  font-display: swap;
}

/* roboto-bold - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;

  src: url('/css/roboto_v1/Roboto-Bold.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('/css/roboto_v1/Roboto-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/roboto_v1/Roboto-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/roboto_v1/Roboto-Bold.woff') format('woff'), /* Modern Browsers */
       url('/css/roboto_v1/Roboto-Bold.ttf') format('truetype'); /* Safari, Android, iOS */

  font-display: swap;
}
/***********************************************************
 ******************* FLOATING DIV STYLES *******************
 ***********************************************************/



div.nodeInfoDivStyle {

    background-color: var(--string-surface, #ffffff);
    font-size: 13px;
    position: absolute;

    /* set z-index higher than possible */
    z-index: 10000;

    visibility: hidden;
    display: none; /* otherwise it somehow breaks GE */
    border: 1px solid var(--string-border-strong, #999999);
    border-radius: 4px;
    max-width:800px;

}

a.floatingdivcloselink {
    color: var(--string-text, #333333);
    opacity: 0.3;
}

a.floatingdivcloselink:hover {
    color: var(--string-text, #333333);
    opacity: 0.7;
}

table.movable_div_wrapper {
    border-spacing: 0px;
    border-collapse: collapse;
    border-width: 0px;
    margin:0px 0px 0px 0px;
}

table.movable_div_wrapper tr {
    border-spacing: 0px;
    border-width: 0px;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
}

table.movable_div_wrapper tr td {
    border-spacing: 0px;
    border-width: 0px;
    margin:0px 0px 0px 0px;
}

table.movable_div_title_container {
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    width:100%;
    border-radius:4px 4px 0 0;
}

.movable_div_title_bar {
    cursor: move;
    height: 18px;
    font: bold 12px arial;
    vertical-align: middle;
    text-align: left;
}

.movable_div_closelink_wrapper {
    width: 38px;
    font-size: 10px;
    vertical-align: middle;
    text-align: right;
}