.text-center {
  text-align: center; }

.button {
  background: linear-gradient(0deg, var(--button) 70%, var(--button-two) 100%);
  color: white !important; }
  .button:hover {
    background: linear-gradient(0deg, var(--button-active) 75%, var(--button-active-two) 100%); }

div.container div.content h2 {
  color: var(--primary-bright-color); }
div.container div.content div.gray-bg {
  padding: 15px 25px 10px 25px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  border: 2px solid #bfbfbf;
  position: relative; }

div.chart-container {
  padding: 10px; }

div.new-download {
  font-size: 15px;
  position: absolute;
  top: 7px;
  right: 25px; }
  div.new-download span {
    float: right;
    margin-right: 5px; }
  div.new-download i {
    float: right;
    margin-right: 5px;
    line-height: 1.35; }
    div.new-download i.fa-sort, div.new-download i.fa-filter {
      float: left; }
  div.new-download button.download-btn {
    background: none;
    border: none;
    margin-right: 5px; }
    div.new-download button.download-btn:focus {
      outline: 0; }
  div.new-download a.download-btn {
    float: right;
    text-decoration: none;
    margin-right: 5px; }
    div.new-download a.download-btn.sf {
      margin-right: 25px; }
  div.new-download #fs-btn {
    cursor: pointer; }
    div.new-download #fs-btn i {
      margin-left: 15px;
      margin-right: -10px; }

div.pagination {
  color: #949494;
  font-weight: bold;
  width: 100%; }
  div.pagination .step-links a, div.pagination .step-links span.l-separator {
    float: right;
    margin-right: 5px;
    font-weight: normal; }
  div.pagination .step-links a {
    text-decoration: none; }

.pagination.top-right {
  margin-top: -20px !important; }

#companies {
  width: 100%; }

div#cards, div#drivers, div#vehicles, div#transactions, div#transactions div.transactions-table {
  overflow: visible; }

div#transactions, .section {
  position: relative; }
  div#transactions div.new-download, .section div.new-download {
    top: 7px;
    right: calc(50% - 50px); }
    div#transactions div.new-download.long, .section div.new-download.long {
      right: calc(50% - 405px); }
      div#transactions div.new-download.long a.download-btn, .section div.new-download.long a.download-btn {
        margin-right: 10px; }

body {
  overflow-x: auto; }
  body div.wrapper {
    min-width: 1150px; }

.highcharts-container i.fas {
  font-size: 20px;
  color: var(--chart-export-color); }

.highcharts-container .highcharts-button {
  background: transparent; }

div.gray-bg h2 {
  margin-top: 0;
  margin-bottom: 0px; }

div.ui-buttonset label.ui-state-default {
  background: linear-gradient(0deg, var(--button) 70%, var(--button-two) 100%);
  color: gainsboro;
  border: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  margin-right: 0; }
div.ui-buttonset label.ui-state-active, div.ui-buttonset label.ui-state-default:hover {
  background: linear-gradient(0deg, var(--button-active) 75%, var(--button-active-two) 100%);
  color: white; }

form.custom-form {
  border: none;
  -moz-border: none;
  padding: 0;
  width: auto;
  box-shadow: none;
  -moz-box-shadow: none; }
  form.custom-form .form-label label {
    color: var(--primary-dark-color); }

.brand-btn {
  background: var(--brand-btn-primary);
  color: white; }
  .brand-btn:hover {
    background: var(--brand-btn-hover); }

div.ui-datepicker div.ui-datepicker-header {
  background: var(--primary-bright-color);
  color: white; }
  div.ui-datepicker div.ui-datepicker-header a:hover {
    background: var(--primary-color); }
div.ui-datepicker table.ui-datepicker-calendar {
  background: transparent; }
  div.ui-datepicker table.ui-datepicker-calendar thead tr th {
    background: var(--primary-dark-color);
    color: white; }
  div.ui-datepicker table.ui-datepicker-calendar tbody tr td {
    border: none; }
    div.ui-datepicker table.ui-datepicker-calendar tbody tr td a {
      background: var(--primary-bright-color);
      color: white; }
      div.ui-datepicker table.ui-datepicker-calendar tbody tr td a:hover {
        background: var(--primary-color); }

div.ui-timepicker table.ui-timepicker-table td.ui-timepicker-hours, div.ui-timepicker table.ui-timepicker-table td.ui-timepicker-minutes {
  background: transparent; }
  div.ui-timepicker table.ui-timepicker-table td.ui-timepicker-hours div.ui-timepicker-title, div.ui-timepicker table.ui-timepicker-table td.ui-timepicker-minutes div.ui-timepicker-title {
    background: var(--primary-dark-color);
    color: white; }
div.ui-timepicker table.ui-timepicker-table table.ui-timepicker {
  background: transparent; }
  div.ui-timepicker table.ui-timepicker-table table.ui-timepicker tbody tr td {
    padding: 3px;
    background: transparent;
    border: none; }
    div.ui-timepicker table.ui-timepicker-table table.ui-timepicker tbody tr td a {
      padding: 6px;
      background: var(--primary-bright-color);
      color: white;
      border: none; }
      div.ui-timepicker table.ui-timepicker-table table.ui-timepicker tbody tr td a:hover {
        background: var(--primary-color); }

.section-header {
  border-radius: 5px;
  background: linear-gradient(0deg, var(--section) 70%, var(--section-two) 100%);
  position: relative; }
  .section-header .fas.fa-caret-down, .section-header .fas.fa-caret-up {
    position: absolute;
    right: 10px;
    top: 8px; }
  .section-header .fas.fa-caret-up {
    display: none; }
  .section-header.open {
    background: linear-gradient(0deg, var(--section-active) 75%, var(--section-active-two) 100%); }
    .section-header.open .fas.fa-caret-up {
      display: block; }
    .section-header.open .fas.fa-caret-down {
      display: none; }
  .section-header:hover {
    background: linear-gradient(0deg, var(--section-active) 75%, var(--section-active-two) 100%); }

.new-tank-diag {
  float: right; }
  .new-tank-diag .new-tank-container {
    width: 550px;
    height: 380px;
    position: relative; }
    .new-tank-diag .new-tank-container:hover .popup-tank-data {
      display: block; }
    .new-tank-diag .new-tank-container img.main-tank {
      width: 550px;
      height: 380px; }
    .new-tank-diag .new-tank-container img.tank-details {
      width: 550px;
      height: 380px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4; }
    .new-tank-diag .new-tank-container .fill-container {
      position: absolute;
      bottom: 0;
      width: 550px;
      height: 380px;
      overflow: hidden; }
      .new-tank-diag .new-tank-container .fill-container img {
        width: 550px;
        height: 380px;
        left: 0;
        position: absolute;
        bottom: 0; }
    .new-tank-diag .new-tank-container .low-level-warning, .new-tank-diag .new-tank-container .low-level-alert {
      width: 460px;
      height: 1px;
      border-bottom: 2px solid yellow;
      position: absolute;
      left: 45px;
      z-index: 3;
      border-bottom-left-radius: 10px; }
    .new-tank-diag .new-tank-container .low-level-warning {
      border-bottom: 2px solid #2D4FF3; }
    .new-tank-diag .new-tank-container .low-level-alert {
      border-bottom: 2px solid red; }
    .new-tank-diag .new-tank-container div.popup-tank-data {
      background: rgba(255, 255, 255, 0.7);
      width: 200px;
      position: absolute;
      top: 100px;
      z-index: 9;
      padding: 10px;
      border-radius: 5px;
      left: 75px;
      display: none; }
      .new-tank-diag .new-tank-container div.popup-tank-data p {
        margin: 0; }
      .new-tank-diag .new-tank-container div.popup-tank-data .square-container .text-container {
        display: inline-block; }
      .new-tank-diag .new-tank-container div.popup-tank-data .square-container .square {
        width: 10px;
        height: 10px;
        float: left;
        margin-right: 10px;
        margin-top: 8px;
        display: inline-block;
        background: transparent; }
        .new-tank-diag .new-tank-container div.popup-tank-data .square-container .square.red {
          background: red; }
        .new-tank-diag .new-tank-container div.popup-tank-data .square-container .square.yellow {
          background: yellow; }
        .new-tank-diag .new-tank-container div.popup-tank-data .square-container .square.blue {
          background: #2D4FF3; }

.site-tank-data {
  display: inline-block;
  width: 100%;
  position: relative; }
  .site-tank-data .tank_no_title {
    position: absolute;
    left: 305px;
    top: 7px;
    width: 80%;
    color: black; }
    .site-tank-data .tank_no_title span {
      width: 110px;
      display: inline-block;
      text-align: center;
      color: gray; }
      .site-tank-data .tank_no_title span.tank-last-dip {
        width: 160px; }
  .site-tank-data .gauge-container {
    display: inline-block;
    margin-top: -20px;
    position: relative;
    height: 68px;
    width: 300px; }
    .site-tank-data .gauge-container img.main-gauge {
      width: 300px;
      height: 68px; }
    .site-tank-data .gauge-container img.tank-details {
      width: 300px;
      height: 68px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4; }
    .site-tank-data .gauge-container .fill-container {
      position: absolute;
      bottom: 2px;
      height: 68px;
      overflow: hidden; }
      .site-tank-data .gauge-container .fill-container img {
        width: 300px;
        left: 0;
        position: absolute;
        bottom: 0; }
    .site-tank-data .gauge-container .low-level-warning, .site-tank-data .gauge-container .low-level-alert {
      width: 145px;
      height: 1px;
      border-bottom: 2px solid yellow;
      position: absolute;
      left: 15px;
      z-index: 3;
      border-bottom-left-radius: 10px; }
    .site-tank-data .gauge-container .low-level-warning {
      border-bottom: 2px solid #2D4FF3; }
    .site-tank-data .gauge-container .low-level-alert {
      border-bottom: 2px solid red; }
    .site-tank-data .gauge-container .tank_pg {
      position: absolute;
      left: 18px;
      top: 28px;
      font-weight: bold;
      color: black; }
    .site-tank-data .gauge-container div.popup-tank-data {
      background: white;
      width: 200px;
      position: fixed;
      margin-top: -10px;
      z-index: 9;
      padding: 10px;
      border-radius: 5px;
      display: none;
      color: black; }
      .site-tank-data .gauge-container div.popup-tank-data h4 {
        margin-bottom: 10px; }
      .site-tank-data .gauge-container div.popup-tank-data p {
        margin: 0; }
      .site-tank-data .gauge-container div.popup-tank-data .square-container .text-container {
        display: inline-block; }
      .site-tank-data .gauge-container div.popup-tank-data .square-container .square {
        width: 10px;
        height: 10px;
        float: left;
        margin-right: 10px;
        margin-top: 8px;
        display: inline-block;
        background: transparent; }
        .site-tank-data .gauge-container div.popup-tank-data .square-container .square.red {
          background: red; }
        .site-tank-data .gauge-container div.popup-tank-data .square-container .square.yellow {
          background: yellow; }
        .site-tank-data .gauge-container div.popup-tank-data .square-container .square.blue {
          background: #2D4FF3; }

.site-status-button {
  text-align: left; }
  .site-status-button a span {
    margin: 0 auto; }
  .site-status-button .fa {
    color: var(--primary-bright-color);
    font-size: 17px;
    margin-top: 5px; }

.status-circle {
  width: 14px;
  height: 14px;
  border-radius: 10px;
  border: 1px solid #a5a5a5; }
  .status-circle.status-table {
    position: absolute;
    top: 4px; }
  .status-circle.ok {
    background: var(--ok); }
  .status-circle.warning {
    background: var(--warning); }
  .status-circle.error {
    background: var(--danger); }

.ui-dialog .ui-dialog-titlebar {
  background: linear-gradient(0deg, var(--section) 70%, var(--section-two) 100%);
  color: white; }
.ui-dialog label {
  color: var(--primary-color); }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
  background: linear-gradient(0deg, var(--section) 70%, var(--section-two) 100%);
  color: white; }
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
    background: linear-gradient(0deg, var(--section-active) 75%, var(--section-active-two) 100%); }

div#tabs {
  margin-top: 20px;
  border-top-left-radius: 0px;
  background: rgba(255, 255, 255, 0.6); }
  div#tabs ul.ui-widget-header {
    background: none;
    border: none;
    margin-left: -6px;
    margin-top: -35px; }
    div#tabs ul.ui-widget-header li {
      background: linear-gradient(0deg, var(--section) 70%, var(--section-two) 100%); }
      div#tabs ul.ui-widget-header li.ui-tabs-active, div#tabs ul.ui-widget-header li:hover {
        background: linear-gradient(0deg, var(--section-active) 75%, var(--section-active-two) 100%); }
      div#tabs ul.ui-widget-header li a {
        color: white; }

.fs-element.fs-expanded {
  position: absolute !important;
  background: white  !important;
  height: auto;
  max-height: fit-content;
  min-height: calc(100% - 30px);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.fs-table.expanded {
  max-height: none !important; }