/*
Filename:         lims_style_screen.css
Coder:            Ahmed Omer [aomer@loxooncology.com]
Location:         /css/lims_style_screen.css
Description:      This is the main screen style sheet for Loxo SB-LIMS
*/

/* BODY DEFAULTS ------------------------------------------------------------------------------------------------- */
/* This section defines the look of the overall page, as well as the display of most basic HTML tags. */

html {
    scroll-behavior: smooth;
}

body, body.tertnav0, body.tertnav1, body.tertnav {
    margin: 0;
}

div, td, th, ul, ol, li, blockquote, p {
    font-weight: normal;
    color: #000000;
}

/* hack to fix PC IE 5.x CSS bug - see: http://www.tantek.com/CSS/Examples/boxmodelhack.html */
input, textarea, option, button {
    font-family: 'Roboto', sans-serif;
}

div, td, th, ul, ol, li, blockquote, p {
    font-weight: normal;
    line-height: 1.3em;
    color: #000000;
}

p, ol, ul {
    margin-top: 0;
    margin-bottom: 1em;
}

li {
    margin-top: .25em;
    margin-bottom: 0;
}

ol li, ul li {
    margin-left: 1.5em;
}

ol.nested, ul.nested {
    margin-top: 0;
    margin-bottom: 0;
}

ol.nested li, ul.nested li, ol.small li, ul.small li {
    font-size: 10px;
}

hr {
    color: #263f6a;
    width: 100%;
}

small, .small {
    font-size: 10px;
}

strong, .strong {
    font-weight: bold;
    letter-spacing: .7px;
}

em {
    font-style: italic;
}

code, tt {
    font-family: courier, monospace;
    font-weight: normal;
}

.null {
    color: #bbbbbb !important;
    font-style: italic;
}

pre {
    font-family: monospace, courier;
    font-size: 12px;
    font-weight: normal;
}

.symbol, symbol {
    font-family: symbol;
}

img.inline {
    margin: 1em;
}

img.icon16 {
    height: 16px !important;
}

img.icon32 {
    height: 32px !important;
}

img.icon64 {
    height: 64px !important;
}

.error {
    font-weight: bold;
    color: #ff0000;
}

h1.error {
    border-left: solid 4px #f00;
}

.keyword {
    color: #ff0000;
}

.flash-message {
    border-radius: 7px;
    padding: 10px;
    margin-bottom: 5px;
}

.flash-message.flash-success {
    border: 2px solid #48c78e;
    background-color: #ebf9f3;
}

.flash-message.flash-alert {
    border: 2px solid #ffb700;
    background-color: #fff8e6;
}

.flash-message.flash-error {
    border: 2px solid #f14668;
    background-color: #fbd0d8;
}

.flash-message-transient-container {
    position: fixed;
    width: 100%;
    text-align: center;
    left: 0;
}

.flash-message-transient-container .flash-message {
    width: 98%;
    margin: auto;
}

.flash-message-transient-container * {
    text-align: left;
}

div.pagination a {
    display: inline-block;
    border: 1px solid var(--primary-color-1);
    color: var(--dark-text-color);
    padding: 3px 5px;
    border-radius: 3px;
    background-color: #f5f5f5;
    margin: 0 1px;
}

div.pagination a:hover {
    text-decoration: none;
    color: var(--dark-text-color);
}

div.pagination a:not([disabled]):hover,
div.pagination a.current {
    background-color: #ddd;
}

div, div.pagination a:visited {
    color: var(--dark-text-color);
}

a, a:hover, a:link, a:visited, input[type='submit'].fake-link, .fake-link {
    color: var(--primary-color-1);
}

/* class to emulate link appearance on other elements */
.fake-link, input[type='submit'].fake-link {
    font-size:12px;
    padding:0;
    margin:0;
    background-color:transparent;
    font-weight:normal;
    border:none;
    text-decoration:underline;
}

.fake-link:hover {
    cursor: pointer;
}

#activity-log ul {
    padding: 0;
}

#activity-log li {
    font-size: 12px;
    padding-bottom: 5px;
    margin-left: 1.1em;
}

#activity-log #full-history {
    padding: 0 5px;
}

#activity-log h4 {
    margin: 5px 0 5px 0;
}

.list-preferences {
	overflow: hidden;
	background-color: #f5f5f5;
	border:1px solid #D5D2CA;
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 10px;
}
.list-preferences ul{
	margin: 0;
	padding: 0 0 10px;;
	width: 70%;
	column-count: 6;
}
.list-preferences ul li{
	list-style-type: none;
	margin-left: 0;
	padding: 0 10px 0 0;
}
.list-preferences ul li label {
    margin: 0;
}

#modal.ui-dialog-content {
    padding: .75em;
}

div.detail-history {
    float: right;
}

div.attachment-manager figure {
    margin: 0;
}

div.attachment-manager ul {
    margin: 0;
    padding: 0;
}

div.attachment-manager li {
    list-style-type: none;
    margin: 0 0 5px 0;
}

form.readonly div.attachment-manager li.attachment-manager-inputs {
    display: none;
}

div.attachment-manager img {
    max-height: 800px;
    max-width: 800px;
    height: auto;
    width: auto;
}

div.attachment-manager figure.doc {
    overflow:hidden;
    float:left;
}

td.viability-green {
    background-color: #a5ccbb;
}

td.viability-yellow,
td.yellow {
    background-color: #fae9be;
}

td.viability-red,
td.red {
    background-color: #e8acb7;
}

/* HEADER DEFAULTS ----------------------------------------------------------------------------------------------- */
/* This section defines the look (and in the case of H1, the physical position) of Header tags. */

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.6;
    color: var(--dark-text-color);
    margin: 5px 0 15px 0;
}

h1 {
    background-color: #fff;
    background-repeat: repeat-y;
    border-left: solid 4px var(--main-color);
    color: #000;
    font-weight: 500;
    font-size: 1.8rem;
    margin: 5px 0 15px 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    text-align: left;
    text-indent: 10px;
    width: 100%;
    -webkit-box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, .25);
    box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, .25);
}

h1#ta {
    background-color: #fdff2b;
    /*border-left: solid 10px #fdff2b;
    border-right: solid 10px #fdff2b; */
    background-image: url(/img/prism_h1_ta.jpg);
    text-indent: 85px;
    background-repeat: no-repeat;
    background-position: left;
    border: none;
}

h1#tp {
    background-color: #cbbfff;
    background-image: url(/img/prism_h1_tp.jpg);
    text-indent: 85px;
    background-repeat: no-repeat;
    background-position: left;
    border: none;
}

h1#sb {
    background-color: #ffc70f;
    background-image: url(/img/prism_h1_sb.jpg);
    text-indent: 85px;
    background-repeat: no-repeat;
    background-position: left;
    border: none;
}

h1#ldisc {
    background-color: #1ff5f8;
    background-image: url(/img/prism_h1_ldisc.jpg);
    text-indent: 85px;
    background-repeat: no-repeat;
    background-position: left;
    border: none;
}

h1#ldev {
    background-color: #03ff92;
    background-image: url(/css/prism_h1_cocryst.jpg);
    text-indent: 85px;
    background-repeat: no-repeat;
    background-position: left;
    border: none;
}

h1#ind {
    background-color: #ECD48D;
    background-image: url(/img/prism_h1_ldev.jpg);
    text-indent: 85px;
    background-repeat: no-repeat;
    background-position: left;
    border: none;
}

h1.grad {
    background-color: transparent;
    background-image: url(/img/prism_h1_grey.jpg);
    text-indent: 10px;
    background-repeat: repeat;
    background-position: left;
}

h1.inverse {
    background-image: none;
    color: #263f6a;
    font-size: 14px;
    text-indent: 10px;
    background-color: #fff;
}

h1.crud-page-title {
    padding-right: 24px;
    text-indent: 4px;
}

h1.crud-page-title > span:nth-child(2) {
    text-align: center;
}

h1.crud-page-title > span:nth-child(3) {
    text-align: right;
}

h2 {
    font-size: 1.7rem;
}

h3 {
    font-size: 1.6rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.4rem;
    margin: 5px 0 10px 0;
}

h6 {
    font-size: 1.3rem;
}

a.h1 {
    color: var(--dark-text-color);
    background-color: #2E77B6;
    border-top: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
}

a.h1:hover {
    color: #263f6a;
    text-decoration: underline;
    border: 3px solid;
    cursor: pointer
}

/* TOOL HEADERS ------------------------------------------------------------------------------------------------- */
header {
    background-color: var(--main-color);
}

div.tooltitle {
    color: var(--secondary-color);
    z-index: 100;
    height: 30px;
    margin: 0;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
}

div.tooltitlebar {
    width: 100%;
    z-index: 2;
    border-bottom: solid 1.5px var(--secondary-color);
}

div.half-div-children {
    white-space: nowrap;
}

div.half-div-children div {
    display: inline-block;
    width: 49.5%;
}

div.half-div-children div:nth-of-type(2) {
    text-align: right;
}

div.third-div-children {
    white-space: nowrap;
}

div.third-div-children div {
    display: inline-block;
    width: 33%;
    vertical-align: middle;
}

div.third-div-children div:nth-of-type(2) {
    text-align: center;
}

div.third-div-children div:nth-of-type(3) {
    text-align: right;
}

/* TITLE BAR --------------------------------------------------------------------------------------------------- */
/* This section defines the look and feel of the gradient bar on the bottom of the header. It sections off an area
   for the page title, breadcrumbs and other supporting navigation to reside. */

/* Page Title
*/
div#fixed-nav-bar.active {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #263f6a;
    z-index: 101;
    -webkit-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .1);
}

div.subtitlebar {
    width: 100%;
    z-index: -1;
    height: 30px;
    text-align: center;
}

div.sectiontitle {
    color: var(--secondary-color);
    z-index: 200;
    height: 32px;
    margin: 0;
    font-size: 28px;
    line-height: 1em;
    text-align: right;
    font-weight: bold;
}

div.pagetitle {
    color: var(--secondary-color);
    height: 31px;
    width: 100%;
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 1px;
    line-height: 28px;
    z-index: 102;
}

div.pagetitlelogo {
    width: 125px;
    overflow: hidden;
    z-index: 103;
}

div.pagetitlelogo img {
    height: 50px;
    max-width: 150px;
}

div.logo {
    width: 250px;
    height: 50px;
    z-index: 55;
    margin: 0 5px;
}

img.logo {
    height: 50px;
    z-index: 55;
}

/* Session info - non-clickable, displayed on right of bar. Displays server, who's logged in and CVS version. */
p.server {
    color: var(--secondary-color);
    font-size: 11px;
    width: 100%;
    z-index: 55;
    margin: 0;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

p.login {
    color: var(--secondary-color);
    font-size: 10px;
    z-index: 105;
}

p.version {
    color: var(--secondary-color);
    font-size: 10px;
    z-index: 95;
}

p.mainlinks a.current-link,
p.mainlinks a.current-link:visited {
    border-bottom: solid 1px #fff;
}

.breadcrumb_pipe {
    margin: 0 4px;
    color: var(--primary-inverse-1);
}

/* NAVIGATION LINKS ---------------------------------------------------------------------------------------------  */
/* This section defines the look and behavior of hyperlinks. Links that lead to outside pages look different than
   in-page anchors; this is to inform the user of their destination ahead of time to help them browse effectively. */

/* Between-document hyperlinks */
a:hover {
    opacity: .8;
    transition: .3s;
    text-decoration: underline;
}

div.leftbox {
    height: 100%;
    margin: 2px;
    padding-right: 5px;
    float: left;
    font-size: 13px;
    text-align: left;
}

div.lefthalf {
    width: 45%;
    float: left;
    margin-right: 20px;
}

div.rightbox {
    margin: 2px;
    padding-left: 5px;
    width: 70%;
    text-align: left;
    float: left;
}

div.narrow-rightbox {
    margin: 2px;
    padding-left: 5px;
    width: 15%;
    text-align: left;
    float: left;
}

div.righthalf {
    width: 50%;
    float: right;
    margin-right: 20px;
}

div.leftbox h2 {
    margin: 10px 0 5px 0;
}

div.leftbox a {
    line-height: 1.7;
}

/* Breadcrumb & topnav hyperlinks - nav across top of page that allows backtracking */

div.topbar {
    width: 100%;
    height: 150px;
    background-image: url(/img/topbar.gif);
    background-repeat: repeat-x;
    z-index: 1;
    background-color: #ffffff;
}

div.logo a, div.logo a img {
    height: 46px;
    max-width: 175px;
}

p.breadcrumb {
    font-size: 12px;
    z-index: 97;
    margin-left: 0;
    font-weight: bold;
    color: var(--primary-inverse-1);
    text-align: left;
}

p.breadcrumb a {
    margin: 0 5px;
}

p.topnav {
    font-size: 10px;
    z-index: 97;
    margin-left: 0;
    margin-bottom: 0;
    font-weight: bold;
    text-align: right;
    color: var(--primary-inverse-1);
    top: 3px;
}

p.mainlinks {
    font-size: 10px;
    z-index: 999;
    margin-left: 0;
    font-weight: bold;
    color: var(--primary-inverse-1);
    text-align: right;
}

p.breadcrumb a:link, p.breadcrumb a:visited, p.breadcrumb a:active,
p.topnav a:link, p.topnav a:visited, p.topnav a:active,
p.login a:link, p.login a:visited, p.login a:active,
p.mainlinks a:link, p.mainlinks a:visited, p.mainlinks a:active {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 400;
}

p.breadcrumb a:hover, p.topnav a:hover, p.login a:hover, p.mainlinks a:hover, th.dthead a:hover, td.dthead a:hover {
    border-bottom: solid 1px #fff;
}

td.dthead a:link, td.dthead a:visited, td.dthead a:active {
    color: var(--secondary-color);
    text-decoration: underline;
}

h1 a:link, h1 a:visited, h1 a:active {
    color: #000;
}

h1.grad a:link, h1.grad a:visited, h1.grad a:active {
    color: #263f6a;
    text-decoration: underline;
}

h1.grad a:hover {
    text-decoration: underline;
    background-color: transparent;
}

/* New window hyperlinks - for anchors that pop up the content into a new window */
[target='_blank'],
.newwindow {
    color: #999999;
    padding-left: 18px;
}

h1 a.newwindow {
    background-image: url(/img/ICN_newwindow.gif);
    color: #375f9b;
    background-position: 0 2px;
    background-repeat: no-repeat;
}

h1 a.newwindow:link, h1 a.newwindow:visited, h1 a.newwindow:active {
    color: #375f9b;
    text-decoration: underline;
    border-bottom: 1px solid #375f9b;
}

h1 a.newwindow:hover {
    color: #263f6a;
    text-decoration: underline;
    background-image: url(/img/ICN_newwindow_hover.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ffffff;
}

/* Hyperlinks - grayed-out when not linked */
.link {
    color: #999999;
}

/* Inside-document hyperlinks - for anchors that lead to content down the page */
.anchor {
    color: #999999;
    font-size: 11px;
    padding-left: 15px;
    font-weight: bold;
}

a.anchor {
    background-image: url(/img/ICN_anchor_down.gif);
    background-position: 0 3px;
    background-repeat: no-repeat;
    border-bottom: solid 1px rgba(0, 0, 0, 0);
}

a.anchor:link, a.anchor:visited, a.anchor:active {
    color: #263f6a;
    text-decoration: none;
    border-bottom: 1px solid #2E77b6;
    cursor: s-resize;
}

a.anchor:hover {
    color: #ff0000;
    text-decoration: none;
    background-image: url(/img/ICN_anchor_down_hover.gif);
    background-position: 0 3px;
    background-repeat: no-repeat;
    cursor: s-resize;
    border-bottom: 1px solid #ff0000;
}

/* Back to top rules */
.backtotop {
    color: #666666;
    font-size: 11px;
    font-weight: bold;
}

a.backtotop {
    background-position: 0 3px;
    background-repeat: no-repeat;
}

a.backtotop i {
    font-size: 10px;
}

a.backtotop:link, a.backtotop:visited, a.backtotop:active {
    color: #263f6a;
    text-decoration: none;
    border-bottom: 1px solid #2E77b6;
    cursor: n-resize;
}

a.backtotop:hover {
    color: #ff0000;
    text-decoration: none;
    background-position: 0 3px;
    background-repeat: no-repeat;
    cursor: n-resize;
    border-bottom: 1px solid #ff0000;
}

/* New window hyperlinks - for anchors that pop up the content into a new window */
[target='_blank'],
.newwindow {
    color: #999999;
    padding-left: 18px;
    background-image: url(/img/ICN_newwindow.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
}

a[target='_blank']:link, a[target='_blank']:visited, a[target='_blank']:active,
a.newwindow:link, a.newwindow:visited, a.newwindow:active {
    color: #263f6a;
    text-decoration: none;
    border-bottom: 1px solid #2E77b6;
}

[target='_blank']:hover, 
.newwindow:hover {
    color: #ff0000;
    text-decoration: none;
    background-image: url(/img/ICN_newwindow_hover.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ff0000;
}

/* Warning hyperlinks - for popup windows in lims tables  */
.warning {
    color: #ff0000;
}

a.warning:link, a.warning:visited, a.warning:active {
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid #ff0000;
    font-weight: bold;
    cursor: help;
    padding-right: 15px;
}

a.warning:hover {
    color: #263f6a;
    text-decoration: none;
    background: #ff0000;
    padding-right: 15px;
}

/* SAS hyperlinks - for anchors that lead to SAS reports */
.sas {
    color: #999999;
    padding-left: 33px;
}

a.sas {
    background-image: url(/img/ICN_sas.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
}

a.sas:link, a.sas:visited, a.sas:active {
    color: #263f6a;
    text-decoration: none;
    border-bottom: 1px solid #2E77b6;
}

a.sas:hover {
    color: #ff0000;
    text-decoration: none;
    background-image: url(/img/ICN_sas_hover.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ff0000;
}

/* Sorting by column hyperlinks - for anchors on the top of tables to sort results by criteria */
.column-sort {
    color: #999999;
}

a.column-sort:link, a.column-sort:visited, a.column-sort:active {
    color: #263f6a;
    text-decoration: none;
    border-bottom: 1px solid #2E77b6;
    margin-left: 9px;
    margin-right: 9px;
}

a.column-sort:hover {
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid #ff0000;
}

a.column-sort-up {
    padding-left: 14px;
    background-image: url(/img/ICN_column_sort_up.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
}

a.column-sort-up:link, a.column-sort-up:visited, a.column-sort-up:active {
    color: #263f6a;
    text-decoration: none;
    border-bottom: 1px solid #2E77b6;
}

a.column-sort-up:hover {
    color: #ff0000;
    text-decoration: none;
    background-image: url(/img/ICN_column_sort_up_hover.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ff0000;
}

a.column-sort-down {
    padding-left: 14px;
    background-image: url(/img/ICN_column_sort_down.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
}

a.column-sort-down:link, a.column-sort-down:visited, a.column-sort-down:active {
    color: #263f6a;
    text-decoration: none;
    border-bottom: 1px solid #2E77b6;
}

a.column-sort-down:hover {
    color: #ff0000;
    text-decoration: none;
    background-image: url(/img/ICN_column_sort_down_hover.gif);
    background-position: 0 2px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ff0000;
}

/* To temporarily disable hyperlinks */
.disable-click {
    pointer-events: none;
}

.nav-menu {
    text-align: left;
    padding: 10px;
}

.nav-menu h2 {
    margin: 5px 0;
}

.nav-menu li {
    list-style-type: none;
    margin: 7px 0px;
    line-height: 1.2;
}

.nav-menu a {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

/* Tertiary Nav */
/* The two different varieties of div.tertnav allow a programmer to manipulate the layout of the page using a PHP
   variable - $tertnav - in the header of the document. $tertnav=1 defines the layout of the tertiary navigation
   bar; $tertnav=0 completely hides any tertiary navigation bar and any buttons it may contain. The default value -
   if the variable is undefined - leaves the tertnav in. */
div.main {
    display: inline-block;
    width: 85%;
    border-left: solid 1px #263f6a;
    padding: 0 13px;
}


/* Tertiary Nav */
/* The two different varieties of div.tertnav allow a programmer to manipulate the layout of the page using a PHP
   variable - $tertnav - in the header of the document. $tertnav=1 defines the layout of the tertiary navigation
   bar; $tertnav=0 completely hides any tertiary navigation bar and any buttons it may contain. The default value -
   if the variable is undefined - leaves the tertnav in. */
div.main {
    display: inline-block;
    width: 85%;
    border-left: solid 1px #263f6a;
    padding: 0 13px;
}

div.tertnavbar, div.tertnavbar1 {
    width: 14%;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin: 0;
    -webkit-box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, .1);
    box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, .1);
}

div.tertnavbar0 {
    display: none;
}

.tertnav {
    background-color: var(--main-color);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    border-bottom: 1px solid var(--secondary-color);
    padding: 5px 8px 6px 8px;
    display: block;
}

div.tertnavbar1 a:hover {
    opacity: 1;
}

.tertnav a {
    color: var(--secondary-color);
}

a:link div.tertnav, a:visited div.tertnav, a.tertnavbar {
    color: var(--secondary-color);
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

a:active div.tertnav {
    color: #fff;
    text-decoration: none;
    background-color: rgb(46, 119, 182);
}

a:hover div.tertnav {
    color: #000;
    text-decoration: none;
    background-color: #D5D2CA;
}

/* footer */
.footer {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-top: 1px solid #dddddd;
    background-color: #ffffff;
    width: 525px;
    padding: 5px 0 0 0;
    margin: 0;
    z-index: 2;
    clear: both;
    height: 15px;
    vertical-align: -3px;
}

a:link div.footer, a:visited div.footer, a.tertnavbar {
    color: #263f6a;
    text-decoration: none;
    cursor: pointer;
}

a:active div.footer {
    color: #ffff55;
    text-decoration: none;
    background-color: #2E77B6;
}

a:hover div.footer {
    color: #263f6a;
    text-decoration: underline;
}

/* GRAPHIC STYLING --------------------------------------------------------------------------------------------- */
/* This is the eye candy do make the home page pretty. Don't use it for anything now... it's a work in progress.  */
.leftdash {
    border-left: 1px dotted #cccccc;
    padding-left: 5px;
}

.topdash {
    border-top: 1px dotted #cccccc;
}

.grayrule1 {
    border-bottom: 1px solid #cccccc;
}

.padding {
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100%;
}

.box1 {
    border: 1px solid #000000;
}

.box2 {
    padding: 1px;
    border-top: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
}

.boxtitle {
    background-color: #f3f3f3;
    font-size: 10px;
    font-weight: bold;
    padding: 1px;
}

.boxcontent {
    padding: 1px;
    font-size: 10px;
}

/* The two different varieties of div.content allow a programmer to manipulate the layout of the page using a PHP
   variable - $tertnav - in the header of the document. $tertnav=1 adds the tertnav, $tertnav=0 removes it and makes
   the 'content' area full width. The default state -  if the variable is undefined - leaves the tertnav in. */


/* The default 'div.content' left in for backwards compatibility. 'div.content1' means there is a tertiary nav and makes room for it. */
div.content, div.content1, div.bottom {
    padding: 10px 15px 20px 15px;
}

/* This means there is *not* a tertiary nav, and this makes room for it. */
div.content0 {
    padding: 10px 15px 50px 15px;
}

/* This defines a '1-column' layout appropriate for long articles. The '1-1' div is the left column, the '1-2' div
   is for side notes. As it stands now, the 'side notes' pop below the content in a narrow browser window. */
div.column-1 {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px dotted #cccccc;
    float: left;
}

div.column-2 {
    margin-right: 15px;
}

/* This defines a '1-column' layout appropriate for long articles. The '1-1' div is the left column, the '1-2' div
   is for side notes. As it stands now, the 'side notes' pop below the content in a narrow browser window. */
div.column-1-1 {
    width: 500px;
    margin-right: 50px;
    float: left;
}

div.sidebar {
    width: 175px;
    float: left;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    padding: 10px;
}

/* This defines a '2-column' layout appropriate for file listings and such (see the Forms page for an example).
   The '2-1' div is the left column, the '2-2' div is the right column. The right column pops below the left one
   in a narrow browser window. */
div.column-2-1 {
    width: 325px;
    margin-right: 25px;
    float: left;
}

div.column-2-2 {
    width: 325px;
}

/* This div is useful for making headers and columns that bridge both columns in a 2-column layout.  */
div.clear {
    clear: both;
    width: 100%;
}


/* The first content element on every page should have one of these IDs assigned. It takes away the top margins, which
   means from page to page the content appears at a consistent place each time (which wouldn't happen considering the
   differences in top margins between, say, an 'h2' and a 'p'. #second and #third are necessary for 2 and 3 column
   layouts. This is a temporary fix, until CSS2 'first child' contextual selectors get browser support. */
#first, #second, #third, #fourth {
    margin-top: 0;
}

/* Miscellaneous stylings */
.indent {
    margin-left: 25px;
}

/* IFRAMES ------------------------------------------------------------------------------------------------------ */
/* This styles 'inline frames', the HTML4.0 spec for using another HTML document as an inline region, similar to
   an image or a text area. */
iframe {
    margin-bottom: 1em;
    margin-top: 5px;
}


/* TABLES ------------------------------------------------------------------------------------------------------- */
table {
    margin: 5px 0;
    border-spacing: 0;
}

td table {
    margin: 0;
}

td h1, td h2, td h3, td h4, td h5, td h6, td div, td ul, td ol, td li, td blockquote, td p {
    margin-top: 0;
}

td {
    border: solid 2px #fff;
}

table.detail-view {
    vertical-align: top;
}

table.detail-view td.table-parent {
    padding: 0;
    z-index: 0;
    position: relative;
}

/* Tables for data */
table.list-view tr,
table.detail-view tr {
    background-color: #f5f5f5;
}

table.list-view th,
table.list-view td,
table.detail-view th,
table.detail-view td {
    padding: 5px 5px;
    font-size: 12px;
}

table.list-view thead th,
table.detail-view thead th {
    background-color: var(--primary-color-2);
    color: white;
    font-size: 14px;
    white-space: nowrap;
}

table.detail-view table.detail-view table.datatable thead th {
    background-color: transparent;
    color: #000;
}

table.list-view thead th a,
table.list-view thead th a:visited,
table.detail-view thead th a,
table.detail-view thead th a:visited {
    color: white;
}

/*background-color: #ddd;*/
/* top and bottom borders to highlight the current row */

/*
table.list-view tbody tr:hover td {
    border-bottom-color: rgb(46, 119, 182, .5);
    border-top-color: rgb(46, 119, 182, .5);
}
*/

table.list-view tbody td:hover{
    /* all td borders when hovering */
    border-color: rgb(46, 119, 182, .7);
}

/* special td border when the focus is within */
/*
table.list-view tbody tr td:focus-within {
    border-color: var(--secondary-color-1);
}
*/
table.list-view .update-desc {
    min-width: 80px;
}

table.list-view .large-text {
    min-width: 200px;
}

table.auto-stripe tr:nth-child(2n+1)
{
    background-color: var(--main-color-bright);
}

table.detail-view tbody th {
    font-weight: bold;
    text-align: left;
}

table.detail-view th,
table.detail-view td {
    border: solid 1px #fff;
}

td.number, td.right, input.number {
    text-align: right;
}

div.right {
    text-align: right;
    display: inline-block;
}

td.label, td.bold {
    font-weight: bold;
}

table td.remove-user {
    padding: 0;
}

td.remove-user label {
    margin: 0;
    padding: 0 0 0 5px;
    line-height: 2;
}

figcaption, figure {
    text-align: center;
}

table.list-view tr.bg1,
table.detail-view tr.bg1,
tr.bg1 {
    background-color: #f5f5f5;
}

table.list-view tr.bg2,
table.detail-view tr.bg2,
tr.bg2 {
    background-color: var(--main-color-med-opacity);
}
table.list-view tr.bg3,
table.detail-view tr.bg3,
tr.bg3 {
    background-color: #FBF5D0;
}

td.bg4,
tr.bg4,
table.list-view tr.bg4,
table.detail-view tr.bg4 {
     background-color: #F5E9F7;
}

tr.updated-row,
table.list-view tr.updated-row,
table.detail-view tr.updated-row {
     background-color: #EBF9F3;
}

tr.border-top td {
    border-top: 2px double #111;
}

td.center, th.center, tr.center {
    text-align: center;
}

th.dthead, td.dthead,
table.list-view th.dthead {
    font-size: 17px;
    text-align: center;
}

th.dtheadinverse, td.dtheadinvese,
table.list-view th.dtheadinverse {
    background-color: var(--secondary-color);
    color: var(--main-color);
    font-weight: 500;
    font-size: 17px;
    text-align: center;
}

td.dtsub, th.dtsub {
    font-weight: 500;
    font-size: 16px;
    background-color: var(--primary-color-2);
    color: var(--primary-inverse-2);
}

td.dtdata, td.dtform, td.dtlabel, td.dtnote, td.dtfooter {
    background-color: unset;
}

td.dtdata1, td.dtform1, td.dtlabel1, td.dtnote1, td.dtfooter1, td.dttiny1, td.dttiny {
    background-color: #f5f5f5;
}

td.dtdata2, td.dtform2, td.dtlabel2, td.dtnote2, td.dtfooter2, td.dttiny2 {
    background-color: var(--main-color-bright);
}

td.dtdata3, td.dtform3, td.dtlabel3, td.dtnote3, td.dtfooter3, td.dttiny3 {
    background-color: #FBF5D0;
}

tr:hover td:not(.dthead) {
    /* Not sure why this is blank CRH 03/27/23 */
}

/* Target priority cell colors for LIMS tools */
/* These should have a color scheme, not sure why the coloring has been removed CRH /3/27/23 */
td.dttarget-urgent, td.dttarget-high, td.dttarget-low {
}

td.dtnote, td.dtnote1, td.dtnote2, td.dtnote3 {
    font-style: oblique;
}

td.dtsubmit, td.dtsubmit1, td.dtsubmit2, td.dtsubmit3 {
    background-color: var(--secondary-color-3);
    color: var(--secondary-inverse-3);
    font-weight: 1000;
}

.dtlabel1, .dtlabel2, .dtlabel, .label, .dtlabel3 {
    font-weight: 800;
}

span.dtlabel {
    font-weight: 800;
}

td.dttiny, td.dttiny1, td.dttiny2, .td.dtiny3, td.compact {
    font-size: smaller;
}

/* FORMS --------------------------------------------------------------------------------------------------------- */
form.blockform {
    margin: 10px 0 30px 0;
    border-bottom: solid 1px #ccc;
    padding-bottom: 15px;
}

div.inline-block {
    display: inline-block;
    vertical-align: top;
}

div.form-column {
    display: inline-block;
    margin-right: 60px;
    vertical-align: top;
    min-width: 340px;
}

div.form-column * {
    text-align: left;
}

div.form-column:nth-of-type(even) {
    text-align: right;
    margin-right: 0px;
}

div.form-wrapper {
    display: inline-block;
    position: relative;
}

div.form-sticky-links {
    text-align: right;
    position: sticky;
    bottom: 0;
    height: 56px;
    line-height: 56px;
    width: inherit;
}

/* all button types */
input[type='submit'], button, .button, a.button, .buttonsmall, a.buttonsmall {
    background-color: var(--main-color);
    color: var(--primary-inverse-1);
    padding: 2px 7px;
    border: solid 2px var(--main-color);
    border-radius: 7px;
    margin: 0 5px 5px 0;
    width: auto;
    font-weight: 500;
    text-decoration: none;
    font-size: 1.2rem;
}

/* small buttons */
.buttonsmall, a.buttonsmall, input.buttonsmall {
    width: unset;
    font-size: .9rem;
    padding: 1px 5px;
    display: inline-block;
}

input[type='submit']:hover, button:hover, .buttonsmall:hover, .button:hover,
input[type='submit']:focus, button:focus, .buttonsmall:focus, .button:focus
{
    cursor: pointer;
    color: var(--main-color);
    background-color: #f5f5f5;
    transition: 0.5s;
    opacity: .8;
}

input[type='submit']:active:focus, button:active:focus, .buttonsmall:active:focus, .button:active:focus,
input[type='submit']:active, button:active, .buttonsmall:active, .button:active {
    cursor: progress;
    border-color: var(--primary-color-3);
    color: var(--primary-color-3);
    background-color: #f5f5f5;
    transition-duration: 0.05s;
}

/* disabled button UI standard is gray with no cursor */
form input[type='submit'][disabled], button:disabled, .button:disabled, .buttonsmall:disabled {
	color:revert;
	background-color:revert;
}
form input[type='submit'][disabled]:hover, button:disabled, .button:disabled:hover, .buttonsmall:disabled:hover {
	color:revert
	background-color:revert;
	opacity:revert;
	cursor: revert;
}

div.form-sticky-links input[type='submit'], div.form-sticky-links button, div.form-sticky-links .button, div.form-sticky-links a.button {
    font-size: 1.5rem;
    font-weight: 400;
}

input[type='file'] {
    margin: 0 0 4px 0;
}


input:focus, select:focus, textarea:focus, input.file:focus {
    border: 2px solid var(--main-color);
    border-color: var(--main-color);
}

input:not([type="hidden"]) + input {
    margin-top: 7px;
}

/* don't apply the input focus to buttons, highlights them and washes out text
 This requires a placeholder=' ' at a minimum to work */

/* On inputs of class search_form, mark non empty with a different border */
.search_form input:not([type="submit"]):not(:placeholder-shown),
.search_form textarea:not(:placeholder-shown) {
        border-color:  var(--secondary-color-1);
}

/* On selects having no option value checked inside class search_form, mark with a different border */
.search_form select:has(option:checked:not([value])),
.search_form select:has(option:checked:not([value=""])) {
        border-color:  var(--secondary-color-1);
}

label:not(.inline) {
    margin: 5px 15px 15px 0;
    display: block;
    width: 100%;
    max-width: 300px;
    vertical-align: top;
}

td label:not(.inline) {
    margin: 0;
    width: 100%;
}

label.inline {
    display: inline-block;
}

label.cut-site-group {
    margin: 0;
}

.insert-seq-checkbox label {
    width: 50px;
    margin: 0;
    display: inline-block;
    vertical-align: baseline;
}

#cut-sites-input-container td:nth-of-type(even) {
    background-color: #fff;
}

div.half-sized-labels {
    white-space: nowrap;
}

div.half-sized-labels label {
    display: inline-block;
    width: 50%;
    max-width: unset;
    padding: 0 20px 0 0;
}

label.inline:nth-of-type(2)::after {
    content: ' ';
    display: block;
}

input[type='checkbox'] {
    height: 15px;
    margin: 0;
    padding: 0;
    display: inline;
    width: unset;
    vertical-align: middle;
}

textarea.readonly,
textarea[readonly='true'],
input.readonly,
input[readonly='true'] {
    border: none;
    background-color: transparent;
    resize: none;
}

a input.readonly,
a input[readonly='true'] {
    color: var(--primary-color-1);
    text-decoration: underline;
}

a textarea.readonly:hover,
a textarea[readonly='true']:hover,
a input.readonly:hover,
a input[readonly='true']:hover {
    cursor: pointer;
}

select:disabled[readonly='true'] {
    opacity: 1;
    color: black;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
}

input, textarea, select {
    background-color: #fff;
    border: solid 1px #000;
    margin-right: 2px;
}

input.small, select.small, textarea.small {
    font-size: 11px;
    background-color: #fffff4;
    color: #263f6a;
    font-family: 'Roboto', sans-serif;
    border: solid 1px #d5d2ca;
    margin: 0 2px;
    width: revert;
}

option:checked, option:hover, option:active, option:focus-visible {
    font-weight: bold;
    font-style: oblique;
}

input.tiny-width {
    width: 40px;
}

input.small-width,
select.small-width {
    width: 60px;
}

input.small-med-width {
    width: 80px;
}

th.med-width,
input.med-width,
select.med-width {
    width: 110px; /*just enough to render date picker */
}

input.med-large-width,
select.med-large-width {
    width: 160px;
}

.ui-datepicker-trigger {
    width: 16px;
    padding: 2px 3px;
    display: inline-block;
    vertical-align: sub;
}

.DatePicker, .hasDatePicker {
    width: 6em;
    white-space: nowrap;
}

.hidden_info {
    display: none;
    background-color: var(--secondary-inverse-2);
    color: var(--main-color);
    border: 1px solid var(--primary-color-2)
}

.record_info:hover ~ .hidden_info {
    display: block;
    position: absolute;
    margin-top: 10px;
    z-index: 2
}

.flex-container {
    display: flex;
    flex-flow: row wrap;
}

.flex-container > span {
    background-color: rgba(38, 63, 106, .1);
    border: 1px dotted var(--primary-color-1);
    margin: 0rem 1rem;
    padding: 5px 1px;
    font-size: larger;
    text-align: center;
}

th.large-width,
input.large-width,
select.large-width {
    width: 250px;
}

th.xlarge-width,
input.xlarge-width,
select.xlarge-width {
    width: 400px;
}

input.full-width,
select.full-width,
textarea.full-width {
    width: 100%;
}

fieldset {
    margin-bottom: 10px;
}

legend {
    display: block;
    font-size: 1.1rem;
    padding: 5px;
}

/* CODE ----------------------------------------------------------------------------------------------------------- */
.code-normal{
    font-family: 'Roboto Mono', courier, monospace;
    font-size: 11px;
}

.code, code {
    font-family: 'Roboto Mono', courier, monospace;
    color: var(--dark-text-color);
    font-weight: bold;
    font-size: 11px;
}

.code-content {
    font-family: 'Roboto Mono', courier, monospace;
    color: #777777;
    font-weight: normal;
    font-size: 11px;
}

/* Windows for copying source code */
.codewindow {
    color: #777777;
    font-weight: normal;
    font-size: 11px;
    font-family: 'Roboto Mono', courier, monospace;
    width: 350px;
    margin-bottom: 25px;
}


/* GRAPHIC DESIGN -------------------------------------------------------------------------------------------------  */


span.dashrule {
    line-height: 1px;
    height: 1px;
    display: inline;
    width: 100%;
}

div.dashrule {
    padding: 10px 0;
    border-bottom: 1px dotted #cccccc;
    margin-bottom: 15px;
}

td, p {
    font-size: 13px;
    line-height: 1.1;
    padding: 2px;
}

.example {
    font-style: oblique;
}

.alias {
    font-style: oblique;
    color: var(--secondary-color-1);
}

/* Targets/Sequences */
form#edit-target {
    white-space: nowrap;
    margin-right: 30px;
}

form#edit-target div.left-side,
form#edit-target div.right-side {
    display: inline-block;
    width: 40%;
    vertical-align: top;
}

form#edit-target div.left-side {
    max-width: 350px;
}

form#edit-target div.right-side {
    width: 60%;
    margin-left: 25px;
}

h5.sequence-title {
    max-width: 500px;
}

h5.sequence-title > span {
    display: inline-block;
    width: 50%;
}

h5.sequence-title span.title {
    text-align: left;
}

.dna-and-aa-seq-holder div.seq-group-holder {
    display: inline-block;
    vertical-align: top;
    margin: 0 30px 0 0;
}

div.sequence {
    text-align: right;
    white-space: normal;
    background-color: #f5f5f5;
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .1);
    width: 500px;
    margin: 10px 0 25px 0;
}

div.sequence-id-box {
    text-align: left;
}

div.seq-widget-data-row {
    margin: 5px 0;
}

div.sequence.insert_sequence {
    border: solid 1px var(--primary-color-1);
}

textarea.sequence-text {
    resize: none;
    width: 90%;
    vertical-align: top;
    display: inline-block;
    line-height: 1.3;
    margin: .5rem 0;
    border: solid 1px #f5f5f5;
    background-color: #f5f5f5;
    padding: 0;
    height: 100%;
    font-family: monospace;
    font-size: 1rem;
}

pre.sequence-line-count {
    width: 9%;
    text-align: right;
    vertical-align: top;
    padding-right: 5px;
    display: inline-block;
    line-height: 1.3;
    margin: .5rem 0;
    border: solid 1px #f5f5f5;
}

span.edit-sequence,
span.save-sequence,
span.copy-sequence-raw,
span.copy-sequence-formatted,
span.copy-sequence-numbered,
span.copy-sequence-rna {
    text-align: right;
    padding: 0 5px 0 0;
    display: inline-block;
}

#cut-sites-input-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

textarea.genbank-parser {
    display: inline-block;
    width: 800px;
    height: 500px;
    font-family: monospace;
}

textarea.results-display {
    background-color: rgb(237, 237, 233);
    overflow-y: auto;
    width: 100%;
    color: rgb(108, 117, 125);
}

div.genbank-parser-options {
    display: inline-block;
    vertical-align: top;
    margin: 0 20px;
}

ul.users {
    padding: 0;
    list-style-type: none;
}

/* layout related classes */
.expandable {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.expandable-closed {
    max-height: 400px;
    overflow: hidden;
    animation-duration: 4s;
    /*animation-name: expand-close;*/
}

.expandable-opened {
    max-height: unset;
    animation-duration: 4s;
    /*animation-name: expand-open;*/
}

@keyframes expand-open {
    0% {
        max-height: 400px;
    }
    100% {
        max-height: 3000px;
    }
}

@keyframes expand-close {
    0% {
        max-height: 3000px;
    }
    100% {
        max-height: 400px;
    }
}

.expandable .expand-button {
    position: absolute;
    bottom: 0;
    background-color: rgba(38, 63, 106, .9);
    -webkit-box-shadow: 0 -4px 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 -4px 1px 1px rgba(0, 0, 0, .1);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
    padding: 5px 0;
    color: #fff;
}

.expandable .expand-button:hover {
    cursor: pointer;
}

.y-split-parent {
    white-space: nowrap;
    text-align: center;
}

.y-split {
    display: inline-block;
    text-align: left;
    white-space: normal;
    vertical-align: top;
}

.y-split.half {
    width: 50%;
}

.y-split.third {
    width: 33%;
}

.y-split.quarter {
    width: 25%;
}

/* chat-box --------------------------------------------------------------------------------------------------------- */
.chat-box {
    border-style: solid;
    border-width: 1px;
    border-color: gray;
}

.chat-box .comment-date {
    margin-left: 2px;
    color: gray
}


.chat-box .comment-container-self {
    width: 80%;
    margin-top: 5px;
    display: flex;
    align-items: flex-start;
}

.chat-box .comment-container-self .comment-name {
    width: 15%;
    border-width: 1px;
    border-radius: 10px;
    border-color: lightgray;
    padding: 3px;
    margin: 2px;
    text-align: center;
    background-color: darkseagreen;
    font-size: 10px
}

.chat-box .comment-container-self .comment {
    background-color: darkseagreen;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: lightgray;
    padding: 10px;
    margin-top: 2px;
    overflow-wrap: break-word;
    font-size: 12px;
    color: black;
}

.chat-box .comment-container-others {
    width: 80%;
    margin-top: 5px;
    display: flex;
    align-items: flex-start;
}

.chat-box .comment-container-others .comment-name {
    width: 15%;
    border-width: 1px;
    border-radius: 10px;
    border-color: lightgray;
    padding: 3px;
    margin: 2px;
    text-align: center;
    background-color: lightgray;
    font-size: 10px
}

.chat-box .comment-container-others .comment {
    background-color: lightgray;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    border-color: lightgray;
    padding: 10px;
    margin-top: 2px;
    overflow-wrap: break-word;
    font-size: 12px;
    color: black;
}

.chat-box .del-button {
    position: absolute;
    background-color: indianred;
    font-size: 10px;
    margin: 0;
    padding: 2px;
}

.chat-box .comment-submit {
    margin-left: 10px;
    width: 80%;
    border-radius: 5px;
    border-color: dimgrey
}

.chat-box .comment-box-vertical {
    width: 80%;
}

.rowcount {
    font-style: oblique;
    color: var(--secondary-color-1);
}

/* styles to handle expandable images */
img.expandable:hover {
    cursor: pointer;
}
div.fill-screen:hover {
    cursor: pointer;
}
div.fill-screen {
    background-color: rgba(120, 120, 120, .6);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 102;
    text-align: center;
}

div.fill-screen .cutoff-box {
    position: relative;
    height: 100%;
    max-width: 98%;
    display: inline-block;
    overflow: hidden;
    z-index: 100;
}

div.fill-screen .cutoff-box img {
    max-width: 100%;
}

div.fill-screen .modal-tool-bar {
    text-align: right;
    position: fixed;
    top: 0;
    right: 40px;
    z-index: 100;
    padding: 11px;
    background-color: transparent;
}
div.fill-screen .modal-exit-button {
    font-size: 35px;
    position: relative;
    border: none;
}

p.click-to-expand {
    width:100%;
    text-align:right;
}

div.zoomable {
    overflow: hidden;
}

div.zoomable img {
    margin: 0;
    padding: 0;
}