@charset "UTF-8";
/*@import 'window.css';*/

.xdebug-error {color: #333;}
.xdebug-var-dump {background-color: #eee;padding: 1rem;border-radius: 1rem;}

body,html{background:#23262d; color:#eee !important; font:14px/1.2 'Exo 2', Arial, Helvetica, sans-serif; padding-top:35px; margin-bottom:35px; -webkit-scrollbar-color: #777 #333; scrollbar-color: #777 #333;/* scrollbar-width: thin;*/}
table td, table th{font-size: 14px;}
.dropdown-menu {-webkit-scrollbar-color: auto !important; scrollbar-color: auto !important;/* scrollbar-width: thin;*/}
.pieChart{width:130px; margin:0 auto; position:relative;}
.pieChart span{position:absolute; width:130px; text-align:center; font-size:22px; line-height:130px;}
.pieChart i{position:absolute; width:130px; line-height:180px; text-align:center; font-size:12px; opacity:0.8;}
.pieName{text-align:center;}
#flotTip {background-color:#000 !important; background-color: #000000cc !important; color: #fff !important; border: none !important;}
.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 {color:#3677ba;font-size: 1.2rem; padding-right:3px;}
.navbar-dark {background-color: #17171a !important}
.navbar-dark .nav-link {color: #9d9d9d; transition: color 0.4s ease}
.navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus {color: #eee}
.navbar-dark .dropdown-item:focus, .navbar-dark .dropdown-item:hover {background-color: #e9e9e9}
.navbar-dark .dropdown-toggle::after {color:#3677ba}
.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-body{background:#64686e; color:#eee; padding: 1.5rem 1.75rem;}
.modal-content{background:#48535a; color:#eee; border-radius: .5rem; box-shadow: 0 0 .7rem #000;}
.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 > 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: #23262d; 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;}
/* .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); 
}
*/
.hidden {display: none !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;}
/* 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;}

.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{background-color:#428bca; cursor:pointer;}
.table tbody {border: 0 !important;}
.table tbody::before {content: ''; display: table-row; height: 2px !important;}
.trgroup td {font-size: 1.3rem;}
.whiteLink{color:#e0e0e0;}
.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;}
.weekdays input {position: absolute; opacity: 0;}
.weekdays input + label {display: inline-block; cursor: pointer; background: #64686e; color: #fff; border: 1px solid transparent;}
.weekdays input:checked + label {background: #3B88FD; 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:"\00B6"; color: #3B88FD;}
input:not(:checked) + .videoreq:before {content:"\00B7"; 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;}
.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 .statusTitle-sm{border-bottom: #e0e0e0 1px solid; text-transform:uppercase; font-size:20px;}
.modal-body .backIcon{position:absolute; top:5rem; right:4rem; font-size:10rem; opacity:0.1;}
.dashArea {resize: none; font:12px/1.2 'Exo 2', Arial, Helvetica, sans-serif;}

#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:#63870a;/*#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.Crashboxx, .badge-default.AlarmIn, .badge-default.SevereShock, .badge-default.CameraObstruction{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;}

/* media history */
.mh-video-container{display: inline-block; position: relative; cursor: pointer; width:250px; margin:10px; border:2px solid #1e1e1e; border-radius:4px; box-shadow: #1b1b1b 0 0 8px; animation: fadeIn 0.5s;}
.mh-video-container:hover{border:2px solid #3677ba;}
.mh-video-container video, .mh-video-container img{width:100%; height: 138px; background-color: black;}
.mh-video-container p{font-size: 14px; text-align: left; margin: 10px 15px; position: relative;}
.mh-video-container span{display: block;}
.mh-video-container .title{margin: 10px 15px 25px;}
.mh-video-container .event{font-size: 16px; font-weight: bold; padding-top: 2px; width: 65%; text-overflow: ellipsis;overflow: hidden; white-space: nowrap;}
.mh-video-container .icon{position: absolute; right: 0; top: -12px; font-size: 48px;}
.mh-video-container .duration{position: absolute; right: 6px; top: 5px; font-size: 12px; background-color: #0006; padding: 3px 6px; border-radius: 4px;}
.channel{position: absolute; left: 6px; top: 5px; font-size: 12px; background-color: #0006; padding: 3px 6px; border-radius: 4px;}
/* 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 #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: 15px 0; border-top: 1px solid #363636; background-color: #1d1d1d;}
.mh-row-video-info p > span {margin-right: 30px;}
.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: 18px; 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 {position: absolute; z-index: 1; top: 0; background: #111; left: 0; width: 100%; height: auto; margin-top: 20px; margin-bottom: 60px; height: 0; overflow: hidden; -webkit-transition: height 0.3s ease-in; -moz-transition: height 0.3s ease-in; -o-transition: height 0.3s ease-in; transition: height 0.3s ease-in;}
.GI_TW_expander.animating {overflow: hidden !important;}
.GI_TW_expander.opened {overflow: visible; padding: 15px 0}
.GI_TW_expander .GI_TW_pointer {position: absolute; margin-top: -27px; margin-left: 10px; 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 {width: 84%; margin: 0 auto;}
.GI_TW_expander .GI_TW_expander-inner .GI_TW_fullimg {position: relative; width: 100%; height: 360px; margin: 10px 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: #23262d; font-size: 34px;}
.GI_TW_expander .GI_TW_close {position: absolute; width: 40px; height: 40px; top: 10px; right: 10px; 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: 20px;}
.GI_TW_expander .GI_TW_arrow.GI_TW_prev {left: 20px;}
/* end of media history */

/* old media history */
.mhListItem{position:relative; border-bottom: 1px solid grey; padding: 8px;}
.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 */

/* safety score */
.sscore {white-space: nowrap;overflow-x: auto;padding-bottom: 3px;}
.sscore .btn {width: 69px;height: 65px;font-size: 12px;border-radius: 25px 4px 4px;border: 2px solid grey;background-color: grey;color: #fff;display: inline-flex;justify-content: center;align-items: center;padding: 6px 4px 4px 6px;margin: 1px;outline: none;}
.sscore label {display: block;width: 100%;max-height: 100%;overflow: hidden;white-space: normal;text-align: center;font-weight: normal;cursor: pointer;}
.sscore .btn.active {border-radius: 4px;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 */

.thin{font-weight:normal;}

.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;}

/* 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.5em;}
.reportbox i{font-size: 2.5em;}

.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;}

/* colors */
.e-red:after{border-bottom:4px solid #c93030; border-right:16px solid #c93030;}
.e-yellow:after{border-bottom:4px solid #C67C2A; border-right:16px solid #C67C2A;}
.e-green:after{border-bottom:4px solid #648A3C; border-right:16px solid #648A3C;}
.e-grey:after{border-bottom:4px solid #6D6E66; border-right:16px solid #6D6E66;}
.e-blue:after{border-bottom:4px solid #3677ba; border-right:16px solid #3677ba;}

.ico-red{color: #c93030 !important;} /* red */
.ico-yellow{color:#C67C2A !important;} /* yellow */
.ico-green{color: #648A3C !important;} /* green */
.ico-grey{color: #6D6E66 !important;} /* grey */
.ico-cold-grey{color: #64686e !important;} /* cold grey */
.ico-light-grey{color: #999 !important;} /* light grey */
.ico-blue{color: #2fa6f1 !important;} /* blue */
.ico-blue-menu{color: #3677ba !important;} /* blue menu icons*/
.ico-orange{color: #f60 !important;} /* orange */
.ico-bg{color: #23262d !important;} /* same as bg-color */

.badge-blue{background-color: #337ab7; color: #fff;}
.badge-green{background-color: #648A3C; color: #fff;}
.badge-orange{background-color: #C67C2A; color: #fff;}
.badge-red{background-color: #c93030; color: #fff;}
.badge-dark{background-color: #48535a; color: #fff;}

.border-red{border-color: #c93030 !important;}
.border-yellow{border-color: #C67C2A !important;}
.border-green{border-color: #648A3C !important;}
.border-grey{border-color: #6D6E66 !important;}
.border-light-grey{border-color: #777 !important;}
.border-blue{border-color: #3677ba !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*/

.btn-primary {color: #fff; background-color: #337ab7; border-color: #2e6da4;}
.btn-primary:hover, .btn-outline-primary:hover {color: #fff; background-color: #286090; border-color: #204d74;}
.btn-primary.focus, .btn-primary:focus {color: #fff; background-color: #286090; border-color: #122b40;}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {color: #fff; background-color: #0062cc; border-color: #005cbf;}
.btn-outline-primary {color: #777; background-color: transparent; border-color: #777;}

.btn-green {color: #fff; background-color: #648A3C; border-color: rgb(90, 124, 53);}
.btn-green:hover {color: #fff; background-color: #577734; border-color: #577734;}
.btn-green.focus, .btn-green:focus {color: #fff; background-color: #577734; border-color: #344720;}
.btn-orange {color: #fff; background-color: #e08c18; border-color: #cc7a08;}
.btn-orange:hover {color: #fff; background-color: #cc7a08; border-color: #cc7a08;}
.btn-orange.focus, .btn-orange:focus {color: #fff; background-color: #cc7a08; border-color: #6b4418;}
.btn-red {color: #fff; background-color: #c93030; border-color: #b62b2b;}
.btn-red:hover {color: #fff; background-color: #af2a2a; border-color: #af2a2a;}
.btn-red.focus, .btn-red:focus {color: #fff; background-color: #af2a2a; border-color: #7a1d1d;}

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

/* 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 */

/* map elements */
#_mapMsg {position:absolute; top:200px; left:0; width:100%; text-align:center; font-size:26px; font-weight:bold; color:#fff; display:none; background-color: #00000080; padding:30px;}
#mapView, #MapFence, #routeMap {height: 600px; width: 100%; color:#000 !important;}
#_mpCloseBtn {right: -30px;top:35%;position: absolute;background:#23262d;cursor:pointer;padding: 30px 10px;border-radius: 0 10px 10px 0;}
#_mpAtt {right: -4rem;top: 0;position: absolute;background: #23262d;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;}
#_onMapData ._showEvent:hover{background-color: #17171a}
#_onMapData .selected:not(.btn){background-color: #17171a}
#_onMapRouteEvents {display: none}
#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:24px; color:#4f5456;}
.mdFilters i:hover{color:#898989;}

.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;}

.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 #648A3C; border-right: 10px solid #648A3C;}

/* 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; opacity:0.75;}
.mlab0 {color: #fff; background-color: #B21501;}
.mlab1 {color: #fff; background-color: #eb7e13;}
.mlab2 {color: #fff; background-color: #00A350;}
.mlab3 {color: #fff; background-color: #777;}
/* .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, .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{display:none !important;}
/*style google maps buttons*/
.gm-style-mtc div{height:30px !important;padding: 0px 10px !important;font-size: 1rem !important;}


/* 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{ margin: 20px auto; border: 2px solid grey; border-radius: 6px; box-shadow: black 0 4px 8px;}
/* end of user guides howto */

.bold {font-weight: bold;}
[role=button] {cursor: pointer;}
.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;}
hr {border-top: 1px solid #48535a;}

.aniAttention {position: relative;}
.aniAttention:before {
  content: "\006A"; 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: 768px) {
	.modal-dialog  {width:55rem;max-width:55rem;}
	.modal-80-percent{width:80% !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;}
    .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: 575px){
    .mapPanelMobile {position: absolute; z-index: 11; width: 240px; left: -240px; transition: 500ms; display: block !important; padding-right: 15px !important; background:#23262d;}

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