/* 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.
   - Switching the theme reloads a GET page. On form answers (POST), polling pages and pages with
     typed text, javascript/theme_functions.js sets or removes the attribute in place (from
     phase 8; design section 7.5).
   - 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, hover #B6C0F1,
   (the brand hue)    brand #A1ADEC, brand text #6676CC        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
   Green, ink / tint  #1D7027 / #E1F1E1                        #6CC475 / #1E3324
   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 brand text
   #6676CC (same hue) for text: headings, links, active menus. In dark mode, brand text is the
   brand itself.

   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 both themes).
     - 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 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 and success carry meaning. Text on any tint uses
     the token text.
   - Disabled and focus.
     - Disabled = text-faint, on surface-muted where a fill is needed.
     - Focus: input focus borders = brand (periwinkle, as today); an optional future
       :focus-visible ring would use brand-text.
   - Limits.
     - With the final values, body, secondary, muted and state text reach at least 4.5:1 in both
       themes, on page, surface and surface-muted. Until phase 4, the start values marked below
       are today's colours and fall short of this. The deliberate exceptions: brand-text in light
       mode (3.3 to 4.2:1), white labels on brand fills (2.2: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.
     - 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 4'

   A light value with this comment is today's most common value for the role, so that moving the
   stylesheets onto the tokens (phase 3 of the design) changes nothing visible. In phase 4, when
   the reviewed colours merge, it becomes the final value named in the same comment: a one-line
   edit. The dark and the fixed values are already final. palettecheck tokens accepts start values
   until phase 4, and only in the light block. */

/* 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:       #C8C8C8;           /* start: phase 4, final #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:        #A0A0A0;           /* start: phase 4, final #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:           #808080;           /* start: phase 4, final #666666; captions, icons */
    --string-text-faint:           #999999;           /* placeholders, disabled, never essential text */

    --string-brand:                #A1ADEC;           /* brand fills: buttons, active tabs, selections */
    --string-brand-hover:          #B6C0F1;           /* hover and pressed on brand fills */
    --string-brand-text:           #A1ADEC;           /* start: phase 4, final #6676CC; brand-coloured text */
    --string-brand-tint:           #D0D6F6;           /* highlights: marked names, selected list rows */
    --string-text-on-brand:        #FFFFFF;           /* labels on brand fills (white in both themes) */

    --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:               #A00000;           /* start: phase 4, final #C40808; errors, failures */
    --string-danger-tint:          #F7DEE0;           /* error backgrounds */
    --string-warning:              #FF8200;           /* start: phase 4, final #965200; warnings, queued */
    --string-warning-tint:         #FFEDC2;           /* attention backgrounds */
    --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) */

    /* phase 6: the image tokens (logo, navigation sprites, tab icons, spinner) go here, with
       today's URLs as their light values */
}

/* 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-brand:            #A1ADEC;
        --string-brand-hover:      #B6C0F1;
        --string-brand-text:       #A1ADEC;
        --string-brand-tint:       #343A63;
        --string-text-on-brand:    #FFFFFF;

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

        --string-danger:           #FF7B72;
        --string-danger-tint:      #3E2427;
        --string-warning:          #F5A54A;
        --string-warning-tint:     #3A311B;
        --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;

        /* phase 6: the dark image tokens go here, in the same order as in the light block */
    }

    /* phase 6: the rest of the dark-only CSS goes here:
       - the light-island rule: a .light_island inside a dark page paints its own light page
         colour and text colour;
       - the dark-only rules for figures that page JavaScript saves by serialising their own <svg>
         (the viewers, the gene list, coexpression), and for inline SVG style rules whose light
         value must stay global. */
}
/* 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 #ccc;
    height: 1px;
    float: left;
    width: 100%;
}

.categories_hr {
    border: none;
    border-bottom: 1px solid #ccc;
    height: 1px;
    position: relative;
    top: 50%;
    left: 18%;
    width: 130px;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px dashed grey;
  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;
  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: black; text-decoration: none; }
a.blacknondecorated:active { color: black; text-decoration: none; }
a.blacknondecorated:visited { color: black; text-decoration: none; }

a.nondecorated:link { color: black; text-decoration: none; }
a.nondecorated:active { color: black; text-decoration: none; }
a.nondecorated:visited { color: black; text-decoration: none; }
a.nondecorated:hover { color: blue; 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: url(/images/navigation_sprite1.py92924983.png);
    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);
}

/*******************************************************************************************/
/************************************** 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-text);
}

.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 #cfcfcf;
    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: white;
    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 #C6C6C6;
    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: #AAAAAA;
}

.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 #C6C6C6;
    padding: 10px;
}

div.oversized_input_wait {
    margin-top: 150px;
    margin-left: auto;
    margin-bottom: 100px;
    margin-right: auto;
    font-size: 30px;
    color: #b3b3b3;
    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: #b3b3b3;
}

/*********************************************************************************************/
/************************************** "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-text);
}

.mydata_page h3 {
    font-size: 15px;
    text-align: center;
    color: black;
}

.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: #F0F0F0;
}

.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-text);
}

.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-text);
}

.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: #F0F0F0;
}

.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: black;
}

.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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: url(/images/tabs_icons_v3.svg);
    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: #404040;
}

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

.evidence_view_choices_item.selected {
    background-color: var(--string-surface);
    border: 1px solid #5a80b4;
}

.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: url(/images/navigation_sprite2.py92924983.png);
    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: #404040;
}

.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: #5a80b4;
    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-text);
    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-text); */
    color: var(--string-brand-text);
    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-text);
    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;
}

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

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



#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;
    font-size: 11px;
    display: none;
}

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

a.ge_permalink {
    color: #999;
    text-decoration: none;
    display: inline-block;
    background: url(/images/navigation_sprite2.py92924983.png) 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: url(/images/navigation_sprite2.py92924983.png) no-repeat 0 -398px;
}



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

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

.homology_wrapper h2 {
    font-size: 13px;
    color: var(--string-brand-text);
    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: #b3b3b3;
    cursor: pointer;
}

.homology_box .divclickable:hover {
    background-color: grey;
}

.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 darkgrey 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 darkgrey 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 darkgrey 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 darkgrey 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 #d4d4d4;
    background: var(--string-surface);
    margin-top: 8px;
    margin-bottom: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(/images/navigation_sprite2.py92924983.png);
    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 #d4d4d4;
    background: var(--string-surface);
    margin-top: 8px;
    margin-bottom: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(/images/navigation_sprite2.py92924983.png);
    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 #d4d4d4;
    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: url(/images/navigation_sprite2.py92924983.png) 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: url(/images/navigation_sprite2.py92924983.png) no-repeat 0 -138px;
}

input[type=checkbox]:not(old):checked + label::before {
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat 0 -265px;
}

input[type=checkbox]:not(old):not(:disabled):hover:checked + label::before {
    background: url(/images/navigation_sprite2.py92924983.png) 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: url(/images/navigation_sprite2.py92924983.png) no-repeat 0 -94px;
}

input[type=radio]:not(old):not(:disabled):hover:checked + label::before {
    background: url(/images/navigation_sprite2.py92924983.png) 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: white;
    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: white;
    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: #606060;
    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: white;
    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: #c5d0ff;
    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: #ffe2aa;
}

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: #505050;
    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: #606060;
    font-size: 16px;
}

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

div.legend_wrap {
    color: #404040;
    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: url(/images/navigation_sprite2.py92924983.png) no-repeat -8px -1278px;
}

.legend_info_inline_img .protein_halo_and_gradient_r {
    width: 162px;
    height: 32px;
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat -8px -1311px;
}

.legend_info_inline_img .protein_halo_and_gradient_b {
    width: 162px;
    height: 33px;
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat -8px -1343px;
}

.legend_info_inline_img .protein_halo_and_gradient_rb {
    width: 162px;
    height: 33px;
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat -8px -1378px;
}

.round_black_dot {
    width: 8px;
    height: 7px;
    display: inline-block;
    background: url(/images/navigation_sprite2.py92924983.png) 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: #404040;
    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:#404040;
}

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: #404040;
    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: #404040;
}

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: black; /*#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: #dbdbdb;
}

#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: url(/images/navigation_sprite2.py92924983.png) 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: url(/images/navigation_sprite2.py92924983.png) no-repeat left -356px;
}

.interaction_table_compact .desc {
    background: url(/images/navigation_sprite2.py92924983.png) 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: url(/images/navigation_sprite2.py92924983.png) no-repeat -93px -1px;
}

.interaction_table_page_dial .previous {
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat -118px -1px;
}

.interaction_table_page_dial .next {
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat -143px -1px;
}

.interaction_table_page_dial .last {
    background: url(/images/navigation_sprite2.py92924983.png) 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 #C6C6C6;
    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: #404040;
    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: url(/images/string_spinner_for_main_body.gif);
    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: #c40808;
    background-size: 16px auto;
    background-repeat: no-repeat;
    background-position: left center;
    /*display: inline-block;*/
}

div.analysis_failure a {
    color: #c40808;
    text-decoration: underline;
}

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

div.global_enrichment_outer_wrapper {
    color: #404040;
    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:#be7e7e;
    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: #6D6D6D;
    background-color: var(--string-surface-muted);
    font-weight: bold;
    padding: 5px;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
}

div.enrichment_table_headline:first-of-type {
    border-left: 1px solid #c6c6c6;
    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 #c6c6c6;
    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: #6D6D6D;
    font-weight: bold;
    padding: 5px;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
    text-align: left;
}

div.global_enrichment_table_headline:first-of-type {
    border-left: 1px solid #c6c6c6;
    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 #c6c6c6;
    t-radius: 3px;
    border-bottom-right-radius: 3px;
}

div.bias_table_headline {
    display: table-cell;
    white-space: nowrap;
    color: #6D6D6D;
    font-weight: bold;
    padding: 5px;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
    text-align: left;
}

div.bias_table_headline:first-of-type {
    border-left: 1px solid #c6c6c6;
    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 #909090;
    color: #000;
    display: inline-block;
    line-height: 11px;
    text-decoration: none;

}

div.global_enrichment_table_headline:last-of-type {
    border-right: 1px solid #c6c6c6;
    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: #C0C0C0;
    padding-left: 10px;
    padding-right: 5px;
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat 0 -310px;
}

div.th_sortable .asc {
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat left -356px;
}

div.th_sortable .desc {
    background: url(/images/navigation_sprite2.py92924983.png) 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: #ffebeb;
}

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: #E5ECF4;
}

div.enrichment_table_selected div {
    /*background: #E6CACA;
    background: #0000FF;
    background: #ffd1d1;*/
    background: #f3e0e0;
}

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: #A0A0A0;
    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: #D3D3D3;
    cursor: pointer;
}

.global_enrichment_table_headline_container div span {
    margin-left: 3px;
    height: 13px;
    width: 13px;
    background-image: url(/images/navigation_sprite2.py92924983.png);
    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 #c6c6c6;
    border-radius: 3px;
    padding: 5px;
    font-weight: bold;
    color: #6d6d6d;
    margin-top: 16px;
}

div.bias_table_headline_container.expandable:hover {
    background-color: #D3D3D3;
    cursor: pointer;
}

.bias_table_headline_container span {
    margin-left: 3px;
    height: 13px;
    width: 13px;
    background-image: url(/images/navigation_sprite2.py92924983.png);
    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: #A0A0A0;
}


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: Brown;
    float: right;
    font-weight: normal;
    font-style: italic;
    font-size: 13px;
}

span.analysis_statistics_explain {
    color: #A0A0A0;
    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: #E6DADA;
    cursor: pointer; 
}

div.global_enrichment_table_content_container_selected {
    background-color: #D7B5B5;
}

div.global_enrichment_table_content_container_selected:hover {
    background-color: #D7B5B5;
}

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: #C0C0C0;
}

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: #C0C0C0;
    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: #A0A0A0;
    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  #B0B0B0;
   width:auto;
   cursor: pointer;
}

.clustering_table_row:hover {
    background-color:#ffebeb;
}

.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 #D0D0D0;
    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-text);
}

.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: #AAAAAA;
}

.textmining_truncation_message a {
    font-size: 13px;
    color: #AAAAAA;
    text-decoration: underline;
}

li.TV_table_wrap {
    background-color: var(--string-surface);
    border: 1px solid #C6C6C6;
    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: url(/images/navigation_sprite2.py92924983.png) no-repeat -113px -18px;
}

li.TV_collapsed div.publication_arrow span {
    background: url(/images/navigation_sprite2.py92924983.png) 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;
}

a.text_summary_button {
    float: right;
    height: 38px;
    line-height: 30px !important;
    padding-left: 20px;
    padding-right: 20px;
}

div.ai_summary_text {
    margin-top: 60px;
    text-align: left;
    font-size: 13px;
    color: #4b82bf;
    line-height: 16px;
    font-weight: 400;
}

div.ai_publication_row {
    cursor: pointer;
}

a.ai_publication_linkout {
    color: #4b82bf;
    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: #aac4e1; /* 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);
  }
}



span.beta_super {
    color: #df0000;
    font-size: 80%;
    vertical-align: 6px;
}

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: #D0D5F3;
}

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: red;
}

div.fulltext_snippet_retrieval_failure a {
    color: red;
    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: black;
  }
}


.ai_loader {
  width: 20px; 
  aspect-ratio: 1;
  border-radius: 50%;
  display: inline-block;
  margin-left: -10px;
  margin-right: 6px;
  vertical-align: -6px;
  background: 
    radial-gradient(farthest-side,#ffffff 94%,#0000) top/5px 5px no-repeat,
    conic-gradient(#0000 30%,#ffffff);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0);
  animation: l13 1s infinite linear;
  visibility: hidden;
}

@keyframes l13{ 
  100%{transform: rotate(1turn)}
}




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


table.itp_table {
    table-layout:fixed;
    /*min-width:500px;*/
    border-spacing: 0px;
    font-size: 13px;
    color: rgba(0,0,0,0.7);
}

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: rgba(255,0,0,0.3);
    color: rgba(0,0,0,0.5);
    width: 100%;
    border: black 1px dashed;
}


td.itp_table_cell {
    max-width: 170px;
    min-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-right: 1px solid rgba(0,0,0,0.2);
    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: rgba(0,0,255,0.1);
}

td.itp_table_values {
    background-color: rgba(0,255,0,0.1);
}

td.itp_table_problem {
    background-color: rgba(255,0,0,0.3);
}




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



.itp_info {
    max-width: 645px;
    color: rgba(0,0,0,0.7);
    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: rgba(0,0,230,0.7);
}

.itp_span_value {
    color: rgba(20,190,20,0.9);
}

.itp_span_problem {
    color: rgba(255,0,0,0.6);
}



.itp_minibutton_value {

    border-color: rgba(0,190,0,1);
    color: rgba(20,190,20,0.9);

}

.itp_minibutton_identifier {

   border-color: rgba(0,0,230,0.7);
   color: rgba(0,0,230,0.7);

}



.itp_value_active, .itp_minibutton_value:hover {
    background-color: rgba(0,190,0,0.2);
}


.itp_identifier_active, .itp_minibutton_identifier:hover {
    background-color: rgba(0,0,230,0.2);
}



/*******************************************************************************************/
/************************************** 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: url(/images/navigation_sprite1.py92924983.png);
    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_left {
    width: 44px;
    height: 45px;
    display: block;
    float: left;
    text-indent: -9999px;
    outline: none;
    border: none;
    /* both header links show a part of the same logo image (198px wide at 45px height): */
    /* the icon here, and the wordmark in #string_logo_right (shifted by this link's width) */
    background: url(/images/STRING_logo.svg) no-repeat 0px 0px;
    background-size: auto 45px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 20.5px;
}

#string_logo_right {
    width: 152px;
    height: 45px;
    display: block;
    float: left;
    text-indent: -9999px;
    outline: none;
    background: url(/images/STRING_logo.svg) no-repeat -44px 0px;
    background-size: auto 45px;
    cursor: pointer;
    margin-left: 0px;
    margin-top: 20.5px;
}

.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: url(/images/navigation_sprite1.py92924983.png),url(/images/navigation_sprite1.py92924983.png),url(/images/navigation_sprite1.py92924983.png);
    background-repeat: no-repeat,no-repeat,repeat-x;
    background-position: left -150px, right -150px, -177px -150px;
}

.main_nav ul li div:hover {
    background-image: url(/images/navigation_sprite1.py92924983.png),url(/images/navigation_sprite1.py92924983.png),url(/images/navigation_sprite1.py92924983.png);
    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: #999;
    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: #999;
    text-decoration: none;
    display: inline-block;
    background: url(/images/navigation_sprite2.py92924983.png) no-repeat 0 -376px;
    padding-left: 17px;
}

.status_bar_right a.permalink:hover {
    color: var(--string-text);
    background: url(/images/navigation_sprite2.py92924983.png) 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: url(/images/navigation_sprite1.py92924983.png);
    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: #999;
    font-size: 13px;
    line-height: 53px;
}

.main_footer .elixir_cdr_message a {
    color: #999;
    border-bottom: 1px dotted #999;
    text-decoration: none;
}

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

.main_footer .shadow {
    width: 100%;
    min-width: 980px;
    background-image: url(/images/navigation_sprite1.py92924983.png);
    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: #b3b3b3;
    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: #b3b3b3;
    text-decoration: none;
}

.main_footer .column h2 a:hover {
    color: #777;
}

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

.main_footer .column ul li {
    width: 100%;
    font-size: 13px;
    color: #b3b3b3;
    display: block;
}

.main_footer .column ul li a {
    display: block;
    color: #999;
    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: #25822f;
}



.main_footer .column ul li a.active {
    color: #8EC919;
    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: url(/images/navigation_sprite1.py92924983.png);
    background-position: -331px -1px;
}

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

#CPR_logo span {
    width: 61px;
    height: 26px;
    background-image: url(/images/navigation_sprite1.py92924983.png);
    background-position: -331px -59px;
}

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

#EMBL_logo span {
    width: 26px;
    height: 29px;
    background-image: url(/images/navigation_sprite1.py92924983.png);
    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: #F2F2F2;
}

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

div.footer_access_archive_table .row .cell a {
    color: #404040;
}

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-text);

}

.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: #404040;
    line-height: 160%;
    text-align: left;
}

.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: #A0A0A0;
    margin-bottom: 2px;
}

.footer_text_page_boring a:not(.button) {
    color: #404040;
    border-bottom: 1px dotted #404040;
}

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

.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: black;
    border-bottom: 1px solid black;
}

.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) url(/images/navigation_sprite2.py92924983.png) no-repeat 0 -416px;
}

a.linkout_external_page:hover {
    background: var(--string-surface) url(/images/navigation_sprite2.py92924983.png) 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 #dadada;
  border-radius: 4px;
  color: #565656;
  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: #d4d2ff;
  border-color: #dadada;
}

.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: rgba(0, 0, 0, 0.5);
  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 #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pm-modal-title {
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: #111;
}

.pm-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  line-height: 1;
}

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

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

.pm-modal-footer {
  padding: 12px 16px;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
}

.pm-format-select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
}

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

.pm-copy-btn:hover {
  background: #8489f6;
}

.pm-loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.pm-format-label {
  font-size: 12px;
  color: #666;
  margin-right: 8px;
}

.pm-error {
  color: red;
  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%);
    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;
    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;
    line-height: 1.7em;
}

.site_cover .header_div a {
    color: #fff;
    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);
    background: rgba(255,255,255,0);
    color: #fff;
    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);
}

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

#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);
    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);
    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);
}

.site_cover_network_refresh:focus-visible {
    outline: 1px solid rgba(255,255,255,.8);
    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);
    font-size: 11px;
    line-height: 1.25em;
    background: rgba(5,16,25,.74);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px;
}

.landing_sphere_tuning_title {
    grid-column: 1 / -1;
    color: rgba(255,255,255,.94);
    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);
    font: 10px/1.3 monospace;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.14);
}

@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: url(/images/navigation_sprite1.py92924983.png);
    background-repeat: no-repeat;
    background-position: right -297px;
}

ul.frontpage-headline li.centery {
    text-align: center;
    background-image: url(/images/navigation_sprite1.py92924983.png);
    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;
}

/*******************************************************************************************/
/********************************** 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-text);
    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-text);
    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: #999;
    margin-bottom: 5px;
    border: 1px solid #d4d4d4;
    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: #666;
    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: url(/images/navigation_sprite1.py92924983.png);
    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: red;
    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-text);
}

div.default_menu div.active a span.new_span {
    color: var(--string-brand-text);
}


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: url(/images/navigation_sprite1.py92924983.png);
    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: #666;
    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 #ccc;
    top: 0;
    margin: 0;
}

div.default_menu div.active div div.active a {
    border-left: none;
    color: var(--string-brand-text);
}

div.default_menu div.active div div a:hover span {
    right: auto;
    left: 25px;
    height: 10px;
    width: 10px;
    background-image: url(/images/navigation_sprite1.py92924983.png);
    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: url(/images/navigation_sprite1.py92924983.png);
    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: url(/images/navigation_sprite1.py92924983.png);
    background-position: -405px -1px;
    display: inline-block;
}


.organism_drop_spinner {
    width: 20px;
    height: 20px;
    margin-top: -2px;
    margin-left: -5px;
}

.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: #555;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    border-color: #CCC;
    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: #BFCAFF;}

span.informal {
    color: var(--string-text-muted);
}

span.tissue_name {
    color: black;
}


/*******************************************************************************************/
/****************************************** 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 #d4d4d4;
    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 #d4d4d4;
    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 rgba(0,0,0,.3);
}

.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 #d4d4d4;
    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 #d4d4d4;
    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 rgba(0,0,0,.3);
}

.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-brand);
    text-align: center;
    border: 1px solid var(--string-brand);
    box-sizing: border-box;
    box-shadow: 0 0 0 rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all .05s linear;
}

div.upload_wrapper:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1);
}

div.upload_wrapper:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    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 grey;
    box-sizing: border-box;
    box-shadow: 0 0 0 rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all .05s linear;
}

div.upload_cancel_wrapper:hover {
    background-color: #ffb24a;
    border-color: grey;
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1);
}

div.upload_cancel_wrapper:active {
    background-color: #ffb24a;
    border-color: grey;
    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 #d4d4d4;
    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: #A0A0A0;
}

a.example_small {
    color: #A0A0A0;
    text-decoration: underline;
    cursor: pointer;
}

a.js_active {
    color: #A0A0A0;
    text-decoration: underline;
    cursor: pointer;
}

.input:hover,.textarea:hover {
    border: 1px solid rgba(0,0,0,.3);
}

.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 #F34755;
    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: #A5A5A5;
    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: #777777;
    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: #F34755;
    clear: both;
}

.wrap_input.error .error_message {
    display: block;
}

.wrap_input.error .label {
    color: #F34755;
    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: #c6cce7;
    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: #dee0e9;
}

/*******************************************************************************************/
/** 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);
    text-align: center;
}

.mydata_up_page h3 {
    font-size: 15px;
    text-align: center;
    color: black;
}

.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 #cfcfcf;
    display: flex;
    justify-content: left;
}

.interaction_selected {
    background-color:  #cfcfcf;
    cursor: default;
}

.interaction_selected:hover {
    background-color:  #cfcfcf;
    cursor: default;
}

.up_interaction_box {
    margin: auto;
    background-image: linear-gradient(
       var(--string-text-muted) 20%,
       rgba(128, 128, 128, 0) 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%, 
       rgba(128, 128, 128, 0) 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: indianred;
    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: indianred;
    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: #aaa9a9;
    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-brand);
    text-align: center;
    border: 1px solid var(--string-brand);
    box-sizing: border-box;
    box-shadow: 0 0 0 rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all .05s linear;
}

div.up_upload_wrapper:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1);
}

div.up_upload_wrapper:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    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: #fffb0020;
}

span.up_dehighlight {
    background-color: #0011ff10;
}

span.up_prhighlight {

    background-color: #ff000010;
}

span.up_gnhighlight {

    background-color: #00ff0030;
}



span.up_init {
   color:var(--string-text-muted);
   animation: animate-blinking 1.5s linear infinite;
}

span.up_queue {
   color:orange;
   animation: animate-blinking 1.5s linear infinite;
}

span.up_run {
   color:limegreen;
   animation: animate-blinking 1.5s linear infinite;
}

span.up_orange {
    color:orange;
}

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:green;
}

span.up_error {
   color:indianred;
}


@keyframes animate-blinking {
     0% { opacity: 0.0; }
    50% { opacity: 0.7; }
   100% { opacity: 0.0; }
}

@keyframes animate-blinking-color {
     0% { color: rgba(255, 255, 255, 0.0); }
    50% { color: rgba(255, 255, 255, 0.7); }
   100% { color: rgba(255, 255, 255, 0.0); }
}



span.up_link {
    color: var(--string-brand-text);
    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-brand);
    font-weight: 600;
    text-transform: uppercase;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    background-color: var(--string-brand);
    box-shadow: 0 0 0 rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all .05s linear;
}

a.button {
    line-height: 48px;
}

.button:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1);
}

.button:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}

.button:disabled {
    background-color: #D4D4D4;
    border-color: #ADADAD;
    box-shadow: 0 1px 0 var(--string-surface),inset 0 2px 3px var(--string-shadow);
}


.button_grey {
    border-color: #999999;
    background-color: #AAAAAA;
}

.button_grey:hover {
    border-color: #AAAAAA;
    background-color: #CCCCCC;
}

.button_grey:active {
    border-color: #AAAAAA;
    background-color: #CCCCCC;
}

.button.small {
    height: 40px;
    line-height: 40px;
}

.button.small.disabled {
   pointer-events: none;
   background-color: #D6D6D6;
   border-color: #B6B6B6;
}

.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: #6d6d6d;
    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: #e6dada;
}

.minibutton_ge.on {
    background-color: var(--string-term-selected);
}

.minibutton_ge.on:hover {

    background-color: #e6dada;
}

.minibutton_hl {
    font-size: 12px;
    text-align: center;
    cursor: default;
    color: #6d6d6d;
    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: #f0f0f0;
}

.minibutton_hl.on {
    background-color: #E5ECF4;
}

.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 #404040;
}

.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 #797979;
    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: #fff0a6; }
}

.autocolor_instruction_flash {
    animation: autocolor-instruction-flash 0.6s ease-in-out 2;
    border-radius: 2px;
}

.autocolor_new_span {
    color: red;
    vertical-align: super;
    font-size: 9px;
    padding-left: 2px;
}

.disablehighlight {
   color: #93beed;
   display: none;
   cursor: pointer;
   text-decoration: underline;
}

.minibutton_edge {
    font-size: 15px;
    text-align: center;
    cursor: default;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    border-radius: 4px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #cfcfcf;
    box-shadow: 0 0 0 rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,0.05);
    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-brand);
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: var(--string-brand);
    box-shadow: 0 0 0 rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all .05s linear;
}

.minibutton:hover {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1);
}

.minibutton:active {
    background-color: var(--string-brand-hover);
    border-color: var(--string-brand);
    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: #FFFFFF;
    border: 1px solid #C6C6C6;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #C6C6C6;
    box-shadow: 0 0 0 rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all .05s linear;
}

.minibutton_grey:hover {
    background-color: #D6D6D6;
    border-color: #C6C6C6;
    box-shadow: 0 1px 1px var(--string-shadow),inset 0 1px 0 rgba(255,255,255,0.1);
}

.minibutton_grey:active {
    background-color: #D6D6D6;
    border-color: #C6C6C6;
    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:#505050;
    font-size:13px;
    text-decoration:underline;
}

.cs_message {
    vertical-align:super;
    font-size:13px;
    color:#6d6d6d;
    font-style:italic;
}

.cs_move_up {
    margin-top: -15px;
}

/*******************************************************************************************/
/****************************************** Chat page Styles *******************************/
/*******************************************************************************************/

.chat_page {
    font-size: 16px;
}

.chat_page img {
    width: 100%
}

.chat_page a {
    text-decoration: underline;
    color: #3366cc;       
}

.chat_page h1 { 
    text-align: center;
    font-size: 24px;         
    color: #3A3A3A;          
    font-weight: bold;
    margin: 20px 0 15px 0;
}

.chat_page h2 { 
    font-size: 20px;
    color: #5C6BC0;         
    font-weight: bold;
    margin: 18px 0 12px 0;
}

.chat_page h3 { 
    font-size: 16px;
    color: #7E8AC7;          
    font-weight: bold;
    margin: 12px 0 8px 0;    
}

.chat_page h4 { 
    font-size: 14px;
    color: #9AA4D7;          
    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 #ccc;
    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: #aaa;
  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: #f7f7f8;
}

.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-brand);
    /*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-brand);
    border: 1px solid var(--string-brand);
    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: url(/images/chat_icons.svg);
    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 #ffffffd1; /* hollow square */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.new_chat_button {
    background-color: var(--string-brand);
    border: 1px solid var(--string-brand);
    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: url(/images/chat_icons.svg);
    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-brand);
    border: 1px solid var(--string-brand);
    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: url(/images/chat_icons.svg);
    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-brand);
    border: 1px solid var(--string-brand);
    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: url(/images/chat_icons.svg);
    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-brand);
    border: 1px solid var(--string-brand);
    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: url(/images/chat_icons.svg);
    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: #f0f0f0;
}
.chat_actions button:hover {
    background-color: #ddd;
}

.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);
    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 rgba(151, 170, 234, 0.35);
    background-color: #f9f9f9;
    color: #6e6e6e;
    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: rgba(182, 192, 241, 0.35);
}

.chat_mcp_tool_params {
    margin: 0;
    padding: 8px 12px 12px 12px;
    white-space: pre-wrap;
    font-size: 12px;
    color: var(--string-brand-text);
    cursor: text;
    user-select: text;
    border-top: 1px solid rgba(161, 173, 236, 0.18);
}

.chat_mcp_tool_params pre {
    margin: 6px 0 0 0;
    white-space: pre-wrap;
    color: var(--string-brand-text);
    background: transparent;
    border: none;
    font: inherit;
}

.chat_mcp_tool_status {
    color: #7a82a4;
}

.chat_mcp_tool_calling {
    box-shadow: 0 0 0 1px rgba(151, 170, 234, 0.08);
}

.chat_mcp_tool_calling .chat_mcp_tool_status {
    color: #5f74c8;
}

@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: #97aaea;
    font-size: 12px;
}

.chat_stream_progress_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #97aaea;
    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: rgba(255, 255, 255, 0.3);
    z-index: 998;
}

.shareChatMessageBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--string-surface);
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    padding: 20px;
    width: 550px;
    /*text-align: center;*/
    z-index: 999;
}

.shareTitle {
    margin-top: 0;
    color: var(--string-brand-text) !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-text);
    cursor: pointer;
    transition: color 0.2s ease;
}

.pageLink{
    background-color: var(--string-page);
    max-width: 97%;
    border: 1px solid #cfcfcf;
    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: #8f8f8f;
    }
}

.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;
}

.waiting_span{
    padding: 10px;
    background-image: url(/images/oversized_input_spinner.gif);
    background-size: 34px auto;
    background-repeat: no-repeat;
    background-position: -6px;
}

.confirmButton{
    background-color: var(--string-brand);
    border: 1px solid var(--string-brand);
    color: var(--string-text-on-brand);
    border-radius: 5px;
    min-width: 70px;
    height: 30px;
    cursor: pointer;
    font-size: 0.9em;
}


.waiting_icon{
    background-color: var(--string-brand);
    border: 1px solid var(--string-brand);
    border-radius: 20px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 8px 12px;
    background-image: url(/images/spinner_blue_small_transparent.gif);
    background-size: 20px auto;
    background-repeat: no-repeat;
    background-position: 9px 9px;
}

.windowCopyButton{
    background-color: var(--string-brand);
    width: 15%;
    border: 1px solid var(--string-brand);
    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, #A0A0A0);
    border-radius: 4px;
    max-width:800px;

}

a.floatingdivcloselink {
    color: #000000;
    opacity: 0.3;
}

a.floatingdivcloselink:hover {
    color: #000000;
    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;
}