@charset "UTF-8";

:root {
  /* hsl(from var(--color-primary) h s l / .7) */
	--color-primary: #337ab7; /* #44D62C */
	--color-primary-hover: hsl(from var(--color-primary) h s calc(l - 10));
	--color-primary-highlight: hsl(from var(--color-primary) h s calc(l + 10));
	--color-red: #c93030; /* #ff412f */
	--color-red-hover: hsl(from var(--color-red) h s calc(l - 10));
	--color-red-highlight: hsl(from var(--color-red) h s calc(l + 10));
	--color-green: #527b27; /* #44D62C */
	--color-green-hover: hsl(from var(--color-green) h s calc(l - 10));
	--color-green-highlight: hsl(from var(--color-green) h s calc(l + 10));
	--color-orange: #e08c18; /* #ffb42f */
	--color-orange-hover: hsl(from var(--color-orange) h s calc(l - 10));
	--color-orange-highlight: hsl(from var(--color-orange) h s calc(l + 10));
	--color-blue: #337ab7; /* #00afe0 */
	--color-blue-hover: hsl(from var(--color-blue) h s calc(l - 10));
	--color-blue-highlight: hsl(from var(--color-blue) h s calc(l + 10));
}

.xdebug-error {color: #333;}
.xdebug-var-dump {background-color: #eee;padding: 1rem;margin: 1rem;border-radius: 1rem; box-shadow: 0 0 .5rem black inset;}

body,html{background:#1f2228; color:#eee !important; font:14px/1.4 'Nunito Sans', Arial, Helvetica, sans-serif; padding-top:35px; margin-bottom:35px; -webkit-scrollbar-color: #777 #333; scrollbar-color: #777 #333;/* scrollbar-width: thin;*/}
.dropdown-menu {-webkit-scrollbar-color: auto !important; scrollbar-color: auto !important;/* scrollbar-width: thin;*/}
.pieChart{width:10rem; margin:0 auto; position:relative;}
.pieChart span{position:absolute; width:10rem; text-align:center; font-size:2rem; line-height:10rem;}
.pieChart i{position:absolute; width:10rem; line-height:13rem; text-align:center; font-size:0.8rem; opacity:0.8;}
.trans-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}

/* login window */
#loginWin .modal-content{box-shadow:0 0 2rem #436069; background:none; color:#64686e;}
#loginWin .modal-dialog{margin: 2rem;}
#loginWin .modal-body{background:none;border-top: 1px solid #444;}
/* end of login window */

/* navbar */
.nav .icon {font-size: 1.5rem; margin-right: 0.25rem; color: var(--color-primary)}
.navbar-dark {background-color: #17171a !important}
.navbar-dark .nav-link {color: #999; padding: 0 .5rem; margin: 0 .2rem; transition: color 0.2s ease}
.navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus {color: #eee}
.navbar-dark .nav-link:active, .navbar-dark .nav-link.active {color: #eee;}
.navbar-dark .dropdown-item:focus, .navbar-dark .dropdown-item:hover {background-color: #eee}
.navbar-dark .dropdown-toggle::after {color: var(--color-primary)}
.navbar-dark .ml-xl-auto .dropdown-menu {left: auto !important; right: 0}
.dropdown-item:not(.selected):focus, .dropdown-item:not(.selected):hover {background-color: #eee;}
/* end of navbar */

.datetimepicker{color:#000;}

/* bootstrap override */
.modal.modal-static .modal-dialog{-webkit-transform: unset !important;transform: unset !important}
.modal-body{background:#64686e; color:#eee; padding: 1.5rem 1.75rem;}
.modal-content{background:#48535a; color:#eee; border-radius: .5rem; box-shadow: 0 0 .7rem #0007;}
.modal-footer {border: none; padding: 1.5rem 1.75rem;}
.modal-header {border:none; padding: 1.5rem 1.75rem;}
.badge{font-weight: normal}
.badge-default {background-color: #4f5456;}
.table {color: inherit !important;}
.table-hover tbody tr:hover {color: inherit !important;}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {border-top: 1px solid #343a40;}
.modal-body .table > tbody > tr > td, .modal-body .table > tbody > tr > th, .modal-body .table > tfoot > tr > td, .modal-body .table > tfoot > tr > th, .modal-body .table > thead > tr > td, .modal-body .table > thead > tr > th {border-top: 1px solid #777;}
.table > thead > tr > th {vertical-align: bottom; border-bottom: 2px solid #777; border-top: unset !important; outline: none;}
.table > tfoot > tr > th {border-top: 2px solid #777; border-bottom: unset !important; outline: none;}
.table-responsive{margin-top: 1rem;}
.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {margin-left: 0;}
.popover{background-color: #1f2228; border: 1px solid grey;}
.popover-body{color:#eee !important;}
.popover > .arrow {visibility: hidden;}
.popover > .arrow:after {border: unset;}
.btn-light.focus, .btn-light:focus {box-shadow: none;}
.bg-dark {background-color: #343a4096 !important;}
.text-muted{color: #bbb !important;}
/* .input-group-prepend .input-group-text{background-color: #3677ba !important; color: #fff !important; border: 1px solid #3677ba;} */

/*
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    background-color: #3677ba;
    color: #fff;
}
.input-group-addon {
    border: unset;
}
.input-group {
    transform: skew(-15deg, 0deg); 
}
*/

.bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th {border: unset !important;}
.bootstrap-datetimepicker-widget table td.day {height: 1rem;line-height: 1rem;width: 1rem;}
.bootstrap-datetimepicker-widget table td.new, .bootstrap-datetimepicker-widget table td.old {color: #b7b7b7;}

.popover-header .close {margin-top: -.3rem;}

.input-group {flex-wrap: nowrap !important;}
.input-group input.form-control {height: auto !important; min-width: 5rem !important;}
.form-control::placeholder { opacity: .5; }  /* WebKit, Firefox */
.form-control::-webkit-input-placeholder { opacity: .5; }  /* WebKit, Blink, Edge */
.form-control::-moz-placeholder { opacity: .5; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { opacity: .5; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { opacity: .5; }  /* Microsoft Edge */

/* input:placeholder-shown {background-color: #e0e0e0;} */
.hidden {display: none !important;}
.export_hidden {visibility: hidden; font-size: 0px; padding: 0px !important; width: 0px !important; border-width: 0px !important;}
/* end of bootstrap override */

/* pills tabs */
.nav.nav-tabs{border-bottom: 2px solid #666; margin: 1rem 0; padding: 0 1rem;}
.nav-tabs .nav-link{margin: 0 .25rem; color:#eee; background-color: #666; border-color: #666}
.nav-tabs .nav-link.active {color:#fff; background-color: #337ab7; border-color: #337ab7}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{border-color: #337ab7}
.nav.nav-pills{border-bottom: 1px solid #48535a;}
.nav-pills .nav-link {color:#eee;}
.nav-pills .nav-link.active {color:#fff; background-color: #337ab7; border-color: #337ab7;}
.nav-pills .nav-link:not(.active):hover{background-color: #73777d;}
.blue-tabs-border .nav-item{margin-bottom: 0;}
.blue-tabs-border {border-bottom: 2px solid #337ab7 !important;}
/* end of pills tabs */

.nav-link._pickPMType{color: #337ab7}
.nav-link._pickPMType:hover{color: #eee}

.tablesorter-header-inner:after {font-family: 'FontAwesome'; float:right; color:#6c757d;}
.tablesorter-headerAsc .tablesorter-header-inner:after {content: '\f0de';}
.tablesorter-headerDesc .tablesorter-header-inner:after {content: '\f0dd';}
.tablesorter-headerUnSorted .tablesorter-header-inner:after {content: '\f0dc'; color: #373d42;}
.sorter-false .tablesorter-header-inner:after {content: '';}
.tablesorter-filter-row input:not(:focus):placeholder-shown {background-color: #48535a;border-color: #666;}
.tablesorter .filtered {display: none;}
.tablesorter thead .disabled {display: none;}

.accordion:after {content: '\2796'; float: right; margin-left: 1rem; color: transparent; text-shadow: 0 0 0 #6c757d;}
.accordion.collapsed:after {content: "\2795";}

#sidebar-navbar{padding:0; background:none;}
.leftAside{padding:0; padding-left:10px;}
form .input-group{margin-bottom:.5rem;}
.vehicle-logo{width:100%; height:auto;}
.table tbody>tr>td{ vertical-align: middle;}
.table-striped>tbody>tr:nth-of-type(odd) {background-color: #3a3c3f;}
.table-striped>tbody>tr>td {border: none;}
.table-hover>tbody>tr:hover td, .table tr.hover td{background-color:#428bca; cursor:pointer;}
.table-highlight>tbody>tr:hover td{background-color:#3a3c3f;}
.table tbody {border: 0 !important;}
.table tbody::before {content: ''; display: table-row; height: 2px !important;}
.trgroup td {font-size: 1.3rem;}
.whiteLink{color:#eee;}
.whiteLink:hover{color:#fff;}
input:checked ~ .info-checked {display: inline !important; color:red; margin-left: 1rem;}
input:checked ~ .info-notchecked {display: none !important;}
input[name="xReportType"]:not(:checked) ~ div {display: none !important;}
.selectall{text-align: center; color: #337ab7; font-weight: bold; border-bottom: 2px solid #eee;}
.weekdays input {position: absolute; opacity: 0;}
.weekdays input + label {display: inline-block; cursor: pointer; background: #777; color: #fff; border: 1px solid transparent; user-select: none;}
.weekdays input:disabled + label {color: #48535a !important; cursor: initial;}
.weekdays input:checked + label {background: #337ab7; color: #fff;}
.weekdays input:focus + label {border:#99c2ff 1px solid;box-shadow: 0 0 0 .2rem rgba(0,123,255,.5);}

input:checked + .videoreq:before {content:"\F05A"; color: #3B88FD;}
input:not(:checked) + .videoreq:before {content:"\F05B"; color: #bbc;}

.btn-switch {display: block; background: #48535a; width: 3rem; height: 1.6rem; border-radius: 1rem; border: 0.15rem solid #48535a; position: relative; cursor: pointer; margin: 0; flex-shrink: 0;}
.btn-switch span {position: absolute; width: 1.3rem; height: 1.3rem; border-radius: 1rem; background: #989898; transition: all 0.1s ease-in;}
.badge-dark .btn-switch {background: #343a40; border: 0.15rem solid #343a40;}
input:checked ~ .btn-switch span {background: #3b88fd; transform: translatex(1.4rem); transition: all 0.1s ease-in;}
input:not(:checked) ~ .btn-switch-info {color: #989898;}
input:disabled ~ .btn-switch {opacity: 0.4;}
input:disabled ~ .btn-switch span {background: #989898; transform: unset;}
input:focus ~ .btn-switch {box-shadow: 0 0 0 .2rem rgba(59, 137, 253, 0.6);}

.elLine{margin-bottom:10px; border-bottom:#555 1px solid; padding-bottom:5px;}
#_msgArea{overflow:auto; border:#555 1px solid; padding:10px; height:100%; border-radius:5px;}
#_msgArea>div:hover p{ opacity:1;}
#_msgArea p{ padding:10px 0; margin-left:20px; opacity:0.75;}
.msgEven{box-shadow:#999 0 0 20px;}
.msgEven:hover{box-shadow:#ddd 0 0 20px;}
.msgEven, .msgOdd{padding:4px 10px; border-radius:5px; margin-right:40px; margin-bottom:20px;}
.msgEven h5{border-bottom:#4a4a4a 1px solid; padding-bottom:4px;} .msgEven i{color:#999;}
.msgOdd {margin-right:0; margin-left:40px; box-shadow:#428bca 0 0 20px;}
.msgOdd:hover{box-shadow:#9cc2e3 0 0 20px;}
.msgOdd h5{border-bottom:#286090 1px solid; padding-bottom:4px;} .msgOdd i{color:#428bca;}

.modal-title span{font-size: 70%; color:#2fa6f1;}
.modal-body .statusTitle{border-bottom: #e0e0e0 1px solid; text-transform:uppercase; font-size:30px;}
.modal-body .backIcon{position:absolute; top:5rem; right:4rem; font-size:10rem; opacity:0.1;}

#dashBlocks>div{padding:0 5px 15px 5px;}
.dashBlock, .repDashBlock{margin:0 auto; padding:5px; height:100px; position:relative;}
.dashBlock>div, .repDashBlock>div{position:absolute; left:70px;}
.dashBlock .fa, .repDashBlock .fa{position:absolute; width:60px; height:60px; font-size:28px; line-height:60px; top:20px; border-radius:50%; text-align:center;}
#blActive .fa{background:#527b27;/*#1D92AF;*/}
#blIdle .fa, #blTurn .fa{background:#CE7B11;}
#blShock .fa{background:#992600;}
#blAccel .fa{background:#b38600;}
#blEmergency .fa{background:#a00;}

.badge-default.Accelerate, .badge-default.Brake{background-color:#b38600;}
.badge-default.Turn, .badge-default.DistractedDriving{background-color:#CE7B11}
.badge-default.Shock, .badge-default.PanicButton, .badge-default.VoiceAlert, .badge-default.AlarmIn, .badge-default.SevereShock, .badge-default.CameraObstruction, .badge-default.LowBattery{background-color:#992600}

.dashBlock p{text-transform:uppercase; font-size:11px; margin:0;}
.dashBlock h3{margin:15px 0 0 0; padding:0;}
.dashBlock .moreData{font-size:11px; padding-top:5px;}
.dashBlock label{font-size:11px; color:#66c2ff; background-color:#ffffff26; font-weight:normal;}

.devTabs .tab-pane .row{margin-top:20px; padding-bottom:10px; border-bottom:#ccc 1px solid;}
._locateDev{cursor:pointer;}

/* dashboard */
._showLiveEventUK.active{
    background-color: #4e5052 !important;
}
._dashBtns > button {
    padding: 0.28rem 0.6rem;
}

.strView-sm{
    padding: 0 0.3rem;
}
.strView-sm > ._ci{
    margin-right: 0;
}

/* end of dashboard */

/* media history */
.mh-video-container{display: inline-block; position: relative; cursor: pointer; width:19rem; margin:1rem .6rem; border: 2px solid #1e1e1e; border-radius: .3rem; box-shadow: #1b1b1b 0 0 .7rem; animation: fadeIn 0.5s;}
.mh-video-container:hover{border:2px solid #3677ba;}
.mh-video-container video, .mh-video-container img{width:100%; height: 10.5rem; background-color: black;}
.mh-video-container span.request-preview{background: black; height: 10.5rem; display: flex; align-items: center; justify-content: center;}
.mh-video-container p{font-size: 1rem; text-align: left; margin: 1rem; position: relative;}
.mh-video-container span{display: block;}
.mh-video-container .title{margin: 1rem 1rem 2rem;}
.mh-video-container .event{font-size: 1.2rem; font-weight: bold; padding-top: .2rem; width: 65%; text-overflow: ellipsis;overflow: hidden; white-space: nowrap;}
.mh-video-container .icon{position: absolute; right: 0; top: -0.7rem; font-size: 3rem;}
.mh-video-container .duration{position: absolute; right: .4rem; top: .4rem; font-size: .8rem; background-color: #0006; padding: .2rem .4rem; border-radius: .3rem;}
.channel{position: absolute; left: .4rem; top: .4rem; font-size: .8rem; background-color: #0006; padding: .2rem .4rem; border-radius: .3rem;}
/* mh video wall */
.mh-row-video-chs {height: 100%; width: 100%;}
.mh-vw-big {height: 100%;}
.mh-vw-big #mainvideo {width: 100%;}
.mh-vw-small {height: 100%; overflow-y: auto;}
.mh-vw-small video {object-fit: fill; background-color: #000; border: 2px solid #64686D /*#000*/;}
.mh-vw-small img {width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 2px solid #000;}
.mh-vw-small video:hover, .mh-vw-small img:hover {border: 2px solid #3677ba;}
.mh-row-video-info {text-align:left; padding: 1rem 0; /* border-top: 1px solid #363636; background-color: #1d1d1d;*/}
.mh-row-video-info p > span {margin-right: 2rem;}
.mh-row-video-info .badge {margin-right: 3px; font-size: 90%;}
.mh-row-video-info .title {font-size: x-large;}
.mh-row-video-info .event{font-size: 1.2rem; font-weight: bold;}
.videos ul {list-style: none; padding: 0; margin: 0 auto;}
.videos ul li {display: inline-block; vertical-align: top;}
.videos ul li.GI_TW_Selected_Row {-webkit-transition: margin-bottom 0.3s ease-in; -moz-transition: margin-bottom 0.3s ease-in; -o-transition: margin-bottom 0.3s ease-in; transition: margin-bottom 0.3s ease-in;}

.GI_TW_Current {border:2px solid #3677ba;}
.GI_TW_expander {background: #1d1d1d; border: 1px solid #64686D; border-radius: .5rem; top: 0; left: 0; width: 100%; height: auto; height: 0; overflow: hidden;}
.GI_TW_expander.animating {overflow: hidden !important;}
.GI_TW_expander.opened {overflow: visible; padding: 2rem 0}
.GI_TW_expander .GI_TW_pointer {position: absolute; margin-top: -1.6rem; margin-left: .625rem; width: 0; height: 0; border: 3px solid #3275bc; border-radius: 50%; -webkit-transition: left 0.4s ease-in; -moz-transition: left 0.4s ease-in; -o-transition: left 0.4s ease-in; transition: left 0.4s ease-in;}
.GI_TW_expander .GI_TW_expander-inner {margin: 0 auto; padding: 0 3rem;}
.GI_TW_expander .GI_TW_expander-inner .GI_TW_fullimg {position: relative; width: 100%; height: 22.5rem; margin: .625rem 0 0; text-align: center; overflow: hidden;}
.GI_TW_expander .GI_TW_expander-inner .GI_TW_fullimg img {position: relative;}
.GI_TW_expander .GI_TW_Controls {z-index: 1; color: #3e4244; font-size: 2rem;}
.GI_TW_expander .GI_TW_close {position: absolute; width: 2.5rem; height: 2.5rem; top: .6rem; right: .6rem; cursor: pointer;}
.GI_TW_expander .GI_TW_arrow {position: absolute; top: 50%; cursor: pointer;}
.GI_TW_expander .GI_TW_arrow.GI_TW_hidden {display: none;}
.GI_TW_expander .GI_TW_arrow.GI_TW_next {right: 1.25rem;}
.GI_TW_expander .GI_TW_arrow.GI_TW_prev {left: 1.25rem;}
/* end of media history */

/* old media history */
/* .mhListItem{position:relative; border-bottom: 1px solid grey; padding: .5rem;} */
/* .mhListItem:last-of-type {border: 0} */
.mhIcon {display: inline-block; position: relative;}
.mhIcon:hover i{color: #2fa6f1;}
.mhIcon.selected i{color: #2fa6f1}
.mhIcon .cam{position: absolute;left: 26px;top: 2px;font-size: 28%;line-height: 1;background-color: #334557; border-radius: 10px; padding: 2px 4px; color: #ace6ff;}
.mhIconsParent{display: inline-block;font-size:40px; line-height:40px;padding-top: 4px;}
/* .mhData{display: inline-block; width: 160px;} */
/* .mhDataName{font-size:12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform:uppercase;} */
/* end of old media history */

/* live video */
.gallery {margin: 5px; float: left; position: relative; width: 48%;height: 0;padding-bottom: 33%;border: 1px solid #373737; overflow: hidden;}
.gallery.full {width: 98%; padding-bottom: 66%;}
.gallery img {width: 100%; height: auto;}
.gallery .ch {display: block;position: absolute;top: 4px;left: 8px;padding: 1px 3px;border-radius: 4px;color: #eee;background-color: #00000080;}
#_lvContainer span {width: 48%; margin: 1%; display: block; float: left; position: relative;}
#_lvContainer span > img {width: 100%;}
/* end of live video */

/* live view */
.liveview-grid {display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; gap: 1rem;}
.liveview-grid .zoomed {grid-column: 1 / -1;}
.lv-container {border: 2px solid #1e1e1e; box-shadow: #1b1b1b 0 0 .7rem; animation: fadeIn 0.5s;}
.lv-container:hover {border: 2px solid #3677ba;}
/* end of live view */

/* safety score */
.sscore {white-space: nowrap;overflow-x: auto;}
.sscore .btn {width: 5rem;height: 5.5rem;border-radius: 2rem .3rem .3rem;border: 2px solid #555;background-color: #555;color: #fff;overflow: hidden;white-space: normal;padding: .5rem .25rem .25rem .5rem;margin: 1px;outline: none;}
.sscore .btn.active {border-radius: .3rem;border: 2px solid #3677ba;background-color: #3677ba;color: #fff;}
.sscore .btn.focus, .sscore .btn:focus {color: #fff;outline: none;}
.sscore .btn:hover {border: 2px solid #3677ba;}
/* end of safety score */

.font-size-100{font-size: 100%;}
.thin{font-weight:normal;}
.border-thick{border-width: 2px !important;}
.rounded-1{border-radius: .5rem;}
.rounded-2{border-radius: 1rem;}
.min-width-5{min-width: 5rem !important;}

.devEvent{padding:.5rem 0; cursor:pointer; white-space: nowrap;}
.devEvent:hover{background:#444;}
.rHeading{width:2rem; height:2rem; border-radius:1rem; line-height:2rem; font-size:1rem; text-align:center; float:left;}
.rSpeed{border:#fff 1px solid; margin-left:4px; font-size:11px;}
.rValues{display: inline-block;font-size:13px; padding-left:4px;}
.nav.fixed-bottom{height: 30px; color:#9d9d9d;line-height: 30px;}
._pickPMType{border:1px solid #e0e0e0}

#eventUserContent{padding:15px; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; margin:10px auto; overflow:auto;}
#eventUserContent .panel{margin-bottom:10px;}
#eventUserContent .panel .msg{padding:5px;}

/* fences */
.map-input{color:#000; margin-top:11px; font-size:14px; line-height:22px; outline:none; box-shadow: #0000004d 0px 1px 4px -1px; border: 0 none; border-radius: 2px; padding: 2px 8px;}
._showFence{overflow-x: hidden; white-space: nowrap;}

/* V3 styles */
.stats-circle{border: 5px solid; width: 120px; height: 120px; position: relative; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.stats-circle:before{content: ""; position: absolute; left: 0; border: 4px solid #4f5157; width: 110px; height: 110px; border-radius: 50%;}
.stats_tile:before{content: ""; position: absolute; left: 0; height: 80%; border-left: 2px solid #64686e; top: 10%;}
.stats_tile:first-child:before{border-left: 0}
.no-hover:hover td{color: unset !important; background-color: unset !important; cursor: unset !important;}
.tilt {-ms-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg)}
.tilt-8 {-ms-transform: skew(-8deg, 0deg); -webkit-transform: skew(-8deg, 0deg); transform: skew(-8deg, 0deg)}
.round {border-radius: 1rem !important; min-width: 5rem;}

.reportbox{background-color:#2C333C; color:#ccc; display:block; height: 100%;}
.reportbox:hover{background-color:#3A444F; color:#ccc; text-decoration:none;}
.reportbox-title{border-bottom: 1px solid #3677ba; padding: .5rem 0 .25rem; float: right; width:66%; font-size: 1.4em;}
.reportbox i{font-size: 3em; margin-left: 1rem;}

.eventbox{position:relative; margin:15px 0; text-align:right;}
.eventbox:after{content: " ";position:absolute;display:block;width:100%; height:100%; top:0; left:0;border-radius:4px; transform-origin: bottom left; -ms-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg);}
.eventbox-count{font-size:26px; line-height:30px; padding-right:14px;}
.eventbox-status{font-size: 12px; padding:8px 20px 8px 0; text-transform:uppercase;}
.eventbox-icon{font-size:50px; line-height:30px; position:absolute; margin-top:-4px;}

.driverImg{width: 7rem;height: 7rem;border-radius: 1rem;left: 0;}
.imagePopup{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 25rem;height: 25rem;transition: all .5s;z-index: 1050;}
._driverSelect {display: inline-block;text-align: center;border: 2px solid transparent;border-radius: 1rem;}
._driverSelect:hover, ._driverSelect.active {border: 2px solid #2e6da4;background-color: #337ab7;}
._driverSelect button {display: none;}
._driverSelect:hover button {display: block;}

/* colors */
.e-red:after{border-bottom:4px solid #CF1C43; border-right:16px solid #CF1C43;} /* old color: c93030 */
.e-yellow:after{border-bottom:4px solid #CE6B13; border-right:16px solid #CE6B13;} /* old color: C67C2A */
.e-green:after{border-bottom:4px solid #527b27; border-right:16px solid #527b27;}
.e-grey:after{border-bottom:4px solid #565b62; border-right:16px solid #565b62;} /* old color: #6D6E66 */
.e-blue:after{border-bottom:4px solid #3677ba; border-right:16px solid #3677ba;}

.grade{border-left: 2px solid #1f2228 !important; border-top: 2px solid #1f2228 !important;}
.gradeA{background-color: #578427;}
.gradeB{background-color: #7DAE48;}
.gradeC{background-color: #C8BF29;}
.gradeD{background-color: #D77C39;}
.gradeE{background-color: #D72E2E;}

.tier0{color: #FFD700;}
.tier1{color: #D0D0D0;}
.tier2{color: #CD7F32;}
.border-tier0{border-color: #FFD700 !important;}
.border-tier1{border-color: #D0D0D0 !important;}
.border-tier2{border-color: #CD7F32 !important;}

.ico-red{color: #CF1C43 !important;} /* red */ /* old color: c93030 */
.ico-yellow{color:#CE6B13 !important;} /* yellow */ /* old color: #C67C2A */
.ico-green{color: #527b27 !important;} /* green */
.ico-grey{color: #565b62 !important;} /* grey */ /* old color: #6D6E66 */
.ico-light-grey{color: #999 !important;} /* light grey */
.ico-blue{color: #3070D2 !important;} /* blue */ /* old color: #2fa6f1 */
.ico-blue-menu{color: #3070D2 !important;} /* blue menu icons*/ /* old color: #3677ba */
.ico-orange{color: #f60 !important;} /* orange */
.ico-bg{color: #1f2228 !important;} /* same as bg-color */
.ico-dark{color: #3e4244 !important;}
.ico-light{color: #ccc !important;}

.ico-vehicle{background-image: none; background-repeat: no-repeat; background-size: auto 64px; max-width: 27px; width: 27px; height: 16px; display: inline-block; background-image: url('img/sprite-vehicletype.png'); padding-left: 0 !important; padding-right: 0 !important;}
.active > .ico-vehicle, :active > .ico-vehicle {background-position-y : -40px !important;}
.ico-vehicle.ico-vehicle-car{background-position: -2px -8px;}
.ico-vehicle.ico-vehicle-van-sm{background-position: -34px -8px;}
.ico-vehicle.ico-vehicle-truck-sm{background-position: -66px -8px;}
.ico-vehicle.ico-vehicle-ambu-sm{background-position: -98px -8px;}
.ico-vehicle.ico-vehicle-scho-sm{background-position: -130px -8px;}
.ico-vehicle.ico-vehicle-excav{background-position: -162px -8px;}
.ico-vehicle.ico-vehicle-truck{background-position: -194px -8px;}
.ico-vehicle.ico-vehicle-trac{background-position: -226px -8px;}
.ico-vehicle.ico-vehicle-ambu{background-position: -258px -8px;}
.ico-vehicle.ico-vehicle-van{background-position: -290px -8px;}
.ico-vehicle.ico-vehicle-conc{background-position: -322px -8px;}
.ico-vehicle.ico-vehicle-scho{background-position: -354px -8px;}
.ico-vehicle.ico-vehicle-haul{background-position: -386px -8px;}
.ico-vehicle.ico-vehicle-dump{background-position: -418px -8px;}
.ico-vehicle.ico-vehicle-bus{background-position: -450px -8px;}
.ico-vehicle.ico-vehicle-pick{background-position: -482px -8px;}
.ico-vehicle.ico-vehicle-parc{background-position: -515px -8px;}
.ico-vehicle.ico-vehicle-garb{background-position: -548px -8px;}
.ico-vehicle.ico-vehicle-fork{background-position: -580px -8px;}

.badge-blue{background-color: #337ab7; color: #fff;}
.badge-green{background-color: #527b27; color: #fff;}
.badge-orange{background-color: #C67C2A; color: #fff;}
.badge-red{background-color: #c93030; color: #fff;}
.badge-dark{background-color: #48535a; color: #fff;}
.badge-bg{background-color: #1f2228; color: #eee;} /* same as body bg-color */
.badge-bg-modal{background-color: #64686e; color: #eee;} /* same as body bg-color */

.border-red{border-color: #c93030 !important;}
.border-yellow{border-color: #C67C2A !important;}
.border-green{border-color: #527b27 !important;}
.border-dark{border-color: #3e4244 !important;}
.border-grey{border-color: #6D6E66 !important;}
.border-light-grey{border-color: #777 !important;}
.border-blue{border-color: #3677ba !important;}
.border-blue-light{border-color: #3b88fd !important;}
.border-selected-left{border-left: 4px solid #3b88fd !important;}

.border-w2{border-width: 2px !important;}
.border-w3{border-width: 3px !important;}

.hover-blue:hover {color: #337ab7 !important;}

a.badge-blue:hover {color: #fff; background-color: #286090; border-color: #204d74; text-decoration: none}

.bg-blue-menu{background-color: #3677ba !important; color: #fff !important; border: 1px solid #3677ba;} /* blue menu icons*/

/* Buttons */
.btn-outline-primary {color: #777; background-color: transparent; border-color: #777;}

.btn-blue {color: #fff; background-color: var(--color-blue); border-color: var(--color-blue);}
.btn-blue:hover {color: #fff; background-color: var(--color-blue-hover); border-color: var(--color-blue-hover);}
.btn-blue.focus, .btn-blue:focus, .btn-blue.active {color: #fff; background-color: var(--color-blue-highlight); border-color: var(--color-blue-highlight);}
.btn-green {color: #fff; background-color: var(--color-green); border-color: var(--color-green);}
.btn-green:hover {color: #fff; background-color: var(--color-green-hover); border-color: var(--color-green-hover);}
.btn-green.focus, .btn-green:focus, .btn-green.active {color: #fff; background-color: var(--color-green-highlight); border-color: var(--color-green-highlight);}
.btn-orange {color: #fff; background-color: var(--color-orange); border-color: var(--color-orange);}
.btn-orange:hover {color: #fff; background-color: var(--color-orange-hover); border-color: var(--color-orange-hover);}
.btn-orange.focus, .btn-orange:focus, .btn-orange.active {color: #fff; background-color: var(--color-orange-highlight); border-color: var(--color-orange-highlight);}
.btn-red {color: #fff; background-color: var(--color-red); border-color: var(--color-red);}
.btn-red:hover {color: #fff; background-color: var(--color-red-hover); border-color: var(--color-red-hover);}
.btn-red.focus, .btn-red:focus, .btn-red.active {color: #fff; background-color: var(--color-red-highlight); border-color: var(--color-red-highlight);}

.btn-group-xs > .btn, .btn-xs {padding: .2rem .4rem; font-size: .875rem; border-radius: .2rem;}


.btn-primary {color:#fff; background-color: var(--color-primary); border-color: var(--color-primary);}
.btn-primary:hover {color:#fff; background-color: var(--color-primary-hover); border-color: var(--color-primary-hover);}
.btn-primary.focus, .btn-primary:focus {color:#fff; background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); box-shadow: 0 0 0 .1rem var(--color-primary-highlight);}
.btn-primary.disabled,.btn-primary:disabled {color:#fff; background-color: var(--color-primary); border-color: var(--color-primary);}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {color:#fff; background-color: var(--color-primary-hover); border-color: var(--color-primary-hover);}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {box-shadow: 0 0 0 .1rem var(--color-primary-highlight);}


/* notify */
.alert-notify{background-color: #2fa6f1e6; color:#fff;box-shadow: #444c 0 0 5px 1px;padding:0;border-radius: 5px;cursor:pointer;}

/* popup box */
#popup-overlay {display: none; height: 0; overflow: hidden; text-align: center; background-color: rgba(0,0,0,0.4);}
#popup-overlay.show-popup {display: block; position: fixed; height: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 1100;}
.popup-body {position: relative; display: inline-block; margin-top: 14rem; max-width: 40rem; min-width: 25rem; overflow: hidden; font-weight: bold; background-color: #fff; color: #666; border: 1px solid #666; box-shadow: 0 .5rem 2rem black;}
/* end of popup box */

/* copy badge */
.showcopy:hover::after {
	content: "\f0c5";
	font-family: "FontAwesome";
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: .3rem;
	border-radius: .5rem;
	border: 1px solid #eee;
	background: #3677ba;
	cursor: pointer;
}
.showcopy:active::after {
	background: #2fa6f1e6;
}
/* end of copy badge */

/* wizard */
.wiz-bar li{display: inline-block; user-select: none; padding: 0.5rem 1rem; margin: .5rem 0 0 .5rem; border-radius: 5px; background-color: #777;}
.wiz-data section{display: none; padding: 1rem;}
.wiz-bar li:hover:not(.disabled){box-shadow: 0 0 0 2px #ddd;}
.wiz-bar .active{background-color: #337ab7;}
.wiz-bar .disabled{color: #64686e;}
.wiz-data .active{display: block;}
/* end of wizard */

/* fancy input elements */
.fancy-input {position: relative;padding: 1rem 0 0;margin-bottom: 1rem;}
.fancy-input input {font-size: 2rem;width: 100%;padding: .5rem 0;border: 0;border-bottom: 2px solid #3e4244;outline: 0;color: #eee;background: transparent;transition: border-color 0.2s;}
.fancy-input input::placeholder {color: transparent;}
.fancy-input input:placeholder-shown ~ label {font-size: 1.5rem;cursor: text;top: 2rem;}
.fancy-input label {display: block;width: 100%;position: absolute;top: 0;transition: 0.2s;font-size: 1rem;color: #3e4244;user-select: none;}
.fancy-input input:focus {padding-bottom: .5rem;border-bottom: 2px solid #aaa;}
.fancy-input input:focus ~ label {display: block;position: absolute;top: 0;transition: 0.2s;font-size: 1rem;color: #aaa;}
.fancy-input input:required, .fancy-input input:invalid {box-shadow: none;}

.fancy-select .btn {font-size: 1.6rem;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: .3rem 0;background-color: #64686e;color: #eee;border: 0;border-bottom: 2px solid #3e4244;border-radius: 0;outline: 0 !important;}
.fancy-select .btn::after {color: #3e4244;}
.fancy-select .btn:focus {border-bottom: 2px solid #aaa;}
.fancy-select .dropdown-menu {margin: 1rem 0 0;}
.fancy-select label {color: #3e4244; margin-bottom: 0;}
.fancy-select .btn:not(:disabled):not(.disabled).active, .fancy-select .btn:not(:disabled):not(.disabled):active, .fancy-select .show > .btn.dropdown-toggle {color: #eee;background-color: #64686e;border-color: #aaa;}
.fancy-select .dropdown-toggle:focus, .fancy-select > select.mobile-device:focus + .dropdown-toggle {outline: 0 !important;}

.fancy-driver {width: 12rem;height: 12rem;border-radius: 2rem;border: .2rem solid #48535a;position: relative;overflow: hidden;}
.fancy-driver img {width: 100%;height: 100%;}
.fancy-driver input {opacity:0;height:0;width:0;}
._uploadPhoto {cursor: pointer;}
._uploadPhoto > div {background-color: #0000007d;color: #fff9;height: 3rem;position: absolute;bottom: 0;width: 100%;text-align: center;padding: .7rem;opacity: 0;}
._uploadPhoto:hover > div {opacity: 1;}

._fancy input:not(:focus):placeholder-shown {background-color: #48535a;}
._fancy input::placeholder {color: #fff;}
/* end of fancy input elements */

/* dark input elements */
.input-dark .input-group-text {color: #f1f1f1;background-color: #6c757d;border: 1px solid #6c757d;}
.input-dark .form-control:not([type="search"]) {color: #f1f1f1;background-color: #6c757d;border-color: #6c757d #92989b;}
.input-dark .btn-light {color: #f1f1f1;background-color: #6c757d;border-color: #6c757d #92989b;}
.input-dark .btn-light:hover {color: #efefef;background-color: #7b8185;border-color: #6c757d #92989b;}
.input-dark .hover-blue:hover {color: #fff !important;}

.modal-body .input-dark .input-group-text {background-color: #64686e;}
.modal-body .input-dark .form-control:not([type="search"]) {background-color: #75797d;}
.modal-body .input-dark .btn-light {color: #f1f1f1; background-color: #75797d;}
.modal-body .input-dark .btn-light:hover {background-color: #7b8185;}
/* end of dark input elements */

/* map elements */
#_mapMsg {position:absolute; top:45%; left:0; width:100%; text-align:center; font-size:26px; font-weight:bold; color:#fff; display:none; background-color: #00000080; padding:2rem;}
#mapView, #MapFence, #routeMap {height: 600px; width: 100%; color:#000 !important;}
#_mpCloseBtn {right: -30px;top:35%;position: absolute;background:#1f2228;cursor:pointer;padding: 30px 10px;border-radius: 0 10px 10px 0;}
#_mpAtt {right: -4rem;top: 0;position: absolute;background: #1f2228;padding: 2rem;border-radius: 0 0 1rem 0;z-index: 10;}
#_onMapData {height:100%; overflow:auto;}
#_onMapData ._showEvent{color:#fff; border-bottom: 1px solid #17171a; padding: 8px; cursor: pointer;}
._showEvent:hover{background-color: #17171a}
._showEvent.selected{background-color: #17171a}
#_onMapData .selected:not(.btn){background-color: #17171a}
#_onMapRouteEvents {display: none}
.mapReloadCnt {margin-top: 1px; height: 1px; background-color: #3878c7; transition: width 1s linear 0s;}
#mapStatusMsg {margin-bottom: 10px;padding: 6px;font-size: 100%;font-weight: normal;}
#mapEventControls .btn-xs {padding: 4px 8px;}
.onMapEvents.selected {box-shadow: inset 0 0 0 5rem #00000021;}
.mdFilters{font-size:1.5rem; color:#999;} /*old color: #4f5456 */
.mdFilters i:hover{color:#ccc;}
.mdFilters .dropdown{margin-top: 9rem; left: auto;}
#mapRouteTools > .btn-light:hover {background-color: #c2cbd4; border-color: #c2cbd4;}

.map-side-events-header{display: flex;justify-content: space-around; flex-direction: row;}
.map-side-events-footer{display: flex; flex-direction: column;}
.map-side-events-footer > div{text-align: left;background-color: #3e4244;border: 1px solid #17171a;padding: 0.5rem;}
.icon-driver{color: #2e6da4;}
.icon-on-off{color: #527b27;}
.dev-off > .map-side-events-header > .icon-driver, .dev-off > .map-side-events-header > .icon-on-off{color: #555555;}
.speed-since{color: #bbbbbb;}

.mapSideMenuItem { position:relative; margin-bottom: 4px;color:white}
.mapSideMenuItem:before{content: " "; position:absolute;display:block;width:100%; height:100%; top:0; left:0;border-radius:4px; transform-origin: bottom left; -ms-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); background-color:#000000cc;z-index: -1;}
#_onMapData ._showEvent.zoomTo{background-color: #28353f;}
.deviceTripOnOff{font-size: 2rem;}

.mapSmItem-red:before {border-bottom: solid 4px #c93030; border-right: 10px solid #c93030;}
.mapSmItem-yellow:before {border-bottom: solid 4px #C67C2A; border-right: 10px solid #C67C2A;}
.mapSmItem-green:before {border-bottom: solid 4px #527b27; border-right: 10px solid #527b27;}

/* map mapkers */
.mmarker {font-size: 11px; text-align: center; width:88px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 5px; border:#ccc 1px solid; padding:4px 2px;}
.mlab0 {color: #fff; background-color: #B21501;}
.mlab1 {color: #fff; background-color: #eb7e13;}
.mlab2 {color: #fff; background-color: #00A350;}
.mlab3 {color: #fff; background-color: #777;}
.mlab-time {color: #fff; background-color: #454545; opacity: 1; margin-left: 15px !important;}
/* .mlab3 {color: #fff; background-color: #874A9D;} */
img[src="_css/img/markers.svg"] {filter: drop-shadow(0px 2px 2px grey)}

/*style maps popup box*/
.gm-style .gm-style-iw, .gm-style-iw-tc::after, .poi-info-window div, .poi-info-window a {background-color: #454545 !important; color: #fff !important;}
.gm-style-iw-t::after{border-top:11px solid #454545 !important; background: none !important;}
.gm-style-iw-d{overflow:hidden !important; padding:10px !important;}
.gm-style-iw-c{padding:0px !important;}
.gm-style-iw-c button, .gm-style-iw-chr{display:none !important;}
/*style google maps buttons*/
.gm-style-mtc div{height:30px !important;padding: 0px 10px !important;font-size: 1rem !important;}

.shadow-map {box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;}

/* range slider */
.range-labels input{height: 1rem;}
.range-labels input::-webkit-slider-thumb {width: 1.5rem; height: 1.5rem; background: #337AB7; cursor: pointer; border: 2px solid #fff; border-radius: .5rem; margin-top: -0.5rem;}
.range-labels input::-moz-range-thumb {width: 1.5rem; height: 1.5rem; background: #337AB7; cursor: pointer; border: 2px solid #fff; border-radius: .5rem;}
.range-labels li {display: flex; cursor: pointer; color: #999;}
.range-labels li span {position: absolute; transform: translateX(-50%); margin: .5rem; user-select: none;}
.range-labels li:first-child span {transform: none; margin-left: 0;}
.range-labels li:last-child span {transform: translateX(-100%); margin-left: 1rem;}
.range-labels li::before {content: ""; width: 1rem; height: 1rem; border-radius: 50%; margin-top: -1.25rem; background-color: #eee;}
.range-labels li.active {color: #fff;}
/*.range-labels li.selected::before {background: #337ab7; border: 2px solid #eee;}*/
.range-labels li.active.selected::before {visibility: hidden;}
/* end of range slider */

/* user guides howto */
._scrollto {cursor: pointer; white-space: nowrap; user-select: none;}
._scrollto.active {background-color: #49535c; color: #ccc}
.howto-toc {position: sticky; top: 4rem; color: #999;}
.howto {padding-top: 60px;}
.howto .col-centered {float: none !important; margin: 0 auto;}
.howto .col-centered div {text-align: center; position: relative; margin-bottom: 60px;}
.howto .hl{font-weight: bold; padding: 0 .3em; color: #2e96d6;}
.howto .bold{font-weight: bold;}
.howto .desc_content{margin-top: -15px;}
.howto a {word-wrap: break-word; white-space: normal;}
.howto img.img-fluid, .whatsnew img.img-fluid{ margin: 20px auto; border: 2px solid grey; border-radius: 6px; box-shadow: black 0 4px 8px;}
img.img-fluid.dev-int-img{ width: 30%; height: auto;}
.user-guide-logo{position:absolute;top:8rem;left:50%;transform:translate(-50%,0);border:none;box-shadow:none;max-height: 4rem;}
/* end of user guides howto */

/* charts */
.pie-chart-container {height: 20rem;}
.bar-chart-container {height: 15rem;}
/* end of charts */

.exo2 {font-family: "Nunito Sans", Arial, Helvetica, sans-serif !important;}
.bold {font-weight: bold;}
[role=button] {cursor: pointer;}
label[role=button] {user-select: none;}
h1,h2,h3,h4,h5,h6 {user-select: none;}
.user-select-none {user-select: none;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;}
.force-select {-webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all;}

hr {border-top: 1px solid #48535a;}
label, .input-group-text, .nav-link {user-select: none;}
.mw-75 {max-width: 75% !important;}
.sticky-top {position: sticky; top: 2rem; background-color: #1f2228; padding: 2rem 0; z-index: 1;}
.sticky-col {position: sticky; left: 0; background-clip: padding-box; max-width: 50vw;}
.sticky-left-bottom {position: fixed; bottom: 2rem;}

.aniAttention {position: relative;}
.aniAttention:before {
  content: "\F07F"; font-family: "Curbsoft"; font-size: 3rem;
  color: #fff300; text-shadow: 0 0 .3rem #f00;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.aniAttention:before {animation: blink 1s step-start 0s infinite;}
@keyframes blink {
  50% {opacity: 0.1;}
}

/*spin*/
.spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@keyframes spin {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}

/*fadein*/
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@media screen and (min-width: 769px) {
	.modal-dialog  {width:55rem;max-width:55rem;}
    .modal-80-percent{width:80% !important;max-width: 80% !important;}
}

@media screen and (min-width: 1300px) {
	.modal-60-percent{width:60% !important;max-width: 60% !important;}
}

@media screen and (min-width: 575px) {
	#loginWin .modal-dialog  {width:30rem; margin: 3rem auto;}
}

@media screen and (max-width: 992px){
    .gallery {width: 98%; padding-bottom: 66%;}
    .mh-row-video-chs {display: block;}
    .w-md-100 {width: 100%;}
    .navbar-dark .dropdown-toggle::after {margin: auto;}
    /* mobile menu */
    .navbar .dropdown-item {color: #fff;}
    .navbar .dropdown-menu {position: unset; float: unset; text-align: center; background-color: #404040;}
    .navbar .dropdown-divider {border-top: 1px solid #636363;}
    .navbar-dark .dropdown-item:focus, .navbar-dark .dropdown-item:hover {background-color: #ccc;}
    .navbar-dark .nav-link, .navbar-dark .nav-item {width: 100%; padding: .5rem; text-align: center;}
    /* how-to */
    .howto-toc {position: inherit; top: unset; height: unset; margin-bottom: 4rem;}
}

@media screen and (max-width: 768px){
    #mapDeviceControls, #mapEventControls, #mapRouteTools {left: unset !important; margin-right: 5rem !important;}
}

@media screen and (max-width: 575px){
    .mapPanelMobile {position: absolute; z-index: 11; width: 240px; left: -240px; transition: 500ms; display: block !important; padding-right: 15px !important; background:#1f2228;}

    .mob-full-width {width: 100%}
}


/* Chart.js v2.9.3 CSS settings */
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}

.tablesorter .filtered {display: none;}

.reportbox-wizard{
    border:solid 1px #ffffff;
}
.wizard-btn{
    width:100%;
    text-align:center;
    float:left!important;
}

/* Change site theme based on user's system theme */
/* @media (prefers-color-scheme: light) {body,html {background: white !important;color: black !important;}} */

.marker-brake {background:url(img/markers.svg) 0 0; width: 64px;height: 64px;}
.marker-panicbutton {background:url(img/markers.svg) -64px 0; width: 64px;height: 64px;}
.marker-turn {background:url(img/markers.svg) -128px 0; width: 64px;height: 64px;}
.marker-speed {background:url(img/markers.svg) -192px 0; width: 64px;height: 64px;}
.marker-accelerate {background:url(img/markers.svg) -256px 0; width: 64px;height: 64px;}
.marker-shock,
.marker-severeshock {background:url(img/markers.svg) -320px 0; width: 64px;height: 64px;}
.marker-ignitionon,
.marker-tripstart {background:url(img/markers.svg) -384px 0; width: 64px;height: 64px;}
.marker-ignitionoff,
.marker-tripend {background:url(img/markers.svg) -448px 0; width: 64px;height: 64px;}
.marker-alarmin {background:url(img/markers.svg) -512px 0; width: 64px;height: 64px;}
.marker-stoptime {background:url(img/markers.svg) -576px 0; width: 64px;height: 64px;}
.marker-idletime {background:url(img/markers.svg) -640px 0; width: 64px;height: 64px;}
.marker-stationary {background:url(img/markers.svg) -704px 0; width: 64px;height: 64px;}
.marker-nogps {background:url(img/markers.svg) -768px 0; width: 64px;height: 64px;}


/* drag & drop */
.drag-drop-icon {position: absolute; left: -2rem; top: 0.6rem;}
.drag-drop-item {position:relative; line-height:1.5rem;}
.drag-drop-item:hover {cursor: grab;}
.drag-drop-item:hover .ci-drag-drop {visibility: visible; opacity: 1;}
.drag-drop-item .ci-drag-drop {font-size: 2.5rem; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s;}
/* end of drag & drop */



/* custom element tooltip */
[tooltip] {position: relative;}
[tooltip]:after {content: attr(tooltip); display: none; position: absolute; top: 110%; left: 1rem; z-index: 7000; pointer-events: none; padding: .5rem .8rem; line-height: 1rem; white-space: nowrap; text-decoration: none; text-indent: 0; overflow: visible; font-size: 1rem; font-weight: normal; color: #eee !important; background-color: #3e4244 !important; border: 2px solid #ccc !important; border-radius: 5px; text-shadow: 1px 0 1px #888; box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);}
[tooltip-top]:after {top: -2.5rem;}
[tooltip-right]:after {right: 0; left: unset;}
[tooltip]:hover:after {display: block;}
/* end of custom element tooltip */


/* Browser hacks and tricks that 'just work' */
input:-webkit-autofill, input:-webkit-autofill:focus, input:-internal-autofill-selected {transition: background-color 60000s 0s, color 60000s 0s;}