/* =================
   === Web Fonts ===
   ================= */

   @font-face {
    font-family: 'Tenorite Regular';
    src: url('/assets/fonts/TenoriteRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Tenorite Italic';
    src: url('/assets/fonts/TenoriteItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
  }
  @font-face {
    font-family: 'Tenorite Bold';
    src: url('/assets/fonts/TenoriteBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
  }

  @font-face {
    font-family: 'Tenorite Bold Italic';
    src: url('/assets/fonts/TenoriteBoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
  }

/* ----------------- */
:root {
    --colour-dark-grey: #2a2e31;
    --colour-mid-grey: #777;
    --colour-light-grey: #b7b7b7;
    --colour-lighter-grey: #ccc;
    --colour-lightest-grey: #e7e7e7;
    --colour-off-white: #eee;
    --colour-sky-blue: #36A7DF;
    --colour-lighter-sky-blue: #66D7FF;
    --colour-darker-sky-blue: #0677af;
    --colour-alert-red: #FF6666;
    --colour-darker-alert-red: #af0606;
    --colour-green: #6fb34d;
    --colour-red: #c8150b;
    --colour-error-red: #ff0000;
}
html {
    height: 100%;
}
body {
    height: 100%;
    color: var(--colour-dark-grey);
    font-family: 'Tenorite Regular', Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    position: relative;
}
b, strong {
    font-family: 'Tenorite Bold';
}

.sr-only {
    display: none;
}

.form-check.form-switch {
    margin-bottom: 0px !important;
}

.navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.gb-logo-mb {
    position: absolute;
    width: 50px;
    height: 72px;
    background-image: url('/assets/images/gb-logo-sm.png');
    background-repeat: no-repeat;
    top: 30px;
    left: 30px;
    display: none;
}
@media (max-width: 767px) {
    .gb-logo-mb {
        display: block;
    }
}

.alert-notifications {
    margin-right: 20px;
    position: relative;
}
@media (max-width: 767px) {
    .alert-notifications {
        display: none;
    }
}
.alert-notifications a,
.alert-notifications a:hover {
    text-decoration: none;
}
.alert-notifications i {
    color: var(--colour-dark-grey);
}
.alert-notifications .badge {
    font-size: 0.5rem;
    margin-top: -7px;
    margin-left: -7px;
}

nav {
    width: calc(100% - 320px);
    border-top: solid 1px var(--colour-lighter-grey);
    text-align: right;
    float: right;
    padding: 15px 0px;
    clear: right;
    min-width: 200px;
    height: 72px;
  }
  @media (max-width: 767px) {
    nav {
        width: 100%;
    }
  }
  nav.navbar {
    justify-content: flex-end! important;
  }
  nav.navbar-expand-md {
    justify-content: flex-end !important;
  }
  @media (max-width: 767px) {
    nav.navbar-expand-md {
        width: 100%;
    }
    nav.navbar-expand-md .container {
        width: 100%;
        max-width: 100%;
    }
  }
  nav #navbarToggler {
    justify-content: flex-end !important;
    z-index: 1000;
  }
  nav .navbar-nav {
    background-color: var(--colour-off-white);
  }
  @media (max-width: 767px) {
    nav #navbarToggler {
        position: absolute;
        top: 72px;
        right: 0px;
        box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
        border-radius: 10px;
        min-width: 200px;
    }
    nav .nav-item {
        border-bottom: 1px solid var(--colour-light-grey);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    nav .nav-item:last-child,
    nav .nav-item:has(> .nav-link.active) {
        border-bottom: 0px;
    }
  }
  @media (max-width: 575px) {
    nav #navbarToggler {
        width: 100%;
    }
  }
  nav .nav-link {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--colour-mid-grey);
    transition-property: color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: var(--colour-off-white);
  }
  nav .nav-link.active, nav .nav-link.active:hover {
    color: var(--colour-dark-grey);
  }
  nav ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--colour-off-white);
    border-radius: 10px;
  }
  nav li a {
    display: block;
    color: var(--colour-mid-grey);
    font-size: .875rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: .7em .8em;
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.5s;
    transition-delay: 0s;
  }
  nav li a:hover {
    color: var(--colour-dark-grey);
  }
  nav li a.active,
  nav li a.active:hover {
    color: var(--colour-dark-grey);
    background: white;
    border-radius: 10px;
    border: 1px solid var(--colour-lightest-grey);
  }

.side-menu-header,
.tab-menu-header {
    text-align: left;
    padding: 15px 10px;
    clear: right;
    min-width: 200px;
    height: auto;
}
.left-panel.admin .side-menu-header,
.left-panel.reports .side-menu-header {
    margin-right: 10px;
}

@media (min-width: 768px) {
    .left-panel.admin .side-menu-header,
    .left-panel.reports .side-menu-header {
        width: auto;
        border-top: 0px;
    }
}
.side-menu-header ul,
.tab-menu-header ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--colour-off-white);
    border-radius: 10px;
}
.tab-menu-header ul {
    width: 100%;
}
.admin .side-menu-header ul,
.reports .side-menu-header ul {
    width: 100%;
    white-space: nowrap;
}
.side-menu-header li {
    display: inline-block;
}
.side-menu-header li a,
.tab-menu-header li {

    color: var(--colour-mid-grey);
    font-size: .8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: .7em .8em;
    text-decoration: none;
    transition-property: color;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.tab-menu-header li {
    cursor: pointer;
    display: inline-block;
    background: var(--colour-off-white);
    border-radius: 10px;
    border: 1px solid var(--colour-off-white);
    transition-property: color, background;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
.side-menu-header li a:hover,
.tab-menu-header li:hover {
    color: var(--colour-dark-grey)
}
.side-menu-header li a.active,
.side-menu-header li a.active:hover,
.tab-menu-header li.active,
.tab-menu-header li.active:hover {
    color: var(--colour-dark-grey);
    background: white;
    border-radius: 10px;
    border: 1px solid var(--colour-lightest-grey);
}
.tab-menu-header li.active,
.tab-menu-header li.active:hover {
    color: white;
    background: var(--colour-sky-blue);
    /*transition: none !important;*/
}

#admin-info-panel .tab-menu-header,
#reports-info-panel .tab-menu-header {
    height: auto;
    padding: 0px 0px 5px 0px;
}

#admin-info-panel #tab-menu,
#reports-info-panel #tab-menu {
    padding: 0px;
}

#admin-info-panel .tab-menu,
#reports-info-panel .tab-menu {
    padding: 0px;
}

#side-menu {
    width: 100%;
    height: calc(100% - 72px);
    overflow-y: auto;
    font-size: .65rem;
}
.tab-menu-content {
    position: relative;
    width: 100%;
    overflow-y: auto;
    font-size: .85rem;
}

/*
#tabMenu1 {
    background: red;
}

#tabMenu2 {
    background: green;
}

#tabMenu3 {
    background: blue;
}
*/

#side-menu a {
    color: var(--colour-dark-grey);
    text-decoration: none;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#tab-menu {
    position: relative;
}

.side-menu,
.tab-menu {
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 0px 10px 0px 10px;
}
.side-menu {
    display: none;
}
.tab-menu {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    z-index: 1;
}

.side-menu.active,
.tab-menu.active {
    opacity: 1;
}
.tab-menu.active {
    z-index: 2;
}
.side-menu.active {
    display: block;
}

.side-menu ul {
    clear: left;
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.left-panel.admin .side-menu > ul,
.left-panel.reports .side-menu > ul {
    margin-right: 10px;
}

.side-menu > ul,
.side-menu ul.active {
    display: block;
}

.side-menu li {
    font-size: .8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;  
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}

.side-menu li div {
    display: block;
    height: auto;
    padding: 5px;
    margin: 0px 0px 2px 0px;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

.side-menu ul li div {
    padding-left: 5px;
}

.side-menu ul ul li div {
    padding-left: calc(5px + 15px);
}

.side-menu ul ul ul li div {
    padding-left: calc(5px + 30px);
}

.side-menu ul ul ul ul li div {
    padding-left: calc(5px + 45px);
}

.side-menu ul ul ul ul ul li div {
    padding-left: calc(5px + 60px);
}

.side-menu li div:hover {
    background-color: var(--colour-off-white);
    border-radius: 5px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .side-menu li a[href='#'] div:hover,
    .side-menu li a[href='#'] {
        cursor: default !important;
    }
}

.side-menu li div.active {
    color: var(--colour-dark-grey);
    background-color: var(--colour-off-white);
    border-radius: 5px;
}
.side-menu li div.active a {
    color: var(--colour-dark-grey) !important;
}
.side-menu li div.active.selected {
    color: white;
    background-color: var(--colour-sky-blue);
}
.side-menu li div.active.selected a {
    color: white !important;
}

.top-icon-panel {
    float: right;
    text-align: right;
    width: 500px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    font-size: 22px;
    color: var(--colour-dark-grey);
}
.top-icon-panel .vr {
    color: var(--colour-dark-grey);
}
.top-icon-panel .logged-in-user {
    display: inline-block;
    font-size: .65rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 2rem;
    vertical-align: middle;
    margin-right: 10px;
}
.top-icon-panel .logged-in-user-id {
    display: none;
}
.top-icon-panel .current-date-time {
    display: inline-block;
    font-size: .65rem;
    line-height: 2rem;
    vertical-align: middle;
    margin-right: 10px;
}
.logo {
    float: left;
    margin-top: 15px;
    margin-left: 5px;
    vertical-align: middle;
    max-height: 70px;
}

.logo-mb {
    max-height: 25px;
}
a.icon, a.icon:hover {
    text-decoration: none;
}
a.icon, a.icon i {
    color: var(--colour-dark-grey);
}
a.icon:hover, a.icon:hover i {
    color: var(--colour-darker-sky-blue);
}

header {
    padding-left: 10px;
    padding-right: 10px;
    clear: both;
    flex-basis: 106px;
    margin-bottom: 0px;
}

@media (max-width: 767px) {
    header {
        flex-basis: 72px;
    }
}

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-image: url(/assets/images/login-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.login-left {
    flex: 1;
    height:100%;
}
.login-right {
    display: flex;
    align-items: center;
    flex-basis: 600px;
    height: 100%;
}

.login-box {
    width: 300px;
    box-shadow: 10px 10px 5px rgba(127, 127, 127, 0.5);
}
.login-box .btn-primary {
    margin-top: 15px;
}

.login-box p.login-error {
    text-align: center;
    color: var(--colour-error-red);
    margin-top: 0px;
    margin-bottom: 0px;
}

@media (max-width: 767px) {
    .login {
        background-color: black;
        background-image: none;
    }
    .login-left {
        display: none;
    }
    .login-right {
        flex-basis: 100%;
    }
    .login-box {
        margin: 0px auto;
    }
}

.main {
    display: flex;
    margin-top: 0px;
    align-items: stretch;
    width: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--colour-dark-grey);
}
.left-panel {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 250px;
    overflow: hidden;
    border-right: solid 1px var(--colour-lighter-grey);
}

@media (min-width: 768px) {
    .right-panel.admin .content h4, 
    .right-panel.admin .content h5,
    .right-panel.admin .content h6,  
    .right-panel.admin .content form, 
    .right-panel.admin .content p,
    .right-panel.reports .content h4, 
    .right-panel.reports .content h5,
    .right-panel.reports .content h6,  
    .right-panel.reports .content form, 
    .right-panel.reports .content p {
        margin-left: 10px;
    }
    .right-panel.admin.user-settings .content h4, 
    .right-panel.admin.user-settings .content h5,
    .right-panel.admin.user-settings .content h6,  
    .right-panel.admin.user-settings .content form, 
    .right-panel.admin.user-settings .content p {
        margin-left: 0px;
    }

    .right-panel.admin.user-settings .form-group,
    .right-panel.admin.user-settings .content h4, 
    .right-panel.admin.user-settings .content h5,
    .right-panel.admin.user-settings .content h6 {
        max-width: 900px;
        margin: 0px auto 5px auto;
    }

    .right-panel.admin.user-settings label,
    .right-panel.admin.user-settings .button-wrapper {
        padding-left: 0px;
        padding-right: 0px;
    }

    /*
    .right-panel.admin.user-settings .form-group:last-child {
        margin-bottom: 0px;
    }
    */
}

#asset-panel,
#alert-panel {
    position: absolute;
    width: 300px;
    left: 0px;
    right: unset;
    top: 0px;
    background-color: #ffffff;
    border-radius: 15px;
    border: 4px solid var(--colour-darker-sky-blue);
    height: 355px; 
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    margin-left: 30px;
    margin-top: 30px;
    opacity: 1;
    z-index: 100;
}
#alert-panel {
    width: 400px;
    height: 380px;
}
@media (max-width: 575px) {
    #asset-panel,
    #alert-panel {
        width: unset !important;
        right: 0px;
        margin-right: 30px;
    }
}
@media (min-width: 992px) and (min-height: 800px) {
    #asset-panel,
    #alert-panel {
        height: 600px;
    }
}

@media (max-width: 991px) {
    #alert-panel {
        width: 350px;
    }
}

@media (max-width: 767px) {
    #alert-panel {
        width: 300px;
    }
}

#alert-contact-panel,
#alert-notes-panel {
    display: none;
    position: absolute;
    width: 400px;
    left: unset;
    right: 0px;
    top: 0px;
    background-color: #ffffff;
    border-radius: 15px;
    border: 4px solid var(--colour-darker-sky-blue);
    height: 380px; 
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    margin-right: 30px;
    margin-top: 30px;
    opacity: 0;
    z-index: 105;
}

@media (min-width: 992px) and (min-height: 800px) {
    #alert-contact-panel,
    #alert-notes-panel {
        height: 600px;
    }
}

@media (max-width: 1199px) {
    #alert-contact-panel,
    #alert-notes-panel {
        display: none !important;
    }
    #alert-info-panel .buttons {
        display: none !important;
    }
}

#asset-panel .asset-panel-title-bar,
#alert-panel .alert-panel-title-bar,
#alert-contact-panel .alert-contact-panel-title-bar,
#alert-notes-panel .alert-notes-panel-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    background-color: var(--colour-sky-blue);
    clear: right;
    border-bottom: 1px solid var(--colour-dark-grey);
}

.asset-panel-title-bar .name,
.alert-panel-title-bar .name,
.alert-contact-panel-title-bar .name,
.alert-notes-panel-title-bar .name {
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.alert-contact-panel-title-bar .close-button,
.alert-notes-panel-title-bar .close-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-basis: 30px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}

.alert-contact-panel-title-bar .close-button i,
.alert-notes-panel-title-bar .close-button i {
    color: white;
    opacity: 1.0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

.alert-contact-panel-title-bar .close-button i:hover,
.alert-notes-panel-title-bar .close-button i:hover {
    opacity: 0.5;
    cursor: pointer;
}

#alert-contact-panel .content,
#alert-notes-panel .content {
    padding: 10px;
    font-size: 0.75rem;
}

#alert-contact-panel .content label,
#alert-notes-panel .content label {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#alert-contact-panel .content input[type='text'],
#alert-notes-panel .content input[type='text'],
#alert-contact-panel .content input[type='number'],
#alert-notes-panel .content input[type='number'],
#alert-contact-panel .content input[type='email'],
#alert-notes-panel .content input[type='email'],
#alert-contact-panel .content input[type='date'],
#alert-notes-panel .content input[type='date'],
#alert-contact-panel .content input[type='time'],
#alert-notes-panel .content input[type='time'],
#alert-contact-panel select,
#alert-notes-panel select,
#alert-contact-panel textarea,
#alert-notes-panel textarea  {
    width: 100%;
    /*font-size: 0.75rem;*/
    font-size: 0.7rem;
}

#alert-contact-panel input[disabled='disabled'],
#alert-contact-panel select[disabled='disabled'] {
    border: 1px solid var(--colour-dark-grey);
    color: var(--colour-dark-grey);
}

#alert-contact-panel .content .row,
#alert-notes-panel .content .row {
    margin-bottom: 5px;
}

#alert-contact-panel .content .row:last-child,
#alert-notes-panel .content .row:last-child {
    margin-bottom: 0px;
}

#alert-contact-panel #btnNotes {
    width: auto;
    margin: 0px auto;
}

#alert-notes-panel #newNote {
    font-size: 0.85rem;
}

#alert-notes-panel #previousNotes {
    border:1px solid var(--colour-dark-grey);
    /*min-height: 100px;
    max-height: 150px;
    */
    height: 50px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
}

@media (min-width: 768px) and (min-height: 800px) {
    #alert-notes-panel #previousNotes {
        height: 295px;
    }
}

#alert-notes-panel #previousNotes .note {
    margin-bottom: 5px;
}

#alert-notes-panel #previousNotes .note .text {
    font-size: 0.85rem;
}

#alert-notes-panel #previousNotes .note .header {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.7rem;
    text-decoration: underline;
}

.asset-panel-title-bar .hide-button,
.alert-panel-title-bar .hide-button {
    flex-basis: 30px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.asset-panel-title-bar .hide-button i,
.alert-panel-title-bar .hide-button i {
    color: white;
    opacity: 1.0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

.asset-panel-title-bar .hide-button i:hover,
.alert-panel-title-bar .hide-button i:hover {
    opacity: 0.5;
    cursor: pointer;
}

#asset-show-button,
#alert-show-button {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0px;
    top: 0px;
    color: var(--colour-darker-sky-blue);
    background-color: #ffffff;
    border-radius: 15px;
    border: 4px solid var(--colour-darker-sky-blue);
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    margin-left: 30px;
    margin-top: 30px;
    opacity: 0;
    z-index: 101;
    font-size: 1rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition-property: border;
    transition-duration: 0.5s;
    transition-delay: 0s;
    align-items: center;
    justify-content: center;
}
#asset-show-button:hover,
#alert-show-button:hover {
    border: 4px solid var(--colour-sky-blue);
}

#admin-panel-show-button,
#reports-panel-show-button {
    display: none;
    position: absolute;
    width: 15px;
    height: auto;
    left: 0px;
    top: 0px;
    color: var(--colour-darker-sky-blue);
    background-color: #ffffff;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top: 4px solid var(--colour-darker-sky-blue);
    border-right: 4px solid var(--colour-darker-sky-blue);
    border-bottom: 4px solid var(--colour-darker-sky-blue);
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    margin-left: 0px;
    margin-top: 10px;
    opacity: 0;
    z-index: 101;
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    transition-property: border;
    transition-duration: 0.5s;
    transition-delay: 0s;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
}
#admin-panel-show-button:hover,
#reports-panel-show-button:hover {
    border-top: 4px solid var(--colour-sky-blue);
    border-right: 4px solid var(--colour-sky-blue);
    border-bottom: 4px solid var(--colour-sky-blue);
}
#admin-panel-hide-button,
#reports-panel-hide-button {
    display: none;
    position: absolute;
    width: 15px;
    height: auto;
    right: 0px;
    top: 0px;
    color: var(--colour-dark-grey);
    background-color: #ffffff;
    overflow: hidden;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 101;
    opacity: 0;
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    transition-property: border;
    transition-duration: 0.5s;
    transition-delay: 0s;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    padding-right: 10px;
}
#admin-panel-hide-button,
#reports-panel-hide-button {
    display: flex;
    opacity: 1;
}

#admin-panel-hide-button:hover,
#reports-panel-hide-button:hover {
    color: var(--colour-sky-blue);
}
@media (max-width: 767px) {
    .left-panel {
        display: none;
        width: 0px;
        opacity: 0;
    }
    #admin-panel-show-button,
    #reports-panel-show-button {
        display: flex;
        opacity: 1;
    }
    #admin-overlay,
    #reports-overlay {
        display: none;
        opacity: 0;
    }
}

.left-panel.alerts {
    border-top: solid 1px var(--colour-lighter-grey);
    border-right: solid 1px var(--colour-lighter-grey);
    flex-basis: 240px;
}

.left-panel h3 {
    margin-bottom: 0px;
    height: 40px;
}

.right-panel .title-bar {
    background-color: var(--colour-off-white);
    font-size: .975rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
}

.main-panel .title-bar {
    background-color: var(--colour-off-white);
    font-size: .975rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
}

.alerts-list {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}

.alerts-list .heading {
    margin-left: 5px;
    padding: 5px;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: .7rem;
    text-transform:uppercase;
    border-bottom: solid 1px var(--colour-lighter-grey);
    cursor: pointer;
}
.alerts-list .content {
    margin-bottom: 15px;
}
.alerts-list .content-item {
    font-weight: normal;
    font-size: .7rem;
    padding: 5px 10px 5px 5px;
    margin-left: 5px;
    border-left: solid 5px white;
    margin-top: 1px;
    border-bottom: solid 1px var(--colour-lighter-grey);
    cursor: pointer;
    clear: right;
}

.alerts-list .content-item:hover {
    border-left: solid 5px var(--colour-darker-sky-blue);
}
.alerts-list .content-item.active {
    border-left: solid 5px var(--colour-darker-sky-blue);
    color: #ffffff;
    background-color: var(--colour-darker-sky-blue);
}

/*
.alerts-panel {
    padding: 15px;
}

.alerts-filter {
    background-color: var(--colour-lighter-grey);
    padding: 5px 10px 10px 10px;
    margin-bottom: 5px;
}
.alerts-filter .title {
    font-size: .7rem;
    clear: right;
}

.alerts-results {
    width: 100%;
    color: var(--colour-dark-grey);
    font-size: .7rem;
    margin-bottom: 5px;
}

.alerts-results .table-head {
    width: 100%;
}
.alert-results .table-head i {
    color: white;
    font-size: .7rem;
}

.alerts-results .table-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--colour-dark-grey);
    background-color: white;
    clear: right;
}

.alerts-results .table-head .table-row {
    color: white;
    background-color: var(--colour-dark-grey);
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.alerts-results .table-row.table-row-striped {
    background-color: var(--colour-off-white);
}

.alerts-results .table-body {
    width: 100%;
}

.alerts-results .table-body .table-row:hover {
    color: white;
    background-color: var(--colour-darker-sky-blue);
    cursor: pointer;
}

.alerts-results .table-column {
    padding: 5px;
    border-left: 1px solid var(--colour-lighter-grey);
    border-bottom: 1px solid var(--colour-lighter-grey);
    flex: 1;
}
.alerts-results .table-head .table-column {
    cursor: pointer;
}
.alerts-results .table-column:last-child {
    border-right: 1px solid var(--colour-lighter-grey);
}

.alerts-results .table-column.table-column-narrow {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25px;
}
.alerts-results .table-column.table-column-wide {
    flex: 2;
}

.alert-results-row-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    font-size: .7rem;
    background-color: var(--colour-off-white);
    color: #2a2e31;
    border: 1px solid var(--colour-lighter-grey);
}
.alert-results-row-count div {
    flex: 1;
    text-align: right;
}
*/

.results-panel {
    padding: 15px;
}

.results-filter {
    background-color: var(--colour-sky-blue);
    color: white;
    padding: 5px 10px 10px 10px;
    margin-bottom: 10px;
    border-radius: 15px;
    border: 4px solid var(--colour-darker-sky-blue);
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
}
.results-filter .title {
    font-size: .8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    clear: right;
}

.results-filter input {
    width: 100%;
}

.results-table {
    width: 100%;
    color: var(--colour-dark-grey);
    margin-bottom: 5px;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    border-radius: 15px;
}

.results-table .table-head {
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top: 4px solid var(--colour-darker-sky-blue);
    border-left: 4px solid var(--colour-darker-sky-blue);
    border-right: 4px solid var(--colour-darker-sky-blue);
    font-size: .8rem;
    overflow: hidden;
}
.results-table .table-head i {
    color: white;
    font-size: .7rem;
}

.results-table .table-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--colour-dark-grey);
    background-color: white;
    clear: right;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

.results-table .table-row:nth-child(even) {
    background-color: var(--colour-off-white);
}

.results-table .table-head .table-row {
    color: white;
    background-color: var(--colour-sky-blue);
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.results-table .table-body {
    width: 100%;
    font-size: .75rem;
    border-left: 4px solid var(--colour-darker-sky-blue);
    border-right: 4px solid var(--colour-darker-sky-blue);
    max-height: 500px;
    overflow-y: auto;
}

.results-table .table-body .table-row:hover {
    color: var(--colour-dark-grey);
    background-color: var(--colour-lighter-grey);
    cursor: pointer;
}
.results-table .table-body .table-row.selected {
    color: white;
    background-color: var(--colour-sky-blue);
}

.results-table .table-column {
    padding: 5px;
    border-left: 1px solid var(--colour-sky-blue);
    border-bottom: 1px solid var(--colour-sky-blue);
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.results-table .table-head .table-column {
    cursor: pointer;
    border-left: 1px solid var(--colour-darker-sky-blue);
    border-bottom: 1px solid var(--colour-dark-grey);
}
.results-table .table-body .table-row.selected .table-column {
    border-left: 1px solid var(--colour-darker-sky-blue);
}
.results-table .table-column:first-child,
.results-table .table-body .table-row.selected .table-column:first-child {
    border-left: 0px
}
.results-table .table-column:last-child {
    border-right: 0px
}
.results-table .table-body .table-row:last-child .table-column {
    border-bottom: 1px solid var(--colour-dark-grey);
}

.results-table .table-column input[type='button'] {
    font-size: 0.65rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.results-table .table-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px 10px 5px 5px;
    font-size: .8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color: white;
    color: var(--colour-darker-sky-blue);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top: 2px solid var(--colour-darker-sky-blue);
    border-bottom: 4px solid var(--colour-darker-sky-blue);
    border-left: 4px solid var(--colour-darker-sky-blue);
    border-right: 4px solid var(--colour-darker-sky-blue);
    overflow: hidden;
}
.results-table .table-foot div {
    flex: 1;
    text-align: right;
}

.priority-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
}
.priority-circle.priority_0_white {
    background-color: white;
}
.priority-circle.priority_1_red {
    background-color: #aa0000;
}
.priority-circle.priority_2_amber {
    background-color: #aa5500;
}
.priority-circle.priority_3_green {
    background-color: #00aa00;
}

.right-panel {
    flex: 1;
    height: 100%;
    font-size: .65rem;
    position: relative;
    overflow: hidden;
}

@media (max-width: 767px) {
    .right-panel .content h4, 
    .right-panel .content h5, 
    .right-panel .content h6, 
    .right-panel .content form,
    .right-panel .content p {
        margin-left: 15px;
        margin-right: 15px;
    }
    .right-panel.user-settings .content h4, 
    .right-panel.user-settings .content h5, 
    .right-panel.user-settings .content h6, 
    .right-panel.user-settings .content form,
    .right-panel.user-settings .content p {
        margin-left: 0px;
        margin-right: 0px;
    }
}

.right-panel .content h4 {
    margin-top: 5px;
    position: relative;
}

.right-panel .content h4 button {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-right: 15px;
}

.main-panel {
    flex: 1;
    height: 100%;
    border-top: solid 1px var(--colour-lighter-grey);
    font-size: .65rem;
    position: relative;
    overflow: hidden;
}

.company-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: var(--colour-light-grey);
    border-bottom: 1px solid #2a2e31;
}

.company-title-bar:hover {
    background-color: var(--colour-lighter-grey);
    cursor: pointer;
}

.company-title-bar .check {
    flex-basis: 20px;
    padding: 10px 0px 10px 5px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--colour-dark-grey);
}

.company-title-bar .toggle {
    flex-basis: 30px;
    padding: 10px;
    font-size: 1.25rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--colour-dark-grey);
}

.company-title-bar .name {
    flex: 1;
    padding: 10px 10px 10px 0px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--colour-dark-grey);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.company .content {
    display: block;
}

#asset-search,
#alert-search {
    padding: 5px;
    width: 100%;
    border-bottom: 1px solid var(--colour-dark-grey);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 5px;
}
#asset-search input,
#alert-search input {
    font-size: 0.85rem;
}
@media (max-width: 767px) {
    #asset-search input,
    #alert-search input {
        font-size: 16px;
    }
}
#asset-search input[type='checkbox'],
#alert-search input[type='checkbox'] {
}
#asset-search input[type='text'],
#alert-search input[type='text'] {
    flex: 1;
}

.border-right {
    border-right: 1px solid var(--colour-lighter-grey);
}

#liveResults,
#alertResults {
    height: calc(100% - 100px);
    overflow-y: auto;
    font-size: .65rem;
}

.asset,
#alertResults .alert {
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: white;
}
.asset.inactive,
#alertResults .alert.inactive {
    opacity: 0.5;
}
#alertResults .alert.nogps .name {
    font-style: italic;
}
.asset:nth-child(even),
#alertResults .alert:nth-child(even) {
    background-color: var(--colour-off-white);
}

.asset:hover,
#alertResults .alert:hover {
    background-color: var(--colour-lighter-grey);
    cursor: pointer;
}
.asset.inactive:hover,
#alertResults .alert.inactive:hover {
    background-color: white;
    cursor: not-allowed;
}
.asset.inactive:nth-child(even):hover,
#alertResults .alert.inactive:nth-child(even):hover {
    background-color: var(--colour-off-white);
}

.asset.selected,
#alertResults .alert.selected {
    background-color: var(--colour-sky-blue);
}

.asset:not(:first-child),
#alertResults .alert:not(:first-child) {
    border-top: 1px solid var(--colour-sky-blue);
}

/* override bootstrap alert styles */
#alertResults .alert {
    --bs-alert-bg: unset;
    --bs-alert-padding-x: unset;
    --bs-alert-padding-y: unset;
    --bs-alert-margin-bottom: unset;
    --bs-alert-color: unset;
    --bs-alert-border-color: unset;
    --bs-alert-border: unset;
    --bs-alert-border-radius: unset;
    --bs-alert-link-color: unset;
    position: unset;
    padding: unset;
    margin-bottom: unset;
    color: unset;
    border-left: unset;
    border-right: unset;
    border-bottom: unset;
    border-radius: unset;
}

.asset-title-bar,
.alert-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    overflow: hidden;
    text-wrap: nowrap;
}
.asset-title-bar .icon {
    display: flex;
    align-items:center;
    justify-content: center;
    flex-basis: 75px;
    height: 100%;
    text-align: center;
    font-size: 1.1rem;
    color: var(--colour-mid-grey);
    padding-left: 5px;
    border-right: 1px solid var(--colour-sky-blue);
}

.alert-title-bar .icon {
    display: flex;
    align-items:center;
    justify-content: center;
    flex-basis: 30px;
    height: 100%;
    text-align: center;
    font-size: 1.1rem;
    color: var(--colour-mid-grey);
    border-right: 1px solid var(--colour-sky-blue);
}

.asset-title-bar .icon input[type='checkbox'] {
}
@media (max-width: 575px) {
    .asset-title-bar .icon input[type='checkbox'] {
        display: none;
    }
    .asset-title-bar .icon,
    .alert-title-bar .icon {
        flex-basis: 55px;
        padding-left: 0px;
    }
    #asset-search input[type='checkbox'] {
        display: none;
    }
  }

.asset .asset-title-bar .icon {
    fill: var(--colour-dark-grey);
}
.asset.selected .asset-title-bar .icon {
    fill: #fff;
}
.asset .asset-title-bar .icon.live {
    fill: #5c5;
}
.asset .asset-title-bar .icon.idling {
    fill: #ff7700;
}
.asset .asset-title-bar .icon.stolen {
    fill: #ff0000;
}
.alert .alert-title-bar .icon.new i {
    color: #ff0000;
}
.alert .alert-title-bar .icon.open i {
    color: #ff7700;
}
.asset-title-bar .name,
.alert-title-bar .name {
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .75rem;
    color: var(--colour-dark-grey);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.asset-title-bar .name,
.alert-title-bar .name.new {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.asset.selected .asset-title-bar .name,
.alert.selected .alert-title-bar .name {
    color: white;
}
.asset-details {
    border-top: 1px solid var(--colour-dark-grey);
    padding: 10px;
    color: var(--colour-dark-grey);
}
.asset-details:hover {
    background-color: var(--colour-lightest-grey);
}

.asset-details .pills-panel,
#asset-info-panel .pills-panel,
#alert-info-panel .pills-panel,
.journey-item-row .pills,
.movement-item-row .pills {
    display: flex;
    gap: 5px;
    /*
    flex-wrap: nowrap;
    overflow-x: auto;
    */
    flex-wrap: wrap;
    overflow-x: visible;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}
.asset-details .pill,
#asset-info-panel .pill,
#alert-info-panel .pill,
.journey-item-row .pill,
.movement-item-row .pill {
    display: flex;
    flex-shrink: 0;
    height: 20px;
    border-radius: 10px;
    font-size: .7rem;
    padding: 0px 10px 0px 10px;
    color: var(--colour-dark-grey);
    background-color: var(--colour-lightest-grey);
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

#asset-info-panel i,
#asset-info-panel .imei i,
#asset-info-panel .location i,
#alert-info-panel i,
#alert-info-panel .imei i,
#alert-info-panel .location i,
.journey-item-row .pill i,
.movement-item-row .pill i {
    cursor: pointer;
}

.asset-details .pill i,
#asset-info-panel .pill i,
#alert-info-panel .pill i,
.journey-item-row .pill i,
.movement-item-row .pill i {
    font-size: .8rem;
    margin-right: 5px;
    color: var(--colour-dark-grey);
}
.asset-details:hover .pill,
.journey-item:hover .pill,
.movement-item:hover .pill {
    background-color: white;
}
.journey-item:hover .journey-item-row:hover .pill,
.movement-item:hover .movement-item-row:hover .pill {
    background-color: var(--colour-lightest-grey);
}
.journey-item-row.selected .pill,
.journey-item-row.selected:hover .pill,
.journey-item:hover .journey-item-row.selected:hover .pill,
.movement-item-row.selected .pill,
.movement-item-row.selected:hover .pill,
.movement-item:hover .movement-item-row.selected:hover .pill {
    background-color: white;
}
.asset-details .pill i:hover,
#asset-info-panel .pill i:hover,
#asset-info-panel .imei i:hover,
#asset-info-panel .location i:hover,
#asset-info-panel .location i:hover,
#alert-info-panel .pill i:hover,
#alert-info-panel .imei i:hover,
#alert-info-panel .location i:hover,
#alert-info-panel .location i:hover,
.journey-item-row .pill i:hover,
.movement-item-row .pill i:hover {
    color: var(--colour-sky-blue);
}
.asset-details .stats-panel {
    font-size: .8rem;
    color: var(--colour-dark-grey);
}
.asset-details .stats-panel i {
    font-size: .85rem;
    color: var(--colour-dark-grey);
}

.asset-details .stats-row {
    display: block;
    width: 100%;
    clear: both;
    padding-bottom: 5px;
}

#asset-count,
#alert-count {
    height: 30px;
    background-color: white;
    font-size: .8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--colour-darker-sky-blue);
    border-top: 2px solid var(--colour-darker-sky-blue);
    padding: 5px 10px 5px 10px;
}

#map {
    flex: 1;
    flex-basis: 1;
    height: 100%;
}

#map-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: black;
    opacity: 0.25;
    z-index: 98;
    display: none;
}

@media (max-width: 575px) {
    #map-overlay {
        display: block;
    }
}
@media (min-width: 576px) {
    #map-overlay {
        display: none !important;
    }
}

#admin-overlay,
#reports-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: black;
    opacity: 0.25;
    z-index: 98;
    display: none;
}

@media (min-width: 768px) {
    #admin-overlay,
    #reports-overlay {
        display: none !important;
    }
}

.marker {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;   
    transform: translate(0%, 30%);
    z-index: 2;  
    /*-webkit-filter: drop-shadow(5px 5px 5px rgba(50, 50, 50, 0.75));
    filter: drop-shadow(5px 5px 5px rgba(50, 50, 50, 0.75));*/                           
}

.marker .icon {
    padding: 5px;
    margin-top: 5px;
    z-index: 3;
    position: relative;
    width: 32px;
    height: 32px;
}

.marker .icon svg {
    position: absolute;
    transform-origin: 50% 55%;
    transform: rotate(0deg);
    width: 32px;
    height: auto;
    fill: var(--colour-dark-grey);
    z-index: 4;
    left: 0px;
    top: 0px;
}

.marker .icon svg g g:nth-child(2) path {
    fill: var(--colour-dark-grey)!important;
}
.marker .icon.live svg g g:nth-child(2) path {
    fill: #5c5!important;
}
.marker .icon.stolen svg g g:nth-child(2) path {
    fill: #ff0000!important;
}
.marker .icon.idling svg g g:nth-child(2) path {
    fill: #ff7700!important;
}

.marker .label {
    display: inline;
    color: var(--colour-dark-grey);
    background-color: white;
    border: 1px solid var(--colour-dark-grey);
    padding: 2px;
    font-size: .5rem;
    z-index: 2;
}

.marker .speed {
    position: absolute;
    font-size: 0.6rem;
    z-index: 5;
    color: var(--colour-dark-grey);
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: calc(50% - 16px);
    top: calc(50% - 14px);
    text-align: center;
}

.marker .speed.small {
    font-size: 0.5rem;
}

.journey-item .marker,
.movement-item .marker {
    transform: translate(0%, 0%);
}

.journey-item .marker .icon,
.movement-item .marker .icon {
    padding: 0px;
    margin-top: -5px;
    margin-right: 1px;
    width: 32px;
    height: 32px;
}

.journey-item .marker .icon svg,
.movement-item .marker .icon svg {
    width: 32px;
    height: auto;
}

.journey-item .marker .speed,
.movement-item .marker .speed {
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    left: calc(50% - 10px);
    top: calc(50% - 9px);
}

.journey-item .marker .speed.small,
.movement-item .marker .speed.small {
    font-size: 0.6rem;
}

.journey-marker,
.movement-marker {
    z-index: 1;
    /*-webkit-filter: drop-shadow(5px 5px 5px rgba(50, 50, 50, 0.75));
    filter: drop-shadow(5px 5px 5px rgba(50, 50, 50, 0.75));*/  
}

.journey-marker .icon i,
.movement-marker .icon i {
    color: var(--colour-dark-grey);
    font-size: 0.5rem;
}

.journey-marker .icon i.start,
.movement-marker .icon i.start {
    color: var(--colour-green);
    font-size: 1.5rem;
}

.journey-marker .icon i.end,
.movement-marker .icon i.end {
    color: var(--colour-red);
    font-size: 1.5rem;
}

.journey-marker:has(> .icon > i.start),
.journey-marker:has(> .icon > i.end),
.movement-marker:has(> .icon > i.start),
.movement-marker:has(> .icon > i.end) {
    z-index: 2;
}

.modal-content {
    border-radius: 15px;
    border: 4px solid var(--colour-darker-sky-blue);
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
}

  .modal-dialog label,
  .modal-dialog input,
  .modal-dialog select,
  .modal-dialog textarea {
    font-size: .75rem !important;
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    background-color: var(--colour-sky-blue);
    clear: right;
    border-bottom: 1px solid var(--colour-dark-grey);
    padding: 0px 10px 0px 10px;
  }

  .modal-title {
    font-size: .85rem !important;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
  }

  .modal-subtitle {
    font-size: .8rem !important;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color: var(--colour-off-white);
    color: var(--colour-dark-grey);
    padding: 5px 10px 5px 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .modal-body {
    font-size: .9rem !important;
    min-height: 300px;
    padding: 10px;
  }

  .bootbox .modal-body {
    min-height: auto;
  }

  .bootbox .modal-dialog {
    width: 250px;
  }

  .bootbox .modal-dialog-centered {
    margin: 0 auto;
  }

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

  .modal-body label {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
  }

  .modal-body .col-xs-1,
  .modal-body .col-xs-2,
  .modal-body .col-xs-3,
  .modal-body .col-xs-4,
  .modal-body .col-xs-5,
  .modal-body .col-xs-6,
  .modal-body .col-xs-7,
  .modal-body .col-xs-8,
  .modal-body .col-xs-9,
  .modal-body .col-xs-10,
  .modal-body .col-xs-11,
  .modal-body .col-xs-12,
  .modal-body .col-sm-1,
  .modal-body .col-sm-2,
  .modal-body .col-sm-3,
  .modal-body .col-sm-4,
  .modal-body .col-sm-5,
  .modal-body .col-sm-6,
  .modal-body .col-sm-7,
  .modal-body .col-sm-8,
  .modal-body .col-sm-9,
  .modal-body .col-sm-10,
  .modal-body .col-sm-11,
  .modal-body .col-sm-12 {
    padding: 0px;
  }

  .modal-header .btn-close {
    font-size: .75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    color: #fff;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0s;
    opacity: 1.0;
  }
  .modal-header .btn-close:hover {
    color: #fff;
    opacity: 0.5;
  }

  .modal-footer {
    padding: 5px 10px 5px 10px;
    justify-content: center;
    color: var(--colour-dark-grey);
    background-color: white;
    border-top: 1px solid var(--colour-dark-grey);
  }

  .modal-footer .btn {
    font-size: .8rem !important;
    margin: 0px 0px 0px 5px;
  }

  .filterable-dropdown .btn {
    font-size: .85rem !important;
    border: 1px solid var(--colour-dark-grey);
  }

  .filterable-dropdown .dropdown-menu {
    width: 175px;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    max-height: 250px;
    overflow: auto;
  }
  #selectedAsset.filterable-dropdown .dropdown-menu {
    width: 200px;
  }

  @media (max-width: 767px) {
    .filterable-dropdown .btn {
        width: 100%;
    }
    .filterable-dropdown .dropdown-menu,
    #selectedAsset.filterable-dropdown .dropdown-menu {
        width: 100%;
        transform: translate3d(0px, 32.5px, 0px) !important;
    }
  }

  .filterable-dropdown .dropdown-menu ul {
    max-height: 135px;
    overflow-y: auto;
    padding-left: 0px;
    border-top: 1px solid var(--colour-lighter-grey);
    border-bottom: 1px solid var(--colour-lighter-grey);
    margin-bottom: 0px;
  }

  .filterable-dropdown .dropdown-menu li {
    list-style: none;
    font-size: .85rem !important;
    text-decoration: none;
    padding: 5px;
    color: var(--colour-dark-grey);
  }

  .filterable-dropdown li:hover {
    cursor: pointer;
    color: white;
    background: var(--colour-darker-sky-blue);
  }

  .filterable-dropdown .dropdown-menu li:not(.active) i.fa-check {
    color: white;
  }

  .filterable-dropdown .dropdown-menu li.active i.fa-check {
    color: var(--colour-dark-grey);
  }

  .filterable-dropdown .dropdown-menu li.active:hover i.fa-check {
    color: white!important;
  }

  .filterable-dropdown .dropdown-menu li:not(.active):hover i.fa-check {
    color: var(--colour-darker-sky-blue)!important;
  }

  .filterable-dropdown input[type='text'] {
    padding: 5px;
    margin-top: -6px;
    border: 0;
    border-radius: 0;
    background: var(--colour-off-white);
  }

  .filterable-dropdown .select-all {
    font-size: .7rem !important;
    font-weight: normal;
    color: var(--colour-dark-grey);
    padding: 5px;
  }

  .filterable-dropdown .select-all.active {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
  }

  .filterable-dropdown .select-all:hover {
    cursor: pointer;
    color: white;
    background: var(--colour-darker-sky-blue);
  }

  .filterable-dropdown .select-all:not(.active) i.fa-check {
    color: white;
  }

  .filterable-dropdown .select-all.active i.fa-check {
    color: var(--colour-dark-grey);
  }

  .filterable-dropdown .select-all.active:hover i.fa-check {
    color: white!important;
  }

  .filterable-dropdown .select-all:not(.active):hover i.fa-check {
    color: var(--colour-darker-sky-blue)!important;
  }

.multiselect-dropdown .selected-values {
    display: none;
}
.multiselect-dropdown .dropdown-menu { 
    width: 250px;
    box-shadow: rgba(50, 50, 50, 0.25) 5px 5px 5px;
    max-height: 250px;
    overflow: auto;
}
.multiselect-dropdown .dropdown-toggle,
.multiselect-dropdown .dropdown-toggle:hover {
    border: 1px solid var(--colour-dark-grey);
}
.multiselect-dropdown .dropdown-menu label {
    color: var(--colour-dark-grey);
    padding-left: 5px;
    padding-right: 5px;
}
.multiselect-dropdown .dropdown-menu li:first-child label, 
.multiselect-dropdown .dropdown-menu li:first-child label:hover {
    color: var(--colour-light-grey);
    text-transform: uppercase;
    font-size: 0.7rem;
    cursor: pointer;
}
.multiselect-dropdown .dropdown-menu li:first-child label.selected, 
.multiselect-dropdown .dropdown-menu li:first-child label:not(.selected):hover {
    color: var(--colour-dark-grey);
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.multiselect-dropdown .dropdown-menu li:first-child label.selected:hover {
    color: var(--colour-light-grey);
    font-weight: normal;
}
.multiselect-dropdown .dropdown-menu li:not(:first-child):hover {
    background-color: var(--colour-darker-sky-blue);
}
.multiselect-dropdown .dropdown-menu li input {
    accent-color: var(--colour-sky-blue);
}
.multiselect-dropdown .dropdown-menu li:not(:first-child):hover input {
    accent-color: var(--colour-darker-sky-blue); 
}
.multiselect-dropdown .dropdown-menu li:not(:first-child):hover label {
    color: #fff;
}
.multiselect-dropdown .divider {
    height: 1px;
    border-bottom: 1px solid var(--colour-light-grey);
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (max-width: 767px) {
    .multiselect-dropdown .btn {
        width: 100%;
    }
    .multiselect-dropdown .dropdown-menu {
        width: 100%;
        transform: translate3d(0px, 32.5px, 0px) !important;
    }
}

.colour-swatch-picker.dropdown-menu {
    min-width: auto;
    padding: 5px;
    white-space: nowrap;
    line-height: 0.5rem;
}
.dropend .colour-swatch.dropdown-toggle::after {
    display: none;
}
.colour-swatch-picker li {
    display: inline-block;
}
.colour-swatch-picker a {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    border-bottom: solid 5px white;
    display: block;
}
.colour-swatch-picker a:hover,
.colour-swatch-picker a.active {
    border-bottom: solid 5px var(--colour-darker-sky-blue);
}
.colour-swatch {
    width: 1rem;
    height: 1rem;
    background: white;
    border: 1px solid var(--colour-lighter-grey);
    border-radius: 5px;
}

.colour-swatch.red {
    background: #aa0000;
}
.colour-swatch.green {
    background: #00aa00;
}
.colour-swatch.orange {
    background: #aa5500;
}
.colour-swatch.white {
    background: white;
}

.form-group.row {
    align-items: center;
}

.loading-spinner-wrapper {
    display: flex; 
    width: 100%; 
    height: 100%; 
    align-items: center; 
    justify-content: center;
}

#asset-info-panel,
#alert-info-panel {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0px;
    background-color: white;
    border-radius: 15px;
    border: 4px solid var(--colour-darker-sky-blue);
    height: 0px;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    margin-left: auto;
    margin-right: auto;
    max-width: 750px;
    margin-bottom: -8px;
    opacity: 0;
    z-index: 100;
    container-type: size;
}

#alert-info-panel {
    max-width: 800px;
    container-name: alertinfopanel;
}

@container alertinfopanel (width < 390px) {
    #alert-info-panel .pills-panel {
        display: none;
    }
}

#new-alert-panel {
    display: none;
    position: absolute;
    left: 30px;
    right: 30px;
    top: 0px;
    background-color: white;
    border-radius: 15px;
    border: 4px solid var(--colour-darker-sky-blue);
    height: 0px;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    margin-left: auto;
    margin-right: auto;
    max-width: 350px;
    margin-top: -8px;
    opacity: 0;
    z-index: 106;
}

/*
#new-alert-panel {
    display: block;
    top: 30px;
    height: 130px;
    margin-top: 0px;
    opacity: 1;
}
*/

#new-alert-panel .content {
    padding: 10px 10px 0px 10px;
    font-size: 0.85rem;
    color: var(--colour-dark-grey);
    text-align: center;
}

#new-alert-panel hr {
    margin: 10px 0;
}

.alert.pulsing {
    animation-name: alert-pulse-anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: linear;
}


@keyframes alert-pulse-anim {
from {
  background-color: white;
  }
to {
  background-color: #ff7777;
  }
}


@media (max-width: 575px) {
    #asset-info-panel,
    #alert-info-panel {
        left: 30px !important;
        right: 30px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        max-width: unset;
    }
}

@media (min-width: 576px) {
    @container (width <= 445px) {
        #asset-info-panel .imei,
        #alert-info-panel .imei {
            display: none;
        }
    }
    @container (width <= 376px) {
        #asset-info-panel #right-column,
        #alert-info-panel #right-column {
            display: none !important;
        }
        #asset-info-panel .imei,
        #alert-info-panel .imei {
            display: block;
        }
    }
    @container (width <= 244px) {
        #asset-info-panel .imei,
        #alert-info-panel .imei {
            display: none;
        }
    }
}

#asset-info-panel .location,
#alert-info-panel .location {
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 10px);
}

#alert-info-panel .alert-type {
    color: red;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

@media (min-width: 501px) and (max-width: 510px) {
    #asset-info-panel .imei,
    #alert-info-panel .imei {
        display: none;
    }
}

@media (max-width: 312px) {
    #asset-info-panel .imei,
    #alert-info-panel .imei {
        display: none;
    }
}

#asset-info-panel .form-switch .form-check-input,
#asset-info-panel .form-switch .form-check-label,
#alert-info-panel .form-switch .form-check-input,
#alert-info-panel .form-switch .form-check-label {
    cursor: pointer;
}

#asset-info-panel #right-column ul.rows,
#alert-info-panel #right-column ul.rows {
    margin-bottom: 5px;
}

#asset-info-panel .form-check .form-check-input,
#alert-info-panel .form-check .form-check-input {
    float: none;
}
#asset-info-panel .form-check .form-check-input:checked,
#alert-info-panel .form-check .form-check-input:checked {
    background-color: var(--colour-sky-blue);
    border-color: var(--colour-darker-sky-blue);
}
#asset-info-panel #errorMessage,
#alert-info-panel #errorMessage {
    text-align: right;
    font-size: .75rem !important;
}

#asset-info-panel .asset-info-title-bar,
#alert-info-panel .alert-info-title-bar,
#new-alert-panel .new-alert-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    background-color: var(--colour-sky-blue);
    clear: right;
    border-bottom: 1px solid var(--colour-dark-grey);
}

.asset-info-title-bar .icon,
.alert-info-title-bar .icon,
.new-alert-title-bar .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 35px;
    text-align: center;
    font-size: 1.1rem;
    fill: white;
    padding-left: 5px;
    height: 100%;
  }

.asset-info-title-bar .icon.live,
.alert-info-title-bar .icon.live {
    fill: #5c5;
  }

.asset-info-title-bar .icon.idling,
.alert-info-title-bar .icon.idling {
    fill: #ff7700;
}

.asset-info-title-bar .icon.stolen,
.alert-info-title-bar .icon.stolen {
    fill: #ff0000;
}

.asset-info-title-bar .name,
.alert-info-title-bar .name,
.new-alert-title-bar .name {
    flex: 1;
    padding-left: 5px;
    padding-right: 10px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.asset-info-title-bar .close-button,
.alert-info-title-bar .close-button,
.new-alert-title-bar .close-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-basis: 30px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}

.asset-info-title-bar .close-button i,
.alert-info-title-bar .close-button i,
.new-alert-title-bar .close-button i {
    color: white;
    opacity: 1.0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

.asset-info-title-bar .close-button i:hover,
.alert-info-title-bar .close-button i:hover,
.new-alert-title-bar .close-button i:hover {
    opacity: 0.5;
    cursor: pointer;
}

#asset-info-panel .columns,
#alert-info-panel .columns {
    display: flex;
    clear: left;
    width: 100%;
    height: auto;
    padding: 10px;
}

#asset-info-panel .columns #left-column,
#asset-info-panel .columns #middle-column,
#alert-info-panel .columns #left-column,
#alert-info-panel .columns #middle-column {
    flex: 1;
    height: calc(100% - 70px);
}
#asset-info-panel .columns #right-column,
#alert-info-panel .columns #right-column {
    height: calc(100% - 70px);
    text-align: right;
}
@media (max-width: 500px) {
    #asset-info-panel .columns #right-column,
    #alert-info-panel .columns #right-column {
        display: none;
    }
}

#asset-info-panel .columns input[type='button'],
#alert-info-panel .columns input[type='button'] {
    font-size: .65rem;
}

#alert-info-panel .buttons,
#new-alert-panel .buttons {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#new-alert-panel .buttons {
    gap: 5px;
}

@media (max-width: 991px) {
    #alert-info-panel .buttons {
        display: none;
    }
}

/*
@container (width <= 767px) {
    #alert-info-panel .buttons {
        display: none;
    }
}
*/

@container (width <= 500px) {
    #alert-info-panel .columns #right-column {
        display: none;
    }
}

#asset-info-panel ul#journey-history-panel,
#alert-info-panel ul#journey-history-panel {
    display: table;
    list-style: none;
}
#asset-info-panel ul#journey-history-panel li,
#alert-info-panel ul#journey-history-panel li {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    border-right: 5px solid white;
}
#asset-info-panel ul#journey-history-panel li:last-child,
#alert-info-panel ul#journey-history-panel li:last-child {
    border-right: 0px;
}
ul#journey-history-panel input[type='date'] {
    width: 105px;
}

#asset-info-panel .columns ul.rows,
#alert-info-panel .columns ul.rows {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
} 

#asset-info-panel .columns #left-column ul.rows li,
#alert-info-panel .columns #left-column ul.rows li {
    align-self: flex-start;
}
#asset-info-panel .columns #right-column ul.rows li,
#alert-info-panel .columns #right-column ul.rows li {
    align-self: flex-end;
}

#asset-info-panel .columns #left-column,
#alert-info-panel .columns #left-column {
    overflow: hidden;
}

#asset-info-panel .columns ul.rows li,
#alert-info-panel .columns ul.rows li {
    flex: 1;
    margin-bottom: 5px;
    font-size: .75rem;
}
@media (max-width: 767px) {
    #asset-info-panel .columns ul.rows li,
    #alert-info-panel .columns ul.rows li {
        font-size: .7rem;
    }
}

#asset-info-panel .columns ul.rows li:last-child,
#alert-info-panel .columns ul.rows li:last-child {
    margin-bottom: 0px;
}

#asset-info-panel .columns ul.rows li i,
#alert-info-panel .columns ul.rows li i {
    margin-right: 5px;
}

#asset-info-panel .reg-plate,
#alert-info-panel .reg-plate {
    padding: 2px;
    margin-left: 10px;
    text-transform: uppercase;
    background-color: white;
    color: black;
    border-radius: 5px;
    display: inline;
    border: 2px solid black;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: .75rem;
}

#asset-info-panel #actions-panel-mobile,
#alert-info-panel #actions-panel-mobile {
    font-size: .75rem;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-top: 1px solid var(--colour-light-grey);
    margin-top: 10px;
    padding-top: 10px;
    flex-wrap: wrap;
}

.btn.btn-primary {
    background-color: var(--colour-sky-blue);
    border: 1px solid #2a2e31;
}
.btn.btn-primary:hover {
    background-color: var(--colour-darker-sky-blue);
}

input[type='checkbox'] {
    accent-color: var(--colour-sky-blue);
}

.fadeIn {
    transition: opacity 2s linear;
    opacity: 1;
}

.fadeOut {
    transition: opacity 2s linear;
    opacity: 0;
}

#map-panels {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    gap: 0px;
}

.hidden {
    display: none !important;
}

@media (max-width: 575px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-lg {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-xl {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .top-icon-panel {
        display: none;
    }
    .logo {
        display: none;
    }
}

@media (min-width: 768px) {
    .logo-mb {
        display: none;
    }
}

.right-panel .content {
    padding: 10px;
    font-size: 0.85rem;
}

#admin-info-panel,
#admin-subscriptions-panel,
#reports-info-panel {
    position: absolute;
    left: 25px;
    right: 25px;
    height: 0%;
    bottom: 0px;
    font-size: 0.85rem;
    color: var(--colour-dark-grey);
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top: 4px solid var(--colour-darker-sky-blue);
    border-left: 4px solid var(--colour-darker-sky-blue);
    border-right: 4px solid var(--colour-darker-sky-blue);
    opacity: 0;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
}
#admin-info-panel,
#reports-info-panel {
    z-index: 100;
}
#admin-subscriptions-panel {
    z-index: 101;
}

#admin-info-panel .admin-info-title-bar,
#reports-info-panel .reports-info-title-bar,
#admin-subscriptions-panel .admin-subscriptions-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    background-color: var(--colour-sky-blue);
    clear: right;
    border-bottom: 1px solid var(--colour-dark-grey);
}
.admin-info-title-bar .name,
.reports-info-title-bar .name,
.admin-subscriptions-title-bar .name {
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-info-title-bar .close-button,
.reports-info-title-bar .close-button,
.admin-subscriptions-title-bar .close-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-basis: 30px;
    font-size: .85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}

.admin-info-title-bar .close-button i,
.reports-info-title-bar .close-button i,
.admin-subscriptions-title-bar .close-button i {
    color: white;
    opacity: 1.0;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0s;
}

.admin-info-title-bar .close-button i:hover,
.reports-info-title-bar .close-button i:hover,
.admin-subscriptions-title-bar .close-button i:hover {
    opacity: 0.5;
    cursor: pointer;
}

.admin-info-content,
.reports-info-content,
.admin-subscriptions-content {
    padding: 10px;
    font-size: .75rem;
    position: relative;
}
@media (max-width: 1199px) {
    .admin-info-content,
    .reports-info-content,
    .admin-subscriptions-content {
        font-size: .725rem;
    }
}
@media (max-width: 991px) {
    .admin-info-content,
    .reports-info-content,
    .admin-subscriptions-content {
        font-size: .7rem;
    }
}
@media (max-width: 767px) {
    .admin-info-content,
    .reports-info-content,
    .admin-subscriptions-content {
        font-size: .675rem;
    }
}
@media (max-width: 575px) {
    .admin-info-content,
    .reports-info-content,
    .admin-subscriptions-content {
        font-size: .65rem;
    }
}

.admin-info-content .row,
.reports-info-content .row,
.admin-subscriptions-content .row {
    margin-left: -10px;
    margin-right: -10px;
}

.admin-info-buttons,
.reports-info-buttons,
.admin-subscriptions-buttons {
    position: absolute;
    height: auto;
    width: auto;
    bottom: 10px;
    right: 10px;
}

#admin-info-panel .has-tab-menu .tab-menu-content,
#reports-info-panel .has-tab-menu .tab-menu-content {
    overflow-x: hidden;
}

#admin-info-panel .has-tab-menu .admin-info-buttons {
    bottom: 0px;
    right: 0px;
    z-index: 5;
}

.reports-info-button-wrapper {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.reports-info-button-wrapper-inner {
    margin: 0px auto;
}

.admin-form .row:first-child {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

.admin-form.geofence-form .row:first-child {
    max-height: unset;
}

#createSubscriptionForm .row:first-child {
    max-height: 100%;
    align-content: flex-start;
}

.admin-form label,
.report-form label {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}
@media (max-width: 767px) {
    .admin-form label,
    .report-form label {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

#createSubscriptionForm .row:first-child > * {
    margin-bottom: 5px;
  }

#createSubscriptionForm label,
.subscription-form label {
    width: 180px;
}

.admin-form hr,
.report-form hr {
    margin: 10px 0;
}

.admin-form input[type='text'],
.admin-form input[type='number'],
.admin-form input[type='phone'],
.admin-form input[type='password'],
.admin-form input[type='date'],
.admin-form input[type='time'],
.admin-form select,
.admin-form textarea {
    width: 100%;
    height: 24px;
}

@media (min-width: 992px) {
    #createSubscriptionForm.admin-form input[type='text'],
    #createSubscriptionForm.admin-form input[type='number'],
    #createSubscriptionForm.admin-form input[type='phone'],
    #createSubscriptionForm.admin-form input[type='password'],
    #createSubscriptionForm.admin-form input[type='date'],
    #createSubscriptionForm.admin-form select,
    #createSubscriptionForm.admin-form textarea {
        width: calc(100% - 185px);
    }
    .subscription-form.admin-form input[type='text'],
    .subscription-form.admin-form input[type='number'],
    .subscription-form.admin-form input[type='phone'],
    .subscription-form.admin-form input[type='password'],
    .subscription-form.admin-form input[type='date'],
    .subscription-form.admin-form select,
    .subscription-form.admin-form textarea {
        width: calc(100% - 185px);
    }
}

#createSubscriptionForm #payment-message {
    margin-top: 10px;
    font-size: 0.8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold; 
    min-height: 1.5em; 
}

.admin-subscriptions-content,
#createSubscriptionForm {
    height: 100%;
}

#btnCreateSubscriptionWrapper,
#btnUpdateSubscriptionWrapper {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 5px;
    height: 40px;
}

#createSubscriptionForm #spnCreateSubscription,
#updateSubscriptionForm #spnUpdateSubscription {
    background-image: url('/assets/images/spinner5.gif');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    flex-basis: 30px; 
    height: 30px;
    display: none;
}

#stripeErrorMessage {
    font-size: 0.8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold; 
}

#newAssetSubscriptionMessage {
    font-size: 0.8rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.geofence-form .geofence-details .row > label,
.geofence-form .geofence-details .row > div
 {
    padding-left: 0px;
}

#geofenceLocationSearchWrapper {
    display: flex;
    gap: 5px;
    align-items: start;
    justify-content: center;
}

#geofenceLocationWrapper {
    flex: 1;
}
#geofenceLocationSearchWrapper input[type='text'] {
    height: 24px;
}
#geofenceLocationSearchWrapper input[type='button'] {
    height: 24px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#geofenceMessage {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#btnGetReportWrapper {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 5px;
    height: 35px;
}

@media (min-width: 1200px) {
    #btnGetReportWrapper {
        width: 80px;
    }
}

#btnGetReportWrapper .btn-go {
    height: 100%;
}

#reportForm #selectedAsset {
    display: flex;
    gap: 5px;
    align-items: center;
}

#reportForm #selectedType {
    display: flex;
    gap: 5px;
    align-items: center;
}

#reportForm #selectedAsset .btn.dropdown-toggle {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#reportForm #selectedAsset .dropdown-toggle:hover::after {
    color: var(--colour-sky-blue)!important;
}

#reportForm #selectedType .dropdown-toggle:hover::after {
    color: var(--colour-sky-blue)!important;
}

#reportForm #spnGetReport {
    background-image: url('/assets/images/spinner5.gif');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    flex-basis: 30px;
    height: 30px;
    display: none;
  }

@media (max-width: 767px) {
    .admin-form input[type='text'],
    .admin-form input[type='number'],
    .admin-form input[type='phone'],
    .admin-form input[type='password'],
    .admin-form input[type='date'],
    .admin-form input[type='time'],
    .admin-form select,
    .report-form input[type='text'],
    .report-form input[type='number'],
    .report-form input[type='phone'],
    .report-form input[type='password'],
    .report-form input[type='date'],
    .report-form input[type='time'],
    .report-form select  {
        height: 20px;
    }
}

.admin-form .form-group,
.report-form .form-group {
    margin-bottom: 5px;
}
.report-form .form-group label {
    margin-right: 5px;
}
.report-form .form-group {
    display: inline-block;
    margin-right: 5px;
}

@media (max-width: 1199px) {
    .report-form #selectedAsset {
        width: 100%;
        gap: 0px! important;
    }
    .report-form #selectedType {
        width: 100%;
        gap: 0px! important;
    }
    .report-form #selectedAsset .btn-go {
        margin-left: 5px;
        flex-basis: 30px;
        flex: 0;
    }
    .report-form .form-group {
        width: 100%;
        display: flex;
        align-items: center;
        margin-right: 0px;
    }
    .report-form .form-group label {
        flex-basis: 90px;
    }
    .report-form .form-group input,
    .report-form .form-group button {
        flex: 1;
    }
    .report-form .form-group #startTime,
    .report-form .form-group #endTime {
        margin-left: 5px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .report-form .form-group {
        width: 60%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .report-form .form-group {
        width: 50%;
    }
}

label.required:after {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    font-size: 0.5rem;
    margin-left: 5px;
    /* Set the Unicode value for the "fa-asterisk" icon */
    content: '\2a';
}

@media (max-width: 767px) {
    .left-panel {
        box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
        position: absolute;
        background-color: white;
        width: 100%;
        z-index: 100;
        height: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .side-menu-header ul {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .left-panel.admin,
    .left-panel.reports {
        position: relative;
        box-shadow: 5px 5px 5px rgba(50, 50, 50, 0.25);
    }
    .left-panel.admin.border-right,
    .left-panel.reports.border-right {
        border-right: 1px solid var(--colour-dark-grey);
    }
}

.toggle-form {
    cursor: pointer;
}

.toggle-form:hover {
    color: var(--colour-sky-blue);
}

#reportPanel {
    margin-top: 20px;
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--colour-dark-grey);
    padding-top: 10px;
}

#reportPanel.detailed-data,
#reportPanel.asset-listing,
#reportPanel.alert-history {
    padding-top: 0px;
}

#reportPanel .report-panel-left {
    flex-basis: 480px;
    overflow-y: auto;
    padding-right: 10px;
}

#reportPanel .report-panel-right {
    flex: 1;
}

@media (max-width: 767px) {
    #reportPanel {
        flex-direction: column-reverse;
    }
    #reportPanel.detailed-data,
    #reportPanel.asset-listing,
    #reportPanel.alert-history {
        flex-direction: column;
    }
    #reportPanel .report-panel-left {
        flex: 1;
        padding-right: 0px;
    }
    #reportPanel .report-panel-right {
        flex: 1;
    }
}

#reportPanel .report-panel-left.detailed-data,
#reportPanel .report-panel-left.asset-listing,
#reportPanel .report-panel-left.alert-history {
    flex-basis: unset;
    flex: 1;
    padding-right: 0px;
}

#reportPanel .report-panel-right.detailed-data,
#reportPanel .report-panel-right.asset-listing,
#reportPanel .report-panel-right.alert-history {
    flex: unset;
    flex-basis: 0px;
    border-left: 1px solid var(--colour-dark-grey);
    border-top: 0px;
    padding: 10px;
    display: none;
    opacity: 0;
    position: relative;
    max-height: 100%;
    font-size: 0.8rem;
    overflow: hidden;
}
@media (max-width: 767px) {
    #reportPanel .report-panel-right.detailed-data,
    #reportPanel .report-panel-right.asset-listing,
    #reportPanel .report-panel-right.alert-history  {
        border-left: 0px;
        border-top: 1px solid var(--colour-dark-grey);
        max-height: 40%;
    }
}
#reportPanel .report-panel-right.detailed-data .close-btn,
#reportPanel .report-panel-right.alert-history .close-btn {
    position: absolute;
    top: 5px;
    right: 0px;
    font-size: 0.85rem;
    color: var(--colour-dark-grey);
    cursor: pointer;
    transition-property: color;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
#reportPanel .report-panel-right.detailed-data .close-btn:hover,
#reportPanel .report-panel-right.alert-history .close-btn:hover  {
    color: var(--colour-sky-blue);
}

#reportPanel .report-panel-right.detailed-data .info-filter,
#reportPanel .report-panel-right.alert-history .info-filter {
    width: 100%;
    margin-bottom: 10px;
}
#reportPanel .report-panel-right.detailed-data .info-filter .title,
#reportPanel .report-panel-right.alert-history .info-filter .title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#reportPanel .report-panel-right.detailed-data #infoData,
#reportPanel .report-panel-right.alert-history #infoData {
    overflow-y: auto;
}

#reportPanel .report-panel-right.detailed-data #infoData .info-row,
#reportPanel .report-panel-right.alert-history #infoData .info-row {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--colour-lighter-grey);
    margin-bottom: 10px;
}
#reportPanel .report-panel-right.detailed-data #infoData .info-row:last-child,
#reportPanel .report-panel-right.alert-history #infoData .info-row:last-child {
    border-bottom: 0px;
    margin-bottom: 0px;
}

#reportPanel .report-panel-right.detailed-data .info-filter #txtInfoFilter,
#reportPanel .report-panel-right.alert-history .info-filter #txtInfoFilter {
    width: 100%;
}

#reportPanel #reportData .stat-item {
    display: flex;
    align-items: center;
}

#reportPanel #reportData .stat-item,
#reportPanel #reportData .show-details {
    cursor: pointer;
}
#reportPanel #reportData .show-details {
    clear: both;
}
#reportPanel #reportData .show-details i:hover {
    color: var(--colour-sky-blue);
}

#reportPanel #reportMap {
    height: 100%;
}

/* === Detailed Data Report styles === */

#reportPanel #reportData .detailed-data-item {
    padding: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--colour-dark-grey);
    /*cursor: pointer;*/
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: transparent;
    position: relative;
    /*overflow-x: auto;*/
}

#reportPanel #reportData .detailed-data-item:last-child {
    margin-bottom: 0px;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    border-bottom: 1px solid var(--colour-dark-grey);
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--colour-dark-grey);
    flex-wrap: nowrap;
    width: fit-content;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    flex: 1;
    flex-basis: 100%;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-row,
#reportPanel #reportData .detailed-data-item .detailed-data-item-row {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--colour-lighter-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: inherit;
    width: fit-content;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-row {
    flex-basis: 100%;
    border-bottom: 0px;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-row:nth-child(even) {
    background-color: var(--colour-off-white);
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-row:hover {
    background-color: var(--colour-lighter-grey);
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-row.selected {
    background-color: var(--colour-sky-blue);
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-row:last-child {
    margin-bottom: 0px;
    border-bottom: 0px;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column {
    padding: 0px 5px 0px 5px;
    /*margin-top: 5px;*/
    border-right: 1px solid var(--colour-lighter-grey);
    font-size: 0.8rem;
    flex: 1;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.datetime,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.datetime {
    flex-basis: 130px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.event-id,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.event-id {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.ignition,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.ignition {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.movement,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.movement {
    flex-basis: 70px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.speed,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.speed {
    flex-basis: 90px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.heading,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.heading {
    flex-basis: 80px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.latitude,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.latitude {
    flex-basis: 80px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.longitude,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.longitude {
    flex-basis: 90px;
    flex-grow: 0;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.ignition,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.ignition {
        flex-basis: 30px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.movement,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.movement {
        flex-basis: 35px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.event-id,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.event-id {
        flex-basis: 45px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.heading,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.heading,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.latitude,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.latitude,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.longitude,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.longitude {
        flex-basis: 55px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.speed,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.speed {
        flex-basis: 70px;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.other,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.other {
    line-height: 0.8rem;
    flex-basis: 1000px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.other {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.location,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.location {
    line-height: 0.8rem;
    flex-basis: 700px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.location {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column:last-child,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column:last-child {
    border-right: 0px;
}

.detailed-data-item-row.selected .detailed-data-item-column {
    color: white;
}


/* === Asset Listing Report styles === */

#reportPanel #reportData .asset-listing-item {
    padding: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--colour-dark-grey);
    /*cursor: pointer;*/
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: transparent;
    position: relative;
    /*overflow-x: auto;*/
}

#reportPanel #reportData .asset-listing-item:last-child {
    margin-bottom: 0px;
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    border-bottom: 1px solid var(--colour-dark-grey);
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--colour-dark-grey);
    flex-wrap: nowrap;
    width: fit-content;
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    flex: 1;
    flex-basis: 100%;
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-header-row,
#reportPanel #reportData .asset-listing-item .asset-listing-item-row {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--colour-lighter-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: inherit;
    width: fit-content;
}
#reportPanel #reportData .asset-listing-item .asset-listing-item-header-row {
    flex-basis: 100%;
    border-bottom: 0px;
}
#reportPanel #reportData .asset-listing-item .asset-listing-item-row:nth-child(even) {
    background-color: var(--colour-off-white);
}
#reportPanel #reportData .asset-listing-item .asset-listing-item-row:hover {
    background-color: var(--colour-lighter-grey);
}
#reportPanel #reportData .asset-listing-item .asset-listing-item-row.selected {
    background-color: var(--colour-sky-blue);
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-row:last-child {
    margin-bottom: 0px;
    border-bottom: 0px;
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-header-column,
#reportPanel #reportData .asset-listing-item .asset-listing-item-column {
    padding: 0px 5px 0px 5px;
    /*margin-top: 5px;*/
    border-right: 1px solid var(--colour-lighter-grey);
    font-size: 0.8rem;
    flex: 1;
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-header-column {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-header-column.location,
#reportPanel #reportData .asset-listing-item .asset-listing-item-column.location {
    line-height: 0.8rem;
    flex-basis: 700px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .asset-listing-item .asset-listing-item-column.location {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#reportPanel #reportData .asset-listing-item .asset-listing-item-header-column:last-child,
#reportPanel #reportData .asset-listing-item .asset-listing-item-column:last-child {
    border-right: 0px;
}

.asset-listing-item-row.selected .asset-listing-item-column {
    color: white;
}

/* === Alert History Report styles === */

#reportPanel #reportData .alert-history-item {
    padding: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--colour-dark-grey);
    /*cursor: pointer;*/
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: transparent;
    position: relative;
    overflow-x: auto;
}

#reportPanel #reportData .alert-history-item:last-child {
    margin-bottom: 0px;
}

#reportPanel #reportData .alert-history-item .alert-history-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    border-bottom: 1px solid var(--colour-dark-grey);
}

#reportPanel #reportData .alert-history-item .alert-history-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--colour-dark-grey);
    flex-wrap: nowrap;
    width: fit-content;
}

#reportPanel #reportData .alert-history-item .alert-history-item-title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    flex: 1;
    flex-basis: 100%;
}

#reportPanel #reportData .alert-history-item .alert-history-item-header-row,
#reportPanel #reportData .alert-history-item .alert-history-item-row {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--colour-lighter-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: inherit;
    width: fit-content;
}
#reportPanel #reportData .alert-history-item .alert-history-item-header-row {
    flex-basis: 100%;
    border-bottom: 0px;
}
#reportPanel #reportData .alert-history-item .alert-history-item-row:nth-child(even) {
    background-color: var(--colour-off-white);
}
#reportPanel #reportData .alert-history-item .alert-history-item-row:hover {
    background-color: var(--colour-lighter-grey);
}
#reportPanel #reportData .alert-history-item .alert-history-item-row.selected {
    background-color: var(--colour-sky-blue);
}

#reportPanel #reportData .alert-history-item .alert-history-item-row:last-child {
    margin-bottom: 0px;
    border-bottom: 0px;
}

#reportPanel #reportData .alert-history-item .alert-history-item-header-column,
#reportPanel #reportData .alert-history-item .alert-history-item-column {
    padding: 0px 5px 0px 5px;
    /*margin-top: 5px;*/
    border-right: 1px solid var(--colour-lighter-grey);
    font-size: 0.8rem;
    flex: 1;
}
#reportPanel #reportData .alert-history-item .alert-history-item-row.not-viewed .alert-history-item-column {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#reportPanel #reportData .alert-history-item .alert-history-item-header-column {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#reportPanel #reportData .alert-history-item .alert-history-item-header-column.datetime,
#reportPanel #reportData .alert-history-item .alert-history-item-column.datetime {
    flex-basis: 140px;
    flex-grow: 0;
    flex-shrink: 0;
}

#reportPanel #reportData .alert-history-item .alert-history-item-header-column.location,
#reportPanel #reportData .alert-history-item .alert-history-item-column.location {
    line-height: 0.8rem;
    flex-basis: 800px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .alert-history-item .alert-history-item-column.location {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#reportPanel #reportData .alert-history-item .alert-history-item-header-column:last-child,
#reportPanel #reportData .alert-history-item .alert-history-item-column:last-child {
    border-right: 0px;
}

.alert-history-item-row.selected .alert-history-item-column {
    color: white;
}

/* === Monitoring Alert History Report styles */

.monitoring-alert-history #tabMenuContact .content .row,
.monitoring-alert-history #tabMenuNotes .content .row {
    margin-bottom: 5px;
}

.monitoring-alert-history #tabMenuContact .content .row:last-child,
.monitoring-alert-history #tabMenuNotes .content .row:last-child {
    margin-bottom: 0px;
}

.monitoring-alert-history #tabMenuContact input[type='text'],
.monitoring-alert-history #tabMenuContact select,
.monitoring-alert-history #tabMenuContact textarea,
.monitoring-alert-history #tabMenuNotes input[type='text'],
.monitoring-alert-history #tabMenuNotes select,
.monitoring-alert-history #tabMenuNotes textarea {
    width: 100%;
}

.monitoring-alert-history #tabMenuContact .content label, 
.monitoring-alert-history #tabMenuNotes .content label {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}


.monitoring-alert-history #previousNotes {
    border:1px solid var(--colour-dark-grey);
    /*min-height: 100px;
    max-height: 150px;
    */
    /*height: 50px;*/
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
}

/*
@media (min-width: 768px) and (min-height: 800px) {
    .monitoring-alert-history #previousNotes {
        height: 295px;
    }
}
*/

.monitoring-alert-history #previousNotes .note {
    margin-bottom: 5px;
}

.monitoring-alert-history #previousNotes .note .text {
    font-size: 0.85rem;
}

.monitoring-alert-history #previousNotes .note .header {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 0.7rem;
    text-decoration: underline;
}

.reports-info-button-wrapper.monitoring-alert-history {
    margin-top:10px;
    margin-bottom: 0px;
}

/* === Detailed Data Report styles === */

#reportPanel #reportData .detailed-data-item {
    padding: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--colour-dark-grey);
    /*cursor: pointer;*/
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: transparent;
    position: relative;
    /*overflow-x: auto;*/
}

#reportPanel #reportData .detailed-data-item:last-child {
    margin-bottom: 0px;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    border-bottom: 1px solid var(--colour-dark-grey);
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--colour-dark-grey);
    flex-wrap: nowrap;
    width: fit-content;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    flex: 1;
    flex-basis: 100%;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-row,
#reportPanel #reportData .detailed-data-item .detailed-data-item-row {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--colour-lighter-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: inherit;
    width: fit-content;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-row {
    flex-basis: 100%;
    border-bottom: 0px;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-row:nth-child(even) {
    background-color: var(--colour-off-white);
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-row:hover {
    background-color: var(--colour-lighter-grey);
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-row.selected {
    background-color: var(--colour-sky-blue);
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-row:last-child {
    margin-bottom: 0px;
    border-bottom: 0px;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column {
    padding: 0px 5px 0px 5px;
    /*margin-top: 5px;*/
    border-right: 1px solid var(--colour-lighter-grey);
    font-size: 0.8rem;
    flex: 1;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.datetime,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.datetime {
    flex-basis: 130px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.event-id,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.event-id {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.ignition,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.ignition {
    flex-basis: 60px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.movement,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.movement {
    flex-basis: 70px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.speed,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.speed {
    flex-basis: 90px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.heading,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.heading {
    flex-basis: 80px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.latitude,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.latitude {
    flex-basis: 80px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.longitude,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.longitude {
    flex-basis: 90px;
    flex-grow: 0;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.ignition,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.ignition {
        flex-basis: 30px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.movement,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.movement {
        flex-basis: 35px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.event-id,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.event-id {
        flex-basis: 45px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.heading,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.heading,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.latitude,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.latitude,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.longitude,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.longitude {
        flex-basis: 55px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    #reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.speed,
    #reportPanel #reportData .detailed-data-item .detailed-data-item-column.speed {
        flex-basis: 70px;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.other,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.other {
    line-height: 0.8rem;
    flex-basis: 1000px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.other {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column.location,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.location {
    line-height: 0.8rem;
    flex-basis: 700px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .detailed-data-item .detailed-data-item-column.location {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#reportPanel #reportData .detailed-data-item .detailed-data-item-header-column:last-child,
#reportPanel #reportData .detailed-data-item .detailed-data-item-column:last-child {
    border-right: 0px;
}

.detailed-data-item-row.selected .detailed-data-item-column {
    color: white;
}

/* === Journey Report styles === */

#reportPanel #reportData .journey-item {
    padding: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--colour-dark-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: transparent;
    position: relative;
}
#reportPanel #reportData .journey-item:hover {
    background-color: var(--colour-lightest-grey);
}

#reportPanel #reportData .journey-item.selected {
    border: 2px solid var(--colour-dark-grey);
}

#reportPanel #reportData .journey-item:last-child {
    margin-bottom: 0px;
}

#reportPanel #reportData .journey-item .journey-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    border-bottom: 1px solid var(--colour-dark-grey);
}
#reportPanel #reportData .journey-item:hover .journey-item-header {
    background-color: var(--colour-lightest-grey);
}

#reportPanel #reportData .journey-item .journey-item-footer {
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 30px;
    height: auto;
    display: flex;
}

#reportPanel #reportData .journey-item .journey-item-footer .stat-item {
    flex-basis: 70px;
}

#reportPanel #reportData .journey-item .journey-item-title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    flex: 1;
}

#reportPanel #reportData .journey-item .journey-item-stats {
    flex-basis: 60px;
}

#reportPanel #reportData .journey-item .journey-item-stats i,
#reportPanel #reportData .journey-item .journey-item-footer i {
    font-size: 0.85rem;
    margin-right: 5px;
}
#reportPanel #reportData .journey-item .time i {
    font-size: 1.5rem;
    margin-right: 5px;
    align-self: center;
    margin-top: -2px;
}
#reportPanel #reportData .journey-item .time.start i {
    color: var(--colour-green);
    margin-right: 1px;
}
#reportPanel #reportData .journey-item .time.normal i {
    color: var(--colour-dark-grey);
    font-size: 0.65rem;
}
#reportPanel #reportData .journey-item .time.end i {
    color: var(--colour-red);
    margin-right: 1px;
}
#reportPanel #reportData .journey-item .time i:hover {
    color: var(--colour-sky-blue);
}
#reportPanel #reportData .journey-item .journey-item-stats span {
    font-size: 0.9rem;
}
#reportPanel #reportData .journey-item .journey-item-footer span {
    font-size: 0.95rem;
}
#reportPanel #reportData .journey-item .time span {
    font-size: 0.8rem;
}

#reportPanel #reportData .journey-item .journey-item-row {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--colour-lighter-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: inherit;
    scroll-margin-top: 45px;
}

#reportPanel #reportData .journey-item .journey-item-row:hover {
    background-color: white;
}
#reportPanel #reportData .journey-item .journey-item-row.selected {
    background-color: var(--colour-lighter-grey);
}

#reportPanel #reportData .journey-item .journey-item-row:last-child {
    margin-bottom: 0px;
    border-bottom: 0px;
}

#reportPanel #reportData .journey-item .journey-item-column {
    padding: 0px 5px 0px 5px;
    margin-top: 5px;
    border-right: 1px solid var(--colour-lighter-grey);
    font-size: 0.8rem;
    flex: 1;
}

#reportPanel #reportData .journey-item .journey-item-column.time {
    flex-basis: 70px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .journey-item .journey-item-column.location {
    line-height: 0.8rem;
}
#reportPanel #reportData .journey-item .journey-item-column:nth-child(2),
#reportPanel #reportData .journey-item .journey-item-column:nth-child(3) {
    border-right: 0px;
}

#reportPanel #reportData .journey-item .journey-item-column.pills {
    flex-basis: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* === Movement Report styles === */

#reportPanel #reportData .movement-item {
    padding: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--colour-dark-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: transparent;
    position: relative;
}
#reportPanel #reportData .movement-item:hover {
    background-color: var(--colour-lightest-grey);
}

#reportPanel #reportData .movement-item.selected {
    border: 2px solid var(--colour-dark-grey);
}

#reportPanel #reportData .movement-item:last-child {
    margin-bottom: 0px;
}

#reportPanel #reportData .movement-item .movement-item-header {
    display: flex;
    height: auto;
    align-items: stretch;
    position: sticky;
    top: 0px;
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    border-bottom: 1px solid var(--colour-dark-grey);
}
#reportPanel #reportData .movement-item:hover .movement-item-header {
    background-color: var(--colour-lightest-grey);
}

#reportPanel #reportData .movement-item .movement-item-footer {
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 30px;
    height: auto;
    display: flex;
}

#reportPanel #reportData .movement-item .movement-item-footer .stat-item {
    flex-basis: 70px;
}

#reportPanel #reportData .movement-item .movement-item-title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    flex: 1;
}

#reportPanel #reportData .movement-item .movement-item-stats {
    flex-basis: 60px;
}

#reportPanel #reportData .movement-item .movement-item-stats i,
#reportPanel #reportData .movement-item .movement-item-footer i {
    font-size: 0.85rem;
    margin-right: 5px;
}
#reportPanel #reportData .movement-item .time i {
    font-size: 1.5rem;
    margin-right: 5px;
    align-self: center;
    margin-top: -2px;
}
#reportPanel #reportData .movement-item .time.start i {
    color: var(--colour-green);
    margin-right: 1px;
}
#reportPanel #reportData .movement-item .time.normal i {
    color: var(--colour-dark-grey);
    font-size: 0.65rem;
}
#reportPanel #reportData .movement-item .time.end i {
    color: var(--colour-red);
    margin-right: 1px;
}
#reportPanel #reportData .movement-item .time i:hover {
    color: var(--colour-sky-blue);
}
#reportPanel #reportData .movement-item .movement-item-stats span {
    font-size: 0.9rem;
}
#reportPanel #reportData .movement-item .movement-item-footer span {
    font-size: 0.95rem;
}
#reportPanel #reportData .movement-item .time span {
    font-size: 0.8rem;
}

#reportPanel #reportData .movement-item .movement-item-row {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--colour-lighter-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: inherit;
    scroll-margin-top: 45px;
}

#reportPanel #reportData .movement-item .movement-item-row:hover {
    background-color: white;
}
#reportPanel #reportData .movement-item .movement-item-row.selected {
    background-color: var(--colour-lighter-grey);
}

#reportPanel #reportData .movement-item .movement-item-row:last-child {
    margin-bottom: 0px;
    border-bottom: 0px;
}

#reportPanel #reportData .movement-item .movement-item-column {
    padding: 0px 5px 0px 5px;
    margin-top: 5px;
    border-right: 1px solid var(--colour-lighter-grey);
    font-size: 0.8rem;
    flex: 1;
}

#reportPanel #reportData .movement-item .movement-item-column.time {
    flex-basis: 70px;
    flex-grow: 0;
    flex-shrink: 0;
}
#reportPanel #reportData .movement-item .movement-item-column.location {
    line-height: 0.8rem;
}
#reportPanel #reportData .movement-item .movement-item-column:nth-child(2),
#reportPanel #reportData .movement-item .movement-item-column:nth-child(3) {
    border-right: 0px;
}

#reportPanel #reportData .movement-item .movement-item-column.pills {
    flex-basis: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* === admin alerts styles === */

.right-panel.alert .content {
    overflow: auto;
    height: 100%;
    padding-top: 0px !important;
}

.right-panel.alert h5.no-mb {
    margin-bottom: 0px;
}

.alert-assignments-search-wrapper,
.location-assignments-search-wrapper {
    margin-left: 10px;
    margin-right: 10px;
    /*margin: 0 auto;*/
    width: calc(100% - 20px);
    height: 40px;
    margin-bottom: 10px;
}

.alert-assignments-search-wrapper div,
.location-assignments-search-wrapper div {
    /*width: 100%;*/
    height: 100%;
    display: flex;
    gap: 5px;
    align-items: stretch;
    justify-content: start;
}

@media (min-width: 1200px) {
    .alert-assignments-search-wrapper,
    .location-assignments-search-wrapper,
    .alert-assignments-table,
    .location-assignments-table {
        width: 900px;
    }
}

.alert-assignments-table .form-check .form-check-input:checked,
.location-assignments-table .form-check .form-check-input:checked,
#alertNotificationsPanel .form-check .form-check-input:checked {
    background-color: var(--colour-sky-blue);
    border-color: var(--colour-darker-sky-blue);
}

.alert-assignments-search-wrapper div div:nth-child(1),
.location-assignments-search-wrapper div div:nth-child(1) {
    flex: 1;
}

.alert-assignments-search-wrapper input[type="text"],
.location-assignments-search-wrapper input[type="text"] {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.alert-assignments-search-wrapper .tab-menu-header,
.location-assignments-search-wrapper .tab-menu-header {
    padding: 0px;
    height: 100%;
    min-width: unset;
}

.alert-assignments-table,
.location-assignments-table {
    margin-left: 10px;
    margin-right: 10px;
    /*padding: 5px;*/
    margin-bottom: 15px;
    /*border-bottom: 1px solid var(--colour-dark-grey);*/
    /*cursor: pointer;*/
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: transparent;
    position: relative;
    /*overflow-x: auto;*/
    height: 100%;
}

@media (max-width: 767px) {
    .alert-assignments-search-wrapper,
    .location-assignments-search-wrapper,
    .alert-assignments-table,
    .location-assignments-table {
        margin-left: 15px;
        margin-right: 15px;
    }
    .alert-assignments-search-wrapper,
    .location-assignments-search-wrapper {
        width: calc(100% - 30px);
    }
}

.alert-assignments-table .alert-assignments-table-header,
.location-assignments-table .location-assignments-table-header {
    display: flex;
    height: auto;
    align-items: stretch;
    /*position: sticky;
    top: 0px;*/
    background-color: white;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    z-index: 97;
    border-bottom: 1px solid var(--colour-dark-grey);
    padding-top: 5px;
    padding-bottom: 5px;
    flex-wrap: nowrap;
    width: 100%;
}

.alert-assignments-table .alert-assignments-table-title,
.location-assignments-table .location-assignments-table-title {
    font-size: 0.85rem;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    flex: 1;
    flex-basis: 100%;
}

.alert-assignments-table .alert-assignments-table-header-row,
.alert-assignments-table .alert-assignments-table-row,
.location-assignments-table .location-assignments-table-header-row,
.location-assignments-table .location-assignments-table-row {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--colour-lighter-grey);
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 0.5s;
    transition-delay: 0s;
    background-color: inherit;
    width: 100%;
}
.alert-assignments-table .alert-assignments-table-header-row,
.location-assignments-table .location-assignments-table-header-row {
    flex-basis: 100%;
    border-bottom: 0px;
}
.alert-assignments-table .alert-assignments-table-row:nth-child(even),
.location-assignments-table .location-assignments-table-row:nth-child(even) {
    background-color: var(--colour-off-white);
}
.alert-assignments-table .alert-assignments-table-row:hover,
.location-assignments-table .location-assignments-table-row:hover {
    background-color: var(--colour-lighter-grey);
}
.alert-assignments-table .alert-assignments-table-row.selected,
.location-assignments-table .location-assignments-table-row.selected {
    background-color: var(--colour-sky-blue);
}

.alert-assignments-table .alert-assignments-table-row:last-child,
.location-assignments-table .location-assignments-table-row:last-child {
    margin-bottom: 0px;
    /*border-bottom: 0px;*/
    border-bottom: 1px solid var(--colour-dark-grey);
}

.alert-assignments-table .alert-assignments-table-header-column,
.alert-assignments-table .alert-assignments-table-column,
.location-assignments-table .location-assignments-table-header-column,
.location-assignments-table .location-assignments-table-column {
    padding: 0px 5px 0px 5px;
    /*margin-top: 5px;*/
    border-right: 1px solid var(--colour-lighter-grey);
    font-size: 0.8rem;
    flex: 1;
}

.alert-assignments-table .alert-assignments-table-header-column,
.location-assignments-table .location-assignments-table-header-column {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.alert-assignments-table .alert-assignments-table-header-column:last-child,
.alert-assignments-table .alert-assignments-table-column:last-child,
.location-assignments-table .location-assignments-table-header-column:last-child,
.location-assignments-table .location-assignments-table-column:last-child {
    border-right: 0px;
}

.alert-assignments-table-row.selected .alert-assignments-table-column,
.location-assignments-table-row.selected .location-assignments-table-column {
    color: white;
}

.alert-assignments-table-footer,
.location-assignments-table-footer {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#tabAlertAssignments .tab-menu,
#tabLocationAssignments .tab-menu {
    padding: 0px;
}

#tabAlertAssignments .tab-menu-content,
#tabLocationAssignments .tab-menu-content {
    width: 100%;
    height: calc(100% - 50px);
}

@media (min-width: 1200px) {
    #tabAlertAssignments .tab-menu-content,
    #tabLocationAssignments .tab-menu-content {
        width: 900px;
        margin: 10px auto 0px auto;
    }
}

#alertAssignmentResults .alert-assignments-table-body,
#locationAssignmentResults .location-assignments-table-body {
    max-height: 250px;
    overflow: auto;
}

.alert-assignments-search-wrapper.disabled,
.location-assignments-search-wrapper.disabled,
#alertAssignmentResults.disabled,
#locationAssignmentResults.disabled {
    opacity: 0.5;
}

.alert-assignments-search-wrapper.disabled input[type='text'],
.location-assignments-search-wrapper.disabled input[type='text'],
.alert-assignments-search-wrapper.disabled .tab-menu-header ul.disabled li,
.location-assignments-search-wrapper.disabled .tab-menu-header ul.disabled li,
#alertBehaviour:disabled {
    cursor: not-allowed;
}

.right-panel.alert #selectAlertWrapper {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.right-panel.alert #selectAlert,
.right-panel.alert #alertName {
    margin-left: 10px;
    font-size: 1.25rem;
    flex-basis: 300px;
    padding: 5px;
    padding-block: unset;
    padding-inline: unset;
    height: 30px;
}

.right-panel.alert #selectAlertWrapper #spacer {
    flex: 1;
}

.right-panel.alert #alertBehaviour {
    width: 150px;
}

@media (max-width: 767px) {
    .right-panel.alert #alertBehaviour {
        width: 100%;
    }
    .right-panel.alert #selectAlert,
    .right-panel.alert #alertName {
        flex: 1;
    }
    .right-panel.alert #spacer {
        display: none;
        flex: 0;
        flex-basis: 0px;
    }
}

.right-panel.alert #alertHeader {
    position: sticky;
    top: 0px;
    background-color: white;
    z-index: 1;
}

#alertNotificationsPanel {
    /*overflow-x: hidden;*/
    margin-left: 10px;
}

#alertNotificationsPanel .notification-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--colour-dark-grey);
    padding-bottom: 10px;
    margin-bottom: 5px;
}

#alertNotificationsPanel .notification-row:last-child {
    border-bottom: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

#alertNotificationsPanel .notification-column {
    flex: 1;
}

#alertNotificationsPanel .enabled-wrapper {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
}

#alertNotificationsPanel label {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#alertNotificationsPanel .form-switch .form-check-input,
#alertNotificationsPanel .form-switch .form-check-label {
    cursor: pointer;
}

@media (max-width: 767px) {
    #alertNotificationsPanel {
        margin-left: 15px;
    }
}

@media (min-width: 768px) {
    #alertNotificationsPanel {
        max-width: 900px;
    }
    #alertNotificationsPanel .btn.dropdown-toggle {
        width: 125px;
    }
}

#exceptionsSuppressionsHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#exceptionsSuppressionsHeader h5 {
    flex: 1;
}

@media (min-width: 768px) {
    #exceptionsSuppressionsHeader {
        max-width: 910px;
    }
}

#addEditSuppressionPanel {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /*margin-left: 10px;*/
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid var(--colour-dark-grey);
    border-bottom: 1px solid var(--colour-dark-grey);
    flex-wrap: wrap;
}

#addEditSuppressionPanel #addEditSuppressionHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
#addEditSuppressionPanel #addEditSuppressionHeader h6 {
    flex: 1;
    margin-left: 0px !important;
}

#addEditSuppressionPanel #addEditSuppressionHeader #message {
    flex: 1;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: right;
}

@media (max-width: 767px) {
    #addEditSuppressionPanel {
        width: unset;
    }
    #addEditSuppressionPanel .suppression-column {
        margin-bottom: 5px;
    }
    #addEditSuppressionPanel #btnOK {
        flex-basis: 100%;
    }
}

#addEditSuppressionPanel label {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#addEditSuppressionPanel .suppression-column {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex: 1;
}

@media (max-width: 767px) {
    #addEditSuppressionPanel .suppression-column {
        flex-basis: 100% !important;
        flex: unset;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #addEditSuppressionPanel .suppression-column {
        flex-basis: calc(50% - 10px) !important;
        flex: unset;
    }
}

@media (max-width: 767px) {
    #addEditSuppressionPanel {
        /*margin-left: 15px;*/
        gap: 0px;
    }
}

@media (min-width: 768px) {
    #addEditSuppressionPanel {
        max-width: 900px;
    }
}

#addEditSuppressionPanel .suppression-column input[type='date'],
#addEditSuppressionPanel .suppression-column select {
    flex-basis: 100% !important;
    flex: unset;
}

#alertSuppressionsPanel {
    margin-left: 10px;
    max-width: 900px;
}
@media (max-width: 767px) {
    #alertSuppressionsPanel {
        margin-left: 15px;
        width: calc(100% - 15px);
    }
}

#alertSuppressionsPanel .suppression-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--colour-dark-grey);
    margin-bottom: 5px;
}

@media (max-width: 991px) {
    #alertSuppressionsPanel .suppression-row {
        flex-direction: column;
    }
}

#alertSuppressionsPanel .suppression-row:nth-last-child(1 of :not(.hidden)) {
    padding-bottom: 0px;
    border-bottom: 0px;
    margin-bottom: 0px;
}

#alertSuppressionsPanel .suppression-row .suppression-column {
    flex: 1;
}

#alertSuppressionsPanel .suppression-row .suppression-column:last-child {
    text-align: right;
}

#alertSuppressionsPanel .suppression-column.suppression-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

#alertSuppressionsPanel .suppression-column .suppression-type {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#addEditSuppressionPanel #suppressionStartDateWrapper,
#addEditSuppressionPanel #suppressionEndDateWrapper {
    position: relative;
}

#addEditSuppressionPanel #suppressionEndDateWrapper #suppressionEndDateEnabledWrapper {
    position: absolute;
    top: -2px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

#addEditSuppressionPanel #suppressionEndDateWrapper #suppressionEndDateEnabledWrapper .form-check .form-check-input:checked {
    background-color: var(--colour-sky-blue);
    border-color: var(--colour-darker-sky-blue);
}

/* ===============================
   = Common table column widths =
   ===============================*/

.table-column-narrow {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 25px !important;
}
.table-column-small {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 55px !important;
}
.table-column-medium {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 110px !important;
}
@media (max-width: 1199px) {
    .table-column-medium {
        flex-basis: 95px !important;
    }
}
@media (max-width: 991px) {
    .table-column-medium {
        flex-basis: 80px !important;
    }
}
@media (max-width: 767px) {
    .table-column-medium {
        flex-basis: 65px !important;
    }
}
@media (max-width: 575px) {
    .table-column-medium {
        flex-basis: 50px !important;
    }
}
.column-wide,
.table-column-wide {
    flex: 2 !important;
}

.fixed-30 {
    flex-basis: 30px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}
.fixed-40 {
    flex-basis: 40px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}
.fixed-50 {
   flex-basis: 50px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-60 {
   flex-basis: 60px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-70 {
   flex-basis: 70px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-80 {
   flex-basis: 80px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-90 {
   flex-basis: 90px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-100 {
   flex-basis: 100px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-110 {
   flex-basis: 110px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-120 {
   flex-basis: 120px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-130 {
   flex-basis: 130px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-140 {
   flex-basis: 140px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-150 {
   flex-basis: 150px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-160 {
   flex-basis: 160px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-170 {
   flex-basis: 170px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-180 {
   flex-basis: 180px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-190 {
   flex-basis: 190px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}
.fixed-200 {
   flex-basis: 200px !important;
   flex-grow: 0 !important;
   flex-shrink: 0 !important;
}

@media (max-width: 767px) {
   .mobile-fixed-30 {
       flex-basis: 30px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-35 {
       flex-basis: 35px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-40 {
       flex-basis: 40px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-45 {
       flex-basis: 45px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-50 {
       flex-basis: 50px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-55 {
       flex-basis: 55px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-60 {
       flex-basis: 60px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-65 {
       flex-basis: 65px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-70 {
       flex-basis: 70px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-75 {
       flex-basis: 75px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-80 {
       flex-basis: 80px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-85 {
       flex-basis: 85px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-90 {
       flex-basis: 90px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-95 {
       flex-basis: 95px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-100 {
       flex-basis: 100px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-105 {
       flex-basis: 105px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-110 {
       flex-basis: 110px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-115 {
       flex-basis: 115px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-120 {
       flex-basis: 120px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-125 {
       flex-basis: 125px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-130 {
       flex-basis: 130px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-135 {
       flex-basis: 135px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-140 {
       flex-basis: 140px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-145 {
       flex-basis: 145px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-150 {
       flex-basis: 150px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-155 {
       flex-basis: 155px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-160 {
       flex-basis: 160px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-165 {
       flex-basis: 165px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-170 {
       flex-basis: 170px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-175 {
       flex-basis: 175px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-180 {
       flex-basis: 180px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-185 {
       flex-basis: 185px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-190 {
       flex-basis: 190px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-195 {
       flex-basis: 195px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }
   .mobile-fixed-200 {
       flex-basis: 200px !important;
       flex-grow: 0 !important;
       flex-shrink: 0 !important;
   }    
}
   
/* =====================
   = Parsley JS styles =
   =====================*/

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #b94a48;
}

.parsley-errors-list {
  margin: 5px 0 5px;
  padding: 0;
  list-style-type: none;
  font-size: 0.7rem;
  line-height: 0.7rem;
  opacity: 0;
  color: #B94A48;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

/** Other error classes **/

#errorMessage {
    font-size: .9rem !important;
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #B94A48;
}

#uploadOutput .error {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #B94A48;
}

#uploadOutput .success {
    font-family: 'Tenorite Bold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}