body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff9d2;
}

body.cgi {
	margin: 0;
	padding: 0;
	background: #FFF9D2;
}

body.hgTracks {
	background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7;
}


body.training {
        background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7;
}

#searchHelp {
        display: inline;
        margin-left: 0.5em;
        font-size: 80%;
}

a:link {
        color: #121E9A; 
        text-decoration: underline
}

input[type="submit"], input[type="button"], button {
    border: 1px solid rgba(100, 100, 100, .5);
    border-radius: 3px;
    margin: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #EEE;
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover {
    background-color: #E8E8E8;
}

#trackCtrlTable {
        width: 95%;
        margin-top: 6px;
}

.moveButtonText {
        font-size: 80%
}

.infoText { 
        font-size: 90%;
        text-align: center;
}

.infoText > input {
    margin-left: 3px;
    margin-right: 3px;
    padding-left: 8px;
    padding-right: 8px;
}

#patchNote {
    margin-left: 3em;
}

/* Word wrap if possible staying in width. this allows easy-to-read labels
 * .trackLabelTdBreakAll is added to when any one word is too long to
 * work break and stay in width (RM #34299).
 */
.trackLabelTd {
        /* WARNING: min-width must match hgTracks/hgTracks.c MAX_WIDTH_CHARS */
        min-width: 16ch
        max-width: 22ch;
        vertical-align: top;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;

}

/* For words that exceed max-width */
.trackLabelTdBreakAll {
    word-break: break-all;
}


.trackDeleteIcon {
        margin-right: 4px;
        display: inline;
        cursor: pointer;
}

.controlButtons {
    margin-bottom: 6px;
}

.blueLink {
        color: #121E9A !important; 
        cursor: pointer;
}

span.link {
        color: #121E9A; 
        text-decoration: underline; 
        cursor: pointer
}

td.hotkey {
     font-family: courier;
   }

pre.code {
    font-family: Monaco,'andale mono','lucida console',monospace;
    font-size: 0.8em;
    width:800px;
    margin-left: 40px;
    overflow:auto;
    background-color: rgb(255,255,250);
    border: 1px dashed rgb(230,230,230);
    color: rgb(17,17,17);
    padding:5px;
}

span.inlineCode {
    display: inline;
    font-family: Monaco,'andale mono','lucida console',monospace;
    font-size: 0.9em;
}

.topBlueBar {   font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold;
                color: #D9E4F8; background-color:#2636D1; border: 1px solid black; height:28px; width:100%;
                text-align:center; vertical-align:middle; white-space:nowrap; padding: 0px 10px;}

/* CLASS DECLARATIONS TO MAKE NETSCAPE HAPPY */
.topbar {	font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold; color: #D9E4F8;}
.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FDFCEA; font-size: 10pt; font-weight: 600; }
.hiddenText {background-color: silver}
.normalText {background-color: white}

/* CLASS DECLARATIONS FOR THE REST OF THE BROWSERS */
.topbar { white-space: nowrap; padding: 0px 10px;}
A:link.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
A:visited.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
A:active.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
A:hover.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #EAE360; font-size: 15px; }

A:link.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
A:visited.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
A:active.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
A:hover.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FFFF99; font-size: 10pt; font-weight: 600; }
/*--  #FFFF00;  --*/

A:link.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
A:visited.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
A:active.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
A:hover.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }

A:link.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; }
A:visited.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; }
A:active.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; }
A:hover.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; }
IMG.bigBlue {vertical-align: middle;}
TD.bigBlue {vertical-align: middle;}

A:link.toc { text-decoration: none; color: #0000CC;  }
A:visited.toc { text-decoration: none; color: #0000CC;  }
A:active.toc { text-decoration: none; color: #6666FF;  }
A:hover.toc { text-decoration: none; color: #6666FF; }

A:link IMG { border-width: 0px; padding: 0px; margin: 0px;}
A:visited IMG { border-width: 0px; padding: 0px; margin: 0px;}
A:active IMG {  border-width: 0px; padding: 0px; margin: 0px;}

/* A toggle bar can be seen in hgTracks, under the image groups that can be opened and closed. */
.hubToggleBar {font-weight: bold; color:#FFFFFF; background-color:#536ED3; height:28px; width:100%;
                text-align:center; vertical-align:middle; white-space:nowrap;}
.quickToggleBar {font-weight: bold; color:#FFFFFF; background-color:#108020; height:28px; width:100%;
                text-align:center; vertical-align:middle; white-space:nowrap;}
.errorToggleBar {font-weight: bold; color:#FFFFFF; background-color:#ff0000; height:28px; width:100%;
                text-align:center; vertical-align:middle; white-space:nowrap;}
.nativeToggleBar {font-weight: bold; color:#FFFFFF; background-color:#00457c; height:28px; width:100%;
                text-align:center; vertical-align:middle; white-space:nowrap;}
.toggleButton  {height: 20px; width: 20px; vertical-align:middle;}


/* Web section styles - for use with functions webNewSectionDiv and webEndSectionTablesDiv */
.section {
    background-color: #fffee8; 
    border: 1px solid #888888;
    margin-bottom: 20px;
}

.subsection {
    padding:14px 13px 2px 14px;
}

.centeredStdTbl {
    margin: 10px auto; width: 98%;
}

.stdTblHead {
    background-color: #fcecc0;
}

/* A subheading bar is the light blue bar that appears at the top of web.c section boxes */
.subheadingBar {font-weight: bold; font-size:1.1em; color:#000000; background-color:#D9E4F8;
                width:100%; text-align:left; vertical-align:bottom;
                white-space:nowrap; text-indent:10px; padding-top:2px; }

/* OVERALL DEFINITIONS */
P	{	line-height: 1.2;
		text-align: left;
		color: black;
		margin-left: 0px;
}
P.two	{	line-height: 1.6;
		text-align: left;
		color: black;
		margin-left: 15px;
}
P.leftjustify{	line-height: 1.2;
		text-align: left;
		color: black;
		margin-left: 0px;

	}
UL	{}

TABLE{	border: 0;	}

LI {		line-height: 1.5;
	}


/*** used by CCDS, GENCODE, and other details page in hgc *** */

/* give the tables some breathing room and a consistent width */
TABLE.hgcCcds {
    margin-bottom: 30px;
    width: 500px;
}

TABLE.hgcCcds, TABLE.hgcCcds TH, TABLE.hgcCcds TD {
    border: 1px gray ridge;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    padding-left: 2px;
    padding-right: 4px
}
TABLE.hgcCcds TH {
    white-space: nowrap;
}
TABLE.hgcCcds TD {
    height: 1em;
}
/* table header has white text, include links */
TABLE.hgcCcds THEAD {
    background-color: #2636D1;
    color: #ffffff;
}
TABLE.hgcCcds THEAD * A {
    color: #ffffff;
}
TABLE.hgcCcds TR.hgcCcdsSub {
    background-color: #606ce2;
    color: #ffffff;
}
TABLE.hgcCcds TBODY {
    background-color: #D0FFD0;
}
TABLE.hgcCcds CAPTION {
    caption-side: top;
    text-align: left;
    font: medium bold;
}

/* used by OMIM track table */
table.omimTbl, table.omimTbl th {
    width: 90%;
    table-layout: fixed;
}
table.omimTbl, table.omimTbl th, table.omimTbl td {
    border: 1px solid #909090;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    padding: 5px;
}
table.omimTbl thead {
    font-weight: bold;
    background-color: #fffadb;
}
table.omimTbl tbody {
    background-color: #fffadb;
}

table.hgBlatTable td {
    text-align: left;

}
/* end OMIM table */

/* used by bed extra fields in hgc */
table.bedExtraTbl, table.bedExtraTbl th {
    width: 90%;
    table-layout: fixed;
}
table.bedExtraTbl, table.bedExtraTbl th, table.bedExtraTbl td {
    border: 1px solid #909090;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    padding: 5px;
}
table.bedExtraTbl td:first-child {
    width: 200px;
    font-weight: bold;
}
table.bedExtraTbl tbody {
    background-color: #fffadb;
}

.bedExtraTblNote {
    font-size: small;
    font-weight: normal;
}

.bedExtraTblVal {
        word-wrap: break-word;
}


/* used by transMap details page in hgc */
TABLE.transMap, TABLE.transMap TH, TABLE.transMap TD {
    border: 3px gray ridge;
    border-collapse: collapse;
    text-align: right;
    vertical-align: top;
}
TABLE.transMap THEAD {
    background-color: #a8c7ff;
    text-align: center;
}
TABLE.transMap TBODY {
    background-color: #D0FFD0;
}
TABLE.transMap CAPTION {
    caption-side: top;
    text-align: left;
    font: medium bold;
}
TABLE.transMapLayout TR TD {
    vertical-align: top;
}
TR.transMapLayout {
    vertical-align: top;
}
TR.transMapLeft TD {
    text-align: left;
}
.transMapNoWrap {
    white-space: nowrap;
}
.errorBg {
    background-color: #ff704f;
}
.warnBg {
    background-color: #f8ff30;
}


/* Used by LS-SNP protein structure mappings page in hgc.  Each row has
 * multiple columns that are grouped together with a seperator border */
TABLE.hgcLsSnp {
    border: 2px black solid;
    border-collapse: collapse;
    white-space: nowrap;
}
TABLE.hgcLsSnp TD.hgcLsSnpSep {
    border-right: 2px black solid;
    border-collapse: collapse;
}
TABLE.hgcLsSnp TR, TABLE.hgcLsSnp TD {
    border: 1px gray ridge;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    padding-left: 5px;
    padding-right: 5px;
}

/* Used by hgc json tables */
TABLE.jsonTable, TABLE.jsonTable td, TABLE.jsonTable td {
    border: 1px solid #909090;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    padding: 5px;
}

TABLE.jsonTable thead tr td {
    font-weight: bold;
}

/* hgTrackUi page formatting */
label.trackUiHicLabel
{
    font-style: italic;
    font-size: 0.9em;
}

table.trackUiFilterTable 
{
        padding : 3px;`
        margin-top : 6px;
        border-collapse : collapse;
        border: none;
}

table.trackUiFilterTable tr:first-child td { 
        border-top : 1px solid #CCC;
        padding-top: 8px;
}

table.trackUiFilterTable tr:last-child td { 
        border-bottom : 1px solid #CCC;
        padding-bottom: 5px;
}

table.trackUiFilterTable tr td:first-child { 
        border-left: 1px solid #CCC;
}

table.trackUiFilterTable tr td:last-child { 
        border-right: 1px solid #CCC;
}

table.trackUiFilterTable td { 
        border-left: 1px solid #CCC; 
        padding-left: 8px;
        padding-right: 8px;
        vertical-align:top;
}
table.trackUiFilterTable td:first-child { 
       border-left: none;
}

table.hgTrackUiScoreFilterTable {
       border-spacing : 0;
}

table.hgTrackUiScoreFilterTable tr:first-child td {
       padding-top: 10px;
}
table.hgTrackUiScoreFilterTable tr:last-child td{
       padding-bottom: 10px;
}



label.trackUiHicLabelExpand
{
    font-style: italic;
    font-size: 0.9em;
}

img.trackUiHicLabelArrow
{
    transform: rotate(0deg);
    max-width: 9px;
}

img.trackUiHicLabelArrow.open
{
    transform: rotate(90deg);
}

div.trackUiHicHiddenAttributes
{
    font-size: 0.9em;
    display: none;
    max-height: 10em;
    max-width: 60em;
    overflow: scroll;
    background-color: white;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: solid;
    border-width: thin;
}

/* hgTracks config page groups list */
TABLE.groupLists { background-color: #FFFEE8; width: 50em; }
TABLE.groupLists TR:not(.blueToggleBar):not(.noData) TD { border: 1px solid; }

/* for displaying a basic table - need to condense these to all just the .stdTbl class */
table.chainTbl, .descTbl, .stdTbl {border-collapse: collapse;}
table.chainTbl td, .descTbl td, .descTbl th, .stdTbl td, .stdTbl th {border: 1px solid #666; padding: 5px;}
table.descTbl td.number { text-align: right; }

/* --------------- Newer UI 2.0 styles --------------- */
.ghost { background-color: #EEEEEE; }
.pale  { background-color: #F8F8F8; }
.bgLevel1  { background-color: #FFFEE8; }
.bgLevel2  { background-color: #FFF9D2; }
.bgLevel3  { background-color: #FCECC0; }
.bgLevel4  { background-color: #EED5B7; }

/* Common boxes */
.inputBox  { border: 2px inset #CCCCCC; }
.lineOnTop { border-top: 1px solid #999999; }
.lineOnBottom { border-bottom: 1px solid #999999; }
.blueRoof  { border-top: 2px groove #000088; }
.greenRoof { border-top: 3px groove #008800; }
/*.greenFloor { border-bottom: 3px ridge #008800; }*/
.greenBox  { border: 5px outset #008800; }
.blueBox   { border: 4px inset #000088; } /* cfg box */
.redBox    { border: 3px ridge #AA0000; background-color: #FFF9D2; padding: 10px; margin: 10px; text-align: left; } /* Special alert */

/* Experiments with squeezing giant matrices */
.up45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap;
           position: relative; top: 0.8em;  left: -0.4em;
          -webkit-transform: rotate(-45deg); -webkit-transform-origin:0% 0%;/* for safari, chrome, etc. */
             -moz-transform: rotate(-45deg);    -moz-transform-origin:0% 0%;/* for firefox */
              -ms-transform: rotate(-45deg);     -ms-transform-origin:0% 0%;/* IE 9 */
               -o-transform: rotate(-45deg);      -o-transform-origin:0% 0%;/* Opera */
               display: none;  /* made visible in js code */
           /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE <9 90deg NOT SUPPORTED */
           /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=0.015230,M21=-0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */
         }
.dn45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap;
           position: relative; top: -1.4em; /* left: -0.1em; */
          -webkit-transform: rotate(45deg); -webkit-transform-origin:0% 100%;/* for safari, chrome, etc. */
             -moz-transform: rotate(45deg);    -moz-transform-origin:0% 100%;/* for firefox */
              -ms-transform: rotate(45deg);     -ms-transform-origin:0% 100%;/* IE 9 */
               -o-transform: rotate(45deg);      -o-transform-origin:0% 100%;/* Opera */
               display: none;  /* made visible in js code */
           /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE <9 90deg NOT SUPPORTED */
           /* filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=-0.015230,M21=0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */
         }
/* For a cleaner site, we can remove underlines from links
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}    */

a.cv:link {text-decoration:none;}
a.cv:visited {text-decoration:none;}
a.cv:hover {text-decoration:underline;}
a.cv:active {text-decoration:underline;}
.matCell  { border: 1px solid #FFFEE8; }
/*.matCell:hover  { background-color: #FCECC0; }*/

.hintCol { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; }
.hintRow { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; }
/* halfVis may need to be removed again, but I am hoping it works in DTD 4.01 transitional */
.halfVis { opacity: 0.5; filters.alpha.opacity:50; }

/* waitMask allows waiting on long running javascript using utils.js::waitOnFunction */
.waitMask { display: none; cursor: wait; z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; }
.inOutButton { height: 24px; width: 24px; border-style: outset; } /* A [+][-] button can be toggled by waitOnFunction during long running scripts */

/* imageV2 */
div.dragZoom { cursor: text; }
img.sliceImg { position:relative; border:0; z-index:10;} /* z-index allows highlight beneath img */
div.sliceDiv { overflow:hidden; }
div.highlightItem { opacity:0.7; border-style:none; position:absolute; overflow:hidden; }
div.loading { position: absolute; opacity: 0.75; z-index: 15; 
              background: white url("/images/loading.gif") no-repeat center;   }
#imgTbl map {position: relative; z-index:11}

/* These are for imageV2 sideButtons: */
.btn  { border-style: outset; background-color: #CCCCCC; border-color: #CCCCCC; } /* border-color: works for FF but screws up IE */
.btnN { border-width: 1px 1px 1px 1px; margin: 1px 1px 0px 1px; } /* connect none */
.btnU { border-width: 0px 1px 1px 1px; margin: 0px 1px 0px 1px; } /* connect up */
.btnD { border-width: 1px 1px 0px 1px; margin: 1px 1px 0px 1px; } /* connect down */
.btnL { border-width: 0px 1px 0px 1px; margin: 0px 1px 0px 1px; } /* connect linear */
.btnBlue { background-color:#91B3E6; }
.btnGreen { background-color:#108020 }
.inset { border-style: inset; } /* Flatten button if not configurable */

/* These are for dragReorder: both in imageV2 and in hgTrackUi subtrack list */
.trDrag { background-color: #CCFFCC; }
.dragHandle { cursor: n-resize; }

/* in hgTracks imageV2, left label (and reverse rightLabel) now uses css for red line */
.tdLeft { border-right:1px solid #FFB4B4; }
.tdRight { border-left:1px solid #FFB4B4; }

/* These are duplicates of btnBlue and trDrag but allow useful highlighting to persist after hover */
.blueButtons { background-color:#91B3E6; }
.greenRows { background-color: #CCFFCC; }

/* The are for sortable tables */
table.subtracks { overflow: visible; white-space: nowrap; border: 1px solid #FFFEE8; }
table.subtracks table { white-space: normal; }
tr.sortable { background-color: #FCECC0; }
th.sortable { color: #0000FF; }
th:hover.sortable { background-color: #CCFFCC; cursor: pointer; }
tbody.sorting { color: #DDDDDD; cursor: wait;  }

/* For color selector inputs */
input[type=color] { padding: 0px; }

/* tr:hover.found { color: #000088; } */

.filterBy { display: none; } /* All filterBy's should be converted to dropdownchecklists by document.ready(). */

.noscript {
        background: none repeat scroll 0 0 #FFFF90;
        border-color: #CFCFCF;
        border-style: solid;
        border-width: 0 0 1px;
        color: #2F2F2F;
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
        margin: 0;
        padding: 0;
}

.noscript .noscript-inner {
        background:url("/images/caution.gif") no-repeat scroll 20px 50% transparent;
        margin:0 auto;
        padding:12px 0;
        width:960px;
        text-align: center;
}

.noscript p {
        margin: 0;
        text-align: center;
}

.clickable:hover { cursor: pointer; }
.fauxInput  { border: 2px inset #CCCCCC; background-color: #fff; font-size: 10pt; display: inline-block; }
div.disabled  { border-color: gray; color: gray;  }
input.disabled  { opacity: 0.5; filters.alpha.opacity:50;  }
span.disabled   { opacity: 0.5; filters.alpha.opacity:50;  }
td.disabled   { color: gray; }

.positionDisplay {
    display: inline-block;
    padding: 3px;
    /* border-radius: 3px; */
    border: lightgray 1px solid;
    font-size: 90%;
}

.positionDisplay:hover {
    cursor: default;
}

.positionInput {
        padding: 3px;
        /* border-radius: 3px; */
        border: gray 1px solid;
}

#hgt\.left3, #hgt\.in1, #hgt\.out1 {
        border-right: 1px solid lightgray;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
}
#hgt\.left2, #hgt\.left1, #hgt\.right1, #hgt\.right2, #hgt\.in2, #hgt\.in3, #hgt\.out2, #hgt\.out3 {
        border-right: 1px solid lightgray;
        border-left: 1px solid lightgray;
        border-radius: 0px;
}
#hgt\.right3, #hgt\.inBase, #hgt\.out4 {
        border-left: 1px solid lightgray;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
}


.pennantIconText {
    text-decoration: none;
    text-transform: capitalize;
    font-size: 70%;
    font-style: italic;
    font-weight: bold;
    vertical-align: text-top;
}

.folderIcon {
        /* color: #00457c;  color of SVG must be set via fill attribute, see hui.c:printIcons() */
        height: 13px;
        vertical-align: top;
}


/*
   Styles for hgHubConnect (formerly in separate .css)
   by Greg Roe
   Last update: 2011-11-1 (greg)
*/

#tabs {
	font-size: 100%;
	margin-top: 5px;
}


#sessionTable thead th, #sessionTable thead td
{
    padding: 4px 4px 4px 17px !important;
}

#sessionTable thead .sorting,
#sessionTable thead .sorting_asc, #sessionTable thead .sorting_desc,
#sessionTable thead .sorting_asc_disabled, #sessionTable thead .sorting_desc_disabled
{
    background-position: center left !important;
}

.hubList table {
    width: 930px;
    border-collapse: collapse;
}

/* Creating rounded corners at the tops of tables - works with all CSS3 supporting browsers, degrades gracefully */
.hubList table tr:first-child th:first-child {-webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px;}
.hubList table tr:first-child th:last-child {-webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px;}

/* Styling table cells */
.hubList tbody 	{font-size: 0.9em;}
.hubList table tr td:first-child {text-align: center;}
.hubList table#unlistedHubsTable tr td:last-child {text-align: center;}
.hubList th, .hubList td {padding: 2px 8px; text-align: left;}
.hubList th {background-color: #e5dfb1; height: 1.6em; vertical-align: middle;}
.hubList table tbody tr {background-color: #fffef8;}
.selectedRow {background-color: #99dd9a !important;}
.hoverRow {background-color: #fdffb7 !important;}
.hubList td {border-top: 1px solid #d5cd9e; border-bottom: 1px solid #d5cd9e;}
.centeredCol {text-align: center;}
#addHubBar {background-color: #bfbfb2; line-height: 2.3em;}
#hubURL {line-height: 0.9em; color: #1c1d22;}
.hubList input {margin: 3px; font-size: 0.8em;}
.submitHub {margin: 10px;}
.hubButton {background-color: #ffffff; width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
.hubDisconnectButton { background-color: #bfbfb2; width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }

.tabFooter {
    font-size: 100%;
    font-family: Verdana,Arial,sans-serif;
}

.tabFooter input {
    font-size: 0.8em;
    margin: 7px 0 7px 3px;
}
.tabFooter .small {margin: 2px 40px; font-size: 0.8em;}

.hubError {color: #F00000;}
/* END - hgHubConnect Styles */

/* User account login/signup styles */
.formBox a {text-decoration: none}
.formBox a:hover {text-decoration: underline;}
.centeredContainer {margin: 0 auto;}
.formBox {
    width: 400px;
    border: 2px solid #eed5b7;
    margin-top: 2.5em;
    padding: 0 30px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff9d2;}
.formBox input {font-size: 1.04em;}
.formBox label {display: block; margin-top: 10px;}
.formBox label.radioLabel {display: inline; margin: 0;}
#helpBox {
    margin-top: 20px;
    padding: 20px 0 10px 0; 
    border-top: 1px solid #eed5b7;}
label small {
    font-style: italic;
    font-size: 0.9em;}
.highlightBox { /* combine with classes error, alert, or highlight */
	border: 2px solid;
    padding: 10px;}
.error { /* for use with highlightBox, when used for error msgs */
    border-color: #f00;
    background-color: #ffeded;
    color: #f00;}
.confirmationTxt {
    font-size: 1.2em;
    font-weight: normal;}
/* END - User account login/signup styles */

/* [+][-] buttons are no longer images but divs */
.pmButton { font-size: small; font-weight:bold; text-align:center; font-family: courier; color: black;
            display: inline-block; width:16px; height:16px; vertical-align: top;
            border: 2px outset lightGray; border-bottom-color:darkgray; border-right-color:darkgray;
            background-color:#F3EDED; cursor: pointer;}
.pmButton:hover { border-bottom-color:DarkBlue; border-right-color:DarkBlue; color: #0000AA; background-color:#AADDFF; }

/* Experimental hilighting of all buttons on hover */
/* input[type=submit]:hover,input[type=button]:hover { color: #0000AA; border:2px outset #008800; } */
/* img[src="../images/add_sm.gif"]:hover,img[src="../images/remove_sm.gif"]:hover { outline:#008800 outset 1px; } */

/* Styles for static pages with the "original" browser look */
body.oldStaticPage {
		background-color: rgb(255,249,210); /* #fff9d2 */
	}

body.oldStaticPage .nav {
	margin: 6px 0 6px;
}

body.oldStaticPage .section h1 {
	background-color: rgb(217,228,248); /* #d9e4f8 */
   	font-size: 1.1em;
	padding: 3px 14px;
	margin: 0;
}
	
body.oldStaticPage .sectionContent {
	padding: 0 14px;
}

#hgFindResults {
        padding: 1em;
}

#warnBox {
    background-color: Beige;
    border: 3px ridge DarkRed;
    padding:10px; 
    margin:10px;
    text-align:left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 800px;
}

#warnHead {
    color: DarkRed;
}

/* like warnBox, but under the menu, not in the middle of the screen */
.notifBox {
    background-color: beige;
    border: 1px solid grey;
    padding: 5px; 
    margin: 5px;
    text-align: center;
}

/* For jquery-ui dialog box */
div.warnDialog { border: 2px solid; }
div.warnDialog .ui-dialog-titlebar { background-color: #FF8566; }
div.warnDialog .ui-dialog-title { font-weight: bold; color: #000000; }
div.warnDialog .ui-dialog-content { background-color: #FFFEE8; font-size: 1em; }
div.warnDialog .ui-dialog-buttonpane { border-width: 0; text-align: center; }
div.warnDialog .ui-dialog-buttonset { width: 100%; display: inline-block; }
body > div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable * { font-size: 14px; }

.centeredImage
{
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

/* Style for geneAlleles (haplotypes) */
table#alleles { font-size:small; }
table#alleles TD.topHat {background-color:#FCECC0;} /* 1st of 2 rows in header.  Not '.sortable' */
table#alleles TR.allele { text-align:center; }
table#alleles TD.pop { text-align:left; }
table#alleles TH.ref { text-align:right; }
table#alleles TD.ref { text-align:right; }
/* table#alleles TH.var { text-align:center; }
   table#alleles TD.var { text-align:center; font-weight:bold; } */
table#alleles TD.var { font-weight:bold; }
table#alleles TH.seq { text-align:left; }
table#alleles TD.seq { text-align:left; }
div#haplotypes .hilite { opacity: 0.2; filters.alpha.opacity:20;  position: absolute;
                                 background-color: #339933; } /* greenish */ 
div#haplotypes .hiliteSpecial { background-color: #33FFFF; } /* bluish */ 
div#haplotypes input.toggleButton  { width:160px; height:1.7em; }
div#haplotypes .textOpt   { color:#0000CD; } /* medium blue */
div#haplotypes .textInfo  { color:#006600; } /* dark green */
div#haplotypes .textAlert { color:#DC143C; } /* dark red */

.hidden { display:none; } /* allows toggling visibility by addClass/removeClass */

.readableWidth {
    /* For wrapping description text on pages that can get very wide */
    width: 50em;
}

.hgtaNoGenome {
    color: gray;
}

.autoCompleteInfo {
  color: #666;
  padding-left: 3px;
  background-color: #EEE;
}

/* for autocompleteCat (autocomplete with optional category labels) */
.ui-autocomplete-category {
    /* Adapted from https://jqueryui.com/autocomplete/#categories */
    font-weight: bold;
    line-height: 1.5;
    background: lightgray;
}

.ui-menu-item {
    /* This is necessary if a background color is specified in .ui-autocomplete-category above;
     * the category labels actually extend upwards, behind the preceding items! */
    background: white;
}

/* Added for Angie's React UI stuff */
.cgiTitleBox {
    background-color: #D9E4F8;
    padding: 5px;
}

.cgiTitle {
  font-weight: bold;
  font-size: larger;
  color: #000000;
  text-align: left;
  white-space: nowrap;
  display: inline-block;
  padding-right: 5px;
}

.cgiContents {
    margin: 5px;
}

.sectionBorder {
    border: 1px solid gray;
    margin-top: 5px;
}

.sectionPanel {
    background-color: #FFFEE8;
}

.sectionHeader {
    background-color: #EEF3FB;
    font-weight: bold;
    color: #000000;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}

.sectionContents {
    margin: 5px;
}

.sectionRow {
  margin-top: 5px;
}

.sectionItem {
  display: inline-block;
  padding-right: 5px;
}

.subsectionBox {
  padding: 5px;
  border: black solid 1px;
}

.boldText {
  font-weight: bold;
  color: #000000;
  text-align: left;
  white-space: nowrap;
}

a.reactLink {
    /* React/JSX translates &nbsp; into its UTF-8 equivalent.  Trouble is, our CGI code
     * always adds a 'CHARSET=iso-8859-1' to the header, possibly because we serve data
     * from MariaDB tables with that encoding ("latin1"), so I'm reluctant to change something
     * that CGIs have done since 2001 (622545af).
     * Now, why the rant about &nbsp;? -- because React/JSX also smushes <A> together with
     * its surrounding text, if there are newlines between them in the JSX.  Add some padding. */
    padding-left: 0.3em;
    padding-right: 0.3em;
}

.disabledMessage {
  padding: 5px;
  color: gray;
  font-style: italic;
}

.sortHandle:hover {
  cursor: ns-resize;
}

.smallText {
  font-size: small;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.clear {
  clear: both;
}


/* react/lib/Modal-specific */
.absoluteModal {
  position: absolute;
  display: inline-block;
  top: 75px;
  left: 5%;
  width: 90%;
  z-index: 100;
  background-color: #FFFEE8;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  overflow: auto;
}

/* react/lib/LoadingImage-specific */
.loadingMessage {
    color: red;
    font-style: italic;
}

/* hgAi-specific */
.dataSourceSubsection {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* hgChooseDb-specific */
img.speciesIcon {
  width: 50px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
  margin: 5px;
}

.speciesButton {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center
}

/* hgPublicSessions-specific */
table.sessionTable tbody tr:hover{
  background-color:#fdffb7 !important;
}

a:link img.sessionThumbnail {
  padding: 5px;
}

input[type="submit"].pressed {
    background: #d0dcff; 
    webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    border-radius: 4px;
}

input[type="button"].pressed {
    background: #ebf0ff;
    webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    border-radius: 4px;
}

.positionDisplay.pressed {
    background: #ebf0ff;
    webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    border-radius: 4px;
}

/* Session label in a box */

span.gbSessionLabelPanel {
    background-color: #e0e0e0;
    border-style: solid;
    border-color: #c2c2c2;
    border-width: 1px;
    padding: 3px;
    padding-top: 1px;
    margin-left: 10px;
    cursor: default;
}

span.gbSessionLabelPanel:hover {
      background-color: #d4d4d4;
}

span.gbSessionLabelText {
    color: darkblue;
}

span.gbSessionChanged {
    color: darkslategray !important;
}

/* Table browser styles */

.tbTooltip {
    display: inline-block;
}

.tbTooltipLabel {
    background: #EFEFEF;
    padding: 5px;
    cursor: pointer;
}

.tbTooltiptext {
    visibility: hidden;
    font-style: italic;
    font-size: smaller;
    padding: 5px;
}

.tbTooltip:hover .tbTooltiptext {
    visibility: visible;
}

/* Tooltips - Note these are just general rules all the tooltips will have, the
 * exact positioning is set by associated javascript in utils.js */
.tooltip {
    visibility: hidden;
    background-color: rgb(238,238,238);
    color: black;
    text-align: left;
    position: fixed;
    z-index: 1003; /* these indices are all over the place for various things */
    opacity: 0;
    line-height: 1em;
    padding: 3px;
    border: 1px solid black;
    border-radius: 2px;
    box-shadow: 0px 1px 2px darkgrey;
    max-width: 400px;
/* Allow breaking long lines, hopefully web browsers will mostly pick
 * punctuation, primarily added to support the gnomad tooltips where the 'variation'
 * filter is a long comma sep list with no spaces after the commas */
    white-space: normal;
    overflow-wrap: anywhere;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 0.9;
}

.chainBreak {
    display: grid;
    grid-template-columns: max-content max-content;
    row-gap: 10px;
}  

.dialogNewWindowIcon {
    position: absolute;
    right: 1.5em;
    top: 50%;
    width: 19px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 18px;
}

.hgTracksGearIcon {
    position: absolute !important;
    top: 4px;
    left: -25%;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    z-index: 10;
}

.hgTracksCloseIcon {
    position: absolute !important;
    top: 4px;
    line-height: 16px;
    vertical-align: top;
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    z-index: 10;
}
.hgTracksCloseIconLeft {
    left: 2px;
}

.hgTracksCloseIconRight {
    right: 2px;
}

#hgta_doClearFilter {
    color: red;
}

#hgta_doClearIdentifiers {
    color: red;
}

#hgta_doClearIntersect {
    color: red;
}

#hgta_doClearUserRegions {
    color: red;
}

#hgta_doClearSubtrackMerge {
    color: red;
}