body {
        margin: 0px;
}
#header {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12pt;
}
#comments {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
}
.buttons {
        font-family: Verdana, Arial, Helvetica, sans-serif;
}
.types {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
}
.verySmall {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 6pt;
}
.micro-small {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 4pt;
}
.very-small {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 6pt;
}
.small {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 7pt;
}
.small-medium {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
}
.medium {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10pt;
}
.medium-big {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11pt;
}
.big {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12pt;
}
.veryBig {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 16pt;
}
.courier-small {
        font-family: monospace;
        font-size: 9pt;
}
table.bg_color {
        background-color: #99FFCC;
}
table.staff_help {
        background-color: #F5F5DC;
        border: 1px solid #000080;
}
table.cust_box_msg {
        background-color: #F0F0F0;
        border: 1px solid #000080;
}
table#it_docs {
        background: white;
        border: 1px solid gray;
        border-collapse: separate;
        color: inherit;
        empty-cells: show;
        margin-left: 3.5em;
        padding: 0.5em;
        text-align: left;
        width: 75%;
}
table#it_docs caption {
        font-weight: bold;
        margin-left: 3.0em;
        padding: 0.25em;
        text-align: left;
        text-decoration: underline;
}
table#it_docs th {
        padding: 0em 1.0em 0em 1.0em;
        text-align: left;
}
table#it_docs td {
        padding: 0em 1.0em 0em 1.0em;
        text-align: left;
        vertical-align: top;
}
table.simple_border {
        border: 1px solid gray;
}
table.cust_view {
        background-color: #99FFCC;
        border: 1px solid #000080;
}
table.cust_notice {
        background-color: #CC0000;
        border: 1px solid #000080;
}
table.staff_view {
        background-color: #B0C0C0;
        border: 1px solid #000080;
        font-family: Verdana, Arial, sans-serif;
}

table.search_bar_view {
        background-color: #85CFDF;
        border: 1px solid #000080;
}
table.account_view {
        background-color: #E9D4AA;
        border: 1px solid #000080;
}
table.billing_view {
        background-color: #98CA91;
        border: 1px solid #000080;
}
table.pi_view {
        background-color: #EBDEF0;
        border: 1px solid #000080;
}
td.billing_view {
        background-color: #98CA91;
        border: 1px solid #000080;
}
table.contact_view {
        background-color: #DFBF81;
        border: 1px solid #000080;
}
table.document_view {
        background-color: #CCCCBB;
        border: 1px solid #333333;
        border-spacing: 0px;
}
table.fish_view {
        background-color: #81CFDF;
        border: 1px solid #000080;
}
table.mta_view {
        background-color: #D2C7FF;
        border: 1px solid #000080;
}
table.order_view {
        background-color: #AAE9D4;
        border: 1px solid #000080;
}
table.shipping_view {
        background-color: #91CACA;
        border: 1px solid #000080;
}
td.shipping_view {
        background-color: #91CACA;
        border: 1px solid #000080;
}
table.zpc_view {
        background-color: #DADADA;
        border: 1px solid #000080;
}
td.zpc_view {
        background-color: #DADADA;
        border: 1px solid #000080;
}
table.zpd_view {
        background-color: #DAE6ED;
        border: 1px solid #000080;
}
td.zpd_view {
        background-color: #DAE6ED;
        border: 1px solid #000080;
}
table.zpu_view {
        background-color: #DAE6ED;
        border: 1px solid #000080;
}
td.zpu_view {
        background-color: #DAE6ED;
        border: 1px solid #000080;
}
table.zygosity_view {
        background-color: #FAE6F9;
        border: 1px solid #000080;
}
.bgWater { background-image:url('/images/waterDrop.png'); background-repeat: no-repeat; background-size: 50%; }
td.doc_col_data {
        color: #26454B;
        font-weight: 400;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
}
td.doc_col_data_bold {
        color: #26454B;
        font-weight: 700;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
}
td.doc_col_data_ul {
        color: #26454B;
        font-weight: 400;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
        border-bottom: 1px solid black;
}
td.doc_col_data_bord {
        color: #26454B;
        font-weight: 400;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
        border: 1px solid black;
}
td.doc_col_data_bord_br {
        color: #26454B;
        font-weight: 400;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
}
td.doc_col_descr {
        color: #1B4750;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
        text-align: center;
}
td.doc_col_descr_ul {
        border-bottom: 1px solid #000080;
        color: #1B4750;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 8pt;
        text-align: center;
}
td.mo_col_descr {
        color: #5E5A80;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 7pt;
}
td.mo_col_descr_ul {
        border-bottom: 1px solid #000080;
        color: #5E5A80;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 7pt;
}
td.mo_col_data {
        color: #153E7E;
        font-weight: bold;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 7pt;
}
td.mo_col_data_shadow {
        color: #153E7E;
        font-weight: bold;
        text-shadow: 1px 0px white;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 7pt;
}
td.mo_col_data_ul {
        border-bottom: 1px solid #000080;
        color: #153E7E;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 7pt;
}
table#it_docs th {
        padding: 0em 1.0em 0em 1.0em;
        text-align: left;
}
table#it_docs td {
        padding: 0em 1.0em 0em 1.0em;
        text-align: left;
        vertical-align: top;
}
table.simple_border {
        border: 1px solid gray;
}
table.staff_view {
        background-color: #B0C0C0;
        border: 1px solid #000080;
        font-family: Verdana, Arial, sans-serif;
}
table.staff_row_stats_box {
        background-color: #CCCCCC;
        border: 1px solid #000020;
        text-align: center;
        width: 350px;
}
table.staff_row_stats_hdr {
        background-color: #CCCCCC;
        border: 1px solid gray;
        text-align: center;
        width: 100%;
}
table.staff_row_stats_dtl {
        background-color: #CCCCCC;
        border: 1px solid gray;
        text-align: center;
        width: 100%;
}
table.staff_view td {
        white-space: normal;
}
table.staff_view tr.alternate_bg_color {
        background: #f0f0f0;
        color: inherit;
}
table.staff_view tr.inactive_bg_color {
        background: #696969;
        font-size: 6px;
        color: inherit;
}
table.staff_view td.inactive_bg_color {
        background: #696969;
        color: inherit;
}
tr.alternate_bg_color {
        background: #f0f0f0;
        color: inherit;
}
input[type="text"], input[type="textarea"], select, input[type="radio"], input[type="checkbox"] {
   border-color: #5f5f5f;
   background-color: #ffffff;
   padding: 2px;
   border-width: 1px;
   border-style: solid;
   box-shadow: 0px 3px 3px 0px rgba(40,40,40,.20);
   font-size: 10px;
}
select, input[type='checkbox'], input[type='radio'], select[multiple] { 
   background-color: #dededf;
   background-image: linear-gradient(to bottom, #eDeDeD, #CCCCCC);
   border-radius: 0px;
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
}
select.multiple-select option:checked {
   border: 2px solid green;
}

/* Button definitions */

.button {
   font-family: Verdana, Arial, sans-serif;
   font-size: 9pt;
   background-image: linear-gradient(to bottom, #ffffff, #DDDDDD);
   padding: 2px 5px;
   border-radius: 3px;
   border: solid #5f5f5f 1px;
   padding: 1px 2px;
   margin: 1px;
}
/* These special css 'selectors' let you choose only inputs of a certain type.. */
input[type="submit"].small, input[type="button"].small  {
   font-size: 7pt;
}
a.button {
   padding: 1px 6px;
   text-decoration: none;
}

.button_big {
   font-size: 12pt;
}

.button_small {
   font-size: 7pt;
}

.button_table_view {
        background-color: #ffcc66;
        background-image: linear-gradient(to bottom, #ffeeaa, #ffcc66);
        color: #000000;
        font-size: 7pt;
}

.button_data_mgmt {
        background-color: #3366cc;
        background-image: linear-gradient(to bottom, #5386ec, #3366cc);
        color: #FFFFFF;
}

.button_data_transfer {
        background-color: #0099FF;
        background-image: linear-gradient(to bottom, #30c0ff, #0089ef);
        color: #FFFFFF;
        font-size: 8pt;
}

.button_associate_samples {
        background-color: #66FF00;
        background-image: linear-gradient(to bottom, #c0ffc0, #66ff00);
        color: #000000;
}

.button_window_nav {
        background-color: green;
        background-image: linear-gradient(to bottom, #30cc30, #009900);
        color: #FFFFFF;
}

.button_window_control {
        background-color: #111111;
        background-image: linear-gradient(to bottom, #111111, #000000);
        color: #FFFFFF;
        font-size: 7pt;
}

.button_disabled {
        color: #999999;
}
a.extinct_link:link {
        background: #CC9999;
        color: blue;
        font-size: 7pt;
        font-stretch: ultra-expanded;
        font-style: italic;
        text-decoration: none;
}
a.novisited:link {
        background: #E6E6E6;
        color: blue;
        text-decoration: none;
}
a.novisited:visited {
        background: #E6E6E6;
        color: blue;
        text-decoration: none;
}
a.novisited:hover {
        background: white;
        color: blue;
        text-decoration: underline !important;
}
a.novisited:active {
        background: white;
        color: blue;
        text-decoration: none;
}
a.novisited_hover {
        color: blue;
        text-decoration: none;
}
a.novisited_notice {
        background: #99FF99;
        color: blue;
        text-decoration: none;
}
table.project {
        background-color: white;
        border: 1px solid #000080;
        width: 90%;
}
table.project_msg_hdr {
        background-color: #D6D6D6;
        border: 1px solid #000080;
        width: 100%;
}
table.project_msg {
        background-color: #F0F0F8;
        border: 1px solid #000080;
        color: #302217;
        width: 100%;
}
table.project_msg_parent {
        background-color: #F0F0F8;
        border-bottom: 2px solid #000080;
        border-left: 1px solid #000080;
        border-right: 1px solid #000080;
        border-top: 1px solid #000080;
        color: #302217;
        width: 100%;
}
table.project_msg_sibling {
        background-color: #F0F0F8;
        border-bottom: 1px solid #000080;
        border-left: 1px solid #000080;
        border-right: 1px solid #000080;
        color: #302217;
        width: 100%;
}
table.project_msg_sides {
        background-color: #F0F0F8;
        border-left: 1px solid #000080;
        border-right: 1px solid #000080;
        color: #302217;
        width: 100%;
}
table.line_specific {
        background-color: #33CC99;
        border: 1px solid #000080;
        text-align: center;
        width: 90%;
}
td.staff_view {
        background-color: #ffcc66;
        border: 1px solid #000080;
        font-family: Verdana, Arial, sans-serif;
        font-size: 7pt;
}
div#it_docs {
        border: 1px solid navy;
        font-family: Verdana, Arial, sans-serif;
        font-size: 10pt;
        margin: 0 auto;
        text-align: left;
        width: 98%;
}
div.popup {
        font-family: Arial, Helvetica, sans-serif;
        margin: 0 auto;
        text-align: center;
        width: 90%;
}
div.zfin {
        font-size: 1.25em;
        margin: 0 auto;
        margin-bottom: 1.0em;
        text-align: center;
        width: 98%;
}
table.itemslist {
        border: 0;
        border-collapse: collapse;
        empty-cells: show;
        margin: 0 auto;
        padding: 0.25em;
        text-align: left;
        vertical-align: top;
        width: 95%;
}
table.itemslist tr.alt {
        background: #EEEEEE;
        color: black;
}
table.itemslist tr {
        width: 100%;
}
table.itemslist th {
        padding-left: 0.25em;
        padding-right: 0.25em;
}
table.itemslist th#product {
        border-bottom: double 3px black;
        width: 15%;
}
table.itemslist th#detail {
        border-bottom: double 3px black;
}
table.itemslist th#type {
        border-bottom: double 3px black;
        text-align: left;
        width: 15%;
}
table.itemslist th#quantity {
        border-bottom: double 3px black;
        padding-right: 1.0em;
        text-align: right;
        width: 15%;
}
table.itemslist th#remove {
        border-bottom: double 3px black;
        text-align: left;
        width: 5%;
}
table.itemslist td {
        padding-bottom: 0.25em;
        padding-left: 0.25em;
        padding-right: 0.25em;
        vertical-align: top;
}
table.itemslist td.comment {
        border-bottom: double 3px gray;
        border-top: solid 2px gray;
        padding-bottom: 12px;
}
table.itemslist td.commenttp {
        border-bottom: double 3px gray;
        border-top: solid 2px gray;
        padding-bottom: 12px;
        text-align: center;
}
table.itemslist td.product {
        border-bottom: solid 1px gray;
        width: 15%;
}
table.itemslist td.product1 {
        border-bottom: solid 2px gray;
        width: 15%;
}
table.itemslist td.detail {
        border-bottom: solid 1px gray;
}
table.itemslist td.detail1 {
        border-bottom: solid 2px gray;
}
table.itemslist td.type {
        border-bottom: solid 1px gray;
        text-align: left;
        width: 15%;
}
table.itemslist td.type1 {
        border-bottom: solid 2px gray;
        text-align: left;
        width: 15%;
}
table.itemslist td.quantity {
        border-bottom: solid 1px gray;
        padding-right: 1.0em;
        text-align: right;
        width: 15%;
}
table.itemslist td.quantity1 {
        border-bottom: solid 2px gray;
        padding-right: 1.0em;
        text-align: right;
        width: 15%;
}
table.itemslist td.remove {
        border-bottom: solid 1px gray;
        text-align: left;
        width: 5%;
}
table.itemslist td.remove1 {
        border-bottom: solid 2px gray;
        text-align: left;
        width: 5%;
}
table.orderform {
        border-collapse: collapse;
        border-width: 0px;
        margin: 0 auto;
        text-align: center;
        width: 600px;
}
table.orderform td {
        padding: 3px;
}
table.orderform td.title {
        font-weight: bold;
        text-align: left;
        vertical-align: top;
}
table.orderform td.lt {
        text-align: left;
        vertical-align: top;
}
table.orderform td.rt {
        text-align: right;
        vertical-align: top;
}
table.pagetitle {
        border-collapse: collapse;
        font-size: 1.25em;
        width: 100%;
}
table.pagetitle td.cr {
        text-align: center;
        vertical-align: top;
        white-space: nowrap;
        width: 34%;
}
table.pagetitle td.lt {
        padding-left: 25px;
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
        width: 33%;
}
table.pagetitle td.rt {
        padding-right: 25px;
        text-align: right;
        vertical-align: top;
        white-space: nowrap;
        width: 33%;
}
table#passwdrequest {
        border-collapse: collapse;
        font-family: Arial, Verdana, sans-serif;
        font-size: 1.0em;
        margin: 1.0em auto;
        text-align: center;
        width: 100%;
}
table#passwdrequest td.lt {
        text-align: left;
        vertical-align: top;
}
table#passwdrequest td.rt {
        text-align: right;
        vertical-align: top;
        width: 50%;
}
table#passwdrequest td#submit {
        padding: 1.0em;
}
table.quantity {
        border: 0;
        border-collapse: collapse;
        margin: 0 auto;
        text-align: left;
        width: 95%;
}
table.quantity th#detail {
        width: 35%;
}
table.quantity th#product {
        width: 20%;
}
table.quantity th#quantity {
        padding-right: 1.5em;
        text-align: right;
        width: 15%;
}
table.quantity th#type {
        width: 15%;
}
table.quantity td {
        padding: 3px;
        text-align: left;
        vertical-align: top;
        width: auto;
}
table.quantity td.button {
        padding: 5px;
        text-align: center;
        width: auto;
}
table.quantity td.continue {
        padding: 5px;
        text-align: center;
}
table.quantity td.detail {
        border-bottom: solid 1px gray;
        border-top: solid 1px gray;
}
table.quantity td.product {
        border-bottom: solid 1px gray;
        border-right: solid 1px gray;
        border-top: solid 1px gray;
        width: 15%;
}
table.quantity td.quantity {
        border-bottom: solid 1px gray;
        border-top: solid 1px gray;
        padding-bottom: 3px;
        padding-right: 2.0em;
        padding-top: 5px;
        text-align: right;
        width: 15%;
}
table.quantity td.type {
        border-bottom: solid 1px gray;
        border-left: solid 1px gray;
        border-top: solid 1px gray;
}
table.quantity input.quantity {
        text-align: right;
}
table.quantity select.quantity {
        text-align: right;
}
table.zfin {
        border: 0;
        border-collapse: collapse;
        font-size: 1.25em;
        width: 100%;
}
table.zfin tr.alt {
        background: #EEEEEE;
        color: black;
}
table.zfin th {
        padding: 2px;
        text-align: left;
}
table.zfin th.rt {
        padding: 2px;
        text-align: right;
}
table.zfin th.ctr {
        padding: 2px;
        text-align: center;
}
table.zfin td {
        padding: 2px;
        text-align: left;
        vertical-align: top;
}
table.zfin td.ctr {
        padding: 2px;
        text-align: center;
}
table.zfin td.rt {
        padding: 2px;
        text-align: right;
}
.required {
        background: white;
        color: red;
}
ul.standard {
        clear: both;
        list-style-type: none;
        margin: 2.0em;
        padding: 0.25em;
        white-space: nowrap;
}
ul.standard li {
        margin-left: 2.0em;
        padding: 0.25em;
}
ul.standard li.title {
        font-weight: bold;
        margin-left: 1.0em;
        text-decoration: underline;
}
.custom-combobox {
        display: inline-block;
        position: relative;
}
.custom-combobox-toggle {
        bottom: 0;
        height: 1.7em;
        margin-left: -1px;
        padding: 0;
        position: absolute;
        top: 0.1em;
        top: 0;
}
.custom-combobox-input {
        color: black;
        margin: 0;
        padding: 0.2em 0.3em;
}
.ui-state-default {
        border: 0px;
        border-color: #000000;
}
.autocomplete-suggestions {
        background: #FFF;
        border: 1px solid #999;
        overflow: auto;
}
.autocomplete-suggestion {
        overflow: hidden;
        padding: 2px 5px;
        white-space: nowrap;
}
.autocomplete-selected {
        background: #F0F0F0;
}
.autocomplete-suggestions strong {
        color: #3399FF;
        font-weight: normal;
}
.autocomplete-group {
        padding: 2px 5px;
}
.autocomplete-group strong {
        border-bottom: 1px solid #000;
        display: block;
}
table.label {
        background-color: #FFFFFF;
        border-radius: 10px;
        color: black;
        text-align: center;
}
table.label div {
        padding: 0 10px;
}
.diff-replace, .diff-insert, .diff-delete {
        font-weight: bold;
}
.diff-replace {
        color: blue;
}
.diff-insert {
        color: green;
}
.diff-delete {
        color: red;
        text-decoration: line-through;
}

/* For use in the datepicker widget */
.isHoliday a:visited, .isHoliday a:link {
   background: #ccccfc;
}
hdr1_sg { 
    font-weight: bold;
    margin: 1px;
    color: #2E4B3D;
    font-size: 24px;
}
hdr2_sg { 
    font-weight: bold;
    margin: 1px;
    color: #2E4B3D;
    font-size: 20px;
}
hdr3_sg { 
    font-weight: bold;
    margin: 1px;
    color: #2E4B3D;
    font-size: 16px;
}

.qtip {
   font-weight: bolder;
   max-width: 1000px !important;
}


/* Fix for UDM dropdown menus - maintain Brave functionality while fixing Firefox/Safari */

/* Base UDM functionality for Brave/Chromium browsers */
.udm li:hover > ul {
    display: block !important;
    visibility: visible !important;
    left: 0 !important;
    top: auto !important;
}

.udm > li:hover > ul {
    top: 100% !important;
}

/* Nested submenus for Brave/Chromium browsers */
.udm ul li:hover > ul {
    left: 100% !important;
    top: 0 !important;
}

/* Firefox-specific fix - create proper 50% overlap + drop-down positioning */
@-moz-document url-prefix() {
    .udm ul li:hover > ul {
        left: 100% !important;
        margin-left: -50% !important;
        top: 100% !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* Safari-specific fix - use same positioning as Firefox */
@supports (-webkit-appearance: none) and (not (-webkit-full-screen)) {
    .udm ul li:hover > ul {
        left: 100% !important;
        margin-left: -50% !important;
        top: 100% !important;
        display: block !important;
        visibility: visible !important;
    }
}

/* Main menu grid layout */
.main-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.main-grid .column {
    min-width: 0;
	padding: 10px;
    background: #f8f8fa;
    border-radius: 5px;
}

/* Navigation lists - remove default list styling */
.main-grid nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-grid nav ul li {
    margin: 3px 0;
}

/* Indentation for nested items */
.main-grid nav ul ul li {
    padding-left: 20px;
}

.main-grid nav ul ul ul li {
    padding-left: 40px;
}

.main-grid nav ul ul ul ul li {
    padding-left: 60px;
}

/* Responsive layout for mobile devices */
@media screen and (max-width: 1200px) {
    .main-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #it-admin-column {
        grid-column: 1 / 3;
		text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .main-grid {
        grid-template-columns: 1fr;
    }

    #it-admin-column {
        grid-column: auto;
        text-align: left;
    }
}