body{
    color:#000000;
    font-family: Verdana;
    font-size: 12px;
	background-attachment: fixed;
	overflow-x: hidden;
	width: 100%;
	height:100%;
	background-image: url(images/back.png);
	background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center; 
	margin: 0;
	padding: 0;
	font-size: 16px;
}
.trip_details_head{
	background-color: #000000;
	color: #ffffff;
	font-weight: bold;
	border-bottom: 1px solid #ffffff;
	padding: 5px;
}


.languages{
	margin-left: 10px;
	margin-top: 10px;
	
}
.lang_selector{
	background-color: #ffffff;
	padding: 5px;
	border: #f85145 solid 2px;
	border-radius: 5px;
	margin-bottoM: 10px;
	font-weight: bold;
	width: 120px;
	text-align: center;
	cursor: pointer;
}

.trip_details{
	background-color: #660000;
	color: #ffffff;
	font-weight: bold;
	border-bottom: 1px solid #ffffff;
	padding: 5px;
	font-size: 12px;
}
.trip_details2{
	color: #000000;
	border-bottom: 1px solid #555555;
	padding: 5px;
	font-size: 10px;
}

.photo_button{
	cursor: pointer;
}

.trip_details_1{
	float: left; 
	width: 19%;
	border-right: 1px solid #ffffff;
	padding-left: 5px;
}
.trip_details_11{
	float: left; 
	width: 10%;
	border-right: 1px solid #555555;
	padding-left: 5px;
}

.trip_details_diesel{
	float: left; 
	width: 19%;
	border-right: 1px solid #ffffff;
	padding-left: 5px;
	cursor: pointer;
}

.trip_details_adblue{
	float: left; 
	width: 19%;
	border-right: 1px solid #ffffff;
	padding-left: 5px;
	cursor: pointer;
}

.trip_details_exp{
	float: left; 
	width: 19%;
	border-right: 1px solid #ffffff;
	padding-left: 5px;
	cursor: pointer;
}

.trip_detailed{
	display: none;
}

.driver_filter{
	width: 100%;
	background-color: #ffffff;
}
.filter_left{
	float: left;
	width: 10%;
	font-weight: bold;
	text-align: right;
	margin-top: 25px;
	font-size: 14px;
}
.filter_right{
	float: left;
	width: 30%;
}
.filter_left1{
	float: left;
	width: 10%;
	font-weight: bold;
	text-align: right;
	margin-top: 25px;
	font-size: 14px;
}
.filter_right1{
	float: left;
	width: 30%;
}
.filter_last{
	float: right;
	width: 20%;
}


.report_container{
	background-color: #ffffff;
}
.show_filter{
	font-size: 18px;
	font-weight: bold;
	color: #f85145;
	background-color: #32323d;
	text-align: center;
	padding-top: 12px;
	width: 90%;
	padding-bottom: 12px;
	cursor: pointer;
	display: block;
	margin: auto;
	margin-top: 15px;
	border: #f85145 solid 2px;
	border-radius: 5px;
}

.close_win{
	float: right;
	margin-right: 10px;
	font-weight: bold;
	color: #ffffff;
	margin-top: 3px;
	font-size: 20px;
	cursor: pointer;
}
.current_data{
	margin-left: 20px;
	float: left;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	margin-top: 15px;
}

.trailer_window{
	width: 500px;
	background-color: #ffffff;
	border: 3px solid #f85145;
	position: fixed;
	left: 50%;
	margin-left: -250px;
	margin-top: 10px;
	box-shadow: 0px 0px 15px #000000;
	border-radius: 5px;
	display: none;
}
.trailer_title{
	width: 100%;
	background-color: #32323d;
	color: #ffffff;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 18px;
}
.window_frame{
	padding: 10px;
}

.income_man_grid{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto auto;
	gap: 1px;
	background-color: #333333;
	padding: 1px;
}
.income_man_grid > div {
  background-color: #f3f5f7;
  text-align: right;
  padding: 5px;
  font-size: 12px;
}
.income_man_grid > .item1_s {
  background-color: #00b050;
  color: #ffffff;
  text-align: right;
  padding: 5px;
  font-size: 12px;
}


.header{
	position: fixed;
	width: 100%;
	height: 80px;
	z-index: 9999;
	background-color: rgba(0,0,0,0.5);
	border-bottom: #f85145 solid 1px;
}
.page_container{
	margin: 0;
	padding: 0;
	padding-top: 80px;
	width: 100%;
	height: 100%;
}
.button_prepare{
	margin: auto;
	margin-top: 4vw;
	width:36vw; 
	height:36vw;
}
.button_center{
	margin: 0;
	text-align: center;
}
.button_prepare2{
	margin: auto;
	margin-top: 4vw;
	width:36vw; 
	height:36vw;
	display: inline-block;
	margin-left: 2vw;
	margin-right: 2vw;
}
.floating_window{
	width: 80%;
	position: absolute;
	z-index: 9998;
	left: 50%;
	margin-left: -40%;
	background-color: #ffffff;
	border: #f85145 solid 2px;
	border-radius: 5px;
	margin-top: 10px;
}
.floating_window2{
	width: 80%;
	position: absolute;
	left: 50%;
	margin-left: -40%;
	background-color: #ffffff;
	border: #f85145 solid 2px;
	border-radius: 5px;
	margin-top: 10px;
}
h1{
	margin: 0;
	padding: 0;
	padding-left: 10px;
}
.window_title{
	width: 100%;
	height: 54px;
	background-color: #000000;
	color: #ffffff;
	border-radius: 4px 4px 0px 0px;
}
.close_button{
	width: 48px;
	height: 48px;
	background-image: url(images/close_button.png);
	float: right;
	cursor: pointer;
	margin-right: 10px;
	margin-top: 3px;
}
.window_content{
	margin: 5px;
}
.new_plan{
	background-image: url(images/plus.png);
	width: 100%;
	height: 100%;
	margin: auto;
	background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center; 
	cursor: pointer;
	display: block;
}
.new_event{
	background-image: url(images/event.png);
	width: 100%;
	height: 100%;
	margin: auto;
	background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center; 
	cursor: pointer;
	display: block;
}
.new_expense{
	background-image: url(images/expense.png);
	width: 100%;
	height: 100%;
	margin: auto;
	background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center; 
	cursor: pointer;
	display: block;
}

.logo{
	background-image: url(images/logo.png);
	width: 180px;
	height: 62px;
	display: block;
	cursor: pointer;
	margin: auto;
	margin-top: 30px;
	-webkit-filter: drop-shadow(0px 0px 5px #ffffff);
	filter: drop-shadow(0px 0px 5px #ffffff);
}

.logout{
	background-image: url(images/logout.png);
	width: 38px;
	height: 44px;
	float: right;
	margin-right: 15px;
	margin-top: 15px;
	cursor: pointer;
}

.both{
	clear: both;
}

.logo2{
	background-image: url(images/home.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 10px;
	-webkit-filter: drop-shadow(0px 0px 5px #ffffff);
	filter: drop-shadow(0px 0px 5px #ffffff); 
}

.eco_grid{
	font-size: 10px;
	display: grid;
	grid-template-columns: 70px auto 70px 70px 70px 70px 70px 70px;
	gap: 1px;
	background-color: #333333;
	padding: 1px;
	width: 100%;
}
.eco_grid > div {
  background-color: #f3f5f7;
  text-align: left;
  padding: 5px;
}

.footer_user{
	float: right;
	margin-right: 20px;
}

.eco_grid2{
	font-size: 10px;
	display: grid;
	grid-template-columns: 70px auto 70px 70px 70px 70px 70px 70px;
	gap: 1px;
	background-color: #333333;
	padding: 1px;
	width: 100%;
}
.eco_grid2 > div {
  background-color: #f3f5f7;
  text-align: left;
  padding: 5px;
}

.eco_grid222{
	font-size: 10px;
	display: grid;
	grid-template-columns: 70px 70px auto 170px 170px 170px 70px 70px;
	gap: 1px;
	background-color: #333333;
	padding: 1px;
	width: 100%;
}
.eco_grid222 > div {
  background-color: #f3f5f7;
  text-align: left;
  padding: 5px;
}

.route_list{
	background-image: url(images/route_list.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 20px;
}
.expense_list{
	background-image: url(images/expense_list.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 20px;
}

.driver-courses{
	background-image: url(images/courses.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 20px;
}
.claims{
	background-image: url(images/claims.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 20px;
}
.driver-consultations{
	background-image: url(images/consultations.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 20px;
}
#myChart{
	background-color: #ffffff;
}

.counter{
	position: absolute;
	background-color: red;
	font-weight: bold;
	border: #000000 solid 1px;
	border-radius: 5px;
	font-size: 10px;
	text-align: center;
	min-height: 13px;
	color: #ffffff;
	margin-left: -5px;
	margin-top: -5px;
	padding-left: 3px;
	padding-right: 3px;
}
.driver-progress{
	background-image: url(images/progress.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 20px;
}
.last_period{
	font-size: 10px;
}
.send_to_1, .send_to_2, .end_action{
	cursor: pointer;
}

.finish{
	background-image: url(images/finish.png);
	width: 44px;
	height: 44px;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 17px;
	margin-left: 20px;
}

.login_field{
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	width: 90%;
	background-color: #ffffff;
	text-align: center;
	padding: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
	display: block;
	margin: auto;
	margin-top: 30px;
	border: #555555 solid 2px;
	border-radius: 5px;
}
.field_label{
	margin: auto;
	font-weight: bold;
	margin-bottom: 5px;
	width: 100%;
	text-align: center;
	
}
.form_field{
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	width: 90%;
	background-color: #ffffff;
	text-align: center;
	padding: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
	display: block;
	margin: auto;
	margin-bottom: 10px;
	border: #555555 solid 2px;
	border-radius: 5px;
}
.form_field_week{
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	width: 90%;
	background-color: #ffffff;
	text-align: center;
	padding: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
	display: block;
	margin: auto;
	margin-top: 13px;
	margin-bottom: 10px;
	border: #555555 solid 2px;
	border-radius: 5px;
}
.select_fix{
	width: 90%;
	margin: auto;
}
.sums{
	display: none;
}
.select2{
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	width: 100%;
	background-color: #ffffff;
	text-align: center;
	padding: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
	display: block;
	margin-bottom: 10px;
	border-radius: 5px;
	
}
.quantity{
	border: #555555 solid 1px;
	border-radius: 5px;
	padding: 10px;
}

.select2.select2-container .select2-selection {
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  height: 54px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border: #555555 solid 2px;
  outline: none !important;
  transition: all .15s ease-in-out;
}
.form_field2{
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	width: 90%;
	background-color: #ffffff;
	text-align: center;
	padding: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
	display: block;
	margin: auto;
	margin-bottom: 10px;
	border: #555555 solid 2px;
	border-radius: 5px;
}
input[type=file] {
    margin: 0 auto;
}
.form_field3{
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	background-color: #ffffff;
	text-align: center;
	padding: 12px;
	display: block;
	margin: auto;
	text-align: center;
	border: #555555 solid 2px;
	border-radius: 5px;
}

.login_button, .trip_save_button, .even_save_button, .expense_save_button, .change_trailer_button, .claim_save_button{
	font-size: 18px;
	font-weight: bold;
	color: #f85145;
	background-color: #32323d;
	text-align: center;
	padding-top: 12px;
	width: 90%;
	padding-bottom: 12px;
	cursor: pointer;
	display: block;
	margin: auto;
	margin-top: 30px;
	border: #f85145 solid 2px;
	border-radius: 5px;
}
.login_title{
	width: 100%;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	margin: auto;
	margin-top: 10px;
	text-align: center;
	text-shadow: 0px 0px 5px #000000;
}
.login_container{
	position: absolute;
	top: 20%;
	width: 100%;
}

.footer {
	width: 100%;
	color: #999999;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 30px;
	font-size: 10px;
	padding-left: 10px;
	background-color: rgba(0,0,0,0.5);
}