body, th, td, input, select, textarea, button {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    color: #444;
}

body {
    margin: 15px 25px;
    background-color: #fafafa;
}

/* added 700 px limit for p and list text */
p {
    max-width: 65rem;
    margin-left: 10px;
    font-size: 18px;
    line-height: 130%;
    margin-top: 0;
}

ol, ul {
    max-width: 650px;
    line-height: 130%;
}

/* a, a:hover, a:visited { */
a, a:visited {
    /* color: #004175; */
    color: #226498;
    white-space: nowrap;
}

a:hover {
 /*    text-decoration: none; */
    text-decoration: underline;
    color: gray;
}

.link-like {
    color: #226498;
}

.link-like:hover {
    text-decoration: underline;
    color: gray;
    cursor: pointer;
}

/* also added 65rem limit for headers, though few examples exist currently on site that violate limit */
h1, h2, h3, h4 {
    color: #333;
    margin: 10px 0 0 0;
    max-width: 65rem;
}

.warn {
    color: #c00;
}

p.important, div.important {
    background: #FBE6F2;
    border: 1px solid #D893A1;
    color: #333;
    margin: 10px 5px 5px 5px;
    padding: 10px 20px 10px 20px;
    width: max-content;
}

.saureus-warning {
    background: #ffffcc;
    border: 1px solid #660000;
    color: #333;
    margin: 10px 5px 5px 5px;
    padding: 10px 20px 10px 20px;
    width: max-content;
}

.warning {
    background: #ffcccc;
    border: 1px solid #660000;
    color: #333;
    margin: 10px 5px 5px 5px;
    padding: 10px 20px 10px 20px;
    width: max-content;
}

.highlight {
    background: #ccffcc;
    border: 1px solid #006600;
    color: #333;
    margin: 10px 5px 5px 5px;
    padding: 10px 20px 10px 20px;
    width: max-content;
    border-radius: 5px;
}

.update, .prose {
    font-size: 19px;
    line-height: 30px;
}

.update_datestamp {
    float: left;
    padding-right: 10px;
}

.b {
    font-weight: bold;
}

.grande {
    font-size: 130%;
}

.sp10 {
    height: 10px;
    line-height: 10px;
}

.sp15 {
    height: 15px;
    line-height: 15px;
}

.sp20 {
    height: 20px;
    line-height: 20px;
}

form {
    margin: 0;
}

.username {
    font-weight: bold;
    color: #004175;
}

#header, #footer, #content {
    align-self: center;
    margin-left: 265px;
    margin-right: 285px;
}

#content {
    margin-top: 25px;
    margin-bottom: 35px;
    display: flex; flex-direction: column; justify-content: space-around;
}

.featured {
    font-size: 24px;
    line-height: 140%;
    color: #0f6db7;
    font-weight: 600;
    margin-bottom: 37px;
}

#header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#header-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media screen and (max-width: 1700px) {
    #header, #footer, #content {
        margin-left: 215px;
        margin-right: 235px;
    }
}

@media screen and (max-width: 1600px) {
    #header, #footer, #content {
        margin-left: 165px;
        margin-right: 185px;
    }
}

@media screen and (max-width: 1500px) {
    #header, #footer, #content {
        margin-left: 115px;
        margin-right: 135px;
    }
}

@media screen and (max-width: 1400px) {
    #header, #footer, #content {
        margin-left: 65px;
        margin-right: 85px;
    }
}

@media screen and (max-width: 1300px) {
    #header, #footer, #content {
        margin-left: 5px;
        margin-right: 25px;
    }
}

@media screen and (max-width: 1200px) {
    #header, #footer, #content {
        margin-left: 0;
        margin-right: 0;
    }
}

#footer {
    clear: left;
}

#trc_logo, #gpp_logo {
    margin: 0 0 14px 6px;
}

#gpp_logo {
}

#site_name {
    font-family: "Open Sans", sans-serif;
    color: #585858;
    font-size: 175%;
}

#trc_site_name {
    font-family: "Open Sans", sans-serif;
    color: #585858;
    margin: 20px;
    font-size: 250%;
}

#broad_logo {
    margin: 9px -1px 9px 0;  
}

#rside {
    margin: 0;
    text-align: right;
    font-size: small;
}

#usernav {
    height: 19px;
    min-width: 200px; /* roughly match width of gpp logo to help site name look centered */
}

#topnav {
    text-align: left;
    height: 28px;
    font-family: "Open Sans", sans-serif;
    line-height: 160%;
    color: #004175;
    background: transparent url(../img/topnav_bg.png) left top no-repeat;
    clear: both;
}

#topnav .inner1, #topnav .inner2 {
    height: 100%;
}

#topnav .inner1 {
    margin-left: 7px;
    background: transparent url(../img/topnav_bg.png) right top no-repeat;  
}

#topnav .inner2 {
    margin-right: 7px;
    background: transparent url(../img/topnav_bg.png) left bottom repeat-x;
    padding: 0 10px;
}

#topnav a, #footer a {
    text-decoration: none;
}

#topnav a:hover, #footer a:hover {
    text-decoration: underline;
}

#breadcrumbs {
    font-size: 85%;
    margin: 9px 0 0 6px;
}

#footer {
    border-top: 4px solid #0071bc;
}

#footer .inner {
    padding: 6px 10px 15px 10px;
}

.clonepools-availability {
    text-align: center;
}

.clonepools-availability-img {
    height: 1em;
}

.clonepools-availability-tooltip {
    visibility: hidden;
    width: 11rem;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    white-space: normal;
}

/* Show the tooltip text when you mouse over the tooltip container */
.clonepools-availability:hover .clonepools-availability-tooltip {
    visibility: visible;
}

.nogridfilterbtn {
    cursor: pointer;
}

span.nogridfilterbtn img {
    height: 0.5rem;
}

.nogridfilterbtn:hover {
    color:gray;
}

.nogridfilterbtn:active {

}

.nogridfilterboxhidden {
    position: absolute;
    visibility: hidden;
}

.nogridfilterboxshown {
    position: absolute;
    left: 1em;
    top: 1.25em;
    background-color: lightgray;
    border-color: #4b4b4b;
    border-width: thin;
    border-style: solid;
    border-radius: 4px;
    padding: 1em;
    white-space: nowrap;
    z-index: 2;
}

table.resources-grid th:first-child, table.resources-grid td:first-child {
    width: 28rem;
}

table.nogrid {
    border-collapse: collapse;
    border: none;
}

table.nogrid th, table.nogrid td {
    text-align: left;
    padding-right: clamp(2px, 5vw, 30px);
    font-size: 14px;
}

table.nogrid th:first-child, table.nogrid td:first-child {
    padding-left: 0.5rem;
}

table.nogrid th:last-child, table.nogrid td:last-child {
    padding-right: 0.5rem;
}

table.nogrid tr:first-of-type td.nogrid-subtitle {
    padding-top: initial;
}

table.nogrid td.nogrid-header {
    font-weight: bold;
    position: relative;
}

table.nogrid td.centered {
    text-align: center;
}

table.nogrid td.nogrid-subtitle {
    padding-top: 2rem;
    padding-bottom: 0;
    font-weight: bold;
    font-size: 14pt;
}

.nogridfilterselected {
    color: #0e84b5;
    font-weight: bold;
}

.nogridfilterunselected {
    color: #807e7e;
    font-weight: bold;
}

table.nogrid.nogrid-striped tbody tr:nth-child(even) {
    background-color: #efefef;
}

table.grid {
    border-collapse: collapse;
    border: 1px solid #bbb;
    margin: 0 0 2px 2px;
}

table.grid {
    border-collapse: collapse;
    border: 1px solid #004175;
    margin: 0 0 2px 2px;
}

table.grid th, table.grid td {
    font-size: 12px;
    padding: 3px 6px;
}

table.grid tr.highlight td {
    font-weight: bold !important;
    font-size: 85%;
    /* 
      In Windows/Linux environments, the bolding does not show
      until you increase the font size.  The addition of font
      size and !important try and override politely user
      css settings, though it does not solve this problem
      completely.
     */
}

table.grid th {
    font-weight: bold;
    color: #fff;
    /* border-right: 1px dotted #fff; */
    border-right: 1px solid #bbb;
    background-color: #004175;
}

table.grid td {
    /* border: 1px dotted #004175; */
    border: 1px solid #bbb;
}

table.grid td.rowCount {
    background-color: #ccc !important;
    text-align: right;
    width: 1em;
}

table.grid tr.z1 td {
    background-color: #fff;
}

table.grid tr.z2 td {
    background-color: #cfe1ed;
}

.download_csv_link {
    font-size: 85%;
    margin: 0 0 0 1px;;
}

.date-col {
    text-align: right;
    width: 8em;
}

.link-col {
    width: 10em;
    text-align: center;
}

.r {
    text-align: right;
}

.c {
    text-align: center;
}

.floatL {
    float: left;
}

.error {
    color: #f00;
    margin: 15px 0 -5px 0;
}

.clear {
    clear: both;
}

.glossary {
    margin: 0 0 0 3px;
    position: relative;
    top: -2px;
    font-weight: normal;
    cursor: pointer;
    /* color: #fff;*/
    font-size: 90%;
}

.hidden,
#frmSearchUniversalRepost {
    display: none;
}

.glossary table {
    border-collapse: collapse;
    border: 1px solid #004175;
    margin: 0 0 2px 2px;
}

.glossary td {
    border: 1px dotted #004175;
    font-size: 9pt;
}

input[type="radio"] {
    position: relative;
    top: 2px;
}

button.action {
    background-color: #015087;
    border-width: 1px;
    border-style: solid;
    border-color: #cfe1ed #023b63 #023b63 #cfe1ed;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    font-size:  115%;
    font-weight:  bold;
    overflow: visible;
    padding: 1px 13px 1px 15px;
    text-decoration: none;
    width: auto;
}

button.action:hover {
    color: #cfe1ed;
}

img.icon {
    vertical-align: middle;
    margin-bottom: .25em;
}

dl {
    padding: 0;
    margin-left: 10px;
}

dt {
    font-size: 95%;
    font-weight: bold;
}

/* using dl lists for some TALE examples, need this to have normal font-weight */
.normalList {
    font-weight: normal;
}

/* added limit here as well, as I perused site and found cases where text width was long */
dd {
    padding: 0 0 0 26px;
    margin: 1px 0 4px 3px;
    background: transparent url(../img/arrw.gif) left 3px no-repeat;
    font-size: 14px;
    max-width: 65rem;
}

/* search */

.searchWrapper {
    margin: 20px 0;
}

.secSep {
    float: left;
    width: 55px;
}

.secTitle {
    font-weight: bold;
    font-size: 120%;
    color: #333;
}

.secDetails,
.secDetails150 {
    height: 23px;
}

.secDetails150 {
    line-height: 150%;

}

#ncbiNote {
    max-width: 250px;	
    font-size: 75%;
}

textarea.manualInput {
    width: 220px;
}

textarea.manualSeqInput {
    width: 600px;
    height: 250px;
}

.searchResources {
    border-left: 2px dotted #cfe1ed;
    padding: 0 15px 0 30px;
}

/* search */

.frmLogin {
    width: 350px;
    padding: 20px 0 25px 0;
    margin: 20px 0 50px 0;
    border: 1px solid #0071BC;
}

.frmLogin div {
    margin: 6px 0 0 0;	
}

.frmLogin input {
    width: 160px;
}

.frmLogin div.btn {
    margin: 9px 0 0 0;  
}

.frmLogin label {
    float: left;
    margin: 0 8px;
    width: 100px;
    text-align: right;
}

.hairpin_diagram {
    line-height: 1.3ex;
    margin-left: 2em;
    border-collapse: collapse;
    /*
    padding: 1ex 1em;
    border: solid grey 1px;
     */
}

.hairpin_diagram td {
    line-height: 1.3ex;
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    padding: 0.6ex 0.4ex;
    margin: 0;
    border-collapse: collapse;
    /*
    border-top: solid black 1px;
    border-bottom: solid black 1px;
     */
}

.dna {
    font-family: Fixed,monospace;
    font-size: 92% !important;
}

.chr_loc {
    font-family: Fixed,monospace;
}

.hairpin_diagram td.dnabar {
    line-height: 1ex;
    font-weight: bold;
    font-size: 80%;
    color: #999;
    padding: 0.4ex;
}

table.seqlines th {
    color: #222222;	
    text-align: right;
}

table.seqlines td {
    font-family: Fixed,monospace;
    font-size: 100% !important;
}

td.targetseq {
    color: red;
}

td.targetseqrc {
    color: green;
}

td.loopseq {
    color: #999;
}

td.flankseq {
    color: #999;
}

ul.formula {
    list-style-type:none;
}

.vectordesc {
    float: left;
}

.vectorinfo {
    float: left;
    max-width: 300px;
}

.vectormap {
    float: right;
}

#vectormapdownload {
    text-align: center;
}

.controlclones {
    float: left;
    width: 65rem;
    margin-bottom: 10px;
}

h3.vectordetailheader {
    padding-top: 15px;
    margin: 0px;
}

#vectormapimage {
    max-width: 65rem;
}

.vectormapdownload {
    float: right;
    margin-left:300px;
}

/* 
div#searchResults {
    display: inline;
}
*/
a.refineSearch {
    font-size: 50%;
}

a.boldLink {
    font-weight: bold;
}

a.external {
    background: url(../img/external_link.png) top right no-repeat;
    padding-right: 13px;
}

.seq {
    float: left;
}

.top-level {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 0;
}

.col-2 {
    margin-left: 4em;
}

.two-col {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.two-col div:first-of-type {
    margin-right: 1.5em;
}

@media screen and (max-width: 900px) {
    .two-col {
        flex-direction: column;
    }
}

#transcriptResult {
    max-width: 40em;
}

.col-sm {
    max-width: 230px;
}

.db-qual {
    font-size: 12px;
    color: red;
}

.portal-name {
    font-variant: small-caps;
    font-size: 85%;
}

.portal-edition {
    font-style: italic;
    font-variant: small-caps;
    font-size: 85%;
}

.lazy-loaded {
    margin: 0;
    padding: 0;
}

.fakelink {
    cursor: pointer;
    color: #226498;
    text-decoration: underline;
    font-size: 85%;
    margin: 0 0 0 1px;
}

.fakelink:hover {
    text-decoration: underline;
    color: gray;
}

td.seqver {
    font-size: 125% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.seqver-danger {
    color: red;
}

.seqver-warn {
    color: orange;
}

.seqver-ok {
    color: #00CC00;
}

.seqver-info {
    color: #555555;
}

/**
Tooltip stuff taken from: https://www.w3schools.com/css/css_tooltip.asp on 20170609
 */
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    border: 2px solid rgb(155, 179, 199);
    visibility: hidden;
    background-color: white;
    color: #444;
    font-size: 10px;
    text-align: left;
    padding: 5px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;

    opacity: 0;
    transition: opacity 0.3s;

    border-radius: 6px;

}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-is-text {
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltiptext-above {
    width: 200px;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
}

.tooltiptext-right {
    margin-left: 5px;
    left: 100%;
    /*min-height: 4em;*/
    min-width: 15em;
    /*max-width: fit-content;*/
    bottom: -0.5em;
}

.tooltiptext-left {
    margin-right: 5px;
    right: 100%;
    /*min-height: 4em;*/
    min-width: 15em;
    /*max-width: fit-content;*/
    bottom: -0.5em;
}

/* Tooltip arrow */
.tooltip .tooltiptext-above::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Tooltip arrow */
.tooltip .tooltiptext-right::after {
    content: "";
    position: absolute;
    bottom: 0.5em;
    left: -12px; /* margin + padding + size of this arrow is 12 */
    margin-left: -5px;
    padding-left: 5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

/* Tooltip arrow */
.tooltip .tooltiptext-left::after {
    content: "";
    position: absolute;
    bottom: 0.5em;
    left: 100%; /* margin + padding + size of this arrow is 12 */
    margin-left: 2px;
    padding-left: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

.filter-well {
    border: 1px solid #006600;
    color: #333;
    margin: 1em 5px 1em 5px;
    padding: 0;
    width: max-content;
}

.img-link {
    color: #226498;
}

.img-link:hover {
    text-decoration: underline;
    color: gray;
    cursor: pointer;
}

.big-button-link {
    width: 18rem;
    border: 1px solid #88aacc;
    border-radius: 0.5rem;
    padding: 2rem;
    color: unset !important;
    text-wrap: unset !important;
    text-decoration: none !important;
    line-height: unset;
}

.big-button-link > p {
    text-align: center;
    line-height: unset !important;
}

.big-button-link > h2 {
    text-align: center;
    text-decoration: none !important;
}

.big-button-link:hover > h2 {
    color: white !important;
}

.big-button-link:hover {
    background: #88aacc;
    color: white !important;
}

.legacy-vector-grid th {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 10rem;
}

.legacy-vector-grid th:first-child {
    width: 1rem;
}

.banner {
    background-color: #cfe2ff;
    border: #9ec5fe solid 1px;
    padding: 1rem;
    border-radius: 0.2rem;
    margin-bottom: 2rem;
}

/* these are taken from sciborg-ext.css which we can't easily use from the portals site */
.gpp-breadcrumbs {
    padding: 1em 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

.gpp-breadcrumb-item {
    color: #333333;
}

.gpp-breadcrumb-item::before {
    padding: 0 0.25em 0 0.25em;
    content: '\00BB';
    color: #333333;
}

.resources-content h2 + p {
    margin-top: 1rem;
}

.resources-content dl {
    margin-top: 0;
    margin-left: 2.5rem;
}

.resources-content dt {
    font-size: larger;
}

.resources-content ul {
    margin-top: 0.5rem;
    max-width: 65rem !important;
}

.resources-content ol {
    max-width: 65rem !important;
}

.resources-content ol > li {
    margin-top: 0.5rem;
    font-size: larger;
}

.resources-question {
    font-weight: bold;
}

.resources-content input[type="checkbox"] {
    accent-color: gray;
    transform: scale(1.25);
}

.shout-new {
    font-size: 8px;
    color: red;
    vertical-align: super;
}