﻿@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');

#title-block {
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   margin-bottom: 0rem;
}

   #title-block h1 {
      font-size: 2rem;
      font-weight: 300;
      font-family: "Open Sans",Helvetica,Arial,sans-serif;
      margin-top: 0px;
      margin-bottom: 0px;
   }

   #title-block h2 {
      font-size: 1.25rem;
      margin-top: 0px;
      margin-bottom: 0.25rem;
   }

   #title-block .registration-uk {
      font-size: 0.95rem
   }

h3 {
   font-size: 1.25rem;
}

h4 {
   font-size: 1.25rem;
}

.title-nav {
   margin-bottom: 0.5rem;
}

.submenu {
   background-color: #999;
}

   .submenu a.nav-link {
      color: #fff;
   }

      .submenu a.nav-link:hover {
         color: #666;
      }

   .submenu a.btn {
      border-radius: 0;
      border-width: 0;
      margin-right: 5px;
   }

      .submenu a.btn:hover {
         background-color: #ccc;
         margin-right: 5px;
      }

      .submenu a.btn:first-child {
         margin-left: 15px !important;
      }

.nav-tabs > .nav-link {
   font-weight: bold;
   font-family: "Open Sans",Helvetica,Arial,sans-serif;
   text-transform: uppercase;
}

.text-muted {
   color: #999999 !important;
}

@media (max-width: 768px) {
   h1 {
      font-size: 2rem;
   }

   h2 {
      font-size: 1.25rem;
   }

   h4 {
      font-size: 1rem;
   }
}

@media (max-width: 575px) {
   h1 {
      font-size: 1.5rem;
   }

   h2 {
      font-size: 1rem;
   }
}

.validation-summary-valid {
   display: none;
}

.validation-summary-errors {
   background-color: #cc0000;
   color: #fff;
}

   .validation-summary-errors ul {
      padding-left: 1em;
      margin-bottom: 0em;
   }

.form-group label {
   margin-bottom: 0px !important;
}

.form-group small {
   margin-top: 0px !important;
}

.card-img-top.device-type {
   width: 4vw;
   object-fit: scale-down;
}

.heading-new-child {
   margin-left: 10px;
}

.card-spacer {
   border: none;
}

.card-title {
   /*
    margin: -1.25rem -1.25rem 0.75rem -1.25rem;
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
    background-color: #e0e0e0;
    color: #000;
    */
   padding-bottom: 1rem;
}

.card-columns .card-body .nav-link {
   padding-left: 0;
}

.mptx-form-label {
   min-height: 1rem;
}

.mptx-floating-form-label {
   font-size: 0.85rem;
}

.mptx-form-edit sup.mandatory:before {
   color: #dc3545;
   content: '*';
   margin-left: 2px;
   font-weight: bold;
   font-size: 1.25em;
}

.mptx-fixed-font {
   font-family: Consolas, "Courier New", Courier, monospace;
   white-space: pre-wrap;
   font-size: 0.9rem;
}

header .navbar a {
   color: rgba(255,255,255,.75) !important;
}

   header .navbar a:hover {
      color: rgba(255,255,255,1) !important;
   }

   header .navbar a.selected {
      background: #666;
      border-radius: 20px;
      color: rgba(255,255,255,1) !important;
   }

      header .navbar a.selected:hover {
         background: #555;
         border-radius: 20px;
         color: rgba(255,255,255,1) !important;
      }

header .navbar .dropdown a {
   border-radius: 5px;
}

   header .navbar .dropdown a:hover {
      background-color: #666;
   }

header .navbar a.dropdown-toggle.show {
   background-color: #666;
   color: #fff !important;
}

header .navbar .dropdown-menu {
   background-color: #666;
   border: solid 1px #ccc;
   margin: 0 0 0 0 !important;
   border-radius: 5px;
}

   header .navbar .dropdown-menu a:hover {
      color: #fff !important;
      background-color: #333;
   }

   header .navbar .dropdown-menu .dropdown-divider {
   }

header a.navbar-brand {
   color: #fff !important;
}

   header a.navbar-brand:hover {
      color: #ccc !important;
   }

header .navbar-nav .nav-link {
   padding-left: 0.5em;
   padding-right: 0.5em;
}

/*td {
   line-height: 1em;
}*/

table.table td {
   background-color: #fff;
}

table.table > tbody > tr > td {
   vertical-align: middle;
}

td.mtpx-tbl-img-0 {
   background-color: #ccc;
   text-align: center !important;
}

div.dts div.dataTables_scrollBody {
   background: transparent !important;
}

table.dataTable tbody > tr.selected td, table.dataTable tbody > tr > .selected td {
   background-color: #e0e0e0 !important;
   color: #000000 !important;
}

table.table.dataTable > tbody > tr.selected > * {
   box-shadow: inset 0 0 0 9999px #e0e0e0 !important;
}

.dataTables_paginate, .dataTables_info, .dataTables_length {
   font-size: 0.85rem;
}

table.dataTable th {
   font-size: 0.85rem;
   font-family: "Segoe UI",Arial,Helvetica,sans-serif !important;
   line-height: 0.85rem;
   font-weight: normal;
}

table.dataTable td {
   font-size: 0.85rem;
   font-family: "Segoe UI",Arial,Helvetica,sans-serif !important;
   line-height: 0.85rem;
   font-weight: normal;
}

table.dataTable th {
   font-weight: bold;
}

table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
   top: 2px !important;
   left: 4px !important;
   border-radius: 4px !important;
   line-height: 16px !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
   text-indent: 0 !important;
   background-color: #666 !important;
   box-shadow: none !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
   background-color: #999 !important;
}

table.dataTable tr.dtrg-group td {
   background-color: #f0f0f0 !important;
   height: 2em !important;
}

table.dataTable tr.dtrg-end td {
   background-color: #ffffff !important;
   height: 2em !important;
}

table.dataTable td .mptx-ellipsis-cell {
   position: relative;
}

   table.dataTable td .mptx-ellipsis-cell:before {
      content: '&nbsp;';
      visibility: hidden;
   }

   table.dataTable td .mptx-ellipsis-cell span {
      position: absolute;
      left: 0;
      right: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

.toggle-off {
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important;
}

.toggle-on {
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important;
}

.toggle.off {
   border-color: rgba(0, 0, 0, .25) !important;
}

.toggle-handle {
   background-color: white !important;
   border: thin rgba(0, 0, 0, .25) solid !important;
}

.align-centre {
   text-align: center !important;
}

.align-right {
   text-align: right !important;
}

.align-left {
   text-align: left !important;
}

table.dataTable.table-sm > thead > tr > th.sorting_disabled {
   padding-right: 0.3rem;
}

.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
   background-color: #fc0;
}

.datepicker table tr td.today:before {
   border-bottom-color: #fc0;
}

.mptx-date-btn-prev, .mptx-date-btn-next {
   cursor: pointer;
}

.mptx-user-menu-details {
   padding: .75rem 1.5rem;
   margin-bottom: 0.5rem;
}

td.nowrap {
   white-space: nowrap;
}

.percentage-fill {
   background-repeat: no-repeat;
   background-position: bottom left;
}

.dropdown-item-checked::before {
   position: absolute;
   left: .4rem;
   content: '·';
   font-weight: 900;
}

.card .toggle .toggle-on, .card .toggle .toggle-off {
   word-wrap: normal;
}

@font-face {
   font-family: uk-registration;
   src: url('/fonts/CharlesWright-Bold.woff2');
}

.registration-uk {
   background-color: #FFEA00;
   color: #000;
   display: inline-block;
   font-family: uk-registration;
   text-transform: uppercase;
   padding: 0px 3px 0px 3px;
   border: 1px solid #000;
   border-radius: 3px;
}

.mptx-section-header-title {
   text-shadow: 2px 2px 4px #333333;
}

.fancytree-container {
   background: transparent !important;
   border: 0px none transparent !important;
}

.fancytree-expander {
   vertical-align: middle !important;
}

.fancytree-title {
   vertical-align: middle !important;
}

.fancytree-focused .fancytree-title {
   outline: 0px none transparent !important;
}

.fancytree-treefocus .fancytree-active .fancytree-title, .fancytree-active .fancytree-title {
   background: transparent !important;
   color: inherit !important;
}




/* The following is a workaround for floating labels mingling with content in textareas */
.form-floating.input_textarea label {
   min-width: 90%;
}

   .form-floating.input_textarea label::before {
      content: "";
      position: absolute;
      top: 0.9em;
      z-index: -1;
      width: 100%;
      height: 1.2em;
      background-color: white;
      box-shadow: 0 0 8px 4px #ffffff;
   }


.form-floating.input_textarea > .form-control:focus ~ label, .form-floating.input_textarea > .form-control:not(:placeholder-shown) ~ label, .form-floating.input_textarea > .form-select ~ label {
   opacity: 0.95;
   color: gray;
}

.mptx-motion-status-0 {
   color: #999;
}

.mptx-motion-status-1 {
   color: #c00;
}

.mptx-motion-status-2 {
   color: #0c0;
}

.mptx-motion-status-3 {
   color: #cc0;
}

.mptx-motion-status-4 {
   color: #c00;
}

.mptx-rating-value {
   color: #ffd700;
}

.mptx-rating-range {
   color: #cccccc;
}

.accordion-body p:last-child:not([style*="display:none;"]) {
   margin-bottom: 0px;
}

.card-body p:last-child:not([style*="display:none;"]) {
   margin-bottom: 0px;
}

.card-body div.row:last-child:not([style*="display:none;"]) {
   margin-bottom: 0px !important;
}

.card-body div.card:last-child:not([style*="display:none;"]) {
   margin-bottom: 0px !important;
}

.mptx-signature {
   border: solid 1px #ced4da;
   width: 400px;
}

.mptx-signature-body canvas {
   height: 250px;
   width: 400px;
}

.mptx-signature-footer {
   background-color: #f8f8f8;
   padding: 5px 5px 5px 5px;
}

.mptx-colour-indicator {
   border: 1px solid #cccccc;
   border-radius: 4px;
   display: inline-block;
   height: 12px;
   width: 12px;
   margin-left: 4px;
   margin-right: 4px;
}

.mptx-tab-footer {
   padding: 0.5rem 1rem;
   color: #fff;
   background-color: #e8e8e8 !important;
   border-top: 1px solid #e8e8e8 !important;
   margin: 1rem -1rem -1rem -1rem;
}

   .mptx-tab-footer:last-child {
      border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
   }

   .mptx-tab-footer:last-child {
      border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
   }

.modal-footer {
   justify-content: flex-start !important;
   background-color: #e8e8e8 !important;
   border-top: 1px solid #e8e8e8 !important;
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
}

.mptx-vehicle-status {
   border: 1px solid #e8e8e8;
   border-radius: 0.25em;
   padding: 0.125em;
   margin-right: 2px;
}

.mptx-geofence-name {
   border: dashed 1px #bbbbbb;
   background-color: #ffffff;
   padding-left: 4px;
   padding-right: 4px;
   padding-bottom: 2px;
   padding-top: 2px;
   border-radius: 10px;
   margin-top: 1px;
   margin-bottom: 1px;
}

.mptx-highlight-row {
   -webkit-animation: target-fade 2s 1;
   -moz-animation: target-fade 2s 1;
}

@-webkit-keyframes target-fade {
   0% {
      background-color: rgba(223,223,223,.8);
   }

   100% {
      background-color: rgba(223,223,223,0);
   }
}

@-moz-keyframes target-fade {
   0% {
      background-color: rgba(223,223,223,.8);
   }

   100% {
      background-color: rgba(223,223,223,0);
   }
}

.mptx-card-field-group {
   border-color: #ced4da !important;
}

.mptx-placeholder-token {
   background-color: #f0f0f0;
   font-family: Consolas, "Courier New", Courier, monospace;
   font-style: normal;
   border: solid 1px #cccccc;
   border-radius: 20px;
   cursor: help;
   margin-left: 1px;
   margin-right: 1px;
}

   .mptx-placeholder-token:before, .mptx-placeholder-token:after {
      content: "\00a0";
   }

.mptx-geofence-toggle {
   margin-right: 2px;
}

   .mptx-geofence-toggle > i {
      margin-top: 2px;
   }

.mptx-text-immob {
   background-color: #ff3333;
}

.mptx-text-mob {
   background-color: #33cc33;
}

.mptx-immob {
   background-color: #ff3333;
   /*   background-image: url('/images/ImmobBg.png');
*/ height: 5px;
   display: inline-block;
   border-style: none;
}

.mptx-mob {
   background-color: #33cc33;
   height: 5px;
   display: inline-block;
   border-style: none;
}

.mptx-slider-immob {
   background-color: #ff3333 !important;
}

.mptx-slider-mob {
   background-color: #33cc33 !important;
}

[disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle {
   cursor: auto !important;
   background-color: #e9ecef;
}

h5.card-header a.mptx-text {
   position: relative;
   float: left;
   overflow: hidden;
   max-width: 33px;
   margin-left: 5px;
   -webkit-transition: max-width 0.3s ease-in;
   -moz-transition: max-width 0.3s ease-in;
   -o-transition: max-width 0.3s ease-in;
   transition: max-width 0.3s linear;
}

   h5.card-header a.mptx-text:hover {
      max-width: 270px;
   }

   h5.card-header a.mptx-text span i {
      max-width: 250px;
      white-space: nowrap;
      margin-right: 2px;
   }

   h5.card-header a.mptx-text span {
      white-space: nowrap;
   }

.mptx-map-marker-label {
   background-color: #666;
   color: #ffffff !important;
   font-size: 10px !important;
   padding: 1px 3px 1px 3px;
   border: 1px solid #ffffff;
   border-left: 0px solid #000000;
   border-radius: 0px 4px 4px 0px;
   margin-left: -2px;
}

.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after,
.gm-style .gm-style-iw-tc::after {
   border-radius: 0px;
}

   .gm-style .gm-style-iw-c h1 {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 2px;
   }

.vis-text {
   font-size: 0.8em;
}

.vis-item.vis-background.mptx-motion-id-1 {
   background-color: rgba(153,153,153,0.25);
   border: 0px solid transparent;
   border-radius: 0px;
}

.vis-item.vis-background.mptx-motion-id-2 {
   background-color: #00cc00;
   border: 0px solid transparent;
   border-radius: 0px;
}

.vis-item.vis-background.mptx-motion-id-3 {
   background-color: #ff9900;
   border: 0px solid transparent;
   border-radius: 0px;
}

.vis-item.vis-background.mptx-motion-id-4 {
   background-color: #cc0000;
   border: 0px solid transparent;
   border-radius: 0px;
}

.vis-time-axis .vis-text {
   padding-left: 1px !important;
}

.what3words {
   color: #e11f26;
}

.iti__flag {
   background-image: url('/lib/intl-tel-input/img/flags.png');
}

@media (min-resolution: 2x) {
   .iti__flag {
      background-image: url('/lib/intl-tel-input/img/flags@2x.png');
   }
}

.mptx-read-more {
   overflow: hidden;
}

.mptx-read-more-btn, .mptx-read-less-btn {
   cursor: pointer;
   text-align: right;
}

hr.mptx-read-more-separator {
   background: linear-gradient(to bottom, #666, #fff);
   border-style: none;
   border-radius: 0px 0px 20px 20px;
   height: 15px;
   margin: 0px;
   margin-top: 2px;
}

.card-footer {
   color: #999 !important;
}

.chart-inner {
   margin-top: -100px;
   margin-bottom: 100px;
}

.chart-inner-title {
   margin-bottom: 5px;
   margin-top: 0;
}

.chart-inner-sub-title {
   font-size: 12px;
}

ul.mptx-marker-list {
   list-style-type: square;
   padding-left: 1em;
   margin: 0.5em;
}

   ul.mptx-marker-list li {
      margin-bottom: 0.25em;
   }

.mptx-card-field {
   border-color: #dee2e6 !important;
}

.noLocationOverlay {
   position: absolute;
   display: none;
   height: 100%;
   width: 100%;
   background-color: rgba(0,0,0,0.5);
   z-index: 2000;
}

.noLocationText {
   position: absolute;
   top: 50%;
   left: 50%;
   font-size: 25px;
   color: white;
   transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
}

.mptx-plant-stats {
   background-color: #f0f0f0;
}

.dt-container > div.row:first-child {
   margin-top: 0px !important;
}

ul.mptx-treeview {
   list-style-type: none;
   margin: 0px;
   padding-left: 0px;
}

   ul.mptx-treeview ul {
      list-style-type: none;
      padding-left: 16px;
   }

   ul.mptx-treeview li {
      margin-left: 0px;
   }

      ul.mptx-treeview li.no-child-organisations {
         padding-left: 45px;
         padding-top: 4px;
         padding-bottom: 4px;
      }

   /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
   ul.mptx-treeview .caret-down::before {
      transform: rotate(90deg);
      font-weight: bold;
   }

   /* Hide the nested list */
   ul.mptx-treeview .nested {
      display: none;
   }

   /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
   ul.mptx-treeview .active {
      display: block;
   }

.mptx-device-vehicle-title {
   background-color:#333;
   border: 1px solid #999;
}

.mptx-device-vehicle-name {
   font-size: 1.2rem;
}

.mptx-device-vehicle-registration {
   font-size: 0.8rem;
}

.mptx-tooltip-icon {
   --fa-primary-color: #000000;
   --fa-secondary-color: #cff4fc;
   --fa-secondary-opacity: 1;
}

.mptx-qr-code {
   display: flex;
   justify-content: center;
}

pre.mptx-json {
}
   pre.mptx-json .string {
      color: #cc0000;
   }
   pre.mptx-json .number {
      color: #ff9900;
   }
   pre.mptx-json .boolean {
      color: blue;
   }
   pre.mptx-json .null {
      color: #ff00ff;
   }
   pre.mptx-json .key {
      color: #333333;
   }
