@font-face {
    font-family: 'Montserrat light';
    src: url('../fonts/Montserrat-Light.ttf');
}
@font-face {
    font-family: 'Montserrat semibold';
    src: url('../fonts/Montserrat-SemiBold.ttf');
}
@font-face {
    font-family: 'Montserrat regular';
    src: url('../fonts/Montserrat-Regular.ttf');
}


body{
	font-family: 'Montserrat light';
	color: #666666;
	overflow-x: hidden;
}
body.body__home{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#18b7a0+0,16a0da+100 */
	background: #18b7a0; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #18b7a0 0%, #16a0da 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #18b7a0 0%,#16a0da 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #18b7a0 0%,#16a0da 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18b7a0', endColorstr='#16a0da',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	/*height: 100vh;
	display: flex;*/
}
body.body__home .container{
	/*display: flex;*/
	padding: 40px 0px;
}
body.body__home > .container > .row{
	width: 100%;
	align-self: center;
}


/* Default app css */
h3{
	margin-top: 0;
	margin-bottom: 30px;
}
.row{
	margin-left: 0;
	margin-right: 0;
}
.padding0{
	padding: 0;
}
.marginTop{
	margin-top: 20px;
}
.green-span{
	color: #16e600;
}
.red-span{
	color: #ff0000;
}
input.form-control{
	border-radius: 6px;
}
a,
button{
	outline: none !important;
}
.form-horizontal .form-group{
	margin-left: 0;
	margin-right: 0;
}
.panel-body{
	padding: 0;
}
.user-image-circle{
	width: 50px;
	height: 50px;
	background-color: #DFDFDF;
	border-radius: 100px;
	margin-left: 10px;
	align-self: center;
	display: flex;
}
.user-image-circle.user-has-image{
	background-color: transparent;
	background-size: auto 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.user-image-circle form{
	width: 100%;
	display: flex;
}
.user-image-circle label{
	align-self: center;
	margin: 0 auto;
}
#user-image{
	height: 70px;
	padding: 8px;
}


.container > .navbar-header,
.navbar-nav{
	margin: 0;
}

label{
	cursor: pointer;
}
body.body__interface button[type="submit"].remove-button{
	width: 30px;
	height: 30px;
	background: #ff0000;
	color: #fff;
	padding: 0;
	border-radius: 3px;
}
body.body__interface button[type="submit"].remove-button:hover{
	background: #c92424;
}
.glyphicon.glyphicon-calendar{
	left: -7px;
}
.glyphicon.glyphicon-trash{
	left: -1px;
}
.input-group.date .input-group-addon{
	padding: 8px 19px;
}
.message-glyphicon{
	margin-right: 5px;
}
.edit-button{
	width: 30px;
	height: 30px;
	color: #fff;
	background-color: #ff7e00;
	border-radius: 3px;
	display: block;
	transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    cursor: pointer;
    margin: 0 auto;
}
.edit-button:hover,
.edit-button:focus,
.edit-button:active{
	color: #fff;
	background-color: #ff7e00;
}
.edit-button .glyphicon{
	vertical-align: -5px;
}
.bubble{
	font-family: 'Montserrat semibold';
	width: 90px;
	background-color: transparent;
	justify-content: center;
	height: 39px;
	display: flex;
	padding: 5.5px 0;
	color: #fff;
}
body.body__interface .form-group.lang-form-group{
	display: inline-block;
}
body.body__interface .form-group.lang-form-group > .col-sm-4 > .col-xs-12{
	margin-bottom: 10px;
}
body.body__interface .form-group.lang-form-group .app-lang{
	width: 40px;
}
#ui-datepicker-div{
	z-index: 8888 !important;
}
.input-group-addon label{
	margin-bottom: 0px;
}

/* Status reminder */
.reminders-home .malfunction-list-container .title-row a{
	float: right;
}
.reminders-home .malfunction-list-container .title-row h3{
	display: inline-block;
}
.default-div-table-rows span.vertical-align-center.vehicle-current-status{
	display: flex;
	width: 100px;
	justify-content: right;
}
.default-div-table-rows span.vertical-align-center.vehicle-current-status > span,
.default-div-table-rows span.vertical-align-center.vehicle-current-status > div{
	align-self: center;
}
.default-div-table-rows span.vertical-align-center.vehicle-current-status > span{
	margin-right: 10px;
}
.default-div-table-rows .col-xs-3 .col-xs-11{
	display: flex;
	justify-content: center;
}
.default-div-table-rows .col-xs-3 .col-xs-1{
	display: flex;
}
.default-div-table-rows .col-xs-3 .col-xs-1 a{
	align-self: center;
}
.row-table-filters .panel.top-filters{
	margin-bottom: 10px;
}
.row-table-filters .col-xs-2{
	width: 12.5%;
}
.status-pending{
	width: 10px;
	height: 10px;
	border-radius: 20px;
	display: block;
	background-color: rgba(234,127,7,1);
}
.status-complete{
	width: 10px;
	height: 10px;
	border-radius: 20px;
	display: block;
	background-color: rgba(24,183,160,1);
}
.status-failed{
	width: 10px;
	height: 10px;
	border-radius: 20px;
	display: block;
	background-color: red;
}



.modal-dialog.modal-lg{
	border: 0;
}
.modal-body .vehicle-current-status{
    display: inline-block;
}
.modal-body .vehicle-current-status div,
.modal-body .vehicle-current-status span{
	float: left;
}
.modal-body .vehicle-current-status div{
    margin: 5px 10px 0 5px;
}



.btn-group-sm>.btn, .btn-sm {
    font-size: 14px;
    line-height: 1.42857143; 
    border-radius: 6px;
    vertical-align: top;
}



.select2-container--default .select2-selection--single{
	border-color: #ccc !important;
	height: 34px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__arrow{
    line-height: 34px !important;
    height: 34px !important;
}


/* Default dodel delete */
.model-content-delete form{
	display: inline-block;
}
.body__interface.modal-open .model-content-delete form button{
	background-color: #ff0000;
	position: relative;
	top: 1px;
	transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    border: 0;
}
.body__interface.modal-open .model-content-delete form button:hover{
	background-color: #c92424;
}
.modal-header-delete{
	background-color: #ff0000;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.model-title-delete{
	color: #fff;
}
.modal-header-delete .close{
	color: #fff;
	opacity: .9;
}
.modal-header-delete .close:hover{
	opacity: .3;
}

/* Default dodel update */
.model-content-update form{
	display: inline-block;
}
.body__interface.modal-open .model-content-update form button,
.body__interface.modal-open .model-content-update form a{
	background-color: rgba(24,183,160,1);
	position: relative;
	top: 1px;
	color: #fff;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    border: 0;
    margin: 0;
    display: inline-block;
}
.body__interface.modal-open .model-content-update form button:hover,
.body__interface.modal-open .model-content-update form a:hover{
	background-color: rgba(24,183,160,0.5);
}
.modal-header-update{
	background-color: rgba(24,183,160,1);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.model-title-update{
	color: #fff;
}
.modal-header-update .close{
	color: #fff;
	opacity: .9;
}
.modal-header-update .close:hover{
	opacity: .3;
}
#fuel-update-form .alert-danger{
    padding: 6px 12px;
}

.jplist-date-picker-range .fa.fa-minus.gap{
	float: left;
	align-self: center;
}



/* Admin user search table */
.default-div-table-header{
	background-color: #18B7A0;
	color: #fff;
}
.default-div-table .list > div.default-div-table-rows.list-item {
	border-left: 1px solid rgba(102,102,102,0.5);
	border-bottom: 1px solid rgba(102,102,102,0.5);
	border-top: 0;
	display: flex;
	position: relative;
}
.default-div-table span.vertical-align-center{
	align-self: center;
	display: block;
	margin: 0 auto;
}
.default-div-table > div.default-div-table-header > div{
    /*border-right: 1px solid rgba(255,255,255,0.5);*/
    padding: 6px 15px;
}
.default-div-table > div > div:last-child{
	border-right: 0;
}
.default-div-table > .default-div-table-header{
	border: 0;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.default-div-table-rows{
    background-color: #fff;
}
.default-div-table-rows:hover{
	background-color: #ededed;
}
.default-div-table-rows:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.default-div-table > div > div > div {
    padding: 6px 15px;
    border-right: 1px solid rgba(102,102,102,0.5);
    display: flex;
}
.default-div-table > .default-div-table-header > div{
	border-right: 1px solid rgba(255,255,255,0.5);
}
.default-div-table > div > div > div form{
	display: block;
	margin: 0 auto;
}


.default-div-table > .default-div-table-header .panel.panel-top.top-filters{
	border: 0;
	padding: 0;
	margin: 0 auto;
	display: table;
}
.default-div-table > .default-div-table-header .panel.panel-top.top-filters strong{
	float: left;
}
.default-div-table > .default-div-table-header .panel.panel-top.top-filters li{
	list-style: none;
	float: left;
	margin-left: 7px;
	position: absolute;
	right: 10px;
}
.panel.panel-top.top-filters:not(.current-sort) li:nth-child(4){
    display: none;
}
.default-div-table > .default-div-table-header .panel.panel-top.top-filters li.active{
	display: none;
}
.default-div-table span{
	cursor: pointer;
}
.sort-arrow.glyphicon{
	top: 3px;
}
.current-sort,
.current-sort span{
	color: #666;
}


.default-div-table > .jplist-no-results > div:last-child{
	border-right: 1px solid rgba(102,102,102,0.5);
}
.jplist-no-results .col-xs-12{
	border: 1px solid rgba(102,102,102,0.5);
	border-top: 0;
	padding: 6px 15px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}
.jplist-no-results .col-xs-12 p{
	margin: 0;
}




.edit-user-role .role-row{
	margin: 20px 0;
}
.edit-user-role .role-row button{
	margin-top: 10px;
}
.edit-user-role .success-msg .glyphicon,
.alert.alert-info .glyphicon{
	margin-right: 10px;
}



body.body__interface .default-button-delete{
	background-color: #ff0000 !important;
	transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
}
body.body__interface .default-button-delete:hover{
	background-color: #c92424 !important;
}
body.body__interface button[type=submit],
body.body__interface button.default-button,
body.body__interface a.default-button,
body.body__interface input.default-button,
body.body__home a.default-button,
label.default-button{
	color: #fff;
	background: rgba(24,183,160,1);
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
}
body.body__interface button[type=submit]:hover,
body.body__interface button.default-button:hover,
body.body__interface a.default-button:hover,
body.body__home a.default-button:hover,
label.default-button:hover{
	background: rgba(24,183,160,0.5);
}
.headline-title{
	margin-bottom: 30px;
}
.headline-title h2{
	border-bottom: 1px solid rgba(102,102,102,0.5);
	padding-bottom: 7px;
}

body.body__interface .form-group{
	display: flex;
	clear: both;
	width: 100%;
}
body.body__interface .form-group > div{
	align-self: center;
}
body.body__interface .form-group > div label{
	margin: 0;
}
.form-control:focus{
	border-color: rgb(24,183,160);
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(24,183,160, .6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(24,183,160, .6);
}
.paging.left{
	margin-right: 0;
}




/* Login page */
.panel-default > .panel-heading span{
	font-size: 18px;
}
.login-form .def-btn-back{
	position: absolute;
}
.login-form .row.logo-img{
	margin-top: 50px;
}
.login-form .col-xs-12.col-sm-8.col-sm-offset-2{
	background-color: #fff;
	border-radius: 20px;
}
.login-form .form-group .col-xs-12.col-sm-8.col-sm-offset-2{
	background-color: transparent;
}
.login-form .registration-type{
	margin-bottom: 50px;
}
.login-form .registration-type div:first-child .login-label-icon{
	float: left;
	padding: 0;
	color: #fff;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	width: 50%;
	font-family: 'Montserrat light';
	height: 50px;
	background: rgba(24,183,160,0.5);
}
.login-form .registration-type div:last-child .login-label-icon{
	float: right;
	padding: 0;
	color: #fff;
	width: 50%;
	font-family: 'Montserrat light';
	height: 50px;
	background: rgba(24,183,160,0.5);
}
.login-form .registration-type div:first-child .login-label-icon span,
.login-form .registration-type div:last-child .login-label-icon span{
	display: block;
	margin: 0 auto;
}
.login-form form .form-content{
	position: relative;
}
.login-form form .form-content .form-group{
	position: relative;
	z-index: 10;
}
.login-form form .form-content .form-group-input-field{
	margin-bottom: 45px;
}
.login-form form .form-content .form-group-input-field > div{
	padding: 0 40px;
}
.login-form form .form-content .form-group-input-field label{
	margin-bottom: 0;
	box-shadow: 0px 0px 30px rgba(24,183,160,0.4);
}
.login-form input[type=email],
.login-form input[type=password]{
	box-shadow: 0px 0px 30px rgba(24,183,160,0.4);
}
.login-form .registration-type input[type=radio]{
	display: none;
}
.login-form .login-bg-image{
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 5;
}
.login-form .panel{
	border: 0;
	margin-bottom: 0;
	background-color: transparent;
	position: relative;
	z-index: 10;
	box-shadow: none;
}
.login-form .panel-heading{
	background-color: transparent;
	border: 0;
	position: relative;
	z-index: 10;
}
.login-form .panel-heading .row:first-child{
	margin-top: 50px;
}
.login-form .panel-heading .logo{
	width: 315px;
	display: block;
	margin: 0 auto;
}
.login-form .panel-heading .border{
	margin-top: 30px;
	margin-bottom: 20px;
}
.login-form .panel-heading .headline{
	margin-bottom: 30px;
}
.login-form .panel-heading .border-img{
	width: 350px;
	display: block;
	margin: 0 auto;
}
.login-form .login-label-icon{
	background: #18b7a0; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #18b7a0 0%, #16a0da 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #18b7a0 0%,#16a0da 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #18b7a0 0%,#16a0da 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18b7a0', endColorstr='#16a0da',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	display: flex;
	height: 40px;
	border-bottom-left-radius: 6px;
	border-top-left-radius: 6px;
	font-size: 12px;
}
.login-form .login-label-icon span{
	align-self: center;
	font-family: 'Montserrat light';
	letter-spacing: 0.6px;
}
.login-form .login-label-icon img{
	width: 23px;
	display: block;
	margin: 0 auto;
}
.login-form input{
	height: 40px;
	border-left: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}
.login-form input[type=checkbox]{
	height: auto;
}
.login-form .control-inputs{
	margin-bottom: 110px;
}
.login-form .control-inputs > .col-xs-12.col-sm-8{
	padding: 0 40px;
}
.login-form .control-inputs .checkbox,
.login-form .control-inputs a{
	padding: 0;
}
.login-form .control-inputs .checkbox label{
	display: flex;
}
.login-form .control-inputs .checkbox label span{
	font-family: 'Montserrat semibold';
	align-self: center;
}
.login-form .control-inputs label,
.login-form .control-inputs a{
	font-family: 'Montserrat semibold';
	font-size: 10px;
}
.form-group.registration-link span,
.form-group.registration-link a{
	font-family: 'Montserrat semibold';
	font-size: 13px;
}
.form-group.registration-link span{
	padding-left: 30px;
}
.form-group.registration-link{
	margin-bottom: 115px;
}
.login-form input[type=checkbox]{
	margin-top: 2px;
}
.form-group.registration-link a{
	text-transform: uppercase;
	text-decoration: none;
	color: #666666;
	border-bottom: 1px solid #666;
	padding-bottom: 5px;
}
.login-form .form-submit{
	background-image: url('../img/login/login-button-bg-img.svg');
	background-size: 100% 100%;
}
.login-form .form-submit .form-group{
	margin-top: 15px;
}
.login-form .form-submit button{
	font-family: 'Montserrat semibold';
	font-size: 16px;
	text-transform: uppercase;
	background-color: transparent;
	box-shadow: none;
}


/* Reset password form */
form#reset-password-form .form-content .form-group-input-field{
	margin-bottom: 190px;
	margin-top: 10px;
}

/* Reset page */
#password-reset .form-group-input-field.form-group {
    position: relative;
    z-index: 10;
}
#password-reset .form-content {
    padding-bottom: 95px;
}

/* Registration form */
form#user-registration-form .form-content{
	padding-bottom: 95px;
}
form#user-registration-form .reg-active.login-label-icon{
	background: rgba(24,183,160,1);
}
form#user-registration-form .reg-active.login-label-icon span{
	color: #fff;
}
form#user-registration-form .login-label-icon span{
	color: #666;
}







/* DASHBOARD */
.navbar-default{
	margin: 0;
	border: 0;
	background-color: #F5F5F5;
}
.navbar-right{
	margin-right: 23px;
}
.navbar-default .container{
	padding: 0;
	height: 70px;
	width: 100%;
}
.navbar-default .container .navbar-header{
	display: flex;
	z-index: 99;
    position: relative;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand{
	margin-left: 23px;
	padding: 0;
	height: 70px;
	display: flex;
}
.navbar-default .navbar-brand{
	width: 230px;
}
.navbar-default .navbar-brand img{
	width: 100%;
}
.navbar-right .dropdown{
	display: flex;
    height: 70px;
}
.navbar-right .dropdown > a,
.navbar-right .dropdown > span{
	align-self: center;
	padding: 5px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: #555;
    background-color: transparent;
}
#app-navbar-collapse{
	position: relative;
}
#app-navbar-collapse label {
    cursor: pointer;
}
#edit-application-name{
	position: absolute;
	height: 70px;
	display: flex;
}
#edit-application-name div{
	align-self: center;
	margin: 0 auto;
}
#edit-application-name .app-name-block{
	display: inline-block;
}
#edit-application-name div #app-image{
	height: 70px;
	padding: 8px;
}
#edit-application-name span{
	margin-right: 5px;
}
#edit-application-name div span{
	float: left;
    margin: 18px 0px;
}
#edit-application-name div form{
	float: right;
    margin: 18px 0px 18px 10px;
}
#edit-application-name span,
#edit-application-name input{
	font-family: 'Montserrat semibold';
	font-size: 24px;
	color: #999999;
	cursor: pointer;
	align-self: center;
}
#edit-application-name input{
	font-family: 'Montserrat semibold';
	outline: 0;
	border-radius: 6px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(24,183,160, .6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(24,183,160, .6);
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	padding: 6px 12px;
	font-size: 14px;
}
#edit-application-name .form-group span{
	color: #c00;
	font-size: 13px;
    margin: 0;
}
#dashboard-content .sidebar.hidden-side{
	width: 40px;
}
#dashboard-content .sidebar{
	position: relative;
	width: 210px;
	float: left;
	background-color: #18B7A0;
	min-height: 100vh;
	height: 100%;
	transition: 0.5s ease;
}
#dashboard-content .sidebar ul{
	padding: 0;
}
#dashboard-content .sidebar ul li{
	width: 100%;
	list-style: none;
}
#dashboard-content .sidebar ul li a{
	display: block;
	margin: 0 auto;
	text-decoration: none;
	padding: 10px 0 10px 10%;
}
#dashboard-content .sidebar ul li:hover{
	background-color: rgba(153,153,153,0.6);
}
#dashboard-content .sidebar ul li.hover{
	background-color: rgba(153,153,153,0.6);
}
#dashboard-content .sidebar span{
	font-family: 'Montserrat regular';
	color: #fff;
}
#dashboard-content .sidebar img{
	width: 50px;
	margin-right: 10px;
	transition: 0.5s ease;
}
#dashboard-content .sidebar img.hidden-img{
	width: 33px;
}



#dashboard-content .content{
	position: relative;
	width: calc(100% - 210px);
	float: left;
	min-height: 100vh;
	height: 100%;
	padding-top: 5px;
    transition: 0.5s ease;
}
#dashboard-content #dashboard-content-bg{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 45%;
}
#dashboard-content .form-group .help-block{
	margin: 0;
	color: #c00;
}




/* Vehicles */
#dashboard-content .vehicles .jplist-group{
	margin-top: 10px;
}
#dashboard-content .vehicles .jplist-group label.red-label-color{
	color: rgba(196,16,40,1);
}
#dashboard-content .vehicles .jplist-group label.green-label-color{
	color: rgba(24,183,160,1);
}
#dashboard-content .vehicles .jplist-group label.orange-label-color{
	color: rgba(234,127,7,1);
}
#dashboard-content .vehicles .panel-pagination{
	margin-top: 5px;
}
#dashboard-content .vehicles .panel-pagination .paging.left{
	margin-right: 0;
}
#dashboard-content .vehicles .panel.top-filters{
	display: block;
	margin-bottom: 10px;
}
#dashboard-content .vehicles .jplist-no-results .col-xs-12{
	border: 0;
	padding: 0;
}
#dashboard-content .vehicles .vehicle-thumbnail-list a{
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 100%;
}
#dashboard-content .vehicles .vehicle-thumbnail-list .col-xs-4{
	padding: 0;
	width: calc(33.33333333% - 10px);
	margin: 0 5px 10px 5px;
	background-color: transparent;
	background-size: auto 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
#dashboard-content .vehicles .vehicle-thumbnail-list .col-xs-4:nth-child(3n+1) {
    margin-left: 0;
}
#dashboard-content .vehicles .vehicle-thumbnail-list .col-xs-4.red{
	-webkit-box-shadow: 3px -2px 0px 2px rgba(196,16,40,0.75);
	-moz-box-shadow: 3px -2px 0px 2px rgba(196,16,40,0.75);
	box-shadow: 3px -2px 0px 2px rgba(196,16,40,0.75);
}
#dashboard-content .vehicles .vehicle-thumbnail-list .col-xs-4.orange{
	-webkit-box-shadow: 3px -2px 0px 2px rgba(234,127,7,0.75);
	-moz-box-shadow: 3px -2px 0px 2px rgba(234,127,7,0.75);
	box-shadow: 3px -2px 0px 2px rgba(234,127,7,0.75);
}
#dashboard-content .vehicles .vehicle-thumbnail-list .col-xs-4.green{
	-webkit-box-shadow: 3px -2px 0px 2px rgba(24,183,160,0.75);
	-moz-box-shadow: 3px -2px 0px 2px rgba(24,183,160,0.75);
	box-shadow: 3px -2px 0px 2px rgba(24,183,160,0.75);
}
#dashboard-content .vehicles .vehicle-thumbnail-list .vehicle-thumbnail-image img{
	width: 100%;
}
#dashboard-content .vehicles .vehicle-thumbnail-list .vehicle-thumbnail-image{
	padding-bottom: 20px;
}
#dashboard-content .vehicles .vehicle-thumbnail-list .vehicle-thumbnail-license-plate{
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 52px;
	width: 100%;
	background-color: rgba(000, 000, 000, 0.5);
}
#dashboard-content .vehicles .vehicle-thumbnail-list .vehicle-thumbnail-license-plate span{
	font-size: 12px;
	display: block;
	margin: 0 auto;
	font-family: 'Montserrat semibold';
	align-self: center;
	color: #fff;
}
/* Vehicle img hover */

#dashboard-content .vehicles-img-row .vehicle-ground-view,
#dashboard-content .vehicles-img-row .vehicle-side-view{
	margin: 0 auto;
	display: table;
	position: relative;
}
#dashboard-content .vehicles-img-row .vehicle-ground-view{
	margin-top: 30px;
	margin-bottom: 30px;
}


#dashboard-content .vehicles-img-row .hover-btn{
	/*
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 30px;
	
	position: absolute;
	*/
/*	border: 2px solid #999;*/
    -webkit-border-radius: 30px;
    height: 10px;
    width: 10px;
    position: absolute;
    /*-webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; */
    /*opacity: 0.0;*/
    opacity: 1;
    cursor: pointer;
    z-index: 9;
}
/*@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}*/
#dashboard-content .vehicles-img-row .vehicle-hover-red{
	background-color: rgba(196,16,40,1);
}
#dashboard-content .vehicles-img-row .vehicle-hover-green{
	background-color: rgba(24,183,160,1);
}
#dashboard-content .vehicles-img-row .vehicle-hover-orange{
	background-color: rgba(234,127,7,1);
}
/* vehicle_image_position */
/**
    1 = Farovi +
    2 = Branici +
    3 = Poklopac motora +
    4 = Prednje staklo +
    5 = Retrovizor +
    6 = Poklopac prtljažnika +
    7 = Stražnje staklo +
    8 = Stop svjetla +
    9 = Vrata +
    10 = Pragovi vrata +
    11 = Gume +
    12 = Auspuh +
    13 = Brisači +
    14 = Ostalo ---- u tablici ispod slika
**/
#dashboard-content .vehicles-img-row .hover-btn.m-p-b1{
	top: 42px;
	left: 52px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-b2{
	top: 55px;
	left: 95px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-b3{
	top: 110px;
	left: 50px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-b4{
	top: 95px;
	left: 88px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-b5{
	top: 124px;
	left: -2px;
}
/*#dashboard-content .vehicles-img-row .hover-btn.m-p-b6{
	top: 124px;
	left: 142px;
}*/
#dashboard-content .vehicles-img-row .hover-btn.m-p-b6{
	top: 184px;
	left: 70px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-b7{
	top: 258px;
	left: 68px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-b8{
	top: 302px;
	left: 68px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-b9{
	top: 330px;
	left: 99px;
}


#dashboard-content .vehicles-img-row .hover-btn.m-p-a1{
	top: 80px;
	left: 63px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a2{
	top: 80px;
	left: 232px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a3{
	top: 27px;
	left: 142px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a4{
	top: 27px;
	left: 190px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a5{
	top: 57px;
	left: 120px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a6{
	top: 57px;
	left: 186px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a7{
	top: 73px;
	left: 16px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a8{
	top: 56px;
	left: 16px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a9{
	top: 43px;
	left: 285px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a10{
	top: 61px;
	left: 282px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a11{
	top: 87px;
	left: 148px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a12{
	top: 50px;
	left: 63px;
}
#dashboard-content .vehicles-img-row .hover-btn.m-p-a13{
	top: 49px;
	left: 245px;
}




.vehicle-ground-view .panel.panel-top.panel-pagination,
.vehicle-ground-view .panel.panel-top.top-filters,
.vehicle-side-view .panel.panel-top.panel-pagination,
.vehicle-side-view .panel.panel-top.top-filters{
	margin: 0;
}
.add-new-malfunction a{
	width: 25px;
	display: inline-block;
	position: relative;
	left: -10px;
	top: -5px;
}
.add-new-malfunction a img{
	width: 100%;
}

svg, defs, clipPath {
	height: 0; 
	position: absolute; 
	top: 0;
	left: 0;  
}

#figura {
	position: relative; 
	width: 300px; height: 95.6px;
	border-radius: 20px; 
	margin: 10px auto; 
	overflow: hidden; 
	background-color: white;
}
#figura1{
	position: relative; 
	width: 150px; height: 327px; 
	border-radius: 20px; 
	margin: 10px auto; 
	overflow: hidden; 
	background-color: white;
}

#figura::before {
	display: block; 
	content: ""; 
	position: absolute; 
	top: 0; left: 0; 
	background-image: url('../img/interface/vehicle-side-view-hover.png'); 
	background-size: cover;  
	opacity: .3;
	width: 300px; height: 95.6px; 
}
#figura1::before {
	display: block; 
	content: ""; 
	position: absolute; 
	top: 0; left: 0; 
	background-image: url('../img/interface/auto-od-gore-+-motor-filled-new-white.png'); 
	background-size: cover;  
	opacity: .3;
	width: 150px; height: 327px; 
}

#capaRecorte {
	display: block; 
	position: absolute; 
	top: 0; left: 0; 
	width: 300px; height: 95.6px; 
}
#capaRecorte1 {
	display: block; 
	position: absolute; 
	top: 0; left: 0; 
	width: 150px; height: 327px; 
}

#imagen {
	width: 300px; height: 95.6px; 
	position: absolute;
	top: 0; left: 0;
}
#imagen1 {
	width: 150px; height: 327px; 
	position: absolute;
	top: 0; left: 0;
}

#figura area {
	display: block; 
}

#figura area:nth-of-type(1):hover ~ #capaRecorte {
	-webkit-clip-path: circle(60.989106733292px,72.763065562112px,21.899563421607px);
	clip-path: url(#A1); 
}

#figura area:nth-of-type(2):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(244.89834363947px, 72.998544738689px, 22.135042598183px);
	clip-path: url(#A2); 
}

#figura area:nth-of-type(3):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(92.072358041378px,35.792834839615px,113.26548393326px,24.018876010794px,132.10381805937px,16.954500713502px,148.82283959629px,12.244917181974px,159.65488171881px,9.8901254162094px,166.01281948637px,9.1836878864802px,170.25144466475px,9.4191670630566px,162.48063183773px,31.083251308087px);
	clip-path: url(#A3); 
}

#figura area:nth-of-type(4):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(178.49321584492px,9.8901254162094px,172.37075725394px,30.612292954934px,198.27346667734px,30.612292954934px,208.6345504467px,30.141334601781px,215.93440492057px,29.199417895476px,222.52782186471px,27.551063659441px,226.76644704309px,25.431751070253px,227.94384292597px,20.957646715301px,228.41480127912px,17.189979890078px,227.00192621966px,14.599708947738px,224.41165527732px,12.48039635855px,220.87946762868px,11.067521299092px,215.22796739084px,10.361083769362px);
	clip-path: url(#A4); 
}

#figura area:nth-of-type(5):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(87.36277450985px,33.438043073851px,85.243461920662px,41.444335077449px,86.185378626968px,49.686106257624px,88.069212039579px,58.163356614375px,90.188524628767px,65.69869026482px,92.072358041378px,70.408273796348px,94.191670630566px,74.646898974724px,96.54646239633px,77.472649093641px,97.959337455789px,78.414565799946px,160.12584007196px,78.17908662337px,167.42569454583px,77.472649093641px,165.54186113322px,66.169648617973px,164.12898607376px,43.32816849006px,175.19650737285px,5.8869794144104px,166.01281948637px,5.4160210612576px,157.30008995305px,6.5934169441396px,151.17763136206px,7.0643752972925px,144.11325606477px,8.477250356751px,137.28435994405px,10.361083769362px,130.69094299991px,12.244917181974px,121.97821346658px,15.77710483062px,115.14931734587px,17.896417419808px,109.26233793146px,20.722167538725px,102.43344181074px,23.547917657642px,96.075504043177px,27.080105306288px,90.894962158496px,29.434897072052px);
	clip-path: url(#A5); 
}

#figura area:nth-of-type(6):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(175.19650737285px,5.8869794144104px,202.27661267914px,5.8869794144104px,210.75386303589px,6.3579377675632px,216.6408424503px,7.0643752972925px,221.58590515841px,8.477250356751px,227.23740539624px,10.832042122515px,231.00507222146px,13.657792241432px,232.88890563407px,19.07381330269px,232.88890563407px,22.606000951336px,232.18246810435px,28.022022012593px,231.24055139804px,33.202563897275px,229.592197162px,38.854064135109px,227.70836374939px,44.270085196366px,224.17617610075px,51.098981317082px,220.40850927552px,56.51500237834px,217.81823833318px,62.40198179275px,215.93440492057px,65.463211088243px,213.81509233139px,68.524440383737px,212.40221727193px,70.879232149501px,210.28290468274px,72.998544738689px,206.75071703409px,75.824294857606px,200.15730008995px,76.295253210759px,194.97675820527px,76.530732387335px,167.42569454583px,77.001690740488px,165.07090278007px,66.405127794549px,164.12898607376px,42.621730960331px);
	clip-path: url(#A6); 
}

#figura area:nth-of-type(7):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(35.792834839615px,83.595107684627px,13.422313064856px,82.182232625169px,7.5353336504453px,81.240315918863px,3.7676668252226px,79.121003329676px,2.1193125891877px,76.530732387335px,1.6483542360349px,69.230877913466px,0.23547917657642px,62.872940145903px,3.5321876486462px,56.985960731493px,7.2998544738689px,51.805418846811px,12.009438005397px,45.918439432401px,18.602854949537px,42.621730960331px,24.9607927171px,40.502418371143px,31.55420966124px,38.618584958532px,36.028314016192px,37.44118907565px,35.557355663039px,45.212001902672px,28.963938718899px,45.212001902672px,24.254355187371px,45.918439432401px,19.780250832419px,47.095835315283px,15.77710483062px,49.686106257624px,12.009438005397px,52.276377199964px,10.125604592786px,55.573085672034px,14.599708947738px,55.573085672034px,19.07381330269px,55.573085672034px,24.9607927171px,54.395689789152px,29.670376248628px,52.276377199964px,33.438043073851px,49.215147904471px,35.557355663039px,45.447481079248px);
	clip-path: url(#A7); 
}

#figura area:nth-of-type(8):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(10.125604592786px,55.102127318881px,14.128750594585px,50.863502140506px,18.131896596384px,48.273231198165px,23.076959304489px,45.447481079248px,28.728459542323px,45.447481079248px,32.260647190969px,44.976522726095px,34.615438956733px,44.976522726095px,33.438043073851px,48.037752021589px,31.55420966124px,50.628022963929px,28.25750118917px,52.747335553117px,24.254355187371px,53.689252259423px,20.251209185572px,54.866648142305px,14.599708947738px,55.573085672034px);
	clip-path: url(#A8); 
}

#figura area:nth-of-type(9):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(290.81678307187px,30.141334601781px,279.04282424305px,34.379959780157px,280.22022012593px,38.618584958532px,281.86857436197px,40.73789754772px,284.69432448089px,42.621730960331px,287.5200745998px,43.32816849006px,290.34582471872px,43.32816849006px,292.46513730791px,43.092689313484px,294.5844498971px,42.857210136908px,293.87801236737px,36.499272369344px,292.70061648448px,32.496126367545px);
	clip-path: url(#A9); 
}

#figura area:nth-of-type(10):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(269.85913635657px,67.111565324278px,269.85913635657px,77.943607446793px,279.5137825962px,76.766211563911px,283.98788695116px,75.117857327876px,288.93294965926px,73.469503091842px,292.93609566106px,70.172794619772px,295.5263666034px,66.640606971126px,298.35211672232px,61.695544263021px,298.82307507547px,56.985960731493px,298.82307507547px,54.631168965728px,299.5295126052px,51.334460493659px,299.76499178178px,48.979668727894px,298.58759589889px,45.918439432401px,294.5844498971px,42.857210136908px,293.87801236737px,35.792834839615px,291.05226224845px,30.141334601781px,290.34582471872px,26.138188599982px,289.16842883584px,25.196271893676px,274.80419906468px,29.434897072052px,269.38817800342px,30.141334601781px);
	clip-path: url(#A10); 
}


#figura area:nth-of-type(11):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(87.36277450985px,72.527586385536px,92.307837217955px,72.056628032383px,95.369066513448px,76.766211563911px,98.430295808942px,78.414565799946px,104.31727522335px,78.414565799946px,111.61712969722px,78.414565799946px,123.62656770262px,78.17908662337px,132.8102555891px,78.17908662337px,142.46490182873px,77.943607446793px,150.94215218548px,77.943607446793px,161.774194308px,77.943607446793px,172.13527807736px,77.237169917064px,203.92496691518px,76.059774034182px,208.39907127013px,75.117857327876px,211.46030056562px,72.763065562112px,218.76015503949px,72.763065562112px,218.99563421607px,82.888670154898px,87.833732863003px,83.124149331475px);
	clip-path: url(#A11); 
}

#figura area:nth-of-type(12):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(35.557355663039px,44.976522726095px,42.621730960331px,43.32816849006px,53.453773082846px,41.679814254026px,61.460065086444px,40.266939194567px,71.114711326077px,38.618584958532px,79.121003329676px,37.676668252226px,85.243461920662px,37.912147428803px,85.243461920662px,44.03460601979px,85.949899450392px,49.450627081047px,86.891816156697px,53.689252259423px,88.069212039579px,59.576231673833px,89.717566275614px,63.814856852209px,92.307837217955px,71.58566967923px,87.127295333274px,72.29210720896px,85.243461920662px,64.521294381938px,81.946753448593px,58.869794144104px,78.650044976523px,54.866648142305px,75.353336504453px,51.805418846811px,70.879232149501px,50.157064610776px,65.934169441396px,48.744189551318px,59.811710850409px,48.508710374742px,53.689252259423px,49.215147904471px,48.979668727894px,50.863502140506px,44.03460601979px,53.689252259423px,40.73789754772px,57.221439908069px,38.147626605379px,61.695544263021px,36.499272369344px,67.818002854008px,35.792834839615px,72.998544738689px);
	clip-path: url(#A12); 
}

#figura area:nth-of-type(13):hover ~ #capaRecorte {
	-webkit-clip-path: polygon(231.47603057462px, 32.496126367545px,250.31436470073px, 32.025168014392px,268.91721965027px, 30.141334601781px,269.85913635657px, 65.463211088243px,266.5624278845px, 59.10527332068px,263.73667776559px, 55.337606495458px,259.49805258721px, 52.276377199964px,253.84655234938px, 49.450627081047px,249.607927171px, 48.508710374742px,244.19190610974px, 48.508710374742px,238.54040587191px, 49.215147904471px,234.77273904669px, 50.157064610776px,231.00507222146px, 51.805418846811px,227.94384292597px, 54.395689789152px,224.6471344539px, 57.692398261222px,222.29234268814px, 61.931023439597px,220.40850927552px, 65.463211088243px,218.99563421607px, 70.172794619772px,218.99563421607px, 72.763065562112px,211.46030056562px, 72.527586385536px,217.34727998003px, 63.579377675632px,222.29234268814px, 54.631168965728px,226.53096786651px, 47.331314491859px,229.592197162px, 40.031460017991px);
	clip-path: url(#A13);
}







/* Figura 1 */
#figura1 area:nth-of-type(1):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(70.444444444444px,11.777777777778px,82.333333333333px,56.333333333333px,76px,56px,69.555555555556px,56.222222222222px,63.666666666667px,57.444444444444px,60px,58.444444444444px,55.888888888889px,60px,50.777777777778px,62.666666666667px,45px,66px,40px,69.555555555556px,34.555555555556px,53.555555555556px,36.333333333333px,46.888888888889px,37.444444444444px,42.333333333333px,39.555555555556px,37px,41px,33.111111111111px,43.333333333333px,29px,46.111111111111px,24.333333333333px,49px,21.111111111111px,51.555555555556px,18.222222222222px,55.111111111111px,15.888888888889px,60.111111111111px,13.666666666667px,64.666666666667px,12.444444444444px);
	clip-path: url(#B1); 
}

#figura1 area:nth-of-type(2):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(48.222222222222px,12.222222222222px,42.555555555556px,15.666666666667px,38.111111111111px,19.666666666667px,34.888888888889px,22.888888888889px,31.666666666667px,27.222222222222px,28.222222222222px,33px,26px,38.777777777778px,24.333333333333px,43.666666666667px,22.888888888889px,49.555555555556px,21.333333333333px,56.666666666667px,19.888888888889px,65.333333333333px,19.111111111111px,72.555555555556px,18.444444444444px,81.888888888889px,18.555555555556px,85.777777777778px,28.111111111111px,86.111111111111px,29px,82.222222222222px,30.777777777778px,80.333333333333px,33.555555555556px,78.222222222222px,37.111111111111px,76px,41px,74px,50.666666666667px,70.222222222222px,58.777777777778px,68.222222222222px,67.555555555556px,67px,75.777777777778px,66.444444444444px,83px,67px,91.333333333333px,68.222222222222px,99.666666666667px,70.555555555556px,106.66666666667px,72.888888888889px,114px,76.666666666667px,119.22222222222px,80px,120.66666666667px,81.444444444444px,121.77777777778px,84.222222222222px,122.55555555556px,86.888888888889px,132px,86.444444444444px,132px,82.111111111111px,131.22222222222px,74.333333333333px,130.33333333333px,66.666666666667px,129.11111111111px,58.888888888889px,127.66666666667px,52px,125.88888888889px,44.777777777778px,123.55555555556px,36.888888888889px,120.66666666667px,30.777777777778px,116.88888888889px,25px,112.55555555556px,20px,107.88888888889px,16.111111111111px,103.22222222222px,13px,98.555555555556px,10.666666666667px,93.777777777778px,8.5555555555556px,88.777777777778px,7.4444444444444px,81.333333333333px,6.3333333333333px,74.222222222222px,6.1111111111111px,69.888888888889px,6.1111111111111px,64px,6.5555555555556px,56.888888888889px,8.5555555555556px);
	clip-path: url(#B2); 
}

#figura1 area:nth-of-type(3):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(28.111111111111px,90.333333333333px,28.777777777778px,99.111111111111px,29.666666666667px,105.33333333333px,31.333333333333px,113px,33.111111111111px,119.77777777778px,35.444444444444px,128px,37.444444444444px,134.44444444444px,38.888888888889px,138.11111111111px,40.666666666667px,139.44444444444px,42.888888888889px,139.77777777778px,46.888888888889px,138.88888888889px,51.111111111111px,138.33333333333px,57.333333333333px,137.66666666667px,64.111111111111px,137px,71.222222222222px,137px,78.111111111111px,137px,85.555555555556px,137px,92.111111111111px,137.44444444444px,99.555555555556px,138px,105.44444444444px,139.11111111111px,108.55555555556px,139.55555555556px,110.77777777778px,138.55555555556px,112.55555555556px,135.11111111111px,116.33333333333px,121.88888888889px,121.11111111111px,102.11111111111px,122.22222222222px,94.222222222222px,121.88888888889px,89.777777777778px,119.77777777778px,86.777777777778px,116.44444444444px,83.333333333333px,112.44444444444px,81.333333333333px,107.55555555556px,79.333333333333px,103.55555555556px,77.555555555556px,96.666666666667px,75.444444444444px,89.777777777778px,73.777777777778px,83px,72.555555555556px,75.222222222222px,72.111111111111px,67.555555555556px,72.777777777778px,62.333333333333px,73.444444444444px,55.555555555556px,74.888888888889px,48.666666666667px,77px,42.777777777778px,79px,38.555555555556px,80.777777777778px,34.333333333333px,82.888888888889px,30.777777777778px,85.777777777778px);
	clip-path: url(#B3); 
}

#figura1 area:nth-of-type(4):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(97.111111111111px,75.444444444444px,77.444444444444px,115.55555555556px,81.333333333333px,117.55555555556px,101.66666666667px,77.111111111111px,98.777777777778px,74.555555555556px,100.66666666667px,75.222222222222px);
	clip-path: url(#B4); 
}

#figura1 area:nth-of-type(5):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(15.555555555556px,111.22222222222px,16px,115.44444444444px,16.222222222222px,118.66666666667px,15.555555555556px,121.11111111111px,12px,119.11111111111px,10.888888888889px,119.77777777778px,8px,122.77777777778px,5.4444444444444px,125.22222222222px,3.4444444444444px,126px,1.5555555555556px,125.22222222222px,0.44444444444444px,123.44444444444px,0.88888888888889px,120.55555555556px,2.7777777777778px,117.33333333333px,7.3333333333333px,112.88888888889px,9.7777777777778px,111.88888888889px,12.333333333333px,112.33333333333px,);
	clip-path: url(#B5); 
}

/*#figura1 area:nth-of-type(6):hover ~ #capaRecorte1 {
-webkit-clip-path: polygon(134.66666666667px,110.55555555556px,134px,115.55555555556px,134px,119.33333333333px,134.66666666667px,121.11111111111px,137.88888888889px,119.11111111111px,139.33333333333px,119.55555555556px,140.77777777778px,120.88888888889px,143.11111111111px,123.44444444444px,145.11111111111px,125.55555555556px,146.88888888889px,126px,149px,125.11111111111px,149.77777777778px,122.33333333333px,149px,119.77777777778px,146.33333333333px,116.33333333333px,143.11111111111px,113.22222222222px,140.55555555556px,111.66666666667px,137.88888888889px,112.33333333333px);
clip-path: url(#B6); 
}*/

#figura1 area:nth-of-type(6):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(38.333333333333px,144.44444444444px,43.222222222222px,142.66666666667px,52.333333333333px,141.66666666667px,60.444444444444px,141px,69px,140.55555555556px,81.333333333333px,140.55555555556px,89.555555555556px,140.88888888889px,98.444444444444px,141.55555555556px,111.33333333333px,143.88888888889px,111.44444444444px,145.22222222222px,110.11111111111px,152.11111111111px,109.55555555556px,158.44444444444px,108.88888888889px,168.88888888889px,108.55555555556px,177.88888888889px,108.11111111111px,188px,108.22222222222px,197px,108.55555555556px,208.11111111111px,108.88888888889px,219.22222222222px,109.55555555556px,228px,103.22222222222px,229.88888888889px,94.222222222222px,231.33333333333px,86.666666666667px,231.66666666667px,78.444444444444px,232px,69.888888888889px,232.11111111111px,62.666666666667px,231.66666666667px,55px,231.33333333333px,45.777777777778px,229.55555555556px,40.666666666667px,227.77777777778px,41px,220.22222222222px,41.444444444444px,207.22222222222px,41.777777777778px,196.22222222222px,41.777777777778px,185.55555555556px,41.555555555556px,171.33333333333px,41.111111111111px,162.22222222222px,40.111111111111px,153.22222222222px,39.333333333333px,147.66666666667px);
	clip-path: url(#B6); 
}

#figura1 area:nth-of-type(7):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(40.444444444444px,233.44444444444px,34.222222222222px,267.55555555556px,34.555555555556px,271.55555555556px,35.666666666667px,274px,39.333333333333px,277.33333333333px,43.333333333333px,279.11111111111px,49.444444444444px,280.44444444444px,57.555555555556px,281.66666666667px,68.666666666667px,282.88888888889px,74.888888888889px,283.11111111111px,83px,282.66666666667px,88.888888888889px,282px,97.333333333333px,281.11111111111px,105.44444444444px,279.44444444444px,110.77777777778px,277.33333333333px,113.33333333333px,275.22222222222px,114.88888888889px,272.88888888889px,116px,270.33333333333px,115.33333333333px,264.66666666667px,109.66666666667px,233.55555555556px,103.22222222222px,235.22222222222px,97.111111111111px,235.66666666667px,91.444444444444px,236.11111111111px,86.222222222222px,236.44444444444px,79.777777777778px,237px,71.555555555556px,236.77777777778px,64.111111111111px,236.44444444444px,57.555555555556px,236.33333333333px,52.111111111111px,235.66666666667px,45.777777777778px,234.55555555556px);
	clip-path: url(#B7); 
}

#figura1 area:nth-of-type(8):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(31.666666666667px,250.66666666667px,28.777777777778px,266.44444444444px,28.222222222222px,276.88888888889px,28.888888888889px,284.11111111111px,30.333333333333px,290.55555555556px,34.888888888889px,300.33333333333px,38.555555555556px,304.77777777778px,41.444444444444px,306.77777777778px,46.777777777778px,308.11111111111px,52.666666666667px,308.77777777778px,65.111111111111px,309.44444444444px,79.222222222222px,309.44444444444px,94.222222222222px,309.11111111111px,105.66666666667px,307.44444444444px,109.55555555556px,306.66666666667px,112.55555555556px,303.88888888889px,116.11111111111px,299.44444444444px,118.88888888889px,292.66666666667px,121.22222222222px,284.44444444444px,121.77777777778px,277.55555555556px,121.44444444444px,271.44444444444px,121px,265.44444444444px,120.33333333333px,259.77777777778px,118.55555555556px,250.66666666667px,116.88888888889px,243.44444444444px,115.33333333333px,237.11111111111px,113.88888888889px,232.66666666667px,109.55555555556px,233.55555555556px,105.77777777778px,234.11111111111px,101.44444444444px,235.22222222222px,96.333333333333px,235.66666666667px,91px,236px,83px,236.33333333333px,74.555555555556px,236.44444444444px,66.555555555556px,236.33333333333px,57.888888888889px,236px,50.444444444444px,235.22222222222px,43.888888888889px,234.22222222222px,40px,233.44444444444px,36.111111111111px,232.66666666667px,34.222222222222px,239.33333333333px,32.777777777778px,244.33333333333px);
	clip-path: url(#B8); 
}

#figura1 area:nth-of-type(9):hover ~ #capaRecorte1 {
	-webkit-clip-path: polygon(94.444444444444px,319.33333333333px,94.555555555556px,322.11111111111px,96.444444444444px,323.22222222222px,97px,325.66666666667px,97.777777777778px,326.66666666667px,99.333333333333px,326.44444444444px,100.55555555556px,326px,100.55555555556px,323.11111111111px,102.33333333333px,322.11111111111px,102.55555555556px,318.55555555556px);
	clip-path: url(#B9);
}

clipPath{
	background-color: red;
}

#crop-modal .modal-body,
#crop-modal-vehicle .modal-body,
#crop-modal-update .modal-body{
	margin-bottom: 30px;
    padding: 15px 5px;
}
#crop-modal .cropit-preview,
#crop-modal-vehicle .cropit-preview,
#crop-modal-update .cropit-preview{
	background-color: #f8f8f8;
	background-size: cover;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-top: 7px;
	width: 719px;
	height: 359.5px;
	margin: 0 auto;
}

#crop-modal .setting-tools,
#crop-modal-vehicle .setting-tools,
#crop-modal-update .setting-tools{
	width: 719px;
	display: block;
	margin: 0 auto;
}
.rotate-cw,
.rotate-ccw{
	max-width: 150px;
}
#crop-modal .rotate-cw, .rotate-ccw,
#crop-modal-vehicle .rotate-cw, .rotate-ccw,
#crop-modal-update .rotate-cw, .rotate-ccw{
	float: left;
}
#crop-modal .setting-tools .col-xs-3 a,
#crop-modal-vehicle .setting-tools .col-xs-3 a,
#crop-modal-update .setting-tools .col-xs-3 a{
	display: inline-block;
}
#crop-modal .setting-tools .col-xs-3 a:last-child,
#crop-modal-vehicle .setting-tools .col-xs-3 a:last-child,
#crop-modal-update .setting-tools .col-xs-3 a:last-child{
	margin: 0 10px;
}
#crop-modal .rotate-cw,
#crop-modal-vehicle .rotate-cw,
#crop-modal-update .rotate-cw{
	margin: 0 10px;
}
#crop-modal .cropit-preview-image-container,
#crop-modal-vehicle .cropit-preview-image-container,
#crop-modal-update .cropit-preview-image-container{
	cursor: move;
}
#crop-modal .image-size-label,
#crop-modal-vehicle .image-size-label,
#crop-modal-update .image-size-label{
	margin-top: 10px;
}
#crop-modal input,
#crop-modal-vehicle input,
#crop-modal-update input,
.export{
	display: block;
}
#crop-modal button,
#crop-modal-vehicle button,
#crop-modal-update button{
	margin-top: 10px;
}



/* User edit settings */
.edit-user-settings #user-image,
.edit-user-settings #edit-user-image{
	float: left;
}
body.body__interface .form-group > div #edit-user-image label{
	margin: 0 auto;
}
#user-settings-update #userPassword{
	width: calc(100% - 32px);
	float: left;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
#user-settings-update .default-button.getNewPass{
	height: 34px;
	float: left;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
#user-settings-update .default-button.getNewPass .fa{
	margin-top: 5px;
}



/* Vehicles */
.vehicles-home{
	position: relative;
}
#vehicles-add-new,
#vehicles-details{
	position: absolute;
	right: 0;
	transition: 0.5s ease-in-out;
	border: 2px solid rgba(24,183,160,0.5);
	border-right: 0;
	background: #fff;
	height: auto;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	padding: 30px;
}
#vehicles-details.right,
#vehicles-add-new.right{
	right: -100%;
}
#select-vehicle,
#add-vehicle{
	display: inline-block;
	padding: 7px 10px;
	height: 34px;
}
#vehicles-details .alert.alert-info{
	padding: 10px;
}
.vehicles-img-row{
	margin-top: 30px;
}
.vehicles-img-row img{
	display: block;
	margin: 0 auto;
}
.default-no-img-vehicle{
	width: 100%;
	background-color: #DFDFDF;
	border-radius: 5px;
	display: flex;
	background-size: auto 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.default-no-img-vehicle label{
	height: 23px;
	display: block;
	margin: 0 auto;
	align-self: center;
	position: relative;
	z-index: 5;
	width: 100%;
	justify-content: center;
	display: flex;
}
.default-no-img-vehicle .vehicle-image{
	align-self: center;
}
.activity-div label{
	display: block;
	text-align: center;
	font-size: 18px;
}
.activity-div label.activity-0.checkedRadio{
	color: red;
}
.activity-div label.activity-1.checkedRadio{
	color: #16e600;
}
.activity-div input{
	display: none;
}
#delete-vehicle{
	background-color: #ff0000;
	padding: 7px 10px;
	height: 34px;
}
#delete-vehicle:hover{
	background-color: #c92424;
}



#vehicles-add-new #malfunction-create-reminder {
    box-shadow: none;
}
#vehicles-add-new a.open-popover.vehicle-reminder-question-mark{
	display: flex;
    margin-left: calc(100% - 38px);
}
#vehicles-add-new a.open-popover.vehicle-reminder-question-mark img{
	width: 25px;
    align-self: center;
}
#vehicles-add-new div.popover.in{
	width: 268px;
}



/* Configuration page */
body.body__interface a.default-button.remove-employee-model{
	background-color: #ff0000;
	height: 30px;
}
body.body__interface a.default-button.remove-employee-model:hover{
	background-color: #c92424;
}
.employees .default-div-table-rows .modal.in .modal-dialog{
	display: inline-block;
}
.employees .default-div-table-rows form{
	display: inline-block;
}
.add-employee{
	margin-top: 30px;
}
.add-employee div.form-group-input-field .col-xs-12{
	display: flex;
}
.add-employee .form-group > div > label{
	align-self: center;
}
.add-employee .form-group > div > div.col-xs-9{
	padding-left: 15px;
	display: flex;
}
.add-employee form#user-registration-form .form-content{
	padding-bottom: 0px;
}
.add-employee .form-submit .col-sm-12{
	padding-right: 0;
	display: block;
}
.add-employee #password {
    width: calc(100% - 32px);
    float: left;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.add-employee .default-button.getNewPass {
    height: 34px;
    float: left;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.add-employee .default-button.getNewPass .fa {
    margin-top: 6px;
}
.configuration-home .default-div-table > div {
	border-left: 1px solid rgba(102,102,102,0.5);
	border-bottom: 1px solid rgba(102,102,102,0.5);
	border-top: 0;
	display: flex;
}
.configuration-home .default-div-table > div > div {
    padding: 6px 15px;
    display: flex;
    justify-content: center;
}
.configuration-home .default-div-table > div > div > form{
	display: block;
	margin: 0 auto;
}
.default-div-table > .default-div-table-header > div:last-child{
	border-right: 0;
}
.configuration-home .default-div-table > .default-div-table-rows > div {
    border-right: 1px solid rgba(102,102,102,0.5);
}
.configuration-home .default-div-table > .default-div-table-header{
	border: 0;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}


/* Vehicles */
.vehicles h4{
	font-family: 'Montserrat semibold';
	border-bottom: 1px solid rgba(102,102,102,0.5);
	padding-bottom: 10px;
	margin-bottom: 25px;
}
.vehicles #insert-vehicle{
	position: absolute;
	top: 10px;
	right: 10px;
}


/* Monitoring */
.dashboard-fixed-container{
	position: relative;
}
.dashboard-fixed-container .draggable-button{
	position: absolute;
	top: 10px;
	right: 0;
}
.monitoring h4,
.monitoring h5{
	font-family: 'Montserrat semibold';
}
.monitoring h4{
	border-bottom: 1px solid rgba(102,102,102,0.5);
	padding-bottom: 10px;
	margin-bottom: 25px;
}
.monitoring h5{
	text-align: center;
	border-bottom: 1px solid rgba(102,102,102,0.5);
	margin: 0;
	padding-bottom: 10px;
}
.monitoring .monitoring-number{
	font-family: 'Montserrat semibold';
	font-size: 50px;
}
.monitoring .dashboard-fixed-container .row .col-sm-12 .col-xs-6:last-child {
    border-left: 1px solid rgba(102,102,102,0.5);
}
.monitoring > .dashboard-fixed-container > .row{
	margin-bottom: 60px;
}
.monitoring > .dashboard-fixed-container > .row > .col-sm-12:first-child{
	padding-right: 10px;
}
.monitoring > .dashboard-fixed-container > .row > .col-sm-12:last-child{
	padding-left: 10px;
}
.monitoring .dashboard-fixed-container .row .col-sm-12 .col-xs-6{
    padding: 0 15px;
}
.bubble.red-b,
.bubble.orange-b,
.bubble.green-b{
	background-size: cover;
	padding: 13.5px 0;
	width: 85px;
	height: 37px;
	float: right;
	font-size: 12px;
}
.bubble.red-b{
	background-image: url('../img/interface/red-bubble-bg.svg');
}
.bubble.orange-b{
	background-image: url('../img/interface/orange-bubble-bg.svg');
}
.bubble.green-b{
	background-image: url('../img/interface/green-bubble-rot-bg.svg');
}
.monitoring > .dashboard-fixed-container > .row.monitoring-configuration-edit{
	margin-bottom: 20px;
}
.sortable-container{
	min-height: 150px;
	padding: 20px 0;
}
.sortable-container.edit{
	background-color: #f3f3f3;
}
.choose-item-row{
	display: inline-block;
	float: left;
}
.choose-item-row:last-child{
	float: right;
}
.choose-item-row button{
	display: inline-block;
	padding: 7px 10px;
	height: 34px;
	float: right;
}
.column{
	float:left;
	width: calc(50% - 5px);
}
.column > div{
	display: inline-block;
	width: 100%;
}
.connected-sortable{
	margin: 0 auto;
	list-style: none;
	width: 100%;
	min-height: 100px;
}
.column:nth-child(1){
    margin-right: 5px;
}
.column:nth-child(2){
    margin-left: 5px;
}
.new-item{
	margin-bottom: 25px;
}
.new-item.ui-sortable-handle{
	position: relative;
	padding: 10px;
	background-color: #eae9e9;
	-webkit-transition: transform .25s ease-in-out;
	-moz-transition: transform .25s ease-in-out;
	-o-transition: transform .25s ease-in-out;
	transition: transform .25s ease-in-out;
	margin-bottom: 5px;
	-webkit-transition: box-shadow .25s ease-in-out;
	-moz-transition: box-shadow .25s ease-in-out;
	-o-transition: box-shadow .25s ease-in-out;
	transition: box-shadow .25s ease-in-out;
}
.new-item.ui-sortable-handle .remove-new-item{
	position: absolute;
	z-index: 101;
	top: 0;
	right: 0;
}
.new-item.ui-sortable-handle:hover {
    cursor: pointer;
    background-color: #eaeaea;
  }
/* styles during drag */
.new-item.ui-sortable-helper {
	background-color: #e5e5e5;
	-webkit-box-shadow: 0 0 8px rgba(53,41,41, .8);
	-moz-box-shadow: 0 0 8px rgba(53,41,41, .8);
	box-shadow: 0 0 8px rgba(53,41,41, .8);
	transform: scale(1.015);
	z-index: 100;
}
.new-item.ui-sortable-placeholder {
	background-color: #ddd;
	-moz-box-shadow: inset 0 0 10px #000000;
	-webkit-box-shadow: inset 0 0 10px #000000;
	box-shadow: inset 0 0 10px #000000;
}



/* Reports */
.reports-home .nav-tabs-container ul.nav-tabs span{
	position: relative;
	display: block;
	padding: 10px 15px;
}
.report-fuel-fill-list-container .default-div-table > div.default-div-table-header > div,
#fuel-fill-list-container .default-div-table > div.default-div-table-header > div{
	width: 12.5%;
}
.report-fuel-fill-list-container .jplist-panel.top-filters .date-picker{
	height: 34px;
}

#report-fuel-fill-list-container .panel.panel-top.top-filters:not(.current-sort) li:nth-child(3) {
    display: none;
}
body.body__interface .jplist-date-picker-range .form-group{
	clear: none;
	width: auto;
	float: left;
	height: 34px;
	display: flex;
	margin-bottom: 0;
}
body.body__interface .jplist-date-picker-range .form-group .fa-minus{
	margin-right: 11px;
}
.nav-tabs-container .default-div-table > .default-div-table-header .panel li.active{
	display: none;
}
.nav-tabs-container .default-div-table > .default-div-table-header .panel li {
    list-style: none;
    float: left;
    margin-left: 7px;
    position: absolute;
    right: 10px;
    top: 6px;
}
.nav-tabs-container .default-div-table > .default-div-table-header .panel{
	border: 0;
	padding: 0;
	margin: 0 auto;
	display: table;
}


#fuel-fill-list-container .vehicle-date,
#report-fuel-fill-list-container .vehicle-date{
	word-spacing: 9999px;
}

/* Work orders */
.reports-home .nav-tabs-container ul.nav-tabs span{
	position: relative;
	display: block;
	padding: 10px 15px;
}
.work-order-list-container .default-div-table > div.default-div-table-header > div,
#work-order-list-container .default-div-table > div.default-div-table-header > div,
.work-order-list-container .default-div-table > div > div > div{
	width: 10%;
}
.work-order-list-container .jplist-panel.top-filters .date-picker{
	height: 34px;
}
#work-order-list-container .panel.panel-top.top-filters:not(.current-sort) li:nth-child(3) {
    display: none;
}
.work-order-list-container .top-filters .form-group{
	width: auto;
}
.work-order-list-container .top-filters input.date-picker{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.work-order-list-container .top-filters .filter input{
	height: 34px;
	width: auto;
}
#generatePDF{
	height: 34px;
}


/* Comments */
.comment-column{
	margin-top: 40px;
}
.comment-column > .row{
	clear: both;
}
.comment-column > span,
.comment-column > label{
	float: left;
}
.comment-column .user-image-circle{
	margin-left: 0;
	float: left;
}
#comment-bubble{
	background-image: url('../img/interface/green-bubble-bg.svg');
	background-size: cover;
	margin-bottom: 30px;
}
#comment-bubble a{
	text-decoration: none;
	color: #fff;
}
.comment-content{
	width: calc(100% - 50px);
}
.comment-content .row:last-child{
	margin-top: 10px;
}
.comment-content-user-name,
.comment-content-title{
	font-family: 'Montserrat semibold';
}
.comment-content-title{
	text-transform: uppercase;
	color: #18b7a0;
}
.comment-content-body{
	margin-top: 15px;
}
.comment-content-date{
	font-size: 12px;
}
.comment-content-answer,
.comment-content-answer a{
	font-family: 'Montserrat semibold';
	text-transform: uppercase;
	color: #18b7a0;
}
#add-comment-modal div.form-group{
	margin: 0;
}
#add-comment-modal #add-comment-form{
	width: 100%;
}
#add-comment-modal #add-comment-form > .col-xs-12{
	margin-bottom: 15px;
}
#add-comment-modal #add-comment-modal .modal-footer{
	padding-left: 15px;
	padding-right: 15px;
}
.comments-list-container{
	padding-left: 30px;
	padding-right: 30px;
}
.right-sidebar-comment-row{
	margin-bottom: 30px;
}
.right-sidebar-comment-row .user-image-circle span.glyphicon-user{
	display: flex;
	align-self: center;
	margin: 0 auto;
}


/* Single comment */
.single-comment .comment-body .user-image-circle{
	margin-left: 0;
	margin-bottom: 5px;
}
.single-comment .comment-body .user-image-circle span.glyphicon-user{
	display: table;
	align-self: center;
	margin: 0 auto;
	font-size: 21px;
}
.single-comment .comment-body .comment-creator{
	font-family: 'Montserrat semibold';
}
.single-comment .comment-title-row{
	margin-top: 10px;
	color: rgba(24,183,160,1);
	text-transform: uppercase;
}
.single-comment .comment-title-row a{
	text-transform: capitalize;
}
.single-comment .comment-details-row{
	margin-top: 10px;
	padding-left: 10px;
}
.single-comment .comment-title-row h3{
	font-family: 'Montserrat semibold';
	border-bottom: 1px solid rgba(102,102,102,0.5);
	padding-bottom: 7px;
	margin-bottom: 20px;
}
.single-comment .comment-replys-title-row{
	margin-top: 30px;
	color: rgba(24,183,160,1);
}
.single-comment .comment-user-reply{
	margin-bottom: 20px;
	padding-bottom: 7px;
	border-bottom: 1px solid rgba(102,102,102,0.5);
}
.single-comment .edit-comment{
	position: absolute;
	right: 30px;
	float: right;
}

.single-comment-edit .comment-body #edit-comment-reply-form .comment-details-row{
	padding: 0;
}
.single-comment-edit .comment-body #edit-comment-reply-form input{
	color: rgba(24,183,160,1);
	font-size: 24px;
}
.single-comment-edit .comment-body #edit-comment-reply-form input,
.single-comment-edit .comment-body #edit-comment-reply-form textarea{
	width: 50%;
}
.single-comment-edit .comment-body #edit-comment-reply-form .submit-row{
	padding: 10px 0;
}
.single-comment-edit .comment-body #edit-comment-reply-form .submit-row a,
.single-comment-edit .comment-body #edit-comment-reply-form .submit-row button{
	float: left;
}
.single-comment-edit .comment-body #edit-comment-reply-form .submit-row a{
	margin-left: 10px;
}
.single-comment-edit .comment-body #edit-comment-reply-form .form-group{
	margin-bottom: 5px;
}
.single-comment-edit .comment-body #edit-comment-reply-form .form-group .help-block{
	text-transform: none;
	font-size: 14px;
	font-family: 'Montserrat light';
}
.single-comment-edit .comment-body #edit-comment-reply-form .comment-title-row h3{
	border-bottom: 0;
	margin-bottom: 0;
}





.panel.top-filters{
	margin-bottom: 30px;
	display: flex;
}
.panel{
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
}

.drop-down{
	float:left;
	width:130px;
	margin: 0 20px 0 0;
}
.drop-down .panel{float:left;
	width:125px;
	height:22px;
	line-height:22px;
	overflow:hidden;
	cursor:pointer;
	margin:0;
	padding:0 0 0 5px
}
.drop-down ul{
	position:relative;
	top: 4px;
	left: -13px;
	z-index:1000;
	width:130px;
	display:none;
	overflow:hidden;
	background-color:#fff;
	border:1px solid #ccc;
	list-style:none;
	border-radius:0 0 3px 3px;
	margin:0;
	padding:0;
}
.drop-down ul li{
	cursor:pointer;
	width:100%;
	float:left;
	background-color:#fff;
	padding:0 0 0 16px;
}
.drop-down ul li:hover{background-color:#ececec}

.search-title{margin:5px 10px 0 0}
.paging span{cursor:pointer;color:#0381bb;margin:0 10px 0 0}
.paging .current{font-weight:700;color:#f03800}
.filter,.pagingprev,.pagingmid,.pagingnext{
	float:left;
}
.paging,.paging-results{float:left;margin:5px 20px 5px 0}
.reset-box{display:block;margin:4px 20px 5px 0}
.reset-btn{
	float:left;
	border:0;
	background:rgba(24,183,160,1);
	margin:0 0 0 20px;
	cursor: pointer;
	color: #fff;
	border-radius: 5px;
	padding: 8px 12px;
	height: 34px;
	transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
}
.reset-btn:hover{
	background-color: rgba(24,183,160,0.5);
}
.filter-buttons{float:left;clear:left;margin:10px 20px 0 0;}
.filter-buttons input{vertical-align:bottom;background:#fff;border:1px solid #0c5f1f;border-radius:3px;color:#0c5f1f}
.filter-button.selected{border:1px solid #ca3f1a;color:#ca3f1a}

.jplist select{margin:7px 10px 0 0;border:1px solid #ddd}
.ui-slider{margin-top:5px}
.filter-button-span{color:#0c5f1f}
.filter-button-span.selected{color:#ca3f1a}
.range-filter{margin-right:20px}
.range-filter.selected{color:#ca3f1a}
.counter{margin-right:20px}
.filter-buttons-group{float:left;margin:10px 20px 10px 0;border:1px dotted #ccc;padding-left:20px;}
.filter-buttons-group .selected{color:#ca3f1a}
.button-text-filter{color:#0c5f1f;margin-right:15px}
.button-text-filter.selected{color:#ca3f1a}
.title{font-size:16px;color:#f03800}
.date{float:right;color:#440e00}
.price{color:#17161b}
.jplist-hidden{display:none}
.list{background:#fff;}
.ul-li-list{background:#fff;padding-top:20px;padding-bottom:20px;}
.ul-li-list .list-item{float:left;width:100%}
.ul-li-list .list-box{width:100%;float:right}
.ul-li-list .img{float:left;margin-right:20px}
.ul-li-list .block{float:left}
.ul-li-list .desc{text-align:justify}
.ul-li-list p{margin:0;padding:0 25px 5px 0}
.panel-top{margin-bottom:10px}
.panel-bottom{margin-top:20px}


.jplist-group{
	display: flex;
}
.jplist-group label{
	align-self: center;
	margin-right: 20px;
}
.jplist-group label.active{
	color: #18B7A0;
}
.jplist-group input {
    display: none;
}


.panel-pagination{
	text-align: center;
	margin-top: 25px;
}
.panel-pagination div{
	display: inline-block;
}









/* ON/OFF Radio */
.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}


.tgl-bth-input + .tgl-btn {
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  border: 1px solid #e8eae9;
}
.tgl-bth-input + .tgl-btn:after {
  border-radius: 2em;
  background: #fbfbfb;
  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}
.tgl-bth-input + .tgl-btn:hover:after {
  will-change: padding;
}
.tgl-bth-input + .tgl-btn:active {
  box-shadow: inset 0 0 0 2em #e8eae9;
}
.tgl-bth-input + .tgl-btn:active:after {
  padding-right: .8em;
}
.tgl-bth-input:checked + .tgl-btn {
  background: rgba(24,183,160,1);
}
.tgl-bth-input:checked + .tgl-btn:active {
  box-shadow: none;
}
.tgl-bth-input:checked + .tgl-btn:active:after {
  margin-left: -.8em;
}




/* Fuel */
#fuel-fill-list,
#fuel-fill-list-tab2,
#fuel-fill-list-tab3{
	margin-top: 30px;
}
#fuel-fill-list .jplist-group{
	margin-left: 20px;
}
#fuel-fill-list .jplist-group label{
	margin-left: 10px;
	margin-right: 10px;
}
.fuel-fill-list-container .default-div-table > div.default-div-table-header > div{
	width: 12.5%;
}



/* Malfunction */
#vehicle-malfunction-list-container .jplist-group{
	margin-left: 20px;
}
#malfunction-store-form .malfunction-before-image{
	margin-bottom: 15px;
}
.malfunction-list-container{
	padding: 0 30px;
}
.malfunction-store-form-container{
	border: 2px solid rgba(24,183,160,0.5);
    border-right: 0;
    background: #fff;
    height: auto;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 30px;
}
#vehicle-malfunction-list-container .default-div-table{
	padding-left: 30px;
}
#vehicle-malfunction-list-container .complete-check-mark{
	position: absolute;
	left: -35px;
	padding: 0;
	border: 0;
	height: 100%;
}
#vehicle-malfunction-list-container .complete-check-mark a{
	display: flex;
}
#vehicle-malfunction-list-container .complete-check-mark img{
	width: 27px;
	align-self: center;
}
#vehicle-malfunction-list-container .modal-body{
	padding-bottom: 30px;
}
.completed-malfunction-bg{
	background-color: rgba(24,183,160,0.4);
}
#confirm .modal-body .remove-malfunction-name{
	font-weight: 600;
}
#vehicle-malfunction-list-container .top-filters .filter .select2{
	min-width: 300px;
}




@media (min-width: 1500px){
	.dashboard-fixed-container{
		display: block;
		clear: both;
		width: 645px;
		float: left;
	}
}
@media (min-width: 768px){
	.body__interface.modal-open #edit .model-content-update form button{
		margin-top: 0;
	}
	#fuel-store-form .col-sm-3{
	    width: calc(25% - 22px);
	}
	#fuel-store-form button{
		margin-top: 25px;
		padding: 7px 10px;
	}
	#crop-modal .modal-dialog,
	#crop-modal-update .modal-dialog,
	#crop-modal-vehicle .modal-dialog{
		width: 735px;
	}

}
@media (min-width: 768px) and (max-width: 1199px){
	.home-dashboard-content .monitoring{
		clear: both;
	}
	.home-dashboard-content .monitoring .column{
		width: 100%;
	}
	.home-dashboard-content .comment-column{
		position: absolute;
		right: 0;
	}
	.vehicles-home #vehicles-add-new,
	.vehicles-home #vehicles-details{
		position: relative;
	    right: auto;
	    border: 2px solid rgba(24,183,160,0.5);
	    border-radius: 5px;
	    width: calc(100% - 60px);
    	margin: 30px;
	}
	.custom-table-overflow{
		overflow-x: scroll;
	}
	.custom-table-overflow .default-div-table{
		width: 1100px;
	}
	#fuel-store-form .col-sm-3{
	    width: calc(50% - 22px);
	}
	#fuel-store-form button{
		margin-left: 15px;
    	margin-top: 0;
	}
	#vehicle-malfunction-list-container .default-div-table {
	    padding-left: 35px;
	}
	#work-order-list-container{
		margin-top: 15px;
	}
	#work-order-list-container .jplist-panel.panel-top.top-filters,
	#report-fuel-fill-list-container .jplist-panel.panel-top.top-filters{
		display: inline-block;
		width: 100%;
	}
	#work-order-list-container .jplist-panel.panel-top.top-filters .jplist-date-picker-range,
	#report-fuel-fill-list-container .jplist-panel.panel-top.top-filters .jplist-date-picker-range{
		display: inline-block;
	    width: 100%;
		float: left;
	    margin-bottom: 15px;
	}
	#work-order-list-container .jplist-panel.panel-top.top-filters .filter:nth-child(2){
		padding-left: 0;
	}
	#work-order-list-container .jplist-panel.panel-top.top-filters .filter:nth-child(3){
		padding-right: 0;
	}
	#work-order-list-container .jplist-panel.panel-top.top-filters .reset-button-div,
	#report-fuel-fill-list-container .jplist-panel.panel-top.top-filters .reset-button-div{
		display: inline-block;
		float: right;
	    clear: both;
	}
	#work-order-list-container .jplist-panel.panel-top.top-filters .reset-button-div .reset-btn{
		margin-left: 0;
		margin-top: 15px;
	}
	#report-fuel-fill-list-container .jplist-panel.panel-top.top-filters .reset-button-div .reset-btn{
		margin-left: 0;
	}
	#report-fuel-fill-list-container,
	#work-order-list-container .jplist-panel.top-filters{
		margin-top: 15px;
	}
	#report-fuel-fill-list-container .row-table-filters{
		width: 1100px;
	}
}
@media (max-width: 991px){
	.malfunction-home .malfunction-list-container{
		margin-top: 30px;
	}
	.malfunction-store-form-container{
		border-right: 2px solid rgba(24,183,160,0.5);
		border-radius: 5px;
		margin-top: 30px;
	}
	.malfunction-home .malfunction-store-form-container{
		margin-left: 16.66666667%;
	}
	.employees{
		margin-top: 50px;
	}
	.add-employee{
	    border: 2px solid rgba(24,183,160,0.5);
	    border-radius: 5px;
	    padding: 30px;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	
}
@media (max-width: 1500px){
	.dashboard-fixed-container{
		width: auto;
	}
}








.monitoring .dashboard-fixed-container .test-rows .col-sm-12 .col-xs-6:last-child {
    border-left: 1px solid rgba(102,102,102,0.5);
}
.column {
  float:left;
  width: calc(50% - 5px);
}
.connected-sortable {
  margin: 0 auto;
  list-style: none;
  width: 100%;
  min-height: 100px;
}
.column:nth-child(1) {
    margin-right: 5px;
}
.column:nth-child(2) {
    margin-left: 5px;
}
li.draggable-item {
  width: inherit;
  padding: 15px 20px;
  background-color: #eae9e9;
  -webkit-transition: transform .25s ease-in-out;
  -moz-transition: transform .25s ease-in-out;
  -o-transition: transform .25s ease-in-out;
  transition: transform .25s ease-in-out;
  margin-bottom: 5px;
  -webkit-transition: box-shadow .25s ease-in-out;
  -moz-transition: box-shadow .25s ease-in-out;
  -o-transition: box-shadow .25s ease-in-out;
  transition: box-shadow .25s ease-in-out;
}
li.draggable-item:hover {
    cursor: pointer;
    background-color: #eaeaea;
  }
/* styles during drag */
li.draggable-item.ui-sortable-helper {
  background-color: #e5e5e5;
  -webkit-box-shadow: 0 0 8px rgba(53,41,41, .8);
  -moz-box-shadow: 0 0 8px rgba(53,41,41, .8);
  box-shadow: 0 0 8px rgba(53,41,41, .8);
  transform: scale(1.015);
  z-index: 100;
}
li.draggable-item.ui-sortable-placeholder {
  background-color: #ddd;
  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}





.clearable{
  background: #fff url('../img/interface/x.gif') no-repeat right -10px center !important;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center !important; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */




.ui_tpicker_second_label.ui_tpicker_unit_hide,
.ui_tpicker_second.ui_tpicker_unit_hide,
.ui_tpicker_millisec_label.ui_tpicker_unit_hide,
.ui_tpicker_millisec.ui_tpicker_unit_hide,
.ui_tpicker_microsec_label.ui_tpicker_unit_hide,
.ui_tpicker_microsec.ui_tpicker_unit_hide,
.ui_tpicker_timezone_label.ui_tpicker_unit_hide,
.ui_tpicker_timezone.ui_tpicker_unit_hide{
	display: none;
}

.ui_tpicker_time input.ui_tpicker_time_input{
	width: 100%;
}






#dashboard-content .content.full{
	width: calc(100% - 40px);
}
.sidebar .hamburger{
	margin-top: 10px;
	display: inline-block;
	width: 100%;
	padding-right: 10px;
}
.sidebar .hamburger #burger-container{
    position:relative;
    width: 20px;
	float: right;
}

.sidebar .hamburger #burger{
    cursor:pointer;
    display:block;
}


.sidebar .hamburger #burger span{
	background: #fff;
	display: block;
	width: 20px;
	height: 3px;
	margin-bottom: 3px;
	position: relative;
	top: 0;
	transition: all ease-in-out 0.4s;
	border-radius: 10px;
	outline: none;
}

.sidebar .hamburger #burger-container.open span:nth-child(2){
    width: 0;
    opacity:0;
}

.sidebar .hamburger #burger-container.open span:nth-child(1){
    transform: rotate(-45deg);
    top: 7px;
}

.sidebar .hamburger #burger-container.open span:nth-child(3){
    transform: rotate(45deg);
    top:-5px;
}