@CHARSET "UTF-8";

.its-display-none {
	display: none;
}

.its-alerts-map-container {
	border: 1px solid #ccc;
	height: 230px;
	margin: 0;
	position: relative;
}

.its-preloader-reports {
	background: url(../../resources/images/preloader.gif) no-repeat scroll 50% 50% transparent !important;
	margin: 0 auto;
	min-height: 200px;
	width: 100%;
}
.jasper-container{
	border:1px solid #eeeeee;

}
.map-context-menu {
	background-color: #333333;
	color: #fff;
	font-size: 12px;
}
.map-context-menu-item {
	padding: 5px;
	border-top: 1px solid #666666;
}
.map-context-menu-item:hover {
	background-color: #494949;
}

/* Map Popup - Incident */
.its-map-popup-incident {
	background-color: #fff;
	font-size: 12px;
	width: 250px;
}
.its-map-popup-incident table {
	background-color: #fff;
	border: none;
}
.its-map-popup-incident caption {
	text-align: left;
	text-transform: uppercase;
	background-color: #fff;
	font-weight: bold;
	font-size: 14px;
}
.its-map-popup-incident th {
	font-weight: bold;
	padding: 2px;
	text-align: left;
	vertical-align: top;
	white-space: normal;
	width: 120px;
}
.its-map-popup-incident td {
	padding: 2px;
	text-align: left;
	vertical-align: top;
	white-space: normal;
}
.its-map-popup-incident p {
	padding: 2px;
	text-align: left;
}

.context-menu{
	font-size: 13px;
	position: absolute;
	min-width: 100px;
	z-index: 1000;
	border: 0;
	padding: 0px;
	margin: 0px;
	display: none;
}
.context-menu .menu-arrow-up{
	height: 10px;
	display: block;
	background-image: url("../../resources/images/qtraffic/map-menu-arrow-down.png");
	background-repeat: no-repeat;
	background-position: left top;
}

.context-menu .menu-arrow-down{
	height: 10px;
	display: block;
	background-image: url("../../resources/images/qtraffic/map-menu-arrow-up.png");
	background-repeat: no-repeat;
	background-position: left bottom;
}
.context-menu .menu-arrow-top-right{
	background-position: right top;
}
.context-menu .menu-arrow-top-left{
	background-position: left top;
}
.context-menu .menu-arrow-bottom-right{
	background-position: right bottom;
}
.context-menu .menu-arrow-bottom-top-left{
	background-position: left bottom;
}

.context-menu ul {
    margin: 0;
    padding: 0;
    width:185px;
    list-style-type: none;
}

.context-menu div.info-window{
	margin: 0;
    padding: 0;
    min-width:185px;
    background-color: #333333;
    font-weight: normal;
    text-decoration: none;
    color: white;
}

.context-menu div.info-window-incidents{
    min-width:280px;
}
.context-menu div.info-window-incidents table{
    padding: 5px;
}
.context-menu div.info-window-incidents table td{
    font-size: 10px;
    white-space: normal;
}

.context-menu div.info-window table{
	margin: 0;
    padding: 10px 10px;
    border: 0;
}
.context-menu div.info-window table td, .context-menu div.info-window table th{
	text-align: left;
	font-size: 12px;
	font-weight: normal;
	padding: 0px;
}

.context-menu div.info-window table th.caption{
	font-size: 13px;
	padding-bottom: 3px;
}
.context-menu div.info-window table th{
	padding-right: 5px;
}

.context-menu ul li a, .context-menu ul li label {
    text-decoration: none;
    color: white;
    padding: 10px 25px;
    background-color: #333333;
    border-bottom: 1px solid #666666;
    display:block;
}

.context-menu ul li label {
	font-weight: bold;
}

.context-menu ul li.last a{
    border-bottom: 0;
}

.context-menu ul li a:visited {
    color: white;
}
.context-menu ul li a:hover, .context-menu ul li .current {
    color: white;
    background-color: #494949;
}
.its-table-simple {
    border-collapse: collapse;
	font-size: 12px;
    margin: 5px;
    padding: 0 5px;
	width: 97%;
}
.its-table-simple tbody {
}
.its-table-simple th {
    background: none repeat scroll 0 0 #020202;
	border: 1px solid #020202;
	color: #fff;
	padding: 5px;
	text-align: left;
	line-height: 16px;
}
.its-table-simple th label, .its-modal-container .its-table-simple th label {
    color: #FFFFFF;
}
.its-fleetmanagement-container .its-table-simple th div {
    margin: 0;
}
.its-table-simple > tbody > tr > td {
	background: none repeat scroll 0 0 #FFFFFF;
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 1px 0;
    line-height: 16px;
	padding: 5px;
}
.its-table-simple > tbody > tr > td:first-child {
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 1px 1px;
}
.its-checkbox-unselected {
    height: 16px;
    width: 16px;
    display: inline-block;
    background: url("/webPortal/javax.faces.resource/images/checkbox_not_selected.png.xhtml") no-repeat scroll 0 0 transparent;
    vertical-align: top;
}
.its-checkbox-selected {
    height: 16px;
    width: 16px;
    display: inline-block;
    background: url("/webPortal/javax.faces.resource/images/checkbox_selected.png.xhtml") no-repeat scroll 0 0 transparent;
    vertical-align: top;
}
.its-checkbox-selected-disabled {
	height:16px;
	width:16px;
	display: inline-block;
	background:url("/webPortal/javax.faces.resource/images/checkbox_selected_disabled.png.xhtml") no-repeat scroll 0 0 transparent;
	vertical-align: top;
}
.its-radiobutton-unselected {
    height: 16px;
    width: 16px;
    display: inline-block;
    background: url("/webPortal/javax.faces.resource/images/radiobutton_off_16X16.png.xhtml") no-repeat scroll 0 0 transparent;
    vertical-align: top;
}
.its-radiobutton-selected {
    height: 16px;
    width: 16px;
    display: inline-block;
    background: url("/webPortal/javax.faces.resource/images/radiobutton_on_16X16.png.xhtml") no-repeat scroll 0 0 transparent;
    vertical-align: top;
}

.leaflet-popup-scrolled {
    border-bottom: 0px !important;
    border-top: 0px !important;
    }

.leaflet-control-zoom {
	margin-bottom: 20px !important;
}

.leflet-custom-tooltip .leaflet-popup-content-wrapper {
	background-color: #333333;
	color: #ffffff;
	}

.leflet-custom-tooltip .leaflet-popup-tip {
	background: #333333 none repeat scroll 0 0;
	}


.leflet-custom-tooltip-white .leaflet-popup-content-wrapper {
	background-color: #ffffff;
	color: #000000;
	}

.leflet-custom-tooltip-white .leaflet-popup-tip {
	background: #333333 none repeat scroll 0 0;
	}

.leaflet-custom-popup-menu .leaflet-popup-content-wrapper {
  background:#333333;
  color:#fff;
  font-size:12px;
  line-height:24px;
  }
.leaflet-custom-popup-menu .leaflet-popup-content-wrapper a {
  color:#ffffff;
  font-weight: bold;
  }
.leaflet-custom-popup-menu  .leaflet-popup-tip {
  background: #333333 none repeat scroll 0 0;

  }

 .leaflet-custom-popup-menu-seperator {

    border-width: 1px 0 0;
    margin-bottom: 5px;
    margin-top: 5px;
  }

.leaflet-popup-content table th{
	padding:0 5px;
}

.leaflet-marker-icon-flip-vert {
        -moz-transform: scaleY(-1) !important;
        -o-transform: scaleY(-1) !important;
        -webkit-transform: scaleY(-1) !important;
        transform: scaleY(-1) !important;
        filter: FlipV !important;
        -ms-filter: "FlipV" !important;
}

/*.leaflet-marker-icon {
	border: none !important;
    background: transparent !important;
}*/

.its-remove-shape-control {
	background-color: #FFFFFF;
    border: 1px solid #7C7B74;
    color: red;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    padding: 3px 8px 4px 7px;
    text-align: center;
    position: absolute !important;
    z-index: 999;
    height: 34px;
    display: none;
}
.its-geofence-shape-props {
    background-color: #FFFFFF;
    border: 1px solid #7C7B74;
    display: none;
    margin-top: 5px;
    position: absolute !important;
    width: 350px;
    z-index: 999;
}
.its-geofence-shape-props div{
	margin-bottom: 0 !important;
}
.its-geofence-shape-props .its-geofence-shape-props-head {
	font-weight: bold;
	cursor: pointer;
	padding: 5px 10px;
}
.its-geofence-shape-props .its-geofence-shape-props-content {
	display: none;
	border-top: 1px solid #ccc;
	padding: 5px;
}
.its-geofence-shape-props .its-geofence-shape-props-content-label {
	float: left;
	width: 25%;
	min-height: 20px;
}
.its-geofence-shape-props .its-geofence-shape-props-content-value {
	float: left;
	width: 70%;
	min-height: 20px;
}
.its-geofence-shape-props .its-geofence-shape-props-content-value-help {
	float: left;
	width: 65%;
	color: #8E8B87;
	font-style: italic;
	min-height: 20px;
}
.its-fd-veh-popup {

}

.its-fd-veh-popup h4 {
	margin-bottom: 5px;
    margin-left: 0;
    padding-left: 0;
}

.its-fd-veh-popup img {
	vertical-align: middle;
	margin-right: 7px;
}

.its-fd-veh-popup label {
	font-weight: bold;
	margin-right: 5px;
	display: inline;
	font-size: 1em;
	color: #333333;
}

.its-fd-veh-popup .its-fd-veh-popup-info-row {
	margin-bottom: 5px;
}

.its-fd-veh-popup .location-input {
	border: 1px solid grey;
	margin: 5px 5px 5px 0;
    width: 180px;
}

.its-fd-veh-popup .input-form-ctnr {
	background-color: #ededed;
    padding: 5px 10px;
}

.its-icon-camera {
    display: inline-block;
    height: 24px;
    vertical-align: middle;
    width: 24px;
}
.its-default-camera{background: url("../../resources/images/icon_cctv_camera.png") no-repeat}
.its-default-camera:hover{background: url("../../resources/images/icon_cctv_camera_mo.png") no-repeat }
.its-assign-camera{background: url("../../resources/images/icon_cctv_camera_assign.png") no-repeat }
.its-unassign-camera{background: url("../../resources/images/icon_cctv_camera_unassign.png") no-repeat }
.its-inactive-camera{background: url("../../resources/images/icon_cctv_camera_inactive.png") no-repeat }

.its-content .camera-list{list-style:none; padding:0; margin:10px 0}

.camera-list li{margin:0 10px 0 0; display:inline-block}
.its-clear-b {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.its-fleetmanagement-map-popup {
	background: none repeat scroll 0 0 #FFFFFF;
    color: #333333;
    font-size: 12px;
 /*   height: 260px;*/
   /* overflow-y: auto; */
   width: 556px;
}
.its-fleetmanagement-map-popup-traffic {
	height: auto;
	min-width: 300px;
    width: auto;
}
.its-fleetmanagement-map-popup-historical {
	/*width: 285px;
	height: 220px;*/
}
.its-fleetmanagement-map-popup table {
	border-collapse: collapse;
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 0 1px;
	float: left;
	font-size: 12px;
	width: 266px;
}
.its-fleetmanagement-map-popup th {
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 0 0 1px 0;
	padding: 3px 5px;
	text-align: left;
	vertical-align: top;
}
.its-fleetmanagement-map-popup td {
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 1px 0;
	padding: 3px 5px;
}
.labelless-calendar .form-control-feedback {
	top: 0;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-table-alerts {
	background: none repeat scroll 0 0 #ffcccc;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-table-alerts img {
	margin-right: 5px;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-table-info {
	background: none repeat scroll 0 0 #666;
	color: #fff;
}
.its-fleetmanagement-map-popup table {
	border-collapse: collapse;
    border-color: #ccc;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 0 1px;
	float: left;
	font-size: 12px;
	width: 266px;
}
.its-fleetmanagement-map-popup caption {
    text-align: left;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-details {
    float: left;
    width: 266px;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-more {
	float: left;
    width: 265px;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-more .its-table-simple {
    width: 254px;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-more h3 {
	font-size: 12px;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-more ol {
	padding-left: 15px;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-more ol li {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.its-fleetmanagement-map-popup .its-fleetmanagement-map-popup-more a {
	font-weight: bold;
}
.its-fleetmanagement-map-popup-traffic table {
	width: auto;
}
.its-fleetmanagement-map-popup-traffic th {
	width: 50%;
}
.its-fleetmanagement-map-popup-traffic td {
	width: 50%;
}
.its-map-tooltip-content .label-header, .its-map-tooltip-content .label-value{
	color:#000;
	display: -webkit-box;
}
.its-text-normal {
	font-weight: normal !important;
}
.its-table-simple  span.its-table-right-table-alert-icon {
    background: rgba(0, 0, 0, 0) url("") no-repeat scroll center center;
    color: #fff;
    display: inline-block;
    height: 10px;
    line-height: 13px;
    margin: 0 5px;
    position: relative;
    text-align: center;
    vertical-align: initial;
    width: 20px;
}
.map-container-fixed-height-480{
	width:100%;
	height:480px
}
.its-wrap-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.its-tooltip {
	clear: both;
	position: relative;
	z-index: 101;
	width: 250px;
}
.traffic-report-icon {
	background: url(../../resources/images/left-global-menu/traffic-report.png) no-repeat
}

.block-size{
	width: 100%;
	height: 100%


}

.hide-add-all .ui-picklist-button-add-all {
	display: none;
}
.hide-remove-all .ui-picklist-button-remove-all {
	display: none;
}
.hide-border tbody td {
	border: none;
}

.its-highlight-overspeeding {
    background-color: #FFCCCC !important;
}
input[type=text]::-ms-clear { display: none; }

.ui-fileupload-choose input[type=file] {
	width: 100px;
	height: 100px;
}

.leaflet-sidebar {
	height: auto !important;
}
.leaflet-sidebar > .leaflet-control {
	width: auto !important;
	height: auto !important;
}
.ui-datatable-no-col-header > thead {
    display: none;
}
.row-expansion-datatable > thead th {
    background-color: #eaeaea !important;
}

.ui-datatable.borderless thead th,
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
}

.ui-datatable-no-bgcolor-rows > tbody > tr {
    background-color: white;
}

.leaflet-popup-content-sm {
	min-width:250px;
}

.ui-datatable-no-pad thead th, .ui-datatable-no-pad tbody td, .ui-datatable-no-pad tfoot td, .ui-datatable-no-pad tfoot th {
	padding: 0px !important;
}

.form-control-disabled-no-bg {
	background-color: inherit !important;
}

.leaflet-popup-table {
	border-collapse: collapse;
	width: 100%;
}
.leaflet-popup-table th {
    background: none repeat scroll 0 0 #f5f5f5;
    border: 1px solid #eeeeee;
    padding: 3px !important;
}
.leaflet-popup-table > tbody > tr > td {
    border-color: #eeeeee;
    border-style: solid;
    border-width: 0 1px 1px 0;
	padding: 3px;
}
.leaflet-popup-table > tbody > tr > td:first-child {
    border-color: #eeeeee;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    padding: 3px;
}

.leaflet-popup .brand-header a {
	color: #ee5329;
}

.z-index-1k {
	z-index: 1000 !important;
}

.cm-map-search-container1 {
	z-index: 1000 !important;
    left: 25% !important;
    width: 450px !important;
}

.cm-map-search-container2 {
	z-index: 1000 !important;
    left: 49% !important;
    width: 450px !important;
}

.ttdashboard-flexible-container {
	display:flex; flex-direction:column; height:100vh;
}

.ttdashboard-flexible-container .ttdashboard-fit-height {
	min-height: -webkit-calc(100vh - 170px);
}

.ttdashboard-flexible-container .zero-flex {
	flex:0;
}

.ttdashboard-flexible-container .full-height-flex {
	flex:auto;
}

.ttdashboard-flexible-container .footer-flex{
	flex:0.7;
}

.date-range-picker-container select {
	margin-bottom: 5px;
}

/*.c3-region.congestion-normal {
    fill: #61D466;
}

.c3-region.congestion-medium {
    fill: #FE964F;
}

.c3-region.congestion-high {
    fill: #F03033;
}

.c3-region.congestion-severe {
    fill: #9C1214;
}*/

.c3-ygrid-line.congestion-normal line {
    stroke: #ccc;
    stroke-dasharray: 3;
}

.c3-ygrid-line.congestion-medium line {
    stroke: #ccc;
    stroke-dasharray: 3;
}

.c3-ygrid-line.congestion-high line {
    stroke: #ccc;
    stroke-dasharray: 3;
}

.c3-ygrid-line.congestion-severe line {
    stroke: #ccc;
    stroke-dasharray: 3;
}

.c3-axis-y text {
  font-size: 12px; 
}

.c3-axis-x text {
  font-size: 12px; 
}

.heat-map-grad-label {
	display: inline-block;
	margin-right: 15px;	
}

.heat-map-grad {
	height: 10px;
    width: 50px;
    display: inline-block;
}

.heat-map-low-grad {
    background: rgb(60,182,44);
    background: linear-gradient(90deg, rgba(60,182,44,1) 0%, rgba(171,224,152,1) 35%, rgba(221,249,105,1) 100%);
}

.heat-map-medium-grad {
    background: rgb(251,228,105);
	background: linear-gradient(90deg, rgba(251,228,105,1) 0%, rgba(247,176,51,1) 35%, rgba(245,134,8,1) 100%);
}

.heat-map-high-grad {
    background: rgb(233,116,82);
	background: linear-gradient(90deg, rgba(233,116,82,1) 0%, rgba(158,24,17,1) 35%, rgba(93,14,6,1) 100%);
}

.heat-map-grad-no-data {
	background-color: #cccccc
}

#page-loader-animation {
	border: 12px solid #f3f3f3;
	border-radius: 50%;
	border-top: 12px solid #444444;
	width: 70px;
	height: 70px;
	animation: spin 1s linear infinite;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

@keyframes spin { 
	100% { transform: rotate(360deg);}
}

.route-highlighted {
	border-right: 3px solid #f3bc7e;
    border-left: 5px solid #f3bc7e;
    border-top: 2px solid #f3bc7e;
    border-bottom: 2px solid #f3bc7e;
}

.traffic-dashboard-map-container {
	height: calc(100vh - 180px); 
}

.traffic-dashboard-map-container2 {
	height: calc(100vh - 230px); 
}

.traffic-dashboard-map-container-overspeed {
	height: calc(50vh - 110px); 
}

/*.input-group-btn>.ui-widget { !* Override this class from bsf.css that causes issue *!
    font-size: revert;
}*/

.corridor-map-search-container {
	z-index: 1000 !important;
}

.map-search-container .ui-autocomplete-dd-input {
	display: inline;
}

.batch-options td:first-child {
	width: 20%;
}

.maplibregl-marker-handcursor {
	cursor: pointer;
  }
  .maplibre-custom-control-info {
	color: #7482AD;
	background-color: #0c1427;
	padding: 5px;
	font-style: italic;
  }
  
  .maplibre-number-marker {width:0; height:0;}
  .maplibre-number-marker  span {
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	width: 30px;
	height: 30px;
	color:#fff;
	background: #f84619;
	border:solid 2px;
	border-radius: 0 70% 70%;
	box-shadow:0 0 2px #000;
	cursor: pointer;
	transform-origin:0 0;
	transform: rotateZ(-135deg);
	font-size: 1.5em;
  }
  .maplibre-number-marker b {transform: rotateZ(135deg)}
  .maplibre-number-marker h5 {
	position: absolute;
	top: -65px;
	left: -50px;
	color: #f84619;
	font-weight: bold;
	width: 100px;
	text-align: center;
  }
  
  .queuePopupSize {
  	width: 150px;
  	text-align: center;
  }
  
  .qtraffic-leaflet .maplibregl-ctrl-top-right {
  	margin-right: 50px;
  }
  
  .qtraffic-leaflet .maplibregl-ctrl-bottom-right {
  	margin-right: 50px;
  }
  
  .large.tooltip-inner {
    max-width: 400px;
    width: 400px;
    text-align: left;
  }
  
  .incident-header {
  	color: white;
  }