:root {
    --addgene-blue: rgb(0, 74, 214); /* #004ad6 */
    --addgene-dusk: rgb(1, 41, 158); /* #01299e */
    --addgene-dark-blue: rgb(22, 15, 68); /* #160f44 */
    --addgene-sky: rgb(77, 171, 255); /* #4dafff */
    --addgene-forest: rgb(0, 101, 78); /* #00654e */
    --addgene-green: rgb(78, 165, 40); /* #4ea528 */
    --addgene-lime: rgb(124, 195, 93); /* #7cc35d */
    --addgene-yellow: rgb(249, 207, 29); /* #f9Cf1d */
    --addgene-pink: rgb(255, 99, 103); /* #ff6367 */

    /* Use Sparingly */
    --addgene-red: #ee0024;
    --addgene-orange: #f9a01d;
    --addgene-purple: #56356f;

    /* Typography Color Palette: Also include @addgene-blue, @addgene-dark-blue, white */
    --addgene-gray: #585858;
    --addgene-text-gray: var(--addgene-gray);
    --addgene-text-dark: #222;

    /* Neutral Color Palette */
    --addgene-neutral-yellow: #f5f4f0;
    --addgene-neutral-green: #ecf4e9;
    --addgene-neutral-blue: #e6f7fd;
    --addgene-border-gray-1: #cccccc;
    --addgene-border-gray-2: #dddddd;
    --addgene-border-gray-3: #eeeeee;

    /* .button-2[disabled]: dull brand yellow (≈ mix toward neutrals / old semi-transparent look) */
    --addgene-yellow-disabled-bg: #e5daae;
    --addgene-yellow-disabled-border: #c4b57d;

    /* Alert tokens — keep rgb values in sync with addgene-variables.less @state-* */
    --state-warning-bg: rgb(255, 245, 219);
    --state-warning-text: rgb(102, 77, 3);
    --state-warning-border: transparent;

    --state-danger-bg: rgb(249, 225, 227);
    --state-danger-text: rgb(88, 21, 28);
    --state-danger-border: transparent;

    --state-info-bg: rgb(214, 228, 252);
    --state-info-text: rgb(5, 44, 101);
    --state-info-border: transparent;

    --addgene-alert-border-radius: 6px;
}

#no-js-warning {
    font-size:14px; text-align:center; color: var(--addgene-gray);
    padding:5px 10px;
    background-color: var(--addgene-neutral-yellow);
    margin-bottom:10px;
}

.giraffe_canvas { position:relative !important; }

a.black { color: var(--addgene-text-dark); }
a.gray { color: var(--addgene-gray); }
a.gray:visited { color: var(--addgene-gray); }
a.silent { color:inherit; text-decoration:none; }
a.silent:hover { text-decoration:underline; }
a.no-hover,a.no-hover:hover { text-decoration:none; }
.d-flex {display: flex;}
.inline { display:inline-block !important; }
span.block { display:inline-block; margin:1px; }
.gold { color: var(--addgene-yellow); }
.p { margin:15px 0px; }
.link { color: var(--addgene-blue); text-decoration:underline; cursor:pointer; }
.strong { font-weight:bold !important; }
.p2 { margin:30px 0px; }
.p3 { margin:45px 0px; }
.padded { padding:10px !important; }
.padded-vertical { padding:10px 0px !important; }
.left { float:left }
.right { float:right }
.indent { margin-left:15px; }
.indent2 { margin-left:30px; }
.indent3 { margin-left:45px; }
.indent4 { margin-left:60px; }
.indent5 { margin-left:75px; }
.right-float { float:right; margin:0px 0px 10px 10px; }
.left-float { float:left; margin:0px 10px 10px 0px; }
.right-align { text-align:right; }
.left-align { text-align:left; }
.normal { font-weight:normal !important; }
.important { color: var(--addgene-red); font-weight:bold; }
.important-blue { color: var(--addgene-blue); font-weight:bold; }
.pre { white-space:pre; }
.large_ss {font-size:1.5em;line-height:1.2;}
.tiny { font-size:0.8em; }
.heavy { font-size:24px; }
.orange { color: var(--addgene-orange); }
.double-space { line-height:2; }
.onehalf-space { line-height:1.5; }

.seq { font-family:courier; white-space:pre; font-size:12px; }
.legal { font-family:courier; font-size:12px; }
.center { width:100%; text-align:center; }
.scroll { overflow-y:auto; }

.h50 { height:50px !important; }
.h100 { height:100px !important; }
.h150 { height:150px !important; }
.h200 { height:200px !important; }
.h250 { height:250px !important; }
.h300 { height:300px !important; }
.h400 { height:400px !important; }
.h500 { height:500px !important; }
.h600 { height:600px !important; }
.h700 { height:700px !important; }
.h800 { height:800px !important; }

.w-half { width:50%; }
.w20p { width: 20%; }
.w15 { width:15px !important; }
.w25 { width:25px !important; }
.w50 { width:50px !important; }
.w75 { width:75px !important; }
.w100 { width:100px !important; }
.w200 { width:200px !important; }
.w250 { width:250px !important; }
.w300 { width:300px !important; }
.w350 { width:350px !important; }
.w400 { width:400px !important; }
.w427 { width:427px !important; }
.w450 { width:450px !important; }
.w500 { width:500px !important; }
.w525 { width:525px !important; }
.w550 { width:550px !important; }
.w650 { width:650px !important; }
.w675 { width:675px !important; }
.w700 { width:700px !important; }
.w750 { width:750px !important; }
.w800 { width:800px !important; }
.w850 { width:850px !important; }
.w885 { width:885px !important; }

.margin-right-0 { margin-right:0px !important; }
.margin-right-10 { margin-right:10px !important; }
.margin-right-5 { margin-right:5px; }

.rounded { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.rounded-large {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

.box-with-title { padding:0px !important; }
.box-title { padding:4px 10px; border-bottom:1px solid var(--addgene-border-gray-1); background-color: var(--addgene-neutral-yellow); }
.box-content { padding:10px; }

.empty-box { width:25px; height:25px; }
.box-checked { background-image:url('../images/common/checkgreen.png'); }

.border-box {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border:1px solid #e0e0e0;
}
div.border-box { padding:10px; margin-right:10px; }
.border-all { border:1px solid var(--addgene-border-gray-2); }
.border-cell td { border:1px solid #e0e0e0; }
.border-top { border-top:1px solid var(--addgene-border-gray-2); }
.border-left { border-left:1px solid var(--addgene-border-gray-2); }
.border-right { border-right:1px solid var(--addgene-border-gray-2); }
.border-bottom { border-bottom:1px solid var(--addgene-border-gray-2); }
.border-gray { border-color: var(--addgene-border-gray-2) !important; }
.border-dark { border-color: var(--addgene-gray) !important; }
.border-black { border-color: var(--addgene-text-dark) !important; }
.border-blue { border-color: var(--addgene-blue) !important; }
.border-red { border-color: var(--addgene-red) !important; }
.border-green { border-color: var(--addgene-green) !important; }
.border-gold { border-color: var(--addgene-yellow) !important; }
.no-padding { padding:0px !important; }
.align-top { vertical-align:top; }
table.align-top td { vertical-align:top; }
.item-list li:last-child { border: 0; }
.item-separator { border-bottom: 1px solid var(--addgene-border-gray-1); }
.item-separator a { word-break: break-all; }

.align-right { float:right; }

/* blueprint by default has zebra-strips on for tables, overriding
 * that */
#addgene tbody tr:nth-child(even) td,
#addgene table tbody tr.even td,
#addgene-lims tbody tr:nth-child(even) td,
#addgene-lims table tbody tr.even td { background: inherit; }
#addgene-lims table.report {
    display: block;
    overflow-x: auto;
}

ul.properties-list { list-style-type:none; padding-left:0px; }
ul.properties-list li { line-height:1.4; clear:left; }
ul.properties-list li label {
    float:left; width:140px; text-align:right;
    margin-right:15px; font-weight:bold;
}
ul.properties-list li>input { margin-top:-3px; }
/* padding-left here must add up to li label width+margin */
ul.properties-list li p { padding-left:155px; margin:0; }
ul.properties-list li p img { vertical-align:top; }

ul.properties-list-wide { list-style-type:none; padding-left:0px; }
ul.properties-list-wide li { line-height:1.4; clear:left; }
ul.properties-list-wide li label {
    float:left; width:240px; text-align:right;
    margin-right:15px; font-weight:bold;
}
ul.properties-list-wide li>input { margin-top:-3px; }
/* padding-left here must add up to li label width+margin */
ul.properties-list-wide li p { padding-left:255px; margin:0; }
ul.properties-list-wide li p img { vertical-align:top; }

ul.form-fields { list-style-type:none; padding-left:0px; }
ul.form-fields li { line-height:1.4; clear:left; }
ul.form-fields li label {
    float:left; width:240px; text-align:right;
    margin-right:15px; font-weight:normal;
}
ul.form-fields li>input { margin-top:-3px; }
/* padding-left here must add up to li label width+margin */
ul.form-fields li p { padding-left:255px; margin:0; }
ul.form-fields li p img { vertical-align:top; }

.no-bullet { list-style-type:none; }
.no-indent { padding-left:0px; }
.list-p li { margin:15px 0px; }
.list-p li:first-child { margin:0px 0px; }
.normal-label label { font-weight:normal !important; }

table.alter-row tr:nth-child(odd) { background:#fff }
table.alter-row tr:nth-child(even) { background: var(--addgene-neutral-yellow); }

table.std-hdr th {
    font-weight: 700;
    color: var(--addgene-text-dark);
    background-color: var(--state-info-bg);
}

th.tablesorter-headerAsc {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--addgene-blue);
}

th.tablesorter-headerDesc {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid var(--addgene-blue);
}

table.header-border th { border-bottom:1px solid var(--addgene-border-gray-2); }

ul.table-list {
    list-style-type:none; padding-left:0px; border-bottom:1px solid var(--addgene-border-gray-2);
}
ul.table-list li { border-top:1px solid var(--addgene-border-gray-2); padding:4px 0px; }
.table-list .warn { color: var(--addgene-red); font-weight:bold; }
.table-list .warn a { color:inherit; text-decoration:inherit }

.table-list { font-size:14px; }
.table-list th, .table-list td { padding:4px 6px; }
.table-list tr:hover,
.table-list li:hover { background: var(--addgene-yellow); }
.table-list tr.hdr th { border-bottom:1px solid var(--addgene-border-gray-2); }
.table-list tr.hdr:hover { background: inherit; }
.table-list td { border-bottom:1px solid var(--addgene-border-gray-2); }

td.action img { float:right; margin-left:8px; }
th.action, td.action {
    text-align:right; white-space:nowrap;
    font-size:13px;
}
th.fill, td.fill { width:80% }
th.max, td.max { width:100%; }
th.nowrap, td.nowrap { white-space:nowrap; }

.clear { margin:0px; padding:0px; }

.green-button {
    cursor:pointer;
    background-color: var(--addgene-green); font-weight:bold;
    padding:4px; font-size:12px; text-align:center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:1px solid var(--addgene-green);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.green-button, .green-button a {
    color:black;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
    text-decoration:none; cursor:pointer;
}

.red-button {
    cursor:pointer;
    background-color: var(--addgene-red); font-weight:bold;
    padding:4px; font-size:12px; text-align:center;
    -moz-border-radius:5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
    border:1px solid var(--addgene-red);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.red-button, .red-button a {
    text-decoration:none;
    color:white;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    cursor:pointer;
}

.button-1 {
    cursor:pointer;
    background-color: var(--addgene-blue); font-weight:bold;
    padding:4px; font-size:12px; text-align:center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:1px solid var(--addgene-blue);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.button-1, .button-1 a {
    color:white;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    text-decoration:none; cursor:pointer;
}

.button-2 {
    cursor:pointer;
    background-color: var(--addgene-yellow); font-weight:bold;
    padding:4px; font-size:12px; text-align:center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:1px solid var(--addgene-yellow);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.button-2, .button-2 a {
    color:black;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
    text-decoration:none; cursor:pointer;
}

input.button-2 {
    font-family : inherit;
    margin-bottom: 18px;
}
.button-2[disabled] {
  cursor: not-allowed;
  color: var(--addgene-gray);
  background-color: var(--addgene-yellow-disabled-bg);
  border-color: var(--addgene-yellow-disabled-border);
  box-shadow: none;
  text-shadow: none;
}

.absolute { position:absolute; }

/* Message dialog popup */
#message-dialog {
    font-size:14px; text-align:center; width:100%;
    position:absolute;left:0;top:0;z-index:10;
}
#message-dialog-close { float:right; margin:10px 100px 10px 10px; }
#message-dialog p { margin:0px; }

.breadcrumb { font-size:14px; margin:0px 0px 20px 0px; }

/* for help popups, see common.js */
.help-link {
    text-decoration: underline;
}
.help-text {
    display: none;  /* these items are un-hid by javascript */
    padding:10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border:1px solid var(--addgene-border-gray-2);
    background-color: var(--addgene-neutral-yellow);
    position:absolute;
    z-index:10;
}

.popup {
    background-color:#fff;
    position:absolute;
    z-index:10;
}

/* A seeming lacuna in Blueprint's classes. It include 'last' for the last
 * element in a floated 'row', but not a 'first' to clear floats from the
 * previous 'row'.
 */
.first { clear:both; }

.clear-left { clear:left; }

li.required>label { font-weight:bold !important; }

.shadow {
    -moz-box-shadow: 5px 5px 5px var(--addgene-border-gray-1);
    -webkit-box-shadow: 5px 5px 5px var(--addgene-border-gray-1);
    box-shadow: 5px 5px 5px var(--addgene-border-gray-1);
}

.warning {
    padding: 4px;
    border: 2px solid var(--state-warning-border);
    border-radius: var(--addgene-alert-border-radius);
    background: var(--state-warning-bg);
    color: var(--state-warning-text);
}

.errors {
    padding: 4px;
    border: 2px solid var(--state-danger-border);
    border-radius: var(--addgene-alert-border-radius);
    background: var(--state-danger-bg);
    color: var(--state-danger-text);
}

.errorlist {
    margin: 1px 0; /* overrides the margins from blueprint/screen.css */
    padding: 2px 4px;
    border: 2px solid var(--state-danger-border);
    border-radius: var(--addgene-alert-border-radius);
    background: var(--state-danger-bg);
    color: var(--state-danger-text);
    list-style-type: none;
    width: 60%;
}

.errorlist li { margin:2px 0px; }

.expando img {
    margin:0 3px 1px 0;
    vertical-align:middle;
}

.list-align {
    text-align:left;
    list-style-type:none;
    padding-left:0px;
}

/* innoculate sequence sort table */
td.hidden{ display:none  }
div.hidden{ display:none  }
a.hidden{ display:none  }


/* jQuery standard Dialog title background color */
div.ui-widget-header {
 background-image: none;
 background-color: var(--addgene-blue);
}

[data-toggle] {
    cursor: pointer;
    text-decoration: underline;
}