html, body {
    height: 100%;
    min-width: 350px;
}

body {
    background-color: #fdfdfd;
    font-family: helvetica;
    margin: 0;
    font-size: 10pt;
}

a {
    color: var(--ops-a-fg);
    text-decoration: underline;
}

a:hover {
    color: var(--ops-a-hover-fg);
    text-decoration: underline;
}

hr {
    color: #ff9900;
}

h1, h2, h3 {
    font-weight: bold;
    color: var(--ops-h-fg);
}

h1 { font-size: 15pt; }
h2 { font-size: 13pt; }
h3 { font-size: 11pt; }

p {
    font-size: 10pt;
    color: #000000;
}

textarea {
    font-family: helvetica;
}

ops-headermenu[loading] {
    min-height: 50.91px;
    background: var(--ops-menu-color);
    display: block;
}

ops-headermenu[loading] #ops-menu-right-col,
ops-headermenu[loading] #top-nav-items {
    display: none;
}

ops-headermenu .header_down_icon {
    font-family: 'md-icons';
    line-height: 1;
    font-feature-settings: 'liga';
    opacity: 0.9;
    position: relative;
    vertical-align: middle;
}

@media screen and (max-width: 750px) {
    ops-headermenu[loading] {
        min-height: 38.08px;
    }

    body[expanded-menu] > :not(ops-headermenu) {
        display: none;
    }
}

div.menu {
    background-color:#005261;
    text-align: center;
    font-size: 8pt;
    font-weight: bold;
    text-decoration:none;
    color:#FFFFFF;
}

div.submenu {
    position: absolute;
    font-size: 8pt;
    background-color:#185E66;
    width: 150px;
}

#top-nav-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 2em;
}

#service-worker-update-prompt {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    right: 20px;
    padding: 10px;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #005261;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 15px;
    top: unset;
    left: unset;

    display: none;
}

#do-service-worker-update {
    margin-right: 20px;
}

#do-service-worker-update:hover {
    cursor: pointer;
    color: #FFFFFF;
}

/*
 * Ops Menu Styling
 */

#top-nav-items #ops-menu-contact,
#top-nav-items #ops-menu-quick-filters,
#top-nav-items #ops-site-change,
#top-nav-items #ops-menu-logout
{
    margin: 0;
}

#ops-menu-quick-filters {
    margin-right: 40px;
    position: relative;
}

#ops-menu-quick-filters a {
    color: #ffffff;
    text-decoration: none;
    font-size: 10pt;
    font-weight: bold;
}

#ops-menu-quick-filters div {
    -webkit-transition: opacity 0.15s ease-out;
    -moz-transition: opacity 0.15s ease-out;
    -o-transition: opacity 0.15s ease-out;
    transition: opacity 0.15s ease-out;

    position: absolute;
    left: -50px;
    top: calc(1em + 2px);
    visibility: hidden;
    background: var(--ops-menu-color);
    width: 250px;
    opacity: 0;

    color: #ffffff;
    font-size: 15px;
    font-weight: normal;
    text-align: left;

    z-index: 99;
}

#ops-menu-quick-filters div a {
    color: #ffffff;
    text-decoration: none;
    font-size: 10pt;
    font-weight: bold;
    padding: 10px;
    display: block;
    text-align: left;
}

#ops-menu-quick-filters div a:hover {
    background-color: var(--ops-menu-color-hover);
}

#ops-menu-quick-filters:hover > div {
    visibility: visible;
    opacity: 1;
}

#ops-menu, #header_shadow {
    background: #005160;
}

#ops-menu {
    border: 0;
    border-spacing: 0;
    padding: 5px 10px 0px;
    width: 100%;
    font-weight: bold;
}


#ops-menu-right-col {
    text-align: right;
    vertical-align: bottom;
}

ops-headermenu #ops-menu-right-col {
    display: flex;
}

.ops-menu-large, #ops-menu-prefs, #ops-site-change, #ops-menu-logout {
    color: #ffffff;
}

.ops-menu-large {
    font-size: 14pt;
}

#ops-menu-user {
    color:#fd8200;
    font-size: 12pt;
}

#ops-menu-user, #ops-menu-prefs, #ops-site-change, #ops-menu-logout {
    text-decoration: none;
}

#ops-menu-user:hover, #ops-menu-prefs:hover, #ops-menu-contact:hover, #ops-site-change:hover, #ops-menu-logout:hover {
    text-decoration: underline;
}

#ops-menu-prefs, #ops-site-change, #ops-menu-logout {
    color: #ffffff;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: none;
}

#ops-menu-contact {
    margin-right: 10px;
    color: #ffffff;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: none;
}

#header_shadow {
    box-shadow: 0px 5px 5px #7f7f7f;
    margin-bottom: 8px;
}

.internalLink {
    position: relative;
}

/* make sure the absolutely positioned span has room */
.internalLink::after {
    content: '';
    width: 22px;
    display: inline-block;
}

.internalLinkIcon {
    width: 15px;
    height: 13px;
    display: inline-block;
    background-image: url('/static/images/link_icons.png');
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
}

/* internal link icon in the header should be white - use a different sprite instead of a filter because IE */
#header_shadow .internalLinkIcon {
    background-position-x: -15px;
    background-position-y: 0;

    /* we also want a little different spacing since these have padding */
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
}

#header_shadow .internalLink::after {
    width: 20px;
}

nav
{
    display: block;
    margin: 0px;
    padding: 0px;
}

nav ul
{
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: #005160;
    list-style: none;
    display: inline-table;
}

nav ul li
{
    float: left;
    position: relative;
}

nav ul li a
{
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    color: white;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
    font-weight: 550;
    font-size: 15px;
    font-family: sans-serif;
    white-space: nowrap;
}

nav ul li a:hover
{
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    color: white;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
    font-weight: 550;
    font-size: 15px;
    font-family: sans-serif;
    white-space: nowrap;
    border-radius: 6px 6px 0px 0px;

    background-color: #006C7F;
    background: linear-gradient(top, #006C7F 50%, #005160 100%);
    background: -moz-linear-gradient(top, #006C7F 50%, #005160 100%);
    background: -webkit-linear-gradient(top, #006C7F 50%, #005160 100%);
    background: -ms-linear-gradient(top, #006C7F 50%, #005160 100%);
}

nav ul li:hover > ul
{
    opacity: 1;
    visibility: visible;
    height: auto;
}

nav ul li ul
{
    -webkit-transition: opacity 0.15s ease-out;
    -moz-transition: opacity 0.15s ease-out;
    -o-transition: opacity 0.15s ease-out;
    transition: opacity 0.15s ease-out;
    position: absolute;
    top: 100%;
    left: -5px;
    padding: 0px 5px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    opacity: 0;
    visibility: hidden;
    background: #00373F;
    background: linear-gradient(top, #005160 0%, #00373F 40%);
    background: -moz-linear-gradient(top, #005160 0%, #00373F 40%);
    background: -webkit-linear-gradient(top, #005160 0%,#00373F 40%);
    background: -ms-linear-gradient(top, #005160 0%,#00373F 40%);
    z-index: 200;
}

nav ul li ul li
{
    float: none;
    margin: 0px;
    padding: 0px;
    list-style: none;
    z-index: 200;
}

nav ul li ul li a
{
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    color: white;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
    font-weight: 550;
    font-size: 15px;
    font-family: sans-serif;
    white-space: nowrap;
}

nav ul li ul li a:hover
{
    border-radius: 6px;

    background-color: #00515B;
    background: linear-gradient(top, #005B63 0%, #00747F 50%, #005B63 100%);
    background: -moz-linear-gradient(top, #005B63 0%, #00747F 50%, #005B63 100%);
    background: -webkit-linear-gradient(top, #005B63 0%, #00747F 50%, #005B63 100%);
    background: -ms-linear-gradient(top, #005B63 0%, #00747F 50%, #005B63 100%);
}

nav li > a:only-child:after
{
    content: '';
}


.error {
    border: 2px solid red;
}

.warning {
    color: #e67300;
}

div.error {
    display: block;
    border: 1px solid #bb6666;
    background-color: #f7baba;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 5px;
    font-weight: bold;
    border-radius: 4px;
}

label.error,
label.warning {
    font-weight: bold;
    vertical-align: middle;
    padding: 2px;
    border-radius: 4px;
}

label.warning {
    display: inline-block;
    border: 2px solid #e67300;
}

label.error {
    color: red;
    display: inline;
}

span.error {
    font-weight: bold;
    color: red;
}

.success {
    font-weight: bold;
    color: green;
}

.fail {
    font-weight: bold;
    color: red;
}

.unauthorized {
    font-weight: bold;
    color: orange;
}

a.pason1menu {
    font-size: 8pt;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
}

a.pason1menu:hover {
    font-size: 8pt;
    background: #dd5500;
    text-decoration: none;
    color: #ffffff;
}

td.bigOnpason3 {
    font-size: 15pt;
    color: #FFFFFF;
}

tr.header {
    background-color: #005261;
}

a.menu {
    text-decoration:none;
    font-weight:bold;
    font-size:8pt;
    color:#FFFFFF;
}

a.menu:hover {
    font-size:8pt;
    font-weight:bold;
    text-decoration: none;
    color:#FFFFFF;
    background: #dd5500;
}


a.formlink {
    text-decoration:underline;
    font-size:12pt;
    color:#dd5500;
}

a.formlink:hover {
    font-size:12pt;
    text-decoration: underline;
    color:#005261;
}

table.tabular-data {
    border: 1px solid black;
    padding: 3px;
    border-collapse: collapse;
}

td.tabular-data, tr.tabular-data {
    border: 1px solid black;
    padding: 3px;
}

tr.summaryTitle {
    background-color:#AACCAA;
    text-align:center;
    font-weight:bold;
    cursor: pointer;
 }

tr.summaryTitleBlue {
    background-color:#005462;
    text-align:center;
    font-weight:bold;
    cursor: pointer;
}

th {
    background-color:#AACCAA;
    text-align:center;
    font-weight:bold;
}

td.ganttGa {
    background-color:#009900;
    color:#009900;
    width: 35px;
}

td.ganttRa {
    background-color:#cc0000;
    color:#cc0000;
    width: 35px;
}

td.ganttOa {
    background-color:#00ffff;
    color:#00ffff;
    width: 35px;
}

td.ganttYa {
    background-color:#ff00ff;
    color:#ff00ff;
    width: 35px;
}

td.ganttGb {
    background-color:#009900;
    width: 35px;
}

td.ganttRb {
    background-color:#cc0000;
    width: 35px;
}

td.ganttOb {
    background-color:#00ffff;
    width: 35px;
}

td.ganttYb {
    background-color:#ff00ff;
    width: 35px;
}

td {
    font-size: 10pt;
}

ul {
    color:#000000;
}

li {
    color:#000000;
}

A.summaryTitle {
    text-decoration:underline;
    font-size:10pt;
    color:#000000;
    cursor: pointer;
}

A.summaryTitleBlue {
    text-decoration:underline;
    font-size:10pt;
    color:#FFFFFF;
    cursor: pointer;
}

#ganttbody {
    border: 0px;
    padding: 0px;
    overflow: auto;
    width: 800px;
    height: 450px;
}

#gantthead {
    border: 0px;
    padding: 0px;
    overflow: hidden;
    width: 800px;
}

#ganttside {
    border: 0px;
    padding: 0px;
    overflow: hidden;
    width: 150px;
    height: 450px;
}

#ganttcorner {
    border: 0px;
    padding: 0px;
    overflow: hidden;
    width: 150px;
}

#areaTotalbody {
    border: 0px;
    padding: 0px;
    margin: 0px;
    overflow: auto;
    height: 450px;
}

#areaTotalhead {
    border: 0px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

#areaTotalside {
    border: 0px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    width: 475px;
    height: 450px;
}

#areaTotalcorner {
    border: 0px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    width: 475px;
}

.tablebody {
    border: 0px;
    padding: 0px;
    overflow: auto;
}

td.open {
    color: red;
}

div.open {
    color: red;
}
/*
 ==========================================================================
 Flex Form classes
 ==========================================================================
*/

div.flex-form-container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;

    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}

div.flex-form-row {
    display: inherit;

    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

div.flex-form-row:not(:last-child) {
    margin-bottom: 4px;
}

/* Add your own width css class to these rows if you need to change the width. (instead of changing it here) */
div.flex-form-row label {
    -webkit-flex-order: 1;
    -moz-flex-order: 1;
    -ms-flex-order: 1;
    -o-flex-order: 1;
    order: 1;

    font-weight: bold;
    font-size: 14px;
    font-family: sans-serif;
    width: 12em;
    display: block;
}

div.flex-form-row div.entry {
    -webkit-flex-order: 2;
    -moz-flex-order: 2;
    -ms-flex-order: 2;
    -o-flex-order: 2;
    order: 2;
}


/*
 * CSS for tabs that appear on the home page.
 * Based on this tutorial:
 *   http://www.alistapart.com/articles/slidingdoors/
 */
.tabs
{
  float: left;
  line-height: normal;
  font-weight: bold;
  font-size: 75%;
}
.tabs ul
{
  margin: 0px;
  padding: 0;
  list-style: none;
}
.tabs li
{
  float: left;
  margin: 0px;
  padding: 0px;
}
.tabs .selask
{
  background:#EEEEEE url("/static/images/tab_right.gif") no-repeat right top;
}
.tabs .sellist
{
  background:#AACCAA url("/static/images/tab_right.gif") no-repeat right top;
}
.tabs .unsel
{
  background:#005261 url("/static/images/tab_right.gif") no-repeat right top;
}
.tabs a
{
  display: block;
  background:url("/static/images/tab_left.gif") no-repeat left top;
  padding: 5px 15px;
  text-decoration: none;
}
.tabs a:link, .tabs a:hover, .tabs a:visited, .tabs a:active
{
  color: white;
}

.afterTab
{
  clear: both;
}

 /*
  * CSS for tabs that appear on the home page.
  * Based on this tutorial:
  *   http://www.alistapart.com/articles/slidingdoors/
  */
 .outerTabs
 {
   float: left;
   line-height: normal;
   font-weight: bold;
   font-size: 75%;
   background: url("/static/images/black_line.gif") bottom;
   width: 100%;
 }
 .outerTabs ul
 {
   margin: 0px;
   padding: 0;
   list-style: none;
 }
 .outerTabs li
 {
   float: left;
   margin: 0px;
   padding: 0px;
 }
 .outerTabs .sellist
 {
   padding-bottom: 1px;
   background:#21717A url("/static/images/tab_right.gif") no-repeat right top;
 }
 .outerTabs .unsel
 {
   padding-bottom: 0px;
   background:#88AA88 url("/static/images/tab_right.gif") no-repeat right top;
 }
 .outerTabs a
 {
   display: block;
   background:url("/static/images/tab_left.gif") no-repeat left top;
   padding: 6px 15px;
   text-decoration: none;
 }
 .outerTabs a:link, .outerTabs a:hover, .outerTabs a:visited, .outerTabs a:active
 {
   color : white;
 }

 /*
  * CSS for tabs that appear on the home page.
  * Based on this tutorial:
  *   http://www.alistapart.com/articles/slidingdoors/
  */
.innerTabs
{
   float: left;
   line-height: normal;
   font-weight: bold;
   font-size: 75%;
   padding-top: 8px;
   background: #21717A url("/static/images/black_line.gif") bottom;
   width: 100%;
}
.innerTabs ul
{
   margin: 0px;
   padding: 0;
   list-style: none;
}
.innerTabs li
{
   float: left;
   margin: 0px;
   padding: 0px;
}
.innerTabs .sellist
{
   padding-bottom: 1px;
   background:#005462 url("/static/images/tab_right_green.gif") no-repeat right top;
 }
 .innerTabs .unsel
 {
   padding-bottom: 0px;
   background:#88AA88 url("/static/images/tab_right_green.gif") no-repeat right top;
 }
 .innerTabs a
 {
   display: block;
   background:url("/static/images/tab_left_green.gif") no-repeat left top;
   padding: 6px 15px;
   text-decoration: none;
   font-size: 12px;
 }
 .innerTabs a:link, .innerTabs a:hover, .innerTabs a:visited, .innerTabs a:active
 {
   color : white;
   font-size: 12px;
 }

 /*
  * CSS for tabs that appear on the home page.
  * Based on this tutorial:
  *   http://www.alistapart.com/articles/slidingdoors/
  */
 .innerTabsNoBG
 {
   float: left;
   line-height: normal;
   font-weight: bold;
   font-size: 75%;
   padding-top: 8px;
   background: url("/static/images/black_line.gif") bottom;
 }
 .innerTabsNoBG ul
 {
   margin: 0px;
   padding: 0;
   list-style: none;
 }
 .innerTabsNoBG li
 {
   float: left;
   margin: 0px;
   padding: 0px;
 }
 .innerTabsNoBG .sellist
 {
   padding-bottom: 1px;
   background:#005462 url("/static/images/tab_right.gif") no-repeat right top;
 }
 .innerTabsNoBG .unsel
 {
   padding-bottom: 0px;
   background:#88AA88 url("/static/images/tab_right.gif") no-repeat right top;
 }
 .innerTabsNoBG a
 {
   display: block;
   background:url("/static/images/tab_left.gif") no-repeat left top;
   padding: 6px 15px;
   text-decoration: none;
   font-size: 12px;
 }
 .innerTabsNoBG a:link, .innerTabsNoBG a:hover, .innerTabsNoBG a:visited, .innerTabsNoBG a:active
 {
   color : white;
   font-size: 12px;
 }

#wellListHeader
{
    display: block;
}
#wellListHeader .tabs
{
    float: left;
    clear: none;
}
#wellListHeader .wellStatusLegend
{
    display: block;
    clear: none;
    float: right;
}

#wellListFooter
{
    display: block;
    clear: both;
    width: 100%;
}
#wellListFooter .wellStatusLegend
{
    display: block;
    clear: both;
    float: left;
}
#footerTable
{
    clear: both;
}
#maincontent
{
  height: 95%;
  padding: 10px;
}
/*
 * CSS for tabs that appear on the home page.
 * Based on this tutorial:
 *   http://www.alistapart.com/articles/slidingdoors/
 */
.tabs2
{
  float: left;
  line-height: normal;
  font-weight: bold;
  font-size: 75%;
}
.tabs2 ul
{
  margin: 0px;
  padding: 0;
  list-style: none;
}
.tabs2 li
{
  float: left;
  margin: 0px;
  padding: 0px;
}
.tabs2 .selask
{
  background:#EEEEEE url("/static/images/tab_right.gif") no-repeat right top;
}
.tabs2 .sellist
{
  background:#AACCAA url("/static/images/tab_right.gif") no-repeat right top;
}
.tabs2 .unsel
{
  background:#005261 url("/static/images/tab_right.gif") no-repeat right top;
}
.tabs2 a
{
  display: block;
  background:url("/static/images/tab_left.gif") no-repeat left top;
  padding: 5px 15px;
  text-decoration: none;
}
.tabs2 a:link, .tabs2 a:hover, .tabs2 a:visited, .tabs2 a:active
{
  color: #EE9A00;
}

form {
    margin: 0;
}
input {
    vertical-align: middle;
}
#fq {
    width: 300px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding-left: 4px;
}

#search-results {
    width : 306px; border : 1px solid #000;
    margin-top : -1px; float : left;
}

* html div#search-results { width : 307px; } /* box model hack */

.sr, .srs {
    width: 100%;
    float: left;
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding : 1px 0 0 0;
}
.sr { background-color : #fff; color : #000; }
.srs { background-color : #36c; color : #fff; cursor : pointer; }
.sr .src { color : #008000; }
.srs .src { color : #fff; }
.srt { float : left; font-size : 13px; margin-left : 4px; }
.src { float : right; font-size : 10px; margin-right : 3px; padding-top : 2px; }

#tooltip{
    background-color: lightgreen;
    position: absolute;
    padding: 1px;
    border: 2px solid black;
    visibility: hidden;
    z-index: 100;
}

.toolTip .ui-icon-help {
    display: inline;
}

.ui-tooltip {
    white-space: pre-line;
}

.inside_div {
    padding-left:     10px;
    background-color: #EEEEEE;
    border-top:       50px;
    padding-top:      10px;
    margin-right:     20px;
    padding-bottom:   10px;
    display:          none;
    margin-left:      17px;
}

.inside_div_vis {
    padding-left:     10px;
    background-color: #EEEEEE;
    border-top:       50px;
    padding-top:      10px;
    margin-right:     20px;
    padding-bottom:   10px;
    display:          block;
    margin-left:      17px;
}

#mygraph {
    background-color:#dd5500;
    writing-mode:tb-rl;
}

#myname {
    writing-mode: tb-rl;
    filter: flipv() fliph();
}

#mytable {
    padding: 0px;
    width: 10px;
}

#mytable tr {
    font-size: 11px;
}

#mytable td {
    font-size: 10px;
    vertical-align: bottom;
    text-align: center;
    width: 50%;
}

.hidden
{
    display: none;
}

/*
 * CSS for div-based forms
 * Author: mlindgren
 */

.formatHint
{
    font-size: 0.7em;
    color: #000080;
}

div.formRow
{
    clear: both;
    padding: 5px;
}

div.formRow span.formLabel
{
    float: left;
    width: 40%;
}

div.formRow .padLeft
{
    padding-left: 20%;
}

div.formLeftColumn
{
    float: left;
    width: 40%;
}

div.formRightColumn
{
    width: 40%;
    display: inline;
    float: right;
}

/* From ops.py */
.coming {
    color: #888888;
    font-style: normal;
}

.active {
    color: black;
    font-style: normal;
}

.install {
    color: green;
    font-style: normal;
}

.stacked {
    color: green;
    font-style: normal;
}

.pending {
    color: green;
    font-style: normal;
}

.prospect {
    color: green;
    font-style: normal;
}

.unknown {
    color: #990000;
    font-style: italic;
}

.closed {
    color: navy;
    font-style: normal;
}

.down {
    color: #990000;
    font-style: italic;
}

.disabled {
    color: grey;
    font-style: italic;
}

/*
 * CSS for AJAX dimming
 */
#loading_div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: none;
    text-align: left;
}

.loading_msg
{
    position: absolute;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    width: 100px;
    height: 40px;
    z-index: 200;
    top: 50%;
    left: 50%;
    text-align: center;
    line-height: 40px;
}

.overdueBackground a:link, .overdueBackground a:hover, .overdueBackground a:visited, .overdueBackground a:active
{
  color: black;
}


/* From:
 * http://goo.gl/cxVJ
 */
.transparent_black
{
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter:
        "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.ui-dialog
{
        background-color: #fff;
        border-style: solid;
        border-width: 2px;
        border-color: #999;
}

.ui-dialog .label
{
   min-width: 170px;
   width: 35%;
}

.ui-dialog .element
{
   width: 65%
}

.worksheet_queue_item_pending
{
    padding: 10px;
    margin: 10px 0px 10px 0px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: #FFF39B;
    text-align: left;
    color: black;
    font-size: 10pt;
    font-weight: normal;
    font-family: sans-serif;
}

.worksheet_queue_item_processing
{
    padding: 10px;
    margin: 10px 0px 10px 0px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: #D6DEFF;
    text-align: left;
    color: black;
    font-size: 10pt;
    font-weight: normal;
    font-family: sans-serif;
}

.worksheet_queue_item_closed
{
    padding: 10px;
    margin: 10px 0px 10px 0px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: #DFFFD6;
    text-align: left;
    color: black;
    font-size: 10pt;
    font-weight: normal;
    font-family: sans-serif;
}

.worksheet_queue_item_error
{
    padding: 10px;
    margin: 10px 0px 10px 0px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: #FFBCB5;
    text-align: left;
    color: black;
    font-size: 10pt;
    font-weight: normal;
    font-family: sans-serif;
}

.worksheet_top_status
{
    font-weight: bold;
    font-size: 8pt;
}

.worksheet_owner
{
    float: right;
    color: #000000;
}

.worksheet_progress_bar
{
    border: 1px solid #000000;
    background-color: #ffffff;
    border-radius: 3px;
    padding: 2px;
    height: 16px;
}

.worksheet_progress
{
    background-color: #5196FF;
    height: 100%;
}

div.worksheet_column
{
    padding: 20px;
    margin: 10px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    width: 250px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 20px;
}

td.worksheet_column
{
    vertical-align: top;
    width: 260px;
}

.worksheet_status_msg
{
    background-color: #ffffff;
    padding: 2px;
    border-radius: 3px;
}

.table-fixed-header
{
    position: fixed;
    top: 0px;
    display: none;
    background-color: white;
}

.editFooter {
    width: auto;
    display: inline;
    background-color: inherit;
}

.fixedFooter {
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: #aca;
}

/** Days Off Calendar page */
#monthSelector {
    background-color: #aca;
}
#calendarContainer {
    overflow: auto;
}
#calendar_tbl th {
    background-color: #c8c8c8;
}

#calendarBody td {
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
}
#calendarBody {
    table-layout: fixed;
}
.ftSelector {
    width: 120px;
}

/** Job Page - Add Menu*/
#addMenu {
    position: absolute;
    background-color: #FFE;
    border: 1px solid black;
}
#addMenu > div {
    clear: both;
    float: left;
}
.dataSection {
    margin-bottom: 10px;
}
.dataHider {
    background-color: #ACA;
    width: 275px;
    padding: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: dotted 1px gray;
    font-size: 12pt;
}
.dataHider span {
    font-weight: bold;
    cursor: pointer;
}
.dataHider .ajaxSpinner {
    visibility: hidden;
    padding: 0px;
    border: 0;
}
.ajaxContent {
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 5px;
}
.ajaxContent table {
    border-collapse: collapse;
}

/*
CSS for administrative notes system

June 29, 2012
Stewart Rand

*/

#notes_table td
{
    padding:5px;
}

#add_note_link, #save_new_note {
    width:100px;
}

#new_note_area {
    display: none;
}

.save_note_button {
    display: none;
}

#notes_table tr:nth-child(odd) {
    background-color:#fff;
}

/** Job Page - Summary Tables */
table.summaryTable {
    background-color: #fafafa;
    color: black;
}

table.summaryTable tr td {
    padding: 3px;
    border: 1px solid gray;
}

/** Job Page - Customer Comments */
.cc table tr td {
    border: 0px;
    border-style: none;
}

table.cc {
    border: 1px;
    background-color: #fafafa;
    border-style: solid;
    border-color: gray;
}

tr.ccChargeId td {
    font-weight: bold;
    padding-top: 7px;
}

tr.ccHeading {
    background-color: #AACCAA;
    text-align: left;
    font-weight: bold;
    border: 1px;
    border-style: solid;
    border-color: gray;
}

td.ccColumn1 {
    width: 60px;
}

td.ccColumn2 {
    width: 160px;
}

td.ccColumn3 {
    width: 50px;
}

td.ccColumn4 {
    width: 140px;
}

span.ccAction {
    color: #D50;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}

div.ccSaveCancel {
    width: 60px;
    float: right;
    padding-right: 22px;
    text-align: right;
}

/* Notes stuff */
tr.noterow {
    background:lightgray;
}

td.datecell, .no-wrap {
    white-space: nowrap;
}

table.jobdatatable {
    width: 100%;
    border: 1px solid gray;
}

table.jobdatatable tr td, table.jobdatatable th {
    padding: 3px;
    border: 1px solid gray;
}

table.jobdatatable th {
    white-space: nowrap;
    background-color: #ACA;
    cursor: pointer;
}

#calls_and_notes_control_box div {
    padding: 3px;
    height: 35px;
    line-height: 35px;
}

#calls_and_notes_container {
    color: black;
}

#this_rig_button, #this_job_button {
    opacity: 0;
}

#job_rig_toggle_div .ui-button .ui-button-text {
    line-height: 0.8;
}

tr.unresolvedcall{
    background-color: rgb(255, 221, 232) !important;
}

tr.expandabletext:hover, tr.expandedtext:hover {
    text-decoration: underline;
    cursor: pointer;
}

div.maxheight200 {
    max-height: 200px;
    overflow-y: auto;
}

#error-page-wrapper {
    height: 200px;
    margin: 10px;
    width: 100%;
}

#error-page-wrapper ul, #error-page-wrapper ol {
    display: inline-block;
    text-align: left;
}


/* Rules for Breadcrumb navigation menu */
div#breadcrumbs ul {
    list-style: none;
    display: inline-table;
    padding: 0;
    margin-top: 10px;
    margin-bottom: 5px;
}

div#breadcrumbs ul li {
    display: inline;
}


div#breadcrumbs ul li a {
    display: block;
    float: left;
    background: #005160;
    text-align: center;
    padding: 5px 10px 0px 20px;
    position: relative;
    margin: 0 5px 0 0;
    text-decoration: none;
    color: #fff;
    height: 25px;
    box-shadow: 2px 2px 2px #888888;
    font-size: 12pt;
    font-family: helvetica;
}

div#breadcrumbs ul li a:after {
    content: "";
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #005160;
    position: absolute; right: -15px; top: 0;
    z-index: 1;
}

div#breadcrumbs ul li a:before {
    content: "";
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid white;
    position: absolute;
    left: 0;
    top: 0;
}

/* Prettifying the first and last breadcrumb items */

div#breadcrumbs ul li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-left: 10px;
}
div#breadcrumbs ul li:first-child a:before {
    display: none;
}

div#breadcrumbs ul li:last-child a {
    padding-right: 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
div#breadcrumbs ul li:last-child a:after {
    display: none;
}

.rig-badge {
    color: white;
    border-radius: 5px;
    font-size: 8pt;
    letter-spacing: 1px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 2;
    align-items: center;
    min-width: 30px;
    padding: 2px 4px;
}

.badge-container {
    position: relative;
    top: -37px;
    left: -10px;
    padding: 2px 4px;
    z-index: 1;
}

.vsp-badge {
    background-color: #D87429;
}

.tpc-badge {
    background-color: #177DFD;
}

.prd-badge {
    background-color: #6CA446;
}

.other-badge {
    background-color: #666666;
}

.legacy-dhc-badge {
    background-color: #CCCCCC;
    color: black;
}

.server-dhc-badge {
    background-color: #00ADD8;
}

.sold-system::after {
    border-radius: 5px;
    position: absolute;
    top: 0px;
    padding: 2px 4px;
    min-width: 30px;
    background-color: #AA00FF;
    content: 'Sold System';
    margin-left: 10px;
}

#page-content {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 6px;
    padding-bottom: 30px;
}

/* Job page info table */
.job-table-top {
    float: left;
    width: 100%;
}
.job-table-top th {
    text-align: right;
    width: 33%;
}

#page-content .job-table-top th, #page-content .job-table-top td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.half-width {
    width: 50%;
}

#job-page-top-section-container {
    padding: 5px;
    background-color: #eeeeee;
    border-radius: 5px;
    box-shadow: 0px 2px 2px #888888;
    margin-bottom: 10px;
    float: left;
    width: 100%;
}

#top-table-left, #top-table-right {
    margin-bottom: 5px;
}

#top-table-left-container {
    padding-right: 10px;
}


#job-warning, #ie-warning-message, #ft-warning, .calendar-warning, .warning-label {
    background-color: #FFEBC2;
    border: 1px solid #A37A00;
    padding: 8px;
    border-radius: 5px;
}

/*
 * Table Styles
 */

table.ops-table {
    border: 1px solid lightgray;
    border-radius: 5px;
    border-spacing: 0;
    border-collapse: separate !important;
}

/* Top left border radius */
table.ops-table > :first-child > :first-child > :first-child {
    border-radius: 5px 0px 0px 0px;
}

/* Top right border radius */
table.ops-table > :first-child > :first-child > :last-child {
    border-radius: 0px 5px 0px 0px;
}

/* Bottom left border radius */
table.ops-table > :last-child > :last-child > :first-child {
    border-radius: 0px 0px 0px 5px;
}

/* Bottom right border radius */
table.ops-table > :last-child > :last-child > :last-child {
    border-radius: 0px 0px 5px 0px;
}

/* Even rows gray */
table.ops-table tr:nth-child(even), table.ops-table tr.even {
    background-color: #eeeeee;
}

/* Odd rows white */
table.ops-table tr:nth-child(odd), table.ops-table tr.odd {
    background-color: #ffffff;
}

table.ops-table th {
    font-size: 10pt;
    font-weight: bold;
}

th.sorting, th.sorting_asc, th.sorting_desc {
    cursor: pointer;
}

/* Border between cells */
table.ops-table th, table.ops-table td {
    border-left: 1px solid lightgray;
    padding: 5px;
}

table.ops-table th:first-child, table.ops-table td:first-child {
    border-left: none;
}

table.ops-table th:last-child, table.ops-table td:last-child {
    border-right: none;
}

table.ops-table tfoot tr td {
    background-color: #AACCAA;
    font-weight: bold;
}

.ops-table-note {
    font-style: italic;
    font-size: 10pt;
    margin: 4px 12px;
    width: 200px;
}

.list-table {
    background: white;
    padding: 2px 7px 2px 2px;
    margin-left: 1px;
    border: 1px solid #aaaaaa;
    display: inline-block;
}

.list-table td {
    padding-left: 5px;
    padding-right: 10px;
}

/* Some styled inputs */
select, textarea,
input[type='text']:not(.error), /* exclusion class to allow .error on text inputs without important*/
input:not([type]), .input, .button {
    border: 1px solid #AAAAAA;
    margin: 0px;
}

select, textarea {
    padding: 1px;
}

input[type="text"], input:not([type]), .input {
    padding: 2px 1px 2px;
}

.input:hover, .input:focus, input[type="text"]:focus, input[type="text"]:hover {
    border-color: #4F8696;
    box-shadow: 0px 0px 3px #4F8696;
}

button.input, .button {
    background-color: #005160;
    color: #fff;
    font-weight: 700;
    padding: 3px 5px;
}

button.input:hover, .button:hover, button.input:focus, .button:focus {
    background-color: #26727F;
    box-shadow: none;
    color: #fff;
}

/* Styling for Multi Dropdown Menus */

div.multidrop_list_item_container {
    margin-top: 6px;
}

div.multidrop_list_item {
    display: inline-block;
    padding: 4px;
    margin: 2px 0px 2px 6px;
    border: 1px solid #b7b7b7;
    border-radius: 5px;
    background-color: #ffffff;
    background: linear-gradient(top, #ffffff 0%, #f2f2f2 80%, #f2f2f2 100%);
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 80%, #f2f2f2 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 80%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 80%, #f2f2f2 100%);
}

.ops_multi_drop select:disabled ~ .multidrop_list_item_container div.multidrop_list_item {
    background: #EBEBE4;
    color: #808080;
}

span.multidrop_list_text {
    padding-left: 4px;
    padding-right: 5px;
}

span.multidrop_ui {
    display: inline-block;
    height: 13px;
    cursor: pointer;
}

.ops_multi_drop select:disabled ~ .multidrop_list_item_container span.multidrop_ui {
    cursor: initial;
}

option#multidrop_header {
    font-style: italic;
}


/* Sortables styles */
ul.sortable {
    width: 300px;
    list-style: none;
    margin: 5px 0px;
    padding: 5px;
    border: 1px groove gray;
}
.sortable li {
    position: relative;
    margin: 2px 0;
    padding: 0;
    border: 1px solid gray;
    list-style: none;
    padding-left: 42px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: move;
}
.sortable li .handle {
    background: #f8f8f8;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 0px 10px;
    margin: 2px
}
.ui-sortable .ui-state-highlight {
    height: 20px;
    border: 1px solid #005160;
    box-shadow: 0px 0px 3px #005160;
}

.sectionToggle, .subSectionToggle {
    font-family: Arial;
    text-decoration: none !Important;
    font-weight: bold;
}

/* Lightbox(colorbox) styling */
#cboxOverlay {
    height: 100%;
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: #333;
}
#cboxLoadedContent .cboxIframe {
    height: 99%;
    width: 99%;
}

#cboxContent {
    background-color: #ffffff;
    border: 2px solid #333333;
    border-radius: 2px;
    box-shadow: 0px 0px 2px 2px #333333;
}

/*
 ==========================================================================
 Generic formatting of form elements
 ==========================================================================
 */

/* basic outlined grey box */
.outlined-box, form.ops-form {
    background-color: #eeeeee;
    border: 1px solid grey;
    font-family: helvetica;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 15px;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 0px 2px 2px #888888;
}

/* prettier sectioning */
hr.gradient {
    border: 0;
    float: left;
    height: 1px;
    width: 100%;
    background: grey;
    margin-top: 7px;
    margin-bottom: 15px;
    background-image: -webkit-linear-gradient(left, #ccc, grey, #ccc);
    background-image:   -moz-linear-gradient(left, #ccc, grey, #ccc);
    background-image:     -ms-linear-gradient(left, #ccc, grey, #ccc);
    background-image:       -o-linear-gradient(left, #ccc, grey, #ccc);
    background-image:         linear-gradient(left, #ccc, grey, #ccc);
}

/* Call search page has bold font labels for fields */
.larger-label .label {
    font-size: larger;
}

.note {
    font-size: 10pt;
    font-style: italic;
}

.tiny-note {
    font-size: 8pt;
    font-style: italic;
}

.ui-datepicker-trigger  {
    padding: 0px 0px 4px 4px;
    vertical-align: bottom;
}

.input-block input ~ input {
    margin-top: 2px;
    display: block;
}


/*
 ==========================================================================
 Table-less Column Layouts For Input Fields the double column
 layout will automatically collapse to a single column when the screen
 gets too small
 ==========================================================================
*/

.field {
    margin-bottom: 8px;
    min-height: 22px;
    width: 100%;
}

.element input, .element select, .element textbox, .element div {
    max-width: 100%;
}

/*
  formatting for collapsible double column layouts
  ================================================
*/
.col-double {
    min-width: 450px;
    width: 49%;
    float: left;
}

.col-double:nth-of-type {
    margin-right: 10px;
}

.col-double .label {
    min-width: 100px;
    width: 25%;
}

.col-double .element {
    min-width: 90px;
    width: 70%;
}

.col-double textarea {
min-width: 200px;
width: 70%;
}

/*
  formatting for single column layouts
  =========================================
*/
.col-single {
    width: 100%;
    float: left;
}

.col-single .label {
    min-width: 100px;
    width: 13%;
}

.col-single .element {
    width: 85%
}

.col-single textarea {
    min-width: 400px;
    width: 70%;
}

.col-single select {
    min-width: 50px;
}

/* formatting for a single column following a double column layout */
.col-double ~ .col-single .label, .col-single-with-double .label {
    width: 12.5%;
    min-width: 115px;
}

.table-col div ~ div {
    margin-top: 4px;
}

.font-element-12pt {
    padding-top: 4px;
}

.font-element-10pt {
    padding-top: 6px;
}


/*
 ==========================================================================
 Form styling to have a consistent column of labels match up to a column of
 form inputs.
 ==========================================================================
*/

div.formField {
    clear: both;
    padding-top: 10px;
    width: 450px;
    font-weight: bold;
    font-size: 14px;
    font-family: sans-serif;
}

div.formField span.label {
    float: left;
    width: 130px;
    text-align: right;
}

div.formField span.entry {
    float: right;
    width: 300px;
    text-align: left;
}

[name="trial"] div.formField {
    width: 90%;
}

[name="trial"] div.formField span.entry {
    width: 70%;
    font-weight: normal;
}

/* ================================================================
 * Form style option that doesn't require soooooooooooo much markup
 * ================================================================
 */

/* also uses "outlined-box", defined above */
form.ops-form {
    display: inline-block;
}

.ops-form ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ops-form li {
    margin-bottom: 5px;
}

.ops-form label {
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
    min-width: 150px;
    text-align: right;
}

.ops-form input[type="text"], .ops-form select, .ops-form textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
}

/* ============
 * status boxes
 * ============
 */

.good-status {
    border: 1px solid #8bc18b;
    border-radius: 5px;
    background-color: #cde4d3;
    padding: 5px;
}

.bad-status {
    border: 1px solid #BB6666;
    border-radius: 5px;
    background-color: #f7baba;
    padding: 5px;
}

.neutral-status {
    border: 1px solid #DDAA22;
    border-radius: 5px;
    background-color: #FFEE9E;
    padding: 5px;
}

.no-status {
    border: 1px solid #999999;
    border-radius: 5px;
    background-color: #FFFFFF;
    padding: 5px;
}

/*
 ==========================================================================
 Billings
 ==========================================================================
*/
div.duplicateDailyBillWarningDialogContainer {
    display: none;
    position: absolute;
}

div.duplicateDailyBillWarningDetails {
    padding-top: 20px;
}

div.duplicateDailyBillWarningDetails table {
    border: solid 1px #cccccc;
    border-radius: 4px;
    border-collapse: separate;
    border-spacing: 0px 3px;
    padding: 0px 3px 0px 3px;
}

div.duplicateDailyBillWarningDetails table tr th {
    background-color: #dfdfdf;
    font-weight: bold;
    font-size: 13px;
    padding: 2px;
    border-radius: 4px;
}

div.duplicateDailyBillWarningDetails table tr td {
    width: 130px;
}

div.duplicateDailyBillWarningDetails table tr td.duplicateDailyBillJobCell {
    text-align: center;
    background-color: #dfdfff;
    border: 1px solid #8f8fff;
    border-radius: 4px;
}

div.duplicateDailyBillWarningDetails table tr td.duplicateDailyBillJobCellEmph {
    text-align: center;
    background-color: #cfcfff;
    border: 2px solid #7f7fff;
    border-radius: 4px;
}

div.duplicateDailyBillWarningDetails table tr td.resolvedDottedDailyBillJobCell {
    text-align: center;
    background-image: url('/static/images/duplicate_resolution_arrow.png');
    border: 1px dotted #8f8fff;
    border-width: 2px 0px 2px 2px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

div.duplicateDailyBillWarningDetails table tr td.resolvedDottedDailyBillJobCellEmph {
    text-align: center;
    background-image: url('/static/images/duplicate_resolution_arrow.png');
    border: 2px dotted #7f7fff;
    border-width: 2px 0px 2px 2px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

div.duplicateDailyBillWarningDetails table tr td.resolvedDailyBillJobCell {
    text-align: center;
    background-color: #dfdfff;
    border: 1px solid #8f8fff;
    border-width: 2px 2px 2px 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

div.duplicateDailyBillWarningDetails table tr td.resolvedDailyBillJobCellEmph {
    text-align: center;
    background-color: #cfcfff;
    border: 2px solid #7f7fff;
    border-width: 2px 2px 2px 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

div#jobWarningIcons {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    left: 6px;
    top: -8px;
}

span.jobWarnings.warningIcon,
div#jobWarningIcons img {
    margin-right: 10px;
}

span.jobWarnings.warningIcon {
    vertical-align: top;
    text-align: center;
}

span.disabled-billable-job-warning {
    background-color: #FFCFCF;
    border-color: #FF7F7F;
}

span.disabled-billable-job-warning::before,
span.disabled-job-warning::before {
    width: 16px;
    height: 16px;
    content: '\002298';
    margin-right: 1px;
}

img#loading-dats {
    margin-left: 75px;
}

/* Style for comboboxes
*/

.ops-combobox-wrapper  {
    position: relative;
    display: inline-block;
  }

.ops-combobox-show-all {
    position: absolute;
    top: 0;
    right: -2.3em;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
.ops-combobox-input {
    margin: 0;
    padding: 5px 10px;
    font-size: 1.0em ! Important;
  }

/* Style for trial page items
*/
span.mandatory {
    font-weight: bold;
    color: #DC143C;
    display: inline;
    cursor: help;
}

.contacts {
    overflow-y: scroll;
    max-height: 100px;
    min-height: 50px;
}


table.no-spacing {
    border-spacing: 0;
    border: 0;
}

.success-subscription {
    border: 1px solid #339933;
    border-radius: 5px;
    background-color: #CCE6CC;
    padding: 5px;
}

.trial-rig-notes {
    overflow-y:auto;
    overflow-x: hidden;
    max-height: 100px;
    min-height: 10px;
}
 h1 > a, h1 > a:hover {
  text-decoration: none;
 }

 .trial-header {
    padding-top: 10px;
 }

 #associated-rigs-table {
    width: 100% ! Important;
 }

 #associated-rigs-table th.sorting a {
     color: #000000 !important;
 }
/*
 ==========================================================================
 Common CSS stylings that can be thrown onto any element.
 These remain at the bottom of this file for easy locating.
 ==========================================================================
*/

.bold { font-weight: bold; }
.monospace { font-family: monospace; }
.cl { clear: both; }
.di { display: inline; }
.hide{ display: none; }
.ihide{ display: none !important; }
.fl { float: left; }
.fr { float: right; }
.ib { display: inline-block; }
.block { display: block; }
.ma { margin: auto; }
.m0 { margin: 0px; }
.mb0 { margin-bottom: 0px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.m5 { margin: 5px; }
.ml0 { margin-left: 0px; }
.m10 { margin: 10px; }
.ml10 { margin-left: 10px; }
.ml20 {margin-left: 20px;}
.ml35 { margin-left: 35px;}
.mr10 { margin-right: 10px; }
.mr35 { margin-right: 35px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt30 { margin-top: 30px; }
.mw400 { max-width: 400px; }
.p0 { padding: 0px; }
.p2 {padding: 2px }
.p5 { padding: 5px; }
.pb5 { padding-bottom: 5px; }
.p10 { padding: 10px; }
.pt10 { padding-top: 10px; }
.pos-relative { position: relative ! Important; }
.w30 { width: 30px; }
.w500 { width: 500px; }
.width-33 { width: 33%; }
.width-50 { width: 50%; }
.width-67 { width: 67%; }
.width-75 { width: 75%; }
.width-100 { width: 100%; }
.width-100-i { width: 100% !important; }
.h30 { height: 30px; }
.smaller { font-size: smaller; }
.bg-white { background-color: #ffffff; }
.bg-red { background-color: #ff0000; }
.bg-green { background-color: #14ff00; }
.bg-yellow { background-color: #fff11c; }
.bg-lightyellow { background-color: #ffffca; }
.center-text { text-align: center; }
.left-text { text-align: left; }
.right-text { text-align: right; }
.vat { vertical-align: top; }
.vab { vertical-align: bottom; }
.vam { vertical-align: middle; }
.vh { visibility: hidden; }
.large { font-size: large; }
.larger { font-size: larger; }
.gray { color: gray; }
.navy { color: navy; }
.green { color: green; }
.fixed-table { table-layout: fixed; }
.bcc { border-collapse: collapse; }
.border { border: 1px solid gray; }
.border-light { border: 1px solid lightgray; }
.border-round { border-radius: 10px; }
.i { font-style: italic; }
.abs-bot, .abs-bot-right {
    position: absolute;
    bottom: 0;
}
.abs-bot-right { right: 0; }
.spaced-list li { margin-bottom: 10px; }
.hover-underline:hover {
    text-decoration: underline;
    cursor: pointer;
}
.nd {text-decoration: none;}
input.guidInput { font-family: monospace; }

.ibi { display: inline-block !important; }
.greyout { opacity: 0.4}
.ns {list-style-type: none;}
.abs {position: absolute !important;}
.tiny-text { font-size: 0.8em; }
.wspr { white-space: pre-wrap; }
.usn { user-select: none; }

div.notificationCount {
    position: absolute;
    font-family: monospace;
    font-weight: bold;
    font-size: 14px;
    top: 0px;
    left: 20px;
    padding: 2px 4px 2px 4px;
    background-color: #cc0000;
    border-radius: 3px;
    height: 16px;
    text-align: center;
    color: #ffffff;
    box-shadow: 1px 1px 1px #0c0c0c;
    cursor: pointer;
    display: none;
}

div.notificationIconWithCount {
    background-position: 3px 3px !important;
}

div.notificationIcon {
    position: relative;
    background-image: url('/static/images/notification_icon.png');
    background-repeat: no-repeat;
    background-position: 7px 3px;
    width: 39px;
    height: 31px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-position 200ms;
}

td.notificationsIconContainer {
    width: 44px;
    padding-left: 5px;
    vertical-align: bottom;
}

div.notificationIcon:hover,
div.notificationIconClicked {
    background-color: var(--ops-menu-color);
}

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

td.notificationContainer {
    position: relative;
    width: 44px;
    padding-left: 5px;
    vertical-align: bottom;
}

div.notificationListContainer {
    position: absolute;
    width: 305px;
    margin-top: 9px;
    transform: translateX(-262px);
    text-align: left;
    box-shadow: 3px 3px 2px #0c0c0c;
    background-color: var(--ops-menu-color);
    height: 500px;
    display: none;
    font-family: sans-serif;
    font-weight: normal;
    z-index: 100;
    border-radius: 4px;
}

div.notificationListContainer a {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: underline;
    cursor: pointer;
}

div.notificationListContainer a:hover {
    color: #cfcfcf;
}

div.notificationList {
    overflow-y: auto;
    margin: 10px;
    height: 480px;
    user-select: none;
}

div.notificationArrow {
    position: absolute;
    top: -7px;
    right: 16px;
    width: 16px;
    height: 7px;
    background-image: url('/static/images/notification_arrow.png');
    filter: brightness(0.6);
}

div.notificationList h1 {
    font-size: 16px;
    color: #ffffff;
}


div.notificationListItemContainer {
    position: relative;
    margin: 2px;
    padding: 10px;
    border-radius: 3px;
    font-size: 12px;
    color: #ffffff;
    background-color: var(--ops-menu-color);
    transition: background-color 2000ms;
}


div.notificationListItemContainerUnseen {
    background-color: #00C1DB;
}

div.notificationTimeContainer {
  font-size: 12px;
  color: #ffffff;
}

div.notificationCreationTime {
}

div.notificationSeenTime {
}

div.backgroundProcessMessage {
}

div.backgroundProcessStatus {
}

div.backgroundProcessProgress {
    float: right;
}

button.notificationDismissButton {
   position: absolute;
   right: 2px;
   top: 3px;
   width: 16px !important;
   height: 16px !important;
}

#notificationDialog {
    position: absolute;
    width: 0px;
    height: 0px;
    text-align: left;
}

div.notificationDialogSection {
    color: #000000;
    font-weight: normal;
    font-size: 12px;
}

div.notificationDialogSection h1 {
    color: #005261;
    font-size: 14px;
    font-weight: bold;
}

.iti-flag {
    background-image: url('/static/images/flags.png') !important;
}

.ops-pill {
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    background-color: white;
    font-size: 12px;
    font-variant: small-caps;
    padding: 2px 5px;
    text-align: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    width: 65px;
    margin: auto;
    font-weight: bold;
    letter-spacing: 1px;
}

.ops-pill[pill-size='dynamic'] {
    width: auto;
    word-break: keep-all;
    text-overflow: unset;
    overflow-x: visible;
}

.ops-pill[pill-size='small'] {
    width: 50px;
}

.ops-pill[pill-size='large'] {
    width: 80px;
}

.ops-pill-yellow {
    border-color: #94940B;
    color: #525B0D;
}

.ops-pill-red {
    border-color: #940B0B;
    color: #EE5253;
}

.ops-pill-green {
    border-color: green;
    color: #10AC84;
}

.ops-pill-blue {
    border-color: #001F3F;
    color: #384DED;
}

.ops-pill-grey {
    border-color: #000000;
    color: #585858;
}

.ops-pill-pink {
    border-color: #B5005F;
    color: #ED38C3;
}

.ops-pill-purple {
    border-color: #2B003F;
    color: #A238ED;
}

.warningIcon {
    width: 16px;
    height: 16px;
    background-color: #FFEECF;
    border: 1px solid #FFD27F;
    border-radius: 4px;
    display: inline-block;
}

.underline {
    text-decoration: underline;
}

.highlight-green {
    background-color: #67FC90;
}

.highlight-yellow {
    background-color: #FFEC70;
}

.highlight-red {
    background-color: #FF9B9C;
}

.highlight-blue {
    background-color: #696cff;
}

.highlight-grey {
    background-color: #cdd3d3;
}

.quantity-pill {
    display: inline-block;
    border-color: lightgrey;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    font-size: 11px;
    vertical-align: middle;
    padding: 2px 3px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    margin: auto;
    color: #000000;
}

.checkered-background {
    background: repeating-conic-gradient(#C7C7C7 0% 25%, #E7E7E7 0% 50%) 50% / 10px 10px;
}

.infobox {
    text-align: left;
    border: 2px solid #005160;
    border-radius: 4px;
    padding: 6px;
    padding-left: 26px;
    vertical-align: middle;
    margin: 10px;
    display: inline-block;
    position: relative;
}

.infobox::before {
    content: '';
    background-position: -16px -144px;
    background-image: url('/static/jquery-ui/css/opsstyle/images/ui-icons_222222_256x240.png');
    width: 16px;
    height: 16px;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 5px;
    filter: sepia(1) hue-rotate(182deg) saturate(4);
}

.infobox[severity='warning'] {
    border-color: #E67300;
}

.infobox[severity='warning']::before {
    background-position-x: 0;
    filter: sepia(1) hue-rotate(11deg) saturate(10);
}

.infobox[severity='error'] {
    border-color: #CE3939;
    font-weight: bolder;
    color: #9F0606;
}

.infobox[severity='error']::before {
    background-position-x: -32px;
    filter: sepia(1) hue-rotate(314deg) saturate(10);
}

.disabled-link {
    text-decoration: underline;
    font-style: italic;
    color: #b2b2b2;
    cursor: not-allowed;
}