body {
   background-color:    rgb(119, 119, 119);
   margin:              0px 0px 0px 0px;
   font-family:         Arial,sans-serif;
   line-height:         1.2;
   font-size:           13px;
   min-width:           780px;
}

img {
   border:              0px;
   margin-top:          8px;
}

a {
   text-decoration:     none;
}

h3 {
   font-size:           150%;
   margin-top:          1em;
}

h4 {
   font-size:           120%;
   margin-top:          0.8em;
}

input[type="text"][disabled="disabled"]
{
   background-color:    white;
}

/* --- Top pane ---------------------------------- */

div.fixed {
   position:            fixed;
   top:                 4px;
   width:               100%;
}

#header {
   background-color:    white;
   padding:             0px 12px 4px 12px;
   height:              62px;
   font-weight:         bold;
   overflow:            hidden;
   border-width:        0 0 1px 0;
   border-color:        black;
   border-style:        solid;
}

#logo {
   float:               left;
   width:               140px;
}

#headerline1 {
   height:              18px;
   padding-top:         12px;
   margin-left:         140px;
}

#headerline2 {
   margin-left:         140px;
   background-color:    black;
   color:               rgb(255, 102, 0);
   padding-top:         5px;
   height:              19px;
   overflow:            hidden;
   min-width:           480px;
}

a.homelink {
   /*background-color:    rgb(255, 102, 0);*/
   color:               white;
   padding:             5px 32px 4px 24px;
   margin:              0;
}

a.homelink:hover {
   background-color:    black;
}

#topmenu-separator {
   background-color:    white;
   padding:             5px 0px 4px 0px;
   margin-right:        12px;
}

a.topmenu {
   background-color:    black;
   color:               white;
   padding:             5px 6px 4px 6px;
   font-size:           13px;
}

a.topmenu:hover {
   background-color:    rgb(255, 102, 0);
}

#bgline {
   background-color:    rgb(119, 119, 119);
   height:              12px;
//   opacity:             0.5;
}


/* --- Bottom pane; container -------------------- */

#container {
   background-color:    rgb(255, 255, 255);
   padding-top:          68px;
   margin-top:          68px;
/*   margin:              18px 24px 24px 24px;
   box-shadow:          0px 11px 5px rgb(0, 0, 0);
   border:              1px solid rgb(119, 119, 119); */
   padding:             0px 0px 0px 0px;
   min-height:          640px;
   overflow:            auto;
}

#contentpane {
   margin:              0px 200px 0 12px;
   min-height:          480px;
}

#footer {
   height:              24px;
}

div.menuimage {
   float:               left;
}

ul.mainmenu {
   margin-left:         480px;
   padding-top:         80px;
   font-size:           110%;
   list-style:          none;
}

ul.mainmenu a {
   color:               black;
}

ul.mainmenu a:hover {
   color:               rgb(255, 102, 0);
}


/* --- sitemap ----------------------------------- */

div.sitemap {
   display:             inline-block;
   *display:            inline;
   zoom:                1;
   vertical-align:      top;
   width:               20em;
   padding-top:          2em;
   padding-bottom:       2em;
}

.sitemap span {
   font-weight:         bold;
}

.sitemap ul {
   list-style:          none;
   padding-left:        4px;
   margin-top:          4px;
}

.sitemap li:before {
   content:             "»";
   padding-right:       6px;
   color:               rgb(255, 102, 0);
}

.sitemap li {
   margin:              3px;
}

.sitemap a, .sitemap a:visited {
   padding:             2px 4px 2px 4px;
   color:               black;
}

.sitemap a:hover {
   color:               #FF6600;
}


/* --- Flash ------------------------------------- */

div.flash-info {
   border:              2px solid #00C000;
   background-color:    #E0F0E0;
   display:             inline-block;
   padding:             4px 24px 4px 0;
   margin:              3px 3px 3px 3px;
   border-radius:       6px;
   -moz-border-radius:  6px;
   -webkit-border-radius: 6px;
}

div.flash-warn, div.flash-warning {
   border:              2px solid rgb(255, 102, 0);
   background-color:    #FFEBDE;
   display:             inline-block;
   padding:             4px 24px 4px 0;
   margin:              3px 3px 3px 3px;
   border-radius:       6px;
   -moz-border-radius:  6px;
   -webkit-border-radius: 6px;
}

div.flash-error {
   border:              2px solid #C00000;
   background-color:    #F0E0E0;
   display:             inline-block;
   padding:             4px 24px 4px 0;
   margin:              3px 3px 3px 3px;
   border-radius:       6px;
   -moz-border-radius:  6px;
   -webkit-border-radius: 6px;
}

div.flash-info a, div.flash-warn  a, div.flash-error a{
   color:               black;
   text-decoration:      underline;
}

/* --- Context menu ------------------------------ */

div.menu {
   float:               right;
   width:               180px;
   background-color:    #D0D0D0;
   margin:              50px 12px 20px 20px;
}

div.menu ul {
   list-style:          none;
   padding:             6px 6px 6px 6px;
}

div.menu ul li:before {
   content:             "»";
   padding-right:       6px;
   color:               rgb(255, 102, 0);
}

div.menu a, div.menu a:visited {
   text-decoration:     none;
   color:               black;
   padding:             3px 3px 3px 3px;
   display:             inline-block;
   width:               144px;
}

div.menu button {
   text-decoration:     none;
   color:               black;
   padding:             3px 3px 3px 0px;
   display:             inline;
   width:               144px;
   margin-left:         -4px;
}

div.menu a:hover {
   color:               rgb(255, 102, 0);
}


/* --- Grid -------------------------------------- */

div.grid {
   font-size:           13px;
   margin-bottom:       40px;
   clear:               both;
}

div.grid table {
   border:              1px solid black;
   margin-top:          6px;
   width:               100%;
}

div.grid th {
   font-weight:         bold;
   color:               white;
   background-color:    #FF6600;
}

div.grid tr.even th  {
   text-align:          left;
   background-color:    #FFEBDE;
}

div.grid th a {
   text-decoration:     none;
   color:               white;
}

div.grid tr.odd {
   background-color:    #F8F8F8;
}

div.grid tr.even {
   background-color:    #FFEBDE;
}

div.grid tr.highlight {
   background-color:    black;
   color:               #FFEBDE;
}

/*
div table {
   border-collapse: collapse;
}
*/
div.grid tr:hover, .grid .black a:hover {
   background-color:    #777777; /*e4cfc2*/
   color:               white !important;
}

td.grid-select {
   white-space:         nowrap;
   width:               1px;
   padding-right:       8px;
}

td.grid-buttons {
   width:               1px;
}

/*td.grid-buttons {*/
/*   white-space:         nowrap;*/
/*}*/

/*td.grid-buttons img {*/
/*   margin:              0px 3px 0px 3px;*/
/*}*/

td.grid-buttons {
   white-space:         nowrap;
}

td.grid-buttons i {
   margin:              0px 3px 0px 3px;
   font-size:16px;
}

div.grid-summary {
   margin:              10px 0 6px 2px;
   padding-bottom:      4px;
   color:               black;
   float:               left;
}

div.grid-pager {
   text-align:          right;
}

div.grid-pager ul {
   list-style:          none;
   margin:              10px 0 0 0;
}

div.grid-pager li {
   display:             inline;
   margin:              0 3px 0 3px;
}

div.grid-pager a {
   text-decoration:     none;
   color:               black;
   border:              1px solid #A0A0A0;
   padding:             1px 6px 1px 6px;
   font-size:           85%;
}

div.grid-pager a.selected {
   color:               #FFFFFF;
   background-color:    #FF6600;
}

td.range {
   width:               24px;
   color:               red;
   font-weight:         bold;
   text-align:          center;
}

.iconView {
   background-image:    url('/img/grid/view.png');
   width:               16px;
   height:              16px;
   background-repeat:   no-repeat;
}

/* --- forms & controls -------------------------- */

form table {
   border:              1px solid #C0C0C0;
   margin-top:          6px;
}

form tr.odd {
   background-color:    #FFEBDE;
}

form tr.even {
   background-color:    #F8F8F8;
}

td.buttonrow {
   padding:             0.5em;
   text-align:          center;
}

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

ul.optgroup li {
   display:          inline;
   margin-left:      0.5em;
   margin-right:     0.5em;
}

textarea {
   font-family:      inherit;
   font-size:        inherit;
}


/* --- Detail views ------------------------------ */

table.form-detail {
   border:              1px solid #C0C0C0;
   margin-top:          6px;
   min-width:           480px;
}

table.form-detail tr.odd, table.form-edit tr.odd {
   background-color:    #F8F8F8;
}

table.form-detail tr.even, table.form-edit tr.even {
   background-color:    #FFEBDE;
}

span.value {
   margin-right:        3em;
   font-weight:         bold;
}

table.form-detail td, table.form-edit td {
   padding:             2px 4px 2px 4px;
}

table.form-detail td:nth-child(1) {
   padding-left:     6px;
}


/* --- Tab control ------------------------------- */

div.tabheader {
   border-bottom:       1px solid black;
   margin-bottom:       2em;
}

div.tabheader ul {
   margin:              0;
   padding:             2em 0 2px 0;
   list-style:          none;
}

div.tabheader li {
   margin:              0 1px 0 0;
   padding:             3px 0 2px 12px;
   display:             inline;
}

div.tabheader li a {
   padding:             3px 14px 2px 0;
}

li.tab-inactive {
   background-image:    url('/img/tab/left.png');
   background-repeat:   no-repeat;
}

li.tab-active {
   background-image:    url('/img/tab/left-active.png');
   background-repeat:   no-repeat;
}

li.tab-inactive a {
   background-image:    url('/img/tab/right.png');
   background-repeat:   no-repeat;
   background-position: right top;
}

li.tab-active  a {
   font-weight:         bold;
   background-image:    url('/img/tab/right-active.png');
   background-repeat:   no-repeat;
   background-position: right top;
}

div.tabheader a, div.tabheader a:visited {
   text-decoration:     none;
   color:               black;
}

#search-grid {
   white-space:         nowrap;
}

#homogenousMessage {
   font-weight:         bold;
   color:               red;
}

button.link {
   text-align:          left;
   background:          none!important;
   border:              none;
   padding-left:        -3px;
   font:                inherit;
   cursor:              pointer;
}

.black, .black a{
   color:black;
}


.noSampleDate {
   color: red;
}

.notInRange {
   color:red;min-width:1em;float:left;font-size: 130%;
}

.symbolsTable td{
   width:120px;
   white-space: nowrap;
}

.numberOfTanksMissing{
   color: orange;
}

.box1{
   border:1px solid black;
   padding:5px;
}

#password_strength_panel{
   background: #FFEBDE;
   margin: 50px auto;
   text-align: center;
}

#pass_meter{
   background: #FFEBDE;
   color: black;
   height: 20px;
   margin: 10px 0;
   padding: 10px;
   text-align:center;
   font-weight:bold;
}

.error{
   color:red;
}

.table{display:table;xxborder:1px solid black;}
.tableRow{display:table-row; xxborder:1px solid green}
.tableCell{display:table-cell; xxborder:1px solid red}

.invoiceHeader{
   width:100%;
   font-weight:bold;
   font-size:16px
}
.invoiceHeader .contentCell{padding-right:10px;}
.invoiceHeader .contentCell:first-child {
   width:120px;
}
.invoiceHeaderBottom{caption-side:bottom;display: table-caption;}

.clearfix::after {
   content: "";
   clear: both;
   display: table;
}

.tableBorderCollapse {
   border-collapse: collapse;
}

.tableBorderCollapse table, .tableBorderCollapse th, .tableBorderCollapse td {
   border: 1px solid black
}

#form\.additional_pricelist_id, #form\.pricelist_id, #form\.test_id{width:600px;}
#form\.client_reference{width:300px;}

/* select2 jquery plugin*/
/* Give select2 input fields same color as normal selects  */
.select2-container--default .select2-selection--single .select2-selection__rendered{
   color:black;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
   border-color: black transparent transparent transparent;
}

/* Give select2 input fields same height as normal selects */
.select2-selection__rendered {
   line-height: 22px !important;
}
.select2-container .select2-selection--single {
   height: 21px !important;
}
.select2-selection__arrow {
   height: 22px !important;
}
/* Give all input fields ame padding as select2*/
input, textarea{padding-left:6px;}
/* Remove rounded corners of select2 */
[class^='select2'] {
   border-radius: 0px !important;
}
/* Reduce vertical space between options*/
.select2-results__option {
   padding: 0px;
   padding-left: 5px;
}

/* Without line below, dialogs would appear shortly, and then disapear when page loads */
.dialog { display: none; }

.vesselInputCont{display:none;}

.exIntoCont ul {display:inline;}

.menuCustom{
   background:#D0D0D0;
}
.menuCustom div{
   font-weight:bold;
   padding-left:5px;
   padding-top:5px;
}

.menuCustom ul{
   margin-top:0px;
}

@supports not (-ms-high-contrast: none) {
   /* Non-IE styles here */
   .logout{
       float:right;
      display:inline-block!important;

    }
}


@media print {
   /* Do not print anything with class noPrint*/
   .noPrint {
      display: none;
   }
}
.icon{width:16px;height:16px;}
.iconSmall{width:7px;height:7px;color:grey;}
.iconMedium{width:10px;height:10px;margin-top:0px;}
.cccciconDef{font-size:20px;padding-left:3px;padding-right:3px;}

.testInvoiceTable .pp{width:15px;}

/* Begin Sweetalert */
.swal2-styled.swal2-confirm {
   border-radius: 0px!important;
   background: initial;
   background-color: #efefef!important;
   color: black!important;
   font-size: 1em;
   border: 1px solid black!important;
}
.swal2-popup .swal2-styled:focus {
   box-shadow: none !important;
}
/* End Sweetalert */

.colorWarning{
   color:orange;
}



.tagFormInputWidth{width:258px!important;}
.tagFormSelectWidth{width:270px!important;}
.tagFormInputWidthSmall{width:88px!important;}
.tagFormInputSelectSmall{width:100px!important;}
.tagFormInputWidthBig{width:522px;}
.tagFormSpinnerWidth{width:240px!important;}

.inputWidthBig{width:522px!important;}
.selectWidthBig{width:534px!important;}

.cursorHelp{cursor:help;}
.cursorMove{cursor:move;}
.cursorPointer{cursor:pointer;}
.textAlignRight{text-align: right;}
.displayNone{display: none;}
.displayInlineBlock{display:inline-block;}
.floatLeft{float:left!important;}
.floatRight{float:right;}
.textAlignCenter{text-align: center;}
#manualSubjectCheckbox{float:right;}
#manualSubjectCheckbox input{margin-left:20px;}
.buttonCont{padding: 0.5em;text-align:center;}
.tagPageMenu{background:white;margin-top:30px;right:0px;position:absolute;}
.multiCustomerContTagpage{margin:6px;margin-bottom:10px!important;}
.multiCustomerContTagpage table{border-color:#C0C0C0;}
.bgBlack{background:black!important;}
.bgWhite{background:white!important;}
.bgOrange{background:#FF6600!important;}
.tagCustomerTab{padding-left:10px;padding-right:10px;}

.colorBlack{color:black!important;}
.colorGrey{color:grey;}
.colorRed{color:red!important;}
.colorGreen{color:green!important;}
.colorWhite{color:white!important;}


.checkbox{width:14px;}
.xxxxxxxtagIconsCont{width:54px;}
.xxxxxxxxiconsCont{width:54px;}
.xxxxxxxxxiconsCont i{font-size:18px;padding-left:3px;padding-right:3px;}
.densityTypeCont{min-width:60px;}
.displayNone{display:none;}
#placeImg img{
   max-width:400px;
}
#placeImg{
   float:left!important;
   max-width:400px;
}
.paddingTop0px{padding-top:0px!important;}
.redBold{font-weight:bold;color:red;}
.whiteSpaceNowrap{white-space:nowrap;}
.width90Procent{width: 90%;}
.deleteCheckboxCont{width:14px;}
.ratesExplanationGrid{padding-left:5px;margin-right:5px;}
.paddingLeft0px{padding-left:0px}
.fontWeightBold{font-weight:bold;}
.fontSize10px{font-size:10px;}
.fontSize12px{font-size:12px;}
.fontSize14px{font-size:14px }
.fontSize16px{font-size:16px;}
.fontSize18px{font-size:18px;}
.fontSize20px{font-size:20px;}
.overflowHidden{overflow:hidden}
.displayTable-row-group{display: table-row-group;}
.width50Procent{width:50%;}
.width100Procent{width:100%;}

.labForm{padding-bottom:30px;}

/* Specification links styling - Grid layout */
.specifications-container {
    margin: 0px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #F8F8F8;
}

.specifications-container h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 16px;
}

/* Grid layout for specification links */
.specification-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
    grid-gap: 10px;
    margin: 0;
    padding: 0;
}

/* For smaller screens, reduce the number of columns */
@media (max-width: 1200px) {
    .specification-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .specification-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .specification-links-grid {
        grid-template-columns: 1fr;
    }
}

.spec-link-item {
    padding: 3px 0;
}

.spec-link-item a {
    text-decoration: none;
    color: #0066cc;
}

.spec-link-item a:hover {
    text-decoration: underline;
    color: #004080;
}

/* Dark mode compatibility */
/*body.dark-mode .specifications-container {
    background-color: #333;
    border-color: #555;
}

body.dark-mode .specifications-container h4 {
    color: #eee;
}

body.dark-mode .spec-link-item a {
    color: #4d94ff;
}

body.dark-mode .spec-link-item a:hover {
    color: #80b3ff;
}*/

/* --- Tag types */
.tagTypes {
   /*bottom: 12px;*/
   /*right: 12px;*/
   display: flex;
   /*align-items: center;*/
   /*gap: 20px;*/
   flex-wrap:wrap;
}

.tagTypes > .tagType {
   border-radius: 5px;
   border: 1px solid lightGrey;
   padding:20px;
   margin-right:20px;
   margin-bottom:20px;
}

.tagTypes > .tagType > .name{
   font-weight:bold;
}
.ethanolRender{
   padding-bottom:10px;
}

.tankContainer{
   display:none;
}

/* Give Add test button, test - and numbew of test select the same height*/
.addTestHeight select, .addTestHeight button, .addTestHeight .select2-selection__rendered, .addTestHeight .select2-container .select2-selection--single, .addTestHeight .select2-selection__arrow {
   height:22px!important;
   margin-bottom:2px!important;
}

/* End tag types */

.finalReportButtons{
   float:right;
   padding-top:10px;
   padding-bottom:10px;
}
.hoverIcon{
   color:black;
}
.hoverIcon:hover{
   color:#FF6600;
}

.backgroundEven {
   background-color: #F8F8F8;
}

.backgroundOdd {
   background-color:#FFEBDE;
}

/* For accordion, used for FAQ */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
   border: 1px solid #FF6600;
   background:#FF6600;
}

.accordionButttons{
    float:right;
    padding-left:5px;
    padding-right:5px;
}


/* Styles links where the default link styling does not work, like in tooltip */
.colorlink a{
   color: #0000EE;
}

/* styles the unvisited link */
.colorlink a:visited {
   color: purple;
}

/* styles the link on being hovered */
.colorlink a:hover {
   /*text-decoration:underline;*/
}

/* styles the link while clicked */
.colorlink a:active {
   color: red;
}

#compoTableCont tr:not(.noSortable) {
   cursor: move;
}

.grid a {
   color: black;
}

/* You can highlight a table row by clicking on it.*/
.grid .markRow tr.selectedRow {
   background-color: #777777 !important;
   color: white!important;
}
.grid .markRow tr.selectedRow a:link, .grid .markRow tr.selectedRow a:visited{
   color: white!important;
}

/* Rotated blend table base styles (moved from template) */
@media print { 
  .rotated-blend-container { page-break-before: always; }
}
.manual-override { color: red; }
.manual-override-overwrite { color: #1e40af; }
.rotated-blend th, .rotated-blend td { padding: 4px 6px; vertical-align: top; }
.rotated-blend thead th { background: #f0f0f0; }
.rotated-blend thead th.header-white { background: #ffffff !important; }
/* Prevent grid hover from affecting rotated table rows */
.grid .rotated-blend tr:hover { background: inherit !important; color: inherit !important; }
/* Hover states within rotated table */
#rotatedBlendTable tbody tr:hover > td,
#rotatedBlendTable tbody tr:hover > th { background: #777777 !important; color: #ffffff !important; }
#rotatedBlendTable tbody td:hover,
#rotatedBlendTable tbody th:hover { background: #777777 !important; color: #ffffff !important; }

/* Rotated blend table column striping */
#rotatedBlendTable tbody td:nth-child(even) { background-color: #F8F8F8; }
#rotatedBlendTable tbody td:nth-child(odd)  { background-color: #FFEBDE; }

/* Rotated blend table utilities (moved from template) */
.rotated-legend { font-size: 12px; color: red; margin: 6px 0 12px; }
.mt-8 { margin-top: 8px; }