/*:root {
    --chart-colour: green;
    **#075ea5*
    **#5e87a7 shade
    **#527595 shade
    **#ACCF25
    **#185785 PRIMARY
    **#5e87a7 PRIMARY - shade
    #e7eef5 PRIMARY - shade light
    //#185785 deep dark blue 
    #aece25 - SECONDARY #9ab725 darker shade
}*/

:root {
    --footer-height: 85px;

    --primary-colour: #185785;
    --accent-colour: #aece25;
    --alert-colour: #dc3545;
    --no-signal-colour: #8b959d;

    --wheel-correct-colour: #1e1e1e;
    --wheel-unpaired-colour: #54595d;
    --low-pressure-colour: #e50000;
    --high-pressure-colour: #320e75;
    --high-temperature-colour: #ff7e25;
    --low-voltage-colour: #ffce00;

    /* General UI Colors */
    --gray-light: #eee;
    /* For default button background */
    --gray-medium: #f0f2f5;
    /* For customer-breadcrumbs background */

    --gray-dark: #8b959d;
    /* For text #495057*/
    --main-content-background: #f0f2f5;
    --border-colour-light: #dee2e5;
    /* For breadcrumb border */
    --card-border-colour: #ddd;
    /* For customer card border */
    --card-shadow: rgba(0, 0, 0, 0.1);
    /* For card shadow */
    --text-colour-dark: #2b2d2f;
    --text-colour-light: #fff;
    --backgound-colour-light: #fefefe;
    --background-nice-gray: #f5f5f5;
}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container-fluid {
    width: 85%;
}

.modal-lg {
    min-width: 1250px;
    /* Change to a new desired size */
}

img {
    max-width: 100%;
}

br {
    margin: 4.5px
}

small {
    font-size: 10.5px;
}

i.fa {
    font-size: 50px;
    margin-bottom: 1rem;
    transition: all .2s ease-in-out;
}

i.fa.hidden {
    display: none;
}

h5 {
    margin: 7.5px 0px 25px 0px;
    color: #185785;
}

h6 {
    margin: 18px 7.5px 10.5px 7.5px;
    color: #555;
}

/* Remove margins and padding from the list */
ul {
    margin: 0;
    padding: 0;
}

/* Style the list items */
ul li {
    cursor: pointer;
    position: relative;
    padding: 7.5px;
    list-style-type: none;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
    /* make the list items unselectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ul li:nth-child(even) {
    background: #f9f9f9;
}

ul li.checked {
    background: black;
    color: #fff;
}

/* Darker background-color on hover #f9f9f9 background: #eee; */
ul li:hover {
    background: black;
    color: #fff;
}

table {
    font-size: 10px;
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 7.5px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

tr:nth-child(even):hover {
    background-color: #cccccc;
    /* slightly darker than #dddddd */
}

tr:nth-child(odd):hover {
    background-color: #eaeaea;
    /* slightly darker than #ffffff */
}

.current-user {
    background-color: #fff;
    color: #212529;
    /* Bootstrap default text */
    font-weight: 500;
    padding: 5px 8.5px;
    margin: 5px 8.5px;
    border-radius: 18px;
    border: 2.5px solid #9abb20;
    cursor: default;
    user-select: none;
    font-size: 8.5px;
}

.menu-icon {
    position: relative;
    margin-left: 15px;
    /* anchor for the dropdown */
}

/* hidden by default */
#usermenu.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    /* below the button */
    left: 0;
    z-index: 2000;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 4px 0;
}

/* visible when .show is toggled */
#usermenu.dropdown-menu.show {
    display: block;
}

#search-wrapper {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    /* Icon right, input opens left */
    align-items: center;
    justify-content: flex-end;
    height: 30px;
    margin-top: -10px;
    /* Adjust as needed to nudge it above version */
}

.search-icon-button {
    outline: none;
    border: none;
    background: none;
    margin: 0px 12.5px 0px 0px;
    padding: 0px 0px 0px 10px;
    cursor: pointer;
}

.search-icon-button:focus {
    outline: none;
    box-shadow: none;
}

.search-input {
    display: none;
    position: absolute;
    right: 65px;
    /* Space from icon */
    top: 0;
    width: 180px;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.check-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
    background-color: #aece25;
    border-radius: 50%;
    color: white;
    margin-left: 5px;
}

.selected-service-account-row {
    color: #212529;
    font-weight: 500;
}

.datepicker tr,
td,
th {
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
    background-color: unset !important;
}

.datepicker td.active {
    background-color: unset !important;
    border-color: unset !important;
    text-shadow: unset;
}

.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-image: linear-gradient(to bottom, #185785, #185785);
    font-size: 16.5px;
}

.datepicker table tr td.today {
    background-image: none;
    color: #0075ff;
    font-weight: 500;
    font-size: 16.5px;
}

.datepicker table tr td.today:hover {
    background-image: none;
}

label.wrap {
    /* width: 80%;*/
    overflow: hidden;
    position: relative;
    display: block;
}

select.dropdown {
    border: none;
    width: 105%;
    padding: 10px;
    top: -10px;
    left: -10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*appearance: none;*/
    cursor: pointer;
}

select.dropdown:focus {
    outline: 0;
}

label.wrap:after {
    content: "\f017";
    font-family: "Font Awesome 5 Free" !important;
    color: #000;
    position: absolute;
    right: 15px;
    top: 7.5px;
    z-index: 1;
}

label.wrap:hover:after {
    color: #185785;
    cursor: pointer;
}

input [type="date"] {
    position: relative;
    margin: 5px;
}

/* create a new arrow, because we are going to mess up the native one */
input[type="date"]:after {
    content: "\f073";
    font-family: "Font Awesome 5 Free" !important;
    padding: 0 5px;
    border-width: 0px;
    border: none;
    outline: none;
}

/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #185785;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 105px;
    left: 0;
    right: 25px;
    bottom: 0;
    width: auto;
    height: auto;
    background: transparent;
    cursor: pointer;
}

input[type="file"] {
    display: none;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.splashcontainer {
    height: 100vh;
    background-color: #185785;
    padding-top: 25px;
}

.api-login {
    height: 62.5vh;
    width: 100%;
    margin: 65px 0px 25px 0px;
    background: #fff;
}

.appheader {
    margin: 0 auto;
    width: 575px;
    height: 74.75px;
    background-size: 575px 74.75px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('icons/appheader.svg');
}

.headermain-login {
    width: 100vw;
    height: 18%;
    background: #185785;
    padding: 12px;
}

.headerlogo-login {
    width: 100vw;
    height: 12.75vh;
    background-size: 100vw 12.75vh;
    background-repeat: no-repeat;
    background-image: url('icons/logoheader-login.svg');
}

.footermain-login {
    height: 12.5vh;
    padding-top: 0.025px;
    padding-bottom: 65px;
    text-align: center;
    background: #185785;
}

.container-splash {
    height: 100vh;
    padding-top: 65px;
    background: #185785;
}

.splashicon {
    margin: 85px auto;
    width: 125px;
    height: 125px;
    background-size: 125px 125px;
    background-repeat: no-repeat;
    background-image: url("icons/icon.svg");
}

.splashlabel {
    color: #fff;
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: larger;
    padding: 25px 12.5px;
}

.splashlogo {
    margin: 85px auto;
    width: 175px;
    height: 85px;
    background-repeat: no-repeat;
    background-size: 175px 85px;
    background-image: url('icons/stackedlogo.svg');
}

.username {
    color: white;
    font-size: larger;
    margin: 0 auto;
    margin-top: 85px;
    display: flex;
    text-align: center;
    justify-content: center;
}

.version {
    color: white;
    font-size: large;
    margin: 0 auto;
    margin-top: 5px;
    padding-bottom: 65px;
    display: flex;
    text-align: center;
    justify-content: center;
}

.customerhierarchycontainer {
    gap: 1.5rem !important;
}

.customer-card {
    min-height: 205px;
    /* adjust to what looks good */
}

.customer-card-title {
    min-height: 75px;
    /* adjust to what looks good */
}

.customer-card .btn {
    width: 100%;
    /* optional: make buttons full width */
}

.btn.view-customers,
.btn.view-units {
    width: 145px;
    font-size: small;
    margin-bottom: 12.5px;
}

.customer-count,
.unit-count {
    margin-bottom: 2.5px;
}

.toppanebox {
    position: relative;
    border: 0.5px solid #eee;
    padding: 5px;
}

.toppane {
    width: 100%;
    padding: 8.5px 0;
    background: #eee;
    border-radius: 5px;
}

.toppane #version,
#usernametoppane,
#log {
    margin: 2.5px;
    position: absolute;
    right: 20px;
    color: black;
    overflow: hidden;
}

.toppane #version {
    height: 20px;
    font-size: 12.5px;
    padding: 1.5px 5px 1.5px 5px;
    bottom: 10%;
}

.toppane #usernametoppane {
    bottom: 35%;
    padding: 5px 2.5px 5px 10px;
    text-align: right;
    color: #555;
    font-size: medium;
    font-weight: 700;
}

.toppane #log {
    bottom: 45%;
    padding: 5px 2.5px 5px 10px;
    text-align: right;
    color: red;
    font-size: small;
    font-weight: 700;

}

/* .menu-icon {
    position: relative;
    margin-left: 15px;
} */

.transparent-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.transparent-btn img {
    cursor: pointer;
}

.dropdown-menu {
    min-width: 150px;
}

.dropdown-item {
    font-size: 14px;
}

.mainpane {
    height: 100vh;
    border-left: 0.5px solid #eee;
    border-right: 0.5px solid #eee;
    padding: 8.5px;
}

/* .detailspane {
    height: 100%;
} */

.mainbuttonspane {
    display: flex;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    background: #eee;
    padding: 3.5px 0px;
}

/*.headeroptionspane {
    display: flex;
    background: #eee;
    padding: 3.5px 0px;
}*/

.leftbuttonspane {
    display: flex;
    width: 100%;
    padding: 8.5px 0px 10px 0px;
    background: #eee;
}

.unitslistmain {
    height: 100%;
    border-top: 0.25px solid #eee;
    border-bottom: 0.25px solid #eee;
    padding-top: 8.5px;
}

.unitslistcontainer {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #eee;
}

.unitsgrouplistcontainer {
    height: 95%;
}

.statusradiobtns {
    border: 2.5px solid #185785;
    margin: 5px;
    margin-right: 10px;
    border-radius: 4.5px;
    display: flex;
    justify-content: center;
    width: 66.6%;
}

.charttimeoptions {
    border: 1.5px solid #185785;
    border-radius: 4.5px;
    width: 80%;
    margin: 5px 12px 5px 12px;
    padding: 5px 12px 5px 12px;
    display: flex;
    justify-content: space-between;
}

.unitstatusessummary {
    padding: 5px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    width: 100%;
    overflow-x: auto;
}

.metricsummaries {
    margin: 0px 6.5px;
}

.metricsummary {
    padding: 5px;
    font-weight: 500;
}

.metricsummaryperc {
    margin-left: 2.5px;
    padding: 5px;
    /* font-size: 12.5px;*/
    color: white;
}

.metricsummarytotal {
    border-color: gray;
}

.metricsummarylowvoltage {
    border-color: #FFCC00;
}

.metricsummaryhightemperature {
    border-color: #ff580f;
}


.metricsummaryunderinflated {
    border-color: red;
}

.metricsummaryoverinflated {
    border-color: #7557ae;
}

.metricsummarynormal {
    border-color: #2b2d2f;
}

.metricsummarynosignal {
    border-color: #8b959d;
}

.unit {
    padding: 6.5px 1.5px 1.5px 1.5px;
    color: gray;
}

.unit:nth-child(even) {
    background: #f7f7f7;
}

.unit:nth-child(odd) {
    background: #e5e5e5;
}

.unit:hover {
    background: #5a5b5d;
    color: #fff !important;
}

.unit:hover .toggle-button {
    background: #5a5b5d;
    /* Make button background match */
    color: #fff;
    /* Change the text color of the button */
    border-color: #5a5b5d;
    /* Optional: Adjust border if necessary */
}

.unit:hover .subunit {
    background: #5a5b5d;
    /* Change background for subunit container */
}

.unit:hover .subunitname {
    background: #5a5b5d
}

.selectedunit {
    background: black !important;
    color: #fff !important;
}

.unit-content {
    display: flex;
    align-items: flex-start;
    gap: 4.5px;
}

.unitstatus {
    /* position: absolute; */
    /* left: 295px; */
    /* width: 65%; */
    flex: 1 1 auto;
    /* take the remaining space in the row */
}

.trailer-content {
    display: flex;
    justify-content: space-between;
    /*Align content to the left and right ends */
    align-items: center;
    /* Vertically align items */
}

.trailerstatus {
    flex-grow: 1;
    /* Allow status to take available space */
    display: flex;
    justify-content: flex-start;
    /* Align diagrams to the left */
}

.statusdiagram {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.5px;
    max-width: 100%;
    box-sizing: border-box;
}

.sensorvaluesstatus {
    color: white;
    margin-right: 2.5px;
    margin-bottom: 1.5px;
    /*padding: 1.5px 0px 1.5px 0px;*/
    font-size: medium;
    border: 0.15px solid #eee;
    border-radius: 4.5px;
    font-weight: 500;
    min-width: 31.5px;
    height: 28.5px;
    justify-content: center;
    text-align: center;
}

.subunit-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    padding-top: 10px;
    padding-left: 20px;
    border-top: 1px solid #ddd;
}

.subunit {
    width: 100%;
    margin: 0px 18px 5px 435px;
    /*background-color: #f9f9f9;*/
}

.subunitname {
    margin: 0px 135px -25px 235px;
}

.toggle-button {
    width: 35px;
    text-align: center;
    padding: 5px 8.5px;
    margin-right: 10px;
    font-size: 16px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3.5px;
}

.toggle-button:hover {
    background-color: #7a7b7d;
    border: 1px solid #acadae;
    color: #fff !important;
}

#mainpane .unitheader {
    font-size: 18px;
    flex: 0 0 185px;
    cursor: pointer;
}

#detailspane .unitheader {
    display: flex;
    flex: 1 1 auto;
    margin: -12px 0px -5px 12px;

    align-items: center;
    cursor: pointer;
}

.detailpane-wrapper {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    width: 100%;
}

/* Make sure the children don't wrap or overflow */
.leftpane,
.middlepane,
.rightpane {
    flex: 1;
    /* or fixed width if you want */
    padding: 1rem;
    /* optional */
    background-color: #f9f9f9;
    /* just for visibility */
}

.leftpane>*,
.middlepane>*,
.rightpane>* {
    min-height: 100%;
}

/* Widths add up to 100% */
.leftpane {
    width: 32.5%;
    border: 0.25px solid #eee;
    padding: 5px;
    padding-bottom: 5px;
}

.middlepane {
    width: 35%;
    border: 0.1px solid #eee;
    border-left: none;
    padding: 5px;
}

.rightpane {
    width: 32.5%;
    border: 0.1px solid #eee;
    border-left: none;
    padding: 5px;
}

/* Optional: make it responsive */
@media (max-width: 768px) {
    .detailpane-wrapper {
        flex-direction: column;
    }

    .leftpane,
    .middlepane,
    .rightpane {
        width: 100%;
        height: auto;
    }
}

.leftpane-container {
    height: 100%;
    background-color: #eee;
    border: 0.1px solid #eee;
    border-radius: 5px;
}


.selectunitinfo {
    position: absolute;
    top: 7.5px;
    right: 10px;
    display: inline-block;
    margin-left: 12.5px;
    width: 0px;
    height: 0px;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 12.5px solid #a7a7a7;
}

.selectunitinfo:hover {
    border-top: 12px solid #185785;
}

.unitinfo {
    z-index: 1;
    text-align: left;
    font-size: small;
    color: #555;
    /*margin: 7.5px;*/
    padding-bottom: 12.5px;
}

.unitinfoheader {
    display: flex;
    margin-top: 12px;
}

.unitinfopane {
    background: white;
    overflow-y: auto;
    z-index: 5;
}

.paneframe {
    background: white;
    padding: 5px 5px 5px 5px;
}

.panecontainer {
    color: #555;
    background: #eee;
    border-radius: 5px;
    padding: 12.5px;
}

.unitpanecontainer {
    color: #555;
    background: #eee;

    border-radius: 5px;
    padding: 12.5px;
    padding-top: 2.5px;
}

.drivermobile {
    float: left;
    color: #555;
    font-size: small;
    padding-left: 12.5px;
    padding-right: 12.5px;
    margin-top: 2.5px;
}

.drivername {
    float: left;
    color: #555;
    font-weight: 500;
    padding-left: 5px;
}

.editdriverinfo {
    cursor: pointer;
    /*padding-bottom: 18px;*/
    margin-bottom: 12px;
}

.editdriverinfo:after {
    /*        padding-top: 10px;*/
    padding-left: 5px;
    width: 18px;
    height: 18px;
    display: inline-block;
    content: '';
}

.editdriverinfo:hover:after {
    transform: scale(1.5);
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiUlEQVQ4y2NgGFKgs7OTl2zNEyZMmAgEDZMmTeogWTNQUwVQcyeIDaLnz5/PQYrmssmTJ1sC6QQg7gXiFlI0l4I0Q9lOQNuLiNYMVFwCxFZQtiPQgEKSNAM1WMM0k2wzTDPQ+Q5AdjEpfs6CRRPJmqEGvAC6IAlId4NcQk58vwDih0DbMxhGDgAAx6ZVXMd4yEMAAAAASUVORK5CYII=');
}

.editunitinfo {
    cursor: pointer;
}

.editunitinfo:after {
    padding-top: 10px;
    padding-left: 5px;
    width: 18px;
    height: 18px;
    display: inline-block;
    content: '';
}

.editunitinfo:hover:after {
    transform: scale(1.5);
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiUlEQVQ4y2NgGFKgs7OTl2zNEyZMmAgEDZMmTeogWTNQUwVQcyeIDaLnz5/PQYrmssmTJ1sC6QQg7gXiFlI0l4I0Q9lOQNuLiNYMVFwCxFZQtiPQgEKSNAM1WMM0k2wzTDPQ+Q5AdjEpfs6CRRPJmqEGvAC6IAlId4NcQk58vwDih0DbMxhGDgAAx6ZVXMd4yEMAAAAASUVORK5CYII=');
}

.selectdatebutton {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.unitgroup {
    background: gray;
    cursor: pointer;
    position: relative;
    padding: 2.5px;
    margin: 5px 0px;
    font-size: 18px;
    /* font-weight: 700;*/
    color: white;
    border: 1.5px;
    border-width: 1px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.unitgroupcenter {
    color: gray;
    background: #dde7c8;
    text-align: center;
    font-size: 18px;
    margin: 0px 0px 5px 0px;
}

.unitstatusesgroup {
    color: #dde7c8;
}

.unitgroup:hover {
    background: #185785;
    opacity: 0.95;
    color: white;
}

.unitstatusesgroup:hover {
    background: #dde7c8;
    color: #dde7c8;
    cursor: default;
}

.blinkflag {
    animation: blinker 1.5s linear infinite;
    color: red;
    font-size: large;
    font-weight: 800;
    margin: 5px 2.5px 18px 5px;
}

.redflag {
    color: red;
    font-size: large;
    font-weight: 800;
    margin: 5px 2.5px 18px 5px;
}

.purpleflag {
    color: #7557ae;
    font-size: large;
    font-weight: 800;
    margin: 5px 2.5px 18px 5px;
}

.orangeflag {
    color: #ff7e25;
    font-size: large;
    font-weight: 800;
    margin: 5px 2.5px 18px 5px;
}

.yellowflag {
    color: #ffce00;
    font-size: large;
    font-weight: 800;
    margin: 5px 2.5px 18px 5px;
}

.blueflag {
    color: #8b959d;
    /*#009dff;*/
    font-size: large;
    font-weight: 800;
    margin: 5px 2.5px 18px 5px;
}

.listspanicons {
    margin-top: 12px;
    margin-left: auto;
    display: inline-flex;
}

.serviceagentcustomermodal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.serviceagentcustomermodal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 500px;
}

.drivermodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 5;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

.unitmodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 5;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.drivermodal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
}

.unitmodal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 35%;
}

.assignunitmodal-content {
    width: 45%;
}

.context-menu-list {
    box-shadow: none;
    border: 1px solid #f3f3f3
}

.context-menu-list {
    position: absolute;
    display: inline-block;
    /*    min-width: 5em;
    max-width: 10em;*/
    padding: .25em 0;
    margin: .3em;
    /*font-family: inherit;*/
    /*font-size: 5px;*/
    list-style-type: none;
    background: #fff;
    border: 1px solid #bebebe;
    border-radius: .2em;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5)
}

.context-menu-item {
    font-size: 10px;
    position: relative;
    /*padding: 0.5em 6em;*/
    color: #2f2f2f;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff
}

.close {
    color: #aaaaaa;
    float: right;
    width: auto;
    font-size: 28px;
    font-weight: bold;
    z-index: 50;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.imagebox {
    float: left;
    clear: both;
    width: 100%;
    padding: 1.5rem 1.5rem;
    margin-bottom: 18px;
    text-align: center;
    background: #fff;
    user-select: none;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.imagebox:hover {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#file-image {
    display: inline;
    margin: 0 auto .5rem auto;
    width: auto;
    height: auto;
    max-width: 180px;
}

#file-image.hidden {
    display: none;
}

progress,
.progress {
    display: inline;
    clear: both;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    height: 8px;
    border: 0;
    border-radius: 4px;
    background-color: #eee;
    overflow: hidden;
}

.progress[value]::-webkit-progress-bar {
    border-radius: 4px;
    background-color: #eee;
}

.progress[value]::-webkit-progress-value {
    background: linear-gradient(to right, darken(theme, 8%) 0%, theme 50%);
    border-radius: 5px;
}

.progress[value]::-moz-progress-bar {
    background: linear-gradient(to right, darken(theme, 8%) 0%, theme 50%);
    border-radius: 5px;
}

.inputaslabel {
    display: inline-block;
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    font-weight: 700;
    outline: none;
}

hr.divider {
    margin: 5px 0px;
    border-width: 1.5px;
}

.inputaslabelsub {
    background-color: transparent;
    border: 0px solid;
    /*height: 20px;*/
    font-weight: 500;
    outline: none;
    margin-top: -50px;
}

/** SPINNER **/
.loader {
    position: relative;
    text-align: center;
    margin: 15px auto 35px auto;
    z-index: 50;
    display: block;
    width: 75px;
    height: 75px;
    border: 10px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    border-top-color: #185785;
    animation: spin 1.5s ease-in-out infinite;
    -webkit-animation: spin 1.5s ease-in-out infinite;
}

/** MODAL STYLING **/
.modal-content {
    border-radius: 0px;
    box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.65);

}

.modal-backdrop.show {
    opacity: 0.35;
}

.loader-txt {
    font-size: 18px;
    font-weight: bold;
    color: gray;
}

.motto-txt {
    color: #185785;
    font-size: 18px;
    font-weight: bold;
}

/*UNITDIAGRAMS.CSS*/
.unitdiagram {
    background: #eee;
    border-radius: 5px;
    padding-top: 8.5px;
    padding-bottom: 8.5px;
    min-height: 100%
}

.spareaxlecenter {
    margin-top: 2.5px;
    margin-bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    /*position: absolute;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* center items vertically */
    align-items: center;
    /* center items horizontally */
}

.spareaxle {
    /*margin: 0 auto; background: black;*/
    margin: 18px 0px 0px 8.5px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 18.5px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 5;
}

.spareaxle:hover {
    opacity: 0.45;
    cursor: pointer;
}

.spareaxle:hover+.axleinfohide {
    display: inline;
}

.spareaxleactive {
    background: #185785;
}

.spareaxleinactive {
    background: #a7a7a7;
}

.chartsparewheel {
    display: inline-block;
    vertical-align: middle;
    margin: 2.5px;
    border-radius: 7.5px;
    width: 50px;
    height: 25px;
    cursor: pointer;
    z-index: 2;
}

.chartsparewheel:hover+.wheelinfohide {
    display: inline-block;
    left: 50%;
    transform: translate(0, -45%);
}

.sensorinfo {
    width: 60px;
    background: gray;
    margin: 5px;
    border-radius: 1.5px;
    border: 1.5px solid gray;
    text-align: center;
    font-size: small;
    z-index: 5;
    cursor: pointer;
}

.addsensorbtn {
    background-color: #185785;
    width: 100%;
    height: 25px;
    border: none;
    border-radius: 0px;
}

.addsensorbtn:hover {
    background-color: #5e87a7;
    opacity: 0.85;
    border-color: #5e87a7;
}

.sensoraxle {
    display: flex;
}

.sensorleftside {
    display: flex;
    justify-content: flex-start;
    margin-left: 50px;
}

.sensorrightside {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 50px;
}

.sensorscenter {
    display: flex;
    justify-content: center;
}

.twosensorsleftside {
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
}

.twosensorsrightside {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 20px;
}

/*.sensorinfo:hover {
    background: #185785;
    border: 2.5px solid #185785;
}*/

.axletyresensor {
    padding: 5px 0 5px 0;
    background-color: #D1E3AB;
}

.sensordiagramoptions {
    /* background: #eee;*/
    margin-left: 12px;
    margin-top: 10px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: smaller;
}

.sensordiagrammetricoptions {
    margin-left: 12px;
    margin-top: 10px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.axleinfohide {
    display: none;
    position: absolute;
    margin-top: -125px;
    width: max-content;
    padding: 5px;
    background: #e1e1e1;
    border: 1px solid #a7a7a7;
    border-radius: 2.5px;
    font-size: x-small;
    z-index: 7;
}

.boldtextmaxminvalue {
    /*background: #f82525;*/
    font-weight: bold;
    font-size: 10.5px;
}

.tyre-purple {
    background-image: url('icons/tyre-overinflate.svg');
}

.tyre-blink {
    animation: blinker 1.5s linear infinite;
    /*border: 4.5px solid #ad0505;*/
    /*background: repeating-linear-gradient( 45deg, #ad0505, #f82525 5px, #ad0505 5px, #ad0505 5px );*/
    background-image: url('icons/tyre-underinflate.svg');
}

.tyre-red {
    /* background-color: #f82525-RED; */
    background-image: url('icons/tyre-underinflate.svg');
}

.tyre-orange {
    /* // border: 4.5px solid #ff7e25 - ORANGE; */
    background-image: url('icons/tyre-temperature.svg');
}

.tyre-yellow {
    background-image: url('icons/tyre-voltage.svg');
}

.pressurered {
    color: red;
}

.pressurepurple {
    color: #7557ae;
}

.temperatureorange {
    color: #ff7e25;
}

.voltageyellow {
    color: #ffce00;
}

.chartaxle {
    display: inline-block;
    vertical-align: middle;
    height: 8.5px;
    width: 60px;
    position: relative;
    z-index: 5;
}

.chartwheelaxle {
    position: relative;
    padding: 0;
    margin: 5px;
    text-align: center;
    z-index: 3;
}

.chartaxleactive {
    background: #185785;
}

.chartaxleinactive {
    background: #a7a7a7;
}

.axle {
    position: relative;
    vertical-align: middle;
    margin: 18px -2.5px 0px -2.5px;
}

.shortaxle {
    width: 50px;
    height: 32px;
    background-size: 50px 32px;
    background-repeat: no-repeat;
    display: inline-block;
}

.axleactive {
    background-image: url('icons/axleshortactive.svg');
}

.axleinactive {
    background-image: url('icons/axleshort.svg');
}

.axle:hover {
    opacity: 0.45;
    cursor: pointer;
}

.axle:hover+.axleinfohide {
    display: inline;
}

.axle2WheelsInfo {
    top: 35px;
}

.axlewheels {
    display: block;
}

.axle1wheelactive:hover {
    background: green;
    border: 1px solid green;
}

/*.wheelaxlediagram {
    position: relative;
    padding: 0;
    margin: 5px;
    text-align: center;
    z-index: 3;
}*/

.diagramaxle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12.5px;
    z-index: 5;
}

.wheelnosignal {
    width: 60.5px;
    /*height: 105px;*/
    line-height: 18px;
    text-align: center;
    margin: 1.5px;
    border-radius: 12px;
    background: #8b959d;
    /*no signal gray*/
    color: #eee;
    font-size: small;
}

.sensorvaluesinfo {
    width: 75px;
    margin: 2.5px;
}

.sensorvaluestyrename {
    width: 75px;
    border: 1.5px solid #2b2d2f;
    border-radius: 8.5px 8.5px 0px 0px;
    background: #ffffff;
    /*color: #2b2d2f;*/
    color: dimgrey;
    font-weight: 700;
    font-size: small;
    text-align: center;
    /*margin: 0px 1.5px 0px 1.5px;*/
}

.sensorvaluesdefault {
    width: 75px;
    /*height: 105px;*/
    background: #2b2d2f;
    border: 1.5px solid #2b2d2f;
    border-radius: 0px 0px 8.5px 8.5px;
    /*margin: 0px 1.5px 1.5px 1.5px;*/
    padding: 8.5px 0;
}

.sensorvaluesaxle {
    width: 75px;
}

.gateway {
    width: 165px;
    margin: 18.5px 35px 18.5px -5px;
}

.gatewaytop {
    display: flex;
    width: 185px;
}

.gatewaytopleft {
    width: 12.5px;
    height: 12.5px;
    margin: 0 10px 0 auto;
    border-radius: 5px 5px 0 0;
    border: 5px solid #000;
    background-color: #000;
}

.gatewaytopright {
    width: 12.5px;
    height: 12.5px;
    margin: 0 35px 0 auto;
    border-radius: 5px 5px 0 0;
    border: 5px solid #000;
    border-radius: 5px 5px 0 0;
    background-color: #000;
}

.gatewayinfo {
    margin: 0 auto;
    width: 165px;
    background-color: #57585a;
    border: 3.5px solid #000;
    border-radius: 5px;
    /*margin: 0px 1.5px 1.5px 1.5px;*/
    padding: 2.5px;
    cursor: pointer;
}

.gatewayvaluesdefault {
    margin: 0 auto;
    width: 145px;
    border: 1px solid #57585a;
    border-radius: 5px;
    padding: 1.5px 0;
    color: #fff;
    font-size: smaller;
    text-align: center;
}

.gatewaybottom {
    width: 25px;
    height: 12.5px;
    margin: -12.5px 25px 0 auto;
    border-radius: 5px 5px 0 0;
    border: 5px solid #000;
    background-color: #000;
}

.sink {
    width: 125px;
    padding: 10px;
    cursor: pointer;
}

.sinkvalues {
    margin: 0 auto;
    margin-top: -5px;
    width: 125px;
    background-color: #57585a;
    border: 4.5px solid #000;
    border-radius: 12.5px;
    /*margin: 0px 1.5px 1.5px 1.5px;*/
    padding: 6.5px;
}

.repeater {
    width: 85px;
    margin: 0 65px;
    cursor: pointer;
}

.repeatersensorvalues {

    margin-top: -5px;
    width: 85px;
    background-color: #57585a;
    border: 4.5px solid #000;
    border-radius: 12.5px;
    padding: 6.5px;
}

.repeatersensorvaluesdefault {
    margin: 0 auto;
    width: 65px;
    border: 1px solid #57585a;
    border-radius: 5px;
    padding: 1.5px 0;
    color: #fff;
    font-size: 10.5px;
    text-align: center;
}

.repeaterimages {
    margin: 0 auto;
    width: 50px;
    height: 18px;
    background-size: 50px 18px;
    background-repeat: no-repeat;
    display: block;
}

.repeatertop {
    background-image: url('icons/repeatertop.svg');
}

.repeaterbottom {
    background-image: url('icons/repeaterbottom.svg');
}

.supersinglewheelaxle {
    display: inline-block;
    vertical-align: middle;
    height: 8.5px;
    width: 70px;
}

.supersinglewheelaxle:hover {
    opacity: 0.45;
    cursor: pointer;
}

.chartsupersinglewheel {
    display: inline-block;
    vertical-align: middle;
    border-radius: 10px;
    width: 25px;
    height: 60px;
    position: relative;
}

.supersinglewheel:hover+.wheelinfohide {
    display: inline;
}

/*charts*/
.chartsupersinglewheel input {
    opacity: 0;
    width: 0;
    height: 0;
}


.sensorDefault {
    margin: 1.5px;
    width: 45px;
    height: 73.5px;
    background-size: 45px 73.5px;
    border-radius: 6.5px;
}

.wheeldefault {
    margin: 1.5px;
    width: 45px;
    height: 73.5px;
    background-size: 45px 73.5px;
    border-radius: 6.5px;
}

.trucktrailer-listicon {
    background-image: url('icons/trucktrailer.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 35px !important;
    height: 35px !important;
}

.trucktrailer-icon {
    background-image: url('icons/trucktrailer.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px !important;
    height: 40px !important;
}

.truck-icon {
    background-image: url('icons/truck.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px !important;
    height: 40px !important;
}

.trailer-icon {
    background-image: url('icons/trailer.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px !important;
    height: 40px !important;
}

.leaflet-marker-icon.map-icon {
    background-image: url('icons/trucktrailer.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 35px !important;
    height: 35px !important;
}

.tyre-correct {
    background-image: url('icons/tyre-correct.svg');
}

.tyre-unpaired {
    background-image: url('icons/tyre-unpaired.svg');
}

.tyre-nosignal {
    background-image: url('icons/tyre-nosignal.svg');
}

.wheelpurple {
    background-image: url('icons/tyre-overinflate.svg');
}

.wheelblink {
    animation: blinker 1.5s linear infinite;
    /*border: 4.5px solid #ad0505;*/
    /*background: repeating-linear-gradient( 45deg, #ad0505, #f82525 5px, #ad0505 5px, #ad0505 5px );*/
    background-image: url('icons/tyre-underinflate.svg');
    cursor: pointer;
}

.chartwheel {
    display: inline-block;
    vertical-align: middle;
    /*margin: 10px;*/
    border-radius: 7.5px;
    width: 18px;
    height: 60px;
    position: relative;
}

.chartwheelpurple {
    border: 1.5px solid #7557ae;
    background: repeating-linear-gradient(45deg, #2E0755, #7557ae 5px, #2E0755 5px, #2E0755 5px);
    cursor: pointer;
}

.chartwheelred {
    border: 1.5px solid #f82525;
    background: repeating-linear-gradient(45deg, #ad0505, #f82525 5px, #ad0505 5px, #ad0505 5px);
    cursor: pointer;
}

.chartwheelorange {
    border: 1.5px solid #ff7e25;
    background: repeating-linear-gradient(45deg, #ff580f, #ff7e25 5px, #ff580f 5px, #ff580f 5px);
    cursor: pointer;
}

.chartwheelyellow {
    border: 1.5px solid #ffce00;
    background: repeating-linear-gradient(45deg, #ffe700, #ffce00 5px, #ffe700 5px, #ffe700 5px);
    cursor: pointer;
}

.chartwheelblue {
    border: 1.5px solid #A9A9A9;
    background: repeating-linear-gradient(45deg, #D3D3D3, #A9A9A9 5px, #D3D3D3 5px, #D3D3D3 5px);
    cursor: pointer;
}

.wheelred {
    background-image: url('icons/tyre-underinflate.svg');
}

.wheelorange {
    background-image: url('icons/tyre-temperature.svg');
}

.wheelyellow {
    background-image: url('icons/tyre-voltage.svg');
}

.wheel:hover+.wheelinfohide {
    display: inline;
}

/*charts*/
.chartwheel input,
.chartsparewheel input {
    opacity: 0;
    width: 0;
    height: 0;
}

.axlehoverdisabled {
    pointer-events: none;
}

.slider,
.spareslider {
    position: absolute;
}

.slider::before {
    position: absolute;
    top: 22px;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    content: "";
    border: 1.5px solid white;
    background-color: white;
}

.spareslider::before {
    position: absolute;
    top: 5px;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    content: "";
    border: 1.5px solid white;
    background-color: white;
}

input:checked+.slider::before {
    top: 20px;
    height: 18px;
    width: 18px;
}

input:checked+.spareslider::before {
    top: 2.5px;
    height: 18px;
    width: 18px;
}

.slider.chart0::before,
.spareslider.chart0::before {
    background-color: #1b0e99;
    /*dark blue purple*/
}

.slider.chart1::before,
.spareslider.chart1::before {
    background-color: #00600a;
    /*green*/
}

.slider.chart2::before,
.spareslider.chart2::before {
    background-color: #730000;
    /*dark red 0.1*/
}

.slider.chart3::before,
.spareslider.chart3::before {
    background-color: #ffb200;
    /*dark yellow*/
}

.slider.chart4::before,
.spareslider.chart4::before {
    background-color: #0075ff;
    /*check blue*/
}

.slider.chart5::before,
.spareslider.chart5::before {
    background-color: #50ae56;
    /*lighter green*/
}

.slider.chart6::before,
.spareslider.chart6::before {
    background-color: #c8442e;
    /*red pinkish*/
}

.slider.chart7::before,
.spareslider.chart7::before {
    background-color: #ffff00;
}

.slider.chart8::before,
.spareslider.chart8::before {
    background-color: #87cefa;
}

.slider.chart9::before,
.spareslider.chart9::before {
    background-color: #aeffac;
    /*darker lightgreen*/
}

.slider.chart10::before,
.spareslider.chart10::before {
    background-color: #ffa07a;
}

.slider.chart11::before,
.spareslider.chart11::before {
    background-color: #ffffa2;
    /*darker lightyellow*/
}

.slider.chart12::before,
.spareslider.chart12::before {
    background-color: #8f8fbc;
    /*purple*/
}

.slider.chart13::before,
.spareslider.chart13::before {
    background-color: #20b2aa
        /*lightseagreen*/
}

.slider.chart14::before,
.spareslider.chart14::before {
    background-color: #e553bc;
    /*pink*/
}

.slider.chart15::before,
.spareslider.chart15::before {
    background-color: #c8df00;
    /*yellowgreen*/
}

.slider.chart16::before,
.spareslider.chart16::before {
    background-color: #3c3674;
}

.slider.chart17::before,
.spareslider.chart17::before {
    background-color: #306E54;
}

.slider.chart18::before,
.spareslider.chart18::before {
    background-color: #984F6A;
}

.slider.chart19::before,
.spareslider.chart193::before {
    background-color: #696E30;
}

.slider.chart20::before,
.spareslider.chart20::before {
    background-color: #000025;
}

.slider.chart21::before,
.spareslider.chart21::before {
    background-color: #185785;
}

.slider.chart22::before,
.spareslider.chart22::before {
    background-color: #e34300;
}

.slider.chart23::before,
.spareslider.chart23::before {
    background-color: #bca68f;
}

.slider.chart24::before,
.spareslider.chart24::before {
    background-color: #006699;
}

.slider.chart25::before,
.spareslider.chart25::before {
    background-color: #1A9900;
}

.slider.chart26::before,
.spareslider.chart26::before {
    background-color: #7F0099;
}

.slider.chart27::before,
.spareslider.chart27::before {
    background-color: #993300;
}

.slider.chart28::before,
.spareslider.chart28::before {
    background-color: #579bd2;
}

.slider.chart29::before,
.spareslider.chart29::before {
    background-color: #8fbc8f;
}

.slider.chart30::before,
.spareslider.chart30::before {
    background-color: #cd5c5c;
}

.slider.chart31::before,
.spareslider.chart31::before {
    background-color: #b9b072;
}

.slider.chart32::before,
.spareslider.chart32::before {
    background-color: #b3f2ff;
}

.slider.chart33::before,
.spareslider.chart33::before {
    background-color: #8fbc8f;
}

.slider.chart34::before,
.spareslider.chart34::before {
    background-color: #FFC0B3;
}

.slider.chart35::before,
.spareslider.chart35::before {
    background-color: #fff0b3;
}

.wheelactive {
    border: 4.5px outset #707175;
    background: #2b2d2f;
    /*dark gray, almost black*/
    cursor: pointer;
}

.chartwheelactive {
    border: 1.5px solid #707175;
    background: #2b2d2f;
    /*dark gray, almost black*/
    cursor: pointer;
}

.wheelsnipactive {
    background: #2b2d2f;
}

.wheelinactive {
    padding: 5px 0 5px 0;
    /*border: dotted #D0D0D0;*/
    background: #DCDCDC;
}

.wheelactive:hover {
    background: green;
    border: 1px solid green;
}

.wheelinfohide {
    display: none;
    position: absolute;
    margin-top: -85px;
    background: #CDCFD1;
    font-size: x-small;
    border: 1px solid darkgray;
    z-index: 5;
}

.axlewheel {
    background-color: #D1E3AB;
    text-align: center;
    border: 0.005px solid black;
}

.tyrename {
    padding: 0 2.5px 0 2.5px;
    color: dimgrey;
    font-weight: 700;
    font-size: x-small;
    text-align: center;
}

.tyreidactive {
    padding: 0 2.5px 0 2.5px;
    font-weight: 700;
    text-align: center;
    border: 0.005px solid gray;
}

.sensorvalues {
    color: #fff;
    border: 0.5px solid #2b2d2f;
    border-radius: 3.5px;
    margin: 0 2.5px 0 2.5px;
    padding: 0 2.5px 0 2.5px;
    text-align: center;
    font-size: 10.5px;
    /* font-size: smaller; */
}

.sensorvalues-nosignal {
    color: #fff;
    border: 0.5px solid #8b959d;
    border-radius: 3.5px;
    margin: 0 2.5px 0 2.5px;
    padding: 0 2.5px 0 2.5px;
    text-align: center;
    font-size: smaller;
}

.sensorid {
    background-color: #eee;
    color: black;
    font-size: 10.5px;
    font-weight: 700;
    /*    margin: 0 2.5px 0 2.5px;
    padding: 0 2.5px 0 2.5px;
    font-size: smaller;*/
}

.tyreid {
    background-color: #eee;
    color: black;
    font-size: 10.5px;
    /*    margin: 0 2.5px 0 2.5px;
    padding: 0 2.5px 0 2.5px;
    font-size: smaller;*/
}

.timeupdated {
    background-color: #185785;
    color: white;
}

.signalstrengthbar {
    display: flex;
    margin: 2.5px 5px;
}

.signalblock {
    width: 10.5px;
    height: 12.5px;
    background-color: #eee;
    border: 0.15px solid black;
    /*margin: 0px 2.5px 0px 0px;   */
}

.green {
    background-color: #2b2d2f;
    /*green -> dark gray, almost black */
}

.signalgreen {
    background-color: #aece25;
    /*ACCENT_COLOUR*/
}

.purple {
    background-color: #7557ae;
}

.red {
    background-color: red;
}

.signalred {
    background-color: #ff3232;
}

.orange {
    background-color: #ff580f;
}

.yellow {
    background-color: #FFCC00;
}

.signalyellow {
    background-color: #ffe57f;
    /*ACCENT_COLOUR*/
}

.blue {
    background-color: #8b959d;
    /*no signal gray*/
}

.unpaired {
    background-color: #5e6265;
}

.wheel1:hover+.wheelinfohide {
    display: inline;
}

.wheel2:hover+.wheelinfohide {
    display: inline;
}

.wheel3:hover+.wheelinfohide {
    display: inline;
}

.wheel4:hover+.wheelinfohide {
    display: inline;
}

.contextmenu {
    display: block;
    background-color: white;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 2px 2px 30px lightgrey;
    position: fixed;
    z-index: 2;
    opacity: 0;
    transform: scale(0.75);
    transform-origin: top left;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    top: 0;
    left: 0;
    width: 235px;
}

.contextmenu.show {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

.contextmenu-item {
    display: block;
    padding: 6.5px 18px;
    transition: 0.1s;
    color: black;
    font-size: medium;
}

.contextmenu-item:hover {
    background-color: dimgray;
    cursor: pointer;
}

.contextmenu-item-disabled {
    pointer-events: none;
    opacity: 0.5;
}

#closetyremenu {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}

.notificationsmodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 65;
    /* Sit on top */
    /*padding-top: 150px;*/
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);

}

/* Modal Content */
.notificationsmodal-content {
    background-color: #fefefe;
    /*margin: auto;*/
    position: absolute;
    top: 150px;
    right: 150px;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
    border-radius: 6.5px;
}

.notifications-checkbox-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.valuesoutofrangemodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

/* Modal Content */
.valuesoutofrangemodal-content {
    background-color: #fefefe;
    /*margin: auto;*/
    position: absolute;
    top: 85px;
    right: 185px;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
}

.selectsensordiagramdatemodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 50;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.selectsensordiagramdatemodal-content {
    background-color: #fefefe;
    border-radius: 2.5px;
    position: absolute;
    top: 265px;
    right: 150px;
    padding: 10px;
    border: 1px solid #888;
    width: 25%;
}

.edittyreinfomodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 50;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.edittyreinfomodal-content {
    background-color: #fefefe;
    /*margin: auto;*/
    position: absolute;
    top: 265px;
    right: 150px;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
}

.tyreinfo-error {
    color: #ad0505;
    font-style: italic;
    font-size: 0.85rem;
    margin-bottom: 8.5px;
}

.sensormodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 50;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.sensormodal-content {
    background-color: #fefefe;
    /*margin: auto;*/
    position: absolute;
    top: 265px;
    right: 150px;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
}

.actionlogmodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 50;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.actionlogmodal-content {
    background-color: #fefefe;
    /*margin: auto;*/
    position: absolute;
    top: 85px;
    left: 85px;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
}

.general-info-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 50;
    /* Sit on top */
    left: 145px;
    top: 0;
    width: 100%;
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.general-info-modal-content {
    position: fixed;
    /* instead of absolute */
    top: 50%;
    /* center vertically */
    left: 50%;
    /* center horizontally */
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    max-height: 85vh;
    /* scrollable if too tall */
    overflow-y: auto;
    width: 95%;
    /* or whatever max-width you like */
    max-width: 950px;
}

.sensor-column {
    flex: 1 1 20%;
    min-width: 220px;
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 8px;
}

.sensor-column h6 {
    margin-top: 0;
    color: #185785;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.unitnameheader {
    top: 25px;
    padding-top: 25px;
    font-weight: bold;
    text-decoration: underline;
}

.boldtext {
    font-size: 16px;
    font-weight: bold;
}

.selecteddatetime {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5em;
    border: 1.5px solid #cbcfd2;
    border-radius: 4.5px;
    padding: 5px;
}

.resetbutton {
    height: 65%;
}

/*CHARTREPORT.CSS*/
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.sensorchartreportmodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 250;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*overflow: auto;  Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
}

.sensorchartreportmodal-content {
    background-color: #fefefe;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    margin: 5px;
    padding: 5px;
    border: 1px solid #888;
    width: 85%;
    height: 98.5%;
    max-height: calc(100vh - 1.5vh);
    overflow: auto;
}

.reportsmodal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 250;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*overflow: auto;  Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.5);
    /* Black w/ opacity */
    cursor: default;
}

.reportsmodal-content {
    background-color: #fefefe;
    position: fixed;
    /*margin-top:25px;
    left: 50%;*/
    /*margin-right: -50%;*/
    /*margin-top: 85px;*/
    left: 50%;
    transform: translateX(-50%);
    margin: 5px;
    padding: 5px;
    border: 1px solid #888;
    width: 85%;
    height: 98.5%;
    max-height: calc(100vh - 1.5vh);
    overflow: auto;
}

.chartoptions {
    /*height: 100%;*/
    /*width: 218px;*/
    width: 230px;
    margin-right: 12.5px;
    padding: 5px 12.5px 5px 12.5px;
    border: none;
    background: #eee;
}

.selectchartdates {
    margin-bottom: -5px;
}

.sensorvaluestodaymargin {
    margin-right: 10px;
}

.chartunit {
    margin: 5px;
    margin-top: 7.5px;
    padding-top: 12.5px;
    padding-bottom: 12.5px;
    border: 5px solid gray;
    width: 165px;
    position: relative;
    display: block;
}

.chartdiv {
    /*    margin: 5px;
    padding: 5px;*/
    background-color: #eee;
    left: 225px;
    /*height: 100%;*/
    width: 82.5%;

    /*position: absolute;*/
    /*    max-height: 825px;*/
    /*margin: 0 auto;*/
}

.chartdate {
    float: right;
    color: black;
}

.threecharts {
    position: relative;
    border: 1px solid #185785;
    border-radius: 5px;
    margin: 5px;
    padding: 5px 5px 10px 5px;
    font-size: small;
    font-weight: 700;
    color: gray;
}

.chart {
    height: 95vh;
}

.twocharts {
    height: 46.5vh;
}

.twoofthreecharts {
    height: 35vh;
}

.oneofthreecharts {
    height: 25vh;
}

.reducedivspace {
    margin-top: -12.5px;
}

/*reports.css*/

/*general*/
.icon {
    float: left;
    margin: 7.5px 7.5px;
}

.flex-parent {
    display: flex;
}

.flex-item {
    padding: .5em;
    background: #efefef;
}

.flex-item.no-shrink {
    flex-shrink: 0;
}

.form-container {
    width: 100%;
    padding: 15px;
    margin: 5px 0 5px 0;
    border: none;
    background: #eee;
}

.form-container:focus {
    background-color: #ddd;
    outline: none;
}

.form-container .btn {
    padding: 8.5px 20px;
    border: none;
    background-color: #185785;
    color: #fff;
    /*font-size: medium;*/
    cursor: pointer;
    width: 100%;
    margin-top: 12.5px;
}

.form-container .cancel {
    background-color: #cc0000;
}

.form-container .btn:hover {
    opacity: 0.65;
}

.info-field {
    margin-bottom: 6.5px;
    font-family: sans-serif;
    font-size: 14px;
}

.info-label {
    font-weight: bold;
    color: #333;
}

.info-value {
    margin-left: 1.5px;
    color: #555;
}

details>summary {
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 4px;
}

.btn-table-save {
    border: 2px;
    background-color: #185785;
    color: #fff;
}

.btn-table-save:hover {
    border: 2px;
    background-color: #154e77;
    color: #fff;
}

.submit-btn {
    padding: 8.5px 20px;
    border: none;
    background-color: #185785;
    color: #fff;
    /*font-size: medium;*/
    cursor: pointer;
    width: 100%;
    margin-top: 12.5px;
}

.submit-btn:focus {
    background-color: #ddd;
    outline: none;
    color: #fff;
}

.submit-btn:hover {
    opacity: 0.65;
    color: #fff;
}

.dropdown-select {
    /* styling */
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* arrows */
.dropdown-select.round {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), radial-gradient(#ddd 70%, transparent 72%);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - .5em) .5em;
    background-size: 5px 5px, 5px 5px, 1.5em 1.5em;
    background-repeat: no-repeat;
}

.space-above {
    margin-top: 18px;
}

.space-around {
    margin: 12px;
}

.twodivsmain {
    display: flex;
    flex-wrap: nowrap !important;
    width: 33.3%;
}

.twodivs {
    display: flex;
    width: 100%;
}

.twodivsflex-child {
    flex: 1;
    /* margin: 2.5px 5px 7.5px 5px;*/
    margin: 0px 5px;
    width: 50%;
}

.twodivsleftbtn {
    width: 100%;
    display: block;
    margin: 5px;
}

.twodivsbtn {
    width: 100%;
    display: block;
    margin: 5px 0px 5px 5px;
}

.twodivsddbtn {
    margin: 5px 5px 5px 0px;
}

.flex-child {
    -webkit-box-flex: 1 1;
    -moz-box-flex: 1 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: 5px;
}

/*buttons start*/
.panebutton {
    margin: 12.5px;
}

.pane2buttons {
    margin-left: 5px;
    margin-right: 5px;
}

.panebutton {
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    width: 30%;
}

.dropdownpanebutton {
    margin-left: 1.5px;
}

.buttonicon {
    display: inline-block;
    margin: 1.5px 5px 1.5px 1.5px;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}

.unitbluesvg {
    /*background: url('icons/unit-blue.svg');*/
    margin: 0px 5px;
}

.unitgroupbluesvg {
    background: url('icons/unitgroup-blue.svg');
}

.printbluesvg {
    background: url('icons/print-blue.svg');
}

.calendarbluesvg {
    background: url('icons/calendar-blue.svg');
}

.chartbluesvg {
    background: url('icons/chart-blue.svg');
}

.notificationbluesvg {
    background: url('icons/notification-blue.svg');
}

.tyrebluesvg {
    background: url('icons/tyre-blue.svg');
}

.sensorbluesvg {
    background: url('icons/sensor.svg');
}

/*buttons end*/

/*BOOTSTRAPCUSTOM.CSS*/

.btn-primary {
    color: #185785;
    font-weight: 500;
    background-color: #eee;
    border-color: #185785;
    border-width: 2.5px;
}

.btn-inline {
    background-color: #eee;
    border-width: 0.25px;
    border-radius: 3.5px;
    padding: 0 0.375rem;
    font-size: 12.5px;

    line-height: 0.85 !important;
    margin: 9.5px 0 18px 0;
}



.btn-edit-inline {
    margin-left: 12.5px;
    border-color: #185785;
    color: #185785;
}

.btn-delete-inline {
    margin-left: 2.5px;
    margin-right: 8.5px;
    border-color: #dc3545;
    color: #dc3545;
}

.btn-primary-inline:hover {
    color: #185785;
    background-color: #e5e5e5;
    border-color: #185785;
    cursor: pointer;
}

.btn-delete-inline:hover {
    color: #dc3545;
    background-color: #e5e5e5;
    border-color: #dc3545;
    cursor: pointer;
}

.btn-primary:hover {
    color: #185785;
    background-color: #e5e5e5;
    border-color: #185785;
}

.btn-primary:focus,
.btn-primary.focus {
    background-color: #e5e5e5;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #5e87a7;
    border-color: #5e87a7;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    color: #185785;
    background-color: #e5e5e5;
}

.btn-primary:active,
.btn-primary:focus {
    color: #185785;
    border-color: #185785 !important;
    box-shadow: 0 0 0 0.1rem rgba(24, 87, 133, 0.5) !important;
}

.btn-success {
    background-color: #aece25;
    border-color: #aece25;
    font-size: 12.5px;
}

.btn-success:hover {
    background-color: #9ab725;
    border-color: #aece25;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    font-size: 12.5px;
}

.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-danger:focus,
.btn-danger.focus {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-danger.disabled,
.btn-danger:disabled {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show>.btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #bd2130;
    border-color: #b21f2d;

}

.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

input {
    accent-color: #185785;
}


.form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: lightgray;
}

.form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: lightgray;
}

.form-control-selectlist {
    display: block;
    width: 100%;
    min-width: 250px;
    height: 100%;
    min-height: 325px;
    margin: 0.125rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.leaflet-control-container {
    position: absolute;
    z-index: 500;
}

.unitmap {
    height: 265px;
    background-color: #d1e3ab;
    z-index: 1;
}

.chartmap {
    background-color: #d1e3ab;
    min-height: 265px;
}

/*custom dialog*/
.dialog {
    display: none;
    /* not visible by default */
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background: #757575;
    border: 1px solid #fff;
    /* change allowed; Border to separate multipe dialog boxes */
    margin: 0;
    position: absolute;
    min-width: 365px;
    min-height: 336.5px;
    z-index: 50;
}

.dialog .titlebar {
    height: 32px;
    /* same as .dialog>button height */
    line-height: 32px;
    /* same as .dialog>button height */
    vertical-align: middle;
    font-size: 1em;
    padding: 0 5px 0 5px;
    /*change NOT allowed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: move;
    background: #185785;
}


.dialog .content {
    position: absolute;
    top: 48px;
    /* change allowed */
    left: 16px;
    /* change NOT allowed */

    overflow: auto;
    font-size: 1em;
}

.dialog button {
    -webkit-transition: 0.25s;
    transition: 0.25s;
    color: #fff;
}

.dialog button::-moz-focus-inner {
    border: 0;
}

.dialog button:hover,
.dialog button.active {
    cursor: pointer;
}

.dialog>button {
    width: 32px;
    /* change NOT allowed */
    height: 32px;
    /* same as .dialog .titlebar height */
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    border: 0;
    font-size: 1.5em;
    background: #757575;
}

/* .dialog>button.hover, */
.dialog>button:hover,
.dialog>button.focus {
    box-shadow: inset -16px 0 0 0 #757575, inset 16px 0 0 0 #757575;
}

.dialog>button.active {
    background: #aaa;
    /* irrelevant */
    border: 1px solid #eee;
    /* irrelevant */
}

/*mapbox*/
#mapbox.dialog {
    background: #999;
    z-index: 100;
}

#mapbox.dialog .titlebar,
#mapbox.dialog .buttonset button {
    background: #185785;
}

.AliceBlue {
    background-color: #F0F8FF;
    border: 1px solid #d2e1da;
}

.AntiqueWhite {
    background-color: #FAEBD7;
    border: 1px solid #dcb9cd;
}

.Aqua {
    background-color: #00FFFF;
    border: 1px solid #00e1e1;
}

.Aquamarine {
    background-color: #7FFFD4;
    border: 1px solid #61b6e1;
}

.Azure {
    background-color: #F0FFFF;
    border: 1px solid #d2e1e1;
}

.Beige {
    background-color: #F5F5DC;
    border: 1px solid #d7bed7;
}

.Bisque {
    background-color: #FFE4C4;
    border: 1px solid #e1a6c6;
}

.Black {
    background-color: #000000;
    border: 1px solid #000000;
}

.BlanchedAlmond {
    background-color: #FFEBCD;
    border: 1px solid #e1afcd;
}

.Blue {
    background-color: #0000FF;
    border: 1px solid #00e100;
}

.BlueViolet {
    background-color: #8A2BE2;
    border: 1px solid #6cc40d;
}

.Brown {
    background-color: #A52A2A;
    border: 1px solid #870c0c;
}

.BurlyWood {
    background-color: #DEB887;
    border: 1px solid #c0699a;
}

.CadetBlue {
    background-color: #5F9EA0;
    border: 1px solid #418280;
}

.Chartreuse {
    background-color: #7FFF00;
    border: 1px solid #6100e1;
}

.Chocolate {
    background-color: #D2691E;
    border: 1px solid #b4004b;
}

.Coral {
    background-color: #FF7F50;
    border: 1px solid #e13261;
}

.CornflowerBlue {
    background-color: #6495ED;
    border: 1px solid #46cf77;
}

.Cornsilk {
    background-color: #FFF8DC;
    border: 1px solid #e1beda;
}

.Crimson {
    background-color: #DC143C;
    border: 1px solid #be1e00;
}

.Cyan {
    background-color: #00FFFF;
    border: 1px solid #00e1e1;
}

.DarkBlue {
    background-color: #00008B;
    border: 1px solid #006d00;
}

.DarkCyan {
    background-color: #008B8B;
    border: 1px solid #006d6d;
}

.DarkGoldenrod {
    background-color: #B8860B;
    border: 1px solid #9a0068;
}

.DarkGray {
    background-color: #A9A9A9;
    border: 1px solid #8b8b8b;
}

.DarkGreen {
    background-color: #006400;
    border: 1px solid #000046;
}

.DarkKhaki {
    background-color: #BDB76B;
    border: 1px solid #9f4d99;
}

.DarkMagenta {
    background-color: #8B008B;
    border: 1px solid #6d6d00;
}

.DarkOliveGreen {
    background-color: #556B2F;
    border: 1px solid #37114d;
}

.DarkOrange {
    background-color: #FF8C00;
    border: 1px solid #e1006e;
}

.DarkOrchid {
    background-color: #9932CC;
    border: 1px solid #7bae14;
}

.DarkRed {
    background-color: #8B0000;
    border: 1px solid #6d0000;
}

.DarkSalmon {
    background-color: #E9967A;
    border: 1px solid #cb5c78;
}

.DarkSeaGreen {
    background-color: #8FBC8F;
    border: 1px solid #71719e;
}

.DarkSlateBlue {
    background-color: #483D8B;
    border: 1px solid #2a6d1f;
}

.DarkSlateGray {
    background-color: #2F4F4F;
    border: 1px solid #113131;
}

.DarkTurquoise {
    background-color: #00CED1;
    border: 1px solid #00b3b0;
}

.DarkViolet {
    background-color: #9400D3;
    border: 1px solid #76b500;
}

.DeepPink {
    background-color: #FF1493;
    border: 1px solid #e17500;
}

.DeepSkyBlue {
    background-color: #00BFFF;
    border: 1px solid #00e1a1;
}

.DimGray {
    background-color: #696969;
    border: 1px solid #4b4b4b;
}

.DodgerBlue {
    background-color: #1E90FF;
    border: 1px solid #00e172;
}

.Firebrick {
    background-color: #B22222;
    border: 1px solid #940404;
}

.FloralWhite {
    background-color: #FFFAF0;
    border: 1px solid #e1d2dc;
}

.ForestGreen {
    background-color: #228B22;
    border: 1px solid #04046d;
}

.Fuchsia {
    background-color: #FF00FF;
    border: 1px solid #e1e100;
}

.Gainsboro {
    background-color: #DCDCDC;
    border: 1px solid #bebebe;
}

.GhostWhite {
    background-color: #F8F8FF;
    border: 1px solid #dae1da;
}

.Gold {
    background-color: #FFD700;
    border: 1px solid #e100b9;
}

.Goldenrod {
    background-color: #DAA520;
    border: 1px solid #bc0287;
}

.Gray {
    background-color: #808080;
    border: 1px solid #626262;
}

.Green {
    background-color: #008000;
    border: 1px solid #000062;
}

.GreenYellow {
    background-color: #ADFF2F;
    border: 1px solid #8f11e1;
}

.Honeydew {
    background-color: #F0FFF0;
    border: 1px solid #d2d2e1;
}

.HotPink {
    background-color: #FF69B4;
    border: 1px solid #e1964b;
}

.IndianRed {
    background-color: #CD5C5C;
    border: 1px solid #af3e3e;
}

.Indigo {
    background-color: #4B0082;
    border: 1px solid #2d6400;
}

.Ivory {
    background-color: #FFFFF0;
    border: 1px solid #e1d2e1;
}

.Khaki {
    background-color: #F0E68C;
    border: 1px solid #d26ec8;
}

.Lavender {
    background-color: #E6E6FA;
    border: 1px solid #c8dcc8;
}

.LavenderBlush {
    background-color: #FFF0F5;
    border: 1px solid #e1d7d2;
}

.LawnGreen {
    background-color: #7CFC00;
    border: 1px solid #5e00de;
}

.LemonChiffon {
    background-color: #FFFACD;
    border: 1px solid #e1afdc;
}

.LightBlue {
    background-color: #ADD8E6;
    border: 1px solid #8fc8ba;
}

.LightCoral {
    background-color: #F08080;
    border: 1px solid #d26262;
}

.LightCyan {
    background-color: #E0FFFF;
    border: 1px solid #c2e1e1;
}

.LightGoldenrodYellow {
    background-color: #FAFAD2;
    border: 1px solid #dcb4dc;
}

.LightGray {
    background-color: #D3D3D3;
    border: 1px solid #b5b5b5;
}

.LightGreen {
    background-color: #90EE90;
    border: 1px solid #7272d0;
}

.LightPink {
    background-color: #FFB6C1;
    border: 1px solid #e1a398;
}

.LightSalmon {
    background-color: #FFA07A;
    border: 1px solid #e15c82;
}

.LightSeaGreen {
    background-color: #20B2AA;
    border: 1px solid #028c94;
}

.LightSkyBlue {
    background-color: #87CEFA;
    border: 1px solid #69dcb0;
}

.LightSlateGray {
    background-color: #778899;
    border: 1px solid #597b6a;
}

.LightSteelBlue {
    background-color: #B0C4DE;
    border: 1px solid #92c0a6;
}

.LightYellow {
    background-color: #FFFFE0;
    border: 1px solid #e1c2e1;
}

.Lime {
    background-color: #00FF00;
    border: 1px solid #0000e1;
}

.LimeGreen {
    background-color: #32CD32;
    border: 1px solid #1414af;
}

.Linen {
    background-color: #FAF0E6;
    border: 1px solid #dcc8d2;
}

.Magenta {
    background-color: #FF00FF;
    border: 1px solid #e1e100;
}

.Maroon {
    background-color: #800000;
    border: 1px solid #620000;
}

.MediumAquamarine {
    background-color: #66CDAA;
    border: 1px solid #488caf;
}

.MediumBlue {
    background-color: #0000CD;
    border: 1px solid #00af00;
}

.MediumOrchid {
    background-color: #BA55D3;
    border: 1px solid #9cb537;
}

.MediumPurple {
    background-color: #9370DB;
    border: 1px solid #75bd52;
}

.MediumSeaGreen {
    background-color: #3CB371;
    border: 1px solid #1e5395;
}

.MediumSlateBlue {
    background-color: #7B68EE;
    border: 1px solid #5dd04a;
}

.MediumSpringGreen {
    background-color: #00FA9A;
    border: 1px solid #007cdc;
}

.MediumTurquoise {
    background-color: #48D1CC;
    border: 1px solid #2aaeb3;
}

.MediumVioletRed {
    background-color: #C71585;
    border: 1px solid #a96700;
}

.MidnightBlue {
    background-color: #191970;
    border: 1px solid #005200;
}

.MintCream {
    background-color: #F5FFFA;
    border: 1px solid #d7dce1;
}

.MistyRose {
    background-color: #FFE4E1;
    border: 1px solid #e1c3c6;
}

.Moccasin {
    background-color: #FFE4B5;
    border: 1px solid #e197c6;
}

.NavajoWhite {
    background-color: #FFDEAD;
    border: 1px solid #e18fc0;
}

.Navy {
    background-color: #000080;
    border: 1px solid #006200;
}

.OldLace {
    background-color: #FDF5E6;
    border: 1px solid #dfc8d7;
}

.Olive {
    background-color: #808000;
    border: 1px solid #620062;
}

.OliveDrab {
    background-color: #6B8E23;
    border: 1px solid #4d0570;
}

.Orange {
    background-color: #FFA500;
    border: 1px solid #e10087;
}

.OrangeRed {
    background-color: #FF4500;
    border: 1px solid #e10027;
}

.Orchid {
    background-color: #DA70D6;
    border: 1px solid #bcb852;
}

.PaleGoldenrod {
    background-color: #EEE8AA;
    border: 1px solid #d08cca;
}

.PaleGreen {
    background-color: #98FB98;
    border: 1px solid #7a7add;
}

.PaleTurquoise {
    background-color: #AFEEEE;
    border: 1px solid #91d0d0;
}

.PaleVioletRed {
    background-color: #DB7093;
    border: 1px solid #bd7552;
}

.PapayaWhip {
    background-color: #FFEFD5;
    border: 1px solid #e1b7d1;
}

.PeachPuff {
    background-color: #FFDAB9;
    border: 1px solid #e19bbc;
}

.Peru {
    background-color: #CD853F;
    border: 1px solid #af2167;
}

.Pink {
    background-color: #FFC0CB;
    border: 1px solid #e1ada2;
}

.Plum {
    background-color: #DDA0DD;
    border: 1px solid #bfbf82;
}

.PowderBlue {
    background-color: #B0E0E6;
    border: 1px solid #92c8c2;
}

.Purple {
    background-color: #800080;
    border: 1px solid #626200;
}

.Red {
    background-color: #FF0000;
    border: 1px solid #e10000;
}

.RosyBrown {
    background-color: #BC8F8F;
    border: 1px solid #9e7171;
}

.RoyalBlue {
    background-color: #4169E1;
    border: 1px solid #23c34b;
}

.SaddleBrown {
    background-color: #8B4513;
    border: 1px solid #6d0027;
}

.Salmon {
    background-color: #FA8072;
    border: 1px solid #dc5462;
}

.SandyBrown {
    background-color: #F4A460;
    border: 1px solid #d64286;
}

.SeaGreen {
    background-color: #2E8B57;
    border: 1px solid #10396d;
}

.SeaShell {
    background-color: #FFF5EE;
    border: 1px solid #e1d0d7;
}

.Sienna {
    background-color: #A0522D;
    border: 1px solid #820f34;
}

.Silver {
    background-color: #C0C0C0;
    border: 1px solid #a2a2a2;
}

.SkyBlue {
    background-color: #87CEEB;
    border: 1px solid #69cdb0;
}

.SlateBlue {
    background-color: #6A5ACD;
    border: 1px solid #4caf3c;
}

.SlateGray {
    background-color: #708090;
    border: 1px solid #527262;
}

.Snow {
    background-color: #FFFAFA;
    border: 1px solid #e1dcdc;
}

.SpringGreen {
    background-color: #00FF7F;
    border: 1px solid #0061e1;
}

.SteelBlue {
    background-color: #4682B4;
    border: 1px solid #289664;
}

.Tan {
    background-color: #D2B48C;
    border: 1px solid #b46e96;
}

.Teal {
    background-color: #008080;
    border: 1px solid #006262;
}

.Thistle {
    background-color: #D8BFD8;
    border: 1px solid #babaa1;
}

.Tomato {
    background-color: #FF6347;
    border: 1px solid #e12945;
}

.Transparent {
    background-color: none;
    border: 1px solid #000000;
}

.Turquoise {
    background-color: #40E0D0;
    border: 1px solid #22b2c2;
}

.Violet {
    background-color: #EE82EE;
    border: 1px solid #d0d064;
}

.Wheat {
    background-color: #F5DEB3;
    border: 1px solid #d795c0;
}

.White {
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
}

.WhiteSmoke {
    background-color: #F5F5F5;
    border: 1px solid #d7d7d7;
}

.Yellow {
    background-color: #FFFF00;
    border: 1px solid #e100e1;
}

.YellowGreen {
    background-color: #9ACD32;
    border: 1px solid #7c14af;
}

.unitbox {
    margin: 5px;
    /*margin: 12px 18px;*/
    padding: 5px;
}

/* Defining the style of the 
        heading/legend for custom fieldset */
.unitbox h6 {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    font-weight: 300;
}

.unitbox h6 div {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid gray;
    color: gray;
    border-radius: 12px;
    padding: .125em 2.25em;
}

.unitbox h6:before,
.unitbox h6:after {
    content: "";
    display: inline-block;
    width: 50%;
    margin: 0 0 0 -55%;
    vertical-align: middle;
    border-bottom: 1px solid gray;
}

.unitbox h6:after {
    margin: 0 -55% 0 0;
}

.unitboxedit {
    margin: 5px;
    /*margin: 12px 18px;*/
    padding: 5px;
}

/* Defining the style of the 
        heading/legend for custom fieldset */
.unitboxedit h6 {
    width: 100%;
    margin: 0 auto .4375em;
    overflow: hidden;
    text-align: center;
    font-weight: 300;
}

.unitboxedit h6 div {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid gray;
    color: gray;
    border-radius: 12px;
    padding: .125em 0 .125em 2.25em;
}

.unitboxedit h6 div .tooltiptext {
    visibility: hidden;
    width: 125px;
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    text-align: center;
    padding: 5px 0;
    font-size: small;
    /* Position the tooltip */
    position: absolute;
    margin: 25px;
    z-index: 1;
}

.unitboxedit h6 div:hover .tooltiptext {
    visibility: visible;
}

.unitboxedit h6 div:hover {
    background-color: #e5e5e5;
    padding: .125em .625em .125em 2.5em;
}

.unitboxedit h6:before,
.unitboxedit h6:after {
    content: "";
    display: inline-block;
    width: 50%;
    margin: 0 0 0 -55%;
    vertical-align: middle;
    border-bottom: 1px solid gray;
}

.unitboxedit h6:after {
    margin: 0 -55% 0 0;
}

.edittrailername {
    cursor: pointer;
}

.edittrailername:after {

    padding: 5px 25px 5px 8.5px;
    width: 35px;
    height: 18px;
    display: inline-block;
    content: '';
}

.edittrailername:hover:after {
    transform: scale(1.5);
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiUlEQVQ4y2NgGFKgs7OTl2zNEyZMmAgEDZMmTeogWTNQUwVQcyeIDaLnz5/PQYrmssmTJ1sC6QQg7gXiFlI0l4I0Q9lOQNuLiNYMVFwCxFZQtiPQgEKSNAM1WMM0k2wzTDPQ+Q5AdjEpfs6CRRPJmqEGvAC6IAlId4NcQk58vwDih0DbMxhGDgAAx6ZVXMd4yEMAAAAASUVORK5CYII=');
}

.linkicon {
    display: inline-block;
    margin: 1.5px 5px 1.5px 1.5px;
    width: 24px;
    height: 24px;
    background-size: 21px 10px;
    background: url('icons/link.svg');
}

.historyicon {
    display: inline-block;
    margin: 1.5px;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background: url('icons/history.svg');
}

.historyselectdatebtn {
    width: 50px;
}

#hourPicker,
#minutePicker,
#secondPicker {
    width: 65px;
    /* Adjust the width as needed */
    margin-right: 1.5px;
}

/*Notification Logs*/

/* Split notifications button layout */
.panebutton .notifications-button-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* left part: icon + text (~4/5 width) */
.panebutton .notifications-button-main {
    flex: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    /* or flex-start if you prefer left-aligned */
    gap: 0.35rem;
}

/* divider between main and gear */
.panebutton .notifications-button-divider {
    flex: 0;
    padding: 0 0.35rem;
    opacity: 0.7;
}

/* right part: gear (~1/5 width) */
.panebutton .notifications-button-gear {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* little gear icon */
.panebutton .notifications-gear-icon {
    font-size: 25px;
    /* tweak if you want bigger */
    line-height: 1;
    opacity: 0.85;
}

.panebutton .notifications-gear-icon:hover {
    opacity: 1;
}

#notificationsLogModal .modal-dialog {
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

#notificationsLogModal .modal-content {
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

#notificationsLogModal .modal-body {
    overflow-y: auto;
    /* adjust the height to taste */
    max-height: calc(95vh - 65px);
    /* leave space for header/footer */
}

/* Close button styling for notifications modal */
#notificationsLogModal .notification-close {
    border: none;
    background: transparent;
    color: #6c757d;
    /* grey */
    font-size: 25px;
    line-height: 1;
    padding: 0 4.5px;
    cursor: pointer;
}

#notificationsLogModal .notification-close:hover {
    color: #343a40;
    /* darker grey on hover */
}

#notificationsLogModal .notification-close:focus {
    outline: none;
    box-shadow: none;
}

.notification-logs-container {
    background-color: #eee;
    border-radius: 4.5px;
    /*min-height: 125vh;*/
}

.title {
    font-size: 16.5px;
    margin: 12px;
    text-align: center;
    color: var(--primary-colour);
}

.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 12px;
    margin: 8.5px 0;
}

#notificationsLogModal .toggle-button .chev {
    display: inline-block;
    color: var(--primary-colour);
    font-size: 16.5px;
    line-height: 1;
    margin-left: 2.5px;
}

#notificationsLogModal .toggle-button:focus {
    outline: none;
    /* or your own focus style */
    box-shadow: none;
}

.date {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--primary-colour);
    margin-bottom: 5px;
}

.msg {
    font-size: 14.5px;
    color: var(--text-colour-dark);
    line-height: 1.35;
    white-space: pre-wrap;
}

.empty-notifications {
    text-align: center;
    color: var(--gray-dark);
    margin: 25px 0;
}

.notifications-icon {
    margin-left: 5px;
    margin-right: 12px;
}

.notifications-title {
    flex: 1;
    color: var(--primary-colour);
    font-weight: 600;
    font-size: 14.5px;
}

.notifications-body {
    display: none;
    border-top: 1px solid #eee;
    margin: 0 8.5px;
}

.notifications-body.show {
    display: block;
}

.notifications-wrap {
    padding: 0;
}

/* keep inner cards tight */
.notifications-wrap .title {
    display: none;
}

/* hide duplicate title */
.notifications-wrap .card+.card {
    margin-top: 8.5px;
}

.notifications-scroll {
    overflow: auto;
}

.notifications-header {
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8.5px;
    padding: 10px 12px;
}

.notifications-icon img {
    display: block;
}

.notifications-count {
    margin-left: auto;
    font-weight: 650;
    color: var(--text-colour-dark);
    opacity: 0.7;
}

.log-container {
    display: none;
    border-top: 1px solid #eee;
}

.log-container.show {
    display: block;
}

.notifications-wrap {
    padding: 10px 10px 12px;
}

.notifications-wrap .card+.card {
    margin-top: 8.5px;
}

.notif-chip {
    border: 1px solid #ececec;
    border-left-width: 6px;
    background: #fff;
    padding: 10px 12px;
    border-radius: 10px;
}

.notif-chip+.notif-chip {
    margin-top: 8.5px;
}

.notif-chip-title {
    font-weight: 650;
    font-size: 14.5px;
    color: var(--text-colour-dark);
}

.notif-chip-sub {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2.5px;
}

.notif-chip-body {
    font-size: 13.5px;
    margin-top: 6.5px;
    color: var(--text-colour-dark);
    line-height: 1.35;
}

/* Flat sections (no radius, no shadow) */
.notifications-section {
    margin-top: 4.5px;
    border-radius: 0;
    box-shadow: none;
}

.log-container {
    /* border: 1px solid #ececec; */
    border-top: none;
}

.notif-chip {
    background: #fff;
    border-radius: 4.5px;
    padding: 10px 12px;
}

.notif-chip+.notif-chip {
    margin-top: 8px;
}

.notif-chip-sub {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
}

.notif-chip-body {
    font-size: 13.5px;
    margin-top: 6px;
    color: var(--text-colour-dark);
    line-height: 1.35;
}

/* SUBJECT colour only (no background fills) */
.tone-low-pressure .notif-chip-title {
    color: var(--low-pressure-colour, #ad0505);
}

.tone-high-pressure .notif-chip-title {
    color: var(--high-pressure-colour, #320e75);
}

.tone-high-temperature .notif-chip-title {
    color: var(--high-temperature-colour);
}

.tone-low-voltage .notif-chip-title {
    color: var(--low-voltage-colour);
}

.tone-link .notif-chip-title {
    color: var(--primary-colour);
}

.tone-unlink .notif-chip-title {
    color: var(--text-colour-dark);
}

.tone-nosignal .notif-chip-title {
    color: var(--gray-dark);
}

.tone-rotation .notif-chip-title {
    color: var(--accent--colour);
}

.tone-neutral .notif-chip-title {
    color: var(--text-colour-dark);
}