/* @import url('https://fonts.googleapis.com/css?family=Roboto'); */



/* */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('./roboto-fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Roboto'), local('Roboto-Regular'),
		 url('./roboto-fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('./roboto-fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('./roboto-fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('./roboto-fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('./roboto-fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }

/* */

body {
	background-color: #eee;
}

.mb10 {
	margin-bottom: 10px;
}

.mb15 {
	margin-bottom: 15px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb30 {
	margin-bottom: 30px;
}

.mr2 {
	margin-right: 2px;
}

.mr5 {
	margin-right: 5px;
}

.mr10 {
	margin-right: 10px;
}

.ml10 {
	margin-left: 10px;
}

.error {
	color: #e60000;
	font-size: .95em;
	display: block;
}

/* Custom buttons CSS */
.btn-default-alt {
	color: #222222 !important;
	background-color: #ffffff !important;
	border-color: #222222 !important;
}

.btn-default-alt:hover, .btn-default-alt:focus, .btn-default-alt.focus, .btn-default-alt:active, .btn-default-alt.active, .open > .dropdown-toggle.btn-default-alt {
	color: #ffffff !important;
	background-color: #090909 !important;
	border-color: #040404 !important;
}

.btn-primary-alt {
	color: #2780e3;
	background-color: #ffffff;
	border-color: #2780e3;
}

.btn-primary-alt:hover, .btn-primary-alt:focus, .btn-primary-alt.focus, .btn-primary-alt:active, .btn-primary-alt.active, .open > .dropdown-toggle.btn-primary-alt {
	color: #ffffff !important;
	background-color: #1967be;
	border-color: #1862b5;
}

.btn-success-alt {
	color: #3fb618;
	background-color: #ffffff;
	border-color: #3fb618;
}

.btn-success-alt:hover, .btn-success-alt:focus, .btn-success-alt.focus, .btn-success-alt:active, .btn-success-alt.active, .open > .dropdown-toggle.btn-success-alt {
	color: #ffffff !important;
	background-color: #2f8912;
	border-color: #2c8011;
}

.btn-info-alt {
	color: #9954bb !important;
	background-color: #ffffff;
	border-color: #9954bb !important;
}

.btn-info-alt:hover, .btn-info-alt:focus, .btn-info-alt.focus, .btn-info-alt:active, .btn-info-alt.active, .open > .dropdown-toggle.btn-info-alt {
	color: #ffffff !important;
	background-color: #7e3f9d;
	border-color: #783c96;
}

.btn-warning-alt {
	color: #ff7518;
	background-color: #ffffff;
	border-color: #ff7518;
}

.btn-warning-alt:hover, .btn-warning-alt:focus, .btn-warning-alt.focus, .btn-warning-alt:active, .btn-warning-alt.active, .open > .dropdown-toggle.btn-warning-alt {
	color: #ffffff;
	background-color: #e45c00;
	border-color: #da5800;
}

.btn-danger-alt {
	color: #ff0039;
	background-color: #ffffff;
	border-color: #ff0039;
}

.btn-danger-alt:hover, .btn-danger-alt:focus, .btn-danger-alt.focus, .btn-danger-alt:active, .btn-danger-alt.active, .open > .dropdown-toggle.btn-danger-alt {
	color: #ffffff;
	background-color: #cc002e;
	border-color: #c2002b;
}

/* Loading Modals CSS */
.loading-modal, .loading-modal-opaque {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
}

.loading-modal-map {
	background: rgba( 255, 255, 255, 0.25 ) 
                url('../images/preview.gif') 
                50% 50% 
                no-repeat;
} 

.loading-modal {
	background: rgba( 255, 255, 255, .5 ) 
                url('../images/loader-cube.gif') 
                50% 50% 
                no-repeat;
}

.loading-modal-opaque {
	background: rgba( 255, 255, 255, 1 ) 
                url('../images/loader-cube.gif') 
                50% 50% 
                no-repeat;
}

body.loading {
    overflow: hidden;   
}

body.loading .loading-modal, body.loading .loading-modal-opaque {
    display: block;
}

body,h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	-webkit-font-smoothing: antialiased;
	font-family: "Roboto",sans-serif;
}

/* Main panel and panel body CSS */
.contentpanel {
	position: relative;
	margin-top: -10px;
	margin-left: 10px;
	margin-right: 10px;
}

.panel-report-top {
	background: #e2e2e2 !important;
	border-bottom: 1px solid #c1c1c1 !important;
	margin-top: 60px;
	z-index: 1000;
	position: fixed;
	display: block;
	width: 100%;
	top: -10px;
}

div.panel-heading {
	padding: 10px 10px 0px 10px;
}

.speed-chart {
	width: 100%;
	height: 250px;
}

span.help-block {
	font-size: 13px;
	margin-bottom: 0px;
}

.speed-normal {
	color: #2EA737;
}

.speed-above {
	color: #2E77E8;
}

.speed-halt {
	color: red;
}

.speed-below {
	color: #696969;
}

.speed-normal-badge {
	background-color: #2EA737 !important;
	color: #FFF !important;
}

.speed-above-badge {
	background-color: #2E77E8 !important;
	color: #FFF !important;
}

.speed-halt-badge {
	background-color: red !important;
	color: #FFF !important;
}

.speed-below-badge {
	background-color: #696969 !important;
	color: #FFF !important;
}

.speed-late-badge {
	background-color: #ff9800  !important;
	color: #FFF !important;
}

ul.dropdown-menu.filterDropdown li a {
  	padding: 3px 12px;
}

ul.dropdown-menu i.fa {
	width: 18px;
	text-align: center;
}

/* Geofence list styles */
div.geofences {
	margin-top: 50px;
	background-color: white;
	padding: 0px;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	border-left: 1px solid #8EBEF2;
}

.list-item-container {
	background: white;
	display: inline-block;
	list-style: none;
	position: relative;
	width: 100%;
	border-bottom: 2px solid #e6e6e6;
}

.list-item-container.disabled {
	background: #eee;
}

.list-item {
	cursor: pointer;
	display: block;
	text-decoration: none;
	position: relative;
	margin: 12px 14px;
}

.list-item .heading {
	color: #414141;
	font-size: 16px;
	font-weight: normal;
	white-space: pre-wrap;
	overflow: hidden;
	line-height: normal;
	margin-bottom: 6px;
}

.list-item-container.disabled .heading {
	color: #555;
}

.list-item-container.disabled .sub-line-1, .list-item-container.disabled .sub-line-2 {
	color: #777;
}

.list-item-container .disable-geofence {
	margin-top: 10px;
    margin-right: 15px;
    font-size: 16px;
}

.list-item .info {
	border-bottom: 1px dotted #e6e6e6;
}

.list-item .sub-line-1 {
	font-size: 14px;
	color: #666666;
	line-height: normal;
	overflow: hidden;
	margin-bottom: 5px;
	text-overflow: ellipsis;
	white-space: pre-wrap;
}

.list-item .sub-line-2 {
	font-size: 15px;
	color: #444444;
	line-height: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 5px;
	white-space: nowrap;
}

.geofences .list-heading {
	display: inline-block;
	width: 100%;
	font-weight: bold;
	position: relative;
	padding: 10px 20px 10px 10px;
	border-bottom: 1px solid #8EBEF2;
}

li.list-item-container.selected {
	background-color: #eee;
}

a.geofence-item {
	text-decoration: none;
}

div.geofence-list {
	margin-bottom: 50px;
}

.add-geofence-form .form-group {
	margin-left: 10px;
	margin-right: 25px;
}

.chosen-single {
	padding: 10px 10px 10px !important;
	font-size: 14px;
}

input.loading-input {
  background-image: url('../images/loaders/loader1.gif');
  background-repeat: no-repeat;
  background-position: 98%;
}

.reports-panel {
  margin-top: 160px;
}

.reports-panel .panel-heading {
	padding-bottom: 0px !important;
}

.btn.loading {
  background-image: url('../images/loaders/loader1.gif');
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: right center;
  padding-right: 20px;
}

/* List CSS Style for Home screen */
.list-item-container {
	background: white;
	display: inline-block;
	list-style: none;
	position: relative;
	width: 100%;
	border-bottom: 2px solid #e6e6e6;
	min-height: 50px;
}

.list-item {
	cursor: pointer;
	display: block;
	text-decoration: none;
	position: relative;
	margin: 12px 14px;
}

.list-item .heading {
	color: #074C11;
	font-size: 18px;
	font-weight: normal;
	overflow: hidden;
	line-height: normal;
	margin-bottom: 7px;
}

.list-item .info .location_details {
	color: #837C7C;
	margin-bottom: 4px;
	font-size: 12px;
}

.list-item .info .sub-line-1 {
	font-size: 13px;
	color: #7f7f7f;
	line-height: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-header-tabs {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 50px;
	z-index: 2;
	text-align: center;
	width: 100%;
	background: #fff;
	border-right: 1px solid rgba(0,0,0,0.1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.list-header-tabs .tab {
	background: #f4f4f4;
	width: 100%;
	display: inline-block;
	float: left;
	cursor: pointer;
	color: #2e2e32;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 80px;
	font-size: 16px;
	border-bottom: 1px solid #e6e6e6;
}

.list-header-tabs .tab.selected {
	background: #ffffff;
	border-bottom: none;
}

.list-header-tabs .tab .summary {
	line-height: 50px;
	font-weight: 300;
}

.speed-filter {
	margin-left: 5px;
	margin-right: 5px;
	width: 350px;
}

.sidebar-shown {
	right: 360px !important;
}

.overlay-hidden {
	display: none;
}

.gmodal-details {
    font-size: 12px;
    font-weight: 100;
    color: #777;
}

.toggle-handle.btn-default {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
}

tr.tr-halt {
    background-color: #f1dede;
}

tr.tr-normal {
    background-color: #e0f0d6;
}

tr.tr-overspeeding {
    background-color: #daedf8;
}

.btn-grey {
	color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-grey:hover {
	color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-grey.focus, .btn-grey:focus, .btn-grey:hover {
    color: #333;
    text-decoration: none;
}

tr.selected {
	background: #D1EEEE;
    color: #333;
}

.tableDevices td {
	vertical-align: middle !important;
}

.tableDevices h5.device-title {
	margin: 5px 0px;
}

.geo-item {
	width: 85%;
}

span.disable-geofence {
	
}

input.search-field {
    padding-left: 35px;
    background-image: url('../images/icon-search.png');
    background-repeat: no-repeat;
    background-position: 8px center;
    opacity: 0.9;
    font-weight: 200;
}

/* Timeline CSS */
.timeline {
    border-collapse:collapse;
    border-spacing:0;
    display:table;
    position:relative;
    width:100%;
}
.timeline .time-show {
    margin-right:-75px;
    margin-top:30px;
    position:relative;
    margin-bottom:30px;
}
.timeline .time-show.first {
    /*margin-top:-80px;*/
}
.time-show .btn {
    width:150px;
}
.timeline .time-show a {
    color:#fff;
}
.timeline:before {
    background-color:#d8d9df;
    bottom:0px;
    content:"";
    left:50%;
    position:absolute;
    top:30px;
    width:1px;
    z-index:0;
}
h3.timeline-title {
    margin:0;
    color:#C8CCD7;
    font-size:20px;
    font-weight:400;
    margin:0 0 5px;
    text-transform:uppercase;
}
.t-info {
    color:#C8CCD7;
}
.timeline-item:before,.timeline-item.alt:after {
    content:"";
    display:block;
    width:50%;
}
.timeline-item {
    display:table-row;
}
.timeline-desk {
    display:table-cell;
    vertical-align:top;
    width:50%;
}
.timeline-desk h1 {
    font-size:16px;
    font-weight:300;
    margin:0 0 5px;
}
.timeline-desk .panel {
    display:block;
    margin-left:45px;
    position:relative;
    text-align:left;
    background:#fff;
}
.timeline-item .timeline-desk .arrow {
    border-bottom:8px solid transparent;
    border-top:8px solid transparent;
    display:block;
    height:0;
    left:-7px;
    position:absolute;
    top:13px;
    width:0;
}
.timeline-item .timeline-desk .arrow {
    border-right:8px solid #fff !important;
}
.timeline-item.alt .timeline-desk .arrow-alt {
    border-bottom:8px solid transparent;
    border-top:8px solid transparent;
    display:block;
    height:0;
    right:-7px;
    position:absolute;
    top:13px;
    width:0;
    left:auto;
}
.timeline-item.alt .timeline-desk .arrow-alt {
    border-left:8px solid #fff !important;
}
.timeline .timeline-icon {
    left:-60px;
    position:absolute;
    top:5px;
}
.timeline .timeline-icon {
    background:#C7CBD6;
    /*box-shadow:0 0 0 3px #C7CBD6;*/
}
.timeline-desk span a {
    text-transform:uppercase;
}
.timeline-desk h1.red,.timeline-desk span a.red {
    color:#EF6F66;
}
.timeline-desk h1.green,.timeline-desk span a.green {
    color:#39B6AE;
}
.timeline-desk h1.blue,.timeline-desk span a.blue {
    color:#56C9F5;
}
.timeline-desk h1.purple,.timeline-desk span a.purple {
    color:#8074C6;
}
.timeline-desk h1.light-green,.timeline-desk span a.light-green {
    color:#A8D76F;
}
.timeline-desk h1.yellow,.timeline-desk span a.yellow {
    color:#fed65a;
}
.timeline .timeline-icon.red {
    background:#EF6F66;
}
.timeline .timeline-icon.green {
    background:#39B6AE;
}
.timeline .timeline-icon.blue {
    background:#56C9F5;
}
.timeline .timeline-icon.purple {
    background:#8074C6;
}
.timeline .timeline-icon.light-green {
    background:#A8D76F;
}
.timeline .timeline-icon.yellow {
    background:#fed65a;
}
.timeline .timeline-icon {
    border-radius:50%;
    -webkit-border-radius:50%;
    display:block;
    height:30px;
    width:30px;
    text-align:center;
    color:#fff;
}
.timeline .timeline-icon i {
    margin-top:8px;
}
.timeline .timeline-icon i.fa-mobile {
	margin-top:0px;
}
.timeline-item.alt .timeline-icon {
    left:auto;
    right:-60px;
}
.timeline .time-icon:before {
    font-size:16px;
    margin-top:5px;
}
.timeline .timeline-date {
    left:-245px;
    position:absolute;
    text-align:right;
    top:12px;
    width:150px;
    display:none;
}
.timeline-item.alt .timeline-date {
    left:auto;
    right:-245px;
    text-align:left;
    display:none;
}
.timeline-desk h5 span {
    color:#999999;
    display:block;
    font-size:12px;
    margin-bottom:4px;
}
.timeline-desk .panel-body {
	background-color: white !important;
}
.timeline-item.alt:before {
    display:none;
}
.timeline-item:before,.timeline-item.alt:after {
    content:"";
    display:block;
    width:50%;
}
.timeline-desk p {
    font-size:14px;
    margin-bottom:0;
    color:#999;
}
.timeline-desk a {
    color:#1fb5ad;
}
.timeline-desk .panel {
    margin-bottom:5px;
}
.timeline-desk .album {
    margin-top:20px;
}
.timeline-item.alt .timeline-desk .album {
    margin-top:20px;
    float:right;
}
.timeline-desk .album a {
    margin-right:5px;
    float:left;
}
.timeline-item.alt .timeline-desk .album a {
    margin-left:5px;
    float:right;
}
.timeline-desk .notification {
    background:none repeat scroll 0 0 #FFFFFF;
    margin-top:20px;
    padding:8px;
}
.timeline-item.alt .panel {
    margin-left:0;
    margin-right:45px;
}
.mbot30 {
    margin-bottom:30px;
}
.timeline-item.alt h1,.timeline-item.alt p {
    text-align: right;
}
article.timeline-item.alt .notif-links {
    float: left;
}
article.timeline-item .notif-links {
	float: right;
}
.notification-items .panel-body {
    background-color: #f1f2f7;
}
.notification-items a {
    text-decoration: none;
}
.notification-items h4.panel-title {
    color: #2A7EEA;
    font-weight: 300;
    font-size: 16px !important;
}
span.badge-settings-green {
	background-color: #39B6AE !important;
    color: #FFF !important;
    font-size: 13px;
}

/* NOTIFICATION BAR CSS */
.dropdown-toggle i.fa.fa-globe {
    font-size: 19px;
}

.dropdown-toggle span.badge {
    position: absolute;
    font-size: 10px;
    font-weight: normal;
    right: 8px;
    top: 7px;
    padding: 3px;
    color: #FFFFFF;
    background-color: #D94F62;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px; 
    border-radius: 2px;
}

ul.dropdown-menu.notif-dropdown-list {
	width: 300px;
	height: auto;
	max-height: 380px;
	overflow-y: scroll;
}

ul.dropdown-menu.notif-dropdown-list li {
    border-bottom: 1px solid #eee;
}

ul.dropdown-menu.notif-dropdown-list li:last-child {
	border-bottom: 0;
	text-align: center;
}

ul.notif-dropdown-list .media:first-child {
	margin-top : 5px;
	padding-bottom: 5px;
}

ul.notif-dropdown-list .media>.pull-left {
    padding-right: 10px;
    padding-left: 5px;
    padding-top: 3px;
}

ul.notif-dropdown-list .media-body .notif-title {
	font-size: 14px;
}

ul.notif-dropdown-list .media .act-thumb {
	font-size: 20px;
}

ul.notif-dropdown-list .media-body .notif-desc {
	font-size: 12px;
    font-weight: 300;
    color: #555;
    margin-bottom: 0px;
}

/* Notification Settings Page CSS */
.notification-items .panel-heading {
	padding: 10px;
}

.notification-items .panel.panel-default {
	border: 1px solid #d1d1d1 !important;
}

.notification-items .panel-default > .panel-heading {
	background-color: #EEEEEE !important;
}

.allowPanelBodyScroll{
	height: 435px;
    overflow-y: auto;
}